fix: fix mapping id to blockchain logo

Author: yeager-eren

wallets/core/src/legacy/types.ts

@@ -85,6 +85,10 @@ interface NeedsNamespace {
   selection: 'single' | 'multiple';
   data: {
     label: string;
+    /**
+     * By using a matched `blockchain.name` (in meta) and `id`, we show logo in Namespace modal
+     * e.g. ETH
+     */
     id: string;
     value: Namespace;
   }[];

wallets/provider-ledger/src/index.ts

@@ -135,12 +135,12 @@ export const getWalletInfo: (allBlockChains: BlockchainMeta[]) => WalletInfo = (
         {
           label: 'EVM',
           value: 'EVM',
-          id: 'Ethereum',
+          id: 'ETH',
         },
         {
           label: 'Solana',
           value: 'Solana',
-          id: 'Solana',
+          id: 'SOLANA',
         },
       ],
     },

wallets/provider-phantom/src/legacy/index.ts

@@ -109,17 +109,17 @@ export const getWalletInfo: (allBlockChains: BlockchainMeta[]) => WalletInfo = (
     ],
 
     needsNamespace: {
-      selection: 'single',
+      selection: 'multiple',
       data: [
         {
           label: 'EVM',
           value: 'EVM',
-          id: 'Ethereum',
+          id: 'ETH',
         },
         {
           label: 'Solana',
           value: 'Solana',
-          id: 'Solana',
+          id: 'SOLANA',
         },
       ],
     },

wallets/provider-trezor/src/index.ts

@@ -102,7 +102,7 @@ export const getWalletInfo: (allBlockChains: BlockchainMeta[]) => WalletInfo = (
       selection: 'single',
       data: [
         {
-          id: 'EVM',
+          id: 'ETH',
           value: 'EVM',
           label: 'Ethereum',
         },

wallets/react/src/hub/useHubAdapter.ts

@@ -270,18 +270,23 @@ export function useHubAdapter(params: UseAdapterParams): ProviderContext {
         }
       });
 
+      const walletInfoFromLegacy = provider.getWalletInfo(
+        params.allBlockChains || []
+      );
+
       return {
         name: info.name,
         img: info.icon,
         installLink: installLink,
         // We don't have this values anymore, fill them with some values that communicate this.
         color: 'red',
-        supportedChains: provider.getWalletInfo(params.allBlockChains || [])
-          .supportedChains,
+        supportedChains: walletInfoFromLegacy.supportedChains,
         isContractWallet: false,
         mobileWallet: false,
         // if set to false here, it will not show the wallet in mobile in anyways. to be compatible with old behavior, undefined is more appropirate.
         showOnMobile: undefined,
+        needsNamespace: walletInfoFromLegacy.needsNamespace,
+        needsDerivationPath: walletInfoFromLegacy.needsDerivationPath,
 
         isHub: true,
         properties: wallet.info()?.properties,

widget/embedded/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -12,8 +12,7 @@ import {
   Radio,
   RadioRoot,
 } from '@rango-dev/ui';
-import { namespaces } from '@rango-dev/wallets-shared';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
@@ -23,25 +22,14 @@ import { getBlockchainLogo } from './Namespaces.helpers';
 import { NamespaceList } from './Namespaces.styles';
 
 export function Namespaces(props: PropTypes) {
-  const { singleNamespace, availableNamespaces, providerImage } = props.value;
+  const { targetWallet } = props.value;
+  const singleNamespace = targetWallet.needsNamespace?.selection === 'single';
+  const providerImage = targetWallet.image;
 
   const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
 
   const blockchains = useAppStore().blockchains();
 
-  const namespacesInfo = useMemo(
-    () =>
-      availableNamespaces?.map((namespace) => ({
-        name: namespace,
-        logo: getBlockchainLogo(
-          blockchains,
-          namespaces[namespace].mainBlockchain
-        ),
-        title: namespaces[namespace].title,
-      })),
-    [availableNamespaces]
-  );
-
   const onSelect = (namespace: Namespace) => {
     if (singleNamespace) {
       setSelectedNamespaces([namespace]);
@@ -83,28 +71,33 @@ export function Namespaces(props: PropTypes) {
       <NamespaceList>
         {wrapRadioRoot(
           <>
-            {namespacesInfo?.map((namespaceInfoItem) => (
-              <ListItemButton
-                key={namespaceInfoItem.name}
-                id={namespaceInfoItem.name}
-                title={namespaceInfoItem.title}
-                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
-                      )}
+            {targetWallet.needsNamespace?.data.map((ns) => {
+              return (
+                <ListItemButton
+                  key={ns.id}
+                  id={ns.id}
+                  title={ns.label}
+                  hasDivider
+                  style={{ height: 60 }}
+                  onClick={() => onSelect(ns.value)}
+                  start={
+                    <Image
+                      src={getBlockchainLogo(blockchains, ns.id)}
+                      size={22}
                     />
-                  )
-                }
-              />
-            ))}
+                  }
+                  end={
+                    singleNamespace ? (
+                      <Radio value={ns.value} />
+                    ) : (
+                      <Checkbox
+                        checked={selectedNamespaces.includes(ns.value)}
+                      />
+                    )
+                  }
+                />
+              );
+            })}
           </>
         )}
       </NamespaceList>

widget/embedded/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -97,15 +97,10 @@ export function useStatefulConnect(): UseStatefulConnect {
           detachedInstances && wallet.state !== 'connected';
 
         if (needsNamespace) {
-          const availableNamespaces = detachedInstances.value;
-
           dispatch({
             type: 'needsNamespace',
             payload: {
-              providerType: wallet.type,
-              providerImage: wallet.image,
-              availableNamespaces,
-              singleNamespace: false,
+              targetWallet: wallet,
             },
           });
           return { status: ResultStatus.Namespace };
@@ -131,12 +126,7 @@ export function useStatefulConnect(): UseStatefulConnect {
         dispatch({
           type: 'needsNamespace',
           payload: {
-            providerType: wallet.type,
-            providerImage: wallet.image,
-            availableNamespaces: wallet.needsNamespace.data.map(
-              (ns) => ns.value
-            ),
-            singleNamespace: wallet.needsNamespace.selection === 'single',
+            targetWallet: wallet,
           },
         });
         return { status: ResultStatus.Namespace };
@@ -215,7 +205,7 @@ export function useStatefulConnect(): UseStatefulConnect {
       );
     }
 
-    const type = connectState.namespace.providerType;
+    const type = connectState.namespace.targetWallet.type;
     const namespaces = selectedNamespaces.map((namespace) => ({
       namespace,
     }));

widget/embedded/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -1,3 +1,4 @@
+import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 
 export interface HandleConnectOptions {
@@ -6,10 +7,7 @@ export interface HandleConnectOptions {
 }
 
 export interface NeedsNamespacesState {
-  providerType: string;
-  providerImage: string;
-  availableNamespaces?: Namespace[];
-  singleNamespace?: boolean;
+  targetWallet: ExtendedModalWalletInfo;
 }
 
 export interface NeedsDerivationPathState {