From e671459eafeb18b4882d462fcc3ebd4e5b4f4d7e Mon Sep 17 00:00:00 2001 From: pierregee Date: Mon, 9 Oct 2023 18:24:33 +0800 Subject: [PATCH] fix(ui-ux): fix convert selection --- .../Portfolio/components/ActionButtons.tsx | 31 ++++- .../Portfolio/screens/ConvertScreen.tsx | 108 ++++++++++++++---- 2 files changed, 113 insertions(+), 26 deletions(-) diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx index dd14dcbb0b..9330b5049b 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx @@ -47,6 +47,7 @@ export function ActionButtons(): JSX.Element { const isEvmDomain = domain === DomainType.EVM; const { dvmTokens, evmTokens } = useTokenBalance(); + const navigation = useNavigation>(); const futureSwaps = useSelector((state: RootState) => futureSwapSelector(state), @@ -83,6 +84,22 @@ export function ActionButtons(): JSX.Element { listType: listType, list: domain === DomainType.EVM ? evmTokens : dvmTokens, onTokenPress: (item) => { + const defaultTargetToken = { + tokenId: + domain === DomainType.DVM + ? `${item.tokenId}-EVM` + : item.tokenId.replace("-EVM", ""), + available: new BigNumber(0), + token: { + ...item.token, + name: + domain === DomainType.DVM + ? `${item.token.name} for EVM` + : item.token.name, + domainType: DomainType.EVM, + }, + }; + let targetToken: SelectionToken | undefined; if (domain === DomainType.DVM && item.tokenId === "0_utxo") { // If DFI UTXO -> choose DFI Token @@ -92,14 +109,16 @@ export function ActionButtons(): JSX.Element { targetToken = undefined; } else if (domain === DomainType.EVM) { // If EVM -> choose DVM equivalent - targetToken = dvmTokens.find( - (token) => token.tokenId === item.tokenId.replace("-EVM", ""), - ); + targetToken = + dvmTokens.find( + (token) => token.tokenId === item.tokenId.replace("-EVM", ""), + ) ?? defaultTargetToken; } else if (domain === DomainType.DVM) { // If DVM -> choose EVM equivalent - targetToken = evmTokens.find( - (token) => token.tokenId === `${item.tokenId}-EVM`, - ); + targetToken = + evmTokens.find( + (token) => token.tokenId === `${item.tokenId}-EVM`, + ) ?? defaultTargetToken; } navigation.navigate({ diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertScreen.tsx index 11b99efbb8..5234605a29 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertScreen.tsx @@ -37,6 +37,8 @@ import { TokenDropdownButtonStatus, } from "@components/TokenDropdownButton"; import { DomainType, useDomainContext } from "@contexts/DomainContext"; +import { getNativeIcon } from "@components/icons/assets"; +import { EVMLinearGradient } from "@components/EVMLinearGradient"; import { PortfolioParamList } from "../PortfolioNavigator"; import { TokenListType, @@ -225,26 +227,31 @@ export function ConvertScreen(props: Props): JSX.Element { if (listType === TokenListType.To) { const defaultEvmTargetToken = { tokenId: `${sourceToken.tokenId}-EVM`, - available: sourceToken.available, + available: new BigNumber(0), token: { ...sourceToken.token, name: `${sourceToken.token.name} for EVM`, domainType: DomainType.EVM, }, }; + + // Display UTXO and the source Token if (domain === DomainType.DVM && sourceToken.tokenId === "0") { return [ defaultEvmTargetToken, ...dvmTokens.filter((token) => token.tokenId === "0_utxo"), ]; } else if ( + // Display DFI (DVM) domain === DomainType.DVM && sourceToken.tokenId === "0_utxo" ) { return dvmTokens.filter((token) => token.tokenId === "0"); } else if (domain === DomainType.DVM) { + // Display EVM equivalent return [defaultEvmTargetToken]; } else if (domain === DomainType.EVM && sourceToken.tokenId === "0-EVM") { + // Display DFI (DVM) return dvmTokens.filter((token) => token.tokenId === "0"); } } @@ -270,27 +277,44 @@ export function ConvertScreen(props: Props): JSX.Element { updatedConvertDirection = ConvertDirection.utxosToAccount; } - let updatedTargetToken: SelectionToken | undefined = targetToken; + let updatedTargetToken: SelectionToken | undefined; + const defaultTargetToken = { + tokenId: + domain === DomainType.DVM + ? `${item.tokenId}-EVM` + : item.tokenId.replace("-EVM", ""), + available: new BigNumber(0), + token: { + ...item.token, + name: + domain === DomainType.DVM + ? `${item.token.name} for EVM` + : item.token.name, + domainType: DomainType.EVM, + }, + }; if (listType === TokenListType.From) { /* Move to a hook since it's used in portfolio page and convert screen */ if (domain === DomainType.DVM && item.tokenId === "0_utxo") { // If DFI UTXO -> choose DFI Token - - updatedTargetToken = dvmTokens.find((token) => token.tokenId === "0"); + updatedTargetToken = + dvmTokens.find((token) => token.tokenId === "0") ?? + defaultTargetToken; } else if (domain === DomainType.DVM && item.tokenId === "0") { // If DFI Token -> no default updatedTargetToken = undefined; } else if (domain === DomainType.EVM) { // If EVM -> choose DVM equivalent - updatedTargetToken = dvmTokens.find( - (token) => token.tokenId === item.tokenId.replace("-EVM", ""), - ); + updatedTargetToken = + dvmTokens.find( + (token) => token.tokenId === item.tokenId.replace("-EVM", ""), + ) ?? defaultTargetToken; } else if (domain === DomainType.DVM) { // If DVM -> choose EVM equivalent - updatedTargetToken = evmTokens.find( - (token) => token.tokenId === `${item.tokenId}-EVM`, - ); + updatedTargetToken = + evmTokens.find((token) => token.tokenId === `${item.tokenId}-EVM`) ?? + defaultTargetToken; } /* End of what will be moved into a hook */ } else { @@ -524,16 +548,26 @@ export function ConvertScreen(props: Props): JSX.Element { /> - { - navigateToTokenSelectionScreen(TokenListType.To); - }} - status={TokenDropdownButtonStatus.Enabled} - /> + {sourceToken.tokenId === "0" && ( + { + navigateToTokenSelectionScreen(TokenListType.To); + }} + status={TokenDropdownButtonStatus.Enabled} + /> + )} + {sourceToken.tokenId !== "0" && targetToken && ( + + )} {targetToken !== undefined && ( @@ -701,3 +735,37 @@ function canConvert(amount: string, balance: BigNumber): boolean { new BigNumber(amount).isPositive() ); } + +function FixedTokenButton(props: { + symbol: string; + testID: string; + unit: string; + isEvmToken?: boolean; +}): JSX.Element { + const Icon = getNativeIcon(props.symbol); + return ( + + {props.symbol !== undefined && Icon !== undefined && ( + + + + + + {props.unit} + + + )} + + ); +}