Disconnected state (#100)

* Disconnected state * Don't show past votes if wallet isn't connected
airswap · Oct 5, 2023 · 80db2bd · 80db2bd
1 parent 976812d
commit 80db2bd
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/features/activate-migration/ActivatePointsCard.tsx b/src/features/activate-migration/ActivatePointsCard.tsx
@@ -1,6 +1,7 @@
 import { motion } from "framer-motion";
 import { useEffect } from "react";
 import { twJoin, twMerge } from "tailwind-merge";
+import { useAccount } from "wagmi";
 import { Checkbox } from "../common/Checkbox";
 import { CheckMark } from "../common/icons/CheckMark";
 import { formatNumber } from "../common/utils/formatNumber";
@@ -14,6 +15,8 @@ export const ActivatePointsCard = ({}: {}) => {
     treeId: ACTIVATE_TREE_ID,
   });
 
+  const { isConnected: isWalletConnected } = useAccount();
+
   const IS_ENABLED = import.meta.env.VITE_ENABLE_ACTIVATE_MIGRATION === "true";
 
   const { data: activateMigrationClaim } = useActivatePointsClaim({
@@ -116,7 +119,12 @@ export const ActivatePointsCard = ({}: {}) => {
         {/* Checkbox and title. */}
         <div className="flex items-center">
           {/* Checkbox */}
-          <div className="align-center -mt-1 mr-5 items-center ">
+          <div
+            className={twJoin(
+              "align-center -mt-1 mr-5 items-center",
+              !isWalletConnected && "hidden",
+            )}
+          >
             <Checkbox disabled />
           </div>
           {/* Title */}
@@ -130,7 +138,7 @@ export const ActivatePointsCard = ({}: {}) => {
           className={twJoin([
             "rounded-full px-4 py-1 text-xs font-bold uppercase leading-6",
             "flex flex-row items-center gap-2 ring-1 ring-gray-800",
-            "text-gray-500",
+            "text-gray-500 text-center",
           ])}
         >
           Coming soon

diff --git a/src/features/chain-connection/WalletConnection.tsx b/src/features/chain-connection/WalletConnection.tsx
@@ -39,8 +39,8 @@ const WalletConnection = () => {
         )}
         <span
           className={twJoin(
-            isConnected ? "font-medium" : "font-bold px-1",
-            "whitespace-nowrap normal-case",
+            isConnected ? "font-medium normal-case" : "font-bold px-1",
+            "whitespace-nowrap",
           )}
         >
           {isConnected ? displayAddress : "Connect"}

diff --git a/src/features/votes/PastEpochCard.tsx b/src/features/votes/PastEpochCard.tsx
@@ -136,16 +136,22 @@ export const PastEpochCard = ({
 
   const { isConnected: isWalletConnected } = useAccount();
 
+  if (!isWalletConnected) return null;
+
   const proposalGroupTitle = getEpochName(proposalGroup[0]);
 
   const trigger = (
     <div className="flex w-full items-center justify-between pr-4 font-semibold">
       {/* Checkbox and title. */}
       <div className="flex items-center">
         {/* Checkbox */}
-        <div className="align-center -mt-1 mr-5 items-center ">
+        <div
+          className={twJoin(
+            "align-center -mt-1 mr-5 items-center",
+            !isWalletConnected && "hidden",
+          )}
+        >
           <Checkbox
-            className={twJoin(!isWalletConnected && "invisible")}
             disabled={
               !root || // disabled if there's no root
               hasUserClaimed || // or if the user has already claimed
@@ -177,6 +183,7 @@ export const PastEpochCard = ({
           "rounded-full px-4 py-1 text-xs font-bold uppercase leading-6",
           "flex flex-row items-center gap-2 ring-1 ring-gray-800",
           (hasUserClaimed || !votedOnAllProposals) && "text-gray-500",
+          !isWalletConnected && "hidden",
         ])}
       >
         {hasUserClaimed && (