Extract CreateTxForm to /transaction/new

components/forms/CreateTxForm/index.tsx

@@ -84,7 +84,7 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
         dataJSON: JSON.stringify(tx),
       });
 
-      router.push(`${senderAddress}/transaction/${transactionID}`);
+      router.push(`/multi/${senderAddress}/transaction/${transactionID}`);
     } catch (error) {
       console.error("Creat transaction error:", error);
       setShowTxError(true);
@@ -94,7 +94,10 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
   };
 
   return (
-    <StackableContainer lessPadding>
+    <StackableContainer
+      lessPadding
+      divProps={{ style: { width: "min(690px, 90vw)", maxWidth: "690px" } }}
+    >
       <h2>Create New Transaction</h2>
       {msgTypes.length ? (
         msgTypes.map((msgType, index) => (

pages/multi/[address]/index.tsx

@@ -7,7 +7,6 @@ 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 CreateTxForm from "../../../components/forms/CreateTxForm";
 import Button from "../../../components/inputs/Button";
 import Page from "../../../components/layout/Page";
 import StackableContainer from "../../../components/layout/StackableContainer";
@@ -70,7 +69,7 @@ const Multipage = () => {
   }, [fetchMultisig, multisigAddress]);
 
   return (
-    <Page goBack={{ pathname: "/", title: "home", needsConfirm: true }}>
+    <Page goBack={{ pathname: "/", title: "home" }}>
       <StackableContainer base>
         <StackableContainer>
           <label>Multisig Address</label>
@@ -84,20 +83,7 @@ const Multipage = () => {
             threshold={pubkey.value.threshold}
           />
         ) : null}
-        <div className="interfaces">
-          <div className="col-1">
-            <MultisigHoldings holdings={holdings} />
-          </div>
-          <div className="col-2">
-            <StackableContainer lessPadding>
-              <h2>New transaction</h2>
-              <p>
-                Once a transaction is created, it can be signed by the multisig members, and then
-                broadcast.
-              </p>
-            </StackableContainer>
-          </div>
-        </div>
+        <MultisigHoldings holdings={holdings} />
         {accountError || !accountOnChain ? (
           <StackableContainer>
             <div className="multisig-error">
@@ -123,25 +109,13 @@ const Multipage = () => {
             </div>
           </StackableContainer>
         ) : null}
-        {accountOnChain && multisigAddress ? (
-          <CreateTxForm senderAddress={multisigAddress} accountOnChain={accountOnChain} />
-        ) : null}
+        <Button
+          label="Create New Transaction"
+          onClick={() => router.push(`/multi/${multisigAddress}/transaction/new`)}
+          disabled={!accountOnChain || !multisigAddress}
+        />
       </StackableContainer>
       <style jsx>{`
-        .interfaces {
-          display: flex;
-          justify-content: space-between;
-          margin-top: 50px;
-          flex-direction: column;
-        }
-        .col-1 {
-          flex: 1;
-          padding-right: 0;
-          margin-bottom: 50px;
-        }
-        .col-2 {
-          flex: 1;
-        }
         label {
           font-size: 12px;
           font-style: italic;

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

@@ -0,0 +1,89 @@
+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 { getMultisigAccount } from "../../../../lib/multisigHelpers";
+
+const NewTransactionPage = () => {
+  const { state } = useAppContext();
+  const [accountOnChain, setAccountOnChain] = useState<Account | null>(null);
+  const [accountError, setAccountError] = useState(null);
+  const router = useRouter();
+  const multisigAddress = router.query.address?.toString();
+
+  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.addressPrefix, "addressPrefix missing");
+        const result = await getMultisigAccount(address, state.chain.addressPrefix, client);
+        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.addressPrefix, state.chain.nodeAddress],
+  );
+
+  useEffect(() => {
+    if (multisigAddress) {
+      fetchMultisig(multisigAddress);
+    }
+  }, [fetchMultisig, multisigAddress]);
+
+  return (
+    <Page goBack={{ pathname: `/multi/${multisigAddress}`, title: "multisig", needsConfirm: true }}>
+      <StackableContainer base>
+        {accountError || !accountOnChain ? (
+          <StackableContainer>
+            <div className="multisig-error">
+              {accountError ? (
+                <>
+                  <p>
+                    This multisig address's pubkeys are not available, and so it cannot be used with
+                    this tool.
+                  </p>
+                  <p>
+                    You can recreate it with this tool here, or sign and broadcast a transaction
+                    with the tool you used to create it. Either option will make the pubkeys
+                    accessible and will allow this tool to use this multisig fully.
+                  </p>
+                </>
+              ) : null}
+              {!!accountOnChain ? (
+                <p>
+                  An account needs to be present on chain before creating a transaction. Send some
+                  tokens to the address first.
+                </p>
+              ) : null}
+            </div>
+          </StackableContainer>
+        ) : null}
+        {accountOnChain && multisigAddress ? (
+          <CreateTxForm senderAddress={multisigAddress} accountOnChain={accountOnChain} />
+        ) : null}
+      </StackableContainer>
+      <style jsx>{`
+        .multisig-error p {
+          max-width: 550px;
+          color: red;
+          font-size: 16px;
+          line-height: 1.4;
+        }
+        .multisig-error p:first-child {
+          margin-top: 0;
+        }
+      `}</style>
+    </Page>
+  );
+};
+
+export default NewTransactionPage;