From fa54c708e3dfdd9b3793676417e5c9126f970ca4 Mon Sep 17 00:00:00 2001 From: samepant Date: Wed, 25 May 2022 19:14:08 -0400 Subject: [PATCH] Convert to typescript --- components/{DevHelper.js => DevHelper.tsx} | 4 +- .../{ChainSelect.js => ChainSelect.tsx} | 88 +- ...ransaction.js => CompletedTransaction.tsx} | 9 +- .../{CopyAndPaste.js => CopyAndPaste.tsx} | 8 +- .../dataViews/{HashView.js => HashView.tsx} | 11 +- ...ltisigHoldings.js => MultisigHoldings.tsx} | 13 +- ...MultisigMembers.js => MultisigMembers.tsx} | 10 +- .../{ThresholdInfo.js => ThresholdInfo.tsx} | 12 +- ...TransactionInfo.js => TransactionInfo.tsx} | 10 +- components/forms/ConnectWallet.js | 27 - ...ndMultisigForm.js => FindMultisigForm.tsx} | 12 +- .../{MultisigForm.js => MultisigForm.tsx} | 44 +- ...TransactionForm.js => TransactionForm.tsx} | 49 +- ...ctionSigning.js => TransactionSigning.tsx} | 41 +- components/{head.js => head.tsx} | 8 +- components/icons/{Gear.js => Gear.tsx} | 5 +- components/inputs/{Button.js => Button.tsx} | 15 +- components/inputs/{Input.js => Input.tsx} | 15 +- components/inputs/{Select.js => Select.tsx} | 20 +- .../{ThresholdInput.js => ThresholdInput.tsx} | 8 +- components/layout/{Page.js => Page.tsx} | 8 +- ...bleContainer.js => StackableContainer.tsx} | 11 +- context/AppContext.js | 63 - context/AppContext.tsx | 77 + context/{AppReducer.js => AppReducer.ts} | 14 +- lib/{displayHelpers.js => displayHelpers.ts} | 18 +- lib/{graphqlHelpers.js => graphqlHelpers.ts} | 13 +- ...{multisigHelpers.js => multisigHelpers.ts} | 27 +- next-env.d.ts | 5 + package-lock.json | 4068 +++-------------- package.json | 15 +- pages/{_app.js => _app.tsx} | 5 +- .../[multisigAddress]/{index.js => index.ts} | 8 +- .../[chainId]/multisig/{index.js => index.ts} | 5 +- .../[transactionID]/{index.js => index.ts} | 7 +- .../{signature.js => signature.ts} | 7 +- pages/api/transaction/{index.js => index.ts} | 5 +- pages/{create.js => create.tsx} | 0 pages/{index.js => index.tsx} | 0 pages/multi/[address]/{index.js => index.tsx} | 43 +- ...[transactionID].js => [transactionID].tsx} | 64 +- tsconfig.json | 20 + types/index.ts | 55 + 43 files changed, 1139 insertions(+), 3808 deletions(-) rename components/{DevHelper.js => DevHelper.tsx} (94%) rename components/chainSelect/{ChainSelect.js => ChainSelect.tsx} (80%) rename components/dataViews/{CompletedTransaction.js => CompletedTransaction.tsx} (84%) rename components/dataViews/{CopyAndPaste.js => CopyAndPaste.tsx} (86%) rename components/dataViews/{HashView.js => HashView.tsx} (60%) rename components/dataViews/{MultisigHoldings.js => MultisigHoldings.tsx} (65%) rename components/dataViews/{MultisigMembers.js => MultisigMembers.tsx} (85%) rename components/dataViews/{ThresholdInfo.js => ThresholdInfo.tsx} (79%) rename components/dataViews/{TransactionInfo.js => TransactionInfo.tsx} (87%) delete mode 100644 components/forms/ConnectWallet.js rename components/forms/{FindMultisigForm.js => FindMultisigForm.tsx} (84%) rename components/forms/{MultisigForm.js => MultisigForm.tsx} (84%) rename components/forms/{TransactionForm.js => TransactionForm.tsx} (67%) rename components/forms/{TransactionSigning.js => TransactionSigning.tsx} (83%) rename components/{head.js => head.tsx} (87%) rename components/icons/{Gear.js => Gear.tsx} (97%) rename components/inputs/{Button.js => Button.tsx} (78%) rename components/inputs/{Input.js => Input.tsx} (77%) rename components/inputs/{Select.js => Select.tsx} (68%) rename components/inputs/{ThresholdInput.js => ThresholdInput.tsx} (88%) rename components/layout/{Page.js => Page.tsx} (95%) rename components/layout/{StackableContainer.js => StackableContainer.tsx} (84%) delete mode 100644 context/AppContext.js create mode 100644 context/AppContext.tsx rename context/{AppReducer.js => AppReducer.ts} (68%) rename lib/{displayHelpers.js => displayHelpers.ts} (88%) rename lib/{graphqlHelpers.js => graphqlHelpers.ts} (89%) rename lib/{multisigHelpers.js => multisigHelpers.ts} (81%) create mode 100644 next-env.d.ts rename pages/{_app.js => _app.tsx} (58%) rename pages/api/chain/[chainId]/multisig/[multisigAddress]/{index.js => index.ts} (70%) rename pages/api/chain/[chainId]/multisig/{index.js => index.ts} (77%) rename pages/api/transaction/[transactionID]/{index.js => index.ts} (71%) rename pages/api/transaction/[transactionID]/{signature.js => signature.ts} (71%) rename pages/api/transaction/{index.js => index.ts} (78%) rename pages/{create.js => create.tsx} (100%) rename pages/{index.js => index.tsx} (100%) rename pages/multi/[address]/{index.js => index.tsx} (77%) rename pages/multi/[address]/transaction/{[transactionID].js => [transactionID].tsx} (74%) create mode 100644 tsconfig.json create mode 100644 types/index.ts diff --git a/components/DevHelper.js b/components/DevHelper.tsx similarity index 94% rename from components/DevHelper.js rename to components/DevHelper.tsx index e4cc8ee..7392047 100644 --- a/components/DevHelper.js +++ b/components/DevHelper.tsx @@ -1,6 +1,8 @@ import React from "react"; -const DevHelper = (_props) => ( +interface Props {} + +const DevHelper = (_props: Props) => (

Dev Helper

Pages

diff --git a/components/chainSelect/ChainSelect.js b/components/chainSelect/ChainSelect.tsx similarity index 80% rename from components/chainSelect/ChainSelect.js rename to components/chainSelect/ChainSelect.tsx index 01c1440..1d538f2 100644 --- a/components/chainSelect/ChainSelect.js +++ b/components/chainSelect/ChainSelect.tsx @@ -4,18 +4,40 @@ import { StargateClient } from "@cosmjs/stargate"; import GearIcon from "../icons/Gear"; import Button from "../inputs/Button"; -import Input from "../../components/inputs/Input"; +import Input from "../inputs/Input"; import { useAppContext } from "../../context/AppContext"; import Select from "../inputs/Select"; import StackableContainer from "../layout/StackableContainer"; +interface ChainOption { + label: string; + value: number; +} + +interface GithubChainRegistryItem { + name: string; + path: string; + sha: string; + size: number; + url: string; + html_url: string; + git_url: string; + download_url: string | null; + type: string; + _links: { + self: string; + git: string; + html: string; + }; +} + const ChainSelect = () => { const { state, dispatch } = useAppContext(); // UI State - const [chainArray, setChainArray] = useState(); - const [chainOptions, setChainOptions] = useState(); - const [chainError, setChainError] = useState(); + const [chainArray, setChainArray] = useState([]); + const [chainOptions, setChainOptions] = useState([]); + const [chainError, setChainError] = useState(null); const [showSettings, setShowSettings] = useState(false); const [selectValue, setSelectValue] = useState({ label: "Loading...", value: -1 }); @@ -57,23 +79,23 @@ const ChainSelect = () => { // getting chain info from this repo: https://github.com/cosmos/chain-registry try { const res = await axios.get(url); - const chains = res.data.filter((item) => { + const chains = res.data.filter((item: GithubChainRegistryItem) => { return item.type == "dir" && !item.name.startsWith(".") && item.name != "testnets"; }); setChainArray(chains); - const options = chains.map(({ name }, index) => { + const options = chains.map(({ name }: GithubChainRegistryItem, index: number) => { return { label: name, value: index }; }); setChainOptions(options); - setSelectValue(findExistingOption(options, state.chain.registryName)); - } catch (error) { + setSelectValue(findExistingOption(options, state!.chain.registryName!)); + } catch (error: any) { console.log(error); setShowSettings(true); setChainError(error.message); } }; - const findExistingOption = (options, registryName) => { + const findExistingOption = (options: ChainOption[], registryName: string) => { const index = options.findIndex((option) => option.label === registryName); if (index >= 0) { return options[index]; @@ -81,7 +103,7 @@ const ChainSelect = () => { return { label: "unkown chain", value: -1 }; }; - const getChainInfo = async (chainOption) => { + const getChainInfo = async (chainOption: GithubChainRegistryItem) => { setChainError(null); try { const chainInfoUrl = @@ -102,7 +124,7 @@ const ChainSelect = () => { const chainDisplayName = chainData["pretty_name"]; const registryName = chainOption.name; const explorerLink = getExplorerFromArray(chainData.explorers); - let asset = ""; + let asset = null; let denom = ""; let displayDenom = ""; const displayDenomExponent = 6; @@ -143,21 +165,21 @@ const ChainSelect = () => { }, }); setShowSettings(false); - } catch (error) { + } catch (error: any) { console.log(error); setShowSettings(true); setChainError(error.message); } }; - const getExplorerFromArray = (array) => { + const getExplorerFromArray = (array: { kind: string; url: string; tx_page: string }[]) => { if (array && array.length > 0) { return array[0]["tx_page"]; } return ""; }; - const getNodeFromArray = (nodeArray) => { + const getNodeFromArray = (nodeArray: { address: string; provider: string }[]) => { // only return https connections const secureNodes = nodeArray.filter((node) => node.address.includes("https://")); if (secureNodes.length === 0) { @@ -166,7 +188,7 @@ const ChainSelect = () => { return secureNodes[0].address; }; - const onChainSelect = (option) => { + const onChainSelect = (option: ChainOption) => { const index = chainOptions.findIndex((opt) => opt.label === option.label); setSelectValue(chainOptions[index]); getChainInfo(chainArray[option.value]); @@ -176,7 +198,7 @@ const ChainSelect = () => { setChainError(null); try { // test client connection - const client = await StargateClient.connect(tempNodeAddress); + const client = await StargateClient.connect(tempNodeAddress!); await client.getHeight(); // change app state @@ -195,10 +217,10 @@ const ChainSelect = () => { explorerLink: tempExplorerLink, }, }); - const selectedOption = findExistingOption(chainOptions, tempRegistryName); + const selectedOption = findExistingOption(chainOptions, tempRegistryName!); setSelectValue(selectedOption); setShowSettings(false); - } catch (error) { + } catch (error: any) { console.log(error); setShowSettings(true); setChainError(error.message); @@ -237,14 +259,16 @@ const ChainSelect = () => { setChainName(e.target.value)} + onChange={(e: React.ChangeEvent) => + setChainName(e.target.value) + } label="Chain Name" /> setChainId(e.target.value)} + onChange={(e: React.ChangeEvent) => setChainId(e.target.value)} label="Chain ID" />
@@ -252,13 +276,17 @@ const ChainSelect = () => { setAddressPrefix(e.target.value)} + onChange={(e: React.ChangeEvent) => + setAddressPrefix(e.target.value) + } label="Bech32 Prefix (address prefix)" /> setNodeAddress(e.target.value)} + onChange={(e: React.ChangeEvent) => + setNodeAddress(e.target.value) + } label="RPC Node URL (must be https)" /> @@ -266,13 +294,15 @@ const ChainSelect = () => { setDisplayDenom(e.target.value)} + onChange={(e: React.ChangeEvent) => + setDisplayDenom(e.target.value) + } label="Display Denom" /> setDenom(e.target.value)} + onChange={(e: React.ChangeEvent) => setDenom(e.target.value)} label="Base Denom" /> @@ -280,13 +310,15 @@ const ChainSelect = () => { setDisplayDenomExponent(e.target.value)} + onChange={(e: React.ChangeEvent) => + setDisplayDenomExponent(parseInt(e.target.value)) + } label="Denom Exponent" /> setGasPrice(e.target.value)} + onChange={(e: React.ChangeEvent) => setGasPrice(e.target.value)} label="Gas Price" /> @@ -294,7 +326,9 @@ const ChainSelect = () => { setExplorerLink(e.target.value)} + onChange={(e: React.ChangeEvent) => + setExplorerLink(e.target.value) + } label="Explorer Link (with '${txHash}' included)" /> diff --git a/components/dataViews/CompletedTransaction.js b/components/dataViews/CompletedTransaction.tsx similarity index 84% rename from components/dataViews/CompletedTransaction.js rename to components/dataViews/CompletedTransaction.tsx index c51c3ca..8a4d4f4 100644 --- a/components/dataViews/CompletedTransaction.js +++ b/components/dataViews/CompletedTransaction.tsx @@ -6,9 +6,14 @@ import Button from "../inputs/Button"; import { explorerLinkTx } from "../../lib/displayHelpers"; import { useAppContext } from "../../context/AppContext"; -const CompletedTransaction = ({ transactionHash }) => { +interface Props { + transactionHash: string; +} + +const CompletedTransaction = ({ transactionHash }: Props) => { const { state } = useAppContext(); - const explorerLink = explorerLinkTx(state.chain.explorerLink, transactionHash); + const baseURL = state.chain.explorerLink ? state.chain.explorerLink : ""; + const explorerLink = explorerLinkTx(baseURL, transactionHash); return ( diff --git a/components/dataViews/CopyAndPaste.js b/components/dataViews/CopyAndPaste.tsx similarity index 86% rename from components/dataViews/CopyAndPaste.js rename to components/dataViews/CopyAndPaste.tsx index 7d83bca..fb0276a 100644 --- a/components/dataViews/CopyAndPaste.js +++ b/components/dataViews/CopyAndPaste.tsx @@ -1,7 +1,13 @@ import React from "react"; import copy from "copy-to-clipboard"; -const CopyAndPaste = (props) => ( +interface Props { + copyText: string; + stroke?: string; + strokeWidth?: number; +} + +const CopyAndPaste = (props: Props) => (
copy(props.copyText)}> diff --git a/components/dataViews/HashView.js b/components/dataViews/HashView.tsx similarity index 60% rename from components/dataViews/HashView.js rename to components/dataViews/HashView.tsx index 269848f..2f17c62 100644 --- a/components/dataViews/HashView.js +++ b/components/dataViews/HashView.tsx @@ -3,10 +3,15 @@ import React from "react"; import { abbreviateLongString } from "../../lib/displayHelpers"; import CopyAndPaste from "./CopyAndPaste"; -const HashView = ({ hash, abbreviate }) => ( +interface Props { + hash: string; + abbreviate?: boolean; +} + +const HashView = (props: Props) => (
-
{abbreviate ? abbreviateLongString(hash) : hash}
- +
{props.abbreviate ? abbreviateLongString(props.hash) : props.hash}
+ - - ); -}; - -export default withRouter(TransactionForm); diff --git a/components/forms/FindMultisigForm.js b/components/forms/FindMultisigForm.tsx similarity index 84% rename from components/forms/FindMultisigForm.js rename to components/forms/FindMultisigForm.tsx index 66768ef..e61d234 100644 --- a/components/forms/FindMultisigForm.js +++ b/components/forms/FindMultisigForm.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { withRouter } from "next/router"; +import { withRouter, NextRouter } from "next/router"; import { useAppContext } from "../../context/AppContext"; import Button from "../inputs/Button"; @@ -7,7 +7,11 @@ import StackableContainer from "../layout/StackableContainer"; import Input from "../inputs/Input"; import { exampleAddress } from "../../lib/displayHelpers"; -const FindMultisigForm = (props) => { +interface Props { + router: NextRouter; +} + +const FindMultisigForm = (props: Props) => { const { state } = useAppContext(); const [address, setAddress] = useState(""); const [_processing, setProcessing] = useState(false); @@ -28,11 +32,11 @@ const FindMultisigForm = (props) => { setAddress(e.target.value)} + onChange={(e: React.ChangeEvent) => setAddress(e.target.value)} value={address} label="Multisig Address" name="address" - placeholder={`E.g. ${exampleAddress(0, state.chain.addressPrefix)}`} + placeholder={`E.g. ${exampleAddress(0, state!.chain.addressPrefix!)}`} />