chore: Added useTransition to wallet button

Author: hugo-heer

src/components/ConnectAccount.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { stellarNetwork } from '../contracts/util';
 import FundAccountButton from './FundAccountButton';
+import { WalletButton } from './WalletButton';
 
 const ConnectAccount: React.FC = () => {
   return (
     <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '10px', verticalAlign: 'middle' }}>
-        <div>Wallet Button here</div>
+        <WalletButton />
         {stellarNetwork !== "mainnet" && <FundAccountButton />}
     </div>
   );

src/components/WalletButton.tsx

@@ -7,12 +7,14 @@ import { useState } from 'react';
 
 export const WalletButton = () => {
   const [showDisconnectModal, setShowDisconnectModal] = useState(false);
-  const { address } = useWallet()
+  const { address, isPending, hasSyncedOnce } = useWallet();
+
+  const buttonLabel = !hasSyncedOnce || isPending ? "Pending..." : "Connect"
 
   if (!address) {
     return  (
-      <Button variant="primary" size="lg" onClick={() => void connectWallet()}>
-        Connect
+      <Button variant="primary" size="md" onClick={() => void connectWallet()}>
+        {buttonLabel}
       </Button>
     )
   }

src/providers/WalletProvider.tsx

@@ -1,22 +1,26 @@
-import { createContext, useEffect, useMemo, useState } from "react";
+import { createContext, useEffect, useMemo, useRef, useState } from "react";
 import { wallet } from "../util/wallet";
 import storage from "../util/storage";
+import { useTransition } from 'react';
 
 export interface WalletContextType {
   address?: string;
   network?: string;
   networkPassphrase?: string;
+  isPending?: boolean;
+  hasSyncedOnce?: boolean
 };
 
 export const WalletContext = // eslint-disable-line react-refresh/only-export-components
   createContext<WalletContextType>({});
 
 export const WalletProvider = ({ children }: { children: React.ReactNode }) => {
-  const [address, setAddress] = useState<string | undefined>(
-    () => storage.getItem("walletAddress") ?? undefined
-  );  
+  const [address, setAddress] = useState<string>();  
   const [network, setNetwork] = useState<string>();
   const [networkPassphrase, setNetworkPassphrase] = useState<string>();
+  const [isPending, startTransition] = useTransition();
+  const [hasSyncedOnce, setHasSyncedOnce] = useState(false);
+  const isFirstRun = useRef(true);
 
   const nullify = () => {
     setNetwork(undefined)
@@ -25,6 +29,7 @@ export const WalletProvider = ({ children }: { children: React.ReactNode }) => {
   }
 
   const updateCurrentWalletState = async () => {
+    
     // There is no way, with StellarWalletsKit, to check if the wallet is
     // installed/connected/authorized. We need to manage that on our side by
     // checking our storage item.
@@ -69,6 +74,15 @@ export const WalletProvider = ({ children }: { children: React.ReactNode }) => {
         await new Promise((res) => {
           timer = setTimeout(res, 1000)
         });
+        if (isFirstRun.current) {
+          startTransition(async () => {
+            await updateCurrentWalletState()
+            setHasSyncedOnce(true);
+          });
+          isFirstRun.current = false;
+        } else {
+          void updateCurrentWalletState();
+        }
         await updateCurrentWalletState()
       }
     })()
@@ -84,7 +98,9 @@ export const WalletProvider = ({ children }: { children: React.ReactNode }) => {
     address,
     network,
     networkPassphrase,
-  }), [address, network, networkPassphrase]);
+    isPending,
+    hasSyncedOnce
+  }), [address, network, networkPassphrase, isPending, hasSyncedOnce]);
 
   return (
     <WalletContext value={contextValue}>

src/util/storage.ts

@@ -13,7 +13,6 @@
  */
 type Schema = {
   walletId: string;
-  walletAddress: string;
 };
 
 /**

src/util/wallet.ts

@@ -39,11 +39,10 @@ export const connectWallet = async () => {
 
       // Now open selected wallet's login flow by calling `getAddress` --
       // Yes, it's strange that a getter has a side effect of opening a modal
-      void kit.getAddress().then(({ address }) => {
+      void kit.getAddress().then(() => {
         // Once `getAddress` returns successfully, we know they actually
         // connected the selected wallet, and we set our localStorage
         storage.setItem("walletId", selectedId);
-        storage.setItem("walletAddress", address);
       })
     },
   });
@@ -52,7 +51,6 @@ export const connectWallet = async () => {
 export const disconnectWallet = async () => {
   await kit.disconnect();
   storage.removeItem("walletId");
-  storage.removeItem("walletAddress");
 }
 
 export const wallet = kit;