asset color assets not in wallet (#4691)

(cherry picked from commit 25c5627)
rainbow-me · Mar 3, 2023 · 714fc50 · 714fc50
1 parent 22c0f94
commit 714fc50
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 73 deletions.
diff --git a/src/components/buttons/TokenSelectionButton.js b/src/components/buttons/TokenSelectionButton.js
@@ -37,38 +37,27 @@ const CaretIcon = styled(ImgixImage).attrs(({ theme: { colors } }) => ({
 });
 
 export default function TokenSelectionButton({
-  address,
-  mainnetAddress,
+  color,
   borderRadius = 30,
   onPress,
   symbol,
   testID,
-  type,
 }) {
   const { isDarkMode, colors } = useTheme();
 
-  const colorForAsset = useColorForAsset(
-    {
-      address,
-      mainnet_address: mainnetAddress,
-      type: mainnetAddress ? AssetType.token : type,
-    },
-    address ? undefined : colors.appleBlue
-  );
-
   const shadowsForAsset = useMemo(
     () => [
       [0, 10, 30, colors.shadow, 0.2],
-      [0, 5, 15, colorForAsset, isDarkMode ? 0 : 0.4],
+      [0, 5, 15, color, isDarkMode ? 0 : 0.4],
     ],
-    [colorForAsset, colors.shadow, isDarkMode]
+    [color, colors.shadow, isDarkMode]
   );
 
   return (
     <ButtonPressAnimation
       borderRadius={borderRadius}
       contentContainerStyle={{
-        backgroundColor: colorForAsset,
+        backgroundColor: color,
         borderRadius,
       }}
       {...(symbol && { maxWidth: TokenSelectionButtonMaxWidth })}
@@ -78,7 +67,7 @@ export default function TokenSelectionButton({
     >
       <ShadowStack
         {...position.coverAsObject}
-        backgroundColor={colorForAsset}
+        backgroundColor={color}
         borderRadius={borderRadius}
         elevation={TokenSelectionButtonElevation}
         shadows={shadowsForAsset}

diff --git a/src/components/exchange/ExchangeField.tsx b/src/components/exchange/ExchangeField.tsx
@@ -16,9 +16,7 @@ import { TokenSelectionButton } from '../buttons';
 import { ChainBadge, CoinIcon, CoinIconSize } from '../coin-icon';
 import { EnDash } from '../text';
 import ExchangeInput from './ExchangeInput';
-import { AssetType } from '@/entities';
 import { Network } from '@/helpers';
-import { useColorForAsset } from '@/hooks';
 import styled from '@/styled-thing';
 import { borders } from '@/styles';
 import { useTheme } from '@/theme';
@@ -38,6 +36,7 @@ const Input = styled(ExchangeInput).attrs({
 
 interface ExchangeFieldProps {
   address: string;
+  color: string;
   mainnetAddress?: string;
   amount: string | null;
   disableCurrencySelection?: boolean;
@@ -62,6 +61,7 @@ const ExchangeField: ForwardRefRenderFunction<TextInput, ExchangeFieldProps> = (
     address,
     mainnetAddress,
     amount,
+    color,
     disableCurrencySelection,
     editable,
     loading,
@@ -84,14 +84,6 @@ const ExchangeField: ForwardRefRenderFunction<TextInput, ExchangeFieldProps> = (
   const { colors } = useTheme();
   const [value, setValue] = useState(amount);
 
-  const colorForAsset = useColorForAsset(
-    {
-      address,
-      mainnet_address: mainnetAddress,
-      type: mainnetAddress ? AssetType.token : type,
-    },
-    address ? undefined : colors.appleBlue
-  );
   const handleFocusField = useCallback(() => {
     inputRef?.current?.focus();
   }, [inputRef]);
@@ -182,10 +174,10 @@ const ExchangeField: ForwardRefRenderFunction<TextInput, ExchangeFieldProps> = (
 
           <Input
             {...(android &&
-              colorForAsset && {
-                selectionColor: colors.alpha(colorForAsset, 0.4),
+              color && {
+                selectionColor: colors.alpha(color, 0.4),
               })}
-            color={colorForAsset}
+            color={color}
             editable={editable}
             onBlur={handleBlur}
             onChangeText={onChangeText}
@@ -202,12 +194,10 @@ const ExchangeField: ForwardRefRenderFunction<TextInput, ExchangeFieldProps> = (
       </TouchableWithoutFeedback>
       {!disableCurrencySelection && (
         <TokenSelectionButton
-          address={address}
-          mainnetAddress={mainnetAddress}
+          color={color}
           onPress={onPressSelectCurrency}
           symbol={symbol}
           testID={testID + '-selection-button'}
-          type={type}
         />
       )}
     </Box>

diff --git a/src/components/exchange/ExchangeInputField.tsx b/src/components/exchange/ExchangeInputField.tsx
@@ -22,6 +22,7 @@ const NativeFieldRow = styled(Row).attrs({
 });
 
 interface ExchangeInputFieldProps {
+  color: string;
   disableInputCurrencySelection: boolean;
   editable: boolean;
   loading: boolean;
@@ -45,6 +46,7 @@ interface ExchangeInputFieldProps {
 }
 
 export default function ExchangeInputField({
+  color,
   disableInputCurrencySelection,
   editable,
   inputAmount,
@@ -70,6 +72,7 @@ export default function ExchangeInputField({
     <Container>
       <ExchangeField
         address={inputCurrencyAddress}
+        color={color}
         amount={inputAmount}
         disableCurrencySelection={disableInputCurrencySelection}
         editable={editable}
@@ -88,27 +91,23 @@ export default function ExchangeInputField({
       />
       <NativeFieldRow>
         <ExchangeNativeField
-          address={inputCurrencyAddress}
+          color={color}
           editable={editable}
           height={64}
           loading={loading}
-          mainnetAddress={inputCurrencyMainnetAddress}
           nativeAmount={nativeAmount}
           nativeCurrency={nativeCurrency}
           onFocus={onFocus}
           ref={nativeFieldRef}
           setNativeAmount={setNativeAmount}
           testID={testID + '-native'}
-          type={inputCurrencyAssetType}
           updateOnFocus={updateAmountOnFocus}
         />
         <ExchangeMaxButton
-          address={inputCurrencyAddress}
+          color={color}
           disabled={!inputCurrencySymbol}
-          mainnetAddress={inputCurrencyMainnetAddress}
           onPress={onPressMaxBalance}
           testID={testID + '-max'}
-          type={inputCurrencyAssetType}
         />
       </NativeFieldRow>
     </Container>

diff --git a/src/components/exchange/ExchangeMaxButton.tsx b/src/components/exchange/ExchangeMaxButton.tsx
@@ -2,43 +2,28 @@ import lang from 'i18n-js';
 import React from 'react';
 import { ButtonPressAnimation } from '../animations';
 import { Box, Text } from '@/design-system';
-import { useColorForAsset } from '@/hooks';
 import styled from '@/styled-thing';
 import { useTheme } from '@/theme';
-import { AssetType } from '@/entities';
 
 const Container = styled(ButtonPressAnimation)({
   marginRight: 4,
 });
 
 interface ExchangeMaxButtonProps {
-  address: string;
-  mainnetAddress?: string;
+  color: string;
   disabled: boolean;
   onPress: () => void;
   testID: string;
-  type?: string;
 }
 
 export default function ExchangeMaxButton({
-  address,
-  mainnetAddress,
+  color,
   disabled,
   onPress,
   testID,
-  type,
 }: ExchangeMaxButtonProps) {
   const { colors } = useTheme();
 
-  const colorForAsset = useColorForAsset(
-    {
-      address,
-      mainnet_address: mainnetAddress,
-      type: mainnetAddress ? AssetType.token : type,
-    },
-    address ? undefined : colors.appleBlue
-  );
-
   return (
     <Container disabled={disabled} onPress={onPress} testID={testID}>
       <Box
@@ -51,7 +36,7 @@ export default function ExchangeMaxButton({
           weight="bold"
           align="center"
           size="17pt"
-          color={{ custom: colorForAsset || colors.appleBlue }}
+          color={{ custom: color || colors.appleBlue }}
         >
           􀜍 {lang.t('exchange.max')}
         </Text>

diff --git a/src/components/exchange/ExchangeNativeField.tsx b/src/components/exchange/ExchangeNativeField.tsx
@@ -9,7 +9,6 @@ import React, {
 import { TextInput, TouchableWithoutFeedback } from 'react-native';
 import { Row } from '../layout';
 import ExchangeInput from './ExchangeInput';
-import { useColorForAsset } from '@/hooks';
 import { supportedNativeCurrencies } from '@/references';
 import styled from '@/styled-thing';
 import { fonts } from '@/styles';
@@ -26,7 +25,7 @@ const NativeInput = styled(ExchangeInput).attrs({
 });
 
 interface ExchangeNativeFieldProps {
-  address: string;
+  color: string;
   editable: boolean;
   height: number;
   loading: boolean;
@@ -35,8 +34,6 @@ interface ExchangeNativeFieldProps {
   onFocus: ({ target }: { target: Element }) => void;
   setNativeAmount: (value: string | null) => void;
   updateOnFocus: boolean;
-  mainnetAddress?: string;
-  type?: string;
   testID: string;
 }
 
@@ -45,7 +42,7 @@ const ExchangeNativeField: ForwardRefRenderFunction<
   ExchangeNativeFieldProps
 > = (
   {
-    address,
+    color,
     editable,
     height,
     loading,
@@ -54,18 +51,12 @@ const ExchangeNativeField: ForwardRefRenderFunction<
     onFocus,
     setNativeAmount,
     updateOnFocus,
-    mainnetAddress,
-    type,
     testID,
   },
   ref
 ) => {
   const nativeFieldRef = ref as MutableRefObject<TextInput>;
-  const colorForAsset = useColorForAsset({
-    address,
-    mainnet_address: mainnetAddress,
-    type,
-  });
+
   const [value, setValue] = useState(nativeAmount);
 
   const { mask, placeholder, symbol } = supportedNativeCurrencies[
@@ -137,7 +128,7 @@ const ExchangeNativeField: ForwardRefRenderFunction<
           onFocus={handleFocus}
           placeholder={placeholder}
           ref={nativeFieldRef}
-          selectionColor={colorForAsset}
+          selectionColor={color}
           testID={testID}
           value={isFocused ? value : nativeAmount}
         />

diff --git a/src/components/exchange/ExchangeOutputField.tsx b/src/components/exchange/ExchangeOutputField.tsx
@@ -5,6 +5,7 @@ import { Box } from '@rainbow-me/design-system';
 import { Network } from '@rainbow-me/helpers';
 
 interface ExchangeOutputFieldProps {
+  color: string;
   editable: boolean;
   loading: boolean;
   network: Network;
@@ -23,6 +24,7 @@ interface ExchangeOutputFieldProps {
 }
 
 export default function ExchangeOutputField({
+  color,
   editable,
   loading,
   network,
@@ -50,6 +52,7 @@ export default function ExchangeOutputField({
       <ExchangeField
         address={outputCurrencyAddress}
         amount={outputAmount}
+        color={color}
         editable={editable}
         loading={loading}
         mainnetAddress={outputCurrencyMainnetAddress}

diff --git a/src/hooks/useColorForAsset.ts b/src/hooks/useColorForAsset.ts
@@ -12,14 +12,14 @@ export default function useColorForAsset(
 ) {
   // @ts-expect-error ts-migrate(2304) FIXME: Cannot find name 'useTheme'.
   const { isDarkMode: isDarkModeTheme, colors } = useTheme();
-  const { address, mainnet_address, type } = asset;
   const accountAsset = ethereumUtils.getAssetFromAllAssets(
-    asset?.uniqueId || mainnet_address || address
+    asset?.uniqueId || asset?.mainnet_address || asset?.address
   );
-  const resolvedAddress = mainnet_address || address || accountAsset?.address;
+  const resolvedAddress =
+    asset?.mainnet_address || asset?.address || accountAsset?.address;
 
   const derivedColor = usePersistentDominantColorFromImage(
-    accountAsset?.icon_url
+    accountAsset?.icon_url || asset?.icon_url
   );
   const isDarkMode = forceLightMode || isDarkModeTheme;
 
@@ -44,6 +44,10 @@ export default function useColorForAsset(
     if (isETH(resolvedAddress)) {
       color2Return = colorDerivedFromAddress;
 
+      // image derived color from BE for tokens passed via params (usually assets not in wallet)
+    } else if (asset?.colors?.primary) {
+      color2Return = asset?.colors?.primary;
+
       // token image derived color from BE
     } else if (accountAsset?.colors?.primary) {
       color2Return = accountAsset?.colors?.primary;
@@ -77,6 +81,7 @@ export default function useColorForAsset(
   }, [
     accountAsset?.colors?.fallback,
     accountAsset?.colors?.primary,
+    asset?.colors?.primary,
     colorDerivedFromAddress,
     colors,
     derivedColor,