diff --git a/.changeset/lazy-carrots-shop.md b/.changeset/lazy-carrots-shop.md new file mode 100644 index 000000000000..7cc909c19821 --- /dev/null +++ b/.changeset/lazy-carrots-shop.md @@ -0,0 +1,5 @@ +--- +"ledger-live-desktop": minor +--- + +Manually start the account side from swap-live diff --git a/apps/ledger-live-desktop/src/renderer/drawers/DataSelector/AccountList.tsx b/apps/ledger-live-desktop/src/renderer/drawers/DataSelector/AccountList.tsx index 0fb0d253a9e6..eef00d9b976c 100644 --- a/apps/ledger-live-desktop/src/renderer/drawers/DataSelector/AccountList.tsx +++ b/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; }; -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 ( <> diff --git a/apps/ledger-live-desktop/src/renderer/drawers/DataSelector/SelectAccountAndCurrencyDrawer.tsx b/apps/ledger-live-desktop/src/renderer/drawers/DataSelector/SelectAccountAndCurrencyDrawer.tsx index 2a0b290eb6e3..e70f8858d75a 100644 --- a/apps/ledger-live-desktop/src/renderer/drawers/DataSelector/SelectAccountAndCurrencyDrawer.tsx +++ b/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; }; 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(""); @@ -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 ( void; + onAddAccountClick?: () => void; accounts$?: Observable; }; 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 ( @@ -66,6 +74,7 @@ const SelectAccountDrawer = ({ diff --git a/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/SwapWebViewDemo3.tsx b/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/SwapWebViewDemo3.tsx index ad77bae0b74c..3131ac68dc8c 100644 --- a/apps/ledger-live-desktop/src/renderer/screens/exchange/Swap2/Form/SwapWebViewDemo3.tsx +++ b/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 => { + 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, }: {