@sundaeswap/wallet-lite 0.0.33 → 0.0.35

package/dist/types/utils/getLibs.d.ts

@@ -2,10 +2,6 @@ export declare const getCardanoCore: () => Promise<{
     Serialization: typeof import("@cardano-sdk/core/dist/cjs/Serialization");
     Cardano: typeof import("@cardano-sdk/core/dist/cjs/Cardano");
 }>;
-export declare const getCardanoUtil: () => Promise<{
-    typedHex: <T>(value: string, length?: number | undefined) => T;
-}>;
-export declare const getPeerConnect: () => Promise<{
-    DAppPeerConnect: typeof import("@fabianbormann/cardano-peer-connect").DAppPeerConnect;
-}>;
+export declare const getCardanoUtil: () => Promise<(<T>(value: string, length?: number | undefined) => T)>;
+export declare const getPeerConnect: () => Promise<typeof import("@fabianbormann/cardano-peer-connect").DAppPeerConnect>;
 //# sourceMappingURL=getLibs.d.ts.map

package/dist/types/utils/getLibs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getLibs.d.ts","sourceRoot":"","sources":["../../../src/utils/getLibs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;EAM1B,CAAC;AAEF,eAAO,MAAM,cAAc;;EAG1B,CAAC;AAEF,eAAO,MAAM,cAAc;;EAK1B,CAAC"}
+{"version":3,"file":"getLibs.d.ts","sourceRoot":"","sources":["../../../src/utils/getLibs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;EAO1B,CAAC;AAEF,eAAO,MAAM,cAAc,uEAI1B,CAAC;AAEF,eAAO,MAAM,cAAc,qFAI1B,CAAC"}

package/package.json

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

package/src/classes/WalletObserver.class.ts

@@ -111,18 +111,6 @@ export class WalletObserver<
     if (!this._options.persistence) {
       return;
     }
-
-    const savedWallet = window.localStorage.getItem(
-      WalletObserver.PERSISTENCE_CACHE_KEY
-    );
-
-    if (!savedWallet) {
-      return;
-    }
-
-    // Init connection
-    const seed: IWalletObserverSeed = JSON.parse(savedWallet);
-    this.connectWallet(seed.activeWallet);
   }
 
   /**
@@ -135,9 +123,9 @@ export class WalletObserver<
    * In the event that a promise will not resolve due to external issues,
    * after 7 seconds, a timeout function will fire that resets the API and tries again.
    *
-   * @returns {Promise<IWalletObserverSync>} - A promise that resolves to the wallet sync data.
+   * @returns {Promise<IWalletObserverSync<AssetMetadata>>} - A promise that resolves to the wallet sync data.
    */
