Merge pull request #91 from cosmos/hkeep/upgrade-deps

Upgrade deps

.eslintrc.js

@@ -15,14 +15,8 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ["prettier", "@typescript-eslint"],
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "prettier",
-    "plugin:prettier/recommended",
-  ],
+  plugins: ["@typescript-eslint"],
+  extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
   rules: {
     curly: ["warn", "multi-line", "consistent"],
     "no-bitwise": "warn",
@@ -41,5 +35,4 @@ module.exports = {
       { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
     ],
   },
-  overrides: [],
 };

components/DevHelper.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import Link from "next/link";
 
 const DevHelper = () => (
   <div className="dev-helper">
@@ -6,21 +6,21 @@ const DevHelper = () => (
     <h4>Pages</h4>
     <ul>
       <li>
-        <a href="/">Index/Start</a>
+        <Link href="/">Index/Start</Link>
       </li>
       <li>
-        <a href="/create">Create Multisig</a>
+        <Link href="/create">Create Multisig</Link>
       </li>
       <li>
-        <a href="/multi/cosmos10nmdf6nt2qzvgn9q2nuwmmfc359yfesmu3gw22">View Multisig</a>
+        <Link href="/multi/cosmos10nmdf6nt2qzvgn9q2nuwmmfc359yfesmu3gw22">View Multisig</Link>
       </li>
       <li>
-        <a href="/multi/cosmos10nmdf6nt2qzvgn9q2nuwmmfc359yfesmu3gw22/transaction/295630000375202310">
+        <Link href="/multi/cosmos10nmdf6nt2qzvgn9q2nuwmmfc359yfesmu3gw22/transaction/295630000375202310">
           View/Sign Transaction
-        </a>
+        </Link>
       </li>
     </ul>
-    <a href="https://github.com/samepant/cosmoshub-legacy-multisig">View on Github</a>
+    <Link href="https://github.com/samepant/cosmoshub-legacy-multisig">View on Github</Link>
 
     <style jsx>{`
       .dev-helper {

components/chainSelect/ChainSelect.tsx

@@ -1,7 +1,7 @@
 import { StargateClient } from "@cosmjs/stargate";
 import { assert } from "@cosmjs/utils";
 import axios from "axios";
-import React, { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useAppContext } from "../../context/AppContext";
 import GearIcon from "../icons/Gear";
 import Button from "../inputs/Button";
@@ -58,25 +58,7 @@ const ChainSelect = () => {
 
   const url = "https://api.github.com/repos/cosmos/chain-registry/contents";
 
-  useEffect(() => {
-    getGhJson();
-  }, []);
-
-  useEffect(() => {
-    // set settings form fields to new values
-    setChainId(state.chain.chainId);
-    setNodeAddress(state.chain.nodeAddress);
-    setAddressPrefix(state.chain.addressPrefix);
-    setDenom(state.chain.denom);
-    setDisplayDenom(state.chain.displayDenom);
-    setDisplayDenomExponent(state.chain.displayDenomExponent);
-    setGasPrice(state.chain.gasPrice);
-    setChainName(state.chain.chainDisplayName);
-    setExplorerLink(state.chain.explorerLink);
-    setRegistryName(state.chain.registryName);
-  }, [state]);
-
-  const getGhJson = async () => {
+  const getGhJson = useCallback(async () => {
     // getting chain info from this repo: https://github.com/cosmos/chain-registry
     try {
       const res = await axios.get(url);
@@ -96,7 +78,25 @@ const ChainSelect = () => {
       setShowSettings(true);
       setChainError(error.message);
     }
-  };
+  }, [state.chain.registryName]);
+
+  useEffect(() => {
+    getGhJson();
+  }, [getGhJson]);
+
+  useEffect(() => {
+    // set settings form fields to new values
+    setChainId(state.chain.chainId);
+    setNodeAddress(state.chain.nodeAddress);
+    setAddressPrefix(state.chain.addressPrefix);
+    setDenom(state.chain.denom);
+    setDisplayDenom(state.chain.displayDenom);
+    setDisplayDenomExponent(state.chain.displayDenomExponent);
+    setGasPrice(state.chain.gasPrice);
+    setChainName(state.chain.chainDisplayName);
+    setExplorerLink(state.chain.explorerLink);
+    setRegistryName(state.chain.registryName);
+  }, [state]);
 
   const findExistingOption = (options: ChainOption[], registryName: string) => {
     const index = options.findIndex((option) => option.label === registryName);

package.json

@@ -8,38 +8,35 @@
     "lint:fix": "eslint --max-warnings 0 \"./**/*.{js,jsx,ts,tsx}\" --fix"
   },
   "dependencies": {
-    "@cosmjs/amino": "^0.29.5",
-    "@cosmjs/crypto": "^0.29.5",
-    "@cosmjs/encoding": "^0.29.5",
-    "@cosmjs/ledger-amino": "^0.29.5",
-    "@cosmjs/math": "^0.29.5",
-    "@cosmjs/proto-signing": "^0.29.5",
-    "@cosmjs/stargate": "^0.29.5",
-    "@cosmjs/utils": "^0.29.5",
-    "@keplr-wallet/types": "^0.9.0-alpha.4",
-    "@ledgerhq/hw-transport-webusb": "^6.24.1",
-    "axios": "^0.21.1",
-    "copy-to-clipboard": "^3.3.1",
-    "faunadb": "^4.1.1",
-    "next": "^12.1.6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-select": "^5.2.2",
-    "uuid": "^8.3.0"
+    "@cosmjs/amino": "^0.30.1",
+    "@cosmjs/crypto": "^0.30.1",
+    "@cosmjs/encoding": "^0.30.1",
+    "@cosmjs/ledger-amino": "^0.30.1",
+    "@cosmjs/math": "^0.30.1",
+    "@cosmjs/proto-signing": "^0.30.1",
+    "@cosmjs/stargate": "^0.30.1",
+    "@cosmjs/utils": "^0.30.1",
+    "@keplr-wallet/types": "^0.11.56",
+    "@ledgerhq/hw-transport-webusb": "^6.27.13",
+    "axios": "^1.3.5",
+    "copy-to-clipboard": "^3.3.3",
+    "faunadb": "^4.8.0",
+    "next": "^13.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-select": "^5.7.2"
   },
   "devDependencies": {
-    "@types/node": "^17.0.35",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-select": "^5.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.27.1",
-    "cosmjs-types": "^0.4.1",
-    "eslint": "^8.6.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "prettier": "^2.5.1",
-    "typescript": "^4.7.2"
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.34",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "cosmjs-types": "^0.7.2",
+    "eslint": "^8.38.0",
+    "eslint-config-next": "^13.3.0",
+    "eslint-config-prettier": "^8.8.0",
+    "prettier": "^2.8.7",
+    "typescript": "^5.0.4"
   }
 }

pages/api/chain/[chainId]/multisig/[multisigAddress]/index.ts

@@ -1,12 +1,12 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getMultisig } from "../../../../../../lib/graphqlHelpers";
 
-export default async function (req: NextApiRequest, res: NextApiResponse) {
+export default async function multisigAddressApi(req: NextApiRequest, res: NextApiResponse) {
   switch (req.method) {
     case "GET":
       try {
-        const multisigAddress = req.query.multisigAddress.toString();
-        const chainId = req.query.chainId.toString();
+        const multisigAddress = req.query.multisigAddress?.toString() || "";
+        const chainId = req.query.chainId?.toString() || "";
         console.log("Function `getMultisig` invoked", multisigAddress, chainId);
         const getRes = await getMultisig(multisigAddress, chainId);
         if (!getRes.data.data.getMultisig) {

pages/api/chain/[chainId]/multisig/index.ts

@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { createMultisig } from "../../../../../lib/graphqlHelpers";
 
-export default async function (req: NextApiRequest, res: NextApiResponse) {
+export default async function multisigApi(req: NextApiRequest, res: NextApiResponse) {
   switch (req.method) {
     case "POST":
       try {

pages/api/transaction/[transactionID]/index.ts

@@ -1,11 +1,11 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { updateTxHash } from "../../../../lib/graphqlHelpers";
 
-export default async function (req: NextApiRequest, res: NextApiResponse) {
+export default async function transactionIDApi(req: NextApiRequest, res: NextApiResponse) {
   switch (req.method) {
     case "POST":
       try {
-        const transactionID = req.query.transactionID.toString();
+        const transactionID = req.query.transactionID?.toString() || "";
         const { txHash } = req.body;
         console.log("Function `updateTransaction` invoked", txHash);
         const saveRes = await updateTxHash(transactionID, txHash);

pages/api/transaction/[transactionID]/signature.ts

@@ -1,11 +1,11 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { createSignature } from "../../../../lib/graphqlHelpers";
 
-export default async function (req: NextApiRequest, res: NextApiResponse) {
+export default async function transactionIDApi(req: NextApiRequest, res: NextApiResponse) {
   switch (req.method) {
     case "POST":
       try {
-        const transactionID = req.query.transactionID.toString();
+        const transactionID = req.query.transactionID?.toString() || "";
         const data = req.body;
         console.log("Function `createSignature` invoked", data);
         const saveRes = await createSignature(data, transactionID);

pages/api/transaction/index.ts

@@ -1,7 +1,7 @@
-import { createTransaction } from "../../../lib/graphqlHelpers";
 import type { NextApiRequest, NextApiResponse } from "next";
+import { createTransaction } from "../../../lib/graphqlHelpers";
 
-export default async function (req: NextApiRequest, res: NextApiResponse) {
+export default async function transactionApi(req: NextApiRequest, res: NextApiResponse) {
   switch (req.method) {
     case "POST":
       try {

pages/multi/[address]/index.tsx

@@ -1,20 +1,19 @@
-import React, { useState, useEffect } from "react";
 import { MultisigThresholdPubkey, SinglePubkey } from "@cosmjs/amino";
 import { Account, StargateClient } from "@cosmjs/stargate";
 import { assert } from "@cosmjs/utils";
 import { Coin } from "cosmjs-types/cosmos/base/v1beta1/coin";
 import { useRouter } from "next/router";
-
-import { useAppContext } from "../../../context/AppContext";
-import Button from "../../../components/inputs/Button";
-import { getMultisigAccount } from "../../../lib/multisigHelpers";
+import { useCallback, useEffect, useState } from "react";
 import HashView from "../../../components/dataViews/HashView";
 import MultisigHoldings from "../../../components/dataViews/MultisigHoldings";
 import MultisigMembers from "../../../components/dataViews/MultisigMembers";
+import DelegationForm from "../../../components/forms/DelegationForm";
+import TransactionForm from "../../../components/forms/TransactionForm";
+import Button from "../../../components/inputs/Button";
 import Page from "../../../components/layout/Page";
 import StackableContainer from "../../../components/layout/StackableContainer";
-import TransactionForm from "../../../components/forms/TransactionForm";
-import DelegationForm from "../../../components/forms/DelegationForm";
+import { useAppContext } from "../../../context/AppContext";
+import { getMultisigAccount } from "../../../lib/multisigHelpers";
 
 function participantPubkeysFromMultisig(
   multisig: MultisigThresholdPubkey,
@@ -22,7 +21,7 @@ function participantPubkeysFromMultisig(
   return multisig.value.pubkeys;
 }
 
-const multipage = () => {
+const Multipage = () => {
   const { state } = useAppContext();
   const [showSendTxForm, setShowSendTxForm] = useState(false);
   const [showDelegateTxForm, setShowDelegateTxForm] = useState(false);
@@ -33,31 +32,34 @@ const multipage = () => {
   const [accountError, setAccountError] = useState(null);
   const router = useRouter();
 
+  const fetchMultisig = useCallback(
+    async (address: string) => {
+      setAccountError(null);
+      try {
+        assert(state.chain.nodeAddress, "Node address missing");
+        const client = await StargateClient.connect(state.chain.nodeAddress);
+        assert(state.chain.denom, "denom missing");
+        const tempHoldings = await client.getBalance(address, state.chain.denom);
+        setHoldings(tempHoldings);
+        const result = await getMultisigAccount(address, client);
+        setPubkey(result[0]);
+        setAccountOnChain(result[1]);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (error: any) {
+        setAccountError(error.message);
+        console.log("Account error:", error);
+      }
+    },
+    [state.chain.denom, state.chain.nodeAddress],
+  );
+
   useEffect(() => {
     const address = router.query.address?.toString();
     if (address) {
       setMultisigAddress(address);
       fetchMultisig(address);
     }
-  }, [state, router.query.address]);
-
-  const fetchMultisig = async (address: string) => {
-    setAccountError(null);
-    try {
-      assert(state.chain.nodeAddress, "Node address missing");
-      const client = await StargateClient.connect(state.chain.nodeAddress);
-      assert(state.chain.denom, "denom missing");
-      const tempHoldings = await client.getBalance(address, state.chain.denom);
-      setHoldings(tempHoldings);
-      const result = await getMultisigAccount(address, client);
-      setPubkey(result[0]);
-      setAccountOnChain(result[1]);
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
-      setAccountError(error.message);
-      console.log("Account error:", error);
-    }
-  };
+  }, [fetchMultisig, router.query.address]);
 
   assert(state.chain.addressPrefix, "address prefix missing");
 
@@ -180,4 +182,4 @@ const multipage = () => {
   );
 };
 
-export default multipage;
+export default Multipage;

pages/multi/[address]/transaction/[transactionID].tsx

@@ -1,24 +1,22 @@
-import axios from "axios";
-import React from "react";
-import { GetServerSideProps } from "next";
-import { StargateClient, Account, makeMultisignedTxBytes } from "@cosmjs/stargate";
-import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
-import { fromBase64 } from "@cosmjs/encoding";
 import { MultisigThresholdPubkey } from "@cosmjs/amino";
-
-import { DbSignature, DbTransaction } from "../../../../types";
-import { useAppContext } from "../../../../context/AppContext";
-import Button from "../../../../components/inputs/Button";
-import { findTransactionByID } from "../../../../lib/graphqlHelpers";
-import { getMultisigAccount } from "../../../../lib/multisigHelpers";
-import Page from "../../../../components/layout/Page";
-import StackableContainer from "../../../../components/layout/StackableContainer";
+import { fromBase64 } from "@cosmjs/encoding";
+import { Account, StargateClient, makeMultisignedTxBytes } from "@cosmjs/stargate";
+import { assert } from "@cosmjs/utils";
+import axios from "axios";
+import { GetServerSideProps } from "next";
+import { useRouter } from "next/router";
+import { useCallback, useEffect, useState } from "react";
+import CompletedTransaction from "../../../../components/dataViews/CompletedTransaction";
 import ThresholdInfo from "../../../../components/dataViews/ThresholdInfo";
 import TransactionInfo from "../../../../components/dataViews/TransactionInfo";
 import TransactionSigning from "../../../../components/forms/TransactionSigning";
-import CompletedTransaction from "../../../../components/dataViews/CompletedTransaction";
-import { assert } from "@cosmjs/utils";
+import Button from "../../../../components/inputs/Button";
+import Page from "../../../../components/layout/Page";
+import StackableContainer from "../../../../components/layout/StackableContainer";
+import { useAppContext } from "../../../../context/AppContext";
+import { findTransactionByID } from "../../../../lib/graphqlHelpers";
+import { getMultisigAccount } from "../../../../lib/multisigHelpers";
+import { DbSignature, DbTransaction } from "../../../../types";
 
 interface Props {
   props: {
@@ -56,7 +54,7 @@ export const getServerSideProps: GetServerSideProps = async (context): Promise<P
   };
 };
 
-const transactionPage = ({
+const TransactionPage = ({
   multisigAddress,
   transactionJSON,
   transactionID,
@@ -84,26 +82,29 @@ const transactionPage = ({
     setCurrentSignatures((prevState: DbSignature[]) => [...prevState, signature]);
   };
 
+  const fetchMultisig = useCallback(
+    async (address: string) => {
+      try {
+        assert(state.chain.nodeAddress, "Node address missing");
+        const client = await StargateClient.connect(state.chain.nodeAddress);
+        const result = await getMultisigAccount(address, client);
+        setPubkey(result[0]);
+        setAccountOnChain(result[1]);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (error: any) {
+        setAccountError(error.toString());
+        console.log("Account error:", error);
+      }
+    },
+    [state.chain.nodeAddress],
+  );
+
   useEffect(() => {
     const address = router.query.address?.toString();
     if (address) {
       fetchMultisig(address);
     }
-  }, [state, router.query.address]);
-
-  const fetchMultisig = async (address: string) => {
-    try {
-      assert(state.chain.nodeAddress, "Node address missing");
-      const client = await StargateClient.connect(state.chain.nodeAddress);
-      const result = await getMultisigAccount(address, client);
-      setPubkey(result[0]);
-      setAccountOnChain(result[1]);
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
-      setAccountError(error.toString());
-      console.log("Account error:", error);
-    }
-  };
+  }, [fetchMultisig, router.query.address]);
 
   const broadcastTx = async () => {
     try {
@@ -197,4 +198,4 @@ const transactionPage = ({
   );
 };
 
-export default transactionPage;
+export default TransactionPage;