diff --git a/src/components/CoinSelection/useCoinSelection.tsx b/src/components/CoinSelection/useCoinSelection.tsx index 38d0bc18a..3d9645be8 100644 --- a/src/components/CoinSelection/useCoinSelection.tsx +++ b/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); diff --git a/src/hooks/useSendForm.tsx b/src/hooks/useSendForm.tsx index a9e1a3b8a..3af7332cb 100644 --- a/src/hooks/useSendForm.tsx +++ b/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 ); diff --git a/src/utils/config.ts b/src/utils/config.ts index ff187f2c5..a3fc7b402 100644 --- a/src/utils/config.ts +++ b/src/utils/config.ts @@ -139,6 +139,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( diff --git a/src/utils/constants.ts b/src/utils/constants.ts index faa550dce..893adf9d8 100644 --- a/src/utils/constants.ts +++ b/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,