From a150b136885cf52255b8c684e0481f9b4e947b3e Mon Sep 17 00:00:00 2001 From: Chloe <44501120+chloezxyy@users.noreply.github.com> Date: Wed, 27 Sep 2023 13:34:45 +0800 Subject: [PATCH] fix(ui-ux): svg border for evm tokens (#4029) * fix(ui-ux): svg border for evm tokens * fix(ui-ux): conditional icon sizing with svg border on evm tokens --- .../app/components/EVMLinearGradient.tsx | 28 +++++++++++++++++++ mobile-app/app/components/SummaryTitle.tsx | 15 +++++++--- .../app/components/TokenDropdownButton.tsx | 9 ++++-- .../components/icons/assets/ConvertIcon.tsx | 8 ++++-- .../SwapTokenSelectionScreen.tsx | 7 ++++- .../screens/Portfolio/PortfolioScreen.tsx | 1 + .../Portfolio/components/ActionButtons.tsx | 1 + .../Portfolio/components/PortfolioCard.tsx | 17 +++++++++-- .../Portfolio/components/TokenIcon.tsx | 11 ++++++-- .../screens/ConvertConfirmationScreen.tsx | 3 +- .../Portfolio/screens/ConvertScreen.tsx | 14 ++++++---- .../Portfolio/screens/TokenDetailScreen.tsx | 6 ++++ 12 files changed, 101 insertions(+), 19 deletions(-) create mode 100644 mobile-app/app/components/EVMLinearGradient.tsx diff --git a/mobile-app/app/components/EVMLinearGradient.tsx b/mobile-app/app/components/EVMLinearGradient.tsx new file mode 100644 index 0000000000..c57b6455e6 --- /dev/null +++ b/mobile-app/app/components/EVMLinearGradient.tsx @@ -0,0 +1,28 @@ +import { tailwind } from "@tailwind"; +import { LinearGradient } from "expo-linear-gradient"; +import { ReactElement } from "react"; + +/* Only apply evm border color if it's an EVM Token */ +export function EVMLinearGradient({ + children, + isEvmToken, +}: { + children: ReactElement; + isEvmToken?: boolean; +}): JSX.Element | null { + if (isEvmToken) { + return ( + + {children} + + ); + } + + return children; +} diff --git a/mobile-app/app/components/SummaryTitle.tsx b/mobile-app/app/components/SummaryTitle.tsx index c1e718f3ef..b0fba129c2 100644 --- a/mobile-app/app/components/SummaryTitle.tsx +++ b/mobile-app/app/components/SummaryTitle.tsx @@ -7,6 +7,7 @@ import { RandomAvatar } from "@screens/AppNavigator/screens/Portfolio/components import { AddressType } from "@waveshq/walletkit-ui/dist/store"; import { View } from "."; import { ThemedTextV2, ThemedViewV2 } from "./themed"; +import { EVMLinearGradient } from "./EVMLinearGradient"; interface ISummaryTitleProps { title: string; @@ -21,6 +22,7 @@ interface ISummaryTitleProps { iconB?: string; addressType?: AddressType; amountTextStyle?: string; + isEvmToken?: boolean; } export function SummaryTitle(props: ISummaryTitleProps): JSX.Element { @@ -47,7 +49,12 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element { ) : ( - + + + )} @@ -82,7 +89,7 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element { dark={tailwind("bg-mono-dark-v2-200")} light={tailwind("bg-mono-light-v2-200")} style={tailwind( - "rounded-full pl-1 pr-2.5 py-1 flex flex-row items-center overflow-hidden ml-2" + "rounded-full pl-1 pr-2.5 py-1 flex flex-row items-center overflow-hidden ml-2", )} > @@ -124,7 +131,7 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element { { "pl-1": props.addressType === AddressType.WalletAddress, "pl-2.5": props.addressType !== AddressType.WalletAddress, - } + }, )} > {props.addressType === AddressType.WalletAddress && ( diff --git a/mobile-app/app/components/TokenDropdownButton.tsx b/mobile-app/app/components/TokenDropdownButton.tsx index e6b0210c4e..292b58d951 100644 --- a/mobile-app/app/components/TokenDropdownButton.tsx +++ b/mobile-app/app/components/TokenDropdownButton.tsx @@ -6,6 +6,7 @@ import { import { getNativeIcon } from "@components/icons/assets"; import { tailwind } from "@tailwind"; import { translate } from "@translations"; +import { EVMLinearGradient } from "./EVMLinearGradient"; export enum TokenDropdownButtonStatus { Active, @@ -20,6 +21,7 @@ export function TokenDropdownButton(props: { testID: string; onPress?: () => void; status: TokenDropdownButtonStatus; + isEvmToken?: boolean; }): JSX.Element { const Icon = props.symbol !== undefined ? getNativeIcon(props.symbol) : undefined; @@ -49,7 +51,10 @@ export function TokenDropdownButton(props: { )} {props.symbol !== undefined && Icon !== undefined && ( <> - + + + + + ): JSX.Element => { return ( onTokenPress(item)} @@ -191,6 +194,7 @@ interface TokenItemProps { onPress: any; getTokenPrice: TokenPrice; listType: TokenListType; + isEvmDomain: boolean; } function TokenItem({ @@ -199,13 +203,13 @@ function TokenItem({ onPress, getTokenPrice, listType, + isEvmDomain, }: TokenItemProps): JSX.Element { const activePriceUSDT = getTokenPrice( item.token.symbol, new BigNumber("1"), item.token.isLPS, ); - return ( )} {Platform.OS === "web" ? ( 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 e926df04b5..dd14dcbb0b 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx @@ -239,6 +239,7 @@ function ActionButton(props: ActionButtonsProps): JSX.Element { color={getColor( isLight ? "mono-light-v2-900" : "mono-dark-v2-900", )} + iconSize={26} /> ) : ( void; }; denominationCurrency: string; + isEvmDomain: boolean; } export function PortfolioCard({ @@ -38,6 +39,7 @@ export function PortfolioCard({ navigation, buttonGroupOptions, denominationCurrency, + isEvmDomain, }: PortfolioCardProps): JSX.Element { const { hasFetchedToken } = useSelector((state: RootState) => state.wallet); const { domain } = useDomainContext(); @@ -71,12 +73,16 @@ export function PortfolioCard({ onPress={() => navigation.navigate({ name: "TokenDetailScreen", - params: { token: item, usdAmount: item.usdAmount }, + params: { + token: item, + usdAmount: item.usdAmount, + }, merge: true, }) } token={item} denominationCurrency={denominationCurrency} + isEvmDomain={isEvmDomain} /> ))} @@ -87,10 +93,12 @@ function PortfolioItemRow({ token, onPress, denominationCurrency, + isEvmDomain, }: { token: PortfolioRowToken; onPress: () => void; denominationCurrency: string; + isEvmDomain?: boolean; }): JSX.Element { const testID = `portfolio_row_${token.id}`; @@ -104,7 +112,12 @@ function PortfolioItemRow({ > - + ; + isEvmToken?: boolean; } export function TokenIcon(props: TokenIconProps): JSX.Element { - const { token, testID, size, iconBStyle } = props; + const { token, testID, size, iconBStyle, isEvmToken } = props; if (token.isLPS === true) { const [tokenA, tokenB] = token.displaySymbol.split("-"); return ( @@ -27,5 +29,10 @@ export function TokenIcon(props: TokenIconProps): JSX.Element { ); } const Icon = getNativeIcon(token.displaySymbol); - return ; + const evmIconSize = isEvmToken ? size - 4 : size; + return ( + + + + ); } diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertConfirmationScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertConfirmationScreen.tsx index e3a22bca9c..56fddff9d9 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertConfirmationScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertConfirmationScreen.tsx @@ -182,9 +182,10 @@ export function ConvertConfirmationScreen({ route }: Props): JSX.Element { )} amount={amount} testID="text_convert_amount" - iconA="_UTXO" + iconA={targetToken.displaySymbol} fromAddress={address} fromAddressLabel={addressLabel} + isEvmToken={convertDirection === ConvertDirection.dvmToEvm} /> )} @@ -703,6 +707,7 @@ function FixedTokenButton(props: { symbol: string; testID: string; unit: string; + isEvmToken?: boolean; }): JSX.Element { const Icon = getNativeIcon(props.symbol); return ( @@ -714,11 +719,10 @@ function FixedTokenButton(props: { disabled > {props.symbol !== undefined && Icon !== undefined && ( - <> - + + - - + {props.unit} - + )} ); diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/TokenDetailScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/TokenDetailScreen.tsx index 7fbaaa1d6a..723c21b6d0 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/TokenDetailScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/TokenDetailScreen.tsx @@ -30,6 +30,7 @@ import { ButtonV2 } from "@components/ButtonV2"; import { InfoTextLinkV2 } from "@components/InfoTextLink"; import { ThemedTouchableListItem } from "@components/themed/ThemedTouchableListItem"; import { ConvertDirection } from "@screens/enum"; +import { DomainType, useDomainContext } from "@contexts/DomainContext"; import { PortfolioParamList } from "../PortfolioNavigator"; import { useTokenPrice } from "../hooks/TokenPrice"; import { useDenominationCurrency } from "../hooks/PortfolioCurrency"; @@ -105,6 +106,8 @@ const usePoolPairToken = ( export function TokenDetailScreen({ route, navigation }: Props): JSX.Element { const { denominationCurrency } = useDenominationCurrency(); + const { domain } = useDomainContext(); + const { hasFetchedToken } = useSelector((state: RootState) => state.wallet); const { getTokenPrice } = useTokenPrice(denominationCurrency); // input based on selected denomination from portfolio tab const DFIUnified = useSelector((state: RootState) => @@ -183,6 +186,7 @@ export function TokenDetailScreen({ route, navigation }: Props): JSX.Element { token={token} border usdAmount={usdAmount ?? new BigNumber(0)} + isEvmDomain={domain === DomainType.EVM} /> @@ -391,6 +395,7 @@ function TokenSummary(props: { token: WalletToken; border?: boolean; usdAmount: BigNumber; + isEvmDomain?: boolean; }): JSX.Element { const { denominationCurrency } = useDenominationCurrency(); const { getTokenUrl } = useDeFiScanContext(); @@ -426,6 +431,7 @@ function TokenSummary(props: { displaySymbol: props.token.displaySymbol, }} size={40} + isEvmToken={props.isEvmDomain} />