chore: follow up fix to #110

axelarnetwork · Sep 21, 2022 · a166e92 · a166e92 · vercel · Sep 21, 2022
1 parent 5103d0f
commit a166e92
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/components/modal/EvmAssetWarningModal.tsx b/components/modal/EvmAssetWarningModal.tsx
@@ -5,7 +5,7 @@ import cn from "classnames";
 
 import { tokenContractDocs } from "../../config/constants";
 import { useGetAssetBalance } from "../../hooks";
-import { getSelectedAssetSymbol, getSelectedAssetSymbolDestinationChain, useSwapStore } from "../../store";
+import { getSelectedAssetName, getSelectedAssetNameDestChain, getSelectedAssetSymbol, getSelectedAssetSymbolDestinationChain, isAXLToken, useSwapStore } from "../../store";
 import { copyToClipboard } from "../../utils";
 import { SwapStatus } from "../../utils/enums";
 import { AddressShortener } from "../common";
@@ -14,8 +14,11 @@ export const EvmAssetWarningModal = () => {
   const { asset, destChain, resetState, srcChain, swapStatus } = useSwapStore(
     (state) => state
   );
-  const selectedAssetSymbol = useSwapStore(getSelectedAssetSymbol);
+  const selectedAssetSymbolOnSrcChain = useSwapStore(getSelectedAssetSymbol);
   const selectedAssetSymbolOnDestinationChain = useSwapStore(getSelectedAssetSymbolDestinationChain);
+  const selectedAssetNameSrcChain = useSwapStore(getSelectedAssetName);
+  const selectedAssetNameOnDestinationChain = useSwapStore(getSelectedAssetNameDestChain);
+  const hasSelectedAXLToken = useSwapStore(isAXLToken);
 
   const { balance } = useGetAssetBalance();
   const { address } = useAccount();
@@ -60,7 +63,7 @@ export const EvmAssetWarningModal = () => {
           <div>
             <div>
               Only send{" "}
-              <span className="font-bold">{selectedAssetSymbol} </span>
+              <span className="font-bold">{selectedAssetNameSrcChain} {hasSelectedAXLToken ? `(${selectedAssetSymbolOnSrcChain})` : null} </span>
               to this deposit address on
               <strong className="capitalize"> {srcChain.chainName}</strong>
               <div>Any other tokens sent to this address will be lost.</div>
@@ -69,7 +72,7 @@ export const EvmAssetWarningModal = () => {
             <div className="py-2 text-center">
               <div className="mt-2">
                 <div className="font-light text-gray-300">
-                  {selectedAssetSymbol} token contract address |{" "}
+                  {selectedAssetNameSrcChain} {hasSelectedAXLToken ? `(${selectedAssetSymbolOnSrcChain})` : null} token contract address |{" "}
                   <strong className="capitalize">{srcChain.chainName}</strong>
                   <div className="flex items-center justify-center font-bold gap-x-2">
                     <AddressShortener value={tokenAddress} />
@@ -91,7 +94,7 @@ export const EvmAssetWarningModal = () => {
                   <div className="font-light text-gray-300">
                     Connected wallet balance |{" "}
                     <strong className="">
-                      {balance} {selectedAssetSymbol}
+                      {balance} {selectedAssetSymbolOnSrcChain}
                     </strong>
                     <div className="flex items-center justify-center font-bold gap-x-2">
                       <AddressShortener value={address} />
@@ -117,10 +120,10 @@ export const EvmAssetWarningModal = () => {
           <div className="mt-5">
             <span>
               The recipient will receive{" "}
-              <span className="font-bold">{selectedAssetSymbolOnDestinationChain}</span> on{" "}
+              <span className="font-bold">{selectedAssetNameOnDestinationChain} {hasSelectedAXLToken ? `(${selectedAssetSymbolOnDestinationChain})` : null}</span> on{" "}
               <span className="capitalize">{destChain.chainName}</span>. If your
               recipient doesn’t support{" "}
-              <span className="font-bold">{selectedAssetSymbolOnDestinationChain}</span>{" "}
+              <span className="font-bold">{selectedAssetNameOnDestinationChain}</span>{" "}
               <strong className="font-bold text-red-400">
                 the funds will be lost!
               </strong>

diff --git a/store/index.ts b/store/index.ts
@@ -90,6 +90,23 @@ export const getSelectedAssetName = memoize(
   }
 );
 
+export const isAXLToken = memoize(
+  (state: { asset: AssetConfig | null; srcChain: ChainInfo }) => {
+    return state?.asset?.common_key[ENVIRONMENT] === "uaxl";
+  }
+);
+
+export const getSelectedAssetNameDestChain = memoize(
+  (state: { asset: AssetConfig | null; destChain: ChainInfo }) => {
+    const chainName = state?.destChain?.chainName?.toLowerCase();
+    if (!chainName) return "";
+    const assetInfo = state?.asset?.chain_aliases[chainName];
+    if (!assetInfo) return "";
+
+    return assetInfo?.assetName || "";
+  }
+);
+
 export const getSelectedAssetSymbolDestinationChain = memoize(
   (state: { asset: AssetConfig | null; destChain: ChainInfo }) => {
     const chainName = state?.destChain?.chainName?.toLowerCase();