feature(ui-ux): enable transfer domain

docker-compose.yml

@@ -17,7 +17,7 @@ services:
       - "/var/run/docker.sock:/var/run/docker.sock:ro"
 
   defi-blockchain:
-    image: defi/defichain:master-91a01aea0
+    image: defi/defichain:master-b352814976
     command: >
       defid
       -printtoconsole
@@ -55,10 +55,9 @@ services:
       -grandcentralheight=16
       -grandcentralepilogueheight=17
       -nextnetworkupgradeheight=18
-      -changiintermediateheight=19
 
   defi-playground:
-    image: ghcr.io/birthdayresearch/playground-api:3.34.0
+    image: ghcr.io/birthdayresearch/playground-api:4.0.0-rc.1.2
     depends_on:
       - defi-blockchain
     ports:
@@ -71,7 +70,7 @@ services:
       - "traefik.http.routers.playground.entrypoints=web"
 
   defi-whale:
-    image: ghcr.io/birthdayresearch/whale-api:3.34.0
+    image: ghcr.io/birthdayresearch/whale-api:4.0.0-rc.1.2
     depends_on:
       - defi-blockchain
     ports:

mobile-app/app/api/transaction/transfer_domain.ts

@@ -48,18 +48,20 @@ export async function transferDomainSigner(
           src: {
             address: sourceScript,
             amount: {
-              token: Number(sourceTokenId),
+              token: stripEvmSuffixFromTokenId(sourceTokenId),
               amount,
             },
             domain: srcDomain,
+            data: new Uint8Array([]),
           },
           dst: {
             address: dstScript,
             amount: {
-              token: Number(targetTokenId),
+              token: stripEvmSuffixFromTokenId(targetTokenId),
               amount,
             },
             domain: dstDomain,
+            data: new Uint8Array([]),
           },
         },
       ],
@@ -139,3 +141,10 @@ export function transferDomainCrafter(
         : undefined,
   };
 }
+
+function stripEvmSuffixFromTokenId(tokenId: string) {
+  if (tokenId.includes("-EVM")) {
+    return Number(tokenId.replace("-EVM", ""));
+  }
+  return Number(tokenId);
+}

mobile-app/app/components/SummaryTitle.tsx

@@ -5,6 +5,9 @@ import { getNativeIcon } from "@components/icons/assets";
 import { translate } from "@translations";
 import { RandomAvatar } from "@screens/AppNavigator/screens/Portfolio/components/RandomAvatar";
 import { AddressType } from "@waveshq/walletkit-ui/dist/store";
+import { LocalAddress, WhitelistedAddress } from "@store/userPreferences";
+import { DomainType } from "@contexts/DomainContext";
+import { LinearGradient } from "expo-linear-gradient";
 import { View } from ".";
 import { ThemedTextV2, ThemedViewV2 } from "./themed";
 import { EVMLinearGradient } from "./EVMLinearGradient";
@@ -22,6 +25,7 @@ interface ISummaryTitleProps {
   iconB?: string;
   addressType?: AddressType;
   amountTextStyle?: string;
+  matchedAddress?: LocalAddress | WhitelistedAddress;
   isEvmToken?: boolean;
 }
 
