direct ABI decoding functional

apoorvlathey · Aug 8, 2021 · 49eb492 · 49eb492
1 parent 9e54406
commit 49eb492
Show file tree

Hide file tree

Showing 18 changed files with 1,668 additions and 123 deletions.
diff --git a/package.json b/package.json
@@ -3,12 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^1.0.14",
+    "@chakra-ui/react": "^1.6.5",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "abi-decoder": "^2.4.0",
+    "framer-motion": "^4",
+    "highlight.js": "^11.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "react-simple-code-editor": "^0.11.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,12 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import Body from "./components/Body/index";
+import Navbar from "./components/Navbar";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div>
+      <Navbar />
+      <Body />
     </div>
   );
 }

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/Body/ABIInput.js b/src/components/Body/ABIInput.js
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import { VStack, FormControl, FormLabel, Button } from "@chakra-ui/react";
+import { UnlockIcon } from "@chakra-ui/icons";
+import JsonTextArea from "../common/JsonTextArea";
+
+function ABIInput({ abi, setAbi, btnDisabled, decode, bg }) {
+  return (
+    <VStack>
+      <FormControl>
+        <FormLabel>Input ABI</FormLabel>
+        <JsonTextArea
+          value={abi}
+          setValue={setAbi}
+          bg={bg}
+          placeholder="JSON ABI"
+          ariaLabel="json abi"
+        />
+      </FormControl>
+      <Button
+        onClick={decode}
+        leftIcon={<UnlockIcon />}
+        style={{ marginTop: "20px" }}
+        colorScheme="blue"
+        disabled={btnDisabled}
+      >
+        Decode
+      </Button>
+    </VStack>
+  );
+}
+
+export default ABIInput;
diff --git a/src/components/Body/AddressInput.js b/src/components/Body/AddressInput.js
@@ -0,0 +1,41 @@
+import React from "react";
+import {
+  VStack,
+  Input,
+  FormControl,
+  FormLabel,
+  Button,
+} from "@chakra-ui/react";
+import { UnlockIcon } from "@chakra-ui/icons";
+
+function AddressInput({
+  contractAddress,
+  setContractAddress,
+  btnDisabled,
+  bg,
+}) {
+  return (
+    <VStack>
+      <FormControl>
+        <FormLabel>Contract Address</FormLabel>
+        <Input
+          value={contractAddress}
+          onChange={(e) => setContractAddress(e.target.value)}
+          placeholder="Address"
+          aria-label="contract address"
+          bg={bg}
+        />
+      </FormControl>
+      <Button
+        leftIcon={<UnlockIcon />}
+        style={{ marginTop: "20px" }}
+        colorScheme="blue"
+        disabled={btnDisabled}
+      >
+        Decode
+      </Button>
+    </VStack>
+  );
+}
+
+export default AddressInput;
diff --git a/src/components/Body/Output.js b/src/components/Body/Output.js
@@ -0,0 +1,14 @@
+import React, { useState } from "react";
+import { chakra, useColorMode, FormControl, FormLabel } from "@chakra-ui/react";
+import JsonTextArea from "../common/JsonTextArea";
+
+function Output({ value }) {
+  return (
+    <FormControl>
+      <FormLabel>Output:</FormLabel>
+      <JsonTextArea value={value} readOnly={true} ariaLabel="output" />
+    </FormControl>
+  );
+}
+
+export default Output;
diff --git a/src/components/Body/index.js b/src/components/Body/index.js
@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from "react";
+import {
+  Container,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Textarea,
+  FormControl,
+  useColorMode,
+  FormLabel,
+  Divider,
+  Box,
+} from "@chakra-ui/react";
+import ABIInput from "./ABIInput";
+import AddressInput from "./AddressInput";
+import Output from "./Output";
+import abiDecoder from "abi-decoder";
+
+function Body() {
+  const { colorMode } = useColorMode();
+  const bgColor = { light: "white", dark: "gray.700" };
+
+  const [calldata, setCalldata] = useState("");
+  const [contractAddress, setContractAddress] = useState("");
+  const [abi, setAbi] = useState("");
+  const [output, setOutput] = useState("");
+
+  const [disableABIDecodeBtn, setDisableABIDecodeBtn] = useState(true);
+  const [disableAddressDecodeBtn, setDisableAddressDecodeBtn] = useState(true);
+
+  const decode = () => {
+    abiDecoder.addABI(JSON.parse(abi));
+    setOutput(JSON.stringify(abiDecoder.decodeMethod(calldata), undefined, 2));
+  };
+
+  useEffect(() => {
+    if (calldata && abi) {
+      setDisableABIDecodeBtn(false);
+    } else {
+      setDisableABIDecodeBtn(true);
+    }
+  }, [calldata, abi]);
+
+  useEffect(() => {
+    if (calldata && contractAddress) {
+      setDisableAddressDecodeBtn(false);
+    } else {
+      setDisableAddressDecodeBtn(true);
+    }
+  }, [calldata, contractAddress]);
+
+  return (
+    <Container mt="16">
+      <FormControl>
+        <FormLabel>Enter Calldata</FormLabel>
+        <Textarea
+          placeholder="Calldata"
+          aria-label="Calldata"
+          value={calldata}
+          onChange={(e) => setCalldata(e.target.value)}
+          bg={bgColor[colorMode]}
+        />
+      </FormControl>
+      <Tabs mt="6" variant="enclosed" isFitted>
+        <TabList>
+          <Tab>Input ABI</Tab>
+          <Tab>Enter Address</Tab>
+        </TabList>
+        <TabPanels mt="3">
+          <TabPanel>
+            <ABIInput
+              abi={abi}
+              setAbi={setAbi}
+              btnDisabled={disableABIDecodeBtn}
+              decode={decode}
+              bg={bgColor[colorMode]}
+            />
+          </TabPanel>
+          <TabPanel>
+            <AddressInput
+              contractAddress={contractAddress}
+              setContractAddress={setContractAddress}
+              btnDisabled={disableAddressDecodeBtn}
+              bg={bgColor[colorMode]}
+            />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+      <Divider />
+      <Box mt="4">
+        <Output value={output} />
+      </Box>
+    </Container>
+  );
+}
+
+export default Body;
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -0,0 +1,29 @@
+import React from "react";
+import { Button, useColorMode, Flex, Heading, Spacer } from "@chakra-ui/react";
+import { SunIcon, MoonIcon } from "@chakra-ui/icons";
+
+function Navbar() {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const underlineColor = { light: "gray.500", dark: "gray.400" };
+
+  return (
+    <Flex
+      py="4"
+      px={["2", "4", "10", "10"]}
+      borderBottom="2px"
+      borderBottomColor={underlineColor[colorMode]}
+    >
+      <Spacer flex="1" />
+      <Heading maxW={["302px", "4xl", "4xl", "4xl"]}>
+        ETH Calldata Decoder
+      </Heading>
+      <Flex flex="1" justifyContent="flex-end">
+        <Button onClick={toggleColorMode} rounded="full" h="40px" w="40px">
+          {colorMode === "light" ? <MoonIcon /> : <SunIcon />}
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}
+
+export default Navbar;
diff --git a/src/components/common/JsonTextArea.js b/src/components/common/JsonTextArea.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { chakra, useColorMode } from "@chakra-ui/react";
+import SimpleEditor from "react-simple-code-editor";
+
+import "../../styles/scroll.css";
+import "highlight.js/styles/obsidian.css";
+// only import the required language support
+import hljs from "highlight.js/lib/core";
+hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
+
+const ChakraSimpleEditor = chakra(SimpleEditor);
+
+function JsonTextArea({
+  value,
+  setValue,
+  bg,
+  placeholder,
+  ariaLabel,
+  readOnly,
+}) {
+  const { colorMode } = useColorMode();
+  const borderColor = { light: "gray.500", dark: "gray.400" };
+
+  return (
+    <ChakraSimpleEditor
+      placeholder={placeholder}
+      aria-label={ariaLabel}
+      value={value}
+      onValueChange={setValue}
+      readOnly={readOnly}
+      bg={bg}
+      h="60"
+      style={{
+        overflowY: "scroll",
+      }}
+      className="scroll"
+      highlight={(contents) =>
+        hljs.highlight(contents, { language: "json" }).value
+      }
+      border="1px"
+      borderColor={borderColor[colorMode]}
+      roundedLeft="md"
+      roundedRight="4px"
+      fontFamily={"SFMono-Regular,Menlo,Monaco,Consolas,monospace"}
+    />
+  );
+}
+
+export default JsonTextArea;
diff --git a/src/index.css b/src/index.css