clean

src/components/coin-icon/CoinIcon.tsx

@@ -1,86 +1 @@
-import React, { useMemo } from 'react';
-import { View, ViewProps } from 'react-native';
-import ContractInteraction from '../../assets/contractInteraction.png';
-import { useTheme } from '../../theme/ThemeContext';
-import ChainBadge from './ChainBadge';
-import { CoinIconFallback } from './CoinIconFallback';
-import { Network } from '@/networks/types';
-import { useColorForAsset } from '@/hooks';
-import { ImgixImage } from '@/components/images';
-import styled from '@/styled-thing';
-import { ethereumUtils, isETH, magicMemo, CoinIcon as ReactCoinIcon } from '@/utils';
-import { ChainBadgeType } from '@/components/coin-icon/ChainBadgeSizeConfigs';
-
 export const CoinIconSize = 40;
-
-const ContractInteractionIcon = styled(ImgixImage)(({ size }: { size: number }) => ({
-  height: size,
-  width: size,
-}));
-
-const StyledCoinIcon = styled(ReactCoinIcon)({
-  opacity: ({ isHidden }: { isHidden?: boolean }) => (isHidden ? 0.4 : 1),
-});
-
-type Props = {
-  address?: string;
-  badgeXPosition?: number;
-  badgeYPosition?: number;
-  badgeSize?: ChainBadgeType;
-  ignoreBadge?: boolean;
-  forcedShadowColor?: string;
-  size?: number;
-  symbol?: string;
-  network: string;
-  mainnet_address?: string;
-  shadowOpacity?: number;
-} & Pick<ViewProps, 'testID' | 'style'>;
-
-const CoinIcon: React.FC<Props> = ({
-  address = 'eth',
-  badgeXPosition,
-  badgeYPosition,
-  badgeSize,
-  ignoreBadge = false,
-  forcedShadowColor,
-  size = CoinIconSize,
-  symbol = '',
-  network,
-  mainnet_address,
-  ...props
-}) => {
-  const color = useColorForAsset({
-    address: mainnet_address || address,
-  });
-  const { colors, isDarkMode } = useTheme();
-  const forceFallback = !isETH(mainnet_address || address);
-  const isNotContractInteraction = useMemo(() => symbol !== 'contract', [symbol]);
-
-  const theme = useTheme();
-
-  return (
-    <View>
-      {isNotContractInteraction ? (
-        <StyledCoinIcon
-          {...props}
-          address={mainnet_address || address}
-          color={color}
-          fallbackRenderer={CoinIconFallback}
-          forceFallback={true}
-          // force update on change symbol due to ImageCache strategy
-          key={symbol}
-          shadowColor={forcedShadowColor || (isDarkMode ? colors.shadow : color)}
-          size={size}
-          symbol={symbol}
-          network={mainnet_address ? Network.mainnet : network}
-          theme={theme}
-        />
-      ) : (
-        <ContractInteractionIcon size={size} source={ContractInteraction} />
-      )}
-      {!ignoreBadge && <ChainBadge network={network} badgeXPosition={badgeXPosition} badgeYPosition={badgeYPosition} size={badgeSize} />}
-    </View>
-  );
-};
-
-export default magicMemo(CoinIcon, ['address', 'isHidden', 'isPinned', 'size', 'network', 'symbol', 'shadowColor']);

src/components/coin-icon/index.js

@@ -1,5 +1,5 @@
 export { default as ChainBadge } from './ChainBadge';
-export { default as CoinIcon, CoinIconSize } from './CoinIcon';
+export { CoinIconSize } from './CoinIcon';
 export { default as CoinIconFallback } from './CoinIconFallback';
 export { default as CoinIconIndicator } from './CoinIconIndicator';
 export { default as RequestCoinIcon } from './RequestCoinIcon';

src/components/coin-row/CoinRow.js

@@ -1,9 +1,10 @@
 import React, { createElement } from 'react';
