chore(suite): update network symbol naming

packages/product-components/src/components/TokenIconSet/TokenIconSet.stories.tsx

@@ -21,7 +21,7 @@ export default meta;
 export const TokenIconSet: StoryObj<TokenIconSetProps> = {
     render: (props: TokenIconSetProps) => <TokenIconSetComponent {...props} />,
     args: {
-        network: 'eth',
+        symbol: 'eth',
         tokens: [TOKEN_1, TOKEN_2, TOKEN_3, TOKEN_4],
     },
     argTypes: {

packages/product-components/src/components/TokenIconSet/TokenIconSet.tsx

@@ -7,7 +7,7 @@ import { getContractAddressForNetwork } from '@suite-common/wallet-utils';
 import { borders, Elevation, mapElevationToBackground, mapElevationToBorder } from '@trezor/theme';
 
 export type TokenIconSetProps = {
-    network: NetworkSymbol;
+    symbol: NetworkSymbol;
     tokens: TokenInfo[];
 };
 
@@ -37,7 +37,7 @@ const TokenIconPlaceholder = styled.div<{ $elevation: Elevation }>`
 /**
  * @param tokens - provide already sorted tokens (for example by fiat value).
  */
-export const TokenIconSet = ({ network, tokens }: TokenIconSetProps) => {
+export const TokenIconSet = ({ symbol, tokens }: TokenIconSetProps) => {
     const { elevation } = useElevation();
     const { length } = tokens;
 
@@ -47,7 +47,7 @@ export const TokenIconSet = ({ network, tokens }: TokenIconSetProps) => {
 
     const visibleTokens = tokens.slice(0, 3).reverse();
 
-    const coingeckoId = getCoingeckoId(network);
+    const coingeckoId = getCoingeckoId(symbol);
 
     return (
         <IconContainer $length={length}>
@@ -57,10 +57,9 @@ export const TokenIconSet = ({ network, tokens }: TokenIconSetProps) => {
                     key={token.contract}
                     size={20}
                     coingeckoId={coingeckoId ?? ''}
-                    contractAddress={getContractAddressForNetwork(network, token.contract)}
+                    contractAddress={getContractAddressForNetwork(symbol, token.contract)}
                     placeholder={token.symbol?.toUpperCase() ?? ''}
                     placeholderWithTooltip={false}
-                    // TODO: shouldFetch?
                 />
             ))}
         </IconContainer>

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

@@ -6,14 +6,11 @@ import type { FormatNumberOptions } from '@formatjs/intl';
 import { useFormatters } from '@suite-common/formatters';
 import { SkeletonRectangle } from '@trezor/components';
 import { selectIsSpecificCoinDefinitionKnown } from '@suite-common/token-definitions';
-import { NetworkSymbol } from '@suite-common/wallet-config';
 import { TokenAddress } from '@suite-common/wallet-types';
 
 import { useLoadingSkeleton, useSelector } from 'src/hooks/suite';
-import {
-    useFiatFromCryptoValue,
-    useFiatFromCryptoValueParams,
-} from 'src/hooks/suite/useFiatFromCryptoValue';
+import type { UseFiatFromCryptoValueParams } from 'src/hooks/suite/useFiatFromCryptoValue';
+import { useFiatFromCryptoValue } from 'src/hooks/suite/useFiatFromCryptoValue';
 import { HiddenPlaceholder } from 'src/components/suite';
 
 import { HiddenPlaceholderProps } from './HiddenPlaceholder';
@@ -35,7 +32,7 @@ interface Params {
     timestamp: number | null;
 }
 
-type FiatValueProps = useFiatFromCryptoValueParams & {
+type FiatValueProps = UseFiatFromCryptoValueParams & {
     children?: (props: Params) => ReactElement | null;
     showApproximationIndicator?: boolean;
     disableHiddenPlaceholder?: boolean;
@@ -52,6 +49,8 @@ type FiatValueProps = useFiatFromCryptoValueParams & {
  * If prop `fiatCurrency` is not specified, the currency is read from suite settings.
  * null is returned if there was some problem with conversion (eg. missing rates)
  *
+ * If `symbol` is not NetworkSymbol (necessary to type forcing), it will handle that case as well.
+ *
  * Advanced usage is with passing a function as a children prop.
  * The function will be called (and rendered) with 1 object param: {fiatValue, fiatRateValue, fiatRateTimestamp}.
  *
@@ -90,11 +89,7 @@ export const FiatValue = ({
     const WrapperComponent = disableHiddenPlaceholder ? SameWidthNums : StyledHiddenPlaceholder;
 
     const isTokenKnown = useSelector(state =>
-        selectIsSpecificCoinDefinitionKnown(
-            state,
-            symbol as NetworkSymbol,
-            tokenAddress || ('' as TokenAddress),
-        ),
+        selectIsSpecificCoinDefinitionKnown(state, symbol, tokenAddress || ('' as TokenAddress)),
     );
 
     if (

packages/suite/src/components/suite/Ticker/PriceTicker.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
 import { typography } from '@trezor/theme';
-import { TokenAddress } from '@suite-common/wallet-types';
+import type { TokenAddress } from '@suite-common/wallet-types';
+import type { NetworkSymbol } from '@suite-common/wallet-config';
 
 import { FiatValue } from 'src/components/suite';
 
@@ -21,7 +22,7 @@ const Empty = styled.div`
 `;
 
 interface PriceTickerProps {
-    symbol: string;
+    symbol: NetworkSymbol;
     contractAddress?: TokenAddress;
     noEmptyStateTooltip?: boolean;
     showLoadingSkeleton?: boolean;

packages/suite/src/components/suite/labeling/AddressLabeling.tsx

@@ -1,24 +1,24 @@
 import { findAccountsByAddress } from '@suite-common/wallet-utils';
-import { NetworkSymbol } from '@suite-common/wallet-config';
+import type { NetworkSymbol } from '@suite-common/wallet-config';
 
 import { useSelector } from 'src/hooks/suite';
 
 import { AccountLabeling } from './AccountLabeling';
 
 type AddressLabelingProps = {
-    networkSymbol: NetworkSymbol;
+    symbol: NetworkSymbol;
     address?: string | null;
     knownOnly?: boolean;
 };
 
-export const AddressLabeling = ({ networkSymbol, address, knownOnly }: AddressLabelingProps) => {
+export const AddressLabeling = ({ symbol, address, knownOnly }: AddressLabelingProps) => {
     const accounts = useSelector(state => state.wallet.accounts);
 
-    if (!address || !networkSymbol) {
+    if (!address || !symbol) {
         return null;
     }
 
-    const relevantAccounts = findAccountsByAddress(networkSymbol, address, accounts);
+    const relevantAccounts = findAccountsByAddress(symbol, address, accounts);
 
     if (relevantAccounts.length < 1) {
         return !knownOnly ? <span>{address}</span> : null;

packages/suite/src/components/suite/modals/ReduxModal/UnhideTokenModal.tsx

@@ -33,7 +33,7 @@ export const UnhideTokenModal = ({ address, onCancel }: UnhideTokenModalProps) =
         }
         dispatch(
             tokenDefinitionsActions.setTokenStatus({
-                networkSymbol: account.symbol,
+                symbol: account.symbol,
                 contractAddress: address,
                 status: TokenManagementAction.SHOW,
                 type: DefinitionType.COIN,

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/TxDetailModal/AdvancedTxDetails/AmountDetails.tsx

@@ -1,5 +1,4 @@
 import { Table, Text } from '@trezor/components';
-import { NetworkSymbol } from '@suite-common/wallet-config';
 import {
     formatAmount,
     formatCardanoDeposit,
@@ -174,25 +173,30 @@ export const AmountDetails = ({ tx, isTestnet }: AmountDetailsProps) => {
                             ) : (
                                 <FormattedCryptoAmount
                                     value={formatAmount(transfer.amount, transfer.decimals)}
-                                    symbol={transfer.symbol as NetworkSymbol}
+                                    symbol={transfer.symbol}
                                     signValue={getTxOperation(transfer.type, true)}
                                 />
                             )}
                         </Table.Cell>
                         <Table.Cell align="right">
-                            <FiatValue
-                                amount={formatAmount(transfer.amount, transfer.decimals)}
-                                symbol={transfer.symbol}
-                                historicRate={historicTokenRate}
-                                useHistoricRate
-                            />
+                            {selectedAccount.account && (
+                                <FiatValue
+                                    amount={formatAmount(transfer.amount, transfer.decimals)}
+                                    symbol={selectedAccount.account.symbol}
+                                    tokenAddress={transfer.contract as TokenAddress}
+                                    historicRate={historicTokenRate}
+                                    useHistoricRate
+                                />
+                            )}
                         </Table.Cell>
                         <Table.Cell align="right">
-                            <FiatValue
-                                amount={formatAmount(transfer.amount, transfer.decimals)}
-                                symbol={selectedAccount.account?.symbol as NetworkSymbol}
-                                tokenAddress={transfer.contract as TokenAddress}
-                            />
+                            {selectedAccount.account && (
+                                <FiatValue
+                                    amount={formatAmount(transfer.amount, transfer.decimals)}
+                                    symbol={selectedAccount.account.symbol}
+                                    tokenAddress={transfer.contract as TokenAddress}
+                                />
+                            )}
                         </Table.Cell>
                     </Table.Row>
                 );

packages/suite/src/components/wallet/FiatHeader.tsx

@@ -5,10 +5,12 @@ import styled from 'styled-components';
 import { useFormatters } from '@suite-common/formatters';
 import { typography } from '@trezor/theme';
 import { useShouldRedactNumbers } from '@suite-common/wallet-utils';
+import type { NetworkSymbol } from '@suite-common/wallet-config';
 
 import { HiddenPlaceholder, RedactNumericalValue } from 'src/components/suite';
 import { useSelector } from 'src/hooks/suite';
 import { selectLanguage } from 'src/reducers/suite/suiteReducer';
+import { useFiatFromCryptoValue } from 'src/hooks/suite/useFiatFromCryptoValue';
 
 const ValueWrapper = styled.div`
     display: flex;
@@ -30,21 +32,39 @@ const DecimalValue = styled.div<{ $size: 'large' | 'medium' }>`
     color: ${({ theme }) => theme.textSubdued};
 `;
 
+type UseFiatAmountProps = { amount: string; symbol?: NetworkSymbol };
+
 type FiatHeaderProps = {
     size: 'large' | 'medium';
-    fiatAmount: string;
     localCurrency: string;
-};
+} & UseFiatAmountProps;
 
 // redacted value placeholder doesn't have to be displayed twice, display it only for whole value
 const HideRedactedValue = ({ children }: PropsWithChildren) =>
     useShouldRedactNumbers() ? null : children;
 
-export const FiatHeader = ({ size, fiatAmount, localCurrency }: FiatHeaderProps) => {
+const useFiatAmount = ({ amount, symbol }: UseFiatAmountProps) => {
+    const { fiatAmount } = useFiatFromCryptoValue({
+        amount,
+        symbol: symbol ?? 'btc',
+    });
+
+    if (!symbol) {
+        return amount;
+    }
+
+    return fiatAmount;
+};
+
+/**
+ * If `symbol` is not provided, `amount` is returned as is, otherwise it is converted to fiat currency.
+ */
+export const FiatHeader = ({ amount, symbol, size, localCurrency }: FiatHeaderProps) => {
     const language = useSelector(selectLanguage);
+    const fiatAmount = useFiatAmount({ amount, symbol });
     const { FiatAmountFormatter } = useFormatters();
     const formattedAmount = FiatAmountFormatter({
-        value: fiatAmount,
+        value: fiatAmount ?? '0',
         currency: localCurrency,
     });
 

packages/suite/src/components/wallet/TokenIconSetWrapper.tsx

@@ -16,21 +16,21 @@ import {
 
 type TokenIconSetWrapperProps = {
     accounts: Account[];
-    network: NetworkSymbol;
+    symbol: NetworkSymbol;
 };
 
-export const TokenIconSetWrapper = ({ accounts, network }: TokenIconSetWrapperProps) => {
+export const TokenIconSetWrapper = ({ accounts, symbol }: TokenIconSetWrapperProps) => {
     const localCurrency = useSelector(selectLocalCurrency);
     const fiatRates = useSelector(selectCurrentFiatRates);
-    const coinDefinitions = useSelector(state => selectCoinDefinitions(state, network));
+    const coinDefinitions = useSelector(state => selectCoinDefinitions(state, symbol));
 
     const allTokensWithRates = accounts.flatMap(account =>
-        enhanceTokensWithRates(account.tokens, localCurrency, network, fiatRates),
+        enhanceTokensWithRates(account.tokens, localCurrency, symbol, fiatRates),
     );
 
     if (!allTokensWithRates.length) return null;
 
-    const tokens = getTokens(allTokensWithRates, network, coinDefinitions)
+    const tokens = getTokens(allTokensWithRates, symbol, coinDefinitions)
         .shownWithBalance as TokensWithRates[];
 
     const aggregatedTokens = Object.values(
@@ -57,5 +57,5 @@ export const TokenIconSetWrapper = ({ accounts, network }: TokenIconSetWrapperPr
 
     const sortedAggregatedTokens = aggregatedTokens.sort(sortTokensWithRates);
 
-    return <TokenIconSet network={network} tokens={sortedAggregatedTokens} />;
+    return <TokenIconSet symbol={symbol} tokens={sortedAggregatedTokens} />;
 };

packages/suite/src/components/wallet/TransactionItem/TransactionTarget/TargetAddressLabel.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { ArrayElement } from '@trezor/type-utils';
-import { NetworkSymbol } from '@suite-common/wallet-config';
+import type { NetworkSymbol } from '@suite-common/wallet-config';
 
 import { WalletAccountTransaction } from 'src/types/wallet';
 import { Translation, AddressLabeling } from 'src/components/suite';
@@ -13,14 +13,14 @@ const TruncatedSpan = styled.span<{ $isBlurred?: boolean }>`
 `;
 
 interface TargetAddressLabelProps {
-    networkSymbol: NetworkSymbol;
+    symbol: NetworkSymbol;
     target: ArrayElement<WalletAccountTransaction['targets']>;
     type: WalletAccountTransaction['type'];
     accountMetadata?: AccountLabels;
 }
 
 export const TargetAddressLabel = ({
-    networkSymbol,
+    symbol,
     target,
     type,
     accountMetadata,
@@ -43,7 +43,7 @@ export const TargetAddressLabel = ({
                 type === 'sent' ? (
                     // Using index as a key is safe as the array doesn't change (no filter/reordering, pushing new items)
 
-                    <AddressLabeling key={i} address={a} networkSymbol={networkSymbol} />
+                    <AddressLabeling key={i} address={a} symbol={symbol} />
                 ) : (
                     <span key={i}>{accountMetadata?.addressLabels[a] || a}</span>
                 ),

packages/suite/src/components/wallet/TransactionItem/TransactionTarget/TokenTransferAddressLabel.tsx

@@ -1,20 +1,20 @@
 import { ArrayElement } from '@trezor/type-utils';
-import { NetworkSymbol } from '@suite-common/wallet-config';
+import type { NetworkSymbol } from '@suite-common/wallet-config';
 
 import { Translation, AddressLabeling } from 'src/components/suite';
 import { WalletAccountTransaction } from 'src/types/wallet';
 
 import { BlurWrapper } from '../TransactionItemBlurWrapper';
 
 interface TokenTransferAddressLabelProps {
-    networkSymbol: NetworkSymbol;
+    symbol: NetworkSymbol;
     transfer: ArrayElement<WalletAccountTransaction['tokens']>;
     type: WalletAccountTransaction['type'];
     isPhishingTransaction: boolean;
 }
 
 export const TokenTransferAddressLabel = ({
-    networkSymbol,
+    symbol,
     transfer,
     type,
     isPhishingTransaction,
@@ -25,7 +25,7 @@ export const TokenTransferAddressLabel = ({
     if (type === 'sent') {
         return (
             <BlurWrapper $isBlurred={isPhishingTransaction}>
-                <AddressLabeling address={transfer.to} networkSymbol={networkSymbol} />
+                <AddressLabeling address={transfer.to} symbol={symbol} />
             </BlurWrapper>
         );
     }

packages/suite/src/components/wallet/TransactionItem/TransactionTarget/TransactionTarget.tsx

@@ -61,7 +61,7 @@ export const TokenTransfer = ({
             {...baseLayoutProps}
             addressLabel={
                 <TokenTransferAddressLabel
-                    networkSymbol={transaction.symbol}
+                    symbol={transaction.symbol}
                     isPhishingTransaction={isPhishingTransaction}
                     transfer={transfer}
                     type={transaction.type}
@@ -114,9 +114,7 @@ export const InternalTransfer = ({
     return (
         <TransactionTargetLayout
             {...baseLayoutProps}
-            addressLabel={
-                <AddressLabeling address={transfer.to} networkSymbol={transaction.symbol} />
-            }
+            addressLabel={<AddressLabeling address={transfer.to} symbol={transaction.symbol} />}
             amount={
                 !baseLayoutProps.singleRowLayout && (
                     <StyledFormattedCryptoAmount
@@ -198,7 +196,7 @@ export const TransactionTarget = ({
                     isDisabled={isActionDisabled}
                     defaultVisibleValue={
                         <TargetAddressLabel
-                            networkSymbol={transaction.symbol}
+                            symbol={transaction.symbol}
                             accountMetadata={accountMetadata}
                             target={target}
                             type={transaction.type}