@sundaeswap/wallet-lite 0.0.24 → 0.0.26

package/package.json

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

package/src/@types/observer.ts

@@ -66,6 +66,7 @@ export interface IResolvedWalletObserverOptions<
   persistence: boolean;
   peerConnectArgs: DAppPeerConnectParameters;
   connectTimeout: number;
+  debug: boolean;
 }
 
 /**

package/src/classes/WalletObserver.class.ts

@@ -78,6 +78,7 @@ export class WalletObserver<
         metadataResolver: this.fallbackMetadataResolver,
         persistence: false,
         connectTimeout: 10000,
+        debug: false,
         peerConnectArgs: {
           dAppInfo: {
             name: "Placeholder dApp Connecter Name",
@@ -141,6 +142,8 @@ export class WalletObserver<
       );
     }
 
+    const start = performance.now();
+
     try {
       this._performingSync = true;
       this.dispatch(EWalletObserverEvents.SYNCING_WALLET_START);
@@ -185,6 +188,10 @@ export class WalletObserver<
       this.dispatch(EWalletObserverEvents.SYNCING_WALLET_END, result);
       this._performingSync = false;
 
+      const end = performance.now();
+      if (this._options.debug) {
+        console.log(`sync: ${end - start}ms`);
+      }
       return result;
     } catch (e) {
       this._performingSync = false;
@@ -203,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.
@@ -267,6 +283,7 @@ export class WalletObserver<
   connectWallet = async (
     extension: TSupportedWalletExtensions
   ): Promise<void> => {
+    const start = performance.now();
     this.dispatch(EWalletObserverEvents.CONNECT_WALLET_START);
 
     let attempts = 0;
@@ -310,9 +327,15 @@ export class WalletObserver<
     this.dispatch(EWalletObserverEvents.CONNECT_WALLET_END, {
       extension,
     });
+
+    const end = performance.now();
+    if (this._options.debug) {
+      console.log(`connectWallet: ${end - start}ms`);
+    }
   };
 
   getCip45Instance = async () => {
+    const start = performance.now();
     if (!this.peerConnectInstance) {
       const { DAppPeerConnect } = await getPeerConnect();
       this.peerConnectInstance = new DAppPeerConnect(
@@ -320,6 +343,11 @@ export class WalletObserver<
       );
     }
 
+    const end = performance.now();
+    if (this._options.debug) {
+      console.log(`getCip45Instance: ${end - start}ms`);
+    }
+
     return {
       name: this._options.peerConnectArgs.dAppInfo.name,
       icon: this.peerConnectInstance.getIdenticon(),
@@ -376,6 +404,8 @@ export class WalletObserver<
       throw new Error("Attempted to query balance without an API instance.");
     }
 
+    const start = performance.now();
+
     this.dispatch(EWalletObserverEvents.GET_BALANCE_MAP_START);
     const [cbor, { Serialization }, { typedHex }] = await Promise.all([
       this.api.getBalance(),
@@ -411,6 +441,10 @@ export class WalletObserver<
       balanceMap,
     });
 
+    const end = performance.now();
+    if (this._options.debug) {
+      console.log(`getBalanceMap: ${end - start}ms`);
+    }
     return balanceMap;
   };
 
@@ -424,8 +458,15 @@ export class WalletObserver<
       throw new Error("Attempted to query network without an API instance.");
     }
 
+    const start = performance.now();
+
     const val = await this.api.getNetworkId();
     this.network = val;
+
+    const end = performance.now();
+    if (this._options.debug) {
+      console.log(`getNetwork: ${end - start}ms`);
+    }
     return val;
   };
 
@@ -441,6 +482,8 @@ export class WalletObserver<
       );
     }
 
+    const start = performance.now();
+
     const [cbor, { Cardano }, { typedHex }] = await Promise.all([
       this.api.getUsedAddresses(),
       getCardanoCore(),
@@ -451,6 +494,10 @@ export class WalletObserver<
       Cardano.Address.fromBytes(typedHex(val)).toBech32()
     );
 
+    const end = performance.now();
+    if (this._options.debug) {
+      console.log(`getUsedAddresses: ${end - start}ms`);
+    }
     return data;
   };
 
@@ -466,6 +513,8 @@ export class WalletObserver<
       );
     }
 
+    const start = performance.now();
+
     const [cbor, { Cardano }, { typedHex }] = await Promise.all([
       this.api.getUnusedAddresses(),
       getCardanoCore(),
@@ -476,6 +525,10 @@ export class WalletObserver<
       Cardano.Address.fromBytes(typedHex(val)).toBech32()
     );
 
+    const end = performance.now();
+    if (this._options.debug) {
+      console.log(`getUnusedAddresses: ${end - start}ms`);
+    }
     return data;
   };
 
@@ -489,6 +542,8 @@ export class WalletObserver<
       throw new Error("Attempted to query UTXOs without an API instance.");
     }
 
+    const start = performance.now();
+
     const [cbor, { Serialization }, { typedHex }] = await Promise.all([
       this.api.getUtxos(),
       getCardanoCore(),
@@ -506,6 +561,10 @@ export class WalletObserver<
       return txOutput;
     });
 
+    const end = performance.now();
+    if (this._options.debug) {
+      console.log(`getUtxos: ${end - start}ms`);
+    }
     return data;
   };
 
@@ -519,6 +578,8 @@ export class WalletObserver<
       throw new Error("Attempted to query UTXOs without an API instance.");
     }
 
+    const start = performance.now();
+
     const [cbor, { Serialization }, { typedHex }] = await Promise.all([
       (async () => {
         const funcCall =
@@ -545,6 +606,10 @@ export class WalletObserver<
       return txOutput;
     });
 
+    const end = performance.now();
+    if (this._options.debug) {
+      console.log(`getCollateral: ${end - start}ms`);
+    }
     return data;
   };
 
@@ -558,6 +623,8 @@ export class WalletObserver<
   private __metadataResolverWithCache = async (
     assetIds: string[]
   ): Promise<Map<string, AssetMetadata>> => {
+    const start = performance.now();
+
     if (this._cachedMetadata) {
       const cachedKeys = new Set(this._cachedMetadata.keys());
       const inputKeys = new Set(assetIds);
@@ -566,6 +633,10 @@ export class WalletObserver<
         cachedKeys.size === inputKeys.size &&
         [...cachedKeys].every((key) => inputKeys.has(key))
       ) {
+        const end = performance.now();
+        if (this._options.debug) {
+          console.log(`metadataResolver (cached): ${end - start}ms`);
+        }
         return this._cachedMetadata;
       }
     }
@@ -593,6 +664,11 @@ export class WalletObserver<
     }
 
     this._cachedMetadata = newMetadata;
+
+    const end = performance.now();
+    if (this._options.debug) {
+      console.log(`metadataResolver: ${end - start}ms`);
+    }
     return newMetadata;
   };
 

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,28 +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,6 +1,6 @@
 import type { TransactionUnspentOutput } from "@cardano-sdk/core/dist/cjs/Serialization/index.js";
 import { AssetAmount } from "@sundaeswap/asset";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useState } from "react";
 
 import {
   TAssetAmountMap,
@@ -19,7 +19,6 @@ import { THandleMetadata } from "../../contexts/observer/index.js";
  * @param {WalletObserver} observer
  */
 export const useWalletObserverState = (observer: WalletObserver) => {
-  const prevActiveWallet = useRef<TSupportedWalletExtensions>();
   const [activeWallet, setActiveWallet] =
     useState<TSupportedWalletExtensions>();
   const [adaBalance, setAdaBalance] = useState<AssetAmount>(
@@ -38,33 +37,58 @@ 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) {
-      setAdaBalance(new AssetAmount(0n));
-      setBalance(new WalletBalanceMap(observer));
-      setUsedAddresses([]);
-      setUnusedAddresses([]);
-      setActiveWallet(undefined);
-      setNetwork(undefined);
-      setUtxos(undefined);
-      setCollateral(undefined);
+      disconnect();
       return;
     }
 
-    prevActiveWallet.current = newWallet;
+    const freshData = await observer.sync();
+
     setActiveWallet((prevWallet) =>
       newWallet === prevWallet ? prevWallet : newWallet
     );
 
-    const freshData = await observer.sync();
-
     const newAdaBalance = freshData.balanceMap.get(WalletObserver.ADA_ASSET_ID);
     if (newAdaBalance) {
       setAdaBalance((prevBalance) =>
@@ -118,7 +142,7 @@ export const useWalletObserverState = (observer: WalletObserver) => {
 
     setReady(true);
     setIsCip45(newWallet.includes("p2p"));
-  }, [observer]);
+  }, [observer, disconnect]);
 
   return {
     activeWallet,
@@ -142,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;