-import { CoinIcon, CoinIconSize } from '../coin-icon';
+import { CoinIconSize } from '../coin-icon';
 import { Column, Row } from '../layout';
 import { useAccountSettings } from '@/hooks';
 import styled from '@/styled-thing';
 import { padding } from '@/styles';
+import RainbowCoinIcon from '../coin-icon/RainbowCoinIcon';
 
 const CoinRowPaddingTop = 9;
 const CoinRowPaddingBottom = 10;
@@ -31,7 +32,7 @@ export default function CoinRow({
   badgeYPosition,
   bottomRowRender,
   children,
-  coinIconRender = CoinIcon,
+  coinIconRender = RainbowCoinIcon,
   containerStyles,
   contentStyles,
   isFirstCoinRow,

src/components/expanded-state/AvailableNetworks.js

@@ -11,7 +11,7 @@ import { ethereumUtils } from '@/utils';
 import { useTheme } from '@/theme';
 import { ButtonPressAnimation } from '../animations';
 import { Column, Row } from '../layout';
-import { ChainBadge, CoinIcon } from '../coin-icon';
+import { ChainBadge } from '../coin-icon';
 import Divider from '../Divider';
 import { Text } from '../text';
 import { EthCoinIcon } from '../coin-icon/EthCoinIcon';

src/components/gas/GasSpeedButton.js

@@ -2,15 +2,15 @@
 /* eslint-disable no-undef */
 import AnimateNumber from '@bankify/react-native-animate-number';
 import lang from 'i18n-js';
-import { isEmpty, isNaN, isNil, upperFirst } from 'lodash';
+import { isEmpty, isNaN, isNil } from 'lodash';
 import makeColorMoreChill from 'make-color-more-chill';
 import { AnimatePresence, MotiView } from 'moti';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { InteractionManager, Keyboard } from 'react-native';
 import { Easing } from 'react-native-reanimated';
 import { darkModeThemeColors } from '../../styles/colors';
 import { ButtonPressAnimation } from '../animations';
-import { ChainBadge, CoinIcon } from '../coin-icon';
+import { ChainBadge } from '../coin-icon';
 import { Centered, Column, Row } from '../layout';
 import { Text } from '../text';
 import { GasSpeedLabelPager } from '.';

src/components/positions/PositionsCard.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@/theme';
 
 import { GenericCard } from '../cards/GenericCard';
 import startCase from 'lodash/startCase';
-import { CoinIcon, RequestVendorLogoIcon } from '../coin-icon';
+import { RequestVendorLogoIcon } from '../coin-icon';
 import { EthereumAddress } from '@/entities';
 import { useNavigation } from '@/navigation';
 import Routes from '@/navigation/routesNames';
@@ -13,7 +13,6 @@ import { event } from '@/analytics/event';
 import { IS_ANDROID } from '@/env';
 import { capitalize, uniqBy } from 'lodash';
 import { RainbowDeposit, RainbowPosition } from '@/resources/defi/types';
-import { ethereumUtils } from '@/utils';
 import { Network } from '@/networks/types';
 import RainbowCoinIcon from '../coin-icon/RainbowCoinIcon';
 import { useAccountSettings } from '@/hooks';

src/components/walletconnect-list/WalletConnectV2ListItem.tsx

@@ -2,12 +2,12 @@ import React, { useCallback, useMemo } from 'react';
 import { SessionTypes } from '@walletconnect/types';
 import RadialGradient from 'react-native-radial-gradient';
 
-import { RequestVendorLogoIcon, CoinIcon } from '../coin-icon';
+import { RequestVendorLogoIcon } from '../coin-icon';
 import { ContactAvatar } from '../contacts';
 import ImageAvatar from '../contacts/ImageAvatar';
 import { ContextMenuButton } from '../context-menu';
 import { Centered, ColumnWithMargins, Row } from '../layout';
-import { Text, TruncatedText } from '../text';
+import { TruncatedText } from '../text';
 import { analytics } from '@/analytics';
 import { getAccountProfileInfo } from '@/helpers/accountInfo';
 import { findWalletWithAccount } from '@/helpers/findWalletWithAccount';
@@ -24,8 +24,6 @@ import { logger, RainbowError } from '@/logger';
 import { changeAccount, disconnectSession, isSupportedChain } from '@/walletConnect';
 import { Box, Inline } from '@/design-system';
 import ChainBadge from '@/components/coin-icon/ChainBadge';
-import { ETH_ADDRESS, ETH_SYMBOL } from '@/references';
-
 import { Network } from '@/helpers';
 import { EthCoinIcon } from '../coin-icon/EthCoinIcon';
 

src/screens/ExplainSheet.js

@@ -3,7 +3,7 @@ import lang from 'i18n-js';
 import React, { useCallback, useMemo } from 'react';
 import { Linking, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ChainBadge, CoinIcon, DashedWrapper } from '../components/coin-icon';
+import { ChainBadge, DashedWrapper } from '../components/coin-icon';
 import { Centered, Column, ColumnWithMargins, Row, RowWithMargins } from '../components/layout';
 import Routes from '@/navigation/routesNames';
 import { SheetActionButton, SheetTitle, SlackSheet } from '../components/sheet';

src/screens/SettingsSheet/components/CurrencySection.tsx

@@ -1,14 +1,19 @@
 import React, { useCallback } from 'react';
-import { Platform } from 'react-native';
+import { Platform, View } from 'react-native';
 import { reloadTimelines } from 'react-native-widgetkit';
-import { CoinIcon } from '../../../components/coin-icon';
 import Menu from './Menu';
 import MenuContainer from './MenuContainer';
 import MenuItem from './MenuItem';
 import { analytics } from '@/analytics';
 import { useAccountSettings } from '@/hooks';
-import { emojis, supportedNativeCurrencies } from '@/references';
+import { ETH_ADDRESS, WBTC_ADDRESS, emojis, supportedNativeCurrencies } from '@/references';
+import { BackgroundProvider, Box, Inline, Inset, Text } from '@/design-system';
+import { SimpleSheet } from '@/components/sheet/SimpleSheet';
+import * as i18n from '@/languages';
 import { Network } from '@/networks/types';
+import { useExternalToken } from '@/resources/assets/externalAssetsQuery';
+import RainbowCoinIcon from '@/components/coin-icon/RainbowCoinIcon';
+import { useTheme } from '@/theme';
 
 const emojiData = Object.entries(emojis).map(([emoji, { name }]) => [name, emoji]);
 
@@ -21,6 +26,9 @@ const currencyListItems = Object.values(supportedNativeCurrencies).map(({ curren
 
 const CurrencySection = () => {
   const { nativeCurrency, settingsChangeNativeCurrency } = useAccountSettings();
+  const theme = useTheme();
+  const { data: WBTC } = useExternalToken({ address: WBTC_ADDRESS, network: Network.mainnet, currency: nativeCurrency });
+  const { data: ETH } = useExternalToken({ address: ETH_ADDRESS, network: Network.mainnet, currency: nativeCurrency });
 
   const onSelectCurrency = useCallback(
     (currency: any) => {
@@ -35,26 +43,49 @@ const CurrencySection = () => {
   );
 
   return (
-    <MenuContainer>
-      <Menu>
-        {currencyListItems.map(({ label, emojiName, currency }: any) => (
-          <MenuItem
-            key={currency}
-            leftComponent={
-              emojiName ? (
-                <MenuItem.TextIcon icon={(emoji.get('flag_' + emojiName) as string) || ''} isEmoji />
-              ) : (
-                <CoinIcon address={currency} size={23} style={{ marginLeft: 7 }} symbol={currency} network={Network.mainnet} />
-              )
-            }
-            onPress={() => onSelectCurrency(currency)}
-            rightComponent={currency === nativeCurrency && <MenuItem.StatusIcon status="selected" />}
-            size={52}
-            titleComponent={<MenuItem.Title text={label} />}
-          />
-        ))}
-      </Menu>
-    </MenuContainer>
+    <BackgroundProvider color="surfaceSecondary">
+      {({ backgroundColor }) => (
+        <SimpleSheet backgroundColor={backgroundColor as string}>
+          <Inset top="20px" horizontal="20px" bottom="60px">
+            <Inline alignHorizontal="center" alignVertical="center">
+              <Box paddingBottom="12px">
+                <Text size="22pt" weight="heavy" color="label">
+                  {i18n.t(i18n.l.settings.currency)}
+                </Text>
+              </Box>
+            </Inline>
+            <MenuContainer>
+              <Menu>
+                {currencyListItems.map(({ label, emojiName, currency }: any) => (
+                  <MenuItem
+                    key={currency}
+                    leftComponent={
+                      emojiName ? (
+                        <MenuItem.TextIcon icon={(emoji.get('flag_' + emojiName) as string) || ''} isEmoji />
+                      ) : (
+                        <View style={{ marginLeft: 7 }}>
+                          <RainbowCoinIcon
+                            icon={currency === ETH?.symbol ? ETH?.icon_url : WBTC?.icon_url}
+                            size={23}
+                            symbol={currency}
+                            network={Network.mainnet}
+                            theme={theme}
+                          />
+                        </View>
+                      )
+                    }
+                    onPress={() => onSelectCurrency(currency)}
+                    rightComponent={currency === nativeCurrency && <MenuItem.StatusIcon status="selected" />}
+                    size={52}
+                    titleComponent={<MenuItem.Title text={label} />}
+                  />
+                ))}
+              </Menu>
+            </MenuContainer>
+          </Inset>
+        </SimpleSheet>
+      )}
+    </BackgroundProvider>
   );
 };
 

src/screens/WalletConnectApprovalSheet.js

@@ -6,7 +6,7 @@ import ChainLogo from '../components/ChainLogo';
 import Divider from '../components/Divider';
 import Spinner from '../components/Spinner';
 import ButtonPressAnimation from '../components/animations/ButtonPressAnimation';
-import { RequestVendorLogoIcon, CoinIcon } from '../components/coin-icon';
+import { RequestVendorLogoIcon } from '../components/coin-icon';
 import { ContactAvatar } from '../components/contacts';
 import ImageAvatar from '../components/contacts/ImageAvatar';
 import { Centered, Column, Flex, Row } from '../components/layout';
@@ -25,9 +25,7 @@ import { Network } from '@/helpers';
 import { Box, Columns, Column as RDSColumn, Inline, Text } from '@/design-system';
 import ChainBadge from '@/components/coin-icon/ChainBadge';
 import * as lang from '@/languages';
-import { ETH_ADDRESS, ETH_SYMBOL } from '@/references';
 import { RainbowNetworks, getNetworkObj } from '@/networks';
-import { IS_IOS } from '@/env';
 import { useDappMetadata } from '@/resources/metadata/dapp';
 import { DAppStatus } from '@/graphql/__generated__/metadata';
 import { InfoAlert } from '@/components/info-alert/info-alert';

src/screens/mints/MintSheet.tsx

@@ -19,7 +19,7 @@ import { useNavigation } from '@/navigation';
 import styled from '@/styled-thing';
 import { position } from '@/styles';
 import { useTheme } from '@/theme';
-import { CoinIcon, abbreviations, ethereumUtils, watchingAlert } from '@/utils';
+import { abbreviations, ethereumUtils, watchingAlert } from '@/utils';
 import { usePersistentDominantColorFromImage } from '@/hooks/usePersistentDominantColorFromImage';
 import { maybeSignUri } from '@/handlers/imgix';
 import { ButtonPressAnimation } from '@/components/animations';