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

@@ -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;

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,

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": {

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);

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: <ChainBadge chainId={ChainId.apechain} marginBottom={8} position="relative" size="large" />,
+      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,

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,