-  sync = async (): Promise<IWalletObserverSync> => {
+  sync = async (): Promise<IWalletObserverSync<AssetMetadata>> => {
     if (!this.api) {
       throw new Error(
         "Attempted to perform a sync operation without a connected wallet."
@@ -187,13 +175,13 @@ export class WalletObserver<
         network: newNetwork,
       };
 
-      this.dispatch(EWalletObserverEvents.SYNCING_WALLET_END, result);
-      this._performingSync = false;
-
       const end = performance.now();
       if (this._options.debug) {
         console.log(`sync: ${end - start}ms`);
       }
+
+      this.dispatch(EWalletObserverEvents.SYNCING_WALLET_END, result);
+      this._performingSync = false;
       return result;
     } catch (e) {
       this._performingSync = false;
@@ -350,7 +338,7 @@ export class WalletObserver<
   getCip45Instance = async () => {
     const start = performance.now();
     if (!this.peerConnectInstance) {
-      const { DAppPeerConnect } = await getPeerConnect();
+      const DAppPeerConnect = await getPeerConnect();
       this.peerConnectInstance = new DAppPeerConnect(
         this._options.peerConnectArgs
       );
@@ -410,7 +398,7 @@ export class WalletObserver<
     const start = performance.now();
 
     this.dispatch(EWalletObserverEvents.GET_BALANCE_MAP_START);
-    const [cbor, { Serialization }, { typedHex }] = await Promise.all([
+    const [cbor, { Serialization }, typedHex] = await Promise.all([
       this.api.getBalance(),
       getCardanoCore(),
       getCardanoUtil(),
@@ -487,7 +475,7 @@ export class WalletObserver<
 
     const start = performance.now();
 
-    const [cbor, { Cardano }, { typedHex }] = await Promise.all([
+    const [cbor, { Cardano }, typedHex] = await Promise.all([
       this.api.getUsedAddresses(),
       getCardanoCore(),
       getCardanoUtil(),
@@ -518,7 +506,7 @@ export class WalletObserver<
 
     const start = performance.now();
 
-    const [cbor, { Cardano }, { typedHex }] = await Promise.all([
+    const [cbor, { Cardano }, typedHex] = await Promise.all([
       this.api.getUnusedAddresses(),
       getCardanoCore(),
       getCardanoUtil(),
@@ -547,7 +535,7 @@ export class WalletObserver<
 
     const start = performance.now();
 
-    const [cbor, { Serialization }, { typedHex }] = await Promise.all([
+    const [cbor, { Serialization }, typedHex] = await Promise.all([
       this.api.getUtxos(),
       getCardanoCore(),
       getCardanoUtil(),
@@ -583,7 +571,7 @@ export class WalletObserver<
 
     const start = performance.now();
 
-    const [cbor, { Serialization }, { typedHex }] = await Promise.all([
+    const [cbor, { Serialization }, typedHex] = await Promise.all([
       (async () => {
         const funcCall =
           this.api?.getCollateral ||

package/src/react-components/RenderWallet.tsx

@@ -1,6 +1,7 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { FC, ReactNode } from "react";
+import { FC, ReactElement, ReactNode, Suspense } from "react";
 
+import { ErrorBoundary } from "react-error-boundary";
 import { useWalletObserver } from "./hooks/useWalletObserver.js";
 
 export type TRenderWalletFunctionState<
@@ -13,6 +14,8 @@ export type TRenderWalletFunction = (
 
 export interface IRenderWalletProps {
   render: TRenderWalletFunction;
+  loader?: ReactNode;
+  fallback?: ReactElement;
 }
 
 /**
@@ -21,8 +24,23 @@ export interface IRenderWalletProps {
  * compose on this and include state for Handles, PeerConnect (CIP-45),
  * and syncing state (RenderWalletState).
  */
-export const RenderWallet: FC<IRenderWalletProps> = ({ render }) => {
+export const RenderWallet: FC<IRenderWalletProps> = ({
+  render,
+  loader,
+  fallback,
+}) => {
   const state = useWalletObserver();
 
-  return <>{render(state)}</>;
+  return (
+    <ErrorBoundary
+      fallback={fallback || <p>Error.</p>}
+      onError={(error) => {
+        if (state.observer.getOptions().debug) {
+          console.log(error.message, error.stack);
+        }
+      }}
+    >
+      <Suspense fallback={loader}>{render(state)}</Suspense>
+    </ErrorBoundary>
+  );
 };

package/src/react-components/RenderWalletHandles.tsx

@@ -1,6 +1,7 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { FC, ReactNode } from "react";
+import { FC, ReactElement, ReactNode, Suspense } from "react";
 
+import { ErrorBoundary } from "react-error-boundary";
 import { useWalletHandles } from "./hooks/useWalletHandles.js";
 import { useWalletObserver } from "./hooks/useWalletObserver.js";
 
@@ -15,6 +16,8 @@ export type TRenderWalletHandlesFunction = (
 
 export interface IRenderWalletHandlesProps {
   render: TRenderWalletHandlesFunction;
+  loader?: ReactNode;
+  fallback?: ReactElement;
 }
 
 /**
@@ -24,9 +27,24 @@ export interface IRenderWalletHandlesProps {
  */
 export const RenderWalletHandles: FC<IRenderWalletHandlesProps> = ({
   render,
+  loader,
+  fallback,
 }) => {
   const state = useWalletObserver();
   const handleData = useWalletHandles();
 
-  return <>{render({ ...state, ...handleData })}</>;
+  return (
+    <ErrorBoundary
+      fallback={fallback || <p>Error.</p>}
+      onError={(error) => {
+        if (state.observer.getOptions().debug) {
+          console.log(error.message, error.stack);
+        }
+      }}
+    >
+      <Suspense fallback={loader}>
+        {render({ ...state, ...handleData })}
+      </Suspense>
+    </ErrorBoundary>
+  );
 };

package/src/react-components/RenderWalletPeerConnect.tsx

@@ -1,5 +1,5 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { FC, ReactNode } from "react";
+import { FC, ReactElement, ReactNode, Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 import { useWalletObserver } from "./hooks/useWalletObserver.js";
@@ -16,6 +16,8 @@ export type TRenderWalletPeerConnectFunction = (
 
 export interface IRenderWalletPeerConnectProps {
   render: TRenderWalletPeerConnectFunction;
+  loader?: ReactNode;
+  fallback?: ReactElement;
 }
 
 /**
@@ -25,6 +27,8 @@ export interface IRenderWalletPeerConnectProps {
  */
 export const RenderWalletPeerConnect: FC<IRenderWalletPeerConnectProps> = ({
   render,
+  loader,
+  fallback,
 }) => {
   const state = useWalletObserver();
   const peerConnectState = useWalletPeerConnect();
@@ -34,8 +38,17 @@ export const RenderWalletPeerConnect: FC<IRenderWalletPeerConnectProps> = ({
   }
 
   return (
-    <ErrorBoundary fallback={<p>{peerConnectState.error}</p>}>
-      {render({ ...state, ...peerConnectState })}
+    <ErrorBoundary
+      fallback={fallback || <p>{peerConnectState.error}</p>}
+      onError={(error) => {
+        if (state.observer.getOptions().debug) {
+          console.log(error.message, error.stack);
+        }
+      }}
+    >
+      <Suspense fallback={loader}>
+        {render({ ...state, ...peerConnectState })}
+      </Suspense>
     </ErrorBoundary>
   );
 };

package/src/react-components/RenderWalletState.tsx

@@ -1,6 +1,7 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { FC, ReactNode } from "react";
+import { FC, ReactElement, ReactNode, Suspense } from "react";
 
+import { ErrorBoundary } from "react-error-boundary";
 import { useWalletLoadingState } from "./hooks/useWalletLoadingState.js";
 import { useWalletObserver } from "./hooks/useWalletObserver.js";
 
@@ -15,6 +16,8 @@ export type TRenderWalletStateFunction = (
 
 export interface IRenderWalletStateProps {
   render: TRenderWalletStateFunction;
+  loader?: ReactNode;
+  fallback?: ReactElement;
 }
 
 /**
@@ -23,16 +26,29 @@ export interface IRenderWalletStateProps {
  * a sync or connection operation. Useful for displaying
  * internal operation states of the wallet.
  */
-export const RenderWalletState: FC<IRenderWalletStateProps> = ({ render }) => {
+export const RenderWalletState: FC<IRenderWalletStateProps> = ({
+  render,
+  loader,
+  fallback = null,
+}) => {
   const state = useWalletObserver();
   const loadingState = useWalletLoadingState();
 
   return (
-    <>
-      {render({
-        ...state,
-        ...loadingState,
-      })}
-    </>
+    <ErrorBoundary
+      fallback={fallback}
+      onError={(error) => {
+        if (state.observer.getOptions().debug) {
+          console.log(error.message, error.stack);
+        }
+      }}
+    >
+      <Suspense fallback={loader}>
+        {render({
+          ...state,
+          ...loadingState,
+        })}
+      </Suspense>
+    </ErrorBoundary>
   );
 };

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

@@ -1,5 +1,7 @@
-import { FC, PropsWithChildren, useMemo } from "react";
+import { FC, PropsWithChildren, useEffect, useMemo } from "react";
 
+import { TSupportedWalletExtensions } from "../../@types/observer.js";
+import { WalletObserver } from "../../classes/WalletObserver.class.js";
 import {
   IWalletObserverProviderProps,
   IWalletObserverState,
@@ -49,6 +51,17 @@ const WalletObserverProvider: FC<
     [options, state, derivedState]
   );
 
+  useEffect(() => {
+    const wallet: TSupportedWalletExtensions | null =
+      window.localStorage.getItem(
+        WalletObserver.PERSISTENCE_CACHE_KEY
+      ) as TSupportedWalletExtensions;
+
+    if (wallet) {
+      state.connectWallet(JSON.parse(wallet).activeWallet);
+    }
+  }, []);
+
   return (
     <WalletObserverContext.Provider value={contextValue}>
       {children}

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, useState } from "react";
+import { AssetAmount, IAssetAmountMetadata } from "@sundaeswap/asset";
+import { useCallback, useState, useTransition } from "react";
 
 import {
   TAssetAmountMap,
@@ -18,17 +18,21 @@ import { THandleMetadata } from "../../contexts/observer/index.js";
  *
  * @param {WalletObserver} observer
  */
-export const useWalletObserverState = (observer: WalletObserver) => {
+export const useWalletObserverState = <
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
+>(
+  observer: WalletObserver<AssetMetadata>
+) => {
   const [activeWallet, setActiveWallet] =
     useState<TSupportedWalletExtensions>();
   const [adaBalance, setAdaBalance] = useState<AssetAmount>(
-    new AssetAmount(0n)
+    new AssetAmount<AssetMetadata>(0n)
   );
   const [handleMetadata, setHandleMetadata] = useState<
-    TAssetAmountMap<THandleMetadata>
-  >(new WalletAssetMap());
-  const [balance, setBalance] = useState<WalletBalanceMap>(
-    new WalletBalanceMap(observer)
+    TAssetAmountMap<THandleMetadata<AssetMetadata>>
+  >(new WalletAssetMap<THandleMetadata<AssetMetadata>>());
+  const [balance, setBalance] = useState<WalletBalanceMap<AssetMetadata>>(
+    new WalletBalanceMap<AssetMetadata>(observer)
   );
   const [network, setNetwork] = useState<number | undefined>();
   const [usedAddresses, setUsedAddresses] = useState<string[]>([]);
@@ -37,6 +41,7 @@ export const useWalletObserverState = (observer: WalletObserver) => {
   const [collateral, setCollateral] = useState<TransactionUnspentOutput[]>();
   const [isCip45, setIsCip45] = useState(false);
   const [switching, setSwitching] = useState(false);
+  const [isPending, startTransition] = useTransition();
 
   const disconnect = useCallback(() => {
     // Reset observer state.
@@ -68,72 +73,77 @@ export const useWalletObserverState = (observer: WalletObserver) => {
 
     const freshData = await observer.sync();
 
-    setActiveWallet((prevWallet) =>
-      newWallet === prevWallet ? prevWallet : newWallet
-    );
+    startTransition(() => {
+      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
+        );
+      }
 
-    const newAdaBalance = freshData.balanceMap.get(WalletObserver.ADA_ASSET_ID);
-    if (newAdaBalance) {
-      setAdaBalance((prevBalance) =>
-        prevBalance.amount === newAdaBalance.amount
+      setBalance((prevBalance) =>
+        areAssetMapsEqual(prevBalance, freshData.balanceMap)
           ? prevBalance
-          : newAdaBalance
+          : freshData.balanceMap
       );
-    }
 
-    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;
-      }
+      setUsedAddresses((prevValue) =>
+        JSON.stringify(prevValue) === JSON.stringify(freshData.usedAddresses)
+          ? prevValue
+          : freshData.usedAddresses
+      );
 
-      return prevValue;
-    });
+      setUnusedAddresses((prevValue) =>
+        JSON.stringify(prevValue) === JSON.stringify(freshData.unusedAddresses)
+          ? prevValue
+          : freshData.unusedAddresses
+      );
 
-    setCollateral((prevValue) => {
-      const prevValueRep = prevValue?.map((v) => v.toCbor());
-      const newValueRep = freshData.utxos?.map((v) => v.toCbor());
-      if (prevValueRep !== newValueRep) {
-        return freshData.utxos;
-      }
+      setNetwork((prevValue) =>
+        prevValue === freshData.network ? prevValue : freshData.network
+      );
 
-      return prevValue;
-    });
+      setUtxos((prevValue) => {
+        const prevValueRep = prevValue?.map((v) => v.toCbor());
+        const newValueRep = freshData.utxos?.map((v) => v.toCbor());
+        if (prevValueRep !== newValueRep) {
+          return freshData.utxos;
+        }
 
-    setIsCip45(newWallet.includes("p2p"));
+        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;
+        }
+
+        return prevValue;
+      });
+
+      setIsCip45(newWallet.includes("p2p"));
+    });
   }, [observer, disconnect]);
 
   const connectWallet = useCallback(
     async (wallet: TSupportedWalletExtensions) => {
       if (observer.hasActiveConnection() && wallet !== observer.activeWallet) {
-        setSwitching(true);
+        setSwitching(() => true);
       }
 
-      await observer.connectWallet(wallet).then(syncWallet);
-      setSwitching(false);
+      await observer.connectWallet(wallet);
+      await syncWallet();
+      setSwitching(() => false);
     },
     [observer, setSwitching]
   );
@@ -164,5 +174,6 @@ export const useWalletObserverState = (observer: WalletObserver) => {
     connectWallet,
     switching,
     setSwitching,
+    isPending,
   };
 };

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

@@ -1,14 +1,11 @@
-import type { TransactionUnspentOutput } from "@cardano-sdk/core/dist/cjs/Serialization/index.js";
 import type { IHandle } from "@koralabs/adahandle-sdk";
-import type { AssetAmount, IAssetAmountMetadata } from "@sundaeswap/asset";
-import type { Dispatch, MutableRefObject, SetStateAction } from "react";
+import type { IAssetAmountMetadata } from "@sundaeswap/asset";
+import type { MutableRefObject } from "react";
 
-import type {
-  TSupportedWalletExtensions,
-  TWalletObserverOptions,
-} from "../../../@types/observer.js";
-import { WalletBalanceMap } from "../../../classes/WalletBalanceMap.class.js";
+import type { TWalletObserverOptions } from "../../../@types/observer.js";
 import type { WalletObserver } from "../../../classes/WalletObserver.class.js";
+import { useDerivedState } from "../../WalletObserverProvider/hooks/effects/useDerivedState.js";
+import { useWalletObserverState } from "../../WalletObserverProvider/hooks/useWalletObserverState.js";
 
 /**
  * Available hooks to apply at various events.
@@ -48,36 +45,11 @@ export interface IWalletObserverState<
 > {
   observerRef: MutableRefObject<WalletObserver<AssetMetadata>>;
   refreshInterval: number | false;
-  state: {
-    isCip45: boolean;
-    setIsCip45: Dispatch<SetStateAction<boolean>>;
-    activeWallet?: TSupportedWalletExtensions;
-    setActiveWallet: Dispatch<
-      SetStateAction<TSupportedWalletExtensions | undefined>
-    >;
-    adaBalance: AssetAmount<AssetMetadata>;
-    balance: WalletBalanceMap<AssetMetadata>;
-    utxos?: TransactionUnspentOutput[];
-    setUtxos: Dispatch<SetStateAction<TransactionUnspentOutput[] | undefined>>;
-    collateral?: TransactionUnspentOutput[];
-    setCollateral: Dispatch<
-      SetStateAction<TransactionUnspentOutput[] | undefined>
-    >;
-    setBalance: Dispatch<SetStateAction<WalletBalanceMap<AssetMetadata>>>;
-    observer: WalletObserver;
-    mainAddress?: string;
-    stakeAddress?: string;
-    network?: number;
-    setNetwork: Dispatch<SetStateAction<number | undefined>>;
-    unusedAddresses: string[];
-    setUnusedAddresses: Dispatch<SetStateAction<string[]>>;
-    usedAddresses: string[];
-    setUsedAddresses: Dispatch<SetStateAction<string[]>>;
-    switching: boolean;
-    syncWallet: () => Promise<void>;
-    disconnect: () => void;
-    connectWallet: (wallet: TSupportedWalletExtensions) => Promise<void>;
-  };
+  state: ReturnType<typeof useWalletObserverState<AssetMetadata>> &
+    ReturnType<typeof useDerivedState> & {
+      isPending: boolean;
+      observer: WalletObserver<AssetMetadata>;
+    };
 }
 
 /**
@@ -97,6 +69,9 @@ export type TUseWalletObserverState<
 > = Omit<
   IWalletObserverState<AssetMetadata>["state"],
   | "setActiveWallet"
+  | "setAdaBalance"
+  | "setHandles"
+  | "setSwitching"
   | "setBalance"
   | "setNetwork"
   | "setUnusedAddresses"