add decode by address

.gitignore

@@ -1,4 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.env
 
 # dependencies
 /node_modules

package.json

@@ -11,6 +11,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "abi-decoder": "^2.4.0",
+    "axios": "^0.21.1",
     "framer-motion": "^4",
     "highlight.js": "^11.2.0",
     "react": "^17.0.2",

src/components/Body/AddressInput.js

@@ -12,6 +12,7 @@ function AddressInput({
   contractAddress,
   setContractAddress,
   btnDisabled,
+  decode,
   bg,
 }) {
   return (
@@ -27,6 +28,7 @@ function AddressInput({
         />
       </FormControl>
       <Button
+        onClick={decode}
         leftIcon={<UnlockIcon />}
         style={{ marginTop: "20px" }}
         colorScheme="blue"

src/components/Body/Output.js

@@ -6,7 +6,12 @@ function Output({ value }) {
   return (
     <FormControl>
       <FormLabel>Output:</FormLabel>
-      <JsonTextArea value={value} readOnly={true} ariaLabel="output" />
+      <JsonTextArea
+        value={value}
+        readOnly={true}
+        ariaLabel="output"
+        canResize={true}
+      />
     </FormControl>
   );
 }

src/components/Body/index.js

@@ -12,15 +12,18 @@ import {
   FormLabel,
   Divider,
   Box,
+  useToast,
 } from "@chakra-ui/react";
 import ABIInput from "./ABIInput";
 import AddressInput from "./AddressInput";
 import Output from "./Output";
 import abiDecoder from "abi-decoder";
+import axios from "axios";
 
 function Body() {
   const { colorMode } = useColorMode();
   const bgColor = { light: "white", dark: "gray.700" };
+  const toast = useToast();
 
   const [calldata, setCalldata] = useState("");
   const [contractAddress, setContractAddress] = useState("");
@@ -30,9 +33,66 @@ function Body() {
   const [disableABIDecodeBtn, setDisableABIDecodeBtn] = useState(true);
   const [disableAddressDecodeBtn, setDisableAddressDecodeBtn] = useState(true);
 
-  const decode = () => {
+  const decodeWithABI = () => {
     abiDecoder.addABI(JSON.parse(abi));
-    setOutput(JSON.stringify(abiDecoder.decodeMethod(calldata), undefined, 2));
+    const decoded = JSON.stringify(
+      abiDecoder.decodeMethod(calldata),
+      undefined,
+      2
+    );
+    if (decoded) {
+      setOutput(decoded);
+    } else {
+      toast({
+        title: "Can't Decode Calldata",
+        status: "error",
+        isClosable: true,
+      });
+    }
+  };
+
+  const decodeWithAddress = async () => {
+    // get ABI
+    const response = await axios.get(
+      "https://api.etherscan.io/api?module=contract&action=getabi",
+      {
+        params: {
+          address: contractAddress,
+          apikey: process.env.REACT_APP_ETHERSCAN_API_KEY,
+        },
+      }
+    );
+
+    if (response.data.message === "OK") {
+      const res_abi = response.data.result;
+      setAbi(JSON.stringify(JSON.parse(res_abi), undefined, 2));
+      toast({
+        title: "ABI Fetched from Address",
+        status: "success",
+        isClosable: true,
+      });
+      abiDecoder.addABI(JSON.parse(res_abi));
+      const decoded = JSON.stringify(
+        abiDecoder.decodeMethod(calldata),
+        undefined,
+        2
+      );
+      if (decoded) {
+        setOutput(decoded);
+      } else {
+        toast({
+          title: "Can't Decode Calldata",
+          status: "error",
+          isClosable: true,
+        });
+      }
+    } else {
+      toast({
+        title: "ABI Not found",
+        status: "error",
+        isClosable: true,
+      });
+    }
   };
 
   useEffect(() => {
@@ -52,7 +112,7 @@ function Body() {
   }, [calldata, contractAddress]);
 
   return (
-    <Container mt="16">
+    <Container mt="16" minW="2xl">
       <FormControl>
         <FormLabel>Enter Calldata</FormLabel>
         <Textarea
@@ -74,7 +134,7 @@ function Body() {
               abi={abi}
               setAbi={setAbi}
               btnDisabled={disableABIDecodeBtn}
-              decode={decode}
+              decode={decodeWithABI}
               bg={bgColor[colorMode]}
             />
           </TabPanel>
@@ -83,13 +143,14 @@ function Body() {
               contractAddress={contractAddress}
               setContractAddress={setContractAddress}
               btnDisabled={disableAddressDecodeBtn}
+              decode={decodeWithAddress}
               bg={bgColor[colorMode]}
             />
           </TabPanel>
         </TabPanels>
       </Tabs>
       <Divider />
-      <Box mt="4">
+      <Box mt="4" mb="40">
         <Output value={output} />
       </Box>
     </Container>

src/components/common/JsonTextArea.js

@@ -17,6 +17,7 @@ function JsonTextArea({
   placeholder,
   ariaLabel,
   readOnly,
+  canResize,
 }) {
   const { colorMode } = useColorMode();
   const borderColor = { light: "gray.500", dark: "gray.400" };
@@ -42,6 +43,7 @@ function JsonTextArea({
       roundedLeft="md"
       roundedRight="4px"
       fontFamily={"SFMono-Regular,Menlo,Monaco,Consolas,monospace"}
+      resize={canResize ? "both" : "none"}
     />
   );
 }

yarn.lock

@@ -3406,6 +3406,13 @@ axe-core@^4.0.2:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.2.tgz#7cf783331320098bfbef620df3b3c770147bc224"
   integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -6015,6 +6022,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.2.tgz#dd73c8effc12728ba5cf4259d760ea5fb83e3147"
   integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
 
+follow-redirects@^1.10.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
+  integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"