feature(ui-ux): dvm <> evm portfolio

mobile-app/App.tsx

@@ -4,6 +4,7 @@ import {
   SecuredStoreAPI,
   LanguagePersistence,
   ThemePersistence,
+  DomainPersistence,
   Logging,
 } from "@api";
 import { AppStateContextProvider } from "@contexts/AppStateContext";
@@ -28,6 +29,7 @@ import {
   LanguageProvider,
   useLanguage,
 } from "@shared-contexts/LanguageProvider";
+import { DomainProvider } from "@contexts/DomainContext";
 import * as Localization from "expo-localization";
 import { useColorScheme } from "react-native";
 import { WalletPersistence } from "@api/wallet";
@@ -110,19 +112,21 @@ export default function App(): JSX.Element | null {
                                 api={LanguagePersistence}
                                 locale={Localization.locale}
                               >
-                                <DisplayBalancesProvider>
-                                  <ConnectionBoundary>
-                                    <GestureHandlerRootView
-                                      style={tailwind("flex-1")}
-                                    >
-                                      <ToastProvider renderType={customToast}>
-                                        <FavouritePoolpairProvider>
-                                          <Main />
-                                        </FavouritePoolpairProvider>
-                                      </ToastProvider>
-                                    </GestureHandlerRootView>
-                                  </ConnectionBoundary>
-                                </DisplayBalancesProvider>
+                                <DomainProvider api={DomainPersistence}>
+                                  <DisplayBalancesProvider>
+                                    <ConnectionBoundary>
+                                      <GestureHandlerRootView
+                                        style={tailwind("flex-1")}
+                                      >
+                                        <ToastProvider renderType={customToast}>
+                                          <FavouritePoolpairProvider>
+                                            <Main />
+                                          </FavouritePoolpairProvider>
+                                        </ToastProvider>
+                                      </GestureHandlerRootView>
+                                    </ConnectionBoundary>
+                                  </DisplayBalancesProvider>
+                                </DomainProvider>
                               </LanguageProvider>
                             </ThemeProvider>
                           </FeatureFlagProvider>

mobile-app/app/api/index.ts

@@ -7,3 +7,4 @@ export { FeatureFlagPersistence } from "./persistence/feature_flag_storage";
 export { SlippageTolerancePersistence } from "./persistence/slippage-tolerance_storage";
 export { PortfolioCurrencyPersistence } from "./persistence/portfolio_currency_storage";
 export { FavouritePoolpairsPersistence } from "./persistence/favourite_poolpairs_storage";
+export { DomainPersistence } from "./persistence/domain_storage";

mobile-app/app/api/persistence/domain_storage.ts

@@ -0,0 +1,16 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const KEY = "WALLET.EVMDOMAIN";
+
+async function set(domain: NonNullable<string>): Promise<void> {
+  await AsyncStorage.setItem(KEY, domain);
+}
+
+async function get(): Promise<string | null> {
+  return await AsyncStorage.getItem(KEY);
+}
+
+export const DomainPersistence = {
+  set,
+  get,
+};

mobile-app/app/components/DomainSwitch.tsx

@@ -0,0 +1,92 @@
+import { View, Text } from "react-native";
+import { ThemedTouchableOpacityV2 } from "@components/themed";
+import { getNativeIcon } from "@components/icons/assets";
+import { useThemeContext } from "@waveshq/walletkit-ui";
+import React from "react";
+import { useDomainContext, DomainType } from "@contexts/DomainContext";
+import { DomainPersistence } from "@api";
+import { tailwind } from "@tailwind";
+import { LinearGradient } from "expo-linear-gradient";
+
+export function DomainSwitch({ testID }: { testID: string }): JSX.Element {
+  const { isLight } = useThemeContext();
+  const { domain, setDomain } = useDomainContext();
+  const DFIIcon = getNativeIcon("DFIlogo");
+  const EvmDFIIcon = getNativeIcon("EvmDFI");
+
+  return (
+    <View
+      style={tailwind("h-7 w-18 rounded-full flex-row justify-center mr-4", {
+        "bg-mono-light-v2-300": isLight,
+        "bg-mono-dark-v2-300": !isLight,
+      })}
+      testID={testID}
+    >
+      {domain === DomainType.DFI && (
+        <ThemedTouchableOpacityV2
+          activeOpacity={1}
+          onPress={async () => {
+            setDomain(DomainType.EVM);
+            await DomainPersistence.set(domain);
+          }}
+          style={tailwind(
+            "flex-1 flex-row justify-center rounded-full items-center p-0 absolute left-0"
+          )}
+        >
+          <View
+            style={tailwind("rounded-full p-1 flex-row items-center", {
+              "bg-mono-light-v2-1000": isLight,
+              "bg-mono-dark-v2-1000": !isLight,
+            })}
+          >
+            <View style={tailwind("bg-brand-v2-500 p-1 rounded-full mr-1")}>
+              <DFIIcon width={12.5} height={12.5} color="#FFFFFF" />
+            </View>
+
+            <Text
+              style={tailwind("mr-2 text-xs", {
+                "text-white": isLight,
+                "text-black": !isLight,
+              })}
+            >
+              DFI
+            </Text>
+          </View>
+        </ThemedTouchableOpacityV2>
+      )}
+      {domain === DomainType.EVM && (
+        <ThemedTouchableOpacityV2
+          activeOpacity={1}
+          onPress={async () => {
+            setDomain(DomainType.DFI);
+            await DomainPersistence.set(domain);
+          }}
+          style={tailwind(
+            "flex-1 rounded-full flex-row justify-center items-center absolute right-0"
+          )}
+        >
+          <LinearGradient
+            colors={["#42F9C2", "#3B57CF"]}
+            start={[0, 0]}
+            end={[1, 1]}
+            style={tailwind("rounded-full")}
+          >
+            <View style={tailwind("rounded-full p-1 flex-row items-center")}>
+              <View
+                style={tailwind(
+                  "flex items-center justify-center rounded-full w-5 h-5"
+                )}
+              >
+                <EvmDFIIcon width={20} height={20} />
+              </View>
+
+              <Text style={tailwind("text-mono-light-v2-00 text-xs ml-1")}>
+                EVM
+              </Text>
+            </View>
+          </LinearGradient>
+        </ThemedTouchableOpacityV2>
+      )}
+    </View>
+  );
+}

mobile-app/app/components/icons/assets/ConvertIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+export function ConvertIcon(props: SvgProps): JSX.Element {
+  return (
+    <Svg height={25} width={24} viewBox="0 0 25 24" {...props}>
+      <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}
+        stroke={props.color}
+        strokeWidth="0.025"
+      />
+    </Svg>
+  );
+}

