From a45da11aa8a2e521472697d8f126fdb3eec01b84 Mon Sep 17 00:00:00 2001 From: Eren Yeager Date: Mon, 16 Dec 2024 02:49:19 +0000 Subject: [PATCH] fix: fix mapping id to blockchain logo --- wallets/core/src/legacy/types.ts | 4 ++ wallets/provider-ledger/src/index.ts | 4 +- wallets/provider-phantom/src/legacy/index.ts | 6 +- wallets/provider-trezor/src/index.ts | 2 +- wallets/react/src/hub/useHubAdapter.ts | 9 ++- .../WalletStatefulConnect/Namespaces.tsx | 67 +++++++++---------- .../useStatefulConnect/useStatefulConnect.ts | 16 +---- .../useStatefulConnect.types.ts | 6 +- 8 files changed, 52 insertions(+), 62 deletions(-) diff --git a/wallets/core/src/legacy/types.ts b/wallets/core/src/legacy/types.ts index 441ee160d..f1865163a 100644 --- a/wallets/core/src/legacy/types.ts +++ b/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; }[]; diff --git a/wallets/provider-ledger/src/index.ts b/wallets/provider-ledger/src/index.ts index 5f2d61e6b..6f099e4b1 100644 --- a/wallets/provider-ledger/src/index.ts +++ b/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', }, ], }, diff --git a/wallets/provider-phantom/src/legacy/index.ts b/wallets/provider-phantom/src/legacy/index.ts index 8e989854e..527ec60c2 100644 --- a/wallets/provider-phantom/src/legacy/index.ts +++ b/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', }, ], }, diff --git a/wallets/provider-trezor/src/index.ts b/wallets/provider-trezor/src/index.ts index cca5bd5bc..f68ea3465 100644 --- a/wallets/provider-trezor/src/index.ts +++ b/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', }, diff --git a/wallets/react/src/hub/useHubAdapter.ts b/wallets/react/src/hub/useHubAdapter.ts index b6cc5cba5..33c6df2fb 100644 --- a/wallets/react/src/hub/useHubAdapter.ts +++ b/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, diff --git a/widget/embedded/src/components/WalletStatefulConnect/Namespaces.tsx b/widget/embedded/src/components/WalletStatefulConnect/Namespaces.tsx index 9f41ecfdd..4d9193a06 100644 --- a/widget/embedded/src/components/WalletStatefulConnect/Namespaces.tsx +++ b/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([]); 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) { {wrapRadioRoot( <> - {namespacesInfo?.map((namespaceInfoItem) => ( - onSelect(namespaceInfoItem.name)} - start={} - end={ - singleNamespace ? ( - - ) : ( - { + return ( + onSelect(ns.value)} + start={ + - ) - } - /> - ))} + } + end={ + singleNamespace ? ( + + ) : ( + + ) + } + /> + ); + })} )} diff --git a/widget/embedded/src/hooks/useStatefulConnect/useStatefulConnect.ts b/widget/embedded/src/hooks/useStatefulConnect/useStatefulConnect.ts index 6f56c0973..0738912f4 100644 --- a/widget/embedded/src/hooks/useStatefulConnect/useStatefulConnect.ts +++ b/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, })); diff --git a/widget/embedded/src/hooks/useStatefulConnect/useStatefulConnect.types.ts b/widget/embedded/src/hooks/useStatefulConnect/useStatefulConnect.types.ts index 16a9719f3..15febca04 100644 --- a/widget/embedded/src/hooks/useStatefulConnect/useStatefulConnect.types.ts +++ b/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 {