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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.32.2-next.0",
+  "version": "0.32.2-next.10",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,19 +25,19 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.36.1-next.5",
+    "@rango-dev/provider-all": "^0.36.1-next.9",
     "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.36.1-next.1",
+    "@rango-dev/queue-manager-rango-preset": "^0.36.1-next.2",
     "@rango-dev/queue-manager-react": "^0.27.0",
     "@rango-dev/signer-solana": "^0.31.1-next.1",
-    "@rango-dev/ui": "^0.38.1-next.0",
+    "@rango-dev/ui": "^0.38.1-next.4",
     "@rango-dev/wallets-core": "^0.37.1-next.1",
-    "@rango-dev/wallets-react": "^0.22.1-next.1",
-    "@rango-dev/wallets-shared": "^0.36.1-next.1",
+    "@rango-dev/wallets-react": "^0.22.1-next.2",
+    "@rango-dev/wallets-shared": "^0.36.1-next.2",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
-    "ethers": "^5.7.2",
+    "ethers": "^6.13.2",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
     "rango-sdk": "^0.1.49",

package/src/components/Layout/Layout.tsx

@@ -109,17 +109,15 @@ function Layout(props: PropsWithChildren<PropTypes>) {
       ref={containerRef}>
       <Header
         prefix={
-          <>
-            {showBackButton && (
-              <BackButton
-                onClick={() => {
-                  navigateBack();
-                  // As an example, used in routes page to add a custom logic when navigating back to the home page.
-                  header.onBack && header.onBack();
-                }}
-              />
-            )}
-          </>
+          showBackButton ? (
+            <BackButton
+              onClick={() => {
+                navigateBack();
+                // As an example, used in routes page to add a custom logic when navigating back to the home page.
+                header.onBack && header.onBack();
+              }}
+            />
+          ) : null
         }
         title={header.title}
         suffix={

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);
     }
   };
@@ -81,9 +97,12 @@ export function DerivationPath(props: PropTypes) {
       <MessageBox
         type="info"
         title={i18n.t('Select Derivation Path')}
-        description={i18n.t(
-          `In order to connect to ${type}, you must first select a Derivation Path`
-        )}
+        description={i18n.t({
+          id: 'In order to connect to {type}, you must first select a Derivation Path',
+          values: {
+            type,
+          },
+        })}
         icon={
           <LogoContainer>
             <WalletImageContainer>

package/src/hooks/useFetchCustomToken.ts

@@ -51,9 +51,12 @@ export function useFetchCustomToken(): UseFetchCustomToken {
       case 'not-found':
         return {
           title: i18n.t('Token Not Found'),
-          message: i18n.t(
-            `Sorry, no token was found on ${blockchain} blockchain with the provided address. please make sure you have entered the right token address.`
-          ),
+          message: i18n.t({
+            id: 'Sorry, no token was found on {blockchain} blockchain with the provided address. please make sure you have entered the right token address.',
+            values: {
+              blockchain,
+            },
+          }),
         };
     }
   }

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,