mobile-app/app/components/icons/assets/EvmDFI.tsx

@@ -0,0 +1,52 @@
+import Svg, {
+  ClipPath,
+  Defs,
+  G,
+  LinearGradient,
+  Path,
+  Rect,
+  Stop,
+  SvgProps,
+} from "react-native-svg";
+
+export function EvmDFI(props: SvgProps): JSX.Element {
+  return (
+    <Svg width="36" height="36" viewBox="0 0 36 36" fill="none" {...props}>
+      <G clip-path="url(#clip0_13656_13629)">
+        <G clip-path="url(#clip1_13656_13629)">
+          <Path
+            d="M35 18.0033C35 27.3921 27.3888 35.0033 18 35.0033C8.61116 35.0033 1 27.3921 1 18.0033C1 8.61446 8.61116 1.0033 18 1.0033C27.3888 1.0033 35 8.61446 35 18.0033Z"
+            fill="white"
+            stroke="url(#paint0_linear_13656_13629)"
+            strokeWidth="2"
+          />
+          <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M20.4937 26.3906V9.61814C24.1044 10.6969 26.7437 14.0481 26.7437 18.0044C26.7437 21.9606 24.1044 25.3125 20.4937 26.3906ZM17.9937 6.75439V16.2363L16.5656 14.8081L16.3831 11.2438L17.8725 6.76064C16.9175 6.77064 15.995 6.90689 15.1119 7.14127L14.3912 9.30815L12.3487 8.28377C11.5406 8.75439 10.7931 9.31752 10.1287 9.96814L13.9119 11.8638L14.0225 14.0331L11.8537 13.9219L9.9575 10.1394C9.3075 10.8038 8.74375 11.5506 8.27312 12.3594L9.29813 14.4025L7.13 15.1225C6.89625 16.0056 6.76 16.9281 6.75 17.8831L11.2337 16.3938L14.7981 16.5756L16.2262 18.0044L14.7981 19.4331L11.2337 19.615L6.75 18.1256C6.76 19.0806 6.89625 20.0031 7.13 20.8863L9.29813 21.6063L8.27312 23.6494C8.74375 24.4581 9.3075 25.205 9.9575 25.8694L11.8537 22.0869L14.0225 21.9756L13.9119 24.1444L10.1287 26.0406C10.7931 26.6906 11.5406 27.2538 12.3487 27.725L14.3912 26.7006L15.1119 28.8675C15.995 29.1013 16.9175 29.2381 17.8725 29.2481L16.3831 24.765L16.5656 21.2006L17.9937 19.7725V29.2544C24.2069 29.2544 29.2437 24.2175 29.2437 18.0044C29.2437 11.7913 24.2069 6.75439 17.9937 6.75439Z"
+            fill="#FF008C"
+          />
+        </G>
+      </G>
+      <Defs>
+        <LinearGradient
+          id="paint0_linear_13656_13629"
+          x1="3.4904"
+          y1="-7.14848"
+          x2="46.2081"
+          y2="3.06434"
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#42F9C2" />
+          <Stop offset="1" stopColor="#3B57CF" />
+        </LinearGradient>
+        <ClipPath id="clip0_13656_13629">
+          <Rect width="36" height="36" fill="white" />
+        </ClipPath>
+        <ClipPath id="clip1_13656_13629">
+          <Rect width="36" height="36" fill="white" />
+        </ClipPath>
+      </Defs>
+    </Svg>
+  );
+}

