From c8146665c2012a730e641c64197af0b758293df4 Mon Sep 17 00:00:00 2001
From: Gabe Rodriguez <grod220@gmail.com>
Date: Thu, 29 Aug 2024 08:21:46 +0200
Subject: [PATCH] Display UM fallback if not in registry (#1737)

---
 .../src/components/ibc/ibc-in/asset-utils.tsx  | 18 ++++++++++++++++++
 .../src/components/ibc/ibc-in/assets-table.tsx |  3 ++-
 .../components/ibc/ibc-in/ibc-in-request.tsx   |  3 ++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/apps/minifront/src/components/ibc/ibc-in/asset-utils.tsx b/apps/minifront/src/components/ibc/ibc-in/asset-utils.tsx
index 6f7fd098a8..55ca574410 100644
--- a/apps/minifront/src/components/ibc/ibc-in/asset-utils.tsx
+++ b/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;
+};
diff --git a/apps/minifront/src/components/ibc/ibc-in/assets-table.tsx b/apps/minifront/src/components/ibc/ibc-in/assets-table.tsx
index 45719e3620..ac6392df9d 100644
--- a/apps/minifront/src/components/ibc/ibc-in/assets-table.tsx
+++ b/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>
diff --git a/apps/minifront/src/components/ibc/ibc-in/ibc-in-request.tsx b/apps/minifront/src/components/ibc/ibc-in/ibc-in-request.tsx
index e8ecddc9cf..c81829770b 100644
--- a/apps/minifront/src/components/ibc/ibc-in/ibc-in-request.tsx
+++ b/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>