@@ -123,39 +127,81 @@ export function SummaryTitle(props: ISummaryTitleProps): JSX.Element {
             >
               {props.customToAddressTitle ?? translate("screens/common", "To")}
             </ThemedTextV2>
-            <ThemedViewV2
-              dark={tailwind("bg-mono-dark-v2-200")}
-              light={tailwind("bg-mono-light-v2-200")}
-              style={tailwind(
-                "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,
-                },
-              )}
-            >
-              {props.addressType === AddressType.WalletAddress && (
-                <View style={tailwind("mr-1")}>
-                  <RandomAvatar name={props.toAddress} size={20} />
-                </View>
-              )}
-              <ThemedTextV2
-                ellipsizeMode="middle"
-                numberOfLines={1}
-                style={[
-                  tailwind("text-sm font-normal-v2"),
+            {/* TODO @chloe cater for selection of evm addr from addr pair */}
+            {(props.matchedAddress as WhitelistedAddress)?.addressDomainType ===
+            DomainType.EVM ? (
+              <LinearGradient
+                colors={["#42F9C2", "#3B57CF"]}
+                start={[0, 0]}
+                end={[1, 1]}
+                style={tailwind(
+                  "flex flex-row items-center overflow-hidden rounded-full pr-2.5 py-1 ml-2",
                   {
-                    minWidth: 10,
-                    maxWidth: 108,
+                    "pl-1": props.addressType === AddressType.WalletAddress,
+                    "pl-2.5": props.addressType !== AddressType.WalletAddress,
                   },
-                ]}
-                testID="summary_to_value"
+                )}
+                testID="to_address_label_evm_tag"
               >
-                {props.toAddressLabel != null && props.toAddressLabel.length > 0
-                  ? props.toAddressLabel
-                  : props.toAddress}
-              </ThemedTextV2>
-            </ThemedViewV2>
+                {props.addressType === AddressType.WalletAddress && (
+                  <View style={tailwind("mr-1")}>
+                    <RandomAvatar name={props.toAddress} size={20} />
+                  </View>
+                )}
+                <ThemedTextV2
+                  ellipsizeMode="middle"
+                  numberOfLines={1}
+                  style={[
+                    tailwind("text-sm font-normal-v2"),
+                    {
+                      minWidth: 10,
+                      maxWidth: 108,
+                    },
+                  ]}
+                  testID="summary_to_value"
+                >
+                  {props.toAddressLabel != null &&
+                  props.toAddressLabel.length > 0
+                    ? props.toAddressLabel
+                    : props.toAddress}
+                </ThemedTextV2>
+              </LinearGradient>
+            ) : (
+              <ThemedViewV2
+                dark={tailwind("bg-mono-dark-v2-200")}
+                light={tailwind("bg-mono-light-v2-200")}
+                style={tailwind(
+                  "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,
+                  },
+                )}
+              >
+                {props.addressType === AddressType.WalletAddress && (
+                  <View style={tailwind("mr-1")}>
+                    <RandomAvatar name={props.toAddress} size={20} />
+                  </View>
+                )}
+                <ThemedTextV2
+                  ellipsizeMode="middle"
+                  numberOfLines={1}
+                  style={[
+                    tailwind("text-sm font-normal-v2"),
+                    {
+                      minWidth: 10,
+                      maxWidth: 108,
+                    },
+                  ]}
+                  testID="summary_to_value"
+                >
+                  {props.toAddressLabel != null &&
+                  props.toAddressLabel.length > 0
+                    ? props.toAddressLabel
+                    : props.toAddress}
+                </ThemedTextV2>
+              </ThemedViewV2>
+            )}
           </View>
         )}
       </View>

mobile-app/app/hooks/useWalletAddress.ts

@@ -18,8 +18,7 @@ export function useWalletAddress(): {
     for (let i = 0; i <= addressLength; i++) {
       const account = wallet.get(i);
       const dvm = await account.getAddress();
-      // TODO (Harsh) replace it with getEvmAddress
-      const evm = "evmaddress"; // await account.getEvmAddress();
+      const evm = await account.getEvmAddress();
       addresses.push({ dvm, evm });
     }
     return addresses;

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

@@ -9,7 +9,7 @@ import { BarCodeScanner } from "@components/BarCodeScanner";
 import { HeaderTitle } from "@components/HeaderTitle";
 import { tailwind } from "@tailwind";
 import { translate } from "@translations";
-import { WhitelistedAddress } from "@store/userPreferences";
+import { LocalAddress, WhitelistedAddress } from "@store/userPreferences";
 import { FutureSwapData } from "@store/futureSwap";
 import { TransactionsScreen } from "@screens/AppNavigator/screens/Transactions/TransactionsScreen";
 import { TransactionDetailScreen } from "@screens/AppNavigator/screens/Transactions/screens/TransactionDetailScreen";
@@ -78,6 +78,7 @@ export interface PortfolioParamList {
     toAddressLabel?: string;
     addressType?: AddressType;
     originScreen?: ScreenName;
+    matchedAddress?: WhitelistedAddress | LocalAddress;
   };
   TokenDetailScreen: { token: WalletToken };
   ConvertScreen: {

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

@@ -367,13 +367,18 @@ export function PortfolioScreen({ navigation }: Props): JSX.Element {
 
       return filteredTokens.sort(sortTokensFunc);
     },
-    [filteredTokens, assetSortType, denominationCurrency],
+    [domain, filteredTokens, assetSortType, denominationCurrency],
   );
 
   useEffect(() => {
     setAssetSortType(PortfolioSortType.HighestDenominationValue); // reset sorting state upon denominationCurrency change
   }, [denominationCurrency]);
 
+  // Reset button group in EVM domain
+  useEffect(() => {
+    setActiveButtonGroup(ButtonGroupTabKey.AllTokens);
+  }, [domain]);
+
   // token tab items
   const [activeButtonGroup, setActiveButtonGroup] = useState<ButtonGroupTabKey>(
     ButtonGroupTabKey.AllTokens,