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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.32.2-next.0",
+  "version": "0.32.2-next.2",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -3,7 +3,7 @@ import type { WalletInfoWithExtra } from '../../types';
 import type { Namespace } from '@rango-dev/wallets-shared';
 
 import { Divider } from '@rango-dev/ui';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import {
   ResultStatus,
@@ -31,6 +31,7 @@ interface PropTypes {
 }
 
 export function StatefulConnectModal(props: PropTypes) {
+  const successModalTimerId = useRef<ReturnType<typeof setTimeout>>();
   const [isConnecting, setIsConnecting] = useState(false);
   const [error, setError] = useState<string>();
   const catchErrorOnHandle = (error: Error) => {
@@ -70,6 +71,10 @@ export function StatefulConnectModal(props: PropTypes) {
     setError(undefined);
     resetState();
     setIsConnecting(false);
+
+    if (successModalTimerId.current) {
+      clearTimeout(successModalTimerId.current);
+    }
   };
 
   useEffect(() => {
@@ -108,7 +113,10 @@ export function StatefulConnectModal(props: PropTypes) {
         }
 
         if (resultIsConnected && !isImmediatelyConnected) {
-          setTimeout(handleClosingModal, KEEP_SUCCESS_MODAL_FOR);
+          successModalTimerId.current = setTimeout(
+            handleClosingModal,
+            KEEP_SUCCESS_MODAL_FOR
+          );
         } else if (resultIsDisconnected) {
           handleClosingModal();
         }

package/src/components/StatefulConnectModal/index.ts

@@ -1 +1,2 @@
 export { StatefulConnectModal } from './StatefulConnectModal';
+export { isOnNamespace, isOnDerivationPath } from './helpers';

package/src/components/WalletStatefulConnect/DerivationPath.tsx

@@ -27,6 +27,8 @@ import {
   InputsContainer,
 } from './DerivationPath.styles';
 
+const DEFAULT_DERIVATION_PATH_INDEX = '0';
+
 export function DerivationPath(props: PropTypes) {
   const { onConfirm } = props;
   const {
@@ -38,7 +40,9 @@ export function DerivationPath(props: PropTypes) {
   const [selectedDerivationPathId, setSelectedDerivationPathId] = useState<
     string | null
   >(null);
-  const [derivationPathIndex, setDerivationPathIndex] = useState('0');
+  const [derivationPathIndex, setDerivationPathIndex] = useState(
+    DEFAULT_DERIVATION_PATH_INDEX
+  );
 
   const isCustomOptionSelected =
     selectedDerivationPathId === CUSTOM_DERIVATION_PATH.id;
@@ -51,6 +55,18 @@ export function DerivationPath(props: PropTypes) {
     );
 
     if (selectedDerivationPath) {
+      /*
+       * Custom mode accepts string, but other modes only accepts number,
+       * Here we are checking if user is on custom mode and trying to switch to another mode
+       * if it's an string we will keep it, if not we will reset the value to default
+       */
+      if (
+        selectedDerivationPathId === CUSTOM_DERIVATION_PATH.id &&
+        Number.isNaN(Number(derivationPathIndex))
+      ) {
+        setDerivationPathIndex(DEFAULT_DERIVATION_PATH_INDEX);
+      }
+
       setSelectedDerivationPathId(selectedDerivationPath.id);
     }
   };

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

@@ -34,11 +34,14 @@ export function reducer(state: State, action: Actions): State {
     case 'reset':
       return initState;
     case 'resetDerivation':
-      return {
-        ...state,
-        derivationPath: null,
-        status: 'namespace',
-      };
+      if (state.namespace) {
+        return {
+          ...state,
+          derivationPath: null,
+          status: 'namespace',
+        };
+      }
+      return initState;
     default:
       throw new Error(`Action hasn't been defined.`);
   }

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -203,7 +203,7 @@ export function useStatefulConnect(): UseStatefulConnect {
 
   const handleDisconnect = async (type: WalletType): Promise<Result> => {
     const wallet = state(type);
-    if (wallet.connected) {
+    if (wallet.connected || wallet.connecting) {
       await disconnect(type);
       return { status: ResultStatus.Disconnected };
     }

package/src/index.ts

@@ -57,6 +57,11 @@ import { useWallets, Events as WalletEvents } from '@rango-dev/wallets-react';
 import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
 import { PendingSwapNetworkStatus } from 'rango-types';
 
+import {
+  isOnDerivationPath,
+  isOnNamespace,
+} from './components/StatefulConnectModal';
+import { DerivationPath, Namespaces } from './components/WalletStatefulConnect';
 import { WIDGET_UI_ID as UI_ID } from './constants';
 import { SUPPORTED_FONTS } from './constants/fonts';
 import { WidgetWallets } from './containers/Wallets';
@@ -76,6 +81,13 @@ import {
 } from './types';
 import { customizedThemeTokens } from './utils/ui';
 
+export const StatefulConnect = {
+  DerivationPath,
+  Namespaces,
+  isOnDerivationPath,
+  isOnNamespace,
+};
+
 export type {
   WidgetConfig,
   WalletType,