[FEAT] Support Arb, Base and Op Chains

ios/BitPayApp/Info.plist

@@ -41,6 +41,9 @@
 				<string>bitcoincash</string>
 				<string>ethereum</string>
 				<string>matic</string>
+				<string>arb</string>
+				<string>base</string>
+				<string>op</string>
 				<string>dogecoin</string>
 				<string>litecoin</string>
 			</array>

package.json

@@ -75,7 +75,7 @@
     "babel-plugin-module-resolver": "4.1.0",
     "big-integer": "1.6.51",
     "bitauth": "0.4.1",
-    "bitcore-wallet-client": "10.0.28",
+    "bitcore-wallet-client": "10.0.36",
     "buffer": "4.9.2",
     "countries-list": "2.6.1",
     "eth-sig-util": "3.0.1",

scripts/allowed-url-prefixes.js

@@ -55,7 +55,14 @@ const allowedUrlPrefixes = [
   'https://api.bitcore.io/api',
   'https://api-eth.bitcore.io/api',
   'https://api-matic.bitcore.io/api',
+  'https://api-arb.bitcore.io/api',
+  'https://api-base.bitcore.io/api',
+  'https://api-op.bitcore.io/api',
   'https://api-xrp.bitcore.io/api',
+  'https://portal.polygon.technology/bridge',
+  'https://bridge.arbitrum.io/',
+  'https://bridge.base.org/',
+  'https://app.optimism.io/bridge/',
 ].concat(developmentOnlyAllowedUrlPrefixes);
 
 const allowedUrlPrefixString = allowedUrlPrefixes.join(',');

src/components/chain-search/ChainSearch.tsx

@@ -18,10 +18,9 @@ import {EIP155_CHAINS} from '../../constants/WalletConnectV2';
 import cloneDeep from 'lodash.clonedeep';
 import {Wallet} from '../../store/wallet/wallet.models';
 import {useTheme} from 'styled-components/native';
-import {setDefaultChainFilterOption} from '../../store/app/app.actions';
 import {setLocalDefaultChainFilterOption} from '../../store/app/app.actions';
 import ChainSelectorModal from '../../components/modal/chain-selector/ChainSelector';
