[REF] simplify adding new chains

src/components/amount/Amount.tsx

@@ -83,6 +83,7 @@ const CurrencyText = styled(BaseText)`
 export interface AmountProps {
   cryptoCurrencyAbbreviation?: string;
   fiatCurrencyAbbreviation?: string;
+  chain?: string;
   context?: string;
   buttonState?: ButtonState;
 
@@ -95,6 +96,7 @@ export interface AmountProps {
 const Amount: React.VFC<AmountProps> = ({
   cryptoCurrencyAbbreviation,
   fiatCurrencyAbbreviation,
+  chain,
   context,
   buttonState,
   onSubmit,
@@ -150,7 +152,7 @@ const Amount: React.VFC<AmountProps> = ({
   const updateAmount = (_val: string) => {
     const val = Number(_val);
 
-    if (isNaN(val) || !cryptoCurrencyAbbreviation) {
+    if (isNaN(val) || !cryptoCurrencyAbbreviation || !chain) {
       updateAmountConfig(current => ({
         ...current,
         displayAmount: _val,
@@ -167,6 +169,7 @@ const Amount: React.VFC<AmountProps> = ({
             ParseAmount(
               primaryIsFiat ? val / rate : val,
               cryptoCurrencyAbbreviation.toLowerCase(),
+              chain,
             ),
           ).amount;
 

src/components/currency-image/CurrencyImage.tsx

@@ -21,8 +21,8 @@ const CurrencyImageContainer = styled.View`
 `;
 
 const BadgeContainer = styled.View<{size?: number}>`
-  height: ${({size = 56}) => size}%;
-  width: ${({size = 56}) => size}%;
+  height: ${({size = 54}) => size}%;
+  width: ${({size = 54}) => size}%;
   position: absolute;
   right: 0;
   bottom: 0;

src/components/list/ContactRow.tsx

