@sundaeswap/wallet-lite 0.0.41 → 0.0.43

package/src/classes/__tests__/WalletObserverEvent.test.ts

@@ -23,7 +23,7 @@ describe("WalletObserverEvent", () => {
 
     instance.addEventListener(
       EWalletObserverEvents.CONNECT_WALLET_END,
-      handler
+      handler,
     );
 
     instance.dispatch(EWalletObserverEvents.CONNECT_WALLET_END);
@@ -43,14 +43,14 @@ describe("WalletObserverEvent", () => {
 
     instance.addEventListener(
       EWalletObserverEvents.CONNECT_WALLET_END,
-      handler
+      handler,
     );
 
     expect(instance.eventList().size).toEqual(1);
 
     instance.addEventListener(
       EWalletObserverEvents.CONNECT_WALLET_END,
-      handler
+      handler,
     );
 
     expect(instance.eventList().size).toEqual(1);
@@ -67,29 +67,29 @@ describe("WalletObserverEvent", () => {
 
     instance.addEventListener(
       EWalletObserverEvents.CONNECT_WALLET_START,
-      handler1
+      handler1,
     );
     instance.addEventListener(
       EWalletObserverEvents.CONNECT_WALLET_END,
-      handler1
+      handler1,
     );
     instance.addEventListener(
       EWalletObserverEvents.CONNECT_WALLET_END,
-      handler2
+      handler2,
     );
 
     expect(instance.eventList().size).toEqual(3);
 
     instance.removeEventListener(
       EWalletObserverEvents.CONNECT_WALLET_START,
-      handler1
+      handler1,
     );
 
     expect(instance.eventList().size).toEqual(2);
 
     instance.removeEventListener(
       EWalletObserverEvents.CONNECT_WALLET_END,
-      handler1
+      handler1,
     );
 
     expect(instance.eventList().size).toEqual(1);

package/src/classes/__tests__/WalletObserverUtils.test.ts

@@ -53,12 +53,12 @@ beforeAll(() => {
           })),
         },
       },
-    })
+    }),
   );
 });
 
 afterAll(() => {
-  mock.module("@cardano-sdk/core", () => coreModuleMock);
+  mock.restore();
 });
 
 describe("WalletObserverUtils", async () => {
@@ -91,7 +91,7 @@ describe("WalletObserverUtils", async () => {
     it("should throw an error if the address is malformed", () => {
       isValidMock.mockImplementation(() => false);
       expect(() => instance.getAddressDetails("invalid")).toThrowError(
-        "Expected a Bech32 encoded address."
+        "Expected a Bech32 encoded address.",
       );
     });
   });
@@ -100,19 +100,19 @@ describe("WalletObserverUtils", async () => {
     it("should call correct dependency functions", () => {
       expect(() => instance.getBech32StakingAddress(testAddress)).not.toThrow();
       expect(instance.getBech32StakingAddress(testAddress)).toEqual(
-        stakeAddress
+        stakeAddress,
       );
 
       isValidMock.mockImplementation(() => false);
       expect(() => instance.getBech32StakingAddress("invalid")).toThrowError(
-        "Expected a Bech32 encoded address."
+        "Expected a Bech32 encoded address.",
       );
       expect(isValidMock).toHaveBeenCalled();
 
       // @ts-expect-error It can be undefined.
       getStakeCredentialMock.mockImplementation(() => undefined);
       expect(() => instance.getBech32StakingAddress("invalid")).toThrowError(
-        "Expected a Bech32 encoded address."
+        "Expected a Bech32 encoded address.",
       );
     });
   });

package/src/react-components/RenderWallet.tsx

@@ -5,12 +5,12 @@ import { ErrorBoundary } from "react-error-boundary";
 import { useWalletObserver } from "./hooks/useWalletObserver.js";
 
 export type TRenderWalletFunctionState<
-  T extends IAssetAmountMetadata = IAssetAmountMetadata
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
 > = ReturnType<typeof useWalletObserver<T>>;
 
-export type TRenderWalletFunction = (
-  state: TRenderWalletFunctionState<any>
-) => JSX.Element | ReactNode;
+export type TRenderWalletFunction<
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
+> = (state: TRenderWalletFunctionState<T>) => JSX.Element | ReactNode;
 
 export interface IRenderWalletProps {
   render: TRenderWalletFunction;

package/src/react-components/RenderWalletHandles.tsx

@@ -6,12 +6,12 @@ import { useWalletHandles } from "./hooks/useWalletHandles.js";
 import { useWalletObserver } from "./hooks/useWalletObserver.js";
 
 export type TRenderWalletHandlesFunctionState<
-  T extends IAssetAmountMetadata = IAssetAmountMetadata
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
 > = ReturnType<typeof useWalletObserver<T>> &
   ReturnType<typeof useWalletHandles<T>>;
 
 export type TRenderWalletHandlesFunction = (
-  state: TRenderWalletHandlesFunctionState
+  state: TRenderWalletHandlesFunctionState,
 ) => JSX.Element | ReactNode;
 
 export interface IRenderWalletHandlesProps {

package/src/react-components/RenderWalletPeerConnect.tsx

@@ -6,12 +6,12 @@ import { useWalletObserver } from "./hooks/useWalletObserver.js";
 import { useWalletPeerConnect } from "./hooks/useWalletPeerConnect.js";
 
 export type TRenderWalletPeerConnectFunctionState<
-  T extends IAssetAmountMetadata = IAssetAmountMetadata
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
 > = ReturnType<typeof useWalletObserver<T>> &
   ReturnType<typeof useWalletPeerConnect<T>>;
 
 export type TRenderWalletPeerConnectFunction = (
-  state: TRenderWalletPeerConnectFunctionState
+  state: TRenderWalletPeerConnectFunctionState,
 ) => ReactNode;
 
 export interface IRenderWalletPeerConnectProps {

package/src/react-components/RenderWalletState.tsx

@@ -6,12 +6,12 @@ import { useWalletLoadingState } from "./hooks/useWalletLoadingState.js";
 import { useWalletObserver } from "./hooks/useWalletObserver.js";
 
 export type TRenderWalletStateFunctionState<
-  T extends IAssetAmountMetadata = IAssetAmountMetadata
+  T extends IAssetAmountMetadata = IAssetAmountMetadata,
 > = ReturnType<typeof useWalletObserver<T>> &
   ReturnType<typeof useWalletLoadingState<T>>;
 
 export type TRenderWalletStateFunction = (
-  state: TRenderWalletStateFunctionState
+  state: TRenderWalletStateFunctionState,
 ) => JSX.Element | ReactNode;
 
 export interface IRenderWalletStateProps {

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

@@ -34,7 +34,7 @@ const WalletObserverProvider: FC<
   useProviderRefreshInterval(
     observerRef.current,
     state.syncWallet,
-    options?.refreshInterval
+    options?.refreshInterval,
   );
 
   const derivedState = useDerivedState(observerRef.current, {
@@ -63,7 +63,7 @@ const WalletObserverProvider: FC<
       syncingWallet,
       ready,
       observerRef.current,
-    ]
+    ],
   );
 
   useEffect(() => {
@@ -73,7 +73,7 @@ const WalletObserverProvider: FC<
 
     const wallet: TSupportedWalletExtensions | null =
       window.localStorage.getItem(
-        WalletObserver.PERSISTENCE_CACHE_KEY
+        WalletObserver.PERSISTENCE_CACHE_KEY,
       ) as TSupportedWalletExtensions;
 
     if (wallet && observerRef.current?.getOptions()?.persistence) {

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

@@ -4,7 +4,7 @@ import { useWalletObserverState } from "../useWalletObserverState.js";
 
 export const useDerivedState = (
   observer: WalletObserver,
-  state: Pick<ReturnType<typeof useWalletObserverState>, "usedAddresses">
+  state: Pick<ReturnType<typeof useWalletObserverState>, "usedAddresses">,
 ) => {
   const [stakeAddress, setStakeAddress] = useState<string>();
 
@@ -23,7 +23,7 @@ export const useDerivedState = (
       stakeAddress,
       mainAddress: state.usedAddresses[0],
     }),
-    [state.usedAddresses[0], stakeAddress]
+    [state.usedAddresses[0], stakeAddress],
   );
 
   return memoizedDerivedState;

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

@@ -14,7 +14,7 @@ import { WalletObserver } from "../../../../classes/WalletObserver.class.js";
 export const useProviderRefreshInterval = (
   observer: WalletObserver,
   syncWallet: () => Promise<void>,
-  refreshInterval?: number
+  refreshInterval?: number,
 ) => {
   useEffect(() => {
     if (!refreshInterval) {

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

@@ -14,7 +14,7 @@ import { TWalletProviderHooks } from "../../contexts/observer/index.js";
  */
 export const useProviderWalletObserverRef = (
   options?: TWalletObserverOptions,
-  hooks?: TWalletProviderHooks
+  hooks?: TWalletProviderHooks,
 ) => {
   // Use ref to store the observer instance, ensuring it's created only once
   const observerRef = useRef<WalletObserver | null>(null);
@@ -33,7 +33,7 @@ export const useProviderWalletObserverRef = (
     return Boolean(
       observerRef.current &&
         observerRef.current.api &&
-        observerRef.current.activeWallet
+        observerRef.current.activeWallet,
     );
   }, [observerRef, observerRef.current.api, observerRef.current.activeWallet]);
 
@@ -67,23 +67,23 @@ export const useProviderWalletObserverRef = (
 
     observerRef.current.addEventListener(
       EWalletObserverEvents.CONNECT_WALLET_START,
-      setConnectingStart
+      setConnectingStart,
     );
     observerRef.current.addEventListener(
       EWalletObserverEvents.CONNECT_WALLET_END,
-      setConnectingEnd
+      setConnectingEnd,
     );
     observerRef.current.addEventListener(
       EWalletObserverEvents.SYNCING_WALLET_START,
-      setSyncingStart
+      setSyncingStart,
     );
     observerRef.current.addEventListener(
       EWalletObserverEvents.SYNCING_WALLET_END,
-      setSyncingEnd
+      setSyncingEnd,
     );
     observerRef.current.addEventListener(
       EWalletObserverEvents.DISCONNECT,
-      onDisconnect
+      onDisconnect,
     );
 
     setEventListenersAttached(() => true);
@@ -95,23 +95,23 @@ export const useProviderWalletObserverRef = (
 
       observerRef.current.removeEventListener(
         EWalletObserverEvents.CONNECT_WALLET_START,
-        setConnectingStart
+        setConnectingStart,
       );
       observerRef.current.removeEventListener(
         EWalletObserverEvents.CONNECT_WALLET_END,
-        setConnectingEnd
+        setConnectingEnd,
       );
       observerRef.current.removeEventListener(
         EWalletObserverEvents.SYNCING_WALLET_START,
-        setSyncingStart
+        setSyncingStart,
       );
       observerRef.current.removeEventListener(
         EWalletObserverEvents.SYNCING_WALLET_END,
-        setSyncingEnd
+        setSyncingEnd,
       );
       observerRef.current.removeEventListener(
         EWalletObserverEvents.DISCONNECT,
-        onDisconnect
+        onDisconnect,
       );
     };
   }, [observerRef, hooks]);

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

@@ -19,20 +19,20 @@ import { THandleMetadata } from "../../contexts/observer/index.js";
  * @param {WalletObserver} observer
  */
 export const useWalletObserverState = <
-  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 >(
-  observer: WalletObserver<AssetMetadata>
+  observer: WalletObserver<AssetMetadata>,
 ) => {
   const [activeWallet, setActiveWallet] =
     useState<TSupportedWalletExtensions>();
   const [adaBalance, setAdaBalance] = useState<AssetAmount<AssetMetadata>>(
-    new AssetAmount<AssetMetadata>(0n)
+    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)
+    new WalletBalanceMap<AssetMetadata>(observer),
   );
   const [network, setNetwork] = useState<number | undefined>();
   const [usedAddresses, setUsedAddresses] = useState<string[]>([]);
@@ -45,8 +45,8 @@ export const useWalletObserverState = <
   const [willAutoConnect, setWillAutoConnect] = useState(
     Boolean(
       window.localStorage.getItem(WalletObserver.PERSISTENCE_CACHE_KEY) &&
-        observer.getOptions().persistence
-    )
+        observer.getOptions().persistence,
+    ),
   );
 
   const disconnect = useCallback(() => {
@@ -82,40 +82,40 @@ export const useWalletObserverState = <
 
     startTransition(() => {
       setActiveWallet((prevWallet) =>
-        newWallet === prevWallet ? prevWallet : newWallet
+        newWallet === prevWallet ? prevWallet : newWallet,
       );
 
       const newAdaBalance = freshData.balanceMap.get(
-        WalletObserver.ADA_ASSET_ID
+        WalletObserver.ADA_ASSET_ID,
       );
       if (newAdaBalance) {
         setAdaBalance((prevBalance) =>
           prevBalance.amount === newAdaBalance.amount
             ? prevBalance
-            : newAdaBalance
+            : newAdaBalance,
         );
       }
 
       setBalance((prevBalance) =>
         areAssetMapsEqual(prevBalance, freshData.balanceMap)
           ? prevBalance
-          : freshData.balanceMap
+          : freshData.balanceMap,
       );
 
       setUsedAddresses((prevValue) =>
         JSON.stringify(prevValue) === JSON.stringify(freshData.usedAddresses)
           ? prevValue
-          : freshData.usedAddresses
+          : freshData.usedAddresses,
       );
 
       setUnusedAddresses((prevValue) =>
         JSON.stringify(prevValue) === JSON.stringify(freshData.unusedAddresses)
           ? prevValue
-          : freshData.unusedAddresses
+          : freshData.unusedAddresses,
       );
 
       setNetwork((prevValue) =>
-        prevValue === freshData.network ? prevValue : freshData.network
+        prevValue === freshData.network ? prevValue : freshData.network,
       );
 
       setUtxos((prevValue) => {
@@ -153,7 +153,7 @@ export const useWalletObserverState = <
       setSwitching(() => false);
       return observer.api;
     },
-    [observer, setSwitching]
+    [observer, setSwitching],
   );
 
   /**

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

@@ -37,7 +37,7 @@ describe("RenderWallet", () => {
         wrapper(props) {
           return <WalletObserverProvider {...props} />;
         },
-      }
+      },
     );
 
     expect(container.innerHTML).toMatchSnapshot();

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

@@ -38,15 +38,15 @@ describe("RenderWalletHandles", () => {
     const user = userEvent.setup();
     const spiedOnGetAllDataBatch = spyOn(
       KoraLabsProvider.prototype,
-      "getAllDataBatch"
+      "getAllDataBatch",
     );
     spiedOnGetAllDataBatch.mockImplementationOnce(
-      // @ts-ignore Bug in Bun.sh that mocks the function result rather than the reference.
-      () => async () => mockHandleMetadata
+      // @ts-expect-error Bug in Bun.sh that mocks the function result rather than the reference.
+      () => async () => mockHandleMetadata,
     );
     spiedOnGetAllDataBatch.mockImplementationOnce(
-      // @ts-ignore Bug in Bun.sh that mocks the function result rather than the reference.
-      () => async () => mockHandleMetadata
+      // @ts-expect-error Bug in Bun.sh that mocks the function result rather than the reference.
+      () => async () => mockHandleMetadata,
     );
 
     const { container, getByTestId, queryByTestId, rerender } = render(
@@ -55,7 +55,7 @@ describe("RenderWalletHandles", () => {
         wrapper(props) {
           return <WalletObserverProvider {...props} />;
         },
-      }
+      },
     );
 
     expect(spiedOnGetAllDataBatch).not.toHaveBeenCalled();
@@ -74,8 +74,8 @@ describe("RenderWalletHandles", () => {
     expect(container.innerHTML).toMatchSnapshot();
 
     spiedOnGetAllDataBatch.mockImplementationOnce(
-      // @ts-ignore See first mock comment.
-      () => async () => mockHandleMetadata.map(({ name }) => `${name}-updated`)
+      // @ts-expect-error See first mock comment.
+      () => async () => mockHandleMetadata.map(({ name }) => `${name}-updated`),
     );
 
     rerender(<RenderWalletHandles render={TestComponent} />);

package/src/react-components/__tests__/hooks/useAvailableExtensions.test.tsx

@@ -29,6 +29,7 @@ describe("useAvailableExtensions", () => {
       // Inject a duplicate api.
       window.cardano = {
         ...window.cardano,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         flint: mockedEternlWallet as unknown as any,
       };
 

package/src/react-components/__tests__/hooks/useWalletObserverRef.test.tsx

@@ -28,6 +28,6 @@ describe("useWalletObserverRef", () => {
       ),
     });
 
-    expect(result.current.current).toBeInstanceOf(WalletObserver);
+    expect(result.current.observerRef.current).toBeInstanceOf(WalletObserver);
   });
 });

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

@@ -15,15 +15,15 @@ export const WalletObserverContext = createContext<
  * @returns {IWalletObserverState<AssetMetadata>}
  */
 export function useWalletObserverContext<
-  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 >(): IWalletObserverState<AssetMetadata> {
   const context = useContext(
-    WalletObserverContext
+    WalletObserverContext,
   ) as unknown as IWalletObserverState<AssetMetadata>;
 
   if (!context) {
     throw new Error(
-      "useWalletObserverContext must be used within a WalletObserverProvider"
+      "useWalletObserverContext must be used within a WalletObserverProvider",
     );
   }
 

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

@@ -22,7 +22,7 @@ export type TWalletProviderHooks = {
  * The resolved internal props of the WalletObserverProvider.
  */
 export interface IWalletObserverProviderState<
-  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 > {
   observerOptions: TWalletObserverOptions<AssetMetadata>;
   hooks: TWalletProviderHooks;
@@ -33,7 +33,7 @@ export interface IWalletObserverProviderState<
  * The main WalletObserverProvider props.
  */
 export interface IWalletObserverProviderProps<
-  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 > {
   options?: Partial<IWalletObserverProviderState<AssetMetadata>>;
 }
@@ -42,7 +42,7 @@ export interface IWalletObserverProviderProps<
  * The WalletObserverProvider's internal state.
  */
 export interface IWalletObserverState<
-  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 > {
   observerRef: MutableRefObject<WalletObserver<AssetMetadata>>;
   refreshInterval: number | false;
@@ -62,14 +62,14 @@ export interface IWalletObserverState<
  * returned from the metadataResolver.
  */
 export type THandleMetadata<
-  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 > = AssetMetadata & IHandle;
 
 /**
  * The exposed state of the WalletObserverProvider.
  */
 export type TUseWalletObserverState<
-  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 > = Omit<
   IWalletObserverState<AssetMetadata>["state"],
   | "setActiveWallet"

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

@@ -1,9 +1,9 @@
 import {
   useCallback,
+  useDeferredValue,
   useEffect,
   useMemo,
   useState,
-  useTransition,
 } from "react";
 
 import { IHandle } from "@koralabs/adahandle-sdk";
@@ -15,17 +15,18 @@ import { THandleMetadata } from "../contexts/observer/types.js";
 import { useWalletObserver } from "./useWalletObserver.js";
 
 export const useWalletHandles = <
-  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 >() => {
   const state = useWalletObserver<THandleMetadata<AssetMetadata>>();
-  const [isPending, startTransition] = useTransition();
   const [handles, setHandles] = useState<
     TAssetAmountMap<THandleMetadata<AssetMetadata>>
   >(new WalletAssetMap());
+  const [isLoading, setIsLoading] = useState(true);
+  const deferredHandles = useDeferredValue(handles);
 
   const memoizedHandleDep = useMemo(
     () => [...state.balance.getHandles().keys()],
-    [state.balance]
+    [state.balance],
   );
 
   const syncHandles = useCallback<
@@ -41,6 +42,7 @@ export const useWalletHandles = <
     }
 
     try {
+      setIsLoading(true);
       const {
         default: HandleClient,
         HandleClientContext,
@@ -63,12 +65,12 @@ export const useWalletHandles = <
         .getAllDataBatch(
           walletHandlesWithDataArray.map(([key]) => ({
             value: key.split(".")[1],
-          }))
+          })),
         );
 
       walletHandlesWithDataArray.forEach(([key, asset]) => {
         const matchingData = walletHandleDataArray.find(
-          ({ hex }) => hex === key.split(".")[1]
+          ({ hex }) => hex === key.split(".")[1],
         ) as IHandle;
 
         walletHandles.set(
@@ -80,10 +82,11 @@ export const useWalletHandles = <
               assetId: normalizeAssetIdWithDot(asset.metadata.assetId),
               decimals: 0,
             })
-            .withAmount(1n)
+            .withAmount(1n),
         );
       });
 
+      setIsLoading(false);
       return walletHandles;
     } catch (e) {
       console.error(e);
@@ -94,29 +97,27 @@ export const useWalletHandles = <
   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;
-              }
+      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;
       });
     };
 
@@ -124,7 +125,7 @@ export const useWalletHandles = <
   }, [memoizedHandleDep, syncHandles]);
 
   return {
-    handles,
-    loadingHandles: isPending,
+    handles: deferredHandles,
+    loadingHandles: isLoading,
   };
 };