Merge pull request #430 from gabrielbazan7/ref/new-chains1

[REF] simplify adding new chains - 01
bitpay · Oct 3, 2022 · b99d793 · b99d793
2 parents 4d967f3 + 747d601
commit b99d793
Show file tree

Hide file tree

Showing 18 changed files with 236 additions and 150 deletions.
diff --git a/src/components/list/CurrencySelectionRow.tsx b/src/components/list/CurrencySelectionRow.tsx
@@ -36,7 +36,7 @@ export type CurrencySelectionRowProps = {
   description?: string;
   hideCheckbox?: boolean;
   selectionMode?: CurrencySelectionMode;
-  onToggle?: (currencyAbbreviation: string) => void;
+  onToggle?: (currencyAbbreviation: string, chain: string) => void;
   onViewAllTokensPressed?: (
     currency: CurrencySelectionItem,
     tokens: CurrencySelectionItem[],
@@ -149,7 +149,7 @@ interface TokenSelectionRowProps {
   token: CurrencySelectionItem;
   hideCheckbox?: boolean;
   selectionMode?: CurrencySelectionMode;
-  onToggle?: (currencyAbbreviation: string) => any;
+  onToggle?: (currencyAbbreviation: string, chain: string) => any;
   hideArrow?: boolean;
   badgeUri?: string | ((props?: any) => ReactElement);
 }
@@ -170,7 +170,7 @@ export const TokenSelectionRow: React.VFC<TokenSelectionRowProps> = memo(
     return (
       <FlexRow
         style={{marginBottom: 24}}
-        onPress={() => onToggle?.(token.currencyAbbreviation)}>
+        onPress={() => onToggle?.(token.currencyAbbreviation, token.chain)}>
         {!hideArrow ? (
           <CurrencyColumn style={{marginRight: 16}}>
             <NestedArrowIcon />
@@ -199,7 +199,9 @@ export const TokenSelectionRow: React.VFC<TokenSelectionRowProps> = memo(
               checked={!!token.selected}
               radio={selectionMode === 'single'}
               disabled={!!token.disabled}
-              onPress={() => onToggle?.(token.currencyAbbreviation)}
+              onPress={() =>
+                onToggle?.(token.currencyAbbreviation, token.chain)
+              }
             />
           </CurrencyColumn>
         ) : null}
@@ -228,9 +230,9 @@ const CurrencySelectionRow: React.VFC<CurrencySelectionRowProps> = ({
   const {t} = useTranslation();
   const {currencyName} = currency;
   const onPress = useCallback(
-    (currencyAbbreviation: string): void => {
+    (currencyAbbreviation: string, chain: string): void => {
       haptic(IS_ANDROID ? 'keyboardPress' : 'impactLight');
-      onToggle?.(currencyAbbreviation);
+      onToggle?.(currencyAbbreviation, chain);
     },
     [onToggle],
   );
@@ -239,7 +241,7 @@ const CurrencySelectionRow: React.VFC<CurrencySelectionRowProps> = ({
     <CurrencySelectionRowContainer>
       <ChainSelectionRow
         currency={currency}
-        onToggle={() => onPress(currency.currencyAbbreviation)}
+        onToggle={() => onPress(currency.currencyAbbreviation, currency.chain)}
         hideCheckbox={hideCheckbox}
         selectionMode={selectionMode}
       />
@@ -256,7 +258,9 @@ const CurrencySelectionRow: React.VFC<CurrencySelectionRowProps> = ({
             <TokenSelectionRow
               key={token.id}
               token={token}
-              onToggle={() => onPress(token.currencyAbbreviation)}
+              onToggle={() => {
+                onPress(token.currencyAbbreviation, token.chain);
+              }}
               hideCheckbox={hideCheckbox}
               selectionMode={selectionMode}
             />

diff --git a/src/constants/SupportedCurrencyOptions.tsx b/src/constants/SupportedCurrencyOptions.tsx
@@ -15,17 +15,20 @@ import ShibIcon from '../../assets/img/currencies/shib.svg';
 import ApeIcon from '../../assets/img/currencies/ape.svg';
 import EurocIcon from '../../assets/img/currencies/euroc.svg';
 import {ImageSourcePropType} from 'react-native';
+import {orderBy} from 'lodash';
 
 export interface SupportedCurrencyOption {
   id: string;
   img: string | ((props?: any) => ReactElement);
   currencyName: string;
   hasMultisig?: boolean;
   currencyAbbreviation: string;
+  chain?: string;
   isToken?: boolean;
   imgSrc?: ImageSourcePropType;
   badgeUri?: string | ((props?: any) => ReactElement);
   badgeSrc?: ImageSourcePropType;
+  priority?: number;
 }
 
 export const CurrencyListIcons: {
@@ -52,6 +55,7 @@ export const SupportedUtxoCurrencyOptions: Array<SupportedCurrencyOption> = [
   {
     id: Math.random().toString(),
     img: CurrencyListIcons.btc,
+    priority: 1,
     currencyName: 'Bitcoin',
     currencyAbbreviation: 'btc',
     hasMultisig: true,
@@ -60,6 +64,7 @@ export const SupportedUtxoCurrencyOptions: Array<SupportedCurrencyOption> = [
   {
     id: Math.random().toString(),
     img: CurrencyListIcons.bch,
+    priority: 2,
     currencyName: 'Bitcoin Cash',
     currencyAbbreviation: 'bch',
     hasMultisig: true,
@@ -68,6 +73,7 @@ export const SupportedUtxoCurrencyOptions: Array<SupportedCurrencyOption> = [
   {
     id: Math.random().toString(),
     img: CurrencyListIcons.doge,
+    priority: 3,
     currencyName: 'Dogecoin',
     currencyAbbreviation: 'doge',
     hasMultisig: true,
@@ -77,13 +83,15 @@ export const SupportedUtxoCurrencyOptions: Array<SupportedCurrencyOption> = [
     id: Math.random().toString(),
     img: CurrencyListIcons.ltc,
     currencyName: 'Litecoin',
+    priority: 5,
     currencyAbbreviation: 'ltc',
     hasMultisig: true,
     imgSrc: require('../../assets/img/currencies/png/LTC.png'),
   },
   {
     id: Math.random().toString(),
     img: CurrencyListIcons.xrp,
+    priority: 6,
     currencyName: 'XRP',
     currencyAbbreviation: 'xrp',
     imgSrc: require('../../assets/img/currencies/png/XRP.png'),
@@ -93,6 +101,7 @@ export const SupportedUtxoCurrencyOptions: Array<SupportedCurrencyOption> = [
 export const SupportedEvmCurrencyOptions: Array<SupportedCurrencyOption> = [
   {
     id: Math.random().toString(),
+    priority: 4,
     img: CurrencyListIcons.eth,
     currencyName: 'Ethereum',
     currencyAbbreviation: 'eth',
@@ -107,6 +116,7 @@ export const SupportedTokenOptions: Array<SupportedCurrencyOption> = [
     img: CurrencyListIcons.usdc_e,
     currencyName: 'USD Coin',
     currencyAbbreviation: 'usdc',
+    chain: 'eth',
     isToken: true,
     imgSrc: require('../../assets/img/currencies/png/USDC.png'),
     badgeSrc: require('../../assets/img/currencies/png/ETH.png'),
@@ -117,6 +127,7 @@ export const SupportedTokenOptions: Array<SupportedCurrencyOption> = [
     img: CurrencyListIcons.ape_e,
     currencyName: 'ApeCoin',
     currencyAbbreviation: 'ape',
+    chain: 'eth',
     isToken: true,
     imgSrc: require('../../assets/img/currencies/png/APE.png'),
     badgeSrc: require('../../assets/img/currencies/png/ETH.png'),
@@ -127,6 +138,7 @@ export const SupportedTokenOptions: Array<SupportedCurrencyOption> = [
     img: CurrencyListIcons.euroc_e,
     currencyName: 'Euro Coin',
     currencyAbbreviation: 'euroc',
+    chain: 'eth',
     isToken: true,
     imgSrc: require('../../assets/img/currencies/png/EUROC.png'),
     badgeSrc: require('../../assets/img/currencies/png/ETH.png'),
@@ -137,6 +149,7 @@ export const SupportedTokenOptions: Array<SupportedCurrencyOption> = [
     img: CurrencyListIcons.shib_e,
     currencyName: 'Shiba Inu',
     currencyAbbreviation: 'shib',
+    chain: 'eth',
     isToken: true,
     imgSrc: require('../../assets/img/currencies/png/SHIB.png'),
     badgeSrc: require('../../assets/img/currencies/png/ETH.png'),
@@ -147,6 +160,7 @@ export const SupportedTokenOptions: Array<SupportedCurrencyOption> = [
     img: CurrencyListIcons.gusd_e,
     currencyName: 'Gemini Dollar',
     currencyAbbreviation: 'gusd',
+    chain: 'eth',
     isToken: true,
     imgSrc: require('../../assets/img/currencies/png/GUSD.png'),
     badgeSrc: require('../../assets/img/currencies/png/ETH.png'),
@@ -157,6 +171,7 @@ export const SupportedTokenOptions: Array<SupportedCurrencyOption> = [
     img: CurrencyListIcons.busd_e,
     currencyName: 'Binance USD Coin',
     currencyAbbreviation: 'busd',
+    chain: 'eth',
     isToken: true,
     imgSrc: require('../../assets/img/currencies/png/BUSD.png'),
     badgeSrc: require('../../assets/img/currencies/png/ETH.png'),
@@ -167,6 +182,7 @@ export const SupportedTokenOptions: Array<SupportedCurrencyOption> = [
     img: CurrencyListIcons.dai_e,
     currencyName: 'Dai',
     currencyAbbreviation: 'dai',
+    chain: 'eth',
     isToken: true,
     imgSrc: require('../../assets/img/currencies/png/DAI.png'),
     badgeSrc: require('../../assets/img/currencies/png/ETH.png'),
@@ -177,6 +193,7 @@ export const SupportedTokenOptions: Array<SupportedCurrencyOption> = [
     img: CurrencyListIcons.usdp_e,
     currencyName: 'Pax Dollar',
     currencyAbbreviation: 'usdp',
+    chain: 'eth',
     isToken: true,
     imgSrc: require('../../assets/img/currencies/png/USDP.png'),
     badgeSrc: require('../../assets/img/currencies/png/ETH.png'),
@@ -187,17 +204,18 @@ export const SupportedTokenOptions: Array<SupportedCurrencyOption> = [
     img: CurrencyListIcons.wbtc_e,
     currencyName: 'Wrapped Bitcoin',
     currencyAbbreviation: 'wbtc',
+    chain: 'eth',
     isToken: true,
     imgSrc: require('../../assets/img/currencies/png/WBTC.png'),
     badgeSrc: require('../../assets/img/currencies/png/ETH.png'),
     badgeUri: CurrencyListIcons.eth,
   },
 ];
 
-export const SupportedCoinsOptions: Array<SupportedCurrencyOption> = [
-  ...SupportedUtxoCurrencyOptions,
-  ...SupportedEvmCurrencyOptions,
-];
+export const SupportedCoinsOptions: Array<SupportedCurrencyOption> = orderBy(
+  [...SupportedUtxoCurrencyOptions, ...SupportedEvmCurrencyOptions],
+  'priority',
+);
 
 export const SupportedCurrencyOptions: Array<SupportedCurrencyOption> = [
   ...SupportedCoinsOptions,

diff --git a/src/constants/config.ts b/src/constants/config.ts
@@ -43,16 +43,12 @@ export const DOWNLOAD_BITPAY_URL = 'https://bitpay.com/wallet';
 export const TWO_FACTOR_EMAIL_POLL_INTERVAL = 1000 * 3;
 export const TWO_FACTOR_EMAIL_POLL_TIMEOUT = 1000 * 60 * 5;
 
-// Coingecko
-export const COINGECKO_BLOCKCHAIN_NETWORK = {
+export const EVM_BLOCKCHAIN_NETWORK = {
   eth: 'ethereum',
 };
 
-// 1Inch
-export const ONEINCH_BLOCKCHAIN_ID: {[key in string]: number} = {
+export const EVM_BLOCKCHAIN_ID: {[key in string]: number} = {
   eth: 1,
-  // TODO MATIC
-  // matic: 137,
 };
 
 export const EVM_BLOCKCHAIN_EXPLORERS: {[key in string]: any} = {

diff --git a/src/constants/currencies.ts b/src/constants/currencies.ts
@@ -618,7 +618,6 @@ export const BitpaySupportedEvmCoins: {[key in string]: CurrencyOpts} = {
 
 export const BitpaySupportedTokens: {[key in string]: CurrencyOpts} = {
   ...BitpaySupportedEthereumTokens,
-  // TODO MATIC
 };
 
 export const BitpaySupportedCoins: {[key in string]: CurrencyOpts} = {
@@ -635,6 +634,7 @@ export const SUPPORTED_EVM_COINS = Object.keys(BitpaySupportedEvmCoins);
 export const SUPPORTED_ETHEREUM_TOKENS = Object.keys(
   BitpaySupportedEthereumTokens,
 );
-// TODO MATIC
+export const SUPPORTED_TOKENS = [...SUPPORTED_ETHEREUM_TOKENS];
+
 export const SUPPORTED_COINS = Object.keys(BitpaySupportedCoins);
 export const SUPPORTED_CURRENCIES = Object.keys(BitpaySupportedCurrencies);
diff --git a/src/constants/tokens.ts b/src/constants/tokens.ts
@@ -48,7 +48,7 @@ export const BitpaySupportedEthereumTokenOpts: TokenOptsType = {
   wbtc_e: {
     name: 'Wrapped Bitcoin',
     symbol: 'WBTC',
-    decimals: 9,
+    decimals: 8,
     address: '0x2260fac5e5542a773aa44fbcfedf7c193bc2c599',
   },
   shib_e: {
@@ -71,6 +71,10 @@ export const BitpaySupportedEthereumTokenOpts: TokenOptsType = {
   },
 };
 
+export const BitpaySupportedTokenOpts: TokenOptsType = {
+  ...BitpaySupportedEthereumTokenOpts,
+};
+
 export const BitpaySupportedEthereumTokenOptsByAddress: TokenOptsType = {
   '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48_e': {
     name: 'USD Coin',
@@ -127,3 +131,7 @@ export const BitpaySupportedEthereumTokenOptsByAddress: TokenOptsType = {
     address: '0x1aBaEA1f7C830bD89Acc67eC4af516284b1bC33c',
   },
 };
+
+export const BitpaySupportedTokenOptsByAddress: TokenOptsType = {
+  ...BitpaySupportedEthereumTokenOptsByAddress,
+};
diff --git a/src/navigation/tabs/contacts/components/ContactIcon.tsx b/src/navigation/tabs/contacts/components/ContactIcon.tsx
@@ -8,9 +8,12 @@ import {CurrencyImage} from '../../../../components/currency-image/CurrencyImage
 import {SUPPORTED_CURRENCIES} from '../../../../constants/currencies';
 import {useAppSelector} from '../../../../utils/hooks';
 import {RootState} from '../../../../store';
-import {BitpaySupportedEthereumTokenOpts} from '../../../../constants/tokens';
+import {BitpaySupportedTokenOpts} from '../../../../constants/tokens';
 import {Token} from '../../../../store/wallet/wallet.models';
-import {getCurrencyAbbreviation} from '../../../../utils/helper-methods';
+import {
+  getBadgeImg,
+  getCurrencyAbbreviation,
+} from '../../../../utils/helper-methods';
 
 interface ContactIconProps {
   size?: number;
@@ -21,6 +24,7 @@ interface ContactIconProps {
 
 interface BadgeProps {
   img: string | ((props?: any) => ReactElement);
+  badgeImg: string | ((props?: any) => ReactElement);
   size?: number;
 }
 
@@ -34,10 +38,10 @@ const CoinBadgeContainer = styled.View`
   bottom: -1px;
 `;
 
-const CoinBadge: React.FC<BadgeProps> = ({size = 20, img}) => {
+const CoinBadge: React.FC<BadgeProps> = ({size = 20, img, badgeImg}) => {
   return (
     <CoinBadgeContainer>
-      <CurrencyImage img={img} size={size} />
+      <CurrencyImage img={img} badgeUri={badgeImg} size={size} />
     </CoinBadgeContainer>
   );
 };
@@ -50,7 +54,7 @@ const ContactIcon: React.FC<ContactIconProps> = ({
 }) => {
   const tokenOptions = useAppSelector(({WALLET}: RootState) => {
     return {
-      ...BitpaySupportedEthereumTokenOpts,
+      ...BitpaySupportedTokenOpts,
       ...WALLET.tokenOptions,
       ...WALLET.customTokenOptions,
     };
@@ -64,7 +68,13 @@ const ContactIcon: React.FC<ContactIconProps> = ({
     ? (tokenOptions[getCurrencyAbbreviation(coin, chain)].logoURI as string)
     : '';
 
-  const badge = coin ? <CoinBadge size={size / 2.5} img={img} /> : null;
+  const badge = coin ? (
+    <CoinBadge
+      size={size / 2.5}
+      img={img}
+      badgeImg={getBadgeImg(coin, chain)}
+    />
+  ) : null;
   const initials = name
     ? name
         .trim()