From ebf6c1bb82237f894f6879ce70e23e0c4efda6d2 Mon Sep 17 00:00:00 2001 From: maryjaf Date: Sun, 10 Nov 2024 11:59:48 +0330 Subject: [PATCH 1/3] Display Voting Power Modal on First Wallet Connect Only --- .eslintrc.json | 5 +- app/utils/wallet/modals/NotBhModal.tsx | 95 +++++++++++++++----------- 2 files changed, 60 insertions(+), 40 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 54daf67..5753de8 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -63,7 +63,8 @@ "quotes": [ "error", "single" - ] + ], + "brace-style": ["error", "1tbs", { "allowSingleLine": true }] }, "settings": { "import/resolver": { @@ -71,4 +72,4 @@ } }, "parser": "@typescript-eslint/parser" -} \ No newline at end of file +} diff --git a/app/utils/wallet/modals/NotBhModal.tsx b/app/utils/wallet/modals/NotBhModal.tsx index b9c14ec..eb21db5 100644 --- a/app/utils/wallet/modals/NotBhModal.tsx +++ b/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,46 +15,73 @@ interface BhModalProps { open: () => void } -const BadgeHolderModal: React.FC = ( - { onConnectFarcaster, open } -) => { +const BadgeHolderModal: React.FC = ({ 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 ( ); }); }, [badges]); - const router = useRouter(); + + // Render nothing if modal should not be shown and redirection is pending + if (!showModal && shouldRedirect) return null; + return (

Welcome to the Pairwise voting for "Retro Funding 6"

@@ -62,10 +89,7 @@ const BadgeHolderModal: React.FC = ( ? (
- -

- Your voting power -

+

Your voting power

{address ? shortenWalletAddress(address) : null}
{badgeCards}
@@ -80,13 +104,12 @@ const BadgeHolderModal: React.FC = (
)} -
Claim more voting power!
Check who delegated their voting power to you.
-
Connects other accounts to claim more.
+
Connect other accounts to claim more.
@@ -100,7 +123,7 @@ const BadgeHolderModal: React.FC = ( ? '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} > Connect with WorldID @@ -111,7 +134,6 @@ const BadgeHolderModal: React.FC = (

Your voting power increased. You earned a new Badge.

-
)}
@@ -123,7 +145,7 @@ const BadgeHolderModal: React.FC = ( ? '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} > Connect with Farcaster @@ -134,25 +156,22 @@ const BadgeHolderModal: React.FC = (

{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'}

)} - - {(connectionStatus?.farcaster - && connectionStatus?.worldId) + {(connectionStatus?.farcaster && connectionStatus?.worldId) ? ( From dcc6332f4be47ab3d6b121758c07a43ac66560cc Mon Sep 17 00:00:00 2001 From: maryjaf Date: Sun, 10 Nov 2024 13:05:26 +0330 Subject: [PATCH 2/3] remove connecthande-unused --- app/utils/wallet/modals/NotBhModal.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/utils/wallet/modals/NotBhModal.tsx b/app/utils/wallet/modals/NotBhModal.tsx index eb21db5..e2c13f3 100644 --- a/app/utils/wallet/modals/NotBhModal.tsx +++ b/app/utils/wallet/modals/NotBhModal.tsx @@ -54,11 +54,11 @@ const BadgeHolderModal: React.FC = ({ onConnectFarcaster, open }) } }, [shouldRedirect, showModal, router]); - const handleCloseModal = () => { - console.log('Modal closed. Redirecting to /allocation.'); - setShowModal(false); - setShouldRedirect(true); // Trigger redirection after modal closes - }; + // 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; From 6c933ea7fac58e46083d27e0932ece9c771e6963 Mon Sep 17 00:00:00 2001 From: Mahdi Date: Mon, 11 Nov 2024 16:27:24 +0330 Subject: [PATCH 3/3] Fix linting issues --- .eslintrc.json | 3 +-- app/delegation/farcaster/FarcasterLookup.tsx | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 5753de8..fca3304 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -63,8 +63,7 @@ "quotes": [ "error", "single" - ], - "brace-style": ["error", "1tbs", { "allowSingleLine": true }] + ] }, "settings": { "import/resolver": { diff --git a/app/delegation/farcaster/FarcasterLookup.tsx b/app/delegation/farcaster/FarcasterLookup.tsx index 872dafd..a31f7a8 100644 --- a/app/delegation/farcaster/FarcasterLookup.tsx +++ b/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]; }