fix(ui-ux): fixed domain switch toggle

mobile-app/app/components/DomainSwitch.tsx

@@ -4,7 +4,6 @@ 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";
 
@@ -14,21 +13,22 @@ export function DomainSwitch({ testID }: { testID: string }): JSX.Element {
   const DFIIcon = getNativeIcon("DFIlogo");
   const EvmDFIIcon = getNativeIcon("EvmDFI");
 
+  const toggleDomain = async () => {
+    await setDomain(
+      domain === DomainType.DVM ? DomainType.EVM : DomainType.DVM
+    );
+  };
   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,
-      })}
+    <ThemedTouchableOpacityV2
+      activeOpacity={0.7}
+      light={tailwind("bg-mono-light-v2-300")}
+      dark={tailwind("bg-mono-dark-v2-300")}
+      style={tailwind("h-7 w-21 rounded-full flex-row justify-center mr-4")}
+      onPress={toggleDomain}
       testID={testID}
     >
-      {domain === DomainType.DFI && (
-        <ThemedTouchableOpacityV2
-          activeOpacity={1}
-          onPress={async () => {
-            setDomain(DomainType.EVM);
-            await DomainPersistence.set(domain);
-          }}
+      {domain === DomainType.DVM && (
+        <View
           style={tailwind(
             "flex-1 flex-row justify-center rounded-full items-center p-0 absolute left-0"
           )}
@@ -40,27 +40,23 @@ export function DomainSwitch({ testID }: { testID: string }): JSX.Element {
             })}
           >
             <View style={tailwind("bg-brand-v2-500 p-1 rounded-full mr-1")}>
-              <DFIIcon width={12.5} height={12.5} color="#FFFFFF" />
+              <DFIIcon width={12} height={12} color="#FFFFFF" />
             </View>
 
             <Text
-              style={tailwind("mr-2 text-xs", {
+              style={tailwind("w-9 text-xs font-normal-v2", {
                 "text-white": isLight,
                 "text-black": !isLight,
               })}
+              testID={`${testID}_DVM`}
             >
-              DFI
+              DVM
             </Text>
           </View>
-        </ThemedTouchableOpacityV2>
+        </View>
       )}
       {domain === DomainType.EVM && (
-        <ThemedTouchableOpacityV2
-          activeOpacity={1}
-          onPress={async () => {
-            setDomain(DomainType.DFI);
-            await DomainPersistence.set(domain);
-          }}
+        <View
           style={tailwind(
             "flex-1 rounded-full flex-row justify-center items-center absolute right-0"
           )}
@@ -82,15 +78,16 @@ export function DomainSwitch({ testID }: { testID: string }): JSX.Element {
 
               <Text
                 style={tailwind(
-                  "text-mono-light-v2-00 text-xs ml-1 font-normal-v2"
+                  "text-mono-light-v2-00 text-xs ml-1 w-9 font-normal-v2"
                 )}
+                testID={`${testID}_EVM`}
               >
                 EVM
               </Text>
             </View>
           </LinearGradient>
-        </ThemedTouchableOpacityV2>
+        </View>
       )}
-    </View>
+    </ThemedTouchableOpacityV2>
   );
 }

mobile-app/app/components/InputHelperText.tsx

@@ -31,7 +31,7 @@ export function InputHelperText(props: InputHelperTextProps): JSX.Element {
         dark={tailwind("text-gray-500")}
         style={[tailwind("text-sm"), props.labelStyleProps]}
       >
-        {`${props.label}`}
+        {props.label}
       </ThemedText>
 
       <NumberFormat
@@ -67,7 +67,7 @@ export function InputHelperTextV2(props: InputHelperTextProps): JSX.Element {
         dark={tailwind("text-mono-light-v2-500")}
         style={[tailwind("text-xs font-normal-v2"), props.labelStyleProps]}
       >
-        {`${props.label}`}
+        {props.label}
       </ThemedTextV2>
 
       <NumberFormat

mobile-app/app/components/WalletAddressRow.test.tsx

@@ -24,7 +24,7 @@ describe("Wallet Address Row", () => {
           bar: {
             address: "bar",
             label: "bar",
-            addressDomainType: DomainType.DFI,
+            addressDomainType: DomainType.DVM,
           },
         },
       },

mobile-app/app/contexts/DomainContext.tsx

@@ -20,12 +20,12 @@ interface DomainContextI {
 }
 
 export enum DomainType {
-  DFI = "DFI",
+  DVM = "DVM",
   EVM = "EVM",
 }
 
 export function useDomain({ api }: DomainContextI): DomainLoader {
-  const defaultDomain = DomainType.DFI;
+  const defaultDomain = DomainType.DVM;
   const logger = useLogger();
   const [isDomainLoaded, setIsDomainLoaded] = useState<boolean>(false);
   const [domain, setDomain] = useState<NonNullable<DomainType>>(defaultDomain);
@@ -79,7 +79,7 @@ export function DomainProvider(
         setDomain(DomainType.EVM);
         break;
       default:
-        setDomain(DomainType.DFI);
+        setDomain(DomainType.DVM);
     }
   }, [currentDomain]);
 

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

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

mobile-app/app/hooks/useWalletAddress.ts

@@ -2,7 +2,7 @@ import { useWalletContext } from "@shared-contexts/WalletContext";
 import { useCallback } from "react";
 
 export interface WalletAddressI {
-  dfi: string;
+  dvm: string;
   evm: string;
 }
 
@@ -17,10 +17,10 @@ export function useWalletAddress(): {
     const addresses: WalletAddressI[] = [];
     for (let i = 0; i <= addressLength; i++) {
       const account = wallet.get(i);
-      const dfi = await account.getAddress();
+      const dvm = await account.getAddress();
       // TODO (Harsh) replace it with getEvmAddress
       const evm = "evmaddress"; // await account.getEvmAddress();
-      addresses.push({ dfi, evm });
+      addresses.push({ dvm, evm });
     }
     return addresses;
   }, [wallet, addressLength]);

mobile-app/app/screens/AppNavigator/screens/Dex/components/PoolPairCards/PoolPairCards.tsx

@@ -378,7 +378,7 @@ function AvailablePool(props: AvailablePoolProps): JSX.Element {
         {props.pair?.apr?.total !== undefined &&
           props.pair?.apr?.total !== null && (
             <APRSection
-              label={`${translate("screens/DexScreen", "APR")}`}
+              label={translate("screens/DexScreen", "APR")}
               value={{
                 text: new BigNumber(
                   isNaN(props.pair.apr.total) ? 0 : props.pair.apr.total
@@ -442,7 +442,7 @@ function YourPoolPair(props: YourPoolPairProps): JSX.Element {
         {props.poolPair?.apr?.total !== undefined &&
           props.poolPair?.apr?.total !== null && (
             <APRSection
-              label={`${translate("screens/DexScreen", "APR")}`}
+              label={translate("screens/DexScreen", "APR")}
               value={{
                 text: new BigNumber(
                   isNaN(props.poolPair.apr.total) ? 0 : props.poolPair.apr.total

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

@@ -537,6 +537,7 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
                 style={tailwind("text-xs font-normal-v2 pr-1")}
                 dark={tailwind("text-mono-dark-v2-700")}
                 light={tailwind("text-mono-light-v2-700")}
+                testID="bottomsheet-address-header"
               >
                 {domain}
               </ThemedTextV2>
@@ -657,9 +658,9 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
           setDenominationCurrency={setDenominationCurrency}
         />
         <ActionButtons />
-        {domain === DomainType.DFI && <Announcements />}
+        {domain === DomainType.DVM && <Announcements />}
 
-        {domain === DomainType.DFI && (
+        {domain === DomainType.DVM && (
           <AssetsFilterRow
             activeButtonGroup={activeButtonGroup}
             onButtonGroupPress={handleButtonFilter}

mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AddressListEditButton.test.tsx

@@ -21,7 +21,7 @@ describe("Address List Edit Button", () => {
           bar: {
             address: "bar",
             label: "bar",
-            addressDomainType: DomainType.DFI,
+            addressDomainType: DomainType.DVM,
           },
         },
       },

mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AddressRow.tsx

@@ -100,12 +100,12 @@ export function AddressRow({
       setAddressType(AddressType.WalletAddress);
     } else {
       const addressObj = jellyfishWalletAddress.find(
-        (e) => e.dfi === address || e.evm === address
+        (e: WalletAddressI) => e.dvm === address || e.evm === address
       );
       if (address !== undefined && addressObj) {
         // wallet address that does not have a label
         setMatchedAddress({
-          address: addressObj.dfi,
+          address: addressObj.dvm,
           evmAddress: addressObj.evm,
           label: "",
         });

mobile-app/app/screens/AppNavigator/screens/Portfolio/components/AddressSelectionButton.test.tsx

@@ -22,7 +22,7 @@ describe("Address Selection Button", () => {
           bar: {
             address: "bar",
             label: "bar",
-            addressDomainType: DomainType.DFI,
+            addressDomainType: DomainType.DVM,
           },
         },
       },

mobile-app/app/screens/AppNavigator/screens/Portfolio/components/BottomSheetAddressDetailV2.tsx

@@ -200,14 +200,14 @@ export const BottomSheetAddressDetailV2 = (
         item: WalletAddressI;
         index: number;
       }): JSX.Element => {
-        const isSelected = item.dfi === props.address;
+        const isSelected = item.dvm === props.address;
         const hasLabel =
-          labeledAddresses?.[item.dfi]?.label != null &&
-          labeledAddresses?.[item.dfi]?.label !== "";
-        const displayAddress = domain === DomainType.DFI ? item.dfi : item.evm;
+          labeledAddresses?.[item.dvm]?.label != null &&
+          labeledAddresses?.[item.dvm]?.label !== "";
+        const displayAddress = domain === DomainType.EVM ? item.evm : item.dvm;
         return (
           <ThemedTouchableOpacityV2
-            key={item.dfi}
+            key={item.dvm}
             style={tailwind(
               "px-5 py-4.5 flex flex-row items-center justify-between border-0 mx-5 rounded-lg-v2 h-20"
             )}
@@ -224,7 +224,7 @@ export const BottomSheetAddressDetailV2 = (
                 "flex-auto": Platform.OS === "web",
               })}
             >
-              <RandomAvatar name={item.dfi} size={36} />
+              <RandomAvatar name={item.dvm} size={36} />
               <View style={tailwind("ml-3 flex-auto")}>
                 {hasLabel && (
                   <View style={tailwind("flex-row items-center")}>
@@ -233,7 +233,7 @@ export const BottomSheetAddressDetailV2 = (
                       testID={`list_address_label_${item}`}
                       numberOfLines={1}
                     >
-                      {labeledAddresses[item.dfi]?.label}
+                      {labeledAddresses[item.dvm]?.label}
                     </ThemedTextV2>
                     {isSelected && (
                       <ThemedIcon
@@ -299,10 +299,10 @@ export const BottomSheetAddressDetailV2 = (
                     name: props.navigateToScreen.screenName,
                     params: {
                       title: "Edit wallet label",
-                      address: item.dfi,
+                      address: item.dvm,
                       addressLabel:
                         labeledAddresses != null
-                          ? labeledAddresses[item.dfi]
+                          ? labeledAddresses[item.dvm]
                           : "",
                       index: index + 1,
                       type: "edit",
@@ -347,7 +347,7 @@ export const BottomSheetAddressDetailV2 = (
 
     const AddressDetailHeader = useCallback(() => {
       const activeAddress = availableAddresses.find(
-        ({ dfi }) => dfi === props.address
+        ({ dvm }) => dvm === props.address
       );
       return (
         <ThemedViewV2
@@ -368,8 +368,8 @@ export const BottomSheetAddressDetailV2 = (
           )}
           <ActiveAddress
             address={
-              (domain === DomainType.DFI
-                ? activeAddress?.dfi
+              (domain === DomainType.DVM
+                ? activeAddress?.dvm
                 : activeAddress?.evm) ?? ""
             }
             onPress={onActiveAddressPress}
@@ -388,7 +388,7 @@ export const BottomSheetAddressDetailV2 = (
 
     return (
       <FlatList
-        keyExtractor={(item) => item.dfi}
+        keyExtractor={(item) => item.dvm}
         stickyHeaderIndices={[0]}
         style={tailwind({
           "bg-mono-dark-v2-100": !isLight,

mobile-app/app/screens/AppNavigator/screens/Portfolio/components/CreateOrEditAddressLabelForm.tsx

@@ -99,7 +99,7 @@ export const CreateOrEditAddressLabelForm = memo(
         return storedWalletAddress.evmAddress;
       }
       // to support backward compatibility for already saved address
-      const addressObj = walletAddress.find((a) => a.dfi === address);
+      const addressObj = walletAddress.find((a) => a.dvm === address);
       return addressObj?.evm ?? "";
     };
 
@@ -135,7 +135,7 @@ export const CreateOrEditAddressLabelForm = memo(
         {address !== undefined && (
           <AddressDisplay
             address={address}
-            label={domain === DomainType.DFI ? address : getEVMAddress(address)}
+            label={domain === DomainType.DVM ? address : getEVMAddress(address)}
           />
         )}
         <ThemedTextV2

mobile-app/app/screens/AppNavigator/screens/Portfolio/components/PortfolioCard.tsx

@@ -168,12 +168,12 @@ function getEmptyScreenDetails(
     default:
       return {
         icon:
-          domain === DomainType.DFI
+          domain === DomainType.DVM
             ? EmptyPortfolioIcon
             : EmptyEvmPortfolioIcon,
         title: translate("components/EmptyPortfolio", "Empty portfolio"),
         subtitle:
-          domain === DomainType.DFI
+          domain === DomainType.DVM
             ? translate(
                 "components/EmptyPortfolio",
                 "Add DFI and other tokens to get started"

mobile-app/app/screens/AppNavigator/screens/Portfolio/components/TotalPortfolio.tsx

@@ -45,7 +45,6 @@ interface PortfolioButtonGroup {
 export function TotalPortfolio(props: TotalPortfolioProps): JSX.Element {
   const { hasFetchedToken } = useSelector((state: RootState) => state.wallet);
   const { domain } = useDomainContext();
-  const isEvmDomain = domain !== DomainType.DFI;
   const { hasFetchedVaultsData } = useSelector(
     (state: RootState) => state.loans
   );
@@ -124,7 +123,7 @@ export function TotalPortfolio(props: TotalPortfolioProps): JSX.Element {
               }
             />
           </TouchableOpacity>
-          {domain === DomainType.DFI && (
+          {domain === DomainType.DVM && (
             <TouchableOpacity
               activeOpacity={0.7}
               onPress={() => setIsExpanded(!isExpanded)}