@sundaeswap/wallet-lite 0.0.25 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sundaeswap/wallet-lite",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/classes/WalletObserver.class.ts

@@ -210,6 +210,15 @@ export class WalletObserver<
     return this._performingSync;
   }
 
+  /**
+   * Helper method to check if the instance has an active connection.
+   *
+   * @returns {boolean}
+   */
+  hasActiveConnection(): boolean {
+    return Boolean(this._activeWallet && this.api);
+  }
+
   /**
    * Synchronizes the API with the wallet. This is useful if the account has changed,
    * but the underlying intent has not.

package/src/react-components/WalletObserverProvider/WalletObserverProvider.tsx

@@ -22,19 +22,17 @@ const WalletObserverProvider: FC<
   PropsWithChildren<IWalletObserverProviderProps>
 > = ({ children, options }) => {
   const observerRef = useProviderWalletObserverRef(options?.observerOptions);
-  const { syncWallet, ...reactiveState } = useWalletObserverState(
-    observerRef.current
-  );
+  const state = useWalletObserverState(observerRef.current);
 
-  useProviderEventListeners(observerRef.current, syncWallet);
+  useProviderEventListeners(observerRef.current, state);
   useProviderRefreshInterval(
     observerRef.current,
-    syncWallet,
+    state.syncWallet,
     options?.refreshInterval
   );
 
   const derivedState = useDerivedState(observerRef.current, {
-    usedAddresses: reactiveState.usedAddresses,
+    usedAddresses: state.usedAddresses,
   });
 
   // Memoize the context value
@@ -43,13 +41,12 @@ const WalletObserverProvider: FC<
       observerRef: observerRef,
       refreshInterval: options?.refreshInterval || 30000,
       state: {
-        ...reactiveState,
+        ...state,
         ...derivedState,
         observer: observerRef.current,
-        syncWallet,
       },
     }),
-    [options, syncWallet, reactiveState, derivedState]
+    [options, state, derivedState]
   );
 
   return (

package/src/react-components/WalletObserverProvider/hooks/effects/useProviderEventListeners.ts

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { EWalletObserverEvents } from "../../../../@types/events.js";
 import { WalletObserver } from "../../../../classes/WalletObserver.class.js";
 import { TWalletProviderHooks } from "../../../contexts/observer/index.js";
+import { useWalletObserverState } from "../useWalletObserverState.js";
 
 /**
  * Internal use only. This is run in every WalletObserverProvider
@@ -15,7 +16,7 @@ import { TWalletProviderHooks } from "../../../contexts/observer/index.js";
  */
 export const useProviderEventListeners = (
   observer: WalletObserver,
-  syncWallet: () => Promise<void>,
+  state: ReturnType<typeof useWalletObserverState>,
   hooks?: TWalletProviderHooks
 ) => {
   /**
@@ -80,26 +81,19 @@ export const useProviderEventListeners = (
    * Ensure the wallet syncs on connect and disconnect.
    */
   useEffect(() => {
-    window.addEventListener("focus", syncWallet);
+    window.addEventListener("focus", state.syncWallet);
 
     observer.addEventListener(
       EWalletObserverEvents.CONNECT_WALLET_END,
-      syncWallet
+      state.syncWallet
     );
 
-    observer.addEventListener(EWalletObserverEvents.DISCONNECT, syncWallet);
-
     return () => {
-      window.addEventListener("focus", syncWallet);
+      window.addEventListener("focus", state.syncWallet);
       observer.removeEventListener(
         EWalletObserverEvents.CONNECT_WALLET_END,
-        syncWallet
-      );
-
-      observer.removeEventListener(
-        EWalletObserverEvents.DISCONNECT,
-        syncWallet
+        state.syncWallet
       );
     };
-  }, [observer, syncWallet]);
+  }, [observer, state.syncWallet]);
 };

package/src/react-components/WalletObserverProvider/hooks/useWalletObserverState.ts

@@ -1,7 +1,6 @@
 import type { TransactionUnspentOutput } from "@cardano-sdk/core/dist/cjs/Serialization/index.js";
 import { AssetAmount } from "@sundaeswap/asset";
 import { useCallback, useState } from "react";
