From ceae78e1a4cbca4960d8f0684757229ba294718f Mon Sep 17 00:00:00 2001 From: Matthew Wall Date: Mon, 21 Oct 2024 14:30:21 -0400 Subject: [PATCH] Fix apechain using mainnet gas prices (#6220) * fix gas price on ape and missing asset * wowie * add text and title and adjust copy --- src/components/coin-icon/ChainBadge.js | 12 ++++++++++-- src/components/gas/GasSpeedButton.tsx | 10 +++++++--- src/languages/en_US.json | 4 ++-- src/redux/gas.ts | 4 +++- src/screens/ExplainSheet.js | 15 +++++++++++++++ src/utils/ethereumUtils.ts | 3 +++ 6 files changed, 40 insertions(+), 8 deletions(-) diff --git a/src/components/coin-icon/ChainBadge.js b/src/components/coin-icon/ChainBadge.js index 5a4bd256b3b..7aa789def16 100644 --- a/src/components/coin-icon/ChainBadge.js +++ b/src/components/coin-icon/ChainBadge.js @@ -36,6 +36,10 @@ import DegenBadge from '../../assets/badges/degenBadge.png'; import DegenBadgeDark from '../../assets/badges/degenBadgeDark.png'; import DegenBadgeLarge from '../../assets/badges/degenBadgeLarge.png'; import DegenBadgeLargeDark from '../../assets/badges/degenBadgeLargeDark.png'; +import ApechainBadge from '../../assets/badges/apechainBadge.png'; +import ApechainBadgeDark from '../../assets/badges/apechainBadgeDark.png'; +import ApechainBadgeLarge from '../../assets/badges/apechainBadgeLarge.png'; +import ApechainBadgeLargeDark from '../../assets/badges/apechainBadgeLargeDark.png'; import { Centered } from '../layout'; import styled from '@/styled-thing'; import { position as positions } from '@/styles'; @@ -76,7 +80,9 @@ export default function ChainBadge({ const source = useMemo(() => { let val = null; if (size === 'large') { - if (chainId === ChainId.arbitrum) { + if (chainId === ChainId.apechain) { + val = isDarkMode ? ApechainBadgeLargeDark : ApechainBadgeLarge; + } else if (chainId === ChainId.arbitrum) { val = isDarkMode ? ArbitrumBadgeLargeDark : ArbitrumBadgeLarge; } else if (chainId === ChainId.optimism) { val = isDarkMode ? OptimismBadgeLargeDark : OptimismBadgeLarge; @@ -96,7 +102,9 @@ export default function ChainBadge({ val = isDarkMode ? DegenBadgeLargeDark : DegenBadgeLarge; } } else { - if (chainId === ChainId.arbitrum) { + if (chainId === ChainId.apechain) { + val = isDarkMode ? ApechainBadgeDark : ApechainBadge; + } else if (chainId === ChainId.arbitrum) { val = isDarkMode ? ArbitrumBadgeDark : ArbitrumBadge; } else if (chainId === ChainId.optimism) { val = isDarkMode ? OptimismBadgeDark : OptimismBadge; diff --git a/src/components/gas/GasSpeedButton.tsx b/src/components/gas/GasSpeedButton.tsx index 2b8669ef9c9..6157eed4389 100644 --- a/src/components/gas/GasSpeedButton.tsx +++ b/src/components/gas/GasSpeedButton.tsx @@ -328,11 +328,15 @@ const GasSpeedButton = ({ const estimatedTime = (selectedGasFee?.estimatedTime?.display || '').split(' '); const [estimatedTimeValue = '0', estimatedTimeUnit = 'min'] = estimatedTime; const time = parseFloat(estimatedTimeValue).toFixed(0); - - const timeSymbol = estimatedTimeUnit === 'hr' ? '>' : '~'; - if (!estimatedTime || (time === '0' && estimatedTimeUnit === 'min')) { + if (!estimatedTime) { return ''; } + + if (time === '0') { + return '< 1 sec'; + } + + const timeSymbol = estimatedTimeUnit === 'hr' ? '>' : '~'; return `${timeSymbol}${time} ${estimatedTimeUnit}`; }, [ crossChainServiceTime, diff --git a/src/languages/en_US.json b/src/languages/en_US.json index b0ff6ea08ed..58c9a75808f 100644 --- a/src/languages/en_US.json +++ b/src/languages/en_US.json @@ -933,7 +933,7 @@ }, "avalanche": { "text": "Avalanche is a sidechain, a distinct network that runs alongside Ethereum and is compatible with it.\n\nIt allows for cheaper and faster transactions, but unlike Layer 2 networks, Avalanche has its own security and consensus mechanisms that differ from Ethereum.", - "title": "What's Avalanche" + "title": "What's Avalanche?" }, "degen": { "text": "Degen Chain is a Layer 3 network that runs on top of Arbitrum Orbit and Ethereum.", @@ -944,7 +944,7 @@ "title": "What's Blast?" }, "apechain": { - "text": "ApeChain is a Layer 3 network that runs on top of Arbitrum Orbit and Ethereum. It significantly enhances ApeCoin's utility, fostering a robust and dynamic economy driven by $APE.", + "text": "ApeChain is a Layer 3 network that runs on top of Arbitrum Orbit and Ethereum.\n\nIt significantly enhances ApeCoin's utility, fostering a robust and dynamic economy driven by $APE.", "title": "What's ApeChain?" }, "zora": { diff --git a/src/redux/gas.ts b/src/redux/gas.ts index c5f8cd2fd1a..edc17677d2f 100644 --- a/src/redux/gas.ts +++ b/src/redux/gas.ts @@ -137,6 +137,9 @@ const getUpdatedGasFeeParams = ( case ChainId.degen: nativeTokenPriceUnit = ethereumUtils.getDegenPriceUnit(); break; + case ChainId.apechain: + nativeTokenPriceUnit = ethereumUtils.getApechainPriceUnit(); + break; default: nativeTokenPriceUnit = ethereumUtils.getEthPriceUnit(); break; @@ -341,7 +344,6 @@ export const gasPricesStartPolling = const meteorologySupportsChainId = meteorologySupportedChainIds.includes(chainId); if (!meteorologySupportsChainId) { const adjustedGasFees = await getProviderGasPrices({ chainId }); - if (!adjustedGasFees) return; const gasFeeParamsBySpeed = parseL2GasPrices(adjustedGasFees); diff --git a/src/screens/ExplainSheet.js b/src/screens/ExplainSheet.js index e4184cfa82c..939e8180b5c 100644 --- a/src/screens/ExplainSheet.js +++ b/src/screens/ExplainSheet.js @@ -121,6 +121,8 @@ const DEGEN_EXPLAINER = lang.t('explain.degen.text'); const BLAST_EXPLAINER = lang.t('explain.blast.text'); +const APECHAIN_EXPLAINER = lang.t('explain.apechain.text'); + const ZORA_EXPLAINER = lang.t('explain.zora.text'); const SWAP_RESET_EXPLAINER = `Rainbow doesn’t have the ability to swap across networks yet, but we’re on it. For now, Rainbow will match networks between selected tokens.`; @@ -494,6 +496,19 @@ export const explainers = (params, theme) => { text: BLAST_EXPLAINER, title: lang.t('explain.blast.title'), }, + apechain: { + emoji: '⛽️', + extraHeight: 144, + logo: , + readMoreLink: buildRainbowLearnUrl({ + url: 'https://learn.rainbow.me/layer-2-and-layer-3-networks', + query: { + campaign: 'explain', + }, + }), + text: APECHAIN_EXPLAINER, + title: lang.t('explain.apechain.title'), + }, failed_wc_connection: { emoji: '😵', extraHeight: -50, diff --git a/src/utils/ethereumUtils.ts b/src/utils/ethereumUtils.ts index 89549ce63f2..afd5df7702c 100644 --- a/src/utils/ethereumUtils.ts +++ b/src/utils/ethereumUtils.ts @@ -38,6 +38,7 @@ import { BNB_MAINNET_ADDRESS, AVAX_AVALANCHE_ADDRESS, DEGEN_CHAIN_DEGEN_ADDRESS, + APECOIN_APECHAIN_ADDRESS, } from '@/references'; import Routes from '@/navigation/routesNames'; import { logger, RainbowError } from '@/logger'; @@ -207,6 +208,7 @@ const getMaticPriceUnit = () => getAssetPrice(MATIC_MAINNET_ADDRESS); const getBnbPriceUnit = () => getAssetPrice(BNB_MAINNET_ADDRESS); const getAvaxPriceUnit = () => getAssetPrice(getUniqueId(AVAX_AVALANCHE_ADDRESS, ChainId.avalanche)); const getDegenPriceUnit = () => getAssetPrice(getUniqueId(DEGEN_CHAIN_DEGEN_ADDRESS, ChainId.degen)); +const getApechainPriceUnit = () => getAssetPrice(getUniqueId(APECOIN_APECHAIN_ADDRESS, ChainId.apechain)); const getBalanceAmount = ( selectedGasFee: SelectedGasFee | LegacySelectedGasFee, @@ -527,6 +529,7 @@ export default { getBnbPriceUnit, getAvaxPriceUnit, getDegenPriceUnit, + getApechainPriceUnit, getNativeAssetForNetwork, getNetworkNativeAsset, getPriceOfNativeAssetForNetwork,