@rango-dev/widget-embedded 0.27.4-next.2 → 0.27.4-next.4

package/src/pages/WalletsPage.tsx

@@ -1,4 +1,4 @@
-import type { WalletType } from '@rango-dev/wallets-shared';
+import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import { styled, Typography, Wallet, WalletState } from '@rango-dev/ui';
@@ -6,11 +6,19 @@ import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
 import { WalletModal } from '../components/WalletModal';
+import { WalletNamespacesModal } from '../components/WalletNamespacesModal';
 import { useWalletList } from '../hooks/useWalletList';
 import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
 import { getContainer } from '../utils/common';
 
+interface NamespacesModalState {
+  providerType: string;
+  providerImage: string;
+  availableNamespaces?: Namespace[];
+  singleNamespace?: boolean;
+}
+
 const ListContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
@@ -30,6 +38,8 @@ export const TIME_TO_IGNORE_MODAL = 300;
 export function WalletsPage() {
   const { fetchStatus: fetchMetaStatus } = useAppStore();
   const [openModal, setOpenModal] = useState(false);
+  const [namespacesModalState, setNamespacesModalState] =
+    useState<NamespacesModalState | null>(null);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const isActiveTab = useUiStore.use.isActiveTab();
@@ -82,7 +92,19 @@ export function WalletsPage() {
                 {...wallet}
                 container={getContainer()}
                 onClick={(type) => {
-                  void handleClick(type);
+                  if (
+                    !!wallet.namespaces &&
+                    wallet.state === WalletState.DISCONNECTED
+                  ) {
+                    setNamespacesModalState({
+                      providerType: type,
+                      providerImage: wallet.image,
+                      availableNamespaces: wallet.namespaces,
+                      singleNamespace: wallet.singleNamespace,
+                    });
+                  } else {
+                    void handleClick(type);
+                  }
                 }}
                 isLoading={fetchMetaStatus === 'loading'}
                 disabled={!isActiveTab}
@@ -96,6 +118,20 @@ export function WalletsPage() {
             state={selectedWalletState}
             error={error}
           />
+          <WalletNamespacesModal
+            open={!!namespacesModalState}
+            onClose={() => setNamespacesModalState(null)}
+            onConfirm={(namespaces) => {
+              void handleClick(
+                namespacesModalState?.providerType as string,
+                namespaces
+              );
+              setNamespacesModalState(null);
+            }}
+            image={namespacesModalState?.providerImage}
+            namespaces={namespacesModalState?.availableNamespaces}
+            singleNamespace={namespacesModalState?.singleNamespace}
+          />
         </ListContainer>
       </Container>
     </Layout>

package/src/types/wallets.ts

@@ -1,4 +1,5 @@
-import type { WalletType } from '@rango-dev/wallets-shared';
+import type { WalletInfo } from '@rango-dev/ui';
+import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 export interface Wallet {
   chain: string;
@@ -22,3 +23,8 @@ export type TokenHash = `${Blockchain}-${TokenSymbol}-${Address}`;
 export type TokensBalance = {
   [key: TokenHash]: Balance;
 };
+
+export type WalletInfoWithNamespaces = WalletInfo & {
+  namespaces?: Namespace[];
+  singleNamespace?: boolean;
+};

package/src/utils/wallets.ts

@@ -5,6 +5,7 @@ import type {
   TokenHash,
   TokensBalance,
   Wallet,
+  WalletInfoWithNamespaces,
 } from '../types';
 import type { WalletInfo as ModalWalletInfo } from '@rango-dev/ui';
 import type {
@@ -58,7 +59,7 @@ export function mapWalletTypesToWalletInfo(
   getWalletInfo: (type: WalletType) => WalletInfo,
   list: WalletType[],
   chain?: string
-): ModalWalletInfo[] {
+): WalletInfoWithNamespaces[] {
   return list
     .filter((wallet) => !EXCLUDED_WALLETS.includes(wallet as WalletTypes))
     .filter((wallet) => {
@@ -82,6 +83,8 @@ export function mapWalletTypesToWalletInfo(
         img: image,
         installLink,
         showOnMobile,
+        namespaces,
+        singleNamespace,
       } = getWalletInfo(type);
       const state = mapStatusToWalletState(getState(type));
       return {
@@ -91,6 +94,8 @@ export function mapWalletTypesToWalletInfo(
         state,
         type,
         showOnMobile,
+        namespaces,
+        singleNamespace,
       };
     });
 }
@@ -433,8 +438,8 @@ export function areTokensEqual(
 }
 
 export function sortWalletsBasedOnConnectionState(
-  wallets: ModalWalletInfo[]
-): ModalWalletInfo[] {
+  wallets: WalletInfoWithNamespaces[]
+): WalletInfoWithNamespaces[] {
   return wallets.sort(
     (a, b) =>
       Number(b.state === WalletStatus.CONNECTED) -