Merge pull request #71 from skip-mev/asset-naming-conventions

Asset naming conventions

src/assets/filters.ts

@@ -0,0 +1,8 @@
+import { AssetWithMetadata } from "@/context/assets";
+
+export function filterSifAssets(asset: AssetWithMetadata) {
+  if (asset.originChainID === "sifchain-1" && asset.originDenom !== "rowan") {
+    return false;
+  }
+  return true;
+}

src/components/AssetSelect/AssetSelectContent.tsx

@@ -4,6 +4,7 @@ import { ethers, toBigInt } from "ethers";
 import { FC, useEffect, useRef, useState } from "react";
 import { useWindowSize } from "usehooks-ts";
 
+import { filterSifAssets } from "@/assets/filters";
 import { AssetWithMetadata } from "@/context/assets";
 
 interface Props {
@@ -45,6 +46,7 @@ const AssetSelectContent: FC<Props> = ({
 
       return 0;
     })
+    .filter(filterSifAssets)
     .sort((a, b) => {
       const balanceA = balances[a.denom] ? toBigInt(balances[a.denom]) : 0n;
       const balanceB = balances[b.denom] ? toBigInt(balances[b.denom]) : 0n;

src/context/assets.tsx

@@ -31,22 +31,95 @@ export const AssetsContext = createContext<AssetsContext>({
   getNativeAssets: () => [],
 });
 
+function getAssetSymbolSuffix(originDenom: string, originChainName: string) {
+  switch (originChainName) {
+    case "Axelar":
+      if (originDenom.includes("polygon-")) {
+        return ".axl (Polygon)";
+      }
+
+      if (originDenom.includes("avalanche-")) {
+        return ".axl (Avalanche)";
+      }
+
+      return ".axl";
+    case "Sifchain":
+      return ".sif";
+    case "Gravity Bridge":
+      return ".grv";
+    case "Noble":
+      return "";
+    default:
+      return ` ${originChainName}`;
+  }
+}
+
 function getAssetSymbol(
   asset: AssetWithMetadata,
   assets: Asset[],
   chains: Chain[],
 ) {
+  if (asset.originChainID === "axelar-dojo-1") {
+    if (asset.originDenom === "uaxl") {
+      return asset.symbol ?? asset.denom;
+    }
+
+    const originChain = chains.find((c) => c.chainID === asset.originChainID);
+    const originChainName = originChain?.prettyName ?? asset.originChainID;
+
+    return `${asset.symbol?.replace("axl", "")}${getAssetSymbolSuffix(
+      asset.originDenom,
+      originChainName,
+    )}`;
+  }
+
+  if (asset.originChainID === "gravity-bridge-3") {
+    if (asset.originDenom === "ugraviton") {
+      return asset.symbol ?? asset.denom;
+    }
+
+    const originChain = chains.find((c) => c.chainID === asset.originChainID);
+    const originChainName = originChain?.prettyName ?? asset.originChainID;
+
+    return `${asset.symbol}${getAssetSymbolSuffix(
+      asset.originDenom,
+      originChainName,
+    )}`;
+  }
+
+  if (asset.originChainID === "sifchain-1") {
+    const originChain = chains.find((c) => c.chainID === asset.originChainID);
+    const originChainName = originChain?.prettyName ?? asset.originChainID;
+
+    if (asset.originDenom === "rowan") {
+      return asset.symbol ?? asset.denom;
+    }
+
+    return `${asset.symbol}${getAssetSymbolSuffix(
+      asset.originDenom,
+      originChainName,
+    )}`;
+  }
+
+  // this just handles a weird EVM token edge case
+  if (asset.symbol?.startsWith("axl")) {
+    return `${asset.symbol.replace("axl", "")}.axl`;
+  }
+
   const hasDuplicates =
     (assets?.filter((a) => a.symbol === asset.symbol).length ?? 0) > 1;
 
   if (hasDuplicates) {
     const originChain = chains.find((c) => c.chainID === asset.originChainID);
     const originChainName = originChain?.prettyName ?? asset.originChainID;
 
-    return `${originChainName} ${asset.symbol}`;
+    return `${asset.symbol}${getAssetSymbolSuffix(
+      asset.originDenom,
+      originChainName,
+    )}`;
   }
 
-  return asset.symbol;
+  return asset.symbol ?? asset.denom;
 }
 
 export const AssetsProvider: FC<PropsWithChildren> = ({ children }) => {