improve: allow canonical linking in deep-link (#336)

* feat: ✨ crate a mapping of string to numeric chain id

* feat: ✨ add fns to resolve canonical name

* improve: enable canonical name linking in from/to

* fix: remove typecast

* improve: hoist undefined logic into calling fn

* improve: add conditional

* improve: add doc comment

src/components/CoinSelection/useCoinSelection.tsx

@@ -80,7 +80,7 @@ export default function useCoinSelection() {
       try {
         // Check if Token exists and amount is convertable to Wei
         config.getTokenInfoBySymbol(
-          Number(params.from),
+          config.resolveChainIdFromNumericOrCanonical(params.from),
           params.asset.toUpperCase()
         );
         toWeiSafe(params.amount);

src/hooks/useSendForm.tsx

@@ -374,8 +374,9 @@ function useSendFormManager(): SendFormManagerContext {
     Because we need the asset's decimal value, you need to define **both** asset and amount for the optional params.
    */
   useEffect(() => {
-    const fromChain = Number(params.from);
-    const toChain = Number(params.to);
+    const [fromChain, toChain] = [params.from, params.to].map(
+      config.resolveChainIdFromNumericOrCanonical
+    );
     const areSupportedChains = [fromChain, toChain].every(
       config.isSupportedChainId
     );

src/utils/config.ts

@@ -141,6 +141,29 @@ export class ConfigClient {
       constants.isSupportedChainId(chainId) && this.spokeChains.has(chainId)
     );
   };
+  getSupportedCanonicalNameAsChainId = (canonicalName?: string) => {
+    // Returns undefined if the canonicalName is not defined
+    if (!canonicalName) return;
+    // Transform the canonical name to match ChainId key
+    const modifiedCanonicalName = canonicalName.toLowerCase();
+    // Attempt to resolve the chainId and return
+    const resolvedChain = constants.CanonicalChainName[modifiedCanonicalName];
+    return resolvedChain && this.isSupportedChainId(resolvedChain)
+      ? resolvedChain
+      : undefined;
+  };
+  /**
+   * This function converts either a chainId or canonical name into a corresponding chainId.
+   * @param chainIdOrCanonical Either a numeric string, an enumerated canonical name, undefined, or an invalid value.
+   * @returns The chain ID in the valid case. NaN in the invalid case.
+   */
+  resolveChainIdFromNumericOrCanonical = (chainIdOrCanonical?: string) => {
+    const asNumeric = Number(chainIdOrCanonical);
+    return Number.isNaN(asNumeric)
+      ? this.getSupportedCanonicalNameAsChainId(chainIdOrCanonical) ??
+          Number(chainIdOrCanonical)
+      : asNumeric;
+  };
   // returns token list in order specified by constants, but adds in token address for the chain specified
   getTokenList(chainId?: number): TokenList {
     const routeTable = Object.fromEntries(

src/utils/constants.ts

@@ -31,6 +31,15 @@ export enum ChainId {
   // Polygon testnet
   MUMBAI = 80001,
 }
+
+// Maps `ChainId` to an object and inverts the Key/Value
+// pair. Ex) { "mainnet": 1 }
+export const CanonicalChainName = Object.fromEntries(
+  Object.entries(ChainId)
+    .filter((v) => Number.isNaN(Number(v[0])))
+    .map((v) => [v[0].toLowerCase(), Number(v[1])])
+);
+
 /* Colors and Media Queries section */
 export const BREAKPOINTS = {
   tabletMin: 550,