-import { unstable_batchedUpdates } from "react-dom";
 
 import {
   TAssetAmountMap,
@@ -38,92 +37,112 @@ export const useWalletObserverState = (observer: WalletObserver) => {
   const [collateral, setCollateral] = useState<TransactionUnspentOutput[]>();
   const [ready, setReady] = useState(false);
   const [isCip45, setIsCip45] = useState(false);
+  const [switching, setSwitching] = useState(false);
+
+  const disconnect = useCallback(() => {
+    // Reset observer state.
+    observer.disconnect();
+
+    // Reset state.
+    setAdaBalance(new AssetAmount(0n));
+    setBalance(new WalletBalanceMap(observer));
+    setHandleMetadata(new WalletAssetMap());
+    setUsedAddresses([]);
+    setUnusedAddresses([]);
+    setActiveWallet(undefined);
+    setNetwork(undefined);
+    setUtxos(undefined);
+    setCollateral(undefined);
+    setReady(false);
+    setIsCip45(false);
+  }, [observer]);
+
+  const connectWallet = useCallback(
+    async (wallet: TSupportedWalletExtensions) => {
+      if (
+        observer.hasActiveConnection() &&
+        wallet !== observer.getActiveWallet()
+      ) {
+        setSwitching(true);
+      }
+
+      await observer.connectWallet(wallet);
+      setSwitching(false);
+    },
+    [observer, setSwitching]
+  );
 
   const syncWallet = useCallback(async () => {
-    if (observer.isSyncing()) {
+    if (observer.isSyncing() || !observer.hasActiveConnection()) {
       return;
     }
 
     const newWallet = observer.getActiveWallet();
-
     if (!newWallet) {
-      unstable_batchedUpdates(() => {
-        setAdaBalance(new AssetAmount(0n));
-        setBalance(new WalletBalanceMap(observer));
-        setUsedAddresses([]);
-        setUnusedAddresses([]);
-        setActiveWallet(undefined);
-        setNetwork(undefined);
-        setUtxos(undefined);
-        setCollateral(undefined);
-      });
+      disconnect();
       return;
     }
 
     const freshData = await observer.sync();
 
-    unstable_batchedUpdates(() => {
-      setActiveWallet((prevWallet) =>
-        newWallet === prevWallet ? prevWallet : newWallet
-      );
-
-      const newAdaBalance = freshData.balanceMap.get(
-        WalletObserver.ADA_ASSET_ID
-      );
-      if (newAdaBalance) {
-        setAdaBalance((prevBalance) =>
-          prevBalance.amount === newAdaBalance.amount
-            ? prevBalance
-            : newAdaBalance
-        );
-      }
+    setActiveWallet((prevWallet) =>
+      newWallet === prevWallet ? prevWallet : newWallet
+    );
 
-      setBalance((prevBalance) =>
-        areAssetMapsEqual(prevBalance, freshData.balanceMap)
+    const newAdaBalance = freshData.balanceMap.get(WalletObserver.ADA_ASSET_ID);
+    if (newAdaBalance) {
+      setAdaBalance((prevBalance) =>
+        prevBalance.amount === newAdaBalance.amount
           ? prevBalance
-          : freshData.balanceMap
-      );
-
-      setUsedAddresses((prevValue) =>
-        JSON.stringify(prevValue) === JSON.stringify(freshData.usedAddresses)
-          ? prevValue
-          : freshData.usedAddresses
+          : newAdaBalance
       );
+    }
 
-      setUnusedAddresses((prevValue) =>
-        JSON.stringify(prevValue) === JSON.stringify(freshData.unusedAddresses)
-          ? prevValue
-          : freshData.unusedAddresses
-      );
-
-      setNetwork((prevValue) =>
-        prevValue === freshData.network ? prevValue : freshData.network
-      );
-
-      setUtxos((prevValue) => {
-        const prevValueRep = prevValue?.map((v) => v.toCbor());
-        const newValueRep = freshData.utxos?.map((v) => v.toCbor());
-        if (prevValueRep !== newValueRep) {
-          return freshData.utxos;
-        }
-
-        return prevValue;
-      });
+    setBalance((prevBalance) =>
+      areAssetMapsEqual(prevBalance, freshData.balanceMap)
+        ? prevBalance
+        : freshData.balanceMap
+    );
+
+    setUsedAddresses((prevValue) =>
+      JSON.stringify(prevValue) === JSON.stringify(freshData.usedAddresses)
+        ? prevValue
+        : freshData.usedAddresses
+    );
+
+    setUnusedAddresses((prevValue) =>
+      JSON.stringify(prevValue) === JSON.stringify(freshData.unusedAddresses)
+        ? prevValue
+        : freshData.unusedAddresses
+    );
+
+    setNetwork((prevValue) =>
+      prevValue === freshData.network ? prevValue : freshData.network
+    );
+
+    setUtxos((prevValue) => {
+      const prevValueRep = prevValue?.map((v) => v.toCbor());
+      const newValueRep = freshData.utxos?.map((v) => v.toCbor());
+      if (prevValueRep !== newValueRep) {
+        return freshData.utxos;
+      }
 
-      setCollateral((prevValue) => {
-        const prevValueRep = prevValue?.map((v) => v.toCbor());
-        const newValueRep = freshData.utxos?.map((v) => v.toCbor());
-        if (prevValueRep !== newValueRep) {
-          return freshData.utxos;
-        }
+      return prevValue;
+    });
 
-        return prevValue;
-      });
+    setCollateral((prevValue) => {
+      const prevValueRep = prevValue?.map((v) => v.toCbor());
+      const newValueRep = freshData.utxos?.map((v) => v.toCbor());
+      if (prevValueRep !== newValueRep) {
+        return freshData.utxos;
+      }
 
-      setReady(true);
-      setIsCip45(newWallet.includes("p2p"));
+      return prevValue;
     });
-  }, [observer]);
+
+    setReady(true);
+    setIsCip45(newWallet.includes("p2p"));
+  }, [observer, disconnect]);
 
   return {
     activeWallet,
@@ -147,6 +166,10 @@ export const useWalletObserverState = (observer: WalletObserver) => {
     collateral,
     setCollateral,
     syncWallet,
+    disconnect,
+    connectWallet,
+    switching,
+    setSwitching,
     ready,
     setReady,
   };

package/src/react-components/contexts/observer/types.ts

@@ -75,7 +75,10 @@ export interface IWalletObserverState<
     setUnusedAddresses: Dispatch<SetStateAction<string[]>>;
     usedAddresses: string[];
     setUsedAddresses: Dispatch<SetStateAction<string[]>>;
+    switching: boolean;
     syncWallet: () => Promise<void>;
+    disconnect: () => void;
+    connectWallet: (wallet: TSupportedWalletExtensions) => Promise<void>;
   };
 }
 

package/src/react-components/hooks/useWalletHandles.ts

@@ -33,45 +33,53 @@ export const useWalletHandles = <
     }
 
     try {
-      const HandleClient = await import("@koralabs/adahandle-sdk");
-      const context =
-        state.network === 1
-          ? HandleClient.HandleClientContext.MAINNET
-          : HandleClient.HandleClientContext.PREVIEW;
-
-      // @ts-ignore Type isn't exported from default.
-      const sdk = new HandleClient({
-        context,
-        provider: new HandleClient.KoraLabsProvider(context),
-      });
-
-      // Restore once SDK updated
-      const walletHandlesWithDataArray = [...walletHandles.entries()];
-      const walletHandleDataArray: IHandle[] = await sdk
-        .provider()
-        .getAllDataBatch(
-          walletHandlesWithDataArray.map(([key]) => ({
-            value: key.split(".")[1],
-          }))
-        );
-
-      walletHandlesWithDataArray.forEach(([key, asset]) => {
-        const matchingData = walletHandleDataArray.find(
-          ({ hex }) => hex === key.split(".")[1]
-        ) as IHandle;
-
-        walletHandles.set(
-          normalizeAssetIdWithDot(key),
-          asset
-            .withMetadata({
-              ...matchingData,
-              ...asset.metadata,
-              assetId: normalizeAssetIdWithDot(asset.metadata.assetId),
-              decimals: 0,
-            })
-            .withAmount(1n)
-        );
-      });
+      await import("@koralabs/adahandle-sdk").then(
+        async ({
+          default: HandleClient,
+          HandleClientContext,
+          KoraLabsProvider,
+        }) => {
+          setLoadingHandles(true);
+          const context =
+            state.network === 1
+              ? HandleClientContext.MAINNET
+              : HandleClientContext.PREVIEW;
+
+          // @ts-ignore Type isn't exported from default.
+          const sdk = new HandleClient({
+            context,
+            provider: new KoraLabsProvider(context),
+          });
+
+          // Restore once SDK updated
+          const walletHandlesWithDataArray = [...walletHandles.entries()];
+          const walletHandleDataArray: IHandle[] = await sdk
+            .provider()
+            .getAllDataBatch(
+              walletHandlesWithDataArray.map(([key]) => ({
+                value: key.split(".")[1],
+              }))
+            );
+
+          walletHandlesWithDataArray.forEach(([key, asset]) => {
+            const matchingData = walletHandleDataArray.find(
+              ({ hex }) => hex === key.split(".")[1]
+            ) as IHandle;
+
+            walletHandles.set(
+              normalizeAssetIdWithDot(key),
+              asset
+                .withMetadata({
+                  ...matchingData,
+                  ...asset.metadata,
+                  assetId: normalizeAssetIdWithDot(asset.metadata.assetId),
+                  decimals: 0,
+                })
+                .withAmount(1n)
+            );
+          });
+        }
+      );
 
       return walletHandles;
     } catch (e) {
@@ -79,35 +87,34 @@ export const useWalletHandles = <
       return walletHandles;
     }
     // We only want to update the callback if the Handle keys change.
-  }, [state.balance, setLoadingHandles]);
+  }, [state.balance]);
 
   useEffect(() => {
-    syncHandles()
-      .then((newHandles) => {
-        setHandles((prevHandles) => {
-          let handleMetadataChanged = false;
-
-          if (newHandles.size !== prevHandles?.size) {
-            handleMetadataChanged = true;
-          } else {
-            for (const [key, val] of newHandles) {
-              if (
-                !prevHandles.has(key) ||
-                prevHandles.get(key)?.amount !== val?.amount
-              ) {
-                handleMetadataChanged = true;
-              }
+    syncHandles().then((newHandles) => {
+      setHandles((prevHandles) => {
+        let handleMetadataChanged = false;
+
+        if (newHandles.size !== prevHandles?.size) {
+          handleMetadataChanged = true;
+        } else {
+          for (const [key, val] of newHandles) {
+            if (
+              !prevHandles.has(key) ||
+              prevHandles.get(key)?.amount !== val?.amount
+            ) {
+              handleMetadataChanged = true;
             }
           }
+        }
 
-          if (!handleMetadataChanged) {
-            return prevHandles;
-          }
+        if (!handleMetadataChanged) {
+          return prevHandles;
+        }
 
-          return newHandles;
-        });
-      })
-      .then(() => setLoadingHandles((prevValue) => !prevValue));
+        return newHandles;
+      });
+      setLoadingHandles(() => false);
+    });
   }, [memoizedHandleDep, syncHandles, setHandles, setLoadingHandles]);
 
   const data = useMemo(

package/src/react-components/hooks/useWalletObserver.ts

@@ -29,9 +29,12 @@ export const useWalletObserver = <
       utxos: state.utxos,
       collateral: state.collateral,
       observer: state.observer,
-      syncWallet: state.syncWallet,
       unusedAddresses: state.unusedAddresses,
       usedAddresses: state.usedAddresses,
+      syncWallet: state.syncWallet,
+      disconnect: state.disconnect,
+      connectWallet: state.connectWallet,
+      switching: state.switching,
     };
 
     return result;
@@ -44,12 +47,15 @@ export const useWalletObserver = <
     state.network,
     state.observer,
     state.syncWallet,
+    state.disconnect,
+    state.connectWallet,
     state.unusedAddresses,
     state.usedAddresses,
     state.utxos,
     state.collateral,
     state.ready,
     state.isCip45,
+    state.switching,
   ]);
 
   return memoizedState;