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
BirthdayResearch · Sep 27, 2023 · a150b13 · a150b13
1 parent e187749
commit a150b13
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 19 deletions.
diff --git a/mobile-app/app/components/EVMLinearGradient.tsx 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 (
+      <LinearGradient
+        collapsable={false}
+        colors={["#02CF92", "#3B57CF"]}
+        start={{ x: 0.0, y: 1.0 }}
+        end={{ x: 1.0, y: 1.0 }}
+        style={tailwind("p-0.5 rounded-full")}
+      >
+        {children}
+      </LinearGradient>
+    );
+  }
+
+  return children;
+}
diff --git 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 {
               <IconB height={32} width={32} style={tailwind("-ml-3")} />
             </View>
           ) : (
-            <IconA height={32} width={32} />
+            <EVMLinearGradient isEvmToken={props.isEvmToken}>
+              <IconA
+                height={props.isEvmToken ? 28 : 32}
+                width={props.isEvmToken ? 28 : 32}
+              />
+            </EVMLinearGradient>
           )}
 
           <NumberFormat
@@ -57,7 +64,7 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
                 style={tailwind(
                   `text-3xl font-semibold-v2 flex-wrap pr-1 pl-2 ${
                     props.amountTextStyle ?? ""
-                  }`
+                  }`,
                 )}
                 testID={props.testID}
               >
@@ -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",
               )}
             >
               <RandomAvatar name={props.fromAddress} size={20} />
@@ -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
@@ -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 && (
         <>
-          <Icon testID="tokenA_icon" height={24} width={24} />
+          <EVMLinearGradient isEvmToken={props.isEvmToken}>
+            <Icon testID="tokenA_icon" height={24} width={24} />
+          </EVMLinearGradient>
+
           <ThemedTextV2
             style={tailwind("ml-2 text-sm font-semibold-v2")}
             dark={tailwind("text-mono-dark-v2-900", {
@@ -73,7 +78,7 @@ export function TokenDropdownButton(props: {
           size={24}
           style={tailwind(
             { "ml-2.5": props.symbol === undefined },
-            { "ml-3.5": props.symbol !== undefined }
+            { "ml-3.5": props.symbol !== undefined },
           )}
           dark={tailwind("text-mono-dark-v2-700")}
           light={tailwind("text-mono-light-v2-700")}

diff --git a/mobile-app/app/components/icons/assets/ConvertIcon.tsx b/mobile-app/app/components/icons/assets/ConvertIcon.tsx
@@ -1,8 +1,12 @@
 import Svg, { Path, SvgProps } from "react-native-svg";
 
-export function ConvertIcon(props: SvgProps): JSX.Element {
+interface ConvertIconProps extends SvgProps {
+  iconSize?: number;
+}
+
+export function ConvertIcon(props: ConvertIconProps): JSX.Element {
   return (
-    <Svg height={25} width={24} viewBox="0 0 25 24" {...props}>
+    <Svg height={props.iconSize} width={props.iconSize} viewBox="0 0 25 24">
       <Path
         d="M6.55898 16.505L8.59829 14.4657L9.43627 15.2943L5.98287 18.7477L2.52945 15.2943L3.36742 14.4657L5.40673 16.505L5.42807 16.5264V16.4962V7.90383C5.42807 6.89817 5.78348 6.04014 6.49458 5.32901C7.20569 4.61792 8.06693 4.2625 9.07902 4.2625C10.0847 4.2625 10.9427 4.61791 11.6538 5.32901C12.3649 6.04014 12.7203 6.89817 12.7203 7.90383V15.0865C12.7203 15.8012 12.9652 16.4038 13.4548 16.8934C13.9444 17.3831 14.547 17.6279 15.2617 17.6279C15.9701 17.6279 16.5694 17.383 17.059 16.8934C17.5486 16.4038 17.7934 15.8012 17.7934 15.0865V6.51918V6.489L17.7721 6.51034L15.7328 8.54962L14.8948 7.72108L18.3482 4.26768L21.8016 7.72108L20.9637 8.54962L18.9244 6.51034L18.903 6.489V6.51918V15.0865C18.903 16.0986 18.5476 16.9598 17.8365 17.6709C17.1254 18.382 16.2673 18.7375 15.2617 18.7375C14.2496 18.7375 13.3884 18.382 12.6773 17.6709C11.9662 16.9598 11.6107 16.0986 11.6107 15.0865V7.90383C11.6107 7.19546 11.3659 6.5961 10.8763 6.10651C10.3867 5.61692 9.78736 5.37207 9.07902 5.37207C8.36428 5.37207 7.76169 5.6169 7.27208 6.10651C6.78249 6.5961 6.53764 7.19546 6.53764 7.90383V16.4962V16.5264L6.55898 16.505Z"
         fill={props.color}

diff --git a/mobile-app/app/screens/AppNavigator/screens/Dex/CompositeSwap/SwapTokenSelectionScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Dex/CompositeSwap/SwapTokenSelectionScreen.tsx
@@ -18,6 +18,7 @@ import { useTokenPrice } from "@screens/AppNavigator/screens/Portfolio/hooks/Tok
 import { translate } from "@translations";
 import { useThemeContext } from "@waveshq/walletkit-ui";
 import { PortfolioParamList } from "@screens/AppNavigator/screens/Portfolio/PortfolioNavigator";
+import { DomainType, useDomainContext } from "@contexts/DomainContext";
 
 export enum TokenListType {
   From = "FROM",
@@ -53,6 +54,7 @@ export function SwapTokenSelectionScreen({ route }: Props): JSX.Element {
 
   const { isLight } = useThemeContext();
   const { getTokenPrice } = useTokenPrice();
+  const { domain } = useDomainContext();
 
   const [searchString, setSearchString] = useState("");
   const [isSearchFocus, setIsSearchFocus] = useState(false);
@@ -95,6 +97,7 @@ export function SwapTokenSelectionScreen({ route }: Props): JSX.Element {
       }: ListRenderItemInfo<SelectionToken>): JSX.Element => {
         return (
           <TokenItem
+            isEvmDomain={domain === DomainType.EVM}
             fromToken={fromToken}
             item={item}
             onPress={() => 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 (
     <ThemedTouchableOpacityV2
       style={tailwind(
@@ -224,6 +228,7 @@ function TokenItem({
             displaySymbol: item.token.displaySymbol,
           }}
           size={36}
+          isEvmToken={isEvmDomain}
         />
         <TokenNameText
           displaySymbol={

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioScreen.tsx
@@ -698,6 +698,7 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
               onButtonGroupPress: handleButtonFilter,
             }}
             denominationCurrency={denominationCurrency}
+            isEvmDomain={domain === DomainType.EVM}
           />
         )}
         {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
@@ -239,6 +239,7 @@ function ActionButton(props: ActionButtonsProps): JSX.Element {
                 color={getColor(
                   isLight ? "mono-light-v2-900" : "mono-dark-v2-900",
                 )}
+                iconSize={26}
               />
             ) : (
               <DFIIcon

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx
@@ -30,6 +30,7 @@ interface PortfolioCardProps {
     setActiveButtonGroup: (key: ButtonGroupTabKey) => 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}
         />
       ))}
     </View>
@@ -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({
     >
       <View style={tailwind("flex flex-row items-start")}>
         <View style={tailwind("w-7/12 flex-row items-center")}>
-          <TokenIcon testID={`${testID}_icon`} token={token} size={36} />
+          <TokenIcon
+            testID={`${testID}_icon`}
+            token={token}
+            size={36}
+            isEvmToken={isEvmDomain}
+          />
           <TokenNameText
             displaySymbol={token.displaySymbol}
             name={token.name}

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TokenIcon.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TokenIcon.tsx
@@ -1,5 +1,6 @@
 import { getNativeIcon } from "@components/icons/assets";
 import { StyleProp, ViewStyle } from "react-native";
+import { EVMLinearGradient } from "@components/EVMLinearGradient";
 import { PoolPairIconV2 } from "../../Dex/components/PoolPairCards/PoolPairIconV2";
 
 interface TokenIconProps {
@@ -10,10 +11,11 @@ interface TokenIconProps {
   };
   size: number;
   iconBStyle?: StyleProp<ViewStyle>;
+  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 <Icon testID={testID} width={size} height={size} />;
+  const evmIconSize = isEvmToken ? size - 4 : size;
+  return (
+    <EVMLinearGradient isEvmToken={isEvmToken}>
+      <Icon testID={testID} width={evmIconSize} height={evmIconSize} />
+    </EVMLinearGradient>
+  );
 }
diff --git 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}
         />
         <NumberRowV2
           containerStyle={{

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertScreen.tsx
@@ -38,6 +38,7 @@ import {
   TokenDropdownButtonStatus,
 } from "@components/TokenDropdownButton";
 import { DomainType, useDomainContext } from "@contexts/DomainContext";
+import { EVMLinearGradient } from "@components/EVMLinearGradient";
 import { PortfolioParamList } from "../PortfolioNavigator";
 import {
   TokenListType,
@@ -396,6 +397,7 @@ export function ConvertScreen(props: Props): JSX.Element {
             </View>
 
             <TokenDropdownButton
+              isEvmToken={sourceToken?.token.domainType === DomainType.EVM}
               symbol={sourceToken.token.displaySymbol}
               displayedTextSymbol={sourceToken.token.displayTextSymbol}
               testID={TokenListType.From}
@@ -515,6 +517,7 @@ export function ConvertScreen(props: Props): JSX.Element {
 
           {sourceToken.tokenId === "0" && (
             <TokenDropdownButton
+              isEvmToken={targetToken?.token.domainType === DomainType.EVM}
               symbol={targetToken?.token.displaySymbol}
               displayedTextSymbol={targetToken?.token.displayTextSymbol}
               testID={TokenListType.To}
@@ -529,6 +532,7 @@ export function ConvertScreen(props: Props): JSX.Element {
               testID={TokenListType.To}
               symbol={targetToken.token.displaySymbol}
               unit={targetToken.token.displayTextSymbol}
+              isEvmToken={targetToken?.token.domainType === DomainType.EVM}
             />
           )}
         </View>
@@ -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 && (
-        <>
-          <View style={tailwind("my-2")}>
+        <View style={tailwind("flex flex-row items-center")}>
+          <EVMLinearGradient isEvmToken={props.isEvmToken}>
             <Icon testID="fixed_token_icon" height={24} width={24} />
-          </View>
-
+          </EVMLinearGradient>
           <ThemedTextV2
             style={tailwind("ml-2 text-sm font-semibold-v2 my-2.5")}
             dark={tailwind("text-mono-dark-v2-900")}
@@ -727,7 +731,7 @@ function FixedTokenButton(props: {
           >
             {props.unit}
           </ThemedTextV2>
-        </>
+        </View>
       )}
     </ThemedTouchableOpacityV2>
   );