fix(core): fix merge conflict

BirthdayResearch · Sep 27, 2023 · c3f6925 · c3f6925
2 parents 3baff06 + a150b13
commit c3f6925
Show file tree

Hide file tree

Showing 18 changed files with 606 additions and 385 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
@@ -10,6 +10,7 @@ import { DomainType } from "@contexts/DomainContext";
 import { LinearGradient } from "expo-linear-gradient";
 import { View } from ".";
 import { ThemedTextV2, ThemedViewV2 } from "./themed";
+import { EVMLinearGradient } from "./EVMLinearGradient";
 
 interface ISummaryTitleProps {
   title: string;
@@ -25,6 +26,7 @@ interface ISummaryTitleProps {
   addressType?: AddressType;
   amountTextStyle?: string;
   matchedAddress?: LocalAddress | WhitelistedAddress;
+  isEvmToken?: boolean;
 }
 
 export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
@@ -51,7 +53,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
@@ -128,7 +135,11 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
                 start={[0, 0]}
                 end={[1, 1]}
                 style={tailwind(
-                  "rounded-2xl px-2.5 py-1 ml-1 flex flex-row items-center",
+                  "flex flex-row items-center overflow-hidden rounded-full pr-2.5 py-1 ml-2",
+                  {
+                    "pl-1": props.addressType === AddressType.WalletAddress,
+                    "pl-2.5": props.addressType !== AddressType.WalletAddress,
+                  },
                 )}
                 testID="to_address_label_evm_tag"
               >

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/components/icons/assets/XCHF.tsx b/mobile-app/app/components/icons/assets/XCHF.tsx
@@ -0,0 +1,18 @@
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+export function XCHF(props: SvgProps): JSX.Element {
+  return (
+    <Svg width="36" height="36" viewBox="0 0 36 36" fill="none" {...props}>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 18C0 8.05891 8.05891 0 18 0C27.9411 0 36 8.05891 36 18C36 27.9411 27.9411 36 18 36C8.05891 36 0 27.9411 0 18Z"
+        fill="#CE0E2D"
+      />
+      <Path
+        d="M13.023 24.1571H5.65027L13.1825 12.0313L15.1859 15.0667L13.911 17.1915L13.1825 16.1898L9.60073 22.0229H11.7862L20.8809 7.57166C24.98 14.0487 27.2782 17.6801 31.3773 24.1571L18.1969 24.1571L15.998 20.6809L17.3077 18.6113L19.5066 22.0229H27.5584L20.8809 11.4002L13.023 24.1571Z"
+        fill="white"
+      />
+    </Svg>
+  );
+}
diff --git a/mobile-app/app/components/icons/assets/dSUI.tsx b/mobile-app/app/components/icons/assets/dSUI.tsx
@@ -0,0 +1,25 @@
+import Svg, { ClipPath, Defs, G, Path, Rect, SvgProps } from "react-native-svg";
+
+export function dSUI(props: SvgProps): JSX.Element {
+  return (
+    <Svg width="48" height="48" viewBox="0 0 48 48" fill="none" {...props}>
+      <G clipPath="url(#clip0_4798_2431)">
+        <Path
+          d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z"
+          fill="#F1F3F4"
+        />
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M31.2032 21.4558L31.2026 21.4572C32.4541 23.0263 33.202 25.0138 33.202 27.1755C33.202 29.3694 32.4317 31.3839 31.1465 32.9637L31.0358 33.0997L31.0065 32.9268C30.9815 32.7798 30.9522 32.6314 30.9181 32.4818C30.2749 29.6557 28.1793 27.2324 24.7301 25.2702C22.401 23.9488 21.0677 22.3577 20.7177 20.5499C20.4917 19.3809 20.6597 18.2068 20.9845 17.201C21.3092 16.1956 21.7922 15.3533 22.2026 14.8462L23.5446 13.2052C23.7799 12.9175 24.2202 12.9175 24.4555 13.2052L31.2032 21.4558ZM33.3254 19.8167L24.3324 8.8197C24.1608 8.60974 23.8393 8.60974 23.6676 8.8197L14.6743 19.8162L14.6453 19.8531C12.9904 21.9067 12 24.5165 12 27.3574C12 33.9739 17.3725 39.3377 24 39.3377C30.6276 39.3377 36 33.9739 36 27.3574C36 24.5165 35.0096 21.9067 33.3547 19.8531L33.3254 19.8167ZM16.8261 21.4204L17.6309 20.4364L17.6552 20.618C17.6744 20.7618 17.6978 20.9064 17.7255 21.0516C18.246 23.7824 20.1052 26.0594 23.2137 27.8229C25.9158 29.3607 27.489 31.1291 27.9423 33.0686C28.1314 33.878 28.1651 34.6744 28.0832 35.3706L28.0781 35.4137L28.0392 35.4328C26.8196 36.0285 25.4487 36.3629 23.9997 36.3629C18.9176 36.3629 14.7975 32.2497 14.7975 27.1755C14.7975 24.997 15.557 22.9952 16.8261 21.4204Z"
+          fill="#4CA2FF"
+        />
+      </G>
+      <Defs>
+        <ClipPath id="clip0_4798_2431">
+          <Rect width="48" height="48" fill="white" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+}
diff --git a/mobile-app/app/components/icons/assets/dXCHF.tsx b/mobile-app/app/components/icons/assets/dXCHF.tsx
@@ -0,0 +1,18 @@
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+export function dXCHF(props: SvgProps): JSX.Element {
+  return (
+    <Svg width="36" height="36" viewBox="0 0 36 36" fill="none" {...props}>
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 18C0 8.05891 8.05891 0 18 0C27.9411 0 36 8.05891 36 18C36 27.9411 27.9411 36 18 36C8.05891 36 0 27.9411 0 18Z"
+        fill="#FFE8EB"
+      />
+      <Path
+        d="M13.023 24.1571H5.65027L13.1825 12.0313L15.1859 15.0667L13.911 17.1915L13.1825 16.1898L9.60073 22.0229H11.7862L20.8809 7.57166C24.98 14.0487 27.2782 17.6801 31.3773 24.1571L18.1969 24.1571L15.998 20.6809L17.3077 18.6113L19.5066 22.0229H27.5584L20.8809 11.4002L13.023 24.1571Z"
+        fill="#CE0E2D"
+      />
+    </Svg>
+  );
+}
diff --git a/mobile-app/app/components/icons/assets/index.ts b/mobile-app/app/components/icons/assets/index.ts
@@ -18,6 +18,9 @@ import { MATIC } from "./MATIC";
 import { dDOT } from "./dDOT";
 import { dMATIC } from "./dMATIC";
 import { dSOL } from "./dSOL";
+import { dSUI } from "./dSUI";
+import { XCHF } from "./XCHF";
+import { dXCHF } from "./dXCHF";
 
 import { EvmDFI } from "./EvmDFI";
 
@@ -46,6 +49,9 @@ const mapping: Record<string, (props: SvgProps) => JSX.Element> = {
   dDOT: dDOT,
   dMATIC: dMATIC,
   dSOL: dSOL,
+  dSUI: dSUI,
+  XCHF: XCHF,
+  dXCHF: dXCHF,
 };
 
 /**

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/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,7 +30,7 @@ interface PortfolioCardProps {
     setActiveButtonGroup: (key: ButtonGroupTabKey) => void;
   };
   denominationCurrency: string;
-  isEVMDomain: boolean;
+  isEvmDomain: boolean;
 }
 
 export function PortfolioCard({
@@ -39,7 +39,7 @@ export function PortfolioCard({
   navigation,
   buttonGroupOptions,
   denominationCurrency,
-  isEVMDomain,
+  isEvmDomain,
 }: PortfolioCardProps): JSX.Element {
   const { hasFetchedToken } = useSelector((state: RootState) => state.wallet);
   const { domain } = useDomainContext();
@@ -73,13 +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}
+          isEvmDomain={isEvmDomain}
         />
       ))}
     </View>
@@ -90,12 +93,12 @@ function PortfolioItemRow({
   token,
   onPress,
   denominationCurrency,
-  isEVMDomain,
+  isEvmDomain,
 }: {
   token: PortfolioRowToken;
   onPress: () => void;
   denominationCurrency: string;
-  isEVMDomain: boolean;
+  isEvmDomain?: boolean;
 }): JSX.Element {
   const testID = `portfolio_row_${token.id}`;
 
@@ -109,12 +112,17 @@ 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}
             testID={testID}
-            isEVMDomain={isEVMDomain}
+            isEVMDomain={isEvmDomain}
           />
         </View>
         <View

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={{