feat(LIVE-14855): manually instantiate the account sidebar when swap triggers custom.requestAccount

.changeset/lazy-carrots-shop.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Manually start the account side from swap-live

apps/ledger-live-desktop/src/renderer/drawers/DataSelector/AccountList.tsx

@@ -36,10 +36,11 @@ const AddIconContainer = styled.div`
 type Props = {
   currency: CryptoCurrency | TokenCurrency;
   onAccountSelect: (account: AccountLike, parentAccount?: Account) => void;
+  onAddAccountClick?: () => void;
   accounts$?: Observable<WalletAPIAccount[]>;
 };
 
-export function AccountList({ currency, onAccountSelect, accounts$ }: Props) {
+export function AccountList({ currency, onAccountSelect, onAddAccountClick, accounts$ }: Props) {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const accountIds = useGetAccountIds(accounts$);
@@ -49,12 +50,16 @@ export function AccountList({ currency, onAccountSelect, accounts$ }: Props) {
     return getAccountTuplesForCurrency(currency, nestedAccounts, false, accountIds);
   }, [nestedAccounts, currency, accountIds]);
   const openAddAccounts = useCallback(() => {
+    if (onAddAccountClick) {
+      onAddAccountClick();
+    }
+
     dispatch(
       openModal("MODAL_ADD_ACCOUNTS", {
         currency,
       }),
     );
-  }, [dispatch, currency]);
+  }, [dispatch, onAddAccountClick, currency]);
 
   return (
     <>

apps/ledger-live-desktop/src/renderer/drawers/DataSelector/SelectAccountAndCurrencyDrawer.tsx

@@ -52,6 +52,8 @@ export type SelectAccountAndCurrencyDrawerProps = {
   onClose?: () => void;
   currencies: CryptoOrTokenCurrency[];
   onAccountSelected: (account: AccountLike, parentAccount?: Account) => void;
+  onAddAccountClick?: () => void;
+  onCurrencySelected?: (currency: CryptoOrTokenCurrency) => void;
   accounts$?: Observable<WalletAPIAccount[]>;
 };
 const SearchInputContainer = styled.div`
@@ -60,7 +62,7 @@ const SearchInputContainer = styled.div`
 `;
 
 function SelectAccountAndCurrencyDrawer(props: SelectAccountAndCurrencyDrawerProps) {
-  const { currencies, onAccountSelected, onClose, accounts$ } = props;
+  const { currencies, onAccountSelected, onAddAccountClick, onClose, accounts$ } = props;
   const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState<string>("");
 
@@ -74,14 +76,20 @@ function SelectAccountAndCurrencyDrawer(props: SelectAccountAndCurrencyDrawerPro
     }
     return fuzzySearch(sortedCurrencies, searchValue);
   }, [searchValue, sortedCurrencies]);
