@rango-dev/widget-embedded 0.29.1-next.7 → 0.29.1-next.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.29.1-next.7",
+  "version": "0.29.1-next.8",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -53,4 +53,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/containers/Wallets/Wallets.tsx

@@ -37,7 +37,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const config = useAppStore().config;
 
   const walletOptions: ProvidersOptions = {
-    walletConnectProjectId: props.config?.walletConnectProjectId,
+    walletConnectProjectId: config?.walletConnectProjectId,
     walletConnectListedDesktopWalletLink:
       props.config.__UNSTABLE_OR_INTERNAL__
         ?.walletConnectListedDesktopWalletLink,

package/src/hooks/useWalletList.ts

@@ -13,6 +13,7 @@ import { useCallback, useEffect, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useWalletsStore } from '../store/wallets';
+import { isSingleWalletActive } from '../utils/common';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
   hashWalletsState,
@@ -82,10 +83,7 @@ export function useWalletList(params: Params) {
       if (wallet.connected) {
         await disconnect(type);
       } else {
-        const atLeastOneWalletIsConnected = !!wallets.find(
-          (w) => w.state === WalletState.CONNECTED
-        );
-        if (config?.multiWallets === false && atLeastOneWalletIsConnected) {
+        if (isSingleWalletActive(wallets, config.multiWallets)) {
           return;
         }
         onBeforeConnect?.(type);

package/src/pages/WalletsPage.tsx

@@ -1,3 +1,4 @@
+import type { WalletInfoWithNamespaces } from '../types';
 import type { Namespace, WalletType } from '@rango-dev/wallets-shared';
 
 import { i18n } from '@lingui/core';
@@ -18,7 +19,7 @@ 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';
+import { getContainer, isSingleWalletActive } from '../utils/common';
 import {
   filterBlockchainsByWalletTypes,
   filterWalletsByCategory,
@@ -51,6 +52,7 @@ export function WalletsPage() {
   const { fetchStatus: fetchMetaStatus } = useAppStore();
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const blockchains = useAppStore().blockchains();
+  const { config } = useAppStore();
 
   const [openModal, setOpenModal] = useState(false);
   const [namespacesModalState, setNamespacesModalState] =
@@ -95,6 +97,25 @@ export function WalletsPage() {
 
   const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
 
+  const handleWalletClick = (
+    type: string,
+    wallet: WalletInfoWithNamespaces
+  ) => {
+    if (!!wallet.namespaces && wallet.state === WalletState.DISCONNECTED) {
+      if (isSingleWalletActive(list, config.multiWallets)) {
+        return;
+      }
+      setNamespacesModalState({
+        providerType: type,
+        providerImage: wallet.image,
+        availableNamespaces: wallet.namespaces,
+        singleNamespace: wallet.singleNamespace,
+      });
+    } else {
+      void handleClick(type);
+    }
+  };
+
   return (
     <Layout
       header={{
@@ -123,21 +144,7 @@ export function WalletsPage() {
                 key={key}
                 {...wallet}
                 container={getContainer()}
-                onClick={(type) => {
-                  if (
-                    !!wallet.namespaces &&
-                    wallet.state === WalletState.DISCONNECTED
-                  ) {
-                    setNamespacesModalState({
-                      providerType: type,
-                      providerImage: wallet.image,
-                      availableNamespaces: wallet.namespaces,
-                      singleNamespace: wallet.singleNamespace,
-                    });
-                  } else {
-                    void handleClick(type);
-                  }
-                }}
+                onClick={(type) => handleWalletClick(type, wallet)}
                 isLoading={fetchMetaStatus === 'loading'}
                 disabled={!isActiveTab}
               />

package/src/utils/common.ts

@@ -1,6 +1,7 @@
+import type { WalletInfoWithNamespaces } from '../types';
 import type { Token } from 'rango-sdk';
 
-import { BlockchainCategories } from '@rango-dev/ui';
+import { BlockchainCategories, WalletState } from '@rango-dev/ui';
 import { TransactionType } from 'rango-sdk';
 
 import { WIDGET_UI_ID } from '../constants';
@@ -247,3 +248,13 @@ export const getFontUrlByName = (fontName: string) => {
   const font = SUPPORTED_FONTS.find((font) => font.value === fontName);
   return font?.url;
 };
+
+export function isSingleWalletActive(
+  wallets: WalletInfoWithNamespaces[],
+  multiWallets?: boolean
+) {
+  const atLeastOneWalletIsConnected = !!wallets.find(
+    (w) => w.state === WalletState.CONNECTED
+  );
+  return multiWallets === false && atLeastOneWalletIsConnected;
+}