ENGB2C-104 Swap form

package.json

@@ -47,7 +47,7 @@
     "mock-android": "yarn android:mock && yarn android:install",
     "staging-android": "yarn android:staging && yarn android:install",
     "prettier": "prettier --write \"src/**/*.js\"",
-    "lint": "eslint src",
+    "lint": "eslint src --fix",
     "flow": "flow",
     "test": "yarn check --integrity && ./scripts/check-no-dups.sh && yarn lint --quiet",
     "sync-flowtyped": "NODE_OPTIONS=--max_old_space_size=10000 flow-typed install -s -o && rm flow-typed/npm/axios_*",

src/actions/general.js

@@ -6,12 +6,14 @@ import {
   sortAccountsComparatorFromOrder,
 } from "@ledgerhq/live-common/lib/account";
 import type { FlattenAccountsOptions } from "@ledgerhq/live-common/lib/account";
+import type { TrackingPair } from "@ledgerhq/live-common/lib/countervalues/types";
 import {
   useCalculateCountervalueCallback as useCalculateCountervalueCallbackCommon,
   useCountervaluesPolling,
   useTrackingPairForAccounts,
 } from "@ledgerhq/live-common/lib/countervalues/react";
 import { useDistribution as useDistributionCommon } from "@ledgerhq/live-common/lib/portfolio/v2/react";