+
   const handleCurrencySelected = useCallback(
     (currency: CryptoOrTokenCurrency) => {
+      if (props.onCurrencySelected) {
+        props.onCurrencySelected(currency);
+      }
+
       setDrawer(
         SelectAccountDrawer,
         {
           accounts$,
           currency,
           onAccountSelected,
+          onAddAccountClick,
           onRequestBack: () =>
             setDrawer(MemoizedSelectAccountAndCurrencyDrawer, props, {
               onRequestClose: onClose,
@@ -92,8 +100,9 @@ function SelectAccountAndCurrencyDrawer(props: SelectAccountAndCurrencyDrawerPro
         },
       );
     },
-    [onAccountSelected, props, onClose, accounts$],
+    [onAccountSelected, onAddAccountClick, props, onClose, accounts$],
   );
+
   if (currencies.length === 1) {
     return (
       <SelectAccountDrawer

apps/ledger-live-desktop/src/renderer/drawers/DataSelector/SelectAccountDrawer.tsx

@@ -33,11 +33,13 @@ const HeaderContainer = styled.div`
 type SelectAccountDrawerProps = {
   currency: CryptoCurrency | TokenCurrency;
   onAccountSelected: (account: AccountLike, parentAccount?: Account) => void;
+  onAddAccountClick?: () => void;
   accounts$?: Observable<WalletAPIAccount[]>;
 };
 const SelectAccountDrawer = ({
   currency,
   onAccountSelected,
+  onAddAccountClick,
   accounts$,
 }: SelectAccountDrawerProps) => {
   const { t } = useTranslation();
@@ -47,6 +49,12 @@ const SelectAccountDrawer = ({
     },
     [onAccountSelected],
   );
+
+  const handleAddAccountClick = useCallback(() => {
+    if (onAddAccountClick) {
+      onAddAccountClick();
+    }
+  }, [onAddAccountClick]);
   return (
     <AccountSelectorDrawerContainer>
       <HeaderContainer>
@@ -66,6 +74,7 @@ const SelectAccountDrawer = ({
         <AccountList
           currency={currency}
           onAccountSelect={handleAccountSelect}
+          onAddAccountClick={handleAddAccountClick}
           accounts$={accounts$}
         />
       </SelectorContent>

apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/SwapWebViewDemo3.tsx

@@ -4,6 +4,7 @@ import { LiveAppManifest } from "@ledgerhq/live-common/platform/types";
 import { handlers as loggerHandlers } from "@ledgerhq/live-common/wallet-api/CustomLogger/server";
 import { getEnv } from "@ledgerhq/live-env";
 
+import { listCurrencies, filterCurrencies } from "@ledgerhq/live-common/currencies/helpers";
 import { getNodeApi } from "@ledgerhq/coin-evm/api/node/index";
 import { getMainAccount, getParentAccount } from "@ledgerhq/live-common/account/helpers";
 import { getAccountBridge } from "@ledgerhq/live-common/bridge/impl";
@@ -53,6 +54,10 @@ import {
 } from "../utils/index";
 import FeesDrawerLiveApp from "./FeesDrawerLiveApp";
 import WebviewErrorDrawer from "./WebviewErrorDrawer/index";
+import SelectAccountAndCurrencyDrawer from "~/renderer/drawers/DataSelector/SelectAccountAndCurrencyDrawer";
+import { WalletAPIAccount } from "@ledgerhq/live-common/wallet-api/types";
+import { CryptoOrTokenCurrency } from "@ledgerhq/types-cryptoassets";
+
 export class UnableToLoadSwapLiveError extends Error {
   constructor(message: string) {
     const name = "UnableToLoadSwapLiveError";
@@ -138,6 +143,63 @@ const SwapWebView = ({ manifest, liveAppUnavailable }: SwapWebProps) => {
     () => ({
       ...loggerHandlers,
       ...customPTXHandlers,
+
+      "custom.requestAccount": ({
+        params,
+      }: {
+        params: {
+          currencyIds: string[];
+          requestId: "from-account" | "to-account";
+        };
+      }): Promise<WalletAPIAccount> => {
+        const { currencyIds, requestId } = params;
+        const cryptoCurrencies = filterCurrencies(listCurrencies(true), {
+          currencies: currencyIds || [],
+        });
+
+        return new Promise((resolve, reject) => {
+          let lastCurrencySelected: CryptoOrTokenCurrency | null = null;
+          setDrawer(
+            SelectAccountAndCurrencyDrawer,
+            {
+              currencies: cryptoCurrencies,
+              onAccountSelected: (account, parentAccount) => {
+                track("button_clicked", {
+                  button: `Choose Account - ${requestId === "from-account" ? "Source" : "Target"}`,
+                  page: "InputSwap",
+                  ...swapDefaultTrack,
+                });
+                setDrawer();
+                resolve(accountToWalletAPIAccount(walletState, account, parentAccount));
+              },
+              onCurrencySelected: currency => {
+                lastCurrencySelected = currency;
+                track("button_clicked", {
+                  button: `Choose Asset - ${requestId === "from-account" ? "Source" : "Target"}`,
+                  currency: lastCurrencySelected?.name,
+                  page: "InputSwap",
+                  ...swapDefaultTrack,
+                });
+              },
+              onAddAccountClick: () => {
+                track("button_clicked", {
+                  button: requestId === "from-account" ? "New source account" : "new account",
+                  currency: lastCurrencySelected?.name,
+                  page: "InputSwap",
+                  ...swapDefaultTrack,
+                });
+              },
+            },
+            {
+              onRequestClose: () => {
+                setDrawer();
+                reject();
+              },
+            },
+          );
+        });
+      },
+
       "custom.getFee": async ({
         params,
       }: {