diff --git a/packages/suite/src/views/wallet/send/Outputs/Amount/TokenSelect.tsx b/packages/suite/src/views/wallet/send/Outputs/Amount/TokenSelect.tsx index 19d0b9245ec0..ed34de96b1f9 100644 --- a/packages/suite/src/views/wallet/send/Outputs/Amount/TokenSelect.tsx +++ b/packages/suite/src/views/wallet/send/Outputs/Amount/TokenSelect.tsx @@ -1,15 +1,13 @@ import { useMemo, useEffect, useState } from 'react'; import { Controller } from 'react-hook-form'; import { AssetLogo, Column, Row, Select } from '@trezor/components'; -// import styled from 'styled-components'; import { useSendFormContext } from 'src/hooks/wallet'; import { Account } from 'src/types/wallet'; import { Output } from '@suite-common/wallet-types'; import { useDispatch, useSelector } from 'src/hooks/suite'; import { updateFiatRatesThunk, selectCurrentFiatRates } from '@suite-common/wallet-core'; import { Timestamp, TokenAddress } from '@suite-common/wallet-types'; -// import { TooltipSymbol, Translation } from 'src/components/suite'; -import { NetworkSymbol } from '@suite-common/wallet-config'; +import { networks, NetworkSymbol } from '@suite-common/wallet-config'; import { enhanceTokensWithRates, formatTokenSymbol, @@ -29,11 +27,9 @@ import { getCoingeckoId } from '@suite-common/wallet-config'; import { getContractAddressForNetwork } from '@suite-common/wallet-utils'; import { Card } from '@trezor/components'; import { spacings } from '@trezor/theme'; - -// const UnrecognizedTokensHeading = styled.div` -// display: flex; -// align-items: center; -// `; +import { CoinmarketCryptoSelectItemProps } from 'src/types/coinmarket/coinmarket'; +import { parseCryptoId, toTokenCryptoId } from 'src/utils/wallet/coinmarket/coinmarketUtils'; +import { CryptoId } from 'invity-api'; export const buildTokenOptions = ( accountTokens: Account['tokens'], @@ -44,10 +40,10 @@ export const buildTokenOptions = ( const result: SelectAssetOptionCurrencyProps[] = [ { type: 'currency', - value: '', + value: networks[symbol].coingeckoNativeId || '', label: symbol.toUpperCase(), cryptoName: '', - coingeckoId: getCoingeckoId(symbol) ?? '', + coingeckoId: networks[symbol].coingeckoNativeId || '', }, ]; @@ -57,7 +53,7 @@ export const buildTokenOptions = ( tokens.shownWithBalance.forEach(token => { result.push({ type: 'currency', - value: token.contract, + value: toTokenCryptoId(symbol, token.contract), //is this correct? label: formatTokenSymbol(token.symbol || token.contract), cryptoName: '', coingeckoId: getCoingeckoId(symbol) ?? '', @@ -73,7 +69,7 @@ export const buildTokenOptions = ( // // // ), - value: token.contract, + value: toTokenCryptoId(symbol, token.contract), label: formatTokenSymbol(token.symbol || token.contract), hidden: true, cryptoName: '', @@ -96,7 +92,7 @@ export const buildTokenOptions = ( // /> // // ), - value: token.contract, + value: toTokenCryptoId(symbol, token.contract), label: formatTokenSymbol(token.symbol || token.contract), unverified: true, cryptoName: '', @@ -148,10 +144,11 @@ export const TokenSelect = ({ output, outputId }: TokenSelectProps) => { const tokenInputName = `outputs.${outputId}.token` as const; const amountInputName = `outputs.${outputId}.amount` as const; const currencyInputName = `outputs.${outputId}.currency` as const; - const tokenValue = getDefaultValue(tokenInputName, output.token) || ''; + const isSetMaxActive = getDefaultValue('setMaxOutputId') === outputId; const dataEnabled = getDefaultValue('options', []).includes('ethereumData'); const options = buildTokenOptions(sortedTokens, account.symbol, coinDefinitions); + const tokenValue = getDefaultValue(tokenInputName, output.token) || options[0].value; // Amount needs to be re-validated again AFTER token change propagation (decimal places, available balance) // watch token change and use "useSendFormFields.setAmount" util for validation (if amount is set) @@ -178,12 +175,38 @@ export const TokenSelect = ({ output, outputId }: TokenSelectProps) => { } }, [sendFormPrefill, setValue, tokenInputName, setDraftSaveRequest, dispatch]); - const handleSelectChange = (selectedCryptoId: string) => { - // const findOption = options.find( - // option => option.type === 'currency' && option.value === selectedCryptoId, - // ) as CoinmarketCryptoSelectItemProps | undefined; + const handleSelectChange = async (selectedCryptoId: string) => { + const findOption = options.find( + option => option.type === 'currency' && option.value === selectedCryptoId, + ) as CoinmarketCryptoSelectItemProps | undefined; + + if (!findOption) return; - // if (!findOption) return; + setValue(tokenInputName, findOption); + + await dispatch( + updateFiatRatesThunk({ + tickers: [ + { + symbol: account.symbol as NetworkSymbol, + tokenAddress: selectedCryptoId as TokenAddress, // TODO: check if this is correct (IT'S NOT), GET CONTRACT ADDRESS FROM THE SELECTED TOKEN. Where is cryproId coming from? + }, + ], + localCurrency: currencyValue.value as FiatCurrencyCode, + rateType: 'current', + fetchAttemptTimestamp: Date.now() as Timestamp, + }), + ); + // clear errors in Amount input + clearErrors(amountInputName); + // remove Amount if isSetMaxActive or ETH data options are enabled + if (isSetMaxActive || dataEnabled) setAmount(outputId, ''); + // remove ETH data option + if (dataEnabled) toggleOption('ethereumData'); + // compose (could be prevented because of Amount error from re-validation above) + composeTransaction(amountInputName); + + setValue(tokenInputName, findOption.value); // if (isCoinmarketExchangeContext(context)) { // context.setValue(FORM_RECEIVE_CRYPTO_CURRENCY_SELECT, findOption); @@ -194,27 +217,6 @@ export const TokenSelect = ({ output, outputId }: TokenSelectProps) => { // onChange={async (selected: SelectAssetOptionCurrencyProps) => { // // change selected value // onChange(selected.value); - // await dispatch( - // updateFiatRatesThunk({ - // tickers: [ - // { - // symbol: account.symbol as NetworkSymbol, - // tokenAddress: selected.value as TokenAddress, - // }, - // ], - // localCurrency: currencyValue.value as FiatCurrencyCode, - // rateType: 'current', - // fetchAttemptTimestamp: Date.now() as Timestamp, - // }), - // ); - // // clear errors in Amount input - // clearErrors(amountInputName); - // // remove Amount if isSetMaxActive or ETH data options are enabled - // if (isSetMaxActive || dataEnabled) setAmount(outputId, ''); - // // remove ETH data option - // if (dataEnabled) toggleOption('ethereumData'); - // // compose (could be prevented because of Amount error from re-validation above) - // composeTransaction(amountInputName); // }} setIsModalActive(false); @@ -234,7 +236,6 @@ export const TokenSelect = ({ output, outputId }: TokenSelectProps) => { control={control} name={tokenInputName} data-testid={tokenInputName} - defaultValue={options[0].value} render={({ field: { value } }) => (