-import {BitpaySupportedCoins} from '../../constants/currencies';
+import {SupportedChainsOptions} from '../../constants/SupportedCurrencyOptions';
 
 export const SearchIconContainer = styled.View`
   margin: 14px;
@@ -104,6 +103,10 @@ const SearchComponent = <T extends SearchableItem>({
       : APP.selectedChainFilterOption,
   );
 
+  const supportedChainOption = SupportedChainsOptions.find(
+    ({chain}) => chain === selectedChainFilterOption,
+  );
+
   const normalizeText = (text: string | undefined) =>
     text?.replace(/\s+/g, '')?.toLowerCase() || '';
 
@@ -222,7 +225,7 @@ const SearchComponent = <T extends SearchableItem>({
           <SearchFilterLabelContainer>
             <SearchFilterLabel>
               {selectedChainFilterOption
-                ? BitpaySupportedCoins[selectedChainFilterOption]?.name
+                ? supportedChainOption?.chainName
                 : t('All Networks')}
             </SearchFilterLabel>
           </SearchFilterLabelContainer>

src/components/list/CurrencySelectionRow.tsx

@@ -25,7 +25,12 @@ import {BaseText, H6, H7} from '../styled/Text';
 
 export type CurrencySelectionItem = Pick<
   SupportedCurrencyOption,
-  'id' | 'currencyAbbreviation' | 'currencyName' | 'img' | 'isToken'
+  | 'id'
+  | 'currencyAbbreviation'
+  | 'currencyName'
+  | 'img'
+  | 'isToken'
+  | 'badgeUri'
 > & {
   chain: string;
   tokenAddress?: string;
@@ -123,6 +128,7 @@ export const ChainSelectionRow: React.VFC<ChainSelectionRowProps> = memo(
       currencyName,
       img,
       imgSrc,
+      badgeUri,
       selected,
       disabled,
     } = currency;
@@ -139,7 +145,7 @@ export const ChainSelectionRow: React.VFC<ChainSelectionRowProps> = memo(
             : null
         }>
         <CurrencyColumn>
-          <CurrencyImage img={img} imgSrc={imgSrc} />
+          <CurrencyImage img={img} imgSrc={imgSrc} badgeUri={badgeUri} />
         </CurrencyColumn>
 
         <CurrencyTitleColumn style={{flexGrow: 1}}>

src/components/modal/chain-selector/ChainSelector.tsx

@@ -5,7 +5,14 @@ import styled, {css} from 'styled-components/native';
 import {useDispatch, useSelector} from 'react-redux';
 import {AppActions} from '../../../store/app';
 import {RootState} from '../../../store';
-import {Black, Action, SlateDark, White, Slate} from '../../../styles/colors';
+import {
+  Black,
+  Action,
+  SlateDark,
+  White,
+  Slate,
+  LightBlack,
+} from '../../../styles/colors';
 import haptic from '../../haptic-feedback/haptic';
 import {FlatList, Platform, SectionList, View} from 'react-native';
 import {useTheme} from '@react-navigation/native';
@@ -31,10 +38,10 @@ import SearchSvg from '../../../../assets/img/search.svg';
 import {
   BitpaySupportedCoins,
   SUPPORTED_CURRENCIES_CHAINS,
-  SupportedCoins,
+  SupportedChains,
 } from '../../../constants/currencies';
 import {useAppSelector} from '../../../utils/hooks';
-import {SupportedCoinsOptions} from '../../../constants/SupportedCurrencyOptions';
+import {SupportedChainsOptions} from '../../../constants/SupportedCurrencyOptions';
 import {CurrencyImage} from '../../currency-image/CurrencyImage';
 import GhostSvg from '../../../../assets/img/ghost-cheeky.svg';
 import AllNetworkSvg from '../../../../assets/img/all-networks.svg';
@@ -138,10 +145,10 @@ const ChainSelector = () => {
 
   const renderChainItem = useCallback(
     ({item, index, section}: {item: string; index: number; section: any}) => {
-      const supportedCoin = SupportedCoinsOptions.find(
-        ({chain}) => chain === BitpaySupportedCoins[item]?.chain,
+      const supportedChain = SupportedChainsOptions.find(
+        ({chain}) => chain === item,
       );
-      const badgeLabel = BitpaySupportedCoins[item]?.name || item;
+      const badgeLabel = supportedChain?.chainName || item;
       const selected = selectedChainFilterOption === item;
       let isLastItem = false;
       if (section?.data?.length) {
@@ -153,8 +160,8 @@ const ChainSelector = () => {
             activeOpacity={ActiveOpacity}
             selected={selected}
             onPress={() => {
-              const option = BitpaySupportedCoins[item]?.chain as
-                | SupportedCoins
+              const option = supportedChain?.chain as
+                | SupportedChains
                 | undefined;
 
               // Check if the context is one of 'sell', 'swap', 'buy'
@@ -169,14 +176,14 @@ const ChainSelector = () => {
             key={index.toString()}>
             <RowContainer>
               <ImageContainer>
-                {BitpaySupportedCoins[item] && supportedCoin?.img ? (
-                  <CurrencyImage img={supportedCoin?.img} size={32} />
+                {supportedChain?.img ? (
+                  <CurrencyImage img={supportedChain?.img} size={32} />
                 ) : (
                   <AllNetworkSvg style={{width: 20, height: 20}} />
                 )}
               </ImageContainer>
               <NetworkName selected={selected}>{badgeLabel}</NetworkName>
-              {BitpaySupportedCoins[item] ? (
+              {supportedChain ? (
                 <NetworkChainLabelContainer selected={selected}>
                   <NetworkChainLabel>{item.toUpperCase()}</NetworkChainLabel>
                 </NetworkChainLabelContainer>

src/constants/BWCError.ts

@@ -98,6 +98,18 @@ const _getErrorMessage = (err: Error) => {
       return t(
         'Insufficient funds in your linked MATIC wallet to cover the transaction fee.',
       );
+    case 'INSUFFICIENT_ARB_FEE':
+      return t(
+        'Insufficient funds in your linked ARB wallet to cover the transaction fee.',
+      );
+    case 'INSUFFICIENT_BASE_FEE':
+      return t(
+        'Insufficient funds in your linked BASE wallet to cover the transaction fee.',
+      );
+    case 'INSUFFICIENT_OP_FEE':
+      return t(
+        'Insufficient funds in your linked OP wallet to cover the transaction fee.',
+      );
     case 'LOCKED_FUNDS':
       return t('Funds are locked by pending spend proposals');
     case 'LOCKED_ETH_FEE':
@@ -108,6 +120,18 @@ const _getErrorMessage = (err: Error) => {
       return t(
         'Your POLYGON linked wallet funds are locked by pending spend proposals',
       );
+    case 'LOCKED_ARB_FEE':
+      return t(
+        'Your ARB linked wallet funds are locked by pending spend proposals',
+      );
+    case 'LOCKED_BASE_FEE':
+      return t(
+        'Your BASE linked wallet funds are locked by pending spend proposals',
+      );
+    case 'LOCKED_OP_FEE':
+      return t(
+        'Your OP linked wallet funds are locked by pending spend proposals',
+      );
     case 'COPAYER_VOTED':
       return t('Copayer already voted on this spend proposal');
     case 'NOT_AUTHORIZED':