fix(suite): select token fixes

trezor · Nov 5, 2024 · db25fc3 · db25fc3
1 parent dc7bfe3
commit db25fc3
Show file tree

Hide file tree

Showing 15 changed files with 145 additions and 337 deletions.
diff --git a/packages/components/src/components/AssetLogo/AssetLogo.tsx b/packages/components/src/components/AssetLogo/AssetLogo.tsx
@@ -72,6 +72,7 @@ export const AssetLogo = ({
 
     const logoUrl = getAssetLogoUrl({ coingeckoId, contractAddress });
     const logoUrl2x = getAssetLogoUrl({ coingeckoId, contractAddress, quality: '@2x' });
+
     const frameProps = pickAndPrepareFrameProps(rest, allowedAssetLogoFrameProps);
 
     const handleLoad = () => {
@@ -81,10 +82,8 @@ export const AssetLogo = ({
         setIsPlaceholder(true);
     };
     useEffect(() => {
-        if (shouldTryToFetch) {
-            setIsPlaceholder(false);
-        }
-    }, [shouldTryToFetch, fileName]);
+        setIsPlaceholder(!shouldTryToFetch);
+    }, [shouldTryToFetch]);
 
     return (
         <Container $size={size} {...frameProps}>

diff --git a/packages/components/src/components/form/Select/Select.tsx b/packages/components/src/components/form/Select/Select.tsx
@@ -119,7 +119,7 @@ type WrapperProps = TransientProps<
     $isWithPlaceholder: boolean;
     $hasBottomPadding: boolean;
     $elevation: Elevation;
-    $focusEnabled: boolean;
+    $isFocusEnabled: boolean;
 };
 
 const Wrapper = styled.div<WrapperProps>`
@@ -163,8 +163,8 @@ const Wrapper = styled.div<WrapperProps>`
         }
 
         &:focus-within {
-            ${({ $focusEnabled }) =>
-                $focusEnabled
+            ${({ $isFocusEnabled }) =>
+                $isFocusEnabled
                     ? css`
                           .${reactSelectClassNamePrefix}__dropdown-indicator {
                               transform: rotate(180deg);
@@ -278,7 +278,7 @@ interface CommonProps extends Omit<ReactSelectProps<Option>, 'onChange' | 'menuI
      * @description pass `null` if bottom text can be `undefined`
      */
     bottomText?: ReactNode;
-    focusEnabled?: boolean;
+    isFocusEnabled?: boolean;
     hasBottomPadding?: boolean;
     minValueWidth?: string; // TODO: should be probably removed
     inputState?: InputState;
@@ -305,7 +305,7 @@ export const Select = ({
     useKeyPressScroll,
     isSearchable = false,
     minValueWidth = 'initial',
-    focusEnabled = true,
+    isFocusEnabled = true,
     isMenuOpen,
     inputState,
     components,
@@ -368,7 +368,7 @@ export const Select = ({
             $minValueWidth={minValueWidth}
             $isDisabled={isDisabled}
             $isMenuOpen={isMenuOpen}
-            $focusEnabled={focusEnabled}
+            $isFocusEnabled={isFocusEnabled}
             $isWithLabel={!!label}
             $isWithPlaceholder={!!placeholder}
             $hasBottomPadding={hasBottomPadding === true && bottomText === null}

diff --git a/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx b/packages/product-components/src/components/SelectAssetModal/AssetItem.tsx
@@ -29,9 +29,9 @@ const BadgeWrapper = styled.div`
 
 type AssetItemProps = {
     name?: string;
-    symbol: NetworkSymbol;
+    symbol: string;
     badge: string | undefined;
-    networkSymbol: NetworkSymbol;
+    networkSymbol: NetworkSymbol | ({} & string);
     coingeckoId: string;
     logo: JSX.Element;
     isFavorite?: boolean;

diff --git a/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx b/packages/product-components/src/components/SelectAssetModal/SelectAssetModal.tsx
@@ -15,6 +15,7 @@ import { useIntl } from 'react-intl';
 import { AssetItemNotFound } from './AssetItemNotFound';
 import { getNetworkByCoingeckoId, Network, NetworkSymbol } from '@suite-common/wallet-config';
 import { SendTokenTabs } from './SendTokenTabs';
+import { getContractAddressForNetwork } from '@suite-common/wallet-utils';
 
 export interface SelectAssetOptionCurrencyProps {
     type: 'currency';
@@ -254,17 +255,24 @@ export const SelectAssetModal = ({
                                 <AssetItem
                                     key={`${symbol}-${name}`}
                                     name={name}
-                                    symbol={symbol as NetworkSymbol}
+                                    symbol={symbol}
                                     coingeckoId={coingeckoId}
                                     contractAddress={contractAddress || null}
-                                    networkSymbol={networkSymbol as NetworkSymbol}
+                                    networkSymbol={networkSymbol}
                                     isFavorite={isFavorite}
                                     badge={badge}
                                     logo={
                                         <AssetLogo
                                             size={24}
                                             coingeckoId={coingeckoId}
-                                            contractAddress={contractAddress?.toLowerCase()}
+                                            contractAddress={
+                                                networkSymbol && contractAddress
+                                                    ? getContractAddressForNetwork(
+                                                          networkSymbol as NetworkSymbol,
+                                                          contractAddress,
+                                                      )
+                                                    : undefined
+                                            }
                                             placeholder={symbol.toUpperCase()}
                                         />
                                     }

diff --git a/packages/product-components/src/components/TokenIconSet/TokenIconSet.tsx b/packages/product-components/src/components/TokenIconSet/TokenIconSet.tsx
@@ -1,6 +1,7 @@
 import { AssetLogo, useElevation } from '@trezor/components';
 import { getCoingeckoId, NetworkSymbol } from '@suite-common/wallet-config';
 import { TokenInfo } from '@trezor/connect';
+import { getContractAddressForNetwork } from '@suite-common/wallet-utils';
 
 import styled, { css } from 'styled-components';
 import { borders, Elevation, mapElevationToBackground, mapElevationToBorder } from '@trezor/theme';
@@ -56,7 +57,7 @@ export const TokenIconSet = ({ network, tokens }: TokenIconSetProps) => {
                     key={token.contract}
                     size={20}
                     coingeckoId={coingeckoId ?? ''}
-                    contractAddress={token.contract.toLowerCase()}
+                    contractAddress={getContractAddressForNetwork(network, token.contract)}
                     placeholder={token.symbol?.toUpperCase() ?? ''}
                     placeholderWithTooltip={false}
                 />

diff --git a/.../coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx b/.../coinmarket/common/CoinmarketForm/CoinmarketFormInput/CoinmarketFormInputCryptoSelect.tsx
@@ -30,7 +30,11 @@ import {
     SelectAssetOptionCurrencyProps,
     SelectAssetOptionProps,
 } from '@trezor/product-components';
-import { networks, NetworkSymbol } from '@suite-common/wallet-config';
+import {
+    getNetworkByCoingeckoNativeId,
+    networks,
+    NetworkSymbol,
+} from '@suite-common/wallet-config';
 import {
     FORM_CRYPTO_CURRENCY_SELECT,
     FORM_RECEIVE_CRYPTO_CURRENCY_SELECT,
@@ -76,7 +80,9 @@ export const CoinmarketFormInputCryptoSelect = <
                     ? {
                           ...option,
                           symbol: option.label.toUpperCase(),
-                          networkSymbol: parseCryptoId(option.value).networkId,
+                          networkSymbol:
+                              getNetworkByCoingeckoNativeId(parseCryptoId(option.value).networkId)
+                                  ?.symbol || parseCryptoId(option.value).networkId,
                           contractAddress: option.contractAddress ?? null,
                       }
                     : option,

diff --git a/packages/suite/src/views/wallet/send/Outputs/Amount/TokenSelect.tsx b/packages/suite/src/views/wallet/send/Outputs/Amount/TokenSelect.tsx