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!)}`} />