Fix/cardano

packages/blockchain-link-utils/src/blockfrost.ts

@@ -17,7 +17,13 @@ import type {
     TransferType,
 } from '@trezor/blockchain-link-types/src/common';
 
-import { enhanceVinVout, filterTargets, sumVinVout, transformTarget } from './utils';
+import {
+    enhanceVinVout,
+    filterTargets,
+    formatTokenSymbol,
+    sumVinVout,
+    transformTarget,
+} from './utils';
 
 export const transformUtxos = (utxos: BlockfrostUtxos[]): Utxo[] => {
     const result: Utxo[] = [];
@@ -97,7 +103,7 @@ export const transformTokenInfo = (
             type: 'BLOCKFROST',
             name: token.fingerprint!, // this is safe as fingerprint is defined for all tokens except lovelace and lovelace is never included in account.tokens
             contract: token.unit,
-            symbol: assetName || token.fingerprint!,
+            symbol: assetName || formatTokenSymbol(token.fingerprint!),
             balance: token.quantity,
             decimals: token.decimals,
         };
@@ -159,7 +165,7 @@ export const filterTokenTransfers = (
                 transfers.push({
                     type,
                     name: asset.fingerprint,
-                    symbol: assetName || asset.fingerprint,
+                    symbol: assetName || formatTokenSymbol(asset.fingerprint),
                     contract: asset.unit,
                     decimals: asset.decimals,
                     amount: amount.toString(),

packages/blockchain-link-utils/src/solana.ts

@@ -17,6 +17,8 @@ import type {
 import type { TokenInfo } from '@trezor/blockchain-link-types/src';
 import { isCodesignBuild } from '@trezor/env-utils';
 
+import { formatTokenSymbol } from './utils';
+
 export type ApiTokenAccount = { account: AccountInfo<ParsedAccountData>; pubkey: PublicKey };
 
 // Docs regarding solana programs: https://spl.solana.com/
@@ -56,7 +58,7 @@ export const getTokenNameAndSymbol = (mint: string, tokenDetailByMint: TokenDeta
         ? { name: tokenDetail.name, symbol: tokenDetail.symbol }
         : {
               name: mint,
-              symbol: `${mint.slice(0, 3)}...`,
+              symbol: formatTokenSymbol(mint),
           };
 };
 

packages/blockchain-link-utils/src/tests/fixtures/solana.ts

@@ -684,7 +684,7 @@ export const fixtures = {
                     contract: 'So11111111111111111111111111111111111115555',
                     decimals: 1,
                     name: 'So11111111111111111111111111111111111115555',
-                    symbol: 'So1...',
+                    symbol: 'SO11111...',
                     amount: '1534951700',
                 },
             ],
@@ -739,7 +739,7 @@ export const fixtures = {
                     contract: 'DH1nKg3QZStnVh4bjm8kyWfsRJkiweXcnL4j7Ug3PfYA',
                     decimals: 1,
                     name: 'DH1nKg3QZStnVh4bjm8kyWfsRJkiweXcnL4j7Ug3PfYA',
-                    symbol: 'DH1...',
+                    symbol: 'DH1NKG3...',
                     amount: '2',
                 },
             ],
@@ -812,7 +812,7 @@ export const fixtures = {
             },
             expectedOutput: {
                 name: 'AQoKYV7tYpTrFZN6P5oUufbQKAUr9mNYGe1TTJC5wajM',
-                symbol: 'AQo...',
+                symbol: 'AQOKYV7...',
             },
         },
         {

packages/blockchain-link-utils/src/utils.ts

@@ -69,3 +69,11 @@ export const sortTxsFromLatest = (transactions: Transaction[]) => {
 
     return txs;
 };
+
+// should be aligned with "formatTokenSymbol" in suite
+export const formatTokenSymbol = (symbol: string) => {
+    const upperCasedSymbol = symbol.toUpperCase();
+    const isTokenSymbolLong = upperCasedSymbol.length > 7;
+
+    return isTokenSymbolLong ? `${upperCasedSymbol.slice(0, 7)}...` : upperCasedSymbol;
+};

packages/suite/src/components/suite/FiatValue.tsx

@@ -86,7 +86,8 @@ export const FiatValue = ({
 
     if (
         (!fiatRateValue || !value || !currentRate?.lastTickerTimestamp || isLoading) &&
-        showLoadingSkeleton
+        showLoadingSkeleton &&
+        !currentRate?.error
     ) {
         return <SkeletonRectangle animate={shouldAnimate} />;
     }

packages/suite/src/utils/wallet/tokenUtils.ts

@@ -54,9 +54,9 @@ export const enhanceTokensWithRates = (
     return tokensWithRates;
 };
 
-export const formatTokenSymbol = (symbol?: string) => {
-    const tokenSymbol = symbol?.toUpperCase() || 'N/A';
-    const isTokenSymbolLong = tokenSymbol.length > 7;
+export const formatTokenSymbol = (symbol: string) => {
+    const upperCasedSymbol = symbol.toUpperCase();
+    const isTokenSymbolLong = upperCasedSymbol.length > 7;
 
-    return isTokenSymbolLong ? `${tokenSymbol.slice(0, 7)}...` : tokenSymbol;
+    return isTokenSymbolLong ? `${upperCasedSymbol.slice(0, 7)}...` : upperCasedSymbol;
 };

packages/suite/src/views/wallet/send/components/Outputs/components/Amount/components/TokenSelect.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useEffect } from 'react';
 import { Controller } from 'react-hook-form';
-import { Select, variables } from '@trezor/components';
-import { components } from 'react-select';
+import { Select } from '@trezor/components';
 import styled from 'styled-components';
 import { useSendFormContext } from 'src/hooks/wallet';
 import { Account } from 'src/types/wallet';
@@ -17,7 +16,6 @@ import {
     formatTokenSymbol,
     sortTokensWithRates,
 } from 'src/utils/wallet/tokenUtils';
-import { getShortFingerprint } from '@suite-common/wallet-utils';
 import { selectLocalCurrency } from 'src/reducers/wallet/settingsReducer';
 import { FiatCurrencyCode } from '@suite-common/suite-config';
 import {
@@ -35,7 +33,6 @@ interface Option {
     options: {
         label: string;
         value: string | null;
-        fingerprint?: string;
     }[];
     label?: React.ReactNode;
 }
@@ -45,10 +42,10 @@ export const buildTokenOptions = (
     symbol: Account['symbol'],
     coinDefinitions: TokenDefinitions['coin'],
 ) => {
-    // ETH option
+    // native token option
     const result: Option[] = [
         {
-            options: [{ value: null, fingerprint: undefined, label: symbol.toUpperCase() }],
+            options: [{ value: null, label: symbol.toUpperCase() }],
         },
     ];
 
@@ -61,7 +58,8 @@ export const buildTokenOptions = (
                 return;
             }
 
-            const tokenSymbol = formatTokenSymbol(token.symbol);
+            // if symbol is missing, use start of contract address
+            const tokenSymbol = formatTokenSymbol(token.symbol || token.contract);
 
             if (
                 !hasCoinDefinitions ||
@@ -70,13 +68,11 @@ export const buildTokenOptions = (
                 result[0].options.push({
                     value: token.contract,
                     label: tokenSymbol,
-                    fingerprint: token.name,
                 });
             } else {
                 unknownTokens.push({
                     value: token.contract,
                     label: tokenSymbol,
-                    fingerprint: token.name,
                 });
             }
         });
@@ -104,67 +100,6 @@ interface TokenSelectProps {
     outputId: number;
 }
 
-const OptionValueName = styled.div`
-    text-overflow: ellipsis;
-    overflow: hidden;
-    height: 1.2em;
-    white-space: nowrap;
-    margin: 5px 0;
-`;
-
-const OptionWrapper = styled.div`
-    max-width: 200px;
-
-    @media (max-width: ${variables.SCREEN_SIZE.XL}) {
-        max-width: 120px;
-    }
-`;
-
-const OptionValue = styled.div`
-    word-break: break-all;
-    font-variant-numeric: slashed-zero tabular-nums;
-`;
-
-const OptionEmptyName = styled.div`
-    font-style: italic;
-`;
-
-const CardanoOption = ({ tokenInputName, ...optionProps }: any) => (
-    <components.Option
-        {...optionProps}
-        innerProps={{
-            ...optionProps.innerProps,
-            'data-test': `${tokenInputName}/option/${optionProps.value}`,
-        }}
-    >
-        <OptionWrapper>
-            <OptionValueName>
-                {optionProps.data.fingerprint &&
-                optionProps.data.label.toLowerCase() ===
-                    optionProps.data.fingerprint.toLowerCase() ? (
-                    <OptionEmptyName>No name</OptionEmptyName>
-                ) : (
-                    optionProps.data.label
-                )}
-            </OptionValueName>
-            <OptionValue>
-                {optionProps.data.fingerprint
-                    ? getShortFingerprint(optionProps.data.fingerprint)
-                    : null}
-            </OptionValue>
-        </OptionWrapper>
-    </components.Option>
-);
-
-const CardanoSingleValue = ({ tokenInputName, ...optionProps }: any) => (
-    <components.SingleValue {...optionProps} innerProps={{ ...optionProps.innerProps }}>
-        {optionProps.data.fingerprint &&
-        optionProps.data.label.toLowerCase() === optionProps.data.fingerprint.toLowerCase()
-            ? getShortFingerprint(optionProps.data.fingerprint)
-            : optionProps.data.label}
-    </components.SingleValue>
-);
-
 export const TokenSelect = ({ output, outputId }: TokenSelectProps) => {
     const {
         account,
@@ -211,14 +146,6 @@ export const TokenSelect = ({ output, outputId }: TokenSelectProps) => {
         }
     }, [outputId, tokenWatch, setAmount, getValues, account.networkType, isSetMaxActive]);
 
-    const customComponents =
-        account.networkType === 'cardano'
-            ? {
-                  Option: CardanoOption,
-                  SingleValue: CardanoSingleValue,
-              }
-            : undefined;
-
     const values = getValues();
     const fiatCurrency = values?.outputs?.[0]?.currency;
 
@@ -238,7 +165,6 @@ export const TokenSelect = ({ output, outputId }: TokenSelectProps) => {
                         .flatMap(group => group.options)
                         .find(option => option.value === tokenValue)}
                     isClearable={false}
-                    components={customComponents}
                     isClean
                     onChange={async (selected: Option['options'][0]) => {
                         // change selected value

packages/suite/src/views/wallet/send/components/Outputs/components/Amount/index.tsx

@@ -140,8 +140,6 @@ export const Amount = ({ output, outputId }: AmountProps) => {
     const values = getValues();
     const fiatCurrency = values?.outputs?.[0]?.currency;
 
-    const tokenSymbol = formatTokenSymbol(token?.symbol);
-
     const currentRate = useSelector(state =>
         selectFiatRatesByFiatRateKey(
             state,
@@ -227,7 +225,7 @@ export const Amount = ({ output, outputId }: AmountProps) => {
     const isTokenSelected = !!token;
     const tokenBalance = isTokenSelected ? (
         <HiddenPlaceholder>
-            <TokenBalanceValue>{`${token.balance} ${tokenSymbol}`}</TokenBalanceValue>
+            <TokenBalanceValue>{`${token.balance} ${formatTokenSymbol(token?.symbol || token.contract)}`}</TokenBalanceValue>
         </HiddenPlaceholder>
     ) : undefined;
 

packages/suite/src/views/wallet/tokens/components/TokenList.tsx

@@ -195,7 +195,7 @@ export const TokenList = ({
                                                                 <LastUpdateTooltip
                                                                     timestamp={timestamp}
                                                                 >
-                                                                    <>{value}</>
+                                                                    {value}
                                                                 </LastUpdateTooltip>
                                                             ) : (
                                                                 <StyledNoRatesTooltip />

suite-common/fiat-services/src/rates.ts

@@ -82,6 +82,10 @@ export const fetchCurrentFiatRates = async ({
 
     const coingeckoResponse = await coingeckoService.fetchCurrentFiatRates(ticker);
 
+    if (!coingeckoResponse) {
+        return null;
+    }
+
     return {
         rate: coingeckoResponse?.rates?.[localCurrency],
         lastTickerTimestamp: coingeckoResponse?.ts as Timestamp,
@@ -125,6 +129,10 @@ export const fetchLastWeekFiatRates = async ({
 
     const coingeckoResponse = await coingeckoService.fetchLastWeekRates(ticker, localCurrency);
 
+    if (!coingeckoResponse) {
+        return null;
+    }
+
     return {
         rate: coingeckoResponse?.tickers?.[0]?.rates?.[localCurrency],
         lastTickerTimestamp: coingeckoResponse?.tickers?.[0]?.ts as Timestamp,
@@ -171,5 +179,9 @@ export const getFiatRatesForTimestamps = async (
         localCurrency,
     );
 
+    if (!coingeckoResponse) {
+        return null;
+    }
+
     return coingeckoResponse;
 };