diff --git a/src/components/transactions/SendTransactionModalLink.tsx b/src/components/transactions/SendTransactionModalLink.tsx index 6b4e7bf..6a98bc2 100644 --- a/src/components/transactions/SendTransactionModalLink.tsx +++ b/src/components/transactions/SendTransactionModalLink.tsx @@ -34,3 +34,36 @@ /> ; }; + +export type OpenSendTxFn = (from?: Wallet | string, to?: string) => void; +export type SendTxHookRes = [ + OpenSendTxFn, + JSX.Element | null, + (visible: boolean) => void +]; + +interface FromTo { + from?: Wallet | string; + to?: string; +} + +export function useSendTransactionModal(): SendTxHookRes { + const [opened, setOpened] = useState(false); + const [visible, setVisible] = useState(false); + const [fromTo, setFromTo] = useState({}); + + function open(from?: Wallet | string, to?: string) { + setFromTo({ from, to }); + setVisible(true); + if (!opened) setOpened(true); + } + + const modal = opened + ? + : null; + + return [open, modal, setVisible]; +} diff --git a/src/pages/transactions/send/SendTransactionForm.tsx b/src/pages/transactions/send/SendTransactionForm.tsx index 86d9887..a315967 100644 --- a/src/pages/transactions/send/SendTransactionForm.tsx +++ b/src/pages/transactions/send/SendTransactionForm.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2020-2021 Drew Lemmy // This file is part of KristWeb 2 under AGPL-3.0. // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt -import { useState, useRef } from "react"; +import { useState, useRef, useMemo, useEffect } from "react"; import { Row, Col, Form, FormInstance, Input, Modal } from "antd"; import { RefSelectProps } from "antd/lib/select"; @@ -101,6 +101,25 @@ } } + const initialValues = useMemo(() => ({ + from: initialFrom, + to: initialTo, + amount: 1, + metadata: "" + // eslint-disable-next-line react-hooks/exhaustive-deps + }), [ + rawInitialFrom, + initialFrom, + initialTo + ]); + + // If the to/from change, refresh the form + useEffect(() => { + if (!form || (!rawInitialFrom && !initialTo)) return; + form.setFieldsValue(initialValues); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [form, rawInitialFrom, to]); + return
>; } -export function AddWalletModal({ create, editing, visible, setVisible, setAddExistingVisible }: Props): JSX.Element { +export function AddWalletModal({ + create, + editing, + + visible, + setVisible, + setAddExistingVisible +}: Props): JSX.Element { if (editing && create) throw new Error("AddWalletModal: 'editing' and 'create' simultaneously, uh oh!"); diff --git a/src/pages/wallets/WalletActions.tsx b/src/pages/wallets/WalletActions.tsx index da3e6ff..41aadf4 100644 --- a/src/pages/wallets/WalletActions.tsx +++ b/src/pages/wallets/WalletActions.tsx @@ -14,18 +14,20 @@ import { AuthorisedAction } from "@comp/auth/AuthorisedAction"; import { OpenEditWalletFn } from "./WalletEditButton"; import { WalletInfoModal } from "./info/WalletInfoModal"; -import { SendTransactionModalLink } from "@comp/transactions/SendTransactionModalLink"; +import { OpenSendTxFn } from "@comp/transactions/SendTransactionModalLink"; import { Wallet, deleteWallet } from "@wallets"; interface Props { wallet: Wallet; openEditWallet: OpenEditWalletFn; + openSendTx: OpenSendTxFn; } export function WalletActions({ wallet, - openEditWallet + openEditWallet, + openSendTx, }: Props): JSX.Element { const { t } = useTranslation(); const [walletInfoVisible, setWalletInfoVisible] = useState(false); @@ -87,9 +89,12 @@ {/* Send tx button */} - + openSendTx(wallet)} + popoverPlacement="left" + >
{t("myWallets.actionsSendTransaction")}
-
+
{/* Wallet info button */} diff --git a/src/pages/wallets/WalletsPage.tsx b/src/pages/wallets/WalletsPage.tsx index 0bcc7e3..e7c25f9 100644 --- a/src/pages/wallets/WalletsPage.tsx +++ b/src/pages/wallets/WalletsPage.tsx @@ -15,7 +15,9 @@ import { ManageBackupsDropdown } from "./ManageBackupsDropdown"; import { AddWalletModal } from "./AddWalletModal"; import { WalletsTable } from "./WalletsTable"; + import { useEditWalletModal } from "./WalletEditButton"; +import { useSendTransactionModal } from "@comp/transactions/SendTransactionModalLink"; /** Extract the subtitle into its own component to avoid re-rendering the * entire page when a wallet is added. */ @@ -58,15 +60,20 @@ export function WalletsPage(): JSX.Element { const [openEditWallet, editWalletModal] = useEditWalletModal(); + const [openSendTx, sendTxModal] = useSendTransactionModal(); return } extra={} > - + {/* Rendered only once, as an optimisation */} {editWalletModal} + {sendTxModal} ; } diff --git a/src/pages/wallets/WalletsTable.tsx b/src/pages/wallets/WalletsTable.tsx index 0d3c5a6..6a38802 100644 --- a/src/pages/wallets/WalletsTable.tsx +++ b/src/pages/wallets/WalletsTable.tsx @@ -12,15 +12,20 @@ import { useWallets } from "@wallets"; import { WalletActions } from "./WalletActions"; import { OpenEditWalletFn } from "./WalletEditButton"; +import { OpenSendTxFn } from "@comp/transactions/SendTransactionModalLink"; import { keyedNullSort, localeSort } from "@utils"; import { useDateColumnWidth } from "@utils/table"; interface Props { openEditWallet: OpenEditWalletFn; + openSendTx: OpenSendTxFn; } -export function WalletsTable({ openEditWallet }: Props): JSX.Element { +export function WalletsTable({ + openEditWallet, + openSendTx +}: Props): JSX.Element { const { t } = useTranslation(); const { wallets } = useWallets(); @@ -125,6 +130,7 @@ ) }