From ed650adc83e82f73ef61a830c831c618a98a630c Mon Sep 17 00:00:00 2001 From: CodinMaster Date: Sat, 22 Jan 2022 05:35:21 +0530 Subject: [PATCH] move codebase to typescript --- package.json | 5 ++ src/{App.js => App.tsx} | 3 +- src/components/Body/{index.js => index.tsx} | 38 ++++++---- .../Body/{networkInfo.js => networkInfo.ts} | 0 src/components/{Footer.js => Footer.tsx} | 4 +- src/components/{Navbar.js => Navbar.tsx} | 1 - src/{index.js => index.tsx} | 1 - src/react-app-env.d.ts | 1 + src/{theme.js => theme.ts} | 4 +- tsconfig.json | 26 +++++++ yarn.lock | 73 +++++++++++++++++++ 11 files changed, 135 insertions(+), 21 deletions(-) rename src/{App.js => App.tsx} (74%) rename src/components/Body/{index.js => index.tsx} (93%) rename src/components/Body/{networkInfo.js => networkInfo.ts} (100%) rename src/components/{Footer.js => Footer.tsx} (93%) rename src/components/{Navbar.js => Navbar.tsx} (97%) rename src/{index.js => index.tsx} (90%) create mode 100644 src/react-app-env.d.ts rename src/{theme.js => theme.ts} (57%) create mode 100644 tsconfig.json diff --git a/package.json b/package.json index 7d6c261..137dacb 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,10 @@ "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", + "@types/jest": "^27.4.0", + "@types/node": "^17.0.10", + "@types/react": "^17.0.38", + "@types/react-dom": "^17.0.11", "@walletconnect/client": "^1.6.2", "axios": "^0.24.0", "ethereum-checksum-address": "^0.0.6", @@ -23,6 +27,7 @@ "react-dom": "^17.0.2", "react-scripts": "4.0.3", "react-simple-code-editor": "^0.11.0", + "typescript": "^4.5.5", "web-vitals": "^1.0.1" }, "scripts": { diff --git a/src/App.js b/src/App.tsx similarity index 74% rename from src/App.js rename to src/App.tsx index f5ede79..1e5beab 100644 --- a/src/App.js +++ b/src/App.tsx @@ -1,5 +1,4 @@ -import React from "react"; -import Body from "./components/Body/index"; +import Body from "./components/Body"; import Navbar from "./components/Navbar"; import Footer from "./components/Footer"; diff --git a/src/components/Body/index.js b/src/components/Body/index.tsx similarity index 93% rename from src/components/Body/index.js rename to src/components/Body/index.tsx index 6879a8f..c497309 100644 --- a/src/components/Body/index.js +++ b/src/components/Body/index.tsx @@ -30,6 +30,7 @@ import { } from "@chakra-ui/react"; import { SettingsIcon, InfoIcon } from "@chakra-ui/icons"; import WalletConnect from "@walletconnect/client"; +import { IClientMeta } from "@walletconnect/types"; import { ethers } from "ethers"; import axios from "axios"; import networkInfo from "./networkInfo"; @@ -40,14 +41,14 @@ function Body() { const toast = useToast(); const { onOpen, onClose, isOpen } = useDisclosure(); - const [provider, setProvider] = useState(); + const [provider, setProvider] = useState(); const [showAddress, setShowAddress] = useState(""); // gets displayed in input. ENS name remains as it is const [address, setAddress] = useState(""); // internal resolved address const [isAddressValid, setIsAddressValid] = useState(true); const [uri, setUri] = useState(""); const [networkIndex, setNetworkIndex] = useState(0); - const [connector, setConnector] = useState(); - const [peerMeta, setPeerMeta] = useState(); + const [connector, setConnector] = useState(); + const [peerMeta, setPeerMeta] = useState(); const [isConnected, setIsConnected] = useState(false); const [loading, setLoading] = useState(false); @@ -67,7 +68,8 @@ function Body() { setPeerMeta(_connector.peerMeta); setIsConnected(true); - const chainId = _connector.chainId.chainID; + const chainId = (_connector.chainId as unknown as { chainID: number }) + .chainID; for (let i = 0; i < networkInfo.length; i++) { if (getChainId(i) === chainId) { setNetworkIndex(i); @@ -109,7 +111,7 @@ function Body() { isValid = false; } else { // Resolve ENS - const resolvedAddress = await provider.resolveName(address); + const resolvedAddress = await provider!.resolveName(address); if (resolvedAddress) { setAddress(resolvedAddress); _address = resolvedAddress; @@ -135,7 +137,7 @@ function Body() { return { isValid, _address: _address }; }; - const getChainId = (networkIndex) => { + const getChainId = (networkIndex: number) => { return networkInfo[networkIndex].chainID; }; @@ -289,11 +291,17 @@ function Body() { console.log("ACTION", "rejectSession"); if (connector) { connector.rejectSession(); - setPeerMeta(null); + setPeerMeta(undefined); } }; - const updateSession = ({ newChainId, newAddress }) => { + const updateSession = ({ + newChainId, + newAddress, + }: { + newChainId?: number; + newAddress?: string; + }) => { let _chainId = newChainId || getChainId(networkIndex); let _address = newAddress || address; @@ -312,7 +320,9 @@ function Body() { const { isValid, _address } = await resolveAndValidateAddress(); if (isValid) { - updateSession({ newAddress: _address }); + updateSession({ + newAddress: _address, + }); } }; @@ -322,13 +332,13 @@ function Body() { if (connector) { connector.killSession(); - setPeerMeta(null); + setPeerMeta(undefined); setIsConnected(false); } }; const reset = () => { - setPeerMeta(null); + setPeerMeta(undefined); setIsConnected(false); localStorage.removeItem("walletconnect"); }; @@ -456,9 +466,11 @@ function Body() { _hover={{ cursor: "pointer" }} value={networkIndex} onChange={(e) => { - const _networkIndex = e.target.value; + const _networkIndex = parseInt(e.target.value); setNetworkIndex(_networkIndex); - updateSession({ newChainId: getChainId(_networkIndex) }); + updateSession({ + newChainId: getChainId(_networkIndex), + }); }} > {networkInfo.map((network, i) => ( diff --git a/src/components/Body/networkInfo.js b/src/components/Body/networkInfo.ts similarity index 100% rename from src/components/Body/networkInfo.js rename to src/components/Body/networkInfo.ts diff --git a/src/components/Footer.js b/src/components/Footer.tsx similarity index 93% rename from src/components/Footer.js rename to src/components/Footer.tsx index cda1999..b68218f 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { useColorMode, Flex, @@ -14,9 +13,10 @@ import { } from "@chakra-ui/react"; import { ExternalLinkIcon } from "@chakra-ui/icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { IconProp } from "@fortawesome/fontawesome-svg-core"; import { faTwitter } from "@fortawesome/free-brands-svg-icons"; -const Social = ({ icon, link }) => { +const Social = ({ icon, link }: { icon: IconProp; link: string }) => { return ( diff --git a/src/components/Navbar.js b/src/components/Navbar.tsx similarity index 97% rename from src/components/Navbar.js rename to src/components/Navbar.tsx index caa7602..adb5e27 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.tsx @@ -1,4 +1,3 @@ -import React from "react"; import { Button, useColorMode, diff --git a/src/index.js b/src/index.tsx similarity index 90% rename from src/index.js rename to src/index.tsx index 1cf8e92..4aec330 100644 --- a/src/index.js +++ b/src/index.tsx @@ -1,4 +1,3 @@ -import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { ChakraProvider } from "@chakra-ui/react"; diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/theme.js b/src/theme.ts similarity index 57% rename from src/theme.js rename to src/theme.ts index a4fa7f4..5a0fa90 100644 --- a/src/theme.js +++ b/src/theme.ts @@ -1,6 +1,6 @@ -import { extendTheme } from "@chakra-ui/react"; +import { extendTheme, ThemeConfig } from "@chakra-ui/react"; -const config = { +const config: ThemeConfig = { initialColorMode: "dark", useSystemColorMode: false, }; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a273b0c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +} diff --git a/yarn.lock b/yarn.lock index 49350f6..9627d71 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2787,6 +2787,14 @@ jest-diff "^26.0.0" pretty-format "^26.0.0" +"@types/jest@^27.4.0": + version "27.4.0" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.4.0.tgz#037ab8b872067cae842a320841693080f9cb84ed" + integrity sha512-gHl8XuC1RZ8H2j5sHv/JqsaxXkDDM9iDOgu0Wp8sjs4u/snb2PVehyWXJPr+ORA0RPpgw231mnutWI1+0hgjIQ== + dependencies: + jest-diff "^27.0.0" + pretty-format "^27.0.0" + "@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6": version "7.0.7" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad" @@ -2819,6 +2827,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.31.tgz#72286bd33d137aa0d152d47ec7c1762563d34055" integrity sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g== +"@types/node@^17.0.10": + version "17.0.10" + resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.10.tgz#616f16e9d3a2a3d618136b1be244315d95bd7cab" + integrity sha512-S/3xB4KzyFxYGCppyDt68yzBU9ysL88lSdIah4D6cptdcltc4NCPCAMc0+PCpg/lLIyC7IPvj2Z52OJWeIUkog== + "@types/normalize-package-data@^2.4.0": version "2.4.0" resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e" @@ -2844,6 +2857,22 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24" integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug== +"@types/react-dom@^17.0.11": + version "17.0.11" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466" + integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q== + dependencies: + "@types/react" "*" + +"@types/react@*", "@types/react@^17.0.38": + version "17.0.38" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd" + integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/react@^17.0.0": version "17.0.16" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.16.tgz#056f40c45645761527baeb7d89d842a6abdf285a" @@ -3474,6 +3503,11 @@ ansi-regex@^5.0.0: resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75" integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg== +ansi-regex@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304" + integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ== + ansi-styles@^3.2.0, ansi-styles@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" @@ -3488,6 +3522,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0: dependencies: color-convert "^2.0.1" +ansi-styles@^5.0.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b" + integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA== + anymatch@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb" @@ -5349,6 +5388,11 @@ diff-sequences@^26.6.2: resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1" integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q== +diff-sequences@^27.4.0: + version "27.4.0" + resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.4.0.tgz#d783920ad8d06ec718a060d00196dfef25b132a5" + integrity sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww== + diffie-hellman@^5.0.0: version "5.0.3" resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875" @@ -7682,6 +7726,16 @@ jest-diff@^26.0.0, jest-diff@^26.6.2: jest-get-type "^26.3.0" pretty-format "^26.6.2" +jest-diff@^27.0.0: + version "27.4.6" + resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.4.6.tgz#93815774d2012a2cbb6cf23f84d48c7a2618f98d" + integrity sha512-zjaB0sh0Lb13VyPsd92V7HkqF6yKRH9vm33rwBt7rPYrpQvS1nCvlIy2pICbKta+ZjWngYLNn4cCK4nyZkjS/w== + dependencies: + chalk "^4.0.0" + diff-sequences "^27.4.0" + jest-get-type "^27.4.0" + pretty-format "^27.4.6" + jest-docblock@^26.0.0: version "26.0.0" resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5" @@ -7730,6 +7784,11 @@ jest-get-type@^26.3.0: resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0" integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig== +jest-get-type@^27.4.0: + version "27.4.0" + resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.4.0.tgz#7503d2663fffa431638337b3998d39c5e928e9b5" + integrity sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ== + jest-haste-map@^26.6.2: version "26.6.2" resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa" @@ -10275,6 +10334,15 @@ pretty-format@^26.0.0, pretty-format@^26.6.0, pretty-format@^26.6.2: ansi-styles "^4.0.0" react-is "^17.0.1" +pretty-format@^27.0.0, pretty-format@^27.4.6: + version "27.4.6" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.4.6.tgz#1b784d2f53c68db31797b2348fa39b49e31846b7" + integrity sha512-NblstegA1y/RJW2VyML+3LlpFjzx62cUrtBIKIWDXEDkjNeleA7Od7nrzcs/VLQvAeV4CgSYhrN39DRN88Qi/g== + dependencies: + ansi-regex "^5.0.1" + ansi-styles "^5.0.0" + react-is "^17.0.1" + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -12357,6 +12425,11 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript@^4.5.5: + version "4.5.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3" + integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA== + unicode-canonical-property-names-ecmascript@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"