@rango-dev/widget-embedded 0.29.1-next.20 → 0.29.1-next.21

package/src/index.ts

@@ -5,7 +5,7 @@ import type {
   QuoteEventData,
   Tokens,
   WalletEventData,
-  WalletInfoWithNamespaces,
+  WalletInfoWithExtra,
   WidgetColors,
   WidgetColorsKeys,
   WidgetConfig,
@@ -108,7 +108,7 @@ export type {
   WidgetVariant,
   WalletEventData,
   QuoteEventData,
-  WalletInfoWithNamespaces,
+  WalletInfoWithExtra,
 };
 export {
   Widget,

package/src/pages/WalletsPage.tsx

@@ -1,4 +1,4 @@
-import type { WalletInfoWithNamespaces } from '../types';
+import type { WalletInfoWithExtra } from '../types';
 import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
@@ -14,6 +14,7 @@ import {
 import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
+import { WalletDerivationPathModal } from '../components/WalletDerivationPathModal';
 import { WalletModal } from '../components/WalletModal';
 import { WalletNamespacesModal } from '../components/WalletNamespacesModal';
 import { useWalletList } from '../hooks/useWalletList';
@@ -26,12 +27,20 @@ import {
 } from '../utils/wallets';
 
 interface NamespacesModalState {
+  open: boolean;
   providerType: string;
   providerImage: string;
   availableNamespaces?: Namespace[];
   singleNamespace?: boolean;
 }
 
+interface DerivationPathModalState {
+  open: boolean;
+  providerType: string;
+  providerImage: string;
+  namespace: Namespace;
+}
+
 const ListContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
@@ -57,6 +66,8 @@ export function WalletsPage() {
   const [openModal, setOpenModal] = useState(false);
   const [namespacesModalState, setNamespacesModalState] =
     useState<NamespacesModalState | null>(null);
+  const [derivationPathModalState, setDerivationPathModalState] =
+    useState<DerivationPathModalState | null>(null);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const isActiveTab = useUiStore.use.isActiveTab();
@@ -84,6 +95,24 @@ export function WalletsPage() {
     setOpenModal(false);
   };
 
+  const handleCloseNamespaceModal = () => {
+    if (namespacesModalState) {
+      setNamespacesModalState({
+        ...namespacesModalState,
+        open: false,
+      });
+    }
+  };
+
+  const handleCloseDerivationPathModal = () => {
+    if (derivationPathModalState) {
+      setDerivationPathModalState({
+        ...derivationPathModalState,
+        open: false,
+      });
+    }
+  };
+
   const selectedWallet = list.find(
     (wallet) => wallet.type === selectedWalletType
   );
@@ -97,15 +126,14 @@ export function WalletsPage() {
 
   const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
 
-  const handleWalletClick = (
-    type: string,
-    wallet: WalletInfoWithNamespaces
-  ) => {
+  const handleWalletItemClick = (type: string, wallet: WalletInfoWithExtra) => {
+    if (isSingleWalletActive(list, config.multiWallets)) {
+      return;
+    }
+
     if (!!wallet.namespaces && wallet.state === WalletState.DISCONNECTED) {
-      if (isSingleWalletActive(list, config.multiWallets)) {
-        return;
-      }
       setNamespacesModalState({
+        open: true,
         providerType: type,
         providerImage: wallet.image,
         availableNamespaces: wallet.namespaces,
@@ -116,6 +144,42 @@ export function WalletsPage() {
     }
   };
 
+  const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
+    const wallet = filteredWallets.find(
+      (wallet) => wallet.type === namespacesModalState?.providerType
+    );
+    if (
+      wallet?.singleNamespace && // Currently we support derivation path only for single namespace wallets
+      wallet?.needsDerivationPath &&
+      selectedNamespaces[0]
+    ) {
+      setDerivationPathModalState({
+        open: true,
+        providerType: wallet.type,
+        providerImage: wallet.image,
+        namespace: selectedNamespaces[0],
+      });
+    } else {
+      void handleClick(
+        namespacesModalState?.providerType as string,
+        selectedNamespaces.map((namespace) => ({
+          namespace,
+        }))
+      );
+    }
+    handleCloseNamespaceModal();
+  };
+
+  const handleDerivationPathConfirm = (derivationPath: string) => {
+    if (derivationPath && derivationPathModalState?.namespace) {
+      void handleClick(derivationPathModalState.providerType, [
+        { namespace: derivationPathModalState.namespace, derivationPath },
+      ]);
+    }
+
+    handleCloseDerivationPathModal();
+  };
+
   return (
     <Layout
       header={{
@@ -144,7 +208,7 @@ export function WalletsPage() {
                 key={key}
                 {...wallet}
                 container={getContainer()}
-                onClick={(type) => handleWalletClick(type, wallet)}
+                onClick={(type) => handleWalletItemClick(type, wallet)}
                 isLoading={fetchMetaStatus === 'loading'}
                 disabled={!isActiveTab}
               />
@@ -158,19 +222,21 @@ export function WalletsPage() {
             error={error}
           />
           <WalletNamespacesModal
-            open={!!namespacesModalState}
-            onClose={() => setNamespacesModalState(null)}
-            onConfirm={(namespaces) => {
-              void handleClick(
-                namespacesModalState?.providerType as string,
-                namespaces
-              );
-              setNamespacesModalState(null);
-            }}
+            open={!!namespacesModalState?.open}
+            onClose={handleCloseNamespaceModal}
+            onConfirm={handleConfirmNamespaces}
             image={namespacesModalState?.providerImage}
-            namespaces={namespacesModalState?.availableNamespaces}
+            availableNamespaces={namespacesModalState?.availableNamespaces}
             singleNamespace={namespacesModalState?.singleNamespace}
           />
+          <WalletDerivationPathModal
+            open={!!derivationPathModalState?.open}
+            selectedNamespace={derivationPathModalState?.namespace}
+            type={derivationPathModalState?.providerType}
+            image={derivationPathModalState?.providerImage}
+            onClose={handleCloseDerivationPathModal}
+            onConfirm={handleDerivationPathConfirm}
+          />
         </ListContainer>
       </Container>
     </Layout>

package/src/types/wallets.ts

@@ -24,7 +24,8 @@ export type TokensBalance = {
   [key: TokenHash]: Balance;
 };
 
-export type WalletInfoWithNamespaces = WalletInfo & {
+export type WalletInfoWithExtra = WalletInfo & {
   namespaces?: Namespace[];
   singleNamespace?: boolean;
+  needsDerivationPath?: boolean;
 };

package/src/utils/common.ts

@@ -1,4 +1,4 @@
-import type { WalletInfoWithNamespaces } from '../types';
+import type { WalletInfoWithExtra } from '../types';
 import type { Token } from 'rango-sdk';
 
 import { BlockchainCategories, WalletState } from '@rango-dev/ui';
@@ -250,7 +250,7 @@ export const getFontUrlByName = (fontName: string) => {
 };
 
 export function isSingleWalletActive(
-  wallets: WalletInfoWithNamespaces[],
+  wallets: WalletInfoWithExtra[],
   multiWallets?: boolean
 ) {
   const atLeastOneWalletIsConnected = !!wallets.find(

package/src/utils/wallets.ts

@@ -5,7 +5,7 @@ import type {
   SelectedQuote,
   TokensBalance,
   Wallet,
-  WalletInfoWithNamespaces,
+  WalletInfoWithExtra,
 } from '../types';
 import type { WalletInfo as ModalWalletInfo } from '@rango-dev/ui';
 import type {
@@ -68,7 +68,7 @@ export function mapWalletTypesToWalletInfo(
   getWalletInfo: (type: WalletType) => WalletInfo,
   list: WalletType[],
   chain?: string
-): WalletInfoWithNamespaces[] {
+): WalletInfoWithExtra[] {
   return list
     .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes))
     .filter((wallet) => {
@@ -96,6 +96,7 @@ export function mapWalletTypesToWalletInfo(
         namespaces,
         singleNamespace,
         supportedChains,
+        needsDerivationPath,
       } = getWalletInfo(type);
       const blockchainTypes = removeDuplicateFrom(
         supportedChains.map((item) => item.type)
@@ -112,6 +113,7 @@ export function mapWalletTypesToWalletInfo(
         namespaces,
         singleNamespace,
         blockchainTypes,
+        needsDerivationPath,
       };
     });
 }
@@ -434,8 +436,8 @@ export function areTokensEqual(
 }
 
 export function sortWalletsBasedOnConnectionState(
-  wallets: WalletInfoWithNamespaces[]
-): WalletInfoWithNamespaces[] {
+  wallets: WalletInfoWithExtra[]
+): WalletInfoWithExtra[] {
   return wallets.sort(
     (a, b) =>
       Number(b.state === WalletStatus.CONNECTED) -
@@ -549,7 +551,7 @@ export function filterBlockchainsByWalletTypes(
 }
 
 export function filterWalletsByCategory(
-  wallets: WalletInfoWithNamespaces[],
+  wallets: WalletInfoWithExtra[],
   category: string
 ) {
   if (category === BlockchainCategories.ALL) {