@@ -32,6 +32,7 @@ const RowContainer = styled.View`
 export interface ContactRowProps {
   address: string;
   coin: string;
+  chain: string;
   network: string;
   name: string;
   tag?: number; // backward compatibility
@@ -47,12 +48,12 @@ interface Props {
 const ContactRow = ({contact, onPress}: Props) => {
   const theme = useTheme();
   const underlayColor = theme.dark ? '#121212' : '#fbfbff';
-  const {coin, name, email, address} = contact;
+  const {coin, name, email, address, chain} = contact;
   return (
     <ContactContainer underlayColor={underlayColor} onPress={onPress}>
       <RowContainer>
         <ContactImageContainer>
-          <ContactIcon name={name} coin={coin} size={45} />
+          <ContactIcon name={name} coin={coin} size={45} chain={chain} />
         </ContactImageContainer>
         <ContactColumn>
           <H5>{name}</H5>

src/components/list/CurrencySelectionRow.tsx

@@ -1,4 +1,4 @@
-import React, {memo, useCallback} from 'react';
+import React, {memo, ReactElement, useCallback} from 'react';
 import {useTranslation} from 'react-i18next';
 import {ImageRequireSource, View} from 'react-native';
 import styled from 'styled-components/native';
@@ -12,6 +12,7 @@ import {
   Slate30,
   SlateDark,
 } from '../../styles/colors';
+import {getBadgeImg} from '../../utils/helper-methods';
 import Checkbox from '../checkbox/Checkbox';
 import {CurrencyImage} from '../currency-image/CurrencyImage';
 import haptic from '../haptic-feedback/haptic';
@@ -23,6 +24,7 @@ export type CurrencySelectionItem = Pick<
   SupportedCurrencyOption,
   'id' | 'currencyAbbreviation' | 'currencyName' | 'img' | 'isToken'
 > & {
+  chain: string;
   imgSrc?: ImageRequireSource | undefined;
   selected?: boolean;
   disabled?: boolean;
@@ -34,7 +36,7 @@ export type CurrencySelectionRowProps = {
   description?: string;
   hideCheckbox?: boolean;
   selectionMode?: CurrencySelectionMode;
-  onToggle?: (id: string) => void;
+  onToggle?: (currencyAbbreviation: string) => void;
   onViewAllTokensPressed?: (
     currency: CurrencySelectionItem,
     tokens: CurrencySelectionItem[],
@@ -142,28 +144,42 @@ export const ChainSelectionRow: React.VFC<ChainSelectionRowProps> = memo(
 );
 
 interface TokenSelectionRowProps {
-  chainImg?: CurrencySelectionItem['img'];
   token: CurrencySelectionItem;
   hideCheckbox?: boolean;
   selectionMode?: CurrencySelectionMode;
-  onToggle?: (id: string) => any;
+  onToggle?: (currencyAbbreviation: string) => any;
+  hideArrow?: boolean;
+  badgeUri?: string | ((props?: any) => ReactElement);
 }
 
 export const TokenSelectionRow: React.VFC<TokenSelectionRowProps> = memo(
   props => {
-    const {chainImg, token, hideCheckbox, selectionMode, onToggle} = props;
+    const {
+      token,
+      hideCheckbox,
+      selectionMode,
+      onToggle,
+      hideArrow,
+      badgeUri: _badgeUri,
+    } = props;
+    const badgeUri =
+      _badgeUri || getBadgeImg(token.currencyAbbreviation, token.chain);
 
     return (
-      <FlexRow style={{marginBottom: 24}} onPress={() => onToggle?.(token.id)}>
-        <CurrencyColumn style={{marginRight: 16}}>
-          <NestedArrowIcon />
-        </CurrencyColumn>
+      <FlexRow
+        style={{marginBottom: 24}}
+        onPress={() => onToggle?.(token.currencyAbbreviation)}>
+        {!hideArrow ? (
+          <CurrencyColumn style={{marginRight: 16}}>
+            <NestedArrowIcon />
+          </CurrencyColumn>
+        ) : null}
 
         <CurrencyColumn>
           <CurrencyImage
             img={token.img}
             imgSrc={token.imgSrc}
-            badgeUri={chainImg}
+            badgeUri={badgeUri}
           />
         </CurrencyColumn>
 
@@ -181,7 +197,7 @@ export const TokenSelectionRow: React.VFC<TokenSelectionRowProps> = memo(
               checked={!!token.selected}
               radio={selectionMode === 'single'}
               disabled={!!token.disabled}
-              onPress={() => onToggle?.(token.id)}
+              onPress={() => onToggle?.(token.currencyAbbreviation)}
             />
           </CurrencyColumn>
         ) : null}
@@ -210,9 +226,9 @@ const CurrencySelectionRow: React.VFC<CurrencySelectionRowProps> = ({
   const {t} = useTranslation();
   const {currencyName} = currency;
   const onPress = useCallback(
-    (id: string): void => {
+    (currencyAbbreviation: string): void => {
       haptic(IS_ANDROID ? 'keyboardPress' : 'impactLight');
-      onToggle?.(id);
+      onToggle?.(currencyAbbreviation);
     },
     [onToggle],
   );
@@ -221,7 +237,7 @@ const CurrencySelectionRow: React.VFC<CurrencySelectionRowProps> = ({
     <CurrencySelectionRowContainer>
       <ChainSelectionRow
         currency={currency}
-        onToggle={onPress}
+        onToggle={() => onPress(currency.currencyAbbreviation)}
         hideCheckbox={hideCheckbox}
         selectionMode={selectionMode}
       />
@@ -237,9 +253,8 @@ const CurrencySelectionRow: React.VFC<CurrencySelectionRowProps> = ({
           {tokens.map(token => (
             <TokenSelectionRow
               key={token.id}
-              chainImg={currency.img}
               token={token}
-              onToggle={onPress}
+              onToggle={() => onPress(token.currencyAbbreviation)}
               hideCheckbox={hideCheckbox}
               selectionMode={selectionMode}
             />

src/components/list/GlobalSelectRow.tsx

@@ -30,11 +30,12 @@ export const AvailableWalletsPill = styled.View`
 
 const GlobalSelectRow = ({item, emit}: Props) => {
   const {t} = useTranslation();
-  const {currencyName, total, img} = item;
+  const {currencyName, total, img, badgeImg} = item;
+
   return (
     <RowContainer activeOpacity={ActiveOpacity} onPress={() => emit(item)}>
       <CurrencyImageContainer>
-        <CurrencyImage img={img} />
+        <CurrencyImage img={img} badgeUri={badgeImg} />
       </CurrencyImageContainer>
       <CurrencyColumn>
         <H5>{currencyName}</H5>

src/components/list/WalletRow.tsx

@@ -32,8 +32,10 @@ const NestedArrowContainer = styled.View`
 export interface WalletRowProps {
   id: string;
   img: string | ((props: any) => ReactElement);
+  badgeImg?: string | ((props: any) => ReactElement);
   currencyName: string;
   currencyAbbreviation: string;
+  chain: string;
   walletName?: string;
   cryptoBalance: string;
   cryptoLockedBalance?: string;
@@ -85,6 +87,7 @@ const WalletRow = ({wallet, onPress}: Props) => {
     currencyAbbreviation,
     walletName,
     img,
+    badgeImg,
     cryptoBalance,
     fiatBalance,
     isToken,
@@ -104,7 +107,7 @@ const WalletRow = ({wallet, onPress}: Props) => {
         </NestedArrowContainer>
       )}
       <CurrencyImageContainer>
-        <CurrencyImage img={img} size={45} />
+        <CurrencyImage img={img} badgeUri={badgeImg} size={45} />
       </CurrencyImageContainer>
       <CurrencyColumn>
         <Row>

src/components/modal/biometric/BiometricModal.tsx

@@ -125,7 +125,6 @@ const BiometricModal: React.FC = () => {
         onClose?.(true);
       })
       .catch((error: BiometricError) => {
-        console.log(error);
         if (error.code && TO_HANDLE_ERRORS[error.code]) {
           const err = TO_HANDLE_ERRORS[error.code];
           dispatch(