Display Voting Power Modal on First Wallet Connect Only

.eslintrc.json

@@ -71,4 +71,4 @@
 		}
 	},
 	"parser": "@typescript-eslint/parser"
-}
+}

app/delegation/farcaster/FarcasterLookup.tsx

@@ -17,7 +17,6 @@ function extractFarcasterUsername(input: string) {
   if (trimmedInput.includes('@')) {
     return trimmedInput.split('@')[1];
   }
-
   else if (trimmedInput.includes('warpcast.com/')) {
     return trimmedInput.split('warpcast.com/')[1];
   }

app/utils/wallet/modals/NotBhModal.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect, useState } from 'react';
 import { useAccount } from 'wagmi';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
@@ -15,57 +15,81 @@ interface BhModalProps {
   open: () => void
 }
 
-const BadgeHolderModal: React.FC<BhModalProps> = (
-  { onConnectFarcaster, open }
-) => {
+const BadgeHolderModal: React.FC<BhModalProps> = ({ onConnectFarcaster, open }) => {
   const { address } = useAccount();
+  const router = useRouter();
   const { data: badges } = useGetPublicBadges();
   const { data: connectionStatus } = useGetConnectionStatus();
   const { data: delegates } = useGetDelegationStatus();
 
+  const [showModal, setShowModal] = useState(false);
+  const [shouldRedirect, setShouldRedirect] = useState(false);
+
+  // Check localStorage to determine if the modal should be shown
+  useEffect(() => {
+    if (!address) return;
+
+    const hasSeenModalKey = `hasSeenBadgeHolderModal_${address}`;
+    const hasSeenModal = localStorage.getItem(hasSeenModalKey);
+
+    console.log(`Wallet address: ${address}`);
+    console.log(`Checking localStorage for key: ${hasSeenModalKey}, value: ${hasSeenModal}`);
+
+    if (!hasSeenModal) {
+      console.log('First login detected. Showing modal.');
+      setShowModal(true);
+      localStorage.setItem(hasSeenModalKey, 'true');
+    // eslint-disable-next-line @stylistic/brace-style
+    } else {
+      console.log('Subsequent login detected. Skipping modal.');
+      setShouldRedirect(true);
+    }
+  }, [address]);
+
+  // Redirect if shouldRedirect is set and modal is not visible
+  useEffect(() => {
+    if (shouldRedirect && !showModal) {
+      console.log('Redirecting to /allocation.');
+      router.push('/allocation');
+    }
+  }, [shouldRedirect, showModal, router]);
+
+  // const handleCloseModal = () => {
+  // console.log('Modal closed. Redirecting to /allocation.');
+  // setShowModal(false);
+  // setShouldRedirect(true); // Trigger redirection after modal closes
+  // };
+
   const badgeCards = useMemo(() => {
     if (!badges) return null;
-    const {
-      delegateAmount,
-      holderAmount,
-      holderType,
-      delegateType,
-      worldCoinVerified,
-      badgeholderType,
-      ...rest
-    }: BadgeData = badges;
+    // eslint-disable-next-line @stylistic/max-len
+    const { delegateAmount, holderAmount, holderType, delegateType, worldCoinVerified, badgeholderType, ...rest }: BadgeData = badges;
     const badgePoints = { ...rest };
     return Object.entries(badgePoints).map(([el1, el2]) => {
-      const [key, value] = [
-        el1,
-        el2,
-      ] as BadgeCardEntryType;
+      const [key, value] = [el1, el2] as BadgeCardEntryType;
       return (
         <BadgeCard
           key={key}
           points={value}
           type={key}
           medal={getBadgeMedal(key, badges)}
-          amount={getBadgeAmount(
-            key,
-            badges,
-          )}
+          amount={getBadgeAmount(key, badges)}
         />
       );
     });
   }, [badges]);
-  const router = useRouter();
+
+  // Render nothing if modal should not be shown and redirection is pending
+  if (!showModal && shouldRedirect) return null;
+
   return (
     <div className="relative flex max-w-3xl flex-col items-center justify-center gap-6 rounded-lg bg-badge-modal bg-cover bg-no-repeat px-24 py-8 text-center">
       <h2 className="w-fit text-wrap text-4xl font-bold">Welcome to the Pairwise voting for "Retro Funding 6"</h2>
       {badges && Object.keys(badges).length > 0
         ? (
             <div className="flex flex-col justify-center">
               <div className="flex flex-col gap-2 text-base">
-
-                <h2 className="w-full text-lg font-semibold text-gray-700">
-                  Your voting power
-                </h2>
+                <h2 className="w-full text-lg font-semibold text-gray-700">Your voting power</h2>
                 <div className="text-gray-400">{address ? shortenWalletAddress(address) : null}</div>
               </div>
               <div className="flex flex-row gap-3">{badgeCards}</div>
@@ -80,13 +104,12 @@ const BadgeHolderModal: React.FC<BhModalProps> = (
               </div>
             </div>
           )}
-
       <div className="flex w-full flex-col items-center justify-start gap-4">
         <div className="flex flex-col items-center gap-2">
           <div className="text-2xl font-semibold text-dark-900">Claim more voting power!</div>
           <div className="text-center text-sm text-gray-400">
             <div>Check who delegated their voting power to you.</div>
-            <div>Connects other accounts to claim more.</div>
+            <div>Connect other accounts to claim more.</div>
           </div>
         </div>
         <div className="m-auto flex w-full max-w-md flex-col justify-center gap-2">
@@ -100,7 +123,7 @@ const BadgeHolderModal: React.FC<BhModalProps> = (
                   ? 'border-[#079455] bg-[#DCFAE6] text-[#079455]'
                   : 'border-[#CBD5E0] bg-gray-50 text-gray-700'
               } px-4 py-2 font-semibold`}
-              disabled={(connectionStatus?.worldId ?? undefined) !== undefined}
+              disabled={!!connectionStatus?.worldId}
             >
               <WorldIdIcon />
               Connect with WorldID
@@ -111,7 +134,6 @@ const BadgeHolderModal: React.FC<BhModalProps> = (
                 <p className="text-center text-sm font-medium text-[#079455]">
                   Your voting power increased. You earned a new Badge.
                 </p>
-
               </div>
             )}
           </div>
@@ -123,7 +145,7 @@ const BadgeHolderModal: React.FC<BhModalProps> = (
                   ? 'border-[#079455] bg-[#DCFAE6] text-[#079455]'
                   : 'border-[#CBD5E0] bg-gray-100 text-gray-700'
               } justify-center gap-2 rounded-lg border px-4 py-2 font-semibold`}
-              disabled={(connectionStatus?.farcaster ?? undefined) !== undefined}
+              disabled={!!connectionStatus?.farcaster}
             >
               <WarpcastIcon />
               Connect with Farcaster
@@ -134,25 +156,22 @@ const BadgeHolderModal: React.FC<BhModalProps> = (
                 <p className="text-center text-sm font-medium text-[#079455]">
                   <span className="font-semibold">
                     {delegates?.toYou?.uniqueDelegators
-                      ? `${(delegates?.toYou?.uniqueDelegators <= 1)
+                      ? delegates?.toYou?.uniqueDelegators <= 1
                         ? 'someone delegated to you'
-                        : `${delegates?.toYou?.uniqueDelegators} people delegated to you`}`
+                        : `${delegates?.toYou?.uniqueDelegators} people delegated to you`
                       : 'You have no delegations'}
                   </span>
                 </p>
               </div>
             )}
           </div>
-
-          {(connectionStatus?.farcaster
-          && connectionStatus?.worldId)
+          {(connectionStatus?.farcaster && connectionStatus?.worldId)
             ? (
                 <button
                   onClick={() => {
                     router.push('/allocation');
                   }}
-                  className="m-auto w-3/5 rounded-md bg-primary
-              px-4 py-2 text-white hover:bg-red-600"
+                  className="m-auto w-3/5 rounded-md bg-primary px-4 py-2 text-white hover:bg-red-600"
                 >
                   Continue →
                 </button>