Merge branch 'pierregee/evm-convert-screen' into harsh/address-book

BirthdayResearch · Jul 27, 2023 · 9d34f73 · 9d34f73
2 parents e65ba5f + c5a20c5
commit 9d34f73
Show file tree

Hide file tree

Showing 7 changed files with 222 additions and 66 deletions.
diff --git a/mobile-app/app/components/TokenDropdownButton.tsx b/mobile-app/app/components/TokenDropdownButton.tsx
@@ -16,6 +16,7 @@ export enum TokenDropdownButtonStatus {
 
 export function TokenDropdownButton(props: {
   symbol?: string;
+  displayedTextSymbol?: string;
   testID: string;
   onPress?: () => void;
   status: TokenDropdownButtonStatus;
@@ -61,7 +62,7 @@ export function TokenDropdownButton(props: {
             })}
             testID={`token_select_button_${props.testID}_display_symbol`}
           >
-            {props.symbol}
+            {props.displayedTextSymbol ?? props.symbol}
           </ThemedTextV2>
         </>
       )}

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/PortfolioNavigator.tsx
@@ -146,7 +146,7 @@ export interface PortfolioParamList {
     };
     listType: TokenListType;
     list: any;
-    onTokenPress: (item: SelectionToken) => {};
+    onTokenPress: (item: SelectionToken) => void;
     isFutureSwap?: boolean;
     isSearchDTokensOnly?: boolean;
   };

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/components/ActionButtons.tsx
@@ -24,6 +24,8 @@ import BigNumber from "bignumber.js";
 import { ConvertIcon } from "@components/icons/assets/ConvertIcon";
 import { ConversionMode } from "@screens/enum";
 import { PortfolioParamList } from "../PortfolioNavigator";
+import { TokenListType } from "../../Dex/CompositeSwap/SwapTokenSelectionScreen";
+import { useConvertibleTokens } from "../hooks/ConvertibleTokens";
 
 export interface ActionButtonsProps {
   name: string;
@@ -40,6 +42,8 @@ export function ActionButtons(): JSX.Element {
   const { isFeatureAvailable } = useFeatureFlagContext();
   const { domain } = useDomainContext();
   const isEvmDomain = domain === DomainType.EVM;
+
+  const { fromTokens } = useConvertibleTokens();
   const navigation = useNavigation<NavigationProp<PortfolioParamList>>();
   const futureSwaps = useSelector((state: RootState) =>
     futureSwapSelector(state)
@@ -55,6 +59,31 @@ export function ActionButtons(): JSX.Element {
     hasFetchedToken &&
     new BigNumber(DFIUtxo.amount ?? 0).plus(DFIToken.amount ?? 0).gt(0);
 
+  const navigateToTokenSelectionScreen = (listType: TokenListType): void => {
+    navigation.navigate("SwapTokenSelectionScreen", {
+      fromToken: {
+        symbol: undefined,
+        displaySymbol: undefined,
+      },
+      listType: listType,
+      list: fromTokens,
+      onTokenPress: (item) => {
+        navigation.navigate({
+          name: "ConvertScreen",
+          params: {
+            mode:
+              item.tokenId === "0"
+                ? ConversionMode.accountToUtxos
+                : ConversionMode.utxosToAccount,
+          },
+          merge: true,
+        });
+      },
+      isFutureSwap: false,
+      isSearchDTokensOnly: false,
+    });
+  };
+
   return (
     <View testID="action_button_group">
       <ScrollView
@@ -115,15 +144,17 @@ export function ActionButtons(): JSX.Element {
           iconSize={28}
           testID="convert_button"
           onPress={() => {
-            navigation.navigate({
-              name: "ConvertScreen",
-              params: {
-                mode: isEvmDomain
-                  ? ConversionMode.accountToEvm
-                  : ConversionMode.utxosToAccount,
-              },
-              merge: true,
-            });
+            if (isEvmDomain) {
+              navigation.navigate({
+                name: "ConvertScreen",
+                params: {
+                  mode: ConversionMode.evmToAccount,
+                },
+                merge: true,
+              });
+            } else {
+              navigateToTokenSelectionScreen(TokenListType.From);
+            }
           }}
           isEvmDomain
         />

diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/hooks/ConvertibleTokens.ts b/mobile-app/app/screens/AppNavigator/screens/Portfolio/hooks/ConvertibleTokens.ts
@@ -0,0 +1,58 @@
+import { useSelector } from "react-redux";
+import BigNumber from "bignumber.js";
+import { RootState } from "@store";
+import {
+  DFITokenSelector,
+  DFIUtxoSelector,
+} from "@waveshq/walletkit-ui/dist/store";
+
+interface ConvertibleToken {
+  tokenId: string;
+  available: BigNumber;
+  token: {
+    name: string;
+    displaySymbol: string;
+    symbol: string;
+    isLPS?: boolean;
+  };
+  factor?: string;
+  reserve?: string;
+}
+
+export function useConvertibleTokens(): {
+  fromTokens: ConvertibleToken[];
+} {
+  const DFIUtxo = useSelector((state: RootState) =>
+    DFIUtxoSelector(state.wallet)
+  );
+  const DFIToken = useSelector((state: RootState) =>
+    DFITokenSelector(state.wallet)
+  );
+
+  const fromTokens: ConvertibleToken[] = [
+    {
+      tokenId: DFIToken.id,
+      available: new BigNumber(DFIToken.amount),
+      token: {
+        name: DFIToken.name,
+        displaySymbol: DFIToken.displaySymbol,
+        symbol: DFIToken.symbol,
+        isLPS: false,
+      },
+    },
+    {
+      tokenId: DFIUtxo.id,
+      available: new BigNumber(DFIUtxo.amount),
+      token: {
+        name: DFIUtxo.name,
+        displaySymbol: DFIUtxo.displaySymbol,
+        symbol: DFIUtxo.symbol,
+        isLPS: false,
+      },
+    },
+  ];
+
+  return {
+    fromTokens,
+  };
+}
diff --git a/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertConfirmationScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Portfolio/screens/ConvertConfirmationScreen.tsx
@@ -26,12 +26,9 @@ import { View } from "react-native";
 import { useWalletContext } from "@shared-contexts/WalletContext";
 import { useAddressLabel } from "@hooks/useAddressLabel";
 import { NumberRowV2 } from "@components/NumberRowV2";
-import {
-  ConvertTokenUnit,
-  getDisplayUnit,
-} from "@screens/AppNavigator/screens/Portfolio/screens/ConvertScreen";
-import { ScreenName } from "@screens/enum";
-import { ConversionMode } from "./ConvertScreen";
+import { ConvertTokenUnit } from "@screens/AppNavigator/screens/Portfolio/screens/ConvertScreen";
+import { ConversionMode, ScreenName } from "@screens/enum";
+import { DomainType, useDomainContext } from "@contexts/DomainContext";
 import { PortfolioParamList } from "../PortfolioNavigator";
 
 type Props = StackScreenProps<PortfolioParamList, "ConvertConfirmationScreen">;
@@ -48,6 +45,7 @@ export function ConvertConfirmationScreen({ route }: Props): JSX.Element {
     originScreen,
   } = route.params;
   const { address } = useWalletContext();
+  const { domain } = useDomainContext();
   const addressLabel = useAddressLabel(address);
   const hasPendingJob = useSelector((state: RootState) =>
     hasTxQueued(state.transactionQueue)
@@ -124,10 +122,7 @@ export function ConvertConfirmationScreen({ route }: Props): JSX.Element {
             "screens/ConvertConfirmScreen",
             "You are converting to {{unit}}",
             {
-              unit: translate(
-                "screens/ConvertScreen",
-                getDisplayUnit(targetUnit)
-              ),
+              unit: translate("screens/ConvertScreen", targetUnit),
             }
           )}
           amount={amount}
@@ -182,7 +177,7 @@ export function ConvertConfirmationScreen({ route }: Props): JSX.Element {
           }}
           rhs={{
             value: getResultingValue(
-              ConvertTokenUnit.Token,
+              ConvertTokenUnit.DFI,
               fee,
               sourceBalance,
               sourceUnit,
@@ -197,7 +192,7 @@ export function ConvertConfirmationScreen({ route }: Props): JSX.Element {
             },
             subValue: {
               value: getResultingPercentage(
-                ConvertTokenUnit.Token,
+                ConvertTokenUnit.DFI,
                 sourceBalance,
                 sourceUnit,
                 targetBalance
@@ -218,7 +213,12 @@ export function ConvertConfirmationScreen({ route }: Props): JSX.Element {
             dark: tailwind("bg-transparent border-mono-dark-v2-300"),
           }}
           lhs={{
-            value: translate("screens/ConvertConfirmScreen", "Resulting UTXO"),
+            value: translate(
+              "screens/ConvertConfirmScreen",
+              domain === DomainType.DFI
+                ? "Resulting UTXO"
+                : "Resulting Tokens (EVM)"
+            ),
             testID: "resulting_utxo_label",
             themedProps: {
               light: tailwind("text-mono-light-v2-500"),
@@ -227,22 +227,26 @@ export function ConvertConfirmationScreen({ route }: Props): JSX.Element {
           }}
           rhs={{
             value: getResultingValue(
-              ConvertTokenUnit.UTXO,
+              domain === DomainType.DFI
+                ? ConvertTokenUnit.UTXO
+                : ConvertTokenUnit.EVMDFI,
               fee,
               sourceBalance,
               sourceUnit,
               targetBalance,
               targetUnit
             ),
-            suffix: " DFI",
+            suffix: domain === DomainType.DFI ? " DFI" : "",
             testID: "resulting_utxo_value",
             themedProps: {
               light: tailwind("text-mono-light-v2-900 font-semibold-v2"),
               dark: tailwind("text-mono-dark-v2-900 font-semibold-v2"),
             },
             subValue: {
               value: getResultingPercentage(
-                ConvertTokenUnit.UTXO,
+                domain === DomainType.DFI
+                  ? ConvertTokenUnit.UTXO
+                  : ConvertTokenUnit.EVMDFI,
                 sourceBalance,
                 sourceUnit,
                 targetBalance