diff --git a/src/components/icons/WalletLogo.tsx b/src/components/icons/WalletLogo.tsx
new file mode 100644
index 00000000..92be9a0c
--- /dev/null
+++ b/src/components/icons/WalletLogo.tsx
@@ -0,0 +1,23 @@
+import Image from 'next/image';
+
+import { WalletDetails } from '../../features/wallet/hooks/types';
+import Wallet from '../../images/icons/wallet.svg';
+
+export function WalletLogo({
+ walletDetails,
+ size,
+}: {
+ walletDetails: WalletDetails;
+ size?: number;
+}) {
+ return (
+
+ );
+}
diff --git a/src/features/transfer/TransfersDetailsModal.tsx b/src/features/transfer/TransfersDetailsModal.tsx
index 405dde48..597bb341 100644
--- a/src/features/transfer/TransfersDetailsModal.tsx
+++ b/src/features/transfer/TransfersDetailsModal.tsx
@@ -1,6 +1,7 @@
import Image from 'next/image';
import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ProtocolType } from '@hyperlane-xyz/utils';
import { MessageStatus, MessageTimeline, useMessageTimeline } from '@hyperlane-xyz/widgets';
import { Spinner } from '../../components/animation/Spinner';
@@ -22,7 +23,7 @@ import {
isTransferSent,
} from '../../utils/transfer';
import { getChainDisplayName, hasPermissionlessChain } from '../chains/utils';
-import { useAccountForChain } from '../wallet/hooks/multiProtocol';
+import { useAccountForChain, useWalletDetails } from '../wallet/hooks/multiProtocol';
import { TransferContext, TransferStatus } from './types';
@@ -53,6 +54,8 @@ export function TransfersDetailsModal({
} = transfer || {};
const account = useAccountForChain(origin);
+ const walletDetails = useWalletDetails()[account?.protocol || ProtocolType.Ethereum];
+
const multiProvider = getMultiProvider();
const getMessageUrls = useCallback(async () => {
@@ -80,7 +83,7 @@ export function TransfersDetailsModal({
}, [transfer, getMessageUrls]);
const isAccountReady = !!account?.isReady;
- const connectorName = account?.connectorName || 'wallet';
+ const connectorName = walletDetails.name || 'wallet';
const token = getWarpCore().findToken(origin, originTokenAddressOrDenom);
const isPermissionlessRoute = hasPermissionlessChain([destination, origin]);
diff --git a/src/features/wallet/SideBarMenu.tsx b/src/features/wallet/SideBarMenu.tsx
index 4422569f..25662e7b 100644
--- a/src/features/wallet/SideBarMenu.tsx
+++ b/src/features/wallet/SideBarMenu.tsx
@@ -4,8 +4,7 @@ import { toast } from 'react-toastify';
import { SmallSpinner } from '../../components/animation/SmallSpinner';
import { ChainLogo } from '../../components/icons/ChainLogo';
-import { Identicon } from '../../components/icons/Identicon';
-import { PLACEHOLDER_COSMOS_CHAIN } from '../../consts/values';
+import { WalletLogo } from '../../components/icons/WalletLogo';
import { tryFindToken } from '../../context/context';
import ArrowRightIcon from '../../images/icons/arrow-right.svg';
import CollapseIcon from '../../images/icons/collapse-icon.svg';
@@ -19,7 +18,7 @@ import { useStore } from '../store';
import { TransfersDetailsModal } from '../transfer/TransfersDetailsModal';
import { TransferContext } from '../transfer/types';
-import { useAccounts, useDisconnectFns } from './hooks/multiProtocol';
+import { useAccounts, useDisconnectFns, useWalletDetails } from './hooks/multiProtocol';
import { AccountInfo } from './hooks/types';
export function SideBarMenu({
@@ -88,12 +87,9 @@ export function SideBarMenu({
Connected Wallets
- {readyAccounts.map((acc, i) =>
- acc.addresses.map((addr, j) => {
- if (addr?.chainName?.includes(PLACEHOLDER_COSMOS_CHAIN)) return null;
- return
;
- }),
- )}
+ {readyAccounts.map((acc, i) => (
+
+ ))}