@sundaeswap/wallet-lite 0.1.1 → 0.1.3

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

@@ -1,7 +1,12 @@
 import { IAssetAmountMetadata } from "@sundaeswap/asset";
 import { createContext, useContext } from "react";
 
-import { IWalletObserverState } from "./types.js";
+import {
+  IWalletObserverActionsContext,
+  IWalletObserverConnectionContext,
+  IWalletObserverState,
+  IWalletObserverWalletDataContext,
+} from "./types.js";
 
 /**
  * Context instance.
@@ -29,3 +34,68 @@ export function useWalletObserverContext<
 
   return context;
 }
+
+/**
+ * Focused context for stable actions and observer ref.
+ */
+export const WalletActionsContext = createContext<
+  IWalletObserverActionsContext | undefined
+>(undefined);
+
+/**
+ * Focused context for connection and loading state.
+ */
+export const WalletConnectionContext = createContext<
+  IWalletObserverConnectionContext | undefined
+>(undefined);
+
+/**
+ * Focused context for wallet data that changes every sync.
+ */
+export const WalletDataContext = createContext<
+  IWalletObserverWalletDataContext | undefined
+>(undefined);
+
+export function useWalletActionsContext<
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
+>(): IWalletObserverActionsContext<AssetMetadata> {
+  const context = useContext(
+    WalletActionsContext,
+  ) as unknown as IWalletObserverActionsContext<AssetMetadata>;
+
+  if (!context) {
+    throw new Error(
+      "useWalletActionsContext must be used within a WalletObserverProvider",
+    );
+  }
+
+  return context;
+}
+
+export function useWalletConnectionContext(): IWalletObserverConnectionContext {
+  const context = useContext(WalletConnectionContext);
+
+  if (!context) {
+    throw new Error(
+      "useWalletConnectionContext must be used within a WalletObserverProvider",
+    );
+  }
+
+  return context;
+}
+
+export function useWalletDataContext<
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
+>(): IWalletObserverWalletDataContext<AssetMetadata> {
+  const context = useContext(
+    WalletDataContext,
+  ) as unknown as IWalletObserverWalletDataContext<AssetMetadata>;
+
+  if (!context) {
+    throw new Error(
+      "useWalletDataContext must be used within a WalletObserverProvider",
+    );
+  }
+
+  return context;
+}

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

@@ -1,12 +1,14 @@
 import type { IHandle } from "@koralabs/adahandle-sdk";
-import type { IAssetAmountMetadata } from "@sundaeswap/asset";
+import type { AssetAmount, IAssetAmountMetadata } from "@sundaeswap/asset";
 import type { MutableRefObject } from "react";
 
 import type {
   IWalletObserverSync,
   TWalletObserverOptions,
 } from "../../../@types/observer.js";
+import type { WalletBalanceMap } from "../../../classes/WalletBalanceMap.class.js";
 import type { WalletObserver } from "../../../classes/WalletObserver.class.js";
+import type { TransactionUnspentOutput } from "@cardano-sdk/core/dist/cjs/Serialization/TransactionUnspentOutput.js";
 import { useDerivedState } from "../../WalletObserverProvider/hooks/effects/useDerivedState.js";
 import { useWalletObserverState } from "../../WalletObserverProvider/hooks/useWalletObserverState.js";
 
@@ -71,6 +73,60 @@ export interface IWalletObserverState<
     };
 }
 
+/**
+ * Focused context: stable callbacks and observer reference.
+ * Rarely changes — only if the observer instance is recreated.
+ */
+export interface IWalletObserverActionsContext<
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
+> {
+  observer: WalletObserver<AssetMetadata>;
+  observerRef: MutableRefObject<WalletObserver<AssetMetadata>>;
+  connectWallet: (wallet: string) => Promise<unknown>;
+  disconnect: () => void;
+  syncWallet: (
+    importedData?: IWalletObserverSync<AssetMetadata>,
+  ) => Promise<void>;
+  resyncMetadata: () => Promise<void>;
+}
+
+/**
+ * Focused context: connection and loading state.
+ * Changes on connect/disconnect and sync start/end.
+ */
+export interface IWalletObserverConnectionContext {
+  activeWallet: string | undefined;
+  ready: boolean;
+  connectingWallet: boolean;
+  syncingWallet: boolean;
+  network: number | undefined;
+  isCip45: boolean;
+  switching: boolean;
+  isReadOnlyMode: boolean;
+  willAutoConnect: boolean;
+  errorSyncing: boolean;
+  mainAddress: string | undefined;
+  stakeAddress: string | undefined;
+}
+
+/**
+ * Focused context: wallet data that changes every sync cycle.
+ */
+export interface IWalletObserverWalletDataContext<
+  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
+> {
+  balance: WalletBalanceMap<AssetMetadata>;
+  adaBalance: AssetAmount<AssetMetadata>;
+  usedAddresses: string[];
+  unusedAddresses: string[];
+  changeAddress: string | undefined;
+  feeAddress: string | undefined;
+  utxos: TransactionUnspentOutput[] | undefined;
+  collateral: TransactionUnspentOutput[] | undefined;
+  isPending: boolean;
+  refreshInterval: number | false;
+}
+
 /**
  * A generic to extend the default IHandle type that comes
  * back from the Kora Lab's API, and merged with the metadata

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

@@ -2,7 +2,7 @@ import { IAssetAmountMetadata } from "@sundaeswap/asset";
 import { useCallback, useMemo, useState } from "react";
 
 import { DataSignError } from "@cardano-sdk/dapp-connector";
-import { useWalletObserver } from "./useWalletObserver";
+import { useWalletActionsContext } from "../contexts/observer/context.js";
 
 export interface ISignedData {
   payload: string;
@@ -22,14 +22,14 @@ export interface ISignDataParams<T = object | string> {
 export const useWalletData = <
   AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 >() => {
-  const state = useWalletObserver<AssetMetadata>();
+  const { observer } = useWalletActionsContext<AssetMetadata>();
   const [signedData, setSignedData] = useState<ISignedData>();
   const [isSigningData, setIsSigningData] = useState(false);
   const [error, setError] = useState<DataSignError>();
 
   const signData = useCallback(
     async (params: ISignDataParams) => {
-      if (!state.observer.api) {
+      if (!observer.api) {
         return;
       }
 
@@ -46,7 +46,7 @@ export const useWalletData = <
       setIsSigningData(true);
 
       try {
-        const response = await state.observer.api.signData(
+        const response = await observer.api.signData(
           Cardano.Address.fromBech32(params.signingAddress).toBytes(),
           Buffer.from(
             typeof params.payload === "string"
@@ -83,7 +83,7 @@ export const useWalletData = <
         setError(e as DataSignError);
       }
     },
-    [state.observer.api],
+    [observer.api],
   );
 
   return useMemo(

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

@@ -5,20 +5,25 @@ import { useMemo } from "react";
 import { WalletAssetMap } from "../../classes/WalletAssetMap.class.js";
 import { getHandleMetadata } from "../../utils/handles.js";
 import { THandleMetadata } from "../contexts/observer/types.js";
-import { useWalletObserver } from "./useWalletObserver.js";
+import {
+  useWalletConnectionContext,
+  useWalletDataContext,
+} from "../contexts/observer/context.js";
 
 export const useWalletHandles = <
   AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 >() => {
-  const state = useWalletObserver<AssetMetadata>();
+  const { balance } = useWalletDataContext<AssetMetadata>();
+  const { mainAddress, network } = useWalletConnectionContext();
+
   const memoizedHandleDep = useMemo(
-    () => [...state.balance.getHandles().keys()],
-    [state.balance],
+    () => [...balance.getHandles().keys()],
+    [balance],
   );
 
   const queryKey = useMemo(
-    () => [memoizedHandleDep, state.mainAddress, state.network],
-    [memoizedHandleDep, state.mainAddress, state.network],
+    () => [memoizedHandleDep, mainAddress, network],
+    [memoizedHandleDep, mainAddress, network],
   );
   const { data: handles, isLoading } = useQuery<
     WalletAssetMap<THandleMetadata<AssetMetadata>> | undefined
@@ -26,8 +31,8 @@ export const useWalletHandles = <
     queryKey,
     queryFn: async () => {
       const result = await getHandleMetadata(
-        state.balance.getHandles(),
-        state.network || 0,
+        balance.getHandles(),
+        network || 0,
       );
 
       return result;

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

@@ -1,21 +1,23 @@
-import { IAssetAmountMetadata } from "@sundaeswap/asset";
 import { useMemo } from "react";
 
-import { useWalletObserverContext } from "../contexts/observer/context.js";
+import { useWalletConnectionContext } from "../contexts/observer/context.js";
 
-export const useWalletLoadingState = <
-  AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
->() => {
-  const { state } = useWalletObserverContext<AssetMetadata>();
+export const useWalletLoadingState = () => {
+  const connection = useWalletConnectionContext();
 
   const result = useMemo(
     () => ({
-      connectingWallet: state.connectingWallet,
-      syncingWallet: state.syncingWallet,
-      switchingWallet: state.switching,
-      ready: state.ready,
+      connectingWallet: connection.connectingWallet,
+      syncingWallet: connection.syncingWallet,
+      switchingWallet: connection.switching,
+      ready: connection.ready,
     }),
-    [state.ready, state.syncingWallet, state.connectingWallet, state.switching],
+    [
+      connection.ready,
+      connection.syncingWallet,
+      connection.connectingWallet,
+      connection.switching,
+    ],
   );
 
   return result;

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

@@ -2,18 +2,19 @@ import { IAssetAmountMetadata } from "@sundaeswap/asset";
 import {
   MutableRefObject,
   useEffect,
+  useMemo,
   useRef,
   useState,
   useTransition,
 } from "react";
 
 import { TGetPeerConnectInstance } from "../../@types/observer.js";
-import { useWalletObserver } from "./useWalletObserver.js";
+import { useWalletActionsContext } from "../contexts/observer/context.js";
 
 export const useWalletPeerConnect = <
   AssetMetadata extends IAssetAmountMetadata = IAssetAmountMetadata,
 >() => {
-  const state = useWalletObserver<AssetMetadata>();
+  const { observer } = useWalletActionsContext<AssetMetadata>();
   const [isPending, startTransition] = useTransition();
   const [peerConnect, setPeerConnect] =
     useState<ReturnType<TGetPeerConnectInstance>>();
@@ -21,11 +22,11 @@ export const useWalletPeerConnect = <
   const qrCode = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!state.observer) {
+    if (!observer) {
       return;
     }
 
-    state.observer.getCip45Instance().then((res) => {
+    observer.getCip45Instance().then((res) => {
       startTransition(() => {
         try {
           setPeerConnect(res);
@@ -34,7 +35,7 @@ export const useWalletPeerConnect = <
         }
       });
     });
-  }, [state.observer, setPeerConnect, setError]);
+  }, [observer]);
 
   useEffect(() => {
     if (peerConnect && qrCode.current) {
@@ -42,10 +43,18 @@ export const useWalletPeerConnect = <
     }
   }, [peerConnect, qrCode]);
 
-  return {
-    peerConnect,
-    QRCodeElement: <div ref={qrCode as MutableRefObject<HTMLDivElement>} />,
-    error,
-    isLoading: isPending,
-  };
+  const qrCodeElement = useMemo(
+    () => <div ref={qrCode as MutableRefObject<HTMLDivElement>} />,
+    [],
+  );
+
+  return useMemo(
+    () => ({
+      peerConnect,
+      QRCodeElement: qrCodeElement,
+      error,
+      isLoading: isPending,
+    }),
+    [peerConnect, qrCodeElement, error, isPending],
+  );
 };