Poll: add screen when we are on the wrong network

oasisprotocol · Jul 15, 2024 · 794f795 · 794f795
1 parent d18b4e1
commit 794f795
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/frontend/src/pages/PollPage/ActivePoll.tsx b/frontend/src/pages/PollPage/ActivePoll.tsx
@@ -12,6 +12,7 @@ import { ConnectWallet } from '../../components/ConnectWallet';
 export const ActivePoll: FC<PollData> = (
   {
     hasWallet,
+    hasWalletOnWrongNetwork,
     poll,
     remainingTime,
     remainingTimeString,
@@ -31,7 +32,7 @@ export const ActivePoll: FC<PollData> = (
     topUp,
   }
 ) => {
-  // console.log("hasWallet?", hasWallet, hasWallet ? userAddress : "")
+  // console.log("hasWallet?", hasWallet, "hasWalletOnWrongNetwork?",hasWalletOnWrongNetwork)
   // console.log("isMine?", isMine, "canClose?", canClose)
 
   const {name, description, choices, creator } = poll!.ipfsParams
@@ -83,15 +84,24 @@ export const ActivePoll: FC<PollData> = (
             <div className={classes.above}>{choice}</div>
           </div>
         ))}
-      { !hasWallet && (
-        <div className={classes.needWallet}>
-          To vote on this poll, please <b>connect your wallet</b> by
-          clicking the "Connect Wallet" button.
-          This will open your wallet, and let you confirm the connection,
-          and also point your wallet to the Oasis Sapphire network.
-          Ensure you have enough ROSE for any transaction fees.
-        </div>
-      ) }
+      { !hasWallet && (hasWalletOnWrongNetwork
+        ? (
+          <div className={classes.needWallet}>
+            To vote on this poll, please <b>point your wallet to the Oasis network</b> by
+            clicking the "Switch Network" button.
+            This will open your wallet, and let you confirm that
+            you want to connect to the Oasis Sapphire network.
+            Ensure you have enough ROSE for any transaction fees.
+          </div>
+        ) : (
+          <div className={classes.needWallet}>
+            To vote on this poll, please <b>connect your wallet</b> by
+            clicking the "Connect Wallet" button.
+            This will open your wallet, and let you confirm the connection,
+            and also point your wallet to the Oasis Sapphire network.
+            Ensure you have enough ROSE for any transaction fees.
+          </div>
+      )) }
       { remainingTimeString && <h4>{remainingTimeString}</h4>}
       { isPastDue && <h4>Results will be available when {isMine ? "you close" : "the owner formally closes"} the poll.</h4>}
       <div className={classes.buttons}>

diff --git a/frontend/src/pages/PollPage/hook.ts b/frontend/src/pages/PollPage/hook.ts
@@ -63,7 +63,7 @@ const noVotes: ListOfVotes = { out_count: 0n, out_voters: [], out_choices: [] }
 
 export const usePollData = (pollId: string) => {
   const eth = useEthereum()
-  const { userAddress } = eth
+  const { userAddress, isHomeChain } = eth
   const {
     pollManager: dao,
     pollManagerAddress: daoAddress,
@@ -110,6 +110,7 @@ export const usePollData = (pollId: string) => {
   const [remainingTimeString, setRemainingTimeString] = useState<string | undefined>()
   const [isMine, setIsMine] = useState(false)
   const [hasWallet, setHasWallet] = useState(false)
+  const [hasWalletOnWrongNetwork, setHasWalletOnWrongNetwork] = useState(false)
 
   useEffect(
     () => setCanVote(!!eth.state.address &&
@@ -534,12 +535,14 @@ export const usePollData = (pollId: string) => {
   }, [poll, userAddress])
 
   useEffect(() => {
-    setHasWallet(userAddress !== ZeroAddress)
-  }, [userAddress])
+    setHasWallet(isHomeChain && userAddress !== ZeroAddress)
+    setHasWalletOnWrongNetwork(!isHomeChain && userAddress !== ZeroAddress)
+  }, [userAddress, isHomeChain])
 
   return {
     userAddress,
     hasWallet,
+    hasWalletOnWrongNetwork,
     isLoading,
     error,
     poll,