feat(suite): remake TokenSelect

trezor · Oct 18, 2024 · fc035ee · fc035ee
1 parent 1e35dda
commit fc035ee
Show file tree

Hide file tree

Showing 6 changed files with 212 additions and 104 deletions.
diff --git a/packages/components/src/components/AssetLogo/AssetLogo.tsx b/packages/components/src/components/AssetLogo/AssetLogo.tsx
@@ -63,7 +63,6 @@ export const AssetLogo = ({
     const [isPlaceholder, setIsPlaceholder] = useState(!shouldTryToFetch);
     const fileName = contractAddress ? `${coingeckoId}--${contractAddress}` : coingeckoId;
     const logoUrl = getAssetLogoUrl(fileName);
-
     const frameProps = pickAndPrepareFrameProps(rest, allowedAssetLogoFrameProps);
 
     const handleLoad = () => {
@@ -73,8 +72,10 @@ export const AssetLogo = ({
         setIsPlaceholder(true);
     };
     useEffect(() => {
-        setIsPlaceholder(!shouldTryToFetch);
-    }, [shouldTryToFetch]);
+        if (shouldTryToFetch) {
+            setIsPlaceholder(false);
+        }
+    }, [shouldTryToFetch, fileName]);
 
     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
@@ -109,6 +109,7 @@ type WrapperProps = TransientProps<
     $isWithPlaceholder: boolean;
     $hasBottomPadding: boolean;
     $elevation: Elevation;
+    $focusEnabled: boolean;
 };
 
 const Wrapper = styled.div<WrapperProps>`
@@ -152,9 +153,16 @@ const Wrapper = styled.div<WrapperProps>`
         }
 
         &:focus-within {
-            .${reactSelectClassNamePrefix}__dropdown-indicator {
-                transform: rotate(180deg);
-            }
+            ${({ $focusEnabled }) =>
+                $focusEnabled
+                    ? css`
+                          .${reactSelectClassNamePrefix}__dropdown-indicator {
+                              transform: rotate(180deg);
+                          }
+                      `
+                    : css`
+                          border-color: transparent;
+                      `}
         }
     }
 
@@ -258,6 +266,7 @@ interface CommonProps extends Omit<ReactSelectProps<Option>, 'onChange' | 'menuI
      * @description pass `null` if bottom text can be `undefined`
      */
     bottomText?: ReactNode;
+    focusEnabled?: boolean;
     hasBottomPadding?: boolean;
     minValueWidth?: string; // TODO: should be probably removed
     inputState?: InputState;
@@ -284,6 +293,7 @@ export const Select = ({
     useKeyPressScroll,
     isSearchable = false,
     minValueWidth = 'initial',
+    focusEnabled = true,
     isMenuOpen,
     inputState,
     components,
@@ -345,6 +355,7 @@ export const Select = ({
             $minValueWidth={minValueWidth}
             $isDisabled={isDisabled}
             $isMenuOpen={isMenuOpen}
+            $focusEnabled={focusEnabled}
             $isWithLabel={!!label}
             $isWithPlaceholder={!!placeholder}
             $hasBottomPadding={hasBottomPadding === true && bottomText === null}

diff --git a/packages/suite/src/components/suite/CoinBalance.tsx b/packages/suite/src/components/suite/CoinBalance.tsx
@@ -3,7 +3,7 @@ import { FormattedCryptoAmount } from 'src/components/suite';
 
 interface CoinBalanceProps {
     value: string;
-    symbol: Account['symbol'];
+    symbol: Account['symbol'] | (string & {});
 }
 
 export const CoinBalance = ({ value, symbol }: CoinBalanceProps) => (

diff --git a/packages/suite/src/views/wallet/send/Outputs/Amount/Amount.tsx b/packages/suite/src/views/wallet/send/Outputs/Amount/Amount.tsx
@@ -30,7 +30,6 @@ import {
     validateReserveOrBalance,
 } from 'src/utils/suite/validation';
 import { formatTokenSymbol } from 'src/utils/wallet/tokenUtils';
-import { TokenSelect } from './TokenSelect';
 import { FiatInput } from './FiatInput';
 import { SendMaxSwitch } from './SendMaxSwitch';
 
@@ -277,7 +276,7 @@ export const Amount = ({ output, outputId }: AmountProps) => {
                         control={control}
                         innerAddon={
                             withTokens ? (
-                                <TokenSelect output={output} outputId={outputId} />
+                                <Symbol>{token?.symbol?.toUpperCase()}</Symbol>
                             ) : (
                                 <Symbol>{symbolToUse}</Symbol>
                             )