Add Footer

Remove unused variables
apoorvlathey · Aug 9, 2021 · 9620378 · 9620378
1 parent e1f5613
commit 9620378
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,9 @@
     "@chakra-ui/react": "^1.6.5",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,14 @@
 import React from "react";
 import Body from "./components/Body/index";
 import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
 
 function App() {
   return (
     <div>
       <Navbar />
       <Body />
+      <Footer />
     </div>
   );
 }

diff --git a/src/components/Body/ABIInput.js b/src/components/Body/ABIInput.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { VStack, FormControl, FormLabel, Button } from "@chakra-ui/react";
 import { UnlockIcon } from "@chakra-ui/icons";
 import JsonTextArea from "../common/JsonTextArea";

diff --git a/src/components/Body/AddressInput.js b/src/components/Body/AddressInput.js
@@ -37,7 +37,9 @@ function AddressInput({
         onChange={(e) => setNetworkIndex(e.target.value)}
       >
         {networkInfo.map((network, i) => (
-          <option value={i}>{network.name}</option>
+          <option value={i} key={i}>
+            {network.name}
+          </option>
         ))}
       </Select>
       <Button

diff --git a/src/components/Body/Output.js b/src/components/Body/Output.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react";
-import { chakra, useColorMode, FormControl, FormLabel } from "@chakra-ui/react";
+import React from "react";
+import { FormControl, FormLabel } from "@chakra-ui/react";
 import JsonTextArea from "../common/JsonTextArea";
 
 function Output({ value }) {

diff --git a/src/components/Body/index.js b/src/components/Body/index.js
@@ -120,7 +120,7 @@ function Body() {
   }, [calldata, contractAddress, networkIndex]);
 
   return (
-    <Container mt="16" minW="2xl">
+    <Container my="16" minW="2xl">
       <FormControl>
         <FormLabel>Enter Calldata</FormLabel>
         <Textarea
@@ -166,7 +166,7 @@ function Body() {
         </TabPanels>
       </Tabs>
       <Divider />
-      <Box mt="4" mb="40">
+      <Box mt="4">
         <Output value={output} />
       </Box>
     </Container>

diff --git a/src/components/Body/networkInfo.js b/src/components/Body/networkInfo.js
@@ -1,4 +1,4 @@
-export default [
+const networkInfo = [
   {
     name: "Ethereum Mainnet",
     api: `https://api.etherscan.io/api?module=contract&action=getabi&apikey=${process.env.REACT_APP_ETHERSCAN_API_KEY}`,
@@ -27,3 +27,5 @@ export default [
     apikey: process.env.REACT_APP_ETHERSCAN_API_KEY,
   },
 ];
+
+export default networkInfo;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -0,0 +1,59 @@
+import React from "react";
+import {
+  useColorMode,
+  Flex,
+  HStack,
+  VStack,
+  Heading,
+  Spacer,
+  Link,
+  Text,
+} from "@chakra-ui/react";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faGithub,
+  faLinkedin,
+  faTwitter,
+} from "@fortawesome/free-brands-svg-icons";
+
+const Social = ({ icon, link }) => {
+  return (
+    <Link href={link} isExternal>
+      <FontAwesomeIcon icon={icon} size="lg" />
+    </Link>
+  );
+};
+
+function Footer() {
+  const { colorMode } = useColorMode();
+  const underlineColor = { light: "gray.500", dark: "gray.400" };
+
+  return (
+    <Flex py="4" borderTop="2px" borderTopColor={underlineColor[colorMode]}>
+      <Spacer flex="1" />
+      <VStack>
+        <Heading size="md">
+          Built by:{" "}
+          <Link href="https://apoorvlathey.com/" isExternal>
+            <Text decoration="underline" display="inline">
+              Apoorv Lathey
+            </Text>{" "}
+            <ExternalLinkIcon />
+          </Link>
+        </Heading>
+        <HStack spacing={8} mt={10}>
+          <Social icon={faTwitter} link="https://twitter.com/apoorvlathey" />
+          <Social icon={faGithub} link="https://github.com/CodinMaster" />
+          <Social
+            icon={faLinkedin}
+            link="https://www.linkedin.com/in/apoorvlathey/"
+          />
+        </HStack>
+      </VStack>
+      <Spacer flex="1" />
+    </Flex>
+  );
+}
+
+export default Footer;
diff --git a/yarn.lock b/yarn.lock
@@ -2001,6 +2001,32 @@
     "@ethersproject/properties" "^5.4.0"
     "@ethersproject/strings" "^5.4.0"
 
+"@fortawesome/fontawesome-common-types@^0.2.36":
+  version "0.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
+  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+
+"@fortawesome/fontawesome-svg-core@^1.2.36":
+  version "1.2.36"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
+  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/free-brands-svg-icons@^5.15.4":
+  version "5.15.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz#ec8a44dd383bcdd58aa7d1c96f38251e6fec9733"
+  integrity sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.36"
+
+"@fortawesome/react-fontawesome@^0.1.15":
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.15.tgz#1450b838f905981d721bf07e14e3b52c0e9a91ed"
+  integrity sha512-/HFHdcoLESxxMkqZAcZ6RXDJ69pVApwdwRos/B2kiMWxDSAX2dFK8Er2/+rG+RsrzWB/dsAyjefLmemgmfE18g==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@hapi/[email protected]":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"