fix confusing EURC icons

pendulum-chain · Jul 23, 2024 · 5f5f58d · 5f5f58d
1 parent c1820e4
commit 5f5f58d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 39 deletions.
diff --git a/src/components/nabla/Swap/From.tsx b/src/components/nabla/Swap/From.tsx
@@ -55,7 +55,7 @@ export function From<FormFieldValues extends FieldValues, TFieldName extends Fie
           type="button"
         >
           <span className="rounded-full bg-[rgba(0,0,0,0.15)] h-full p-px mr-1">
-            <img src={getIcon(fromToken?.symbol, pendulumIcon)} alt="Pendulum" className="h-full w-auto" />
+            <img src={getIcon(fromToken?.symbol)} alt={fromToken?.name} className="h-full w-auto" />
           </span>
           <strong className="font-bold">{fromToken?.symbol || 'Select'}</strong>
           <ChevronDownIcon className="w-4 h-4 inline ml-px" />

diff --git a/src/components/nabla/Swap/To.tsx b/src/components/nabla/Swap/To.tsx
@@ -75,7 +75,7 @@ export function To({
           type="button"
         >
           <span className="rounded-full bg-[rgba(0,0,0,0.15)] h-full p-px mr-1">
-            <img src={getIcon(toToken?.symbol, pendulumIcon)} alt="Pendulum" className="h-full w-auto" />
+            <img src={getIcon(toToken?.symbol)} alt={toToken?.name} className="h-full w-auto" />
           </span>
           <strong className="font-bold">{toToken?.symbol || 'Select'}</strong>
           <ChevronDownIcon className="w-4 h-4 inline ml-px" />

diff --git a/src/components/nabla/common/PoolSelectorModal.tsx b/src/components/nabla/common/PoolSelectorModal.tsx
@@ -83,7 +83,7 @@ function PoolList({ swapPools, backstopPool, onSelect, selected }: PoolListProps
                 <Avatar
                   size={'xs' as AvatarProps['size']}
                   letters={pool.token.symbol}
-                  src={getIcon(pool.token.symbol, pendulumIcon)}
+                  src={getIcon(pool.token.symbol)}
                   shape="circle"
                   className="text-xs"
                 />

diff --git a/src/pages/dashboard/PortfolioColumns.tsx b/src/pages/dashboard/PortfolioColumns.tsx
@@ -1,6 +1,6 @@
 import { ColumnDef } from '@tanstack/table-core';
-import { getIcon } from '../../shared/AssetIcons';
 import { Asset } from 'stellar-sdk';
+import { getIcon } from '../../shared/AssetIcons';
 
 export interface PortfolioAsset {
   // token is the symbol of the asset
@@ -16,26 +16,22 @@ export const tokenColumn: ColumnDef<PortfolioAsset> = {
   header: 'Token',
   accessorKey: 'token',
   enableMultiSort: true,
-  cell: ({ row }) => {
-    return (
-      <div className="flex flex-row">
-        <img
-          src={
-            row.original.asset
-              ? getIcon(row.original.asset.code, row.original.asset.issuer)
-              : getIcon(row.original.token)
-          }
-          className="mr-2"
-          style={{
-            objectFit: 'cover',
-            width: '32px',
-            height: '32px',
-          }}
-        />
-        <div className="leading-8"> {row.original.token} </div>
-      </div>
-    );
-  },
+  cell: ({ row }) => (
+    <div className="flex flex-row">
+      <img
+        src={
+          row.original.asset ? getIcon(row.original.asset.code, row.original.asset.issuer) : getIcon(row.original.token)
+        }
+        className="mr-2"
+        style={{
+          objectFit: 'cover',
+          width: '32px',
+          height: '32px',
+        }}
+      />
+      <div className="leading-8"> {row.original.token} </div>
+    </div>
+  ),
 };
 
 export const priceColumn: ColumnDef<PortfolioAsset> = {

diff --git a/src/shared/AssetIcons.tsx b/src/shared/AssetIcons.tsx
@@ -37,35 +37,34 @@ const polkadotAssets = [
   { code: 'GLMR', icon: GLMR },
 ];
 
-const handleSpecialAsset = (assetCode: string, assetIssuer: string) => {
+const assets = [...stellarAssets, ...polkadotAssets];
+
+const handleSpecialAsset = (assetCode: string, assetIssuer?: string) => {
   // The EURC tokens are handled separately because they can be issued by multiple issuers
   if (assetCode.includes('EURC')) {
-    return assetIssuer === MYKOBO_ISSUER ? mEURC : cEURC;
+    if (assetIssuer === MYKOBO_ISSUER) {
+      return mEURC;
+    }
+    return cEURC;
   }
 };
 
-const getAssetIcon = (assetCode: string, assetIssuer: string, assets: { code: string; icon: string }[]) => {
+const getAssetIcon = (assetCode: string, assetIssuer?: string) => {
   const specialAsset = handleSpecialAsset(assetCode, assetIssuer);
-  if (specialAsset) return specialAsset;
+
+  if (specialAsset) {
+    return specialAsset;
+  }
 
   const asset = assets.find((asset) => assetCode.includes(asset.code));
 
   return asset?.icon || undefined;
 };
 
-const getStellarAssetIcon = (assetCode: string, assetIssuer?: string) => {
-  return getAssetIcon(assetCode, assetIssuer || '', stellarAssets);
-};
-
-const getPolkadotAssetIcon = (assetCode: string) => {
-  return getAssetIcon(assetCode, '', polkadotAssets);
-};
-
 export function getIcon(token: string | undefined, issuer?: string, defaultIcon = DefaultIcon) {
   if (!token) return defaultIcon;
 
-  const polkadotIcon = getPolkadotAssetIcon(token);
-  const stellarIcon = getStellarAssetIcon(token, issuer);
+  const icon = getAssetIcon(token, issuer);
 
-  return polkadotIcon || stellarIcon || defaultIcon;
+  return icon || defaultIcon;
 }