fix: refactor ptx adding correct account to query string (#4841)

* fix: add account wallet id conversion for buy deeplinks (#4792) * fix: add account wallet id conversion for buy deeplinks * fix: change logic to check api version * chore: remove extra constant * fix: refactor ptx adding correct account to query string * fix: useMemo instead of useEffect and small cleanup --------- Co-authored-by: sarneijim <[email protected]> Co-authored-by: Kant <[email protected]>
LedgerHQ · Sep 27, 2023 · 948d3ba · 948d3ba · vercel · Sep 27, 2023
1 parent 304bb46
commit 948d3ba
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 6 deletions.
diff --git a/.changeset/nice-cobras-obey.md b/.changeset/nice-cobras-obey.md
@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": patch
+"live-mobile": patch
+---
+
+Add account wallet id conversion for buy deeplinks
diff --git a/apps/ledger-live-desktop/src/renderer/screens/exchange/index.tsx b/apps/ledger-live-desktop/src/renderer/screens/exchange/index.tsx
@@ -1,17 +1,22 @@
-import React from "react";
+import React, { useMemo } from "react";
+import semver from "semver";
 import { RouteComponentProps, useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { RampCatalog } from "@ledgerhq/live-common/platform/providers/RampCatalogProvider/types";
 import Card from "~/renderer/components/Box/Card";
 import { languageSelector } from "~/renderer/reducers/settings";
+import { accountsSelector } from "~/renderer/reducers/accounts";
 import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 import useTheme from "~/renderer/hooks/useTheme";
 import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
 import WebPTXPlayer from "~/renderer/components/WebPTXPlayer";
+import { getParentAccount, isTokenAccount } from "@ledgerhq/live-common/account/index";
 import { LiveAppManifest, Loadable } from "@ledgerhq/live-common/platform/types";
+import { accountToWalletAPIAccount } from "@ledgerhq/live-common/wallet-api/converters";
 import {
   DEFAULT_MULTIBUY_APP_ID,
   INTERNAL_APP_IDS,
+  WALLET_API_VERSION,
 } from "@ledgerhq/live-common/wallet-api/constants";
 
 export type DProps = {
@@ -20,10 +25,14 @@ export type DProps = {
   defaultTicker?: string | null;
   rampCatalog: Loadable<RampCatalog>;
 };
+
+type ExchangeState = { account?: string } | undefined;
+
 const LiveAppExchange = ({ appId }: { appId: string }) => {
-  const { state: urlParams, search } = useLocation();
+  const { state: urlParams, search } = useLocation<ExchangeState>();
   const searchParams = new URLSearchParams(search);
   const locale = useSelector(languageSelector);
+  const accounts = useSelector(accountsSelector);
 
   const mockManifest: LiveAppManifest | undefined =
     process.env.MOCK_REMOTE_LIVE_MANIFEST && JSON.parse(process.env.MOCK_REMOTE_LIVE_MANIFEST)[0];
@@ -33,6 +42,28 @@ const LiveAppExchange = ({ appId }: { appId: string }) => {
   const manifest = localManifest || mockManifest || remoteManifest;
   const themeType = useTheme().colors.palette.type;
 
+  /**
+   * Pass correct account ID
+   * Due to Platform SDK account ID not being equivalent to Wallet API account ID
+   */
+  const customUrlParams = useMemo(() => {
+    if (
+      urlParams?.account &&
+      manifest?.apiVersion &&
+      semver.satisfies(WALLET_API_VERSION, manifest.apiVersion)
+    ) {
+      const { account: accountId } = urlParams;
+      const account = accounts.find(a => a.id === accountId);
+      if (account) {
+        const parentAccount = isTokenAccount(account)
+          ? getParentAccount(account, accounts)
+          : undefined;
+        urlParams.account = accountToWalletAPIAccount(account, parentAccount).id;
+      }
+    }
+    return urlParams;
+  }, [accounts, manifest?.apiVersion, urlParams]);
+
   /**
    * Given the user is on an internal app (webview url is owned by LL) we must reset the session
    * to ensure the context is reset. last-screen is used to give an external app's webview context
@@ -57,7 +88,7 @@ const LiveAppExchange = ({ appId }: { appId: string }) => {
           manifest={manifest}
           inputs={{
             theme: themeType,
-            ...(urlParams as object),
+            ...customUrlParams,
             lang: locale,
             ...Object.fromEntries(searchParams.entries()),
           }}

diff --git a/apps/ledger-live-mobile/src/screens/PTX/BuyAndSell/index.tsx b/apps/ledger-live-mobile/src/screens/PTX/BuyAndSell/index.tsx
@@ -1,10 +1,14 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
+import { useSelector } from "react-redux";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import semver from "semver";
+import { getParentAccount, isTokenAccount } from "@ledgerhq/live-common/account/index";
 import { useLocalLiveAppManifest } from "@ledgerhq/live-common/platform/providers/LocalLiveAppProvider/index";
 import {
   useRemoteLiveAppContext,
   useRemoteLiveAppManifest,
 } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
+import { accountToWalletAPIAccount } from "@ledgerhq/live-common/wallet-api/converters";
 import { useTheme } from "styled-components/native";
 import { Flex, InfiniteLoader } from "@ledgerhq/native-ui";
 import TrackScreen from "../../../analytics/TrackScreen";
@@ -14,7 +18,8 @@ import { WebPTXPlayer } from "../../../components/WebPTXPlayer";
 import { ExchangeNavigatorParamList } from "../../../components/RootNavigator/types/ExchangeNavigator";
 import { StackNavigatorProps } from "../../../components/RootNavigator/types/helpers";
 import { ScreenName } from "../../../const";
-import { INTERNAL_APP_IDS } from "@ledgerhq/live-common/wallet-api/constants";
+import { accountsSelector } from "../../../reducers/accounts";
+import { INTERNAL_APP_IDS, WALLET_API_VERSION } from "@ledgerhq/live-common/wallet-api/constants";
 
 export type Props = StackNavigatorProps<
   ExchangeNavigatorParamList,
@@ -24,6 +29,7 @@ export type Props = StackNavigatorProps<
 const appManifestNotFoundError = new Error("App not found"); // FIXME move this elsewhere.
 
 export function BuyAndSellScreen({ route }: Props) {
+  const accounts = useSelector(accountsSelector);
   const { theme } = useTheme();
   const { platform, ...params } = route.params || {};
   const searchParams = route.path
@@ -35,6 +41,28 @@ export function BuyAndSellScreen({ route }: Props) {
   const { locale } = useLocale();
   const manifest = localManifest || remoteManifest;
 
+  /**
+   * Pass correct account ID
+   * Due to Platform SDK account ID not being equivalent to Wallet API account ID
+   */
+  const customParams = useMemo(() => {
+    if (
+      params?.account &&
+      manifest?.apiVersion &&
+      semver.satisfies(WALLET_API_VERSION, manifest.apiVersion)
+    ) {
+      const { account: accountId } = params;
+      const account = accounts.find(a => a.id === accountId);
+      if (account) {
+        const parentAccount = isTokenAccount(account)
+          ? getParentAccount(account, accounts)
+          : undefined;
+        params.account = accountToWalletAPIAccount(account, parentAccount).id;
+      }
+    }
+    return params;
+  }, [accounts, manifest?.apiVersion, params]);
+
   /**
    * Given the user is on an internal app (webview url is owned by LL) we must reset the session
    * to ensure the context is reset. last-screen is used to give an external app's webview context
@@ -62,7 +90,7 @@ export function BuyAndSellScreen({ route }: Props) {
         inputs={{
           theme,
           lang: locale,
-          ...params,
+          ...customParams,
           ...Object.fromEntries(searchParams.entries()),
         }}
       />