@sundaeswap/wallet-lite 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sundaeswap/wallet-lite",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -35,17 +35,16 @@
     "version": "standard-version"
   },
   "dependencies": {
-    "@babel/cli": "^7.24.7",
     "@blockfrost/blockfrost-js": "^6.0.0",
     "@fabianbormann/cardano-peer-connect": "^1.2.17",
     "@koralabs/adahandle-sdk": "^1.5.5",
+    "lodash": "^4.17.21",
     "rxjs": "^7.8.1"
   },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "@tanstack/react-query": "^5.51.11",
-    "lodash": "^4.17.21",
     "@cardano-sdk/core": "0.45.0",
     "@cardano-sdk/dapp-connector": "^0.13.3",
     "@cardano-sdk/util": "^0.15.5",
@@ -60,6 +59,7 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@happy-dom/global-registrator": "^16.5.3",
+    "@babel/cli": "^7.24.7",
     "@sundaeswap/babel-preset": "^2.0.15",
     "@tanstack/react-query": "^5.51.11",
     "@testing-library/dom": "^10.1.0",

package/src/classes/ReadOnlyProvider.Blockfrost.class.ts

@@ -14,37 +14,51 @@ export class ReadOnlyBlockfrostProvider implements ReadOnlyProvider {
   }
 
   async getBalance(address: string, network: 0 | 1) {
-    const result: Responses["address_content"] = await fetch(
+    const response = await fetch(
       `https://cardano-${network ? "mainnet" : "preview"}.blockfrost.io/api/v0/addresses/${address}`,
       {
         headers: {
           project_id: this.blockfrostProjectId,
         },
       },
-    ).then((res) => res.json());
+    );
+
+    const result = await response.json();
+
+    if (!response.ok || "error" in result) {
+      throw new Error(
+        `Blockfrost getBalance failed: ${result.message || result.error || response.statusText}`,
+      );
+    }
 
     // Build our value.
-    const value = this.__getValueFromAmount(result.amount);
+    const value = this.__getValueFromAmount(
+      (result as Responses["address_content"]).amount,
+    );
 
     // Return the cbor.
     return value.toCbor();
   }
 
   async getUtxos(address: string, network: 0 | 1) {
-    const result: Responses["address_utxo_content"] = await fetch(
+    const response = await fetch(
       `https://cardano-${network ? "mainnet" : "preview"}.blockfrost.io/api/v0/addresses/${address}/utxos`,
       {
         headers: {
           project_id: this.blockfrostProjectId,
         },
       },
-    ).then((res) => res.json());
+    );
+
+    const result = await response.json();
 
-    if ("error" in result) {
-      return [];
+    if (!response.ok || "error" in result) {
+      throw new Error(
+        `Blockfrost getUtxos failed: ${result.message || result.error || response.statusText}`,
+      );
     }
 
-    const formatted = result.map((r) => {
+    const formatted = (result as Responses["address_utxo_content"]).map((r) => {
       return Serialization.TransactionUnspentOutput.fromCore([
         Serialization.TransactionInput.fromCore({
           index: r.output_index,

package/src/classes/WalletObserver.class.ts

@@ -53,10 +53,20 @@ export class WalletObserver<
   public peerConnectInstance?: import("@fabianbormann/cardano-peer-connect").DAppPeerConnect;
 
   private _performingSync: boolean = false;
+  private _syncQueue: Promise<IWalletObserverSync<AssetMetadata> | void> =
+    Promise.resolve();
   private _options: IResolvedWalletObserverOptions<AssetMetadata>;
 
   // Caching
   private _cachedMetadata: Map<string, AssetMetadata> = new Map();
+  private _lastBalanceCbor: string | null = null;
+  private _lastBalanceMap: WalletBalanceMap<AssetMetadata> | null = null;
+  private _lastUsedAddressesCbor: string[] | null = null;
+  private _lastUsedAddresses: string[] | null = null;
+  private _lastUnusedAddressesCbor: string[] | null = null;
+  private _lastUnusedAddresses: string[] | null = null;
+  private _lastChangeAddressCbor: string | null = null;
+  private _lastChangeAddress: string | null = null;
 
   // AbortController for cancelling in-flight metadata fetches when metadataResolver changes
   private _metadataAbortController: AbortController | null = null;
@@ -120,7 +130,15 @@ export class WalletObserver<
    *
    * @returns {Promise<IWalletObserverSync<AssetMetadata>>} - A promise that resolves to the wallet sync data.
    */
-  sync = async (): Promise<IWalletObserverSync<AssetMetadata>> => {
+  sync = (): Promise<IWalletObserverSync<AssetMetadata>> => {
+    const pending = this._syncQueue.then(() => this._doSync());
+    // Chain onto queue but swallow rejections in the queue itself
+    // so a failed sync doesn't block subsequent syncs.
+    this._syncQueue = pending.catch(() => {});
+    return pending;
+  };
+
+  private _doSync = async (): Promise<IWalletObserverSync<AssetMetadata>> => {
     if (!this.api) {
       throw new Error(
         "Attempted to perform a sync operation without a connected wallet.",
@@ -320,6 +338,8 @@ export class WalletObserver<
     if (metadataResolverChanged) {
       this._metadataAbortController?.abort();
       this._cachedMetadata = new Map();
+      this._lastBalanceCbor = null;
+      this._lastBalanceMap = null;
 
       // Trigger a new sync if there's an active connection
       if (this.hasActiveConnection() && !this._performingSync) {
@@ -450,6 +470,8 @@ export class WalletObserver<
     this._metadataAbortController?.abort();
     // Clear the cache
     this._cachedMetadata = new Map();
+    this._lastBalanceCbor = null;
+    this._lastBalanceMap = null;
 
     // Trigger a new sync if there's an active connection
     if (this.hasActiveConnection()) {
@@ -462,9 +484,21 @@ export class WalletObserver<
    *
    * @returns {void}
    */
+  private _clearSyncCaches = (): void => {
+    this._lastBalanceCbor = null;
+    this._lastBalanceMap = null;
+    this._lastUsedAddressesCbor = null;
+    this._lastUsedAddresses = null;
+    this._lastUnusedAddressesCbor = null;
+    this._lastUnusedAddresses = null;
+    this._lastChangeAddressCbor = null;
+    this._lastChangeAddress = null;
+  };
+
   disconnect = (): void => {
     this.activeWallet = undefined;
     this.api = undefined;
+    this._clearSyncCaches();
     window.localStorage.removeItem(WalletObserver.PERSISTENCE_CACHE_KEY);
     this.dispatch(EWalletObserverEvents.DISCONNECT);
   };
@@ -495,8 +529,20 @@ export class WalletObserver<
       return e as Error;
     }
 
+    // Return cached if CBOR hasn't changed
+    if (cbor === this._lastChangeAddressCbor && this._lastChangeAddress) {
+      const end = performance.now();
+      if (this._options.debug) {
+        console.log(`getChangeAddress (cached): ${end - start}ms`);
+      }
+      return this._lastChangeAddress;
+    }
+
     const data = Cardano.Address.fromBytes(typedHex(cbor)).toBech32();
 
+    this._lastChangeAddressCbor = cbor;
+    this._lastChangeAddress = data;
+
     const end = performance.now();
     if (this._options.debug) {
       console.log(`getChangeAddress: ${end - start}ms`);
@@ -530,6 +576,19 @@ export class WalletObserver<
     } catch (e) {
       return e as Error;
     }
+
+    // Return cached map if CBOR hasn't changed
+    if (cbor === this._lastBalanceCbor && this._lastBalanceMap) {
+      this.dispatch(EWalletObserverEvents.GET_BALANCE_MAP_END, {
+        balanceMap: this._lastBalanceMap,
+      });
+      const end = performance.now();
+      if (this._options.debug) {
+        console.log(`getBalanceMap (cached): ${end - start}ms`);
+      }
+      return this._lastBalanceMap;
+    }
+
     const data = Serialization.Value.fromCbor(typedHex(cbor));
     const multiassetKeys = data.multiasset()?.keys() ?? [];
 
@@ -554,6 +613,9 @@ export class WalletObserver<
       }
     }
 
+    this._lastBalanceCbor = cbor;
+    this._lastBalanceMap = balanceMap;
+
     this.dispatch(EWalletObserverEvents.GET_BALANCE_MAP_END, {
       balanceMap,
     });
@@ -619,10 +681,27 @@ export class WalletObserver<
       return e as Error;
     }
 
+    // Return cached if CBOR hasn't changed
+    if (
+      this._lastUsedAddressesCbor &&
+      this._lastUsedAddresses &&
+      cbor.length === this._lastUsedAddressesCbor.length &&
+      cbor.every((v, i) => v === this._lastUsedAddressesCbor![i])
+    ) {
+      const end = performance.now();
+      if (this._options.debug) {
+        console.log(`getUsedAddresses (cached): ${end - start}ms`);
+      }
+      return this._lastUsedAddresses;
+    }
+
     const data = cbor.map((val) =>
       Cardano.Address.fromBytes(typedHex(val)).toBech32(),
     );
 
+    this._lastUsedAddressesCbor = cbor;
+    this._lastUsedAddresses = data;
+
     const end = performance.now();
     if (this._options.debug) {
       console.log(`getUsedAddresses: ${end - start}ms`);
@@ -656,10 +735,27 @@ export class WalletObserver<
       return e as Error;
     }
 
+    // Return cached if CBOR hasn't changed
+    if (
+      this._lastUnusedAddressesCbor &&
+      this._lastUnusedAddresses &&
+      cbor.length === this._lastUnusedAddressesCbor.length &&
+      cbor.every((v, i) => v === this._lastUnusedAddressesCbor![i])
+    ) {
+      const end = performance.now();
+      if (this._options.debug) {
+        console.log(`getUnusedAddresses (cached): ${end - start}ms`);
+      }
+      return this._lastUnusedAddresses;
+    }
+
     const data = cbor.map((val) =>
       Cardano.Address.fromBytes(typedHex(val)).toBech32(),
     );
 
+    this._lastUnusedAddressesCbor = cbor;
+    this._lastUnusedAddresses = data;
+
     const end = performance.now();
     if (this._options.debug) {
       console.log(`getUnusedAddresses: ${end - start}ms`);

package/src/react-components/RenderWallet.tsx

@@ -1,5 +1,5 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { ReactElement, ReactNode, Suspense } from "react";
+import { memo, ReactElement, ReactNode, Suspense } from "react";
 
 import { ErrorBoundary } from "react-error-boundary";
 import { useWalletObserver } from "./hooks/useWalletObserver.js";
@@ -26,7 +26,7 @@ export interface IRenderWalletProps<
  * compose on this and include state for Handles, PeerConnect (CIP-45),
  * and syncing state (RenderWalletState).
  */
-export const RenderWallet = <
+const RenderWalletInner = <
   T extends IAssetAmountMetadata = IAssetAmountMetadata,
 >({
   render,
@@ -48,3 +48,5 @@ export const RenderWallet = <
     </ErrorBoundary>
   );
 };
+
+export const RenderWallet = memo(RenderWalletInner) as typeof RenderWalletInner;

package/src/react-components/RenderWalletHandles.tsx

@@ -1,5 +1,5 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { ReactElement, ReactNode, Suspense } from "react";
+import { memo, ReactElement, ReactNode, Suspense } from "react";
 
 import { ErrorBoundary } from "react-error-boundary";
 import { useWalletHandles } from "./hooks/useWalletHandles.js";
@@ -27,7 +27,7 @@ export interface IRenderWalletHandlesProps<
  * fetching and updating wallet Handles with their extra
  * metadata.
  */
-export const RenderWalletHandles = <
+const RenderWalletHandlesInner = <
   T extends IAssetAmountMetadata = IAssetAmountMetadata,
 >({
   render,
@@ -52,3 +52,7 @@ export const RenderWalletHandles = <
     </ErrorBoundary>
   );
 };
+
+export const RenderWalletHandles = memo(
+  RenderWalletHandlesInner,
+) as typeof RenderWalletHandlesInner;

package/src/react-components/RenderWalletPeerConnect.tsx

@@ -1,5 +1,5 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { ReactElement, ReactNode, Suspense } from "react";
+import { memo, ReactElement, ReactNode, Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 import { useWalletObserver } from "./hooks/useWalletObserver.js";
@@ -27,7 +27,7 @@ export interface IRenderWalletPeerConnectProps<
  * and exposing them to the render function, including a QR Code
  * element that can be placed in the consuming app.
  */
-export const RenderWalletPeerConnect = <
+const RenderWalletPeerConnectInner = <
   T extends IAssetAmountMetadata = IAssetAmountMetadata,
 >({
   render,
@@ -56,3 +56,7 @@ export const RenderWalletPeerConnect = <
     </ErrorBoundary>
   );
 };
+
+export const RenderWalletPeerConnect = memo(
+  RenderWalletPeerConnectInner,
+) as typeof RenderWalletPeerConnectInner;

package/src/react-components/RenderWalletState.tsx

@@ -1,5 +1,5 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { ReactElement, ReactNode, Suspense } from "react";
+import { memo, ReactElement, ReactNode, Suspense } from "react";
 
 import { ErrorBoundary } from "react-error-boundary";
 import { useWalletLoadingState } from "./hooks/useWalletLoadingState.js";
@@ -8,7 +8,7 @@ import { useWalletObserver } from "./hooks/useWalletObserver.js";
 export type TRenderWalletStateFunctionState<
   T extends IAssetAmountMetadata = IAssetAmountMetadata,
 > = ReturnType<typeof useWalletObserver<T>> &
-  ReturnType<typeof useWalletLoadingState<T>>;
+  ReturnType<typeof useWalletLoadingState>;
 
 export type TRenderWalletStateFunction<
   T extends IAssetAmountMetadata = IAssetAmountMetadata,
@@ -28,7 +28,7 @@ export interface IRenderWalletStateProps<
  * a sync or connection operation. Useful for displaying
  * internal operation states of the wallet.
  */
-export const RenderWalletState = <
+const RenderWalletStateInner = <
   T extends IAssetAmountMetadata = IAssetAmountMetadata,
 >({
   render,
@@ -36,7 +36,7 @@ export const RenderWalletState = <
   fallback,
 }: IRenderWalletStateProps<T>) => {
   const state = useWalletObserver<T>();
-  const loadingState = useWalletLoadingState<T>();
+  const loadingState = useWalletLoadingState();
 
   return (
     <ErrorBoundary
@@ -56,3 +56,7 @@ export const RenderWalletState = <
     </ErrorBoundary>
   );
 };
+
+export const RenderWalletState = memo(
+  RenderWalletStateInner,
+) as typeof RenderWalletStateInner;

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

@@ -4,6 +4,9 @@ import { WalletObserver } from "../../classes/WalletObserver.class.js";
 import {
   IWalletObserverProviderProps,
   IWalletObserverState,
+  WalletActionsContext,
+  WalletConnectionContext,
+  WalletDataContext,
   WalletObserverContext,
 } from "../contexts/observer/index.js";
 import { useDerivedState } from "./hooks/effects/useDerivedState.js";
@@ -42,7 +45,87 @@ const WalletObserverProvider: FC<
     changeAddress: state.changeAddress,
   });
 
-  // Memoize the context value
+  // Focused context: stable callbacks and observer ref.
+  // Only changes when observer instance is recreated.
+  const actionsValue = useMemo(
+    () => ({
+      observer: observerRef.current,
+      observerRef: observerRef,
+      connectWallet: state.connectWallet,
+      disconnect: state.disconnect,
+      syncWallet: state.syncWallet,
+      resyncMetadata: state.resyncMetadata,
+    }),
+    [
+      state.connectWallet,
+      state.disconnect,
+      state.syncWallet,
+      state.resyncMetadata,
+    ],
+  );
+
+  // Focused context: connection and loading state.
+  // Changes on connect/disconnect and sync start/end.
+  const connectionValue = useMemo(
+    () => ({
+      activeWallet: state.activeWallet,
+      ready,
+      connectingWallet,
+      syncingWallet,
+      network: state.network,
+      isCip45: state.isCip45,
+      switching: state.switching,
+      isReadOnlyMode: state.isReadOnlyMode,
+      willAutoConnect: state.willAutoConnect,
+      errorSyncing: state.errorSyncing,
+      mainAddress: derivedState.mainAddress,
+      stakeAddress: derivedState.stakeAddress,
+    }),
+    [
+      state.activeWallet,
+      ready,
+      connectingWallet,
+      syncingWallet,
+      state.network,
+      state.isCip45,
+      state.switching,
+      state.isReadOnlyMode,
+      state.willAutoConnect,
+      state.errorSyncing,
+      derivedState.mainAddress,
+      derivedState.stakeAddress,
+    ],
+  );
+
+  // Focused context: wallet data that changes every sync cycle.
+  const dataValue = useMemo(
+    () => ({
+      balance: state.balance,
+      adaBalance: state.adaBalance,
+      usedAddresses: state.usedAddresses,
+      unusedAddresses: state.unusedAddresses,
+      changeAddress: state.changeAddress,
+      feeAddress: state.feeAddress,
+      utxos: state.utxos,
+      collateral: state.collateral,
+      isPending: state.isPending,
+      refreshInterval: options?.refreshInterval || 30000,
+    }),
+    [
+      state.balance,
+      state.adaBalance,
+      state.usedAddresses,
+      state.unusedAddresses,
+      state.changeAddress,
+      state.feeAddress,
+      state.utxos,
+      state.collateral,
+      state.isPending,
+      options?.refreshInterval,
+    ],
+  );
+
+  // Backward-compatible full context value
   const contextValue: IWalletObserverState = useMemo(
     () => ({
       observerRef: observerRef,
@@ -57,13 +140,12 @@ const WalletObserverProvider: FC<
       },
     }),
     [
-      options,
+      options?.refreshInterval,
       state,
       derivedState,
       connectingWallet,
       syncingWallet,
       ready,
-      observerRef.current,
     ],
   );
 
@@ -83,7 +165,13 @@ const WalletObserverProvider: FC<
 
   return (
     <WalletObserverContext.Provider value={contextValue}>
-      {children}
+      <WalletActionsContext.Provider value={actionsValue}>
+        <WalletConnectionContext.Provider value={connectionValue}>
+          <WalletDataContext.Provider value={dataValue}>
+            {children}
+          </WalletDataContext.Provider>
+        </WalletConnectionContext.Provider>
+      </WalletActionsContext.Provider>
     </WalletObserverContext.Provider>
   );
 };

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

@@ -11,8 +11,11 @@ export const useDerivedState = (
   >,
 ) => {
   const [stakeAddress, setStakeAddress] = useState<string>();
-  const address =
-    state.changeAddress || state.usedAddresses[0] || state.unusedAddresses[0];
+  const address = useMemo(
+    () =>
+      state.changeAddress || state.usedAddresses[0] || state.unusedAddresses[0],
+    [state.changeAddress, state.usedAddresses, state.unusedAddresses],
+  );
 
   useEffect(() => {
     if (!address) {

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

@@ -14,8 +14,8 @@ export const useSyncWalletWithInterval = (
 ) => {
   useQuery({
     queryKey: ["useSyncWalletWithInterval"],
-    queryFn: () => {
-      syncWalletFn();
+    queryFn: async () => {
+      await syncWalletFn();
       return true;
     },
     refetchInterval: refreshInterval,

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

@@ -1,6 +1,12 @@
 import type { TransactionUnspentOutput } from "@cardano-sdk/core/dist/cjs/Serialization/TransactionUnspentOutput.js";
 import { AssetAmount, IAssetAmountMetadata } from "@sundaeswap/asset";
-import { useCallback, useEffect, useState, useTransition } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+} from "react";
 
 import { IWalletObserverSync } from "../../../@types/observer.js";
 import { ReadOnlyApi } from "../../../classes/ReadOnlyApi.class.js";
@@ -77,7 +83,7 @@ export const useWalletObserverState = <
       setSwitching(() => false);
       return observer.api;
     },
-    [observer, setSwitching, setIsReadOnlyMode],
+    [observer],
   );
 
   const resyncMetadata = useCallback(async () => {
@@ -212,39 +218,63 @@ export const useWalletObserverState = <
     };
   }, [syncWallet]);
 
-  return {
-    activeWallet,
-    adaBalance,
-    balance,
-    collateral,
-    connectWallet,
-    disconnect,
-    errorSyncing,
-    feeAddress,
-    isCip45,
-    isPending,
-    isReadOnlyMode,
-    network,
-    changeAddress,
-    resyncMetadata,
-    setActiveWallet,
-    setAdaBalance,
-    setBalance,
-    setCollateral,
-    setFeeAddress,
-    setIsCip45,
-    setIsReadOnlyMode,
-    setNetwork,
-    setSwitching,
-    setUnusedAddresses,
-    setUsedAddresses,
-    setUtxos,
-    setChangeAddress,
-    switching,
-    syncWallet,
-    unusedAddresses,
-    usedAddresses,
-    utxos,
-    willAutoConnect,
-  };
+  return useMemo(
+    () => ({
+      activeWallet,
+      adaBalance,
+      balance,
+      collateral,
+      connectWallet,
+      disconnect,
+      errorSyncing,
+      feeAddress,
+      isCip45,
+      isPending,
+      isReadOnlyMode,
+      network,
+      changeAddress,
+      resyncMetadata,
+      setActiveWallet,
+      setAdaBalance,
+      setBalance,
+      setCollateral,
+      setFeeAddress,
+      setIsCip45,
+      setIsReadOnlyMode,
+      setNetwork,
+      setSwitching,
+      setUnusedAddresses,
+      setUsedAddresses,
+      setUtxos,
+      setChangeAddress,
+      switching,
+      syncWallet,
+      unusedAddresses,
+      usedAddresses,
+      utxos,
+      willAutoConnect,
+    }),
+    [
+      activeWallet,
+      adaBalance,
+      balance,
+      collateral,
+      connectWallet,
+      disconnect,
+      errorSyncing,
+      feeAddress,
+      isCip45,
+      isPending,
+      isReadOnlyMode,
+      network,
+      changeAddress,
+      resyncMetadata,
+      switching,
+      syncWallet,
+      unusedAddresses,
+      usedAddresses,
+      utxos,
+      willAutoConnect,
+    ],
+  );
 };