diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx index c92f5247..e6c7c48c 100644 --- a/components/UI/navbar.tsx +++ b/components/UI/navbar.tsx @@ -26,7 +26,7 @@ const Navbar: FunctionComponent = () => { const [isConnected, setIsConnected] = useState(false); const [isWrongNetwork, setIsWrongNetwork] = useState(false); const [txLoading, setTxLoading] = useState(0); - const { available, connect, disconnect } = useConnectors(); + const { available, connect, disconnect, refresh } = useConnectors(); const { provider } = useProvider(); const domainOrAddressMinified = useDisplayName(address ?? ""); const domain = useDomainFromAddress(address ?? "").domain; @@ -40,10 +40,14 @@ const Navbar: FunctionComponent = () => { const [showWallet, setShowWallet] = useState(false); const router = useRouter(); - useEffect(() => { + useEffect(() => { // to handle autoconnect starknet-react adds connector id in local storage // if there is no value stored, we show the wallet modal - if (!localStorage.getItem("lastUsedConnector") && router?.pathname !== "/partnership") setHasWallet(true); + if ( + !localStorage.getItem("lastUsedConnector") && + router?.pathname !== "/partnership" + ) + setHasWallet(true); }, []); useEffect(() => { @@ -75,6 +79,7 @@ const Navbar: FunctionComponent = () => { } function onTopButtonClick(): void { + refresh(); if (available.length > 0) { if (available.length === 1) { connect(available[0]); @@ -107,6 +112,12 @@ const Navbar: FunctionComponent = () => { }; }, []); + // Refresh available connectors before showing wallet modal + function refreshAndShowWallet(): void { + refresh(); + setHasWallet(true); + } + return ( <>
@@ -144,9 +155,7 @@ const Navbar: FunctionComponent = () => { onClick={ isConnected ? () => setShowWallet(true) - : available.length === 1 - ? () => connect(available[0]) - : () => setHasWallet(true) + : () => refreshAndShowWallet() } > {isConnected ? (