Display UM fallback if not in registry (#1737)

apps/minifront/src/components/ibc/ibc-in/asset-utils.tsx

@@ -3,6 +3,8 @@ import { Coin } from 'osmo-query';
 import { Asset } from '@chain-registry/types';
 import { BigNumber } from 'bignumber.js';
 import { AssetDenomUnit } from '@chain-registry/types/assets';
+import { CosmosAssetBalance } from './hooks.ts';
+import { ChainRegistryClient } from '@penumbra-labs/registry';
 
 // Searches for corresponding denom in asset registry and returns the metadata
 export const augmentToAsset = (denom: string, chainName: string): Asset => {
@@ -57,3 +59,19 @@ export const fromDisplayAmount = (
 const getExponent = (denomUnits: AssetDenomUnit[], denom: string): number | undefined => {
   return denomUnits.find(unit => unit.denom === denom)?.exponent;
 };
+
+export const getIconWithUmFallback = (b: CosmosAssetBalance) => {
+  if (b.icon) {
+    return b.icon;
+  }
+  // If we've identified UM, but it's got to this line,
+  // that means there is not an entry for UM in the counterparty chain's asset registry.
+  // To help users identify the ibc asset, this manually grabs the UM asset icon.
+  if (b.isPenumbra) {
+    const client = new ChainRegistryClient().bundled;
+    const umAssetId = client.globals().stakingAssetId;
+    const umMetadata = client.get('penumbra-1').getMetadata(umAssetId);
+    return umMetadata.images[0]?.svg;
+  }
+  return undefined;
+};

apps/minifront/src/components/ibc/ibc-in/assets-table.tsx

@@ -12,6 +12,7 @@ import {
 import { Avatar, AvatarImage } from '@penumbra-zone/ui/components/ui/avatar';
 import { Identicon } from '@penumbra-zone/ui/components/ui/identicon';
 import { LineWave } from 'react-loader-spinner';
+import { getIconWithUmFallback } from './asset-utils.tsx';
 
 export const AssetsTable = () => {
   const { address } = useChainConnector();
@@ -55,7 +56,7 @@ export const AssetsTable = () => {
               <TableRow key={b.displayDenom}>
                 <TableCell className='flex gap-2'>
                   <Avatar className='size-6'>
-                    <AvatarImage src={b.icon} />
+                    <AvatarImage src={getIconWithUmFallback(b)} />
                     <Identicon uniqueIdentifier={b.displayDenom} type='gradient' size={22} />
                   </Avatar>
                   <span className='max-w-[200px] truncate'>{b.displayDenom}</span>

apps/minifront/src/components/ibc/ibc-in/ibc-in-request.tsx

@@ -14,6 +14,7 @@ import { DestinationAddr } from './destination-addr';
 import { Button } from '@penumbra-zone/ui/components/ui/button';
 import { LockClosedIcon } from '@radix-ui/react-icons';
 import { NumberInput } from '../../shared/number-input';
+import { getIconWithUmFallback } from './asset-utils.tsx';
 
 const isReadySelector = (state: AllSlices) => {
   const { amount, coin, selectedChain } = state.ibcIn;
@@ -55,7 +56,7 @@ export const IbcInRequest = () => {
                 <SelectItem value={b.displayDenom} key={b.displayDenom} className='p-2'>
                   <div className='flex gap-2 text-stone-700'>
                     <Avatar className='size-6'>
-                      <AvatarImage src={b.icon} />
+                      <AvatarImage src={getIconWithUmFallback(b)} />
                       <Identicon uniqueIdentifier={b.displayDenom} type='gradient' size={22} />
                     </Avatar>
                     <span className=''>{b.displayDenom}</span>