@sundaeswap/wallet-lite 0.0.47 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sundaeswap/wallet-lite",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -36,19 +36,20 @@
   },
   "dependencies": {
     "@babel/cli": "^7.24.7",
-    "@cardano-sdk/core": "^0.33.0",
-    "@cardano-sdk/dapp-connector": "^0.12.19",
-    "@cardano-sdk/util": "^0.15.1",
     "@fabianbormann/cardano-peer-connect": "^1.2.17",
     "@koralabs/adahandle-sdk": "^1.5.4",
     "@sundaeswap/asset": "^0.7.1",
     "@sundaeswap/fraction": "0.5.9",
-    "lodash": "^4.17.21",
     "rxjs": "^7.8.1"
   },
   "peerDependencies": {
     "react": "^18.3.1",
-    "react-error-boundary": "^4.0.13"
+    "react-error-boundary": "^4.0.13",
+    "@tanstack/react-query": "^5.51.11",
+    "lodash": "^4.17.21",
+    "@cardano-sdk/core": "^0.33.0",
+    "@cardano-sdk/dapp-connector": "^0.12.19",
+    "@cardano-sdk/util": "^0.15.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

package/src/react-components/RenderWallet.tsx

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

package/src/react-components/RenderWalletHandles.tsx

@@ -1,5 +1,5 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { FC, ReactElement, ReactNode, Suspense } from "react";
+import { ReactElement, ReactNode, Suspense } from "react";
 
 import { ErrorBoundary } from "react-error-boundary";
 import { useWalletHandles } from "./hooks/useWalletHandles.js";
@@ -10,12 +10,14 @@ export type TRenderWalletHandlesFunctionState<
 > = ReturnType<typeof useWalletObserver<T>> &
   ReturnType<typeof useWalletHandles<T>>;
 
-export type TRenderWalletHandlesFunction = (
-  state: TRenderWalletHandlesFunctionState,
-) => JSX.Element | ReactNode;
+export type TRenderWalletHandlesFunction<
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
+> = (state: TRenderWalletHandlesFunctionState<T>) => JSX.Element | ReactNode;
 
-export interface IRenderWalletHandlesProps {
-  render: TRenderWalletHandlesFunction;
+export interface IRenderWalletHandlesProps<
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
+> {
+  render: TRenderWalletHandlesFunction<T>;
   loader?: ReactNode;
   fallback?: ReactElement;
 }
@@ -25,17 +27,19 @@ export interface IRenderWalletHandlesProps {
  * fetching and updating wallet Handles with their extra
  * metadata.
  */
-export const RenderWalletHandles: FC<IRenderWalletHandlesProps> = ({
+export const RenderWalletHandles = <
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
+>({
   render,
   loader,
   fallback,
-}) => {
-  const state = useWalletObserver();
-  const handleData = useWalletHandles();
+}: IRenderWalletHandlesProps<T>) => {
+  const state = useWalletObserver<T>();
+  const handleData = useWalletHandles<T>();
 
   return (
     <ErrorBoundary
-      fallback={fallback || <p>Error.</p>}
+      fallback={fallback || null}
       onError={(error) => {
         if (state.observer.getOptions().debug) {
           console.log(error.message, error.stack);

package/src/react-components/RenderWalletPeerConnect.tsx

@@ -1,5 +1,5 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { FC, ReactElement, ReactNode, Suspense } from "react";
+import { ReactElement, ReactNode, Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 
 import { useWalletObserver } from "./hooks/useWalletObserver.js";
@@ -10,12 +10,14 @@ export type TRenderWalletPeerConnectFunctionState<
 > = ReturnType<typeof useWalletObserver<T>> &
   ReturnType<typeof useWalletPeerConnect<T>>;
 
-export type TRenderWalletPeerConnectFunction = (
-  state: TRenderWalletPeerConnectFunctionState,
-) => ReactNode;
+export type TRenderWalletPeerConnectFunction<
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
+> = (state: TRenderWalletPeerConnectFunctionState<T>) => ReactNode;
 
-export interface IRenderWalletPeerConnectProps {
-  render: TRenderWalletPeerConnectFunction;
+export interface IRenderWalletPeerConnectProps<
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
+> {
+  render: TRenderWalletPeerConnectFunction<T>;
   loader?: ReactNode;
   fallback?: ReactElement;
 }
@@ -25,13 +27,15 @@ 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: FC<IRenderWalletPeerConnectProps> = ({
+export const RenderWalletPeerConnect = <
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
+>({
   render,
   loader,
   fallback,
-}) => {
-  const state = useWalletObserver();
-  const peerConnectState = useWalletPeerConnect();
+}: IRenderWalletPeerConnectProps<T>) => {
+  const state = useWalletObserver<T>();
+  const peerConnectState = useWalletPeerConnect<T>();
 
   if (!peerConnectState.peerConnect) {
     return null;

package/src/react-components/RenderWalletState.tsx

@@ -1,5 +1,5 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { FC, ReactElement, ReactNode, Suspense } from "react";
+import { ReactElement, ReactNode, Suspense } from "react";
 
 import { ErrorBoundary } from "react-error-boundary";
 import { useWalletLoadingState } from "./hooks/useWalletLoadingState.js";
@@ -10,12 +10,14 @@ export type TRenderWalletStateFunctionState<
 > = ReturnType<typeof useWalletObserver<T>> &
   ReturnType<typeof useWalletLoadingState<T>>;
 
-export type TRenderWalletStateFunction = (
-  state: TRenderWalletStateFunctionState,
-) => JSX.Element | ReactNode;
+export type TRenderWalletStateFunction<
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
+> = (state: TRenderWalletStateFunctionState<T>) => JSX.Element | ReactNode;
 
-export interface IRenderWalletStateProps {
-  render: TRenderWalletStateFunction;
+export interface IRenderWalletStateProps<
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
+> {
+  render: TRenderWalletStateFunction<T>;
   loader?: ReactNode;
   fallback?: ReactElement;
 }
@@ -26,17 +28,19 @@ export interface IRenderWalletStateProps {
  * a sync or connection operation. Useful for displaying
  * internal operation states of the wallet.
  */
-export const RenderWalletState: FC<IRenderWalletStateProps> = ({
+export const RenderWalletState = <
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
+>({
   render,
   loader,
-  fallback = null,
-}) => {
-  const state = useWalletObserver();
-  const loadingState = useWalletLoadingState();
+  fallback,
+}: IRenderWalletStateProps<T>) => {
+  const state = useWalletObserver<T>();
+  const loadingState = useWalletLoadingState<T>();
 
   return (
     <ErrorBoundary
-      fallback={fallback}
+      fallback={fallback || null}
       onError={(error) => {
         if (state.observer.getOptions().debug) {
           console.log(error.message, error.stack);

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

@@ -2,15 +2,10 @@ import type { TransactionUnspentOutput } from "@cardano-sdk/core/dist/cjs/Serial
 import { AssetAmount, IAssetAmountMetadata } from "@sundaeswap/asset";
 import { useCallback, useEffect, useState, useTransition } from "react";
 
-import {
-  TAssetAmountMap,
-  TSupportedWalletExtensions,
-} from "../../../@types/observer.js";
-import { WalletAssetMap } from "../../../classes/WalletAssetMap.class.js";
+import { TSupportedWalletExtensions } from "../../../@types/observer.js";
 import { WalletBalanceMap } from "../../../classes/WalletBalanceMap.class.js";
 import { WalletObserver } from "../../../classes/WalletObserver.class.js";
 import { areAssetMapsEqual } from "../../../utils/comparisons.js";
-import { THandleMetadata } from "../../contexts/observer/index.js";
 
 /**
  * Internal use only. The main action that sync WalletObserver api responses with
@@ -28,9 +23,6 @@ export const useWalletObserverState = <
   const [adaBalance, setAdaBalance] = useState<AssetAmount<AssetMetadata>>(
     new AssetAmount<AssetMetadata>(0n),
   );
-  const [handleMetadata, setHandleMetadata] = useState<
-    TAssetAmountMap<THandleMetadata<AssetMetadata>>
-  >(new WalletAssetMap<THandleMetadata<AssetMetadata>>());
   const [balance, setBalance] = useState<WalletBalanceMap<AssetMetadata>>(
     new WalletBalanceMap<AssetMetadata>(observer),
   );
@@ -56,7 +48,6 @@ export const useWalletObserverState = <
     // Reset state.
     setAdaBalance(new AssetAmount(0n));
     setBalance(new WalletBalanceMap(observer));
-    setHandleMetadata(new WalletAssetMap());
     setUsedAddresses([]);
     setUnusedAddresses([]);
     setActiveWallet(undefined);
@@ -174,8 +165,6 @@ export const useWalletObserverState = <
     setAdaBalance,
     balance,
     setBalance,
-    handles: handleMetadata,
-    setHandles: setHandleMetadata,
     isCip45,
     setIsCip45,
     network,

package/src/react-components/__tests__/RenderWalletHandles.test.tsx

@@ -3,6 +3,7 @@ import { render } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { describe, expect, it, spyOn } from "bun:test";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { mockHandleMetadata } from "../../__data__/handles.js";
 import {
   RenderWalletHandles,
@@ -53,7 +54,11 @@ describe("RenderWalletHandles", () => {
       <RenderWalletHandles render={TestComponent} />,
       {
         wrapper(props) {
-          return <WalletObserverProvider {...props} />;
+          return (
+            <QueryClientProvider client={new QueryClient()}>
+              <WalletObserverProvider {...props} />
+            </QueryClientProvider>
+          );
         },
       },
     );
@@ -65,10 +70,9 @@ describe("RenderWalletHandles", () => {
 
     const button = getByTestId("connect-with-handles");
     await user.click(button);
-
     expect(spiedOnGetAllDataBatch).toHaveBeenCalled();
-    rerender(<RenderWalletHandles render={TestComponent} />);
 
+    rerender(<RenderWalletHandles render={TestComponent} />);
     expect(queryByTestId("calvin")).not.toBeNull();
     expect(queryByTestId("pi")).not.toBeNull();
     expect(container.innerHTML).toMatchSnapshot();

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

@@ -1,14 +1,8 @@
-import {
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-
 import { IHandle } from "@koralabs/adahandle-sdk";
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMemo } from "react";
+
 import { TAssetAmountMap } from "../../@types/observer.js";
 import { WalletAssetMap } from "../../classes/WalletAssetMap.class.js";
 import { normalizeAssetIdWithDot } from "../../utils/assets.js";
@@ -18,117 +12,107 @@ import { useWalletObserver } from "./useWalletObserver.js";
 export const useWalletHandles = <
   AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 >() => {
+  const queryClient = useQueryClient();
   const state = useWalletObserver<THandleMetadata<AssetMetadata>>();
-  const [handles, setHandles] = useState<
-    TAssetAmountMap<THandleMetadata<AssetMetadata>>
-  >(state.handles);
-  const [isLoading, setIsLoading] = useState(true);
-  const deferredHandles = useDeferredValue(handles);
-
   const memoizedHandleDep = useMemo(
     () => [...state.balance.getHandles().keys()],
     [state.balance],
   );
 
-  const syncHandles = useCallback<
-    () => Promise<TAssetAmountMap<THandleMetadata<AssetMetadata>>>
-  >(async () => {
-    const walletHandles: TAssetAmountMap<THandleMetadata<AssetMetadata>> =
-      new WalletAssetMap<THandleMetadata<AssetMetadata>>([
+  const queryKey = [memoizedHandleDep, state.mainAddress];
+  const { data: handles, isLoading } = useQuery({
+    queryKey,
+    queryFn: async () => {
+      const currentWalletHandles: TAssetAmountMap<
+        THandleMetadata<AssetMetadata>
+      > = new WalletAssetMap<THandleMetadata<AssetMetadata>>([
         ...state.balance.getHandles(),
       ]);
 
-    if (walletHandles.size === 0) {
-      return walletHandles;
-    }
-
-    try {
-      setIsLoading(true);
-      const {
-        default: HandleClient,
-        HandleClientContext,
-        KoraLabsProvider,
-      } = await import("@koralabs/adahandle-sdk");
-
-      const context =
-        state.network === 1
-          ? HandleClientContext.MAINNET
-          : HandleClientContext.PREVIEW;
-
-      const sdk = new HandleClient({
-        context,
-        provider: new KoraLabsProvider(context),
-      });
-
-      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) {
-      console.error(e);
-      return walletHandles;
-    }
-  }, [state.balance, state.network]);
-
-  useEffect(() => {
-    const fetchHandles = async () => {
-      const newHandles = await syncHandles();
-      startTransition(() => {
-        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;
+      const cachedMetadata =
+        queryClient.getQueryData<
+          TAssetAmountMap<THandleMetadata<AssetMetadata>>
+        >(queryKey);
+
+      let updateMetadata = false;
+      if (cachedMetadata) {
+        for (const [, val] of cachedMetadata) {
+          if (!val?.metadata?.rarity) {
+            updateMetadata = true;
+            break;
           }
+        }
+      }
+
+      if (!updateMetadata && cachedMetadata) {
+        return cachedMetadata;
+      }
+
+      try {
+        const {
+          default: HandleClient,
+          HandleClientContext,
+          KoraLabsProvider,
+        } = await import("@koralabs/adahandle-sdk");
+
+        const context =
+          state.network === 1
+            ? HandleClientContext.MAINNET
+            : HandleClientContext.PREVIEW;
+
+        const sdk = new HandleClient({
+          context,
+          provider: new KoraLabsProvider(context),
+        });
 
-          return newHandles;
+        const walletHandlesWithDataArray = [...currentWalletHandles.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;
+
+          currentWalletHandles.set(
+            normalizeAssetIdWithDot(key),
+            asset
+              .withMetadata({
+                ...matchingData,
+                ...asset.metadata,
+                assetId: normalizeAssetIdWithDot(asset.metadata.assetId),
+                decimals: 0,
+              })
+              .withAmount(1n),
+          );
         });
-        setIsLoading(() => false);
-      });
-    };
 
-    fetchHandles();
-  }, [memoizedHandleDep, syncHandles]);
+        return currentWalletHandles;
+      } catch (e) {
+        console.error(e);
+      }
+
+      return currentWalletHandles;
+    },
+    refetchInterval: false,
+    notifyOnChangeProps: ["data", "isLoading"],
+    initialData: new WalletAssetMap<THandleMetadata<AssetMetadata>>([
+      ...state.balance.getHandles(),
+    ]),
+  });
+
+  const memoizedResult = useMemo(
+    () => ({
+      handles,
+      loadingHandles: isLoading,
+    }),
+    [handles, isLoading],
+  );
 
-  return {
-    handles: deferredHandles,
-    loadingHandles: isLoading,
-  };
+  return memoizedResult;
 };

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

@@ -41,7 +41,6 @@ export const useWalletObserver = <
       connectWallet: state.connectWallet,
       switching: state.switching,
       isPending: state.isPending,
-      handles: state.handles,
       willAutoConnect: state.willAutoConnect,
     }),
     [
@@ -62,7 +61,6 @@ export const useWalletObserver = <
       state.connectWallet,
       state.switching,
       state.isPending,
-      state.handles,
       state.willAutoConnect,
     ],
   );