mobile-app/app/components/icons/assets/index.ts

@@ -13,6 +13,8 @@ import { dUSD } from "./dUSD";
 import { DFIlogo } from "./plainDFI";
 import { dEUROC } from "./dEUROC";
 
+import { EvmDFI } from "./EvmDFI";
+
 const mapping: Record<string, (props: SvgProps) => JSX.Element> = {
   _UTXO: DFI,
   DFI: DFI,
@@ -31,6 +33,7 @@ const mapping: Record<string, (props: SvgProps) => JSX.Element> = {
   DUSD: dUSD,
   dEUROC: dEUROC,
   DFIlogo: DFIlogo,
+  EvmDFI: EvmDFI,
 };
 
 /**

mobile-app/app/contexts/DomainContext.tsx

@@ -0,0 +1,101 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  PropsWithChildren,
+} from "react";
+import { useLogger } from "@shared-contexts/NativeLoggingProvider";
+
+interface DomainLoader {
+  isDomainLoaded: boolean;
+  domain: NonNullable<string>;
+}
+
+interface DomainContextI {
+  api: {
+    get: () => Promise<string | null>;
+    set: (domain: NonNullable<string>) => Promise<void>;
+  };
+}
+
+export enum DomainType {
+  DFI = "DFI",
+  EVM = "EVM",
+}
+
+export function useDomain({ api }: DomainContextI): DomainLoader {
+  const defaultDomain = DomainType.DFI;
+  const logger = useLogger();
+  const [isDomainLoaded, setIsDomainLoaded] = useState<boolean>(false);
+  const [domain, setDomain] = useState<NonNullable<string>>(defaultDomain);
+
+  useEffect(() => {
+    api
+      .get()
+      .then((l) => {
+        let currentDomain: NonNullable<string> = defaultDomain;
+        if (l !== null && l !== undefined) {
+          currentDomain = l;
+        }
+        setDomain(currentDomain);
+      })
+      .catch((err) => logger.error(err))
+      .finally(() => setIsDomainLoaded(true));
+  }, []);
+
+  return {
+    isDomainLoaded,
+    domain,
+  };
+}
+
+interface Domain {
+  domain: NonNullable<string>;
+  setDomain: (domain: NonNullable<string>) => Promise<void>;
+}
+
+const DomainContext = createContext<Domain>(undefined as any);
+
+export function useDomainContext(): Domain {
+  return useContext(DomainContext);
+}
+
+export function DomainProvider(
+  props: DomainContextI & PropsWithChildren<any>
+): JSX.Element | null {
+  const { api } = props;
+  const { domain } = useDomain({ api });
+  const [currentDomain, setCurrentDomain] =
+    useState<NonNullable<string>>(domain);
+
+  useEffect(() => {
+    setCurrentDomain(domain);
+  }, [domain]);
+
+  useEffect(() => {
+    switch (currentDomain) {
+      case "EVM":
+        setDomain(DomainType.EVM);
+        break;
+      default:
+        setDomain(DomainType.DFI);
+    }
+  }, [currentDomain]);
+
+  const setDomain = async (domain: string): Promise<void> => {
+    setCurrentDomain(domain);
+    await api.set(domain);
+  };
+
+  const context: Domain = {
+    domain: currentDomain,
+    setDomain,
+  };
+
+  return (
+    <DomainContext.Provider value={context}>
+      {props.children}
+    </DomainContext.Provider>
+  );
+}

mobile-app/app/contexts/__mocks__/DomainContext.tsx

@@ -0,0 +1,10 @@
+export enum DomainType {
+  DFI = "DFI",
+  EVM = "EVM",
+}
+
+export const useDomainContext = () => {
+  return {
+    domain: "DFI",
+  };
+};

mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx

@@ -3,7 +3,8 @@ import { createStackNavigator } from "@react-navigation/stack";
 import { AddressType, WalletToken } from "@waveshq/walletkit-ui/dist/store";
 import BigNumber from "bignumber.js";
 import { Image } from "expo-image";
-import { Platform } from "react-native";
+import { Platform, View } from "react-native";
+import { DomainSwitch } from "@components/DomainSwitch";
 import { BarCodeScanner } from "@components/BarCodeScanner";
 import { HeaderTitle } from "@components/HeaderTitle";
 import { tailwind } from "@tailwind";
@@ -218,7 +219,16 @@ export function PortfolioNavigator(): JSX.Element {
               contentFit="cover"
             />
           ),
-          headerLeft: () => <HeaderSettingButton />,
+          headerLeft: () => (
+            <View
+              style={tailwind(
+                "flex flex-row bg-transparent items-center w-full"
+              )}
+            >
+              <DomainSwitch testID="domain_switch" />
+              <HeaderSettingButton />
+            </View>
+          ),
           headerLeftContainerStyle: tailwind("pl-5", {
             "pb-2": Platform.OS === "ios",
             "pb-1.5": Platform.OS !== "ios",