Merge pull request #1188 from gabrielbazan7/fix/chain-expansion

[FIX] filter label on chain selector for new chains
bitpay · Jun 6, 2024 · 453fe25 · 453fe25
2 parents 679d5da + 2e6e308
commit 453fe25
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/src/components/chain-search/ChainSearch.tsx b/src/components/chain-search/ChainSearch.tsx
@@ -23,11 +23,8 @@ import ChainSelectorModal, {
   ignoreGlobalListContextList,
 } from '../../components/modal/chain-selector/ChainSelector';
 import {CurrencyImage} from '../currency-image/CurrencyImage';
-import {
-  SupportedCoinsOptions,
-  SupportedCurrencyOption,
-} from '../../constants/SupportedCurrencyOptions';
 import {View} from 'react-native';
+import {BitpaySupportedCoins, CurrencyOpts} from '../../constants/currencies';
 
 export const SearchIconContainer = styled.View`
   margin: 14px;
@@ -104,9 +101,7 @@ const SearchComponent = <T extends SearchableItem>({
   const dispatch = useAppDispatch();
   const {t} = useTranslation();
   const theme = useTheme();
-  const [currencyInfo, setCurrencyInfo] = useState<
-    SupportedCurrencyOption | undefined
-  >();
+  const [currencyInfo, setCurrencyInfo] = useState<CurrencyOpts | undefined>();
 
   const selectedChainFilterOption = useAppSelector(({APP}) =>
     ignoreGlobalListContextList.includes(context)
@@ -205,11 +200,11 @@ const SearchComponent = <T extends SearchableItem>({
   );
 
   const updateSelectedChainInfo = () => {
-    if (selectedChainFilterOption) {
-      const currencyInfo = SupportedCoinsOptions.find(
-        ({currencyAbbreviation}) =>
-          currencyAbbreviation === selectedChainFilterOption,
-      );
+    if (
+      selectedChainFilterOption &&
+      BitpaySupportedCoins[selectedChainFilterOption]
+    ) {
+      const currencyInfo = BitpaySupportedCoins[selectedChainFilterOption];
       setCurrencyInfo(currencyInfo);
     }
   };
@@ -242,7 +237,7 @@ const SearchComponent = <T extends SearchableItem>({
         <RowFilterContainer>
           {selectedChainFilterOption && currencyInfo ? (
             <View style={{marginLeft: 5}}>
-              <CurrencyImage img={currencyInfo?.img} size={25} />
+              <CurrencyImage img={currencyInfo.img!} size={25} />
             </View>
           ) : null}
           <SearchFilterLabelContainer
@@ -251,7 +246,7 @@ const SearchComponent = <T extends SearchableItem>({
             }>
             <SearchFilterLabel>
               {selectedChainFilterOption && currencyInfo
-                ? currencyInfo?.currencyName
+                ? currencyInfo.name
                 : t('All Networks')}
             </SearchFilterLabel>
           </SearchFilterLabelContainer>

diff --git a/src/constants/currencies.ts b/src/constants/currencies.ts
@@ -1,3 +1,5 @@
+import {ReactElement} from 'react';
+import {CurrencyListIcons} from './SupportedCurrencyOptions';
 import {EVM_BLOCKCHAIN_EXPLORERS, BASE_BWS_URL} from './config';
 
 export type SupportedChains =
@@ -57,6 +59,7 @@ export interface CurrencyOpts {
   chain: string;
   coin: string;
   feeCurrency: string;
+  img?: string | ((props?: any) => ReactElement);
   logoURI?: string;
   unitInfo?: {
     // Config/Precision
@@ -1156,6 +1159,7 @@ export const BitpaySupportedUtxoCoins: {[key in string]: CurrencyOpts} = {
     chain: 'btc',
     coin: 'btc',
     feeCurrency: 'btc',
+    img: CurrencyListIcons.btc,
     unitInfo: {
       unitName: 'BTC',
       unitToSatoshi: 100000000,
@@ -1198,6 +1202,7 @@ export const BitpaySupportedUtxoCoins: {[key in string]: CurrencyOpts} = {
     chain: 'bch',
     coin: 'bch',
     feeCurrency: 'bch',
+    img: CurrencyListIcons.bch,
     unitInfo: {
       unitName: 'BCH',
       unitToSatoshi: 100000000,
@@ -1240,6 +1245,7 @@ export const BitpaySupportedUtxoCoins: {[key in string]: CurrencyOpts} = {
     chain: 'doge',
     coin: 'doge',
     feeCurrency: 'doge',
+    img: CurrencyListIcons.doge,
     unitInfo: {
       unitName: 'DOGE',
       unitToSatoshi: 1e8,
@@ -1282,6 +1288,7 @@ export const BitpaySupportedUtxoCoins: {[key in string]: CurrencyOpts} = {
     chain: 'ltc',
     coin: 'ltc',
     feeCurrency: 'ltc',
+    img: CurrencyListIcons.ltc,
     unitInfo: {
       unitName: 'LTC',
       unitToSatoshi: 100000000,
@@ -1327,6 +1334,7 @@ export const OtherBitpaySupportedCoins: {[key in string]: CurrencyOpts} = {
     chain: 'xrp',
     coin: 'xrp',
     feeCurrency: 'xrp',
+    img: CurrencyListIcons.xrp,
     unitInfo: {
       unitName: 'XRP',
       unitToSatoshi: 1e6,
@@ -1368,6 +1376,7 @@ export const BitpaySupportedEvmCoins: {[key in string]: CurrencyOpts} = {
     chain: 'eth',
     coin: 'eth',
     feeCurrency: 'eth',
+    img: CurrencyListIcons.eth,
     unitInfo: {
       unitName: 'ETH',
       unitToSatoshi: 1e18,
@@ -1410,6 +1419,7 @@ export const BitpaySupportedEvmCoins: {[key in string]: CurrencyOpts} = {
     chain: 'matic',
     coin: 'matic',
     feeCurrency: 'matic',
+    img: CurrencyListIcons.matic,
     unitInfo: {
       unitName: 'Matic',
       unitToSatoshi: 1e18,
@@ -1448,6 +1458,7 @@ export const BitpaySupportedEvmCoins: {[key in string]: CurrencyOpts} = {
     chain: 'arb',
     coin: 'eth',
     feeCurrency: 'eth',
+    img: CurrencyListIcons.arb,
     unitInfo: {
       unitName: 'Arbitrum',
       unitToSatoshi: 1e18,
@@ -1486,6 +1497,7 @@ export const BitpaySupportedEvmCoins: {[key in string]: CurrencyOpts} = {
     chain: 'base',
     coin: 'eth',
     feeCurrency: 'eth',
+    img: CurrencyListIcons.base,
     unitInfo: {
       unitName: 'Base',
       unitToSatoshi: 1e18,
@@ -1524,6 +1536,7 @@ export const BitpaySupportedEvmCoins: {[key in string]: CurrencyOpts} = {
     chain: 'op',
     coin: 'eth',
     feeCurrency: 'eth',
+    img: CurrencyListIcons.op,
     unitInfo: {
       unitName: 'Optimism',
       unitToSatoshi: 1e18,

diff --git a/src/store/wallet/utils/currency.ts b/src/store/wallet/utils/currency.ts
@@ -6,7 +6,10 @@ import {
   BitpaySupportedTokens,
   BitpaySupportedUtxoCoins,
 } from '../../../constants/currencies';
-import {getCurrencyAbbreviation} from '../../../utils/helper-methods';
+import {
+  getCurrencyAbbreviation,
+  isL2NoSideChainNetwork,
+} from '../../../utils/helper-methods';
 
 export const GetProtocolPrefix = (
   network: string = 'livenet',
@@ -84,7 +87,8 @@ export const IsERCToken = (
 ): boolean => {
   return (
     currencyAbbreviation.toLowerCase() !== chain.toLowerCase() &&
-    currencyAbbreviation.toLowerCase() !== 'eth' // workaround for L2 eth
+    (currencyAbbreviation.toLowerCase() !== 'eth' ||
+      !isL2NoSideChainNetwork(chain)) // workaround for L2 eth
   );
 };
 

diff --git a/src/utils/helper-methods.ts b/src/utils/helper-methods.ts
@@ -435,6 +435,10 @@ export const getChainUsingSuffix = (symbol: string) => {
   }
 };
 
+export const isL2NoSideChainNetwork = (chain: string) => {
+  return ['arb', 'base', 'op'].includes(chain.toLowerCase());
+};
+
 export const transformAmount = (
   satoshis: number,
   opts: {