Ensure pay to email works with matic

src/navigation/bitpay-id/components/AddressModal.tsx

@@ -149,7 +149,7 @@ const AddressModal = ({
           <>
             <HeaderContainer>
               <CurrencyIconAndBadge
-                coin={receivingAddress.currency}
+                coin={receivingAddress.coin}
                 chain={receivingAddress.chain}
                 size={30}
               />

src/navigation/bitpay-id/screens/ReceiveSettings.tsx

@@ -50,7 +50,10 @@ import AddressModal from '../components/AddressModal';
 import {keyBackupRequired} from '../../tabs/home/components/Crypto';
 import {StackScreenProps} from '@react-navigation/stack';
 import TwoFactorRequiredModal from '../components/TwoFactorRequiredModal';
-import {getReceivingAddressChain} from '../utils/bitpay-id-utils';
+import {
+  getCoinAndChainFromCurrencyCode,
+  getCurrencyCodeFromCoinAndChain,
+} from '../utils/bitpay-id-utils';
 
 const ViewContainer = styled.ScrollView`
   padding: 16px;
@@ -124,13 +127,13 @@ const FooterButton = styled(CtaContainerAbsolute)`
 
 const numVisibleCurrencyIcons = 3;
 
-const getReceivingAddressKey = (currency: string, chain: string) => {
-  return `${currency.toLowerCase()}_${chain.toLowerCase()}`;
+const getReceivingAddressKey = (coin: string, chain: string) => {
+  return `${coin.toLowerCase()}_${chain.toLowerCase()}`;
 };
 
 const createAddressMap = (receivingAddresses: ReceivingAddress[]) => {
-  return _.keyBy(receivingAddresses, ({currency, chain}) =>
-    getReceivingAddressKey(currency, chain),
+  return _.keyBy(receivingAddresses, ({coin, chain}) =>
+    getReceivingAddressKey(coin, chain),
   );
 };
 
@@ -152,7 +155,7 @@ const ReceiveSettings: React.FC<ReceiveSettingsProps> = ({navigation}) => {
   const apiToken = useAppSelector(({BITPAY_ID}) => BITPAY_ID.apiToken[network]);
   const receivingAddresses = useAppSelector(
     ({BITPAY_ID}) => BITPAY_ID.receivingAddresses[network],
-  );
+  ).map(address => ({...address, coin: address.coin || address.currency}));
   const defaultAltCurrency = useAppSelector(({APP}) => APP.defaultAltCurrency);
   const [walletSelectorVisible, setWalletSelectorVisible] = useState(false);
   const [twoFactorModalRequiredVisible, setTwoFactorModalRequiredVisible] =
@@ -176,9 +179,8 @@ const ReceiveSettings: React.FC<ReceiveSettingsProps> = ({navigation}) => {
   const unusedActiveWallets = uniqueActiveWallets.filter(
     wallet =>
       !Object.values(activeAddresses).some(
-        address =>
-          wallet.currencyAbbreviation === address.currency.toLowerCase() &&
-          wallet.chain === getReceivingAddressChain(address).toLowerCase(),
+        ({coin, chain}) =>
+          wallet.currencyAbbreviation === coin && wallet.chain === chain,
       ),
   );
   const inactiveCurrencyOptions = SupportedCurrencyOptions.filter(
@@ -246,11 +248,15 @@ const ReceiveSettings: React.FC<ReceiveSettingsProps> = ({navigation}) => {
       ...activeAddresses,
       [getReceivingAddressKey(wallet.currencyAbbreviation, wallet.chain)]: {
         id: '',
+        coin: wallet.currencyAbbreviation,
         chain: wallet.chain,
         label: wallet.walletName || wallet.currencyAbbreviation.toUpperCase(),
         address,
         provider: 'BitPay',
-        currency: wallet.currencyAbbreviation.toUpperCase(),
+        currency: getCurrencyCodeFromCoinAndChain(
+          wallet.currencyAbbreviation,
+          wallet.chain,
+        ),
         status: {
           isActive: true,
         },
@@ -309,7 +315,7 @@ const ReceiveSettings: React.FC<ReceiveSettingsProps> = ({navigation}) => {
 
   const removeAddress = (activeAddress: ReceivingAddress) => {
     delete activeAddresses[
-      getReceivingAddressKey(activeAddress.currency, activeAddress.chain)
+      getReceivingAddressKey(activeAddress.coin, activeAddress.chain)
     ];
     setActiveAddresses({...activeAddresses});
   };
@@ -328,17 +334,17 @@ const ReceiveSettings: React.FC<ReceiveSettingsProps> = ({navigation}) => {
           {Object.keys(activeAddresses).length ? (
             <>
               <SectionHeader>{t('Active Addresses')}</SectionHeader>
-              {Object.values(activeAddresses).map(({currency, chain}) => {
+              {Object.values(activeAddresses).map(({coin, chain}) => {
                 const activeAddress =
-                  activeAddresses[getReceivingAddressKey(currency, chain)];
+                  activeAddresses[getReceivingAddressKey(coin, chain)];
                 return (
                   <TouchableOpacity
                     activeOpacity={ActiveOpacity}
                     key={activeAddress.currency}
                     onPress={() => showAddressModal(activeAddress)}>
                     <AddressItem>
                       <CurrencyIconAndBadge
-                        coin={currency}
+                        coin={coin}
                         chain={chain}
                         size={25}
                       />
@@ -362,33 +368,33 @@ const ReceiveSettings: React.FC<ReceiveSettingsProps> = ({navigation}) => {
           {unusedActiveWallets.length + inactiveCurrencyOptions.length > 0 ? (
             <>
               <SectionHeader>{t('Receiving Addresses')}</SectionHeader>
-              {unusedActiveWallets.map(({currencyAbbreviation, chain}) => {
-                return (
-                  <TouchableOpacity
-                    activeOpacity={ActiveOpacity}
-                    key={currencyAbbreviation}
-                    onPress={() => {
-                      setWalletSelectorCurrency(currencyAbbreviation);
-                      setWalletSelectorChain(chain);
-                      setWalletSelectorVisible(true);
-                    }}>
-                    <AddressItem>
-                      <CurrencyIconAndBadge
-                        coin={currencyAbbreviation}
-                        chain={chain}
-                        size={25}
-                      />
-                      <AddressItemText>
-                        Select a{' '}
-                        <WalletName>
-                          {currencyAbbreviation.toUpperCase()} Wallet
-                        </WalletName>
-                      </AddressItemText>
-                      <ChevronRight />
-                    </AddressItem>
-                  </TouchableOpacity>
-                );
-              })}
+              {unusedActiveWallets.map(
+                ({currencyAbbreviation: coin, chain}) => {
+                  return (
+                    <TouchableOpacity
+                      activeOpacity={ActiveOpacity}
+                      key={coin}
+                      onPress={() => {
+                        setWalletSelectorCurrency(coin);
+                        setWalletSelectorChain(chain);
+                        setWalletSelectorVisible(true);
+                      }}>
+                      <AddressItem>
+                        <CurrencyIconAndBadge
+                          coin={coin}
+                          chain={chain}
+                          size={25}
+                        />
+                        <AddressItemText>
+                          Select a{' '}
+                          <WalletName>{coin.toUpperCase()} Wallet</WalletName>
+                        </AddressItemText>
+                        <ChevronRight />
+                      </AddressItem>
+                    </TouchableOpacity>
+                  );
+                },
+              )}
               <TouchableOpacity
                 activeOpacity={ActiveOpacity}
                 onPress={() => {

src/navigation/bitpay-id/utils/bitpay-id-utils.ts

@@ -1,12 +1,41 @@
 import {SUPPORTED_COINS} from '../../../constants/currencies';
-import {ReceivingAddress} from '../../../store/bitpay-id/bitpay-id.models';
 
-export function getReceivingAddressChain({
-  chain,
-  currency,
-}: ReceivingAddress): string {
-  return (
-    chain ||
-    (!SUPPORTED_COINS.includes(currency.toLowerCase()) ? 'ETH' : currency)
+const chainSuffixMap: {[suffix: string]: string} = {
+  e: 'eth',
+  m: 'matic',
+};
+export function getCoinAndChainFromCurrencyCode(currencyCode: string): {
+  coin: string;
+  chain: string;
+} {
+  const [coin, suffix] = currencyCode
+    .split('_')
+    .map(item => item.toLowerCase());
+  if (suffix) {
+    return {coin, chain: chainSuffixMap[suffix]};
+  }
+  if (SUPPORTED_COINS.includes(coin)) {
+    return {coin, chain: coin};
+  }
+  return {coin, chain: 'eth'};
+}
+
+export function getCurrencyCodeFromCoinAndChain(
+  coin: string,
+  chain: string,
+): string {
+  if (coin.toLowerCase() === chain.toLowerCase()) {
+    return coin.toUpperCase();
+  }
+  const matchingSuffixEntry = Object.entries(chainSuffixMap).find(
+    ([_, chainCode]) => chain.toLowerCase() === chainCode,
+  ) as [string, string];
+  const suffix = matchingSuffixEntry && matchingSuffixEntry[0];
+  const coinIsAnotherChain = Object.values(chainSuffixMap).find(
+    chainCode => chainCode === coin.toLowerCase(),
   );
+  if (suffix && (coinIsAnotherChain || chain.toLowerCase() !== 'eth')) {
+    return `${coin.toUpperCase()}_${suffix}`;
+  }
+  return coin.toUpperCase();
 }

src/navigation/wallet/screens/send/SendTo.tsx

@@ -93,7 +93,10 @@ import Icons from '../../components/WalletIcons';
 import ContactRow from '../../../../components/list/ContactRow';
 import {ReceivingAddress} from '../../../../store/bitpay-id/bitpay-id.models';
 import {BitPayIdEffects} from '../../../../store/bitpay-id';
-import {getReceivingAddressChain} from '../../../bitpay-id/utils/bitpay-id-utils';
+import {
+  getCoinAndChainFromCurrencyCode,
+  getCurrencyCodeFromCoinAndChain,
+} from '../../../bitpay-id/utils/bitpay-id-utils';
 
 const ValidDataTypes: string[] = [
   'BitcoinAddress',
@@ -554,7 +557,10 @@ const SendTo = () => {
       const searchPromise = dispatch(
         BitPayIdEffects.startFetchReceivingAddresses({
           email,
-          currency: currencyAbbreviation.toUpperCase(),
+          currency: getCurrencyCodeFromCoinAndChain(
+            currencyAbbreviation,
+            wallet.chain,
+          ),
         }),
       );
       setEmailAddressSearchPromise(searchPromise);
@@ -565,7 +571,13 @@ const SendTo = () => {
     } else {
       setEmailAddressSearchPromise(Promise.resolve([]));
     }
-  }, [searchIsEmailAddress, searchInput, dispatch, currencyAbbreviation]);
+  }, [
+    searchIsEmailAddress,
+    searchInput,
+    dispatch,
+    currencyAbbreviation,
+    wallet.chain,
+  ]);
 
   return (
     <SafeAreaView>
@@ -615,11 +627,9 @@ const SendTo = () => {
               const email = searchInput.toLowerCase();
               const emailReceivingAddresses = await emailAddressSearchPromise;
               const addressMatchingCurrency = emailReceivingAddresses.find(
-                address =>
-                  address.currency.toLowerCase() ===
-                    currencyAbbreviation.toLowerCase() &&
-                  getReceivingAddressChain(address).toLowerCase() ===
-                    chain.toLowerCase(),
+                ({coin, chain: addressChain}) =>
+                  currencyAbbreviation.toLowerCase() === coin.toLowerCase() &&
+                  chain.toLowerCase() === addressChain.toLowerCase(),
               );
               addressMatchingCurrency
                 ? validateAndNavigateToConfirm(

src/navigation/wallet/screens/send/confirm/Shared.tsx

@@ -575,7 +575,8 @@ export const CurrencyIconAndBadge = ({
   const badgeImg = IsERCToken(coin, chain)
     ? getBadgeImg(coin, chain)
     : undefined;
-  const CurrencyIcon = CurrencyListIcons[fullCurrencyAbbreviation];
+  const CurrencyIcon =
+    CurrencyListIcons[fullCurrencyAbbreviation.toLowerCase()];
 
   return (
     <CurrencyImageAndBadgeContainer height={size}>

src/store/bitpay-id/bitpay-id.effects.ts

@@ -1,6 +1,5 @@
 import {upperFirst} from 'lodash';
 import {batch} from 'react-redux';
-import _ from 'lodash';
 import AuthApi from '../../api/auth';
 import {
   LoginErrorResponse,
@@ -23,8 +22,7 @@ import {BitPayIdActions} from './index';
 import {t} from 'i18next';
 import BitPayIdApi from '../../api/bitpay';
 import {ReceivingAddress, SecuritySettings} from './bitpay-id.models';
-import AddressCard from '../../navigation/wallet/components/AddressCard';
-import {getReceivingAddressChain} from '../../navigation/bitpay-id/utils/bitpay-id-utils';
+import {getCoinAndChainFromCurrencyCode} from '../../navigation/bitpay-id/utils/bitpay-id-utils';
 
 interface StartLoginParams {
   email: string;
@@ -591,10 +589,16 @@ export const startFetchReceivingAddresses =
         );
         const receivingAddresses = accountAddresses
           .filter(address => address.usedFor?.payToEmail)
-          .map(address => ({
-            ...address,
-            chain: getReceivingAddressChain(address),
-          }));
+          .map(address => {
+            const {coin, chain} = getCoinAndChainFromCurrencyCode(
+              address.currency,
+            );
+            return {
+              ...address,
+              coin,
+              chain,
+            };
+          });
         dispatch(
           BitPayIdActions.successFetchReceivingAddresses(
             APP.network,

src/store/bitpay-id/bitpay-id.models.ts

@@ -22,6 +22,7 @@ export interface Session {
 export interface ReceivingAddress {
   id: string;
   currency: string;
+  coin: string;
   chain: string;
   label: string;
   address: string;