+import { BehaviorSubject } from "rxjs";
 import { reorderAccounts } from "./accounts";
 import { accountsSelector } from "../reducers/accounts";
 import {
@@ -22,6 +24,10 @@ import { clearBridgeCache } from "../bridge/cache";
 import clearLibcore from "../helpers/clearLibcore";
 import { flushAll } from "../components/DBSave";
 
+const extraSessionTrackingPairsChanges: BehaviorSubject<
+  TrackingPair[],
+> = new BehaviorSubject([]);
+
 export function useDistribution() {
   const accounts = useSelector(accountsSelector);
   const to = useSelector(counterValueCurrencySelector);
@@ -116,8 +122,36 @@ export function useUserSettings() {
   );
 }
 
-export function useTrackingPairs() {
+export function addExtraSessionTrackingPair(trackingPair: TrackingPair) {
+  const value = extraSessionTrackingPairsChanges.value;
+  if (
+    !value.some(
+      tp => tp.from === trackingPair.from && tp.to === trackingPair.to,
+    )
+  )
+    extraSessionTrackingPairsChanges.next(value.concat(trackingPair));
+}
+
+export function useExtraSessionTrackingPair() {
+  const [extraSessionTrackingPair, setExtraSessionTrackingPair] = useState([]);
+
+  useEffect(() => {
+    const sub = extraSessionTrackingPairsChanges.subscribe(
+      setExtraSessionTrackingPair,
+    );
+    return () => sub && sub.unsubscribe();
+  }, []);
+
+  return extraSessionTrackingPair;
+}
+
+export function useTrackingPairs(): TrackingPair[] {
   const accounts = useSelector(accountsSelector);
   const countervalue = useSelector(counterValueCurrencySelector);
-  return useTrackingPairForAccounts(accounts, countervalue);
+  const trPairs = useTrackingPairForAccounts(accounts, countervalue);
+  const extraSessionTrackingPairs = useExtraSessionTrackingPair();
+  return useMemo(() => extraSessionTrackingPairs.concat(trPairs), [
+    extraSessionTrackingPairs,
+    trPairs,
+  ]);
 }

src/components/ConfirmationModal.js

@@ -17,6 +17,7 @@ type Props = {|
   confirmationTitle?: React$Node,
   confirmationDesc?: React$Node,
   Icon?: React$ComponentType<*>,
+  iconColor?: string,
   image?: number,
   confirmButtonText?: React$Node,
   rejectButtonText?: React$Node,
@@ -41,12 +42,16 @@ class ConfirmationModal extends PureComponent<Props> {
       rejectButtonText,
       onConfirm,
       Icon,
+      iconColor,
       image,
       alert,
       hideRejectButton,
       colors,
       ...rest
     } = this.props;
+
+    const iColor = iconColor || colors.live;
+
     return (
       <BottomModal
         id="ConfirmationModal"
@@ -56,10 +61,8 @@ class ConfirmationModal extends PureComponent<Props> {
         {...rest}
       >
         {Icon && (
-          <View
-            style={[styles.icon, { backgroundColor: rgba(colors.live, 0.08) }]}
-          >
-            <Icon size={24} color={colors.live} />
+          <View style={[styles.icon, { backgroundColor: rgba(iColor, 0.08) }]}>
+            <Icon size={24} color={iColor} />
           </View>
         )}
         {image && (

src/components/CounterValue.js

@@ -1,13 +1,20 @@
 // @flow
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useMemo, useEffect } from "react";
 import { BigNumber } from "bignumber.js";
 import { useSelector } from "react-redux";
 import type { Currency } from "@ledgerhq/live-common/lib/types";
-import { useCalculate } from "@ledgerhq/live-common/lib/countervalues/react";
+import {
+  useCalculate,
+  useCountervaluesPolling,
+} from "@ledgerhq/live-common/lib/countervalues/react";
 import { TouchableOpacity, StyleSheet } from "react-native";
 import { Trans } from "react-i18next";
 import { useTheme } from "@react-navigation/native";
 import { counterValueCurrencySelector } from "../reducers/settings";
+import {
+  useTrackingPairs,
+  addExtraSessionTrackingPair,
+} from "../actions/general";
 import CurrencyUnitValue from "./CurrencyUnitValue";
 import LText from "./LText";
 import Circle from "./Circle";
@@ -67,6 +74,36 @@ export default function CounterValue({
   const value =
     valueProp instanceof BigNumber ? valueProp.toNumber() : valueProp;
   const counterValueCurrency = useSelector(counterValueCurrencySelector);
+
+  const trackingPairs = useTrackingPairs();
+  const cvPolling = useCountervaluesPolling();
+  const hasTrackingPair = useMemo(
+    () =>
+      trackingPairs.some(
+        tp => tp.from === currency && tp.to === counterValueCurrency,
+      ),
+    [counterValueCurrency, currency, trackingPairs],
+  );
+
+  useEffect(() => {
+    let t;
+    if (!hasTrackingPair) {
+      addExtraSessionTrackingPair({ from: currency, to: counterValueCurrency });
+      t = setTimeout(cvPolling.poll, 2000); // poll after 2s to ensure debounced CV userSettings are effective after this update
+    }
+
+    return () => {
+      if (t) clearTimeout(t);
+    };
+  }, [
+    counterValueCurrency,
+    currency,
+    cvPolling,
+    cvPolling.poll,
+    hasTrackingPair,
+    trackingPairs,
+  ]);
+
   const countervalue = useCalculate({
     from: currency,
     to: counterValueCurrency,

src/components/CurrencyInput.js

@@ -48,6 +48,7 @@ type Props = {
   style?: *,
   inputStyle?: *,
   colors: *,
+  dynamicFontRatio?: number,
 };
 
 type State = {
@@ -68,6 +69,7 @@ class CurrencyInput extends PureComponent<Props, State> {
     hasWarning: false,
     autoFocus: false,
     editable: true,
+    dynamicFontRatio: 0.75,
   };
 
   state = {
@@ -150,11 +152,12 @@ class CurrencyInput extends PureComponent<Props, State> {
       editable,
       placeholder,
       colors,
+      dynamicFontRatio = 0.75,
     } = this.props;
     const { displayValue } = this.state;
 
     // calculating an approximative font size
-    const screenWidth = Dimensions.get("window").width * 0.75;
+    const screenWidth = Dimensions.get("window").width * dynamicFontRatio;
     const dynamicFontSize = Math.round(
       clamp(
         Math.sqrt((screenWidth * 32) / displayValue.length),

src/components/FabActions.js

@@ -1,4 +1,4 @@
-// @flow;
+// @flow
 import React from "react";
 
 import { useTheme } from "@react-navigation/native";
@@ -12,8 +12,8 @@ import type { AccountLike, Account } from "@ledgerhq/live-common/lib/types";
 import { isCurrencySupported } from "../screens/Exchange/coinifyConfig";
 
 import {
-  swapSelectableCurrenciesSelector,
   readOnlyModeEnabledSelector,
+  swapSelectableCurrenciesSelector,
 } from "../reducers/settings";
 import { accountsCountSelector } from "../reducers/accounts";
 import { NavigatorName, ScreenName } from "../const";
@@ -37,9 +37,11 @@ function FabAccountActions({ account, parentAccount }: FabAccountActionsProps) {
   const { colors } = useTheme();
 
   const currency = getAccountCurrency(account);
-  const availableOnSwap = useSelector(state =>
-    swapSelectableCurrenciesSelector(state),
+  const swapSelectableCurrencies = useSelector(
+    swapSelectableCurrenciesSelector,
   );
+  const availableOnSwap =
+    swapSelectableCurrencies.includes(currency.id) && account.balance.gt(0);
   const readOnlyModeEnabled = useSelector(readOnlyModeEnabledSelector);
 
   const canBeBought = isCurrencySupported(currency, "buy");
@@ -69,7 +71,7 @@ function FabAccountActions({ account, parentAccount }: FabAccountActionsProps) {
           },
         ]
       : []),
-    ...(availableOnSwap.includes(currency.id)
+    ...(availableOnSwap
       ? [
           {
             navigationParams: [

src/components/InfoModal.js

@@ -21,14 +21,14 @@ type BulletItem = {
 
 type InfoModalProps = ModalProps & {
   id?: string,
-  title?: string | React$Element<*>,
-  desc?: string | React$Element<*>,
+  title?: React$Node,
+  desc?: React$Node,
   bullets?: BulletItem[],
   Icon?: React$ComponentType<*>,
   withCancel?: boolean,
   onContinue?: () => void,
   children?: React$Node,
-  confirmLabel?: string | React$Element<*>,
+  confirmLabel?: React$Node,
   confirmProps?: *,
 };
 

src/components/KeyboardView.js

@@ -1,6 +1,12 @@
 // @flow
 import React from "react";
-import { KeyboardAvoidingView, Platform, NativeModules } from "react-native";
+import {
+  KeyboardAvoidingView,
+  Platform,
+  NativeModules,
+  StatusBar,
+} from "react-native";
+import { useHeaderHeight } from "@react-navigation/elements";
 import { HEIGHT as ExperimentalHeaderHeight } from "../screens/Settings/Experimental/ExperimentalHeader";
 import useExperimental from "../screens/Settings/Experimental/useExperimental";
 
@@ -14,17 +20,21 @@ type Props = {
 const KeyboardView = React.memo<Props>(
   ({ style = { flex: 1 }, children }: *) => {
     const isExperimental = useExperimental();
+    const headerHeight = useHeaderHeight();
+
     let behavior;
     let keyboardVerticalOffset = isExperimental ? ExperimentalHeaderHeight : 0;
     if (Platform.OS === "ios") {
       keyboardVerticalOffset += DeviceInfo.isIPhoneX_deprecated ? 88 : 64;
-      behavior = "padding";
+      behavior = "height";
     }
 
     return (
       <KeyboardAvoidingView
         style={style}
-        keyboardVerticalOffset={keyboardVerticalOffset}
+        keyboardVerticalOffset={
+          headerHeight + StatusBar.currentHeight + keyboardVerticalOffset
+        }
         behavior={behavior}
         enabled
       >

src/components/RootNavigator/BaseNavigator.js

@@ -63,6 +63,11 @@ import RequestAccountNavigator from "./RequestAccountNavigator";
 import VerifyAccount from "../../screens/VerifyAccount";
 import PlatformApp from "../../screens/Platform/App";
 
+import SwapFormSelectAccount from "../../screens/Swap/FormSelection/SelectAccountScreen";
+import SwapFormSelectCurrency from "../../screens/Swap/FormSelection/SelectCurrencyScreen";
+import SwapFormSelectFees from "../../screens/Swap/FormSelection/SelectFeesScreen";
+import SwapFormSelectProviderRate from "../../screens/Swap/FormSelection/SelectProviderRateScreen";
+
 export default function BaseNavigator() {
   const { t } = useTranslation();
   const { colors } = useTheme();
@@ -118,7 +123,56 @@ export default function BaseNavigator() {
       <Stack.Screen
         name={NavigatorName.Swap}
         component={SwapNavigator}
-        options={{ headerShown: false }}
+        options={{
+          ...stackNavigationConfig,
+          headerStyle: styles.headerNoShadow,
+          headerLeft: null,
+          title: t("transfer.swap.form.tab"),
+        }}
+      />
+      <Stack.Screen
+        name={ScreenName.SwapV2FormSelectAccount}
+        component={SwapFormSelectAccount}
+        options={({ route }) => ({
+          headerTitle: () => (
+            <StepHeader
+              title={
+                route.params.target === "from"
+                  ? t("transfer.swap.form.from")
+                  : t("transfer.swap.form.to")
+              }
+            />
+          ),
+          headerRight: null,
+        })}
+      />
+      <Stack.Screen
+        name={ScreenName.SwapV2FormSelectCurrency}
+        component={SwapFormSelectCurrency}
+        options={{
+          headerTitle: () => <StepHeader title={t("transfer.swap.form.to")} />,
+          headerRight: null,
+        }}
+      />
+      <Stack.Screen
+        name={ScreenName.SwapFormSelectProviderRate}
+        component={SwapFormSelectProviderRate}
+        options={{
+          headerTitle: () => (
+            <StepHeader title={t("transfer.swap.form.summary.method")} />
+          ),
+          headerRight: null,
+        }}
+      />
+      <Stack.Screen
+        name={ScreenName.SwapV2FormSelectFees}
+        component={SwapFormSelectFees}
+        options={{
+          headerTitle: () => (
+            <StepHeader title={t("transfer.swap.form.summary.fees")} />
+          ),
+          headerRight: null,
+        }}
       />
       <Stack.Screen
         name={NavigatorName.Lending}