Feat/moonpay quote display (#5604)

* feat: add moonpay quote display flag * feat: refactor useSwapTransaction ptxSwapMoonpayProviderFlag use * feat: filter moonpay by flag in useProviderRates. Track ptxSwapMoonpayProviderFlag in swap form * chore: add changeset * fix: change flag to be positive for moonpay swap flag * fix: improve moonpay track (#5629) * fix: improve moonpay track * refactor: refactor ptxSwapMoonpayProviderFlag boolean * refactor: redefine WEB_PROVIDERS * refactor: move complete ptxSwapMoonpayProviderFlag logic to useGetSwapTrackingProperties * fix: lint --------- Co-authored-by: fstream9 <[email protected]> Co-authored-by: sarneijim <[email protected]> Co-authored-by: sarneijim <[email protected]>
LedgerHQ · Dec 1, 2023 · c8172ab · c8172ab · vercel · Dec 1, 2023
1 parent ed17856
commit c8172ab
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 7 deletions.
diff --git a/.changeset/odd-brooms-float.md b/.changeset/odd-brooms-float.md
@@ -0,0 +1,7 @@
+---
+"@ledgerhq/types-live": patch
+"ledger-live-desktop": patch
+"@ledgerhq/live-common": patch
+---
+
+add ptxSwapMoonpayProvider feature flag. Display moonpay quote in swap form and redirect to moonpay web app on moonpay quote selection.
diff --git a/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/index.tsx
@@ -40,6 +40,8 @@ import { OnNoRatesCallback } from "@ledgerhq/live-common/exchange/swap/types";
 import { v4 } from "uuid";
 import SwapWebView, { SWAP_WEB_MANIFEST_ID, SwapWebProps } from "./SwapWebView";
 
+const DAPP_PROVIDERS = ["paraswap", "oneinch", "moonpay"];
+
 const Wrapper = styled(Box).attrs({
   p: 20,
   mt: 12,
@@ -59,7 +61,6 @@ const Button = styled(ButtonBase)`
 `;
 
 const SwapForm = () => {
-  const swapDefaultTrack = useGetSwapTrackingProperties();
   const [idleState, setIdleState] = useState(false);
   const { t } = useTranslation();
   const dispatch = useDispatch();
@@ -69,6 +70,7 @@ const SwapForm = () => {
   const totalListedAccounts = useSelector(flattenAccountsSelector);
   const exchangeRate = useSelector(rateSelector);
   const walletApiPartnerList = useFeature("swapWalletApiPartnerList");
+  const swapDefaultTrack = useGetSwapTrackingProperties();
 
   const setExchangeRate: SetExchangeRateCallback = useCallback(
     rate => {
@@ -147,6 +149,7 @@ const SwapForm = () => {
       const fromAccountId = from.parentAccount?.id || from.account?.id;
 
       const pathname = `/platform/${getProviderName(provider).toLowerCase()}`;
+
       const account = accounts.find(a => a.id === fromAccountId);
       if (!account) return;
       const parentAccount = isTokenAccount(account)
@@ -227,7 +230,7 @@ const SwapForm = () => {
   const onSubmit = () => {
     if (!exchangeRate) return;
 
-    const { provider, providerType } = exchangeRate;
+    const { provider } = exchangeRate;
     track("button_clicked", {
       button: "Request",
       page: "Page Swap Form",
@@ -237,7 +240,7 @@ const SwapForm = () => {
       partner: provider,
     });
 
-    if (providerType === "DEX") {
+    if (DAPP_PROVIDERS.includes(provider)) {
       redirectToProviderApp(provider);
     } else {
       // Fix LIVE-9064, prevent the transaction from being updated when using useAllAmount

diff --git a/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/utils/index.ts b/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/utils/index.ts
@@ -3,16 +3,19 @@ import { useHistory } from "react-router-dom";
 import { SwapExchangeRateAmountTooLow } from "@ledgerhq/live-common/errors";
 import { NotEnoughBalance } from "@ledgerhq/errors";
 import { track } from "~/renderer/analytics/segment";
+import useFeature from "@ledgerhq/live-common/featureFlags/useFeature";
 
 export const SWAP_VERSION = "2.35";
 
 export const useGetSwapTrackingProperties = () => {
+  const ptxSwapMoonpayProviderFlag = useFeature("ptxSwapMoonpayProvider");
   return useMemo(
     () => ({
       swapVersion: SWAP_VERSION,
       flow: "swap",
+      ptxSwapMoonpayProviderEnabled: !!ptxSwapMoonpayProviderFlag?.enabled,
     }),
-    [],
+    [ptxSwapMoonpayProviderFlag?.enabled],
   );
 };
 

diff --git a/libs/ledger-live-common/src/exchange/swap/hooks/v5/useProviderRates.ts b/libs/ledger-live-common/src/exchange/swap/hooks/v5/useProviderRates.ts
@@ -2,6 +2,8 @@ import BigNumber from "bignumber.js";
 import { OnNoRatesCallback, RatesReducerState, SwapSelectorStateType } from "../../types";
 import { useFetchRates } from "./useFetchRates";
 import { SetExchangeRateCallback } from "../useSwapTransaction";
+import { useFeature } from "../../../../featureFlags";
+import { useCallback } from "react";
 
 type Props = {
   fromState: SwapSelectorStateType;
@@ -22,15 +24,25 @@ export function useProviderRates({
   onNoRates,
   setExchangeRate,
 }: Props): UseProviderRatesResponse {
+  const ptxSwapMoonpayProviderFlag = useFeature("ptxSwapMoonpayProvider");
+  const filterMoonpay = useCallback(
+    rates => {
+      if (!rates || ptxSwapMoonpayProviderFlag?.enabled) return rates;
+      return rates.filter(r => r.provider !== "moonpay");
+    },
+    [ptxSwapMoonpayProviderFlag?.enabled],
+  );
+
   const { data, isLoading, error, refetch } = useFetchRates({
     fromCurrencyAccount: fromState.account,
     toCurrency: toState.currency,
     fromCurrencyAmount: fromState.amount ?? BigNumber(0),
     onSuccess(data) {
-      if (data.length === 0) {
+      const rates = filterMoonpay(data);
+      if (rates.length === 0) {
         onNoRates?.({ fromState, toState });
       } else {
-        setExchangeRate?.(data[0]);
+        setExchangeRate?.(rates[0]);
       }
     },
   });
@@ -77,7 +89,7 @@ export function useProviderRates({
     return {
       rates: {
         status: "success",
-        value: data,
+        value: filterMoonpay(data),
         error: undefined,
       },
       refetchRates: refetch,

diff --git a/libs/ledger-live-common/src/featureFlags/defaultFeatures.ts b/libs/ledger-live-common/src/featureFlags/defaultFeatures.ts
@@ -410,4 +410,6 @@ export const DEFAULT_FEATURES: Features = {
   ptxSwapLiveApp: {
     enabled: false,
   },
+
+  ptxSwapMoonpayProvider: DEFAULT_FEATURE,
 };
diff --git a/libs/ledgerjs/packages/types-live/src/feature.ts b/libs/ledgerjs/packages/types-live/src/feature.ts
@@ -183,6 +183,7 @@ export type Features = CurrencyFeatures & {
   cexDepositEntryPointsMobile: Feature_CexDepositEntryPointsMobile;
   fetchAdditionalCoins: Feature_FetchAdditionalCoins;
   ptxSwapLiveApp: Feature_PtxSwapLiveApp;
+  ptxSwapMoonpayProvider: Feature_PtxSwapMoonpayProvider;
 };
 
 /**
@@ -494,6 +495,7 @@ export type Feature_ListAppsV2minor1 = DefaultFeature;
 export type Feature_BrazeLearn = DefaultFeature;
 export type Feature_LlmNewDeviceSelection = DefaultFeature;
 export type Feature_LlmWalletQuickActions = DefaultFeature;
+export type Feature_PtxSwapMoonpayProvider = DefaultFeature;
 
 /**
  * Utils types.