@rango-dev/widget-embedded 0.32.0 → 0.32.2-next.0

package/src/hooks/useStatefulConnect/useStatefulConnect.state.ts

@@ -0,0 +1,45 @@
+import type {
+  Actions,
+  NeedsDerivationPathState,
+  NeedsNamespacesState,
+} from './useStatefulConnect.types';
+
+export interface State {
+  status: 'init' | 'namespace' | 'derivationPath';
+  namespace: NeedsNamespacesState | null;
+  derivationPath: NeedsDerivationPathState | null;
+}
+
+export const initState: State = {
+  status: 'init',
+  namespace: null,
+  derivationPath: null,
+};
+
+export function reducer(state: State, action: Actions): State {
+  switch (action.type) {
+    case 'needsNamespace':
+      return {
+        ...state,
+        status: 'namespace',
+        namespace: action.payload,
+        derivationPath: null,
+      };
+    case 'needsDerivationPath':
+      return {
+        ...state,
+        status: 'derivationPath',
+        derivationPath: action.payload,
+      };
+    case 'reset':
+      return initState;
+    case 'resetDerivation':
+      return {
+        ...state,
+        derivationPath: null,
+        status: 'namespace',
+      };
+    default:
+      throw new Error(`Action hasn't been defined.`);
+  }
+}

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -0,0 +1,232 @@
+import type { HandleConnectOptions, Result } from './useStatefulConnect.types';
+import type { WalletInfoWithExtra } from '../../types';
+import type {
+  Namespace,
+  NamespaceData,
+  WalletType,
+} from '@rango-dev/wallets-shared';
+
+import { WalletState } from '@rango-dev/ui';
+import { useWallets } from '@rango-dev/wallets-react';
+import { useReducer } from 'react';
+
+import {
+  isStateOnDerivationPathStep,
+  isStateOnNamespace,
+} from './useStatefulConnect.helpers';
+import { initState, reducer, type State } from './useStatefulConnect.state';
+import { ResultStatus } from './useStatefulConnect.types';
+
+interface UseStatefulConnect {
+  handleConnect: (
+    wallet: WalletInfoWithExtra,
+    options?: HandleConnectOptions
+  ) => Promise<Result>;
+  handleNamespace: (
+    wallet: WalletInfoWithExtra,
+    selectedNamespaces: Namespace[]
+  ) => Promise<Result>;
+  handleDerivationPath: (path: string) => Promise<Result>;
+  handleDisconnect: (type: WalletType) => Promise<Result>;
+  getState(): State;
+  resetState(section?: 'derivation'): void;
+}
+
+/**
+ *
+ * This hook maintains state of wallet and checks if additional information
+ * is required to call the `connect` method of `core` package properly.
+ *
+ * The final goal is running `runConnect` which calls `wallets/core`'s `connect` method.
+ * But sometimes it needs to get more information like what namespace it should be connected to,
+ * or what derivation path should be used for.
+ *
+ */
+export function useStatefulConnect(): UseStatefulConnect {
+  const { state, disconnect, connect } = useWallets();
+
+  const [connectState, dispatch] = useReducer(reducer, initState);
+
+  const runConnect = async (
+    type: WalletType,
+    namespaces?: NamespaceData[],
+    _options?: HandleConnectOptions
+  ): Promise<{ status: ResultStatus }> => {
+    /*
+     * When running this function, it means all optional steps (like namespace and derivation path) has passed, or wallet doesn't need them at all.
+     * By resetting state, we will make sure when user tries to connect other wallets, it doesn't have unexpected states.
+     */
+    dispatch({
+      type: 'reset',
+    });
+
+    try {
+      await connect(type, undefined, namespaces);
+
+      return { status: ResultStatus.Connected };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any) {
+      const message = e?.message
+        ? `Error: ${e.message}`
+        : 'An unknown error happened during connecting wallet.';
+
+      throw new Error(message, { cause: e });
+    }
+  };
+
+  const handleConnect = async (
+    wallet: WalletInfoWithExtra,
+    options?: HandleConnectOptions
+  ): Promise<{
+    status: ResultStatus;
+  }> => {
+    const isDisconnected = wallet.state === WalletState.DISCONNECTED;
+
+    if (isDisconnected) {
+      if (!wallet.namespaces) {
+        return await runConnect(wallet.type, undefined, options);
+      }
+
+      const needsNamespace = wallet.namespaces.length > 1;
+      const needsDerivationPath = wallet.needsDerivationPath;
+
+      if (needsNamespace) {
+        dispatch({
+          type: 'needsNamespace',
+          payload: {
+            providerType: wallet.type,
+            providerImage: wallet.image,
+            availableNamespaces: wallet.namespaces,
+            singleNamespace: wallet.singleNamespace,
+          },
+        });
+        return { status: ResultStatus.Namespace };
+      } else if (needsDerivationPath) {
+        dispatch({
+          type: 'needsDerivationPath',
+          payload: {
+            providerType: wallet.type,
+            providerImage: wallet.image,
+            namespace: wallet.namespaces[0],
+          },
+        });
+        return { status: ResultStatus.DerivationPath };
+      }
+
+      return await runConnect(
+        wallet.type,
+        wallet.namespaces.map((namespace) => ({ namespace })),
+        options
+      );
+    }
+
+    if (options?.disconnectIfConnected) {
+      await handleDisconnect(wallet.type);
+      return { status: ResultStatus.Disconnected };
+    }
+
+    return { status: ResultStatus.DisconnectedUnhandled };
+  };
+
+  const handleNamespace = async (
+    wallet: WalletInfoWithExtra,
+    selectedNamespaces: Namespace[]
+  ): Promise<Result> => {
+    const isSingleNamespace = wallet.singleNamespace;
+    const needsDerivationPath = wallet.needsDerivationPath;
+    const firstSelectedNamespace = selectedNamespaces[0];
+
+    if (!firstSelectedNamespace) {
+      throw new Error(
+        'To confirm a namespace, you should select at least one namespace.'
+      );
+    }
+
+    /*
+     * Currently we support derivation path only for single namespace wallets.
+     *
+     * Basically Single namespace is a list with radio buttons to let the user select one value within the list.
+     */
+    if (isSingleNamespace && needsDerivationPath) {
+      dispatch({
+        type: 'needsDerivationPath',
+        payload: {
+          providerType: wallet.type,
+          providerImage: wallet.image,
+          namespace: firstSelectedNamespace,
+        },
+      });
+
+      return { status: ResultStatus.DerivationPath };
+    }
+
+    /**
+     * If execution reaches here, means we don't have any more optional step (like namespace and derivation)
+     * So we should start connecting wallet.
+     */
+
+    if (!isStateOnNamespace(connectState)) {
+      // Unreachable code.
+      throw new Error(
+        'Something went wrong on handling namespace. Please retry.'
+      );
+    }
+
+    const type = connectState.namespace.providerType;
+    const namespaces = selectedNamespaces.map((namespace) => ({
+      namespace,
+    }));
+
+    return await runConnect(type, namespaces);
+  };
+
+  const handleDerivationPath = async (
+    derivationPath: string
+  ): Promise<Result> => {
+    if (!derivationPath) {
+      throw new Error(
+        "Derivation path is empty. Please make sure you've filled the field correctly."
+      );
+    }
+
+    if (!isStateOnDerivationPathStep(connectState)) {
+      throw new Error(
+        'It seems you are filling derivation path without setting namespace before doing that. Please retry to connect.'
+      );
+    }
+    const type = connectState.derivationPath.providerType;
+    const selectedNamespace = connectState.derivationPath.namespace;
+    const namespaces = [{ namespace: selectedNamespace, derivationPath }];
+
+    return await runConnect(type, namespaces);
+  };
+
+  const handleDisconnect = async (type: WalletType): Promise<Result> => {
+    const wallet = state(type);
+    if (wallet.connected) {
+      await disconnect(type);
+      return { status: ResultStatus.Disconnected };
+    }
+
+    return { status: ResultStatus.Noop };
+  };
+
+  return {
+    handleConnect,
+    handleDisconnect,
+    handleNamespace,
+    handleDerivationPath,
+    getState: () => connectState,
+    resetState: (section?: 'derivation') => {
+      if (section === 'derivation') {
+        dispatch({
+          type: 'resetDerivation',
+        });
+      } else {
+        dispatch({
+          type: 'reset',
+        });
+      }
+    },
+  };
+}

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -0,0 +1,56 @@
+import type { Namespace } from '@rango-dev/wallets-shared';
+
+export interface HandleConnectOptions {
+  // To have a switch between connect and disconnect when user is clicking on a button, this option can be helpful.
+  disconnectIfConnected?: boolean;
+}
+
+export interface NeedsNamespacesState {
+  providerType: string;
+  providerImage: string;
+  availableNamespaces?: Namespace[];
+  singleNamespace?: boolean;
+}
+
+export interface NeedsDerivationPathState {
+  providerType: string;
+  providerImage: string;
+  namespace: Namespace;
+}
+
+export enum ResultStatus {
+  Connected = 'connected',
+  Namespace = 'namespace',
+  DerivationPath = 'derivation-path',
+  Disconnected = 'disconnected',
+  DisconnectedUnhandled = 'disconnected-unhandled',
+  Noop = 'noop',
+}
+
+export type Result = { status: ResultStatus };
+
+// State types
+
+interface UpdateNamespaceAction {
+  type: 'needsNamespace';
+  payload: NeedsNamespacesState;
+}
+
+interface UpdateDerivationPathAction {
+  type: 'needsDerivationPath';
+  payload: NeedsDerivationPathState;
+}
+
+interface ResetAction {
+  type: 'reset';
+}
+
+interface ResetDerivationAction {
+  type: 'resetDerivation';
+}
+
+export type Actions =
+  | ResetAction
+  | ResetDerivationAction
+  | UpdateDerivationPathAction
+  | UpdateNamespaceAction;

package/src/hooks/useWalletList.ts

@@ -1,5 +1,5 @@
+import type { WalletInfoWithExtra } from '../types';
 import type { WalletInfo } from '@rango-dev/ui';
-import type { NamespaceData, WalletType } from '@rango-dev/wallets-shared';
 import type { BlockchainMeta } from 'rango-sdk';
 
 import { WalletState } from '@rango-dev/ui';
@@ -9,11 +9,10 @@ import {
   KEPLR_COMPATIBLE_WALLETS,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useWalletsStore } from '../store/wallets';
-import { isSingleWalletActive } from '../utils/common';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
   hashWalletsState,
@@ -22,26 +21,33 @@ import {
   sortWalletsBasedOnConnectionState,
 } from '../utils/wallets';
 
+import { useStatefulConnect } from './useStatefulConnect/useStatefulConnect';
+
 const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
 
 interface Params {
   chain?: string;
-  onBeforeConnect?: (walletType: string) => void;
-  onConnect?: (walletType: string) => void;
-  onError?: (error?: string) => void;
+}
+
+interface API {
+  list: WalletInfoWithExtra[];
+  terminateConnectingWallets: () => void;
 }
 
 /**
- * gets list of wallets with their information and an action for handling click callback fo UI
- * we need to share the logic of rendering list of wallets and handle clicking on them in different places
- * you can use this list whenever you need to show the list of wallets and needed callbacks
+ *
+ * Returning list of wallets which has a applied sorting and filtering (some of wallet can be excluded).
+ * It can have some functionality on list itself,
+ * now it only has a method to disconnect the wallets that has `connecting` status. This is useful for exiting page and terminating wallet connection.
+ *
  */
-export function useWalletList(params: Params) {
-  const { chain, onBeforeConnect, onConnect, onError } = params;
+export function useWalletList(params?: Params): API {
+  const { chain } = params || {};
   const { config } = useAppStore();
-  const { state, disconnect, getWalletInfo, connect } = useWallets();
+  const { state, getWalletInfo } = useWallets();
   const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();
+  const { handleDisconnect } = useStatefulConnect();
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
   const listAvailableWalletTypes =
@@ -67,7 +73,6 @@ export function useWalletList(params: Params) {
     : wallets;
 
   const sortedWallets = sortWalletsBasedOnConnectionState(wallets);
-  const [error, setError] = useState('');
 
   const isExperimentalChainNotAdded = (walletType: string) =>
     !connectedWallets.find(
@@ -76,51 +81,18 @@ export function useWalletList(params: Params) {
         connectedWallet.chain === chain
     );
 
-  const handleClick = async (
-    type: WalletType,
-    namespaces?: NamespaceData[]
-  ) => {
-    const wallet = state(type);
-    try {
-      if (error) {
-        setError('');
-      }
-      if (wallet.connected) {
-        await disconnect(type);
-      } else {
-        if (isSingleWalletActive(wallets, config.multiWallets)) {
-          return;
-        }
-        onBeforeConnect?.(type);
-        await connect(type, undefined, namespaces);
-        onConnect?.(type);
-      }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (e: any) {
-      onError?.(e?.message);
-      setError('Error: ' + e?.message);
-    }
-  };
-
-  const disconnectConnectingWallets = useCallback(() => {
+  const terminateConnectingWallets = useCallback(() => {
     const connectingWallets =
       wallets?.filter((wallet) => wallet.state === WalletState.CONNECTING) ||
       [];
     for (const wallet of connectingWallets) {
-      void disconnect(wallet.type);
+      void handleDisconnect(wallet.type);
     }
   }, [hashWalletsState(wallets)]);
 
-  const disconnectWallet = async (type: WalletType) => {
-    const wallet = state(type);
-    if (wallet.connected) {
-      await disconnect(type);
-    }
-  };
-
   useEffect(() => {
     return () => {
-      disconnectConnectingWallets();
+      terminateConnectingWallets();
     };
   }, []);
 
@@ -175,9 +147,6 @@ export function useWalletList(params: Params) {
     list: sortedWallets.filter(
       (wallet) => !shouldExcludeWallet(wallet.type, chain ?? '', blockchains)
     ),
-    error,
-    handleClick,
-    disconnectConnectingWallets,
-    disconnectWallet,
+    terminateConnectingWallets,
   };
 }

package/src/index.ts

@@ -35,9 +35,9 @@ import type {
   StepTxExecutionUpdatedEvent,
 } from '@rango-dev/queue-manager-rango-preset';
 import type {
-  EventHandler as HandleWalletsUpdate,
-  ProviderInterface,
-} from '@rango-dev/wallets-react';
+  LegacyEventHandler as HandleWalletsUpdate,
+  LegacyProviderInterface as ProviderInterface,
+} from '@rango-dev/wallets-core/legacy';
 import type {
   WalletInfo,
   WalletState,
@@ -52,11 +52,8 @@ import {
   StepExecutionBlockedEventStatus,
   StepExecutionEventStatus,
 } from '@rango-dev/queue-manager-rango-preset';
-import {
-  readAccountAddress,
-  useWallets,
-  Events as WalletEvents,
-} from '@rango-dev/wallets-react';
+import { legacyReadAccountAddress as readAccountAddress } from '@rango-dev/wallets-core/legacy';
+import { useWallets, Events as WalletEvents } from '@rango-dev/wallets-react';
 import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
 import { PendingSwapNetworkStatus } from 'rango-types';
 
@@ -66,6 +63,7 @@ import { WidgetWallets } from './containers/Wallets';
 import { Widget } from './containers/Widget';
 import { useWidget } from './containers/WidgetInfo';
 import { WidgetProvider } from './containers/WidgetProvider';
+import { useStatefulConnect } from './hooks/useStatefulConnect';
 import { useWalletList } from './hooks/useWalletList';
 import { useWidgetEvents } from './hooks/useWidgetEvents';
 import { widgetEventEmitter } from './services/eventEmitter';
@@ -122,6 +120,7 @@ export {
   WidgetProvider,
   useWidget,
   useWallets,
+  useStatefulConnect,
   /**
    * @deprecated Use `widgetEventEmitter` instead. This hook will be removed in future versions.
    */