Merge pull request #8699 from LedgerHQ/feat/dappV3AccountIdSupport

feat: dapp browser v3 accountId and customDappUrl support
LedgerHQ · Dec 17, 2024 · 042e25a · 042e25a
2 parents 883cc6a + 5f57930
commit 042e25a
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 18 deletions.
diff --git a/.changeset/plenty-beds-chew.md b/.changeset/plenty-beds-chew.md
@@ -0,0 +1,7 @@
+---
+"ledger-live-desktop": minor
+"live-mobile": minor
+"@ledgerhq/live-common": minor
+---
+
+feat: dapp browser v3 accountId and customDappUrl support
diff --git a/apps/ledger-live-desktop/src/renderer/components/Web3AppWebview/WalletAPIWebview.tsx b/apps/ledger-live-desktop/src/renderer/components/Web3AppWebview/WalletAPIWebview.tsx
@@ -230,7 +230,8 @@ function useWebView(
     manifest,
     customHandlers,
     currentAccountHistDb,
-  }: Pick<WebviewProps, "manifest" | "customHandlers" | "currentAccountHistDb">,
+    inputs,
+  }: Pick<WebviewProps, "manifest" | "customHandlers" | "currentAccountHistDb" | "inputs">,
   webviewRef: RefObject<WebviewTag>,
   tracking: TrackingAPI,
   serverRef: React.MutableRefObject<WalletAPIServer | undefined>,
@@ -288,6 +289,7 @@ function useWebView(
     postMessage: webviewHook.postMessage,
     currentAccountHistDb,
     tracking,
+    initialAccountId: inputs?.accountId?.toString(),
   });
 
   const handleMessage = useCallback(
@@ -400,6 +402,7 @@ export const WalletAPIWebview = forwardRef<WebviewAPI, WebviewProps>(
         manifest,
         customHandlers,
         currentAccountHistDb,
+        inputs,
       },
       webviewRef,
       tracking,

diff --git a/apps/ledger-live-desktop/src/renderer/components/Web3AppWebview/helpers.ts b/apps/ledger-live-desktop/src/renderer/components/Web3AppWebview/helpers.ts
@@ -296,7 +296,8 @@ export function useSelectAccount({
   currentAccountHistDb?: CurrentAccountHistDB;
 }) {
   const currencies = useManifestCurrencies(manifest);
-  const { setCurrentAccountHist, currentAccount } = useDappCurrentAccount(currentAccountHistDb);
+  const { setCurrentAccountHist, setCurrentAccount, currentAccount } =
+    useDappCurrentAccount(currentAccountHistDb);
 
   const onSelectAccount = useCallback(() => {
     setDrawer(
@@ -306,6 +307,7 @@ export function useSelectAccount({
         onAccountSelected: account => {
           setDrawer();
           setCurrentAccountHist(manifest.id, account);
+          setCurrentAccount(account);
         },
       },
       {
@@ -314,7 +316,7 @@ export function useSelectAccount({
         },
       },
     );
-  }, [currencies, manifest.id, setCurrentAccountHist]);
+  }, [currencies, manifest.id, setCurrentAccount, setCurrentAccountHist]);
 
   return { onSelectAccount, currentAccount };
 }
diff --git a/apps/ledger-live-desktop/src/renderer/screens/platform/LiveApp.tsx b/apps/ledger-live-desktop/src/renderer/screens/platform/LiveApp.tsx
@@ -92,6 +92,12 @@ export function LiveApp({ match, appId: propsAppId, location }: Props) {
       },
     };
   }
+  if (_customDappUrl && manifest && manifest.dapp) {
+    manifest = {
+      ...manifest,
+      url: _customDappUrl,
+    };
+  }
   // TODO for next urlscheme evolutions:
   // - check if local settings allow to launch an app from this branch, else display an error
   // - check if the app is available in store, else display a loader if apps are getting fetched from remote, else display an error stating that the app doesn't exist

diff --git a/apps/ledger-live-mobile/src/components/Web3AppWebview/helpers.ts b/apps/ledger-live-mobile/src/components/Web3AppWebview/helpers.ts
@@ -144,6 +144,7 @@ export function useWebView(
     uiHook,
     postMessage: webviewHook.postMessage,
     tracking,
+    initialAccountId: inputs?.accountId?.toString(),
   });
 
   const onMessage = useCallback(
@@ -555,7 +556,8 @@ export function useSelectAccount({
   currentAccountHistDb?: CurrentAccountHistDB;
 }) {
   const currencies = useManifestCurrencies(manifest);
-  const { setCurrentAccountHist, currentAccount } = useDappCurrentAccount(currentAccountHistDb);
+  const { setCurrentAccountHist, setCurrentAccount, currentAccount } =
+    useDappCurrentAccount(currentAccountHistDb);
   const navigation = useNavigation();
 
   const onSelectAccount = useCallback(() => {
@@ -567,6 +569,7 @@ export function useSelectAccount({
           allowAddAccount: true,
           onSuccess: account => {
             setCurrentAccountHist(manifest.id, account);
+            setCurrentAccount(account);
           },
         },
       });
@@ -578,11 +581,12 @@ export function useSelectAccount({
           allowAddAccount: true,
           onSuccess: account => {
             setCurrentAccountHist(manifest.id, account);
+            setCurrentAccount(account);
           },
         },
       });
     }
-  }, [manifest.id, currencies, navigation, setCurrentAccountHist]);
+  }, [currencies, navigation, setCurrentAccountHist, manifest.id, setCurrentAccount]);
 
   return { onSelectAccount, currentAccount };
 }
diff --git a/...ns/Web3HubApp/components/Web3Player/SelectAccountModal/useSelectAccountModalViewModel.tsx b/...ns/Web3HubApp/components/Web3Player/SelectAccountModal/useSelectAccountModalViewModel.tsx
@@ -30,7 +30,7 @@ export default function useSelectAccountModalViewModel({
   const currencies = useManifestCurrencies(manifest);
   const sortedCurrencies = useCurrenciesByMarketcap(currencies);
 
-  const { setCurrentAccountHist } = useDappCurrentAccount(currentAccountHistDb);
+  const { setCurrentAccountHist, setCurrentAccount } = useDappCurrentAccount(currentAccountHistDb);
 
   const onPressCurrencyItem = useCallback((currency: CryptoCurrency) => {
     setSelectedCurrency(currency);
@@ -48,9 +48,10 @@ export default function useSelectAccountModalViewModel({
   const setSelectedAccount = useCallback(
     (account: AccountLike) => {
       setCurrentAccountHist(manifest.id, account);
+      setCurrentAccount(account);
       onClose();
     },
-    [manifest.id, onClose, setCurrentAccountHist],
+    [manifest.id, onClose, setCurrentAccount, setCurrentAccountHist],
   );
 
   const navigation = useNavigation<AppProps["navigation"]>();

diff --git a/apps/ledger-live-mobile/src/screens/Platform/LiveApp.tsx b/apps/ledger-live-mobile/src/screens/Platform/LiveApp.tsx
@@ -44,6 +44,12 @@ export function LiveApp({ route }: Props) {
       },
     };
   }
+  if (route.params.customDappURL && manifest && manifest.dapp) {
+    manifest = {
+      ...manifest,
+      url: route.params.customDappURL,
+    };
+  }
   return manifest ? (
     <>
       <TrackScreen category="Platform" name="App" />

diff --git a/libs/ledger-live-common/src/hooks/useDBRaw.ts b/libs/ledger-live-common/src/hooks/useDBRaw.ts
@@ -29,13 +29,13 @@ export function useDBRaw<State, Selected>({
   }, []);
 
   const setter = useCallback(
-    newState => {
-      const val = typeof newState === "function" ? newState(state) : newState;
+    async newState => {
+      const val = typeof newState === "function" ? newState(await getter()) : newState;
 
       setState(val);
-      setterRaw(val);
+      return setterRaw(val);
     },
-    [state, setterRaw],
+    [getter, setterRaw],
   );
 
   const result = useMemo(() => selector(state), [state, selector]);

diff --git a/libs/ledger-live-common/src/platform/utils/extractDappURLFromManifest.ts b/libs/ledger-live-common/src/platform/utils/extractDappURLFromManifest.ts
@@ -10,5 +10,14 @@ export function extractDappURLFromManifest(manifest: LiveAppManifest): URL | und
       return undefined;
     }
   }
+  if (manifest && manifest.dapp) {
+    try {
+      const url = new URL(manifest.url);
+      return url;
+    } catch (error) {
+      // Invalid URL
+      return undefined;
+    }
+  }
   return undefined;
 }
diff --git a/libs/ledger-live-common/src/wallet-api/useDappLogic.ts b/libs/ledger-live-common/src/wallet-api/useDappLogic.ts
@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useRef, useCallback } from "react";
+import { useMemo, useEffect, useRef, useCallback, useState } from "react";
 import { Account, AccountLike, Operation, SignedOperation } from "@ledgerhq/types-live";
 import { atom, useAtom } from "jotai";
 import { AppManifest, WalletAPITransaction } from "./types";
@@ -89,11 +89,14 @@ function useDappAccountLogic({
   manifest,
   accounts,
   currentAccountHistDb,
+  initialAccountId,
 }: {
   manifest: AppManifest;
   accounts: AccountLike[];
   currentAccountHistDb?: CurrentAccountHistDB;
+  initialAccountId?: string;
 }) {
+  const [initialAccountSelected, setInitialAccountSelected] = useState(false);
   const { currencyIds } = usePermission(manifest);
   const { currentAccount, setCurrentAccount, setCurrentAccountHist } =
     useDappCurrentAccount(currentAccountHistDb);
@@ -136,10 +139,29 @@ function useDappAccountLogic({
     return accounts.find(account => account.id === currentAccountIdFromHist);
   }, [accounts, currentAccountIdFromHist]);
 
+  const initialAccount = useMemo(() => {
+    if (!initialAccountId) return;
+    return accounts.find(account => account.id === initialAccountId);
+  }, [accounts, initialAccountId]);
+
   useEffect(() => {
+    if (initialAccountSelected) {
+      return;
+    }
+
+    if (initialAccount && !initialAccountSelected) {
+      setCurrentAccount(initialAccount);
+      setCurrentAccountHist(manifest.id, initialAccount);
+      setInitialAccountSelected(true);
+      return;
+    }
+
     if (currentAccountFromHist) {
       setCurrentAccount(currentAccountFromHist);
-    } else if (!currentAccount || !(currentAccount && storedCurrentAccountIsPermitted())) {
+      return;
+    }
+
+    if (!currentAccount || !(currentAccount && storedCurrentAccountIsPermitted())) {
       // if there is no current account
       // OR if there is a current account but it is not permitted
       // set it to the first permitted account
@@ -149,7 +171,11 @@ function useDappAccountLogic({
     currentAccount,
     currentAccountFromHist,
     firstAccountAvailable,
+    initialAccount,
+    initialAccountSelected,
+    manifest.id,
     setCurrentAccount,
+    setCurrentAccountHist,
     storedCurrentAccountIsPermitted,
   ]);
 
@@ -180,22 +206,26 @@ export function useDappLogic({
   uiHook,
   tracking,
   currentAccountHistDb,
+  initialAccountId,
 }: {
   manifest: AppManifest;
   postMessage: (message: string) => void;
   accounts: AccountLike[];
   uiHook: UiHook;
   tracking: TrackingAPI;
   currentAccountHistDb?: CurrentAccountHistDB;
+  initialAccountId?: string;
 }) {
   const nanoApp = manifest.dapp?.nanoApp;
   const dependencies = manifest.dapp?.dependencies;
   const ws = useRef<SmartWebsocket>();
-  const { currentAccount, currentParentAccount, setCurrentAccountHist } = useDappAccountLogic({
-    manifest,
-    accounts,
-    currentAccountHistDb,
-  });
+  const { currentAccount, currentParentAccount, setCurrentAccount, setCurrentAccountHist } =
+    useDappAccountLogic({
+      manifest,
+      accounts,
+      currentAccountHistDb,
+      initialAccountId,
+    });
 
   const currentNetwork = useMemo(() => {
     if (!currentAccount) {
@@ -391,6 +421,7 @@ export function useDappLogic({
                 currencies: [getCryptoCurrencyById(requestedCurrency.currency)],
                 onSuccess: account => {
                   setCurrentAccountHist(manifest.id, account);
+                  setCurrentAccount(account);
                   resolve();
                 },
                 onCancel: () => {
@@ -615,6 +646,7 @@ export function useDappLogic({
       manifest,
       nanoApp,
       postMessage,
+      setCurrentAccount,
       setCurrentAccountHist,
       tracking,
       uiHook,