@sundaeswap/wallet-lite 0.0.34 → 0.0.35

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

@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+} from "react";
 
 import { IHandle } from "@koralabs/adahandle-sdk";
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
@@ -12,10 +18,11 @@ export const useWalletHandles = <
   AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
 >() => {
   const state = useWalletObserver<THandleMetadata<AssetMetadata>>();
-  const [loadingHandles, setLoadingHandles] = useState(true);
+  const [isPending, startTransition] = useTransition();
   const [handles, setHandles] = useState<
     TAssetAmountMap<THandleMetadata<AssetMetadata>>
   >(new WalletAssetMap());
+
   const memoizedHandleDep = useMemo(
     () => [...state.balance.getHandles().keys()],
     [state.balance]
@@ -24,101 +31,100 @@ export const useWalletHandles = <
   const syncHandles = useCallback<
     () => Promise<TAssetAmountMap<THandleMetadata<AssetMetadata>>>
   >(async () => {
-    // Make a copy of our wallet map.
     const walletHandles: TAssetAmountMap<THandleMetadata<AssetMetadata>> =
-      new WalletAssetMap([...state.balance.getHandles()]);
+      new WalletAssetMap<THandleMetadata<AssetMetadata>>([
+        ...state.balance.getHandles(),
+      ]);
 
     if (walletHandles.size === 0) {
       return walletHandles;
     }
 
     try {
-      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)
-            );
-          });
-        }
-      );
+      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.log(e);
+      console.error(e);
       return walletHandles;
     }
-    // We only want to update the callback if the Handle keys change.
-  }, [state.balance]);
+  }, [state.balance, state.network]);
 
   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;
+    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;
-        }
+          if (!handleMetadataChanged) {
+            return prevHandles;
+          }
 
-        return newHandles;
+          return newHandles;
+        });
       });
-      setLoadingHandles(() => false);
-    });
-  }, [memoizedHandleDep, syncHandles, setHandles, setLoadingHandles]);
+    };
+
+    fetchHandles();
+  }, [memoizedHandleDep, syncHandles]);
 
   return {
     handles,
-    loadingHandles,
+    loadingHandles: isPending,
   };
 };

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

@@ -67,7 +67,7 @@ export const useWalletLoadingState = <
         setSyncingEnd
       );
     };
-  }, []);
+  }, [state.observer]);
 
   return {
     connectingWallet: connecting,

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

@@ -32,6 +32,8 @@ export const useWalletObserver = <
     disconnect: state.disconnect,
     connectWallet: state.connectWallet,
     switching: state.switching,
+    isPending: state.isPending,
+    handles: state.handles,
   };
 
   return result;

package/src/react-components/hooks/useWalletPeerConnect.tsx

@@ -1,5 +1,11 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
-import { MutableRefObject, useEffect, useRef, useState } from "react";
+import {
+  MutableRefObject,
+  useEffect,
+  useRef,
+  useState,
+  useTransition,
+} from "react";
 
 import { TGetPeerConnectInstance } from "../../@types/observer.js";
 import { useWalletObserver } from "./useWalletObserver.js";
@@ -8,6 +14,7 @@ export const useWalletPeerConnect = <
   AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
 >() => {
   const state = useWalletObserver<AssetMetadata>();
+  const [isPending, startTransition] = useTransition();
   const [peerConnect, setPeerConnect] =
     useState<ReturnType<TGetPeerConnectInstance>>();
   const [error, setError] = useState<string>();
@@ -18,10 +25,15 @@ export const useWalletPeerConnect = <
       return;
     }
 
-    state.observer
-      .getCip45Instance()
-      .then((res) => setPeerConnect(res))
-      .catch((e) => setError((e as Error).message));
+    state.observer.getCip45Instance().then((res) => {
+      startTransition(() => {
+        try {
+          setPeerConnect(res);
+        } catch (e) {
+          setError((e as Error).message);
+        }
+      });
+    });
   }, [state.observer, setPeerConnect, setError]);
 
   useEffect(() => {
@@ -34,5 +46,6 @@ export const useWalletPeerConnect = <
     peerConnect,
     QRCodeElement: <div ref={qrCode as MutableRefObject<HTMLDivElement>} />,
     error,
+    isLoading: isPending,
   };
 };

package/src/utils/getLibs.ts

@@ -1,19 +1,20 @@
 export const getCardanoCore = async () => {
-  const { Serialization, Cardano } = await import("@cardano-sdk/core");
-  return {
-    Serialization,
-    Cardano,
-  };
+  return import("@cardano-sdk/core").then((module) => {
+    return {
+      Serialization: module.Serialization,
+      Cardano: module.Cardano,
+    };
+  });
 };
 
 export const getCardanoUtil = async () => {
-  const { typedHex } = await import("@cardano-sdk/util");
-  return { typedHex };
+  return import("@cardano-sdk/util").then((module) => {
+    return module.typedHex;
+  });
 };
 
 export const getPeerConnect = async () => {
-  const { DAppPeerConnect } = await import(
-    "@fabianbormann/cardano-peer-connect"
-  );
-  return { DAppPeerConnect };
+  return import("@fabianbormann/cardano-peer-connect").then((module) => {
+    return module.default.DAppPeerConnect;
+  });
 };