From 49eb49263cf63fe9c53e7202e848e7e7a9880d5a Mon Sep 17 00:00:00 2001 From: CodinMaster Date: Sun, 8 Aug 2021 14:35:00 +0530 Subject: [PATCH] direct ABI decoding functional --- package.json | 8 + src/App.css | 38 - src/App.js | 23 +- src/App.test.js | 8 - src/components/Body/ABIInput.js | 32 + src/components/Body/AddressInput.js | 41 + src/components/Body/Output.js | 14 + src/components/Body/index.js | 99 ++ src/components/Navbar.js | 29 + src/components/common/JsonTextArea.js | 49 + src/index.css | 13 - src/index.js | 21 +- src/logo.svg | 1 - src/reportWebVitals.js | 13 - src/setupTests.js | 5 - src/styles/scroll.css | 18 + src/theme.js | 10 + yarn.lock | 1369 ++++++++++++++++++++++++- 18 files changed, 1668 insertions(+), 123 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/App.test.js create mode 100644 src/components/Body/ABIInput.js create mode 100644 src/components/Body/AddressInput.js create mode 100644 src/components/Body/Output.js create mode 100644 src/components/Body/index.js create mode 100644 src/components/Navbar.js create mode 100644 src/components/common/JsonTextArea.js delete mode 100644 src/index.css delete mode 100644 src/logo.svg delete mode 100644 src/reportWebVitals.js delete mode 100644 src/setupTests.js create mode 100644 src/styles/scroll.css create mode 100644 src/theme.js diff --git a/package.json b/package.json index c5a14b9..58f0058 100644 --- 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 deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 3784575..a26d022 100644 --- 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 ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+ +
); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/Body/ABIInput.js b/src/components/Body/ABIInput.js new file mode 100644 index 0000000..d92f0ee --- /dev/null +++ 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 ( + + + Input ABI + + + + + ); +} + +export default ABIInput; diff --git a/src/components/Body/AddressInput.js b/src/components/Body/AddressInput.js new file mode 100644 index 0000000..752bacb --- /dev/null +++ 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 ( + + + Contract Address + setContractAddress(e.target.value)} + placeholder="Address" + aria-label="contract address" + bg={bg} + /> + + + + ); +} + +export default AddressInput; diff --git a/src/components/Body/Output.js b/src/components/Body/Output.js new file mode 100644 index 0000000..4132757 --- /dev/null +++ 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 ( + + Output: + + + ); +} + +export default Output; diff --git a/src/components/Body/index.js b/src/components/Body/index.js new file mode 100644 index 0000000..8735bb5 --- /dev/null +++ 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 ( + + + Enter Calldata +