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

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAsBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAyE1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA8BxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAqG1B"}

package/dist/types/wallets.d.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;
     address: string;
@@ -17,5 +18,9 @@ export type TokenHash = `${Blockchain}-${TokenSymbol}-${Address}`;
 export type TokensBalance = {
     [key: TokenHash]: Balance;
 };
+export type WalletInfoWithNamespaces = WalletInfo & {
+    namespaces?: Namespace[];
+    singleNamespace?: boolean;
+};
 export {};
 //# sourceMappingURL=wallets.d.ts.map

package/dist/types/wallets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/types/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,MAAM,MAAM,OAAO,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,UAAU,GAAG,MAAM,CAAC;AACzB,KAAK,WAAW,GAAG,MAAM,CAAC;AAC1B,KAAK,OAAO,GAAG,MAAM,CAAC;AAEtB,kCAAkC;AAClC,MAAM,MAAM,SAAS,GAAG,GAAG,UAAU,IAAI,WAAW,IAAI,OAAO,EAAE,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,SAAS,GAAG,OAAO,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/types/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvE,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,MAAM,MAAM,OAAO,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,UAAU,GAAG,MAAM,CAAC;AACzB,KAAK,WAAW,GAAG,MAAM,CAAC;AAC1B,KAAK,OAAO,GAAG,MAAM,CAAC;AAEtB,kCAAkC;AAClC,MAAM,MAAM,SAAS,GAAG,GAAG,UAAU,IAAI,WAAW,IAAI,OAAO,EAAE,CAAC;AAElE,MAAM,MAAM,aAAa,GAAG;IAC1B,CAAC,GAAG,EAAE,SAAS,GAAG,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,UAAU,GAAG;IAClD,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC"}

package/dist/utils/wallets.d.ts

@@ -1,11 +1,11 @@
 import type { ConnectedWallet, TokenBalance } from '../store/wallets';
-import type { Balance, SelectedQuote, TokenHash, TokensBalance, Wallet } from '../types';
+import type { Balance, SelectedQuote, TokenHash, TokensBalance, Wallet, WalletInfoWithNamespaces } from '../types';
 import type { WalletInfo as ModalWalletInfo } from '@rango-dev/ui';
 import type { Asset, Network, WalletInfo, WalletState, WalletType } from '@rango-dev/wallets-shared';
 import type { BlockchainMeta, Token, WalletDetail } from 'rango-sdk';
 import { WalletState as WalletStatus } from '@rango-dev/ui';
 export declare function mapStatusToWalletState(state: WalletState): WalletStatus;
-export declare function mapWalletTypesToWalletInfo(getState: (type: WalletType) => WalletState, getWalletInfo: (type: WalletType) => WalletInfo, list: WalletType[], chain?: string): ModalWalletInfo[];
+export declare function mapWalletTypesToWalletInfo(getState: (type: WalletType) => WalletState, getWalletInfo: (type: WalletType) => WalletInfo, list: WalletType[], chain?: string): WalletInfoWithNamespaces[];
 export declare function walletAndSupportedChainsNames(supportedBlockchains: BlockchainMeta[]): Network[] | null;
 export declare function prepareAccountsForWalletStore(wallet: WalletType, accounts: string[], evmBasedChains: string[], supportedChainNames: Network[] | null, isContractWallet: boolean): Wallet[];
 export declare function getQuoteWallets(params: {
@@ -22,7 +22,7 @@ export declare const getKeplrCompatibleConnectedWallets: (selectableWallets: Wal
 export declare function formatBalance(balance: Balance | null): Balance | null;
 export declare function compareTokenBalance(token1Balance: Balance | null, token2Balance: Balance | null): number;
 export declare function areTokensEqual(tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null, tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null): boolean;
-export declare function sortWalletsBasedOnConnectionState(wallets: ModalWalletInfo[]): ModalWalletInfo[];
+export declare function sortWalletsBasedOnConnectionState(wallets: WalletInfoWithNamespaces[]): WalletInfoWithNamespaces[];
 export declare function getConciseAddress(address: string, maxChars?: number, ellipsisLength?: number): string;
 export declare function getAddress({ chain, connectedWallets, walletType, }: {
     connectedWallets: ConnectedWallet[];

package/dist/utils/wallets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"wallets.d.ts","sourceRoot":"","sources":["../../src/utils/wallets.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,KAAK,EACV,OAAO,EACP,aAAa,EACb,SAAS,EACT,aAAa,EACb,MAAM,EACN,wBAAwB,EACzB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,KAAK,EACV,KAAK,EACL,OAAO,EACP,UAAU,EACV,WAAW,EACX,UAAU,EAEX,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAErE,OAAO,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,eAAe,CAAC;AAuB5D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAWvE;AAED,wBAAgB,0BAA0B,CACxC,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,WAAW,EAC3C,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,UAAU,EAC/C,IAAI,EAAE,UAAU,EAAE,EAClB,KAAK,CAAC,EAAE,MAAM,GACb,wBAAwB,EAAE,CAuC5B;AAED,wBAAgB,6BAA6B,CAC3C,oBAAoB,EAAE,cAAc,EAAE,GACrC,OAAO,EAAE,GAAG,IAAI,CAUlB;AAED,wBAAgB,6BAA6B,CAC3C,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,MAAM,EAAE,EAClB,cAAc,EAAE,MAAM,EAAE,EACxB,mBAAmB,EAAE,OAAO,EAAE,GAAG,IAAI,EACrC,gBAAgB,EAAE,OAAO,GACxB,MAAM,EAAE,CAkFV;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE;IACtC,MAAM,EAAE,KAAK,GAAG,UAAU,CAAC;IAC3B,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;CAC7B,GAAG,MAAM,EAAE,CAsCX;AAID,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,eAAe,WAOjC;AAED,wBAAgB,cAAc,CAC5B,gBAAgB,EAAE,YAAY,EAC9B,MAAM,EAAE,KAAK,EAAE,GACd,YAAY,EAAE,CAuBhB;AAED,wBAAgB,yBAAyB,CACvC,eAAe,EAAE,eAAe,GAC/B,eAAe,CAEjB;AAED,eAAO,MAAM,uBAAuB,oBAAqB,eAAe,EAAE,WAwCzE,CAAC;AAQF,eAAO,MAAM,WAAW,eACV,MAAM,UACV,MAAM,WACL,MAAM,GAAG,IAAI,aACX,KAAK,EAAE,KACjB,MAAM,GAAG,IAQX,CAAC;AACF,eAAO,MAAM,mBAAmB,gBACjB,cAAc,EAAE,UACrB,MAAM,KACb,OAUF,CAAC;AAEF,eAAO,MAAM,kCAAkC,sBAC1B,MAAM,EAAE,KAC1B,UAAU,EAUZ,CAAC;AAEF,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAkBrE;AAED,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,OAAO,GAAG,IAAI,EAC7B,aAAa,EAAE,OAAO,GAAG,IAAI,GAC5B,MAAM,CAgBR;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG,IAAI,EAC/D,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG,IAAI,WAOhE;AAED,wBAAgB,iCAAiC,CAC/C,OAAO,EAAE,wBAAwB,EAAE,GAClC,wBAAwB,EAAE,CAc5B;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,MAAM,EAEf,QAAQ,SAAI,EAEZ,cAAc,SAAI,GACjB,MAAM,CAOR;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,gBAAgB,EAChB,UAAU,GACX,EAAE;IACD,gBAAgB,EAAE,eAAe,EAAE,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,GAAG,SAAS,CAMrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAEvD;AAED,wBAAgB,iBAAiB,CAAC,gBAAgB,EAAE,eAAe,EAAE,iBAmCpE;AAED,eAAO,MAAM,iBAAiB,qBACV,eAAe,EAAE,cACvB,MAAM,YAIjB,CAAC;AAEJ,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,UAE9D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.27.4-next.3",
+  "version": "0.27.4-next.4",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,13 +25,13 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.2.1-next.1",
-    "@rango-dev/provider-all": "^0.32.2-next.3",
+    "@rango-dev/provider-all": "^0.32.2-next.4",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.32.1-next.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.32.1-next.1",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.33.1-next.4",
-    "@rango-dev/wallets-react": "^0.18.1-next.0",
-    "@rango-dev/wallets-shared": "^0.32.1-next.0",
+    "@rango-dev/ui": "^0.33.1-next.5",
+    "@rango-dev/wallets-react": "^0.18.1-next.1",
+    "@rango-dev/wallets-shared": "^0.32.1-next.2",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -52,4 +52,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -1,7 +1,6 @@
 import type { PropTypes } from './WalletList.type';
-import type { Wallet } from '../../types';
-import type { WalletInfo } from '@rango-dev/ui';
-import type { WalletType } from '@rango-dev/wallets-shared';
+import type { Wallet, WalletInfoWithNamespaces } from '../../types';
+import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
 import {
@@ -33,6 +32,7 @@ import {
 } from '../../utils/wallets';
 import { WatermarkedModal } from '../common/WatermarkedModal';
 import { WalletModal } from '../WalletModal';
+import { WalletNamespacesModal } from '../WalletNamespacesModal';
 
 import { ShowMoreWallets } from './ConfirmWallets.styles';
 import {
@@ -41,6 +41,13 @@ import {
   WalletImageContainer,
 } from './WalletList.styles';
 
+interface WalletNamespacesModalState {
+  providerType: string;
+  providerImage: string;
+  availableNamespaces?: Namespace[];
+  singleNamespace?: boolean;
+}
+
 const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
 export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
@@ -56,26 +63,34 @@ export function WalletList(props: PropTypes) {
     useState(false);
   const [addingExperimentalChainStatus, setAddingExperimentalChainStatus] =
     useState<'in-progress' | 'completed' | 'rejected' | null>(null);
+  const [namespacesModalState, setNamespacesModalState] =
+    useState<WalletNamespacesModalState | null>(null);
   const { suggestAndConnect } = useWallets();
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
-  const { list, error, handleClick, disconnectConnectingWallets } =
-    useWalletList({
-      chain,
-      onBeforeConnect: (type) => {
-        modalTimerId = setTimeout(() => {
-          setOpenWalletStateModal(type);
-        }, TIME_TO_IGNORE_MODAL);
-      },
-      onConnect: () => {
-        if (modalTimerId) {
-          clearTimeout(modalTimerId);
-        }
-        setTimeout(() => {
-          setOpenWalletStateModal('');
-        }, TIME_TO_CLOSE_MODAL);
-      },
-    });
-  const [sortedList, setSortedList] = useState<WalletInfo[]>(list);
+  const {
+    list,
+    error,
+    handleClick,
+    disconnectWallet,
+    disconnectConnectingWallets,
+  } = useWalletList({
+    chain,
+    onBeforeConnect: (type) => {
+      modalTimerId = setTimeout(() => {
+        setOpenWalletStateModal(type);
+      }, TIME_TO_IGNORE_MODAL);
+    },
+    onConnect: () => {
+      if (modalTimerId) {
+        clearTimeout(modalTimerId);
+      }
+      setTimeout(() => {
+        setOpenWalletStateModal('');
+      }, TIME_TO_CLOSE_MODAL);
+    },
+  });
+  const [sortedList, setSortedList] =
+    useState<WalletInfoWithNamespaces[]>(list);
   const numberOfSupportedWallets = list.length;
   const shouldShowMoreWallets = limit && numberOfSupportedWallets - limit > 0;
 
@@ -90,6 +105,15 @@ export function WalletList(props: PropTypes) {
     }
   };
 
+  const handleOpenNamespacesModal = (wallet: WalletInfoWithNamespaces) => {
+    setNamespacesModalState({
+      providerType: wallet.type,
+      providerImage: wallet.image,
+      availableNamespaces: wallet.namespaces,
+      singleNamespace: wallet.singleNamespace,
+    });
+  };
+
   useEffect(() => {
     setSortedList((sortedList) => {
       const selectedWalletIndex = list.findIndex((wallet) =>
@@ -169,9 +193,16 @@ export function WalletList(props: PropTypes) {
             })
           : conciseAddress;
 
-        const onClick = () => {
+        const onClick = async () => {
           if (wallet.state === WalletState.DISCONNECTED) {
-            void handleClick(wallet.type);
+            if (!!wallet.namespaces) {
+              handleOpenNamespacesModal(wallet);
+            } else {
+              void handleClick(wallet.type);
+            }
+          } else if (!!wallet.namespaces && !conciseAddress) {
+            await disconnectWallet(wallet.type);
+            handleOpenNamespacesModal(wallet);
           } else if (couldAddExperimentalChain) {
             setExperimentalChainWallet({
               walletType: wallet.type,
@@ -204,6 +235,20 @@ export function WalletList(props: PropTypes) {
               state={wallet.state}
               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}
+            />
             {!!experimentalChainWallet && (
               <WatermarkedModal
                 open={!!experimentalChainWallet && showExperimentalChainModal}

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -1,15 +1,24 @@
 import type { WalletStateContentProps } from './SwapDetailsModal.types';
+import type { Namespace } from '@rango-dev/wallets-shared';
 
 import { debug } from '@rango-dev/logging-core';
 import { MessageBox, Wallet } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { getContainer } from '../../utils/common';
 import { mapStatusToWalletState } from '../../utils/wallets';
+import { WalletNamespacesModal } from '../WalletNamespacesModal';
 
 import { WalletContainer } from './SwapDetailsModal.styles';
 
+interface NamespacesModalState {
+  providerType: string;
+  providerImage: string;
+  availableNamespaces?: Namespace[];
+  singleNamespace?: boolean;
+}
+
 export const WalletStateContent = (props: WalletStateContentProps) => {
   const {
     type,
@@ -20,6 +29,8 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
     walletButtonDisabled,
   } = props;
   const { connect, getWalletInfo, state } = useWallets();
+  const [namespacesModalState, setNamespacesModalState] =
+    useState<NamespacesModalState | null>(null);
   const walletType = currentStepWallet?.walletType;
   const walletState = walletType
     ? mapStatusToWalletState(state(walletType))
@@ -27,6 +38,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
   const walletInfo = walletType ? getWalletInfo(walletType) : null;
   const shouldShowWallet =
     showWalletButton && !!walletType && !!walletState && !!walletInfo;
+
   return (
     <>
       <MessageBox type={type} title={title} description={message} />
@@ -41,12 +53,36 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
             link={walletInfo.installLink}
             disabled={walletButtonDisabled}
             // TODO we need to show an error modal when user reject the connection
-            onClick={async () =>
-              connect(walletType).catch((error) => debug(error))
-            }
+            onClick={async () => {
+              if (walletInfo.namespaces) {
+                setNamespacesModalState({
+                  providerType: walletType,
+                  providerImage: walletInfo.img,
+                  availableNamespaces: walletInfo.namespaces,
+                  singleNamespace: walletInfo.singleNamespace,
+                });
+              } else {
+                connect(walletType).catch((error) => debug(error));
+              }
+            }}
           />
         </WalletContainer>
       )}
+      <WalletNamespacesModal
+        open={!!namespacesModalState}
+        onClose={() => setNamespacesModalState(null)}
+        onConfirm={(namespaces) => {
+          connect(
+            namespacesModalState?.providerType as string,
+            undefined,
+            namespaces
+          ).catch((error) => debug(error));
+          setNamespacesModalState(null);
+        }}
+        image={namespacesModalState?.providerImage}
+        namespaces={namespacesModalState?.availableNamespaces}
+        singleNamespace={namespacesModalState?.singleNamespace}
+      />
     </>
   );
 };

package/src/components/WalletNamespacesModal/WalletNamespacesModal.styles.ts

@@ -0,0 +1,7 @@
+import { styled } from '@rango-dev/ui';
+
+export const NamespaceList = styled('ul', {
+  padding: 0,
+  paddingTop: '$4',
+  paddingBottom: '$4',
+});

package/src/components/WalletNamespacesModal/WalletNamespacesModal.tsx

@@ -0,0 +1,142 @@
+import type { PropTypes } from './WalletNamespacesModal.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Checkbox,
+  Image,
+  ListItemButton,
+  MessageBox,
+  Radio,
+  RadioRoot,
+} from '@rango-dev/ui';
+import { Namespace } from '@rango-dev/wallets-shared';
+import React, { useMemo, useState } from 'react';
+
+import { WIDGET_UI_ID } from '../../constants';
+import { useAppStore } from '../../store/AppStore';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
+import {
+  LogoContainer,
+  Spinner,
+} from '../WalletModal/WalletModalContent.styles';
+
+import { NamespaceList } from './WalletNamespacesModal.styles';
+
+export const namespaceMainBlockchain: Record<Namespace, string> = {
+  [Namespace.Evm]: 'ETH',
+  [Namespace.Solana]: 'SOLANA',
+  [Namespace.Cosmos]: 'COSMOS',
+  [Namespace.Utxo]: 'BTC',
+  [Namespace.Starknet]: 'STARKNET',
+  [Namespace.Tron]: 'TRON',
+};
+
+const getBlockchainLogo = (
+  blockchains: BlockchainMeta[],
+  blockchainName: string
+) => {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.logo;
+};
+
+export function WalletNamespacesModal(props: PropTypes) {
+  const { singleNamespace, namespaces } = props;
+
+  const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
+
+  const blockchains = useAppStore().blockchains();
+
+  const namespacesInfo = useMemo(
+    () =>
+      namespaces?.map((namespace) => ({
+        name: namespace,
+        logo: getBlockchainLogo(
+          blockchains,
+          namespaceMainBlockchain[namespace]
+        ),
+      })),
+    [namespaces]
+  );
+
+  const onSelect = (namespace: Namespace) => {
+    if (singleNamespace) {
+      setSelectedNamespaces([namespace]);
+    } else {
+      setSelectedNamespaces((selectedNamespaces) =>
+        selectedNamespaces.includes(namespace)
+          ? selectedNamespaces.filter((item) => item !== namespace)
+          : selectedNamespaces.concat(namespace)
+      );
+    }
+  };
+
+  const wrapRadioRoot = (children: React.ReactNode) => {
+    if (singleNamespace) {
+      return <RadioRoot value={selectedNamespaces?.[0]}>{children}</RadioRoot>;
+    }
+
+    return <>{children}</>;
+  };
+
+  return (
+    <WatermarkedModal
+      open={props.open}
+      onClose={props.onClose}
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
+      <MessageBox
+        type="info"
+        title={i18n.t('Select chain types')}
+        description={i18n.t(
+          `This wallet supports multiple chains. Select which chain you'd like to connect to.`
+        )}
+        icon={
+          <LogoContainer>
+            <WalletImageContainer>
+              <Image src={props.image} size={45} />
+            </WalletImageContainer>
+            <Spinner />
+          </LogoContainer>
+        }
+      />
+      <NamespaceList>
+        {wrapRadioRoot(
+          <>
+            {namespacesInfo?.map((namespaceInfoItem) => (
+              <ListItemButton
+                key={namespaceInfoItem.name}
+                id={namespaceInfoItem.name}
+                title={namespaceInfoItem.name}
+                hasDivider
+                style={{ height: 60 }}
+                onClick={() => onSelect(namespaceInfoItem.name)}
+                start={<Image src={namespaceInfoItem.logo} size={22} />}
+                end={
+                  singleNamespace ? (
+                    <Radio value={namespaceInfoItem.name} />
+                  ) : (
+                    <Checkbox
+                      checked={selectedNamespaces.includes(
+                        namespaceInfoItem.name
+                      )}
+                    />
+                  )
+                }
+              />
+            ))}
+          </>
+        )}
+      </NamespaceList>
+      <Button
+        type="primary"
+        disabled={!selectedNamespaces.length}
+        onClick={() => props.onConfirm(selectedNamespaces)}>
+        {i18n.t('Confirm')}
+      </Button>
+    </WatermarkedModal>
+  );
+}

package/src/components/WalletNamespacesModal/WalletNamespacesModal.types.tsx

@@ -0,0 +1,10 @@
+import type { Namespace } from '@rango-dev/wallets-shared';
+
+export interface PropTypes {
+  open: boolean;
+  image?: string;
+  onClose: () => void;
+  onConfirm: (namespaces: Namespace[]) => void;
+  namespaces?: Namespace[];
+  singleNamespace?: boolean;
+}

package/src/components/WalletNamespacesModal/index.ts

@@ -0,0 +1 @@
+export { WalletNamespacesModal } from './WalletNamespacesModal';

package/src/hooks/useWalletList.ts

@@ -1,4 +1,5 @@
 import type { WalletInfo } from '@rango-dev/ui';
+import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 import type { BlockchainMeta } from 'rango-sdk';
 
 import { WalletState } from '@rango-dev/ui';
@@ -6,7 +7,6 @@ import { useWallets } from '@rango-dev/wallets-react';
 import {
   detectMobileScreens,
   KEPLR_COMPATIBLE_WALLETS,
-  type WalletType,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
 import { useCallback, useEffect, useState } from 'react';
@@ -70,7 +70,7 @@ export function useWalletList(params: Params) {
         connectedWallet.chain === chain
     );
 
-  const handleClick = async (type: WalletType) => {
+  const handleClick = async (type: WalletType, namespaces?: Namespace[]) => {
     const wallet = state(type);
     try {
       if (error) {
@@ -86,7 +86,7 @@ export function useWalletList(params: Params) {
           return;
         }
         onBeforeConnect?.(type);
-        await connect(type);
+        await connect(type, undefined, namespaces);
         onConnect?.(type);
       }
     } catch (e) {
@@ -103,6 +103,13 @@ export function useWalletList(params: Params) {
     }
   }, [hashWalletsState(wallets)]);
 
+  const disconnectWallet = async (type: WalletType) => {
+    const wallet = state(type);
+    if (wallet.connected) {
+      await disconnect(type);
+    }
+  };
+
   useEffect(() => {
     return () => {
       disconnectConnectingWallets();
@@ -161,5 +168,6 @@ export function useWalletList(params: Params) {
     error,
     handleClick,
     disconnectConnectingWallets,
+    disconnectWallet,
   };
 }

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;
+};