Use new hook in pages and use registryName in url

pages/[chainName]/[address]/index.tsx

@@ -1,6 +1,5 @@
 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 { useCallback, useEffect, useState } from "react";
@@ -10,7 +9,7 @@ import MultisigMembers from "../../../components/dataViews/MultisigMembers";
 import Button from "../../../components/inputs/Button";
 import Page from "../../../components/layout/Page";
 import StackableContainer from "../../../components/layout/StackableContainer";
-import { useAppContext } from "../../../context/AppContext";
+import { useChains } from "../../../context/ChainsContext";
 import { explorerLinkAccount } from "../../../lib/displayHelpers";
 import { getMultisigAccount } from "../../../lib/multisigHelpers";
 
@@ -22,8 +21,7 @@ function participantPubkeysFromMultisig(
 
 const Multipage = () => {
   const router = useRouter();
-  const { state } = useAppContext();
-  assert(state.chain.addressPrefix, "address prefix missing");
+  const { chain } = useChains();
 
   const [holdings, setHoldings] = useState<readonly Coin[]>([]);
   const [accountOnChain, setAccountOnChain] = useState<Account | null>(null);
@@ -40,15 +38,13 @@ const Multipage = () => {
     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 client = await StargateClient.connect(chain.nodeAddress);
         const tempHoldings = await client.getAllBalances(address);
         setHoldings(tempHoldings);
-        assert(state.chain.addressPrefix, "addressPrefix missing");
+
         const [newPubkey, newAccountOnChain] = await getMultisigAccount(
           address,
-          state.chain.addressPrefix,
+          chain.addressPrefix,
           client,
         );
         setPubkey(newPubkey);
@@ -59,7 +55,7 @@ const Multipage = () => {
         console.log("Account error:", error);
       }
     },
-    [state.chain.addressPrefix, state.chain.denom, state.chain.nodeAddress],
+    [chain.addressPrefix, chain.nodeAddress],
   );
 
   useEffect(() => {
@@ -79,7 +75,7 @@ const Multipage = () => {
         {pubkey ? (
           <MultisigMembers
             members={participantPubkeysFromMultisig(pubkey)}
-            addressPrefix={state.chain.addressPrefix}
+            addressPrefix={chain.addressPrefix}
             threshold={pubkey.value.threshold}
           />
         ) : null}
@@ -111,7 +107,7 @@ const Multipage = () => {
         ) : null}
         <Button
           label="Create New Transaction"
-          onClick={() => router.push(`/multi/${multisigAddress}/transaction/new`)}
+          onClick={() => router.push(`/${chain.registryName}/${multisigAddress}/transaction/new`)}
           disabled={!accountOnChain || !multisigAddress}
         />
       </StackableContainer>

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

@@ -13,7 +13,7 @@ import TransactionSigning from "../../../../components/forms/TransactionSigning"
 import Button from "../../../../components/inputs/Button";
 import Page from "../../../../components/layout/Page";
 import StackableContainer from "../../../../components/layout/StackableContainer";
-import { useAppContext } from "../../../../context/AppContext";
+import { useChains } from "../../../../context/ChainsContext";
 import { findTransactionByID } from "../../../../lib/graphqlHelpers";
 import { getMultisigAccount } from "../../../../lib/multisigHelpers";
 import { dbTxFromJson } from "../../../../lib/txMsgHelpers";
@@ -66,7 +66,7 @@ const TransactionPage = ({
   signatures: DbSignature[];
   txHash: string;
 }) => {
-  const { state } = useAppContext();
+  const { chain } = useChains();
   const [currentSignatures, setCurrentSignatures] = useState(signatures);
   const [broadcastError, setBroadcastError] = useState("");
   const [isBroadcasting, setIsBroadcasting] = useState(false);
@@ -85,10 +85,9 @@ const TransactionPage = ({
   const fetchMultisig = useCallback(
     async (address: string) => {
       try {
-        assert(state.chain.nodeAddress, "Node address missing");
-        const client = await StargateClient.connect(state.chain.nodeAddress);
-        assert(state.chain.addressPrefix, "addressPrefix missing");
-        const result = await getMultisigAccount(address, state.chain.addressPrefix, client);
+        const client = await StargateClient.connect(chain.nodeAddress);
+
+        const result = await getMultisigAccount(address, chain.addressPrefix, client);
         setPubkey(result[0]);
         setAccountOnChain(result[1]);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -97,7 +96,7 @@ const TransactionPage = ({
         console.log("Account error:", error);
       }
     },
-    [state.chain.addressPrefix, state.chain.nodeAddress],
+    [chain.addressPrefix, chain.nodeAddress],
   );
 
   useEffect(() => {
@@ -126,8 +125,8 @@ const TransactionPage = ({
         bodyBytes,
         new Map(currentSignatures.map((s) => [s.address, fromBase64(s.signature)])),
       );
-      assert(state.chain.nodeAddress, "Node address missing");
-      const broadcaster = await StargateClient.connect(state.chain.nodeAddress);
+
+      const broadcaster = await StargateClient.connect(chain.nodeAddress);
       const result = await broadcaster.broadcastTx(signedTxBytes);
       console.log(result);
       const _res = await axios.post(`/api/transaction/${transactionID}`, {
@@ -146,7 +145,12 @@ const TransactionPage = ({
     : false;
 
   return (
-    <Page goBack={{ pathname: `/multi/${multisigAddress}`, title: "multisig" }}>
+    <Page
+      goBack={{
+        pathname: `/${chain.registryName}/${multisigAddress}`,
+        title: "multisig",
+      }}
+    >
       <StackableContainer base>
         <StackableContainer>
           <h1>{transactionHash ? "Completed Transaction" : "In Progress Transaction"}</h1>

pages/[chainName]/[address]/transaction/new.tsx

@@ -1,15 +1,14 @@
 import { Account, StargateClient } from "@cosmjs/stargate";
-import { assert } from "@cosmjs/utils";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import CreateTxForm from "../../../../components/forms/CreateTxForm";
 import Page from "../../../../components/layout/Page";
 import StackableContainer from "../../../../components/layout/StackableContainer";
-import { useAppContext } from "../../../../context/AppContext";
+import { useChains } from "../../../../context/ChainsContext";
 import { getMultisigAccount } from "../../../../lib/multisigHelpers";
 
 const NewTransactionPage = () => {
-  const { state } = useAppContext();
+  const { chain } = useChains();
   const [accountOnChain, setAccountOnChain] = useState<Account | null>(null);
   const [accountError, setAccountError] = useState(null);
   const router = useRouter();
@@ -19,10 +18,9 @@ const NewTransactionPage = () => {
     async (address: string) => {
       setAccountError(null);
       try {
-        assert(state.chain.nodeAddress, "Node address missing");
-        const client = await StargateClient.connect(state.chain.nodeAddress);
-        assert(state.chain.addressPrefix, "addressPrefix missing");
-        const result = await getMultisigAccount(address, state.chain.addressPrefix, client);
+        const client = await StargateClient.connect(chain.nodeAddress);
+
+        const result = await getMultisigAccount(address, chain.addressPrefix, client);
         setAccountOnChain(result[1]);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (error: any) {
@@ -30,7 +28,7 @@ const NewTransactionPage = () => {
         console.log("Account error:", error);
       }
     },
-    [state.chain.addressPrefix, state.chain.nodeAddress],
+    [chain.addressPrefix, chain.nodeAddress],
   );
 
   useEffect(() => {
@@ -40,7 +38,13 @@ const NewTransactionPage = () => {
   }, [fetchMultisig, multisigAddress]);
 
   return (
-    <Page goBack={{ pathname: `/multi/${multisigAddress}`, title: "multisig", needsConfirm: true }}>
+    <Page
+      goBack={{
+        pathname: `/${chain.registryName}/${multisigAddress}`,
+        title: "multisig",
+        needsConfirm: true,
+      }}
+    >
       <StackableContainer base>
         {accountError || !accountOnChain ? (
           <StackableContainer>

pages/index.tsx

@@ -1,18 +1,17 @@
-import React from "react";
-
 import FindMultisigForm from "../components/forms/FindMultisigForm";
 import Page from "../components/layout/Page";
 import StackableContainer from "../components/layout/StackableContainer";
-import { useAppContext } from "../context/AppContext";
+import { useChains } from "../context/ChainsContext";
 
 const MultiPage = () => {
-  const { state } = useAppContext();
+  const { chain } = useChains();
+
   return (
     <Page>
       <StackableContainer base>
         <StackableContainer lessPadding>
           <h1 className="title">
-            <span>{state.chain.chainDisplayName}</span> Multisig Manager
+            <span>{chain.chainDisplayName}</span> Multisig Manager
           </h1>
         </StackableContainer>
         <FindMultisigForm />