From dfe68ccb89ded6ee7a74e3e69f2f415d668a495b Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 24 Apr 2023 22:42:21 +0200
Subject: [PATCH] Add conditional rendering for null accountOnChain

---
 pages/multi/[address]/index.tsx | 78 ++++++++++++++++++---------------
 1 file changed, 43 insertions(+), 35 deletions(-)

diff --git a/pages/multi/[address]/index.tsx b/pages/multi/[address]/index.tsx
index 6fb70a9..fe3d233 100644
--- a/pages/multi/[address]/index.tsx
+++ b/pages/multi/[address]/index.tsx
@@ -111,35 +111,35 @@ const Multipage = () => {
             </div>
           </StackableContainer>
         )}
-        {txView === "send" && (
+        {txView === "send" && accountOnChain && (
           <TransactionForm
             address={multisigAddress}
             accountOnChain={accountOnChain}
             closeForm={closeForm}
           />
         )}
-        {txView === "delegate" && (
+        {txView === "delegate" && accountOnChain && (
           <DelegationForm
             delegatorAddress={multisigAddress}
             accountOnChain={accountOnChain}
             closeForm={closeForm}
           />
         )}
-        {txView === "undelegate" && (
+        {txView === "undelegate" && accountOnChain && (
           <UnDelegationForm
             delegatorAddress={multisigAddress}
             accountOnChain={accountOnChain}
             closeForm={closeForm}
           />
         )}
-        {txView === "redelegate" && (
+        {txView === "redelegate" && accountOnChain && (
           <ReDelegationForm
             delegatorAddress={multisigAddress}
             accountOnChain={accountOnChain}
             closeForm={closeForm}
           />
         )}
-        {txView === "claimRewards" && (
+        {txView === "claimRewards" && accountOnChain && (
           <RewardsForm
             delegatorAddress={multisigAddress}
             accountOnChain={accountOnChain}
@@ -158,36 +158,44 @@ const Multipage = () => {
                   Once a transaction is created, it can be signed by the multisig members, and then
                   broadcast.
                 </p>
-                <Button
-                  label="Create Transaction"
-                  onClick={() => {
-                    setTxView("send");
-                  }}
-                />
-                <Button
-                  label="Create Delegation"
-                  onClick={() => {
-                    setTxView("delegate");
-                  }}
-                />
-                <Button
-                  label="Create UnDelegation"
-                  onClick={() => {
-                    setTxView("undelegate");
-                  }}
-                />
-                <Button
-                  label="Create Redelegate"
-                  onClick={() => {
-                    setTxView("redelegate");
-                  }}
-                />
-                <Button
-                  label="Claim Rewards"
-                  onClick={() => {
-                    setTxView("claimRewards");
-                  }}
-                />
+                {accountOnChain ? (
+                  <>
+                    <Button
+                      label="Create Transaction"
+                      onClick={() => {
+                        setTxView("send");
+                      }}
+                    />
+                    <Button
+                      label="Create Delegation"
+                      onClick={() => {
+                        setTxView("delegate");
+                      }}
+                    />
+                    <Button
+                      label="Create UnDelegation"
+                      onClick={() => {
+                        setTxView("undelegate");
+                      }}
+                    />
+                    <Button
+                      label="Create Redelegate"
+                      onClick={() => {
+                        setTxView("redelegate");
+                      }}
+                    />
+                    <Button
+                      label="Claim Rewards"
+                      onClick={() => {
+                        setTxView("claimRewards");
+                      }}
+                    />
+                  </>
+                ) : (
+                  <p>
+                    An account needs to be present on the multisig before creating a transaction.
+                  </p>
+                )}
               </StackableContainer>
             </div>
           </div>