From 3c8a3002854e33d631029a04607056f81bfd728e Mon Sep 17 00:00:00 2001 From: Veado Date: Wed, 15 Dec 2021 12:52:29 +0100 Subject: [PATCH 1/4] Send: Show LedgerModal (THORChain) + update i18n --- .../wallet/txs/send/SendFormTHOR.tsx | 48 ++++++++++++++----- src/renderer/i18n/de/wallet.ts | 1 + src/renderer/i18n/en/swap.ts | 2 +- src/renderer/i18n/en/wallet.ts | 1 + src/renderer/i18n/fr/wallet.ts | 1 + src/renderer/i18n/ru/wallet.ts | 1 + src/renderer/i18n/types.ts | 1 + 7 files changed, 42 insertions(+), 13 deletions(-) diff --git a/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx b/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx index 122836c81..3ffa73af5 100644 --- a/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx +++ b/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx @@ -10,7 +10,8 @@ import { assetToBase, baseAmount, BaseAmount, - baseToAsset + baseToAsset, + THORChain } from '@xchainjs/xchain-util' import { Row, Form } from 'antd' import BigNumber from 'bignumber.js' @@ -29,7 +30,7 @@ import { FeeRD, SendTxParams } from '../../../../services/chain/types' import { AddressValidation, WalletBalances } from '../../../../services/clients' import { ValidatePasswordHandler } from '../../../../services/wallet/types' import { WalletBalance } from '../../../../services/wallet/types' -import { WalletPasswordConfirmationModal } from '../../../modal/confirmation' +import { LedgerConfirmationModal, WalletPasswordConfirmationModal } from '../../../modal/confirmation' import { MaxBalanceButton } from '../../../uielements/button/MaxBalanceButton' import { UIFeesRD } from '../../../uielements/fees' import { Input, InputBigNumber } from '../../../uielements/input' @@ -178,11 +179,10 @@ export const SendFormTHOR: React.FC = (props): JSX.Element => { // State for visibility of Modal to confirm tx const [showPwModal, setShowPwModal] = useState(false) + // Ledger modal state + const [showLedgerModal, setShowLedgerModal] = useState(false) const sendHandler = useCallback(() => { - // close PW modal - setShowPwModal(false) - onSubmit({ walletType, walletIndex, @@ -193,18 +193,41 @@ export const SendFormTHOR: React.FC = (props): JSX.Element => { }) }, [onSubmit, form, balance.asset, amountToSend, walletType, walletIndex]) + const onClosePwModal = useCallback(() => { + setShowPwModal(false) + sendHandler() + }, [sendHandler]) + const renderPwModal = useMemo( () => showPwModal ? ( setShowPwModal(false)} validatePassword$={validatePassword$} /> - ) : ( - <> - ), - [sendHandler, showPwModal, validatePassword$] + ) : null, + [onClosePwModal, showPwModal, validatePassword$] + ) + + const onCloseLedgerModal = useCallback(() => { + setShowLedgerModal(false) + sendHandler() + }, [sendHandler]) + + const renderLedgerModal = useMemo( + () => + showLedgerModal ? ( + setShowLedgerModal(false)} + visible={showLedgerModal} + chain={THORChain} + description={intl.formatMessage({ id: 'wallet.ledger.confirm' })} + /> + ) : null, + [intl, network, onCloseLedgerModal, showLedgerModal] ) const uiFeesRD: UIFeesRD = useMemo( @@ -234,8 +257,8 @@ export const SendFormTHOR: React.FC = (props): JSX.Element => { const onFinishHandler = useCallback(() => { if (isKeystoreWallet(walletType)) setShowPwModal(true) - if (isLedgerWallet(walletType)) sendHandler() - }, [sendHandler, walletType]) + if (isLedgerWallet(walletType)) setShowLedgerModal(true) + }, [walletType]) const [recipientAddress, setRecipientAddress] = useState
('') const handleOnKeyUp = useCallback(() => { @@ -300,6 +323,7 @@ export const SendFormTHOR: React.FC = (props): JSX.Element => { {renderPwModal} + {renderLedgerModal} ) } diff --git a/src/renderer/i18n/de/wallet.ts b/src/renderer/i18n/de/wallet.ts index 0c157d94b..c16e6f5e7 100644 --- a/src/renderer/i18n/de/wallet.ts +++ b/src/renderer/i18n/de/wallet.ts @@ -75,6 +75,7 @@ const wallet: WalletMessages = { 'wallet.password.confirmation.error': 'Passwort ist falsch', 'wallet.password.repeat': 'Passwort wiederholen', 'wallet.password.mismatch': 'Passwort stimmt nicht überein', + 'wallet.ledger.confirm': 'Klick "Weiter", um die Transaktion mit Deinem Ledger zu unterzeichnen.', 'wallet.send.error': 'Error beim Versenden', 'wallet.upgrade.pending': 'Upgraden', 'wallet.upgrade.success': 'Updgrade erfolgreich', diff --git a/src/renderer/i18n/en/swap.ts b/src/renderer/i18n/en/swap.ts index fb1d6a2e7..dd4f24643 100644 --- a/src/renderer/i18n/en/swap.ts +++ b/src/renderer/i18n/en/swap.ts @@ -20,7 +20,7 @@ const swap: SwapMessages = { 'swap.note.nowallet': 'Create or import a wallet to swap', 'swap.errors.asset.missingSourceAsset': 'Missing source asset', 'swap.errors.asset.missingTargetAsset': 'Missing target asset', - 'swap.ledger.sign': 'Click next to sign the swap transaction on your device.' + 'swap.ledger.sign': 'Click "next" to sign the swap transaction on your device.' } export default swap diff --git a/src/renderer/i18n/en/wallet.ts b/src/renderer/i18n/en/wallet.ts index f11883732..d52742710 100644 --- a/src/renderer/i18n/en/wallet.ts +++ b/src/renderer/i18n/en/wallet.ts @@ -72,6 +72,7 @@ const wallet: WalletMessages = { 'wallet.password.confirmation.error': 'Password is wrong', 'wallet.password.repeat': 'Repeat password', 'wallet.password.mismatch': 'Password mismatch', + 'wallet.ledger.confirm': 'Click "next" to sign the transaction on your device.', 'wallet.send.error': 'Send error', 'wallet.upgrade.pending': 'Upgrading', 'wallet.upgrade.success': 'Successful upgrade', diff --git a/src/renderer/i18n/fr/wallet.ts b/src/renderer/i18n/fr/wallet.ts index fd86719c0..ee53da83d 100644 --- a/src/renderer/i18n/fr/wallet.ts +++ b/src/renderer/i18n/fr/wallet.ts @@ -74,6 +74,7 @@ const wallet: WalletMessages = { 'wallet.password.confirmation.error': 'Le mot de passe est erroné', 'wallet.password.repeat': 'Répétez le mot de passe', 'wallet.password.mismatch': 'Non-concordance des mots de passe', + 'wallet.ledger.confirm': 'Click "next" to sign the transaction on your device. - FR', 'wallet.upgrade.pending': 'Mise à jour', 'wallet.upgrade.success': 'Mise à jour réussie', 'wallet.upgrade.error': 'Échec de la mise à jour', diff --git a/src/renderer/i18n/ru/wallet.ts b/src/renderer/i18n/ru/wallet.ts index 192aec288..d6ecd219d 100644 --- a/src/renderer/i18n/ru/wallet.ts +++ b/src/renderer/i18n/ru/wallet.ts @@ -73,6 +73,7 @@ const wallet: WalletMessages = { 'wallet.password.confirmation.error': 'Неверный пароль', 'wallet.password.repeat': 'Повторите парроль', 'wallet.password.mismatch': 'Пароли не совпадают', + 'wallet.ledger.confirm': 'Click "next" to sign the transaction on your device. - RU', 'wallet.send.error': 'Ошибка при отправке', 'wallet.upgrade.pending': 'Обновление', 'wallet.upgrade.success': 'Успещно обновили', diff --git a/src/renderer/i18n/types.ts b/src/renderer/i18n/types.ts index 8f15f76be..fdf572082 100644 --- a/src/renderer/i18n/types.ts +++ b/src/renderer/i18n/types.ts @@ -181,6 +181,7 @@ type WalletMessageKey = | 'wallet.password.confirmation.error' | 'wallet.password.repeat' | 'wallet.password.mismatch' + | 'wallet.ledger.confirm' | 'wallet.errors.balancesFailed' | 'wallet.errors.asset.notExist' | 'wallet.errors.address.empty' From 445276ce0ef4c8077d59e531b2fd535390144ed1 Mon Sep 17 00:00:00 2001 From: Veado Date: Wed, 15 Dec 2021 13:09:12 +0100 Subject: [PATCH 2/4] Send: Show LedgerModal (BNB) --- .../wallet/txs/send/SendFormBNB.tsx | 49 ++++++++++++++----- .../wallet/txs/send/SendFormTHOR.tsx | 1 - 2 files changed, 36 insertions(+), 14 deletions(-) diff --git a/src/renderer/components/wallet/txs/send/SendFormBNB.tsx b/src/renderer/components/wallet/txs/send/SendFormBNB.tsx index 6f906eea6..c19c8d310 100644 --- a/src/renderer/components/wallet/txs/send/SendFormBNB.tsx +++ b/src/renderer/components/wallet/txs/send/SendFormBNB.tsx @@ -10,7 +10,8 @@ import { AssetBNB, assetToBase, BaseAmount, - baseAmount + baseAmount, + BNBChain } from '@xchainjs/xchain-util' import { Row, Form } from 'antd' import BigNumber from 'bignumber.js' @@ -29,7 +30,7 @@ import { FeeRD, SendTxParams } from '../../../../services/chain/types' import { AddressValidation, WalletBalances } from '../../../../services/clients' import { ValidatePasswordHandler } from '../../../../services/wallet/types' import { WalletBalance } from '../../../../services/wallet/types' -import { WalletPasswordConfirmationModal } from '../../../modal/confirmation' +import { LedgerConfirmationModal, WalletPasswordConfirmationModal } from '../../../modal/confirmation' import { MaxBalanceButton } from '../../../uielements/button/MaxBalanceButton' import { UIFeesRD } from '../../../uielements/fees' import { Input, InputBigNumber } from '../../../uielements/input' @@ -179,11 +180,10 @@ export const SendFormBNB: React.FC = (props): JSX.Element => { // State for visibility of Modal to confirm tx const [showPwModal, setShowPwModal] = useState(false) + // Ledger modal state + const [showLedgerModal, setShowLedgerModal] = useState(false) const sendHandler = useCallback(() => { - // close PW modal - setShowPwModal(false) - onSubmit({ walletType, walletIndex, @@ -195,18 +195,41 @@ export const SendFormBNB: React.FC = (props): JSX.Element => { }) }, [onSubmit, walletType, walletAddress, form, balance.asset, amountToSend, walletIndex]) + const onClosePwModal = useCallback(() => { + setShowPwModal(false) + sendHandler() + }, [sendHandler]) + const renderPwModal = useMemo( () => showPwModal ? ( setShowPwModal(false)} validatePassword$={validatePassword$} /> - ) : ( - <> - ), - [sendHandler, showPwModal, validatePassword$] + ) : null, + [onClosePwModal, showPwModal, validatePassword$] + ) + + const onCloseLedgerModal = useCallback(() => { + setShowLedgerModal(false) + sendHandler() + }, [sendHandler]) + + const renderLedgerModal = useMemo( + () => + showLedgerModal ? ( + setShowLedgerModal(false)} + visible={showLedgerModal} + chain={BNBChain} + description={intl.formatMessage({ id: 'wallet.ledger.confirm' })} + /> + ) : null, + [intl, network, onCloseLedgerModal, showLedgerModal] ) const uiFeesRD: UIFeesRD = useMemo( @@ -235,9 +258,8 @@ export const SendFormBNB: React.FC = (props): JSX.Element => { const onFinishHandler = useCallback(() => { if (isKeystoreWallet(walletType)) setShowPwModal(true) - - if (isLedgerWallet(walletType)) sendHandler() - }, [sendHandler, walletType]) + if (isLedgerWallet(walletType)) setShowLedgerModal(true) + }, [walletType]) const [recipientAddress, setRecipientAddress] = useState
('') const handleOnKeyUp = useCallback(() => { @@ -296,6 +318,7 @@ export const SendFormBNB: React.FC = (props): JSX.Element => { {renderPwModal} + {renderLedgerModal} ) } diff --git a/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx b/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx index 3ffa73af5..b0718f44d 100644 --- a/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx +++ b/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx @@ -256,7 +256,6 @@ export const SendFormTHOR: React.FC = (props): JSX.Element => { const onFinishHandler = useCallback(() => { if (isKeystoreWallet(walletType)) setShowPwModal(true) - if (isLedgerWallet(walletType)) setShowLedgerModal(true) }, [walletType]) From f75405a51a01d8832caad3c29dd2d032bbed2532 Mon Sep 17 00:00:00 2001 From: Veado Date: Wed, 15 Dec 2021 13:35:09 +0100 Subject: [PATCH 3/4] Simplify lcoal state handling to be more DRY --- .../wallet/txs/send/SendFormBNB.tsx | 75 ++++++++----------- .../wallet/txs/send/SendFormTHOR.tsx | 69 ++++++++--------- 2 files changed, 63 insertions(+), 81 deletions(-) diff --git a/src/renderer/components/wallet/txs/send/SendFormBNB.tsx b/src/renderer/components/wallet/txs/send/SendFormBNB.tsx index c19c8d310..fb05191a3 100644 --- a/src/renderer/components/wallet/txs/send/SendFormBNB.tsx +++ b/src/renderer/components/wallet/txs/send/SendFormBNB.tsx @@ -178,10 +178,7 @@ export const SendFormBNB: React.FC = (props): JSX.Element => { [balance, intl, maxAmount] ) - // State for visibility of Modal to confirm tx - const [showPwModal, setShowPwModal] = useState(false) - // Ledger modal state - const [showLedgerModal, setShowLedgerModal] = useState(false) + const [showConfirmationModal, setShowConfirmationModal] = useState(false) const sendHandler = useCallback(() => { onSubmit({ @@ -195,42 +192,38 @@ export const SendFormBNB: React.FC = (props): JSX.Element => { }) }, [onSubmit, walletType, walletAddress, form, balance.asset, amountToSend, walletIndex]) - const onClosePwModal = useCallback(() => { - setShowPwModal(false) - sendHandler() - }, [sendHandler]) - - const renderPwModal = useMemo( - () => - showPwModal ? ( - setShowPwModal(false)} - validatePassword$={validatePassword$} - /> - ) : null, - [onClosePwModal, showPwModal, validatePassword$] - ) - - const onCloseLedgerModal = useCallback(() => { - setShowLedgerModal(false) - sendHandler() - }, [sendHandler]) + const renderConfirmationModal = useMemo(() => { + const onSuccessHandler = () => { + setShowConfirmationModal(false) + sendHandler() + } + const onCloseHandler = () => { + setShowConfirmationModal(false) + } - const renderLedgerModal = useMemo( - () => - showLedgerModal ? ( + if (isLedgerWallet(walletType)) { + return ( setShowLedgerModal(false)} - visible={showLedgerModal} + onSuccess={onSuccessHandler} + onClose={onCloseHandler} + visible={showConfirmationModal} chain={BNBChain} description={intl.formatMessage({ id: 'wallet.ledger.confirm' })} /> - ) : null, - [intl, network, onCloseLedgerModal, showLedgerModal] - ) + ) + } else if (isKeystoreWallet(walletType)) { + return ( + + ) + } else { + return null + } + }, [intl, network, sendHandler, showConfirmationModal, validatePassword$, walletType]) const uiFeesRD: UIFeesRD = useMemo( () => @@ -256,11 +249,6 @@ export const SendFormBNB: React.FC = (props): JSX.Element => { const addMaxAmountHandler = useCallback(() => setAmountToSend(maxAmount), [maxAmount]) - const onFinishHandler = useCallback(() => { - if (isKeystoreWallet(walletType)) setShowPwModal(true) - if (isLedgerWallet(walletType)) setShowLedgerModal(true) - }, [walletType]) - const [recipientAddress, setRecipientAddress] = useState
('') const handleOnKeyUp = useCallback(() => { setRecipientAddress(form.getFieldValue('recipient')) @@ -283,7 +271,11 @@ export const SendFormBNB: React.FC = (props): JSX.Element => { walletBalances={balances} network={network} /> - + setShowConfirmationModal(true)} + labelCol={{ span: 24 }}> {intl.formatMessage({ id: 'common.address' })} @@ -317,8 +309,7 @@ export const SendFormBNB: React.FC = (props): JSX.Element => { - {renderPwModal} - {renderLedgerModal} + {showConfirmationModal && renderConfirmationModal} ) } diff --git a/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx b/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx index b0718f44d..d102f6aa9 100644 --- a/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx +++ b/src/renderer/components/wallet/txs/send/SendFormTHOR.tsx @@ -177,10 +177,7 @@ export const SendFormTHOR: React.FC = (props): JSX.Element => { [balance, intl, maxAmount] ) - // State for visibility of Modal to confirm tx - const [showPwModal, setShowPwModal] = useState(false) - // Ledger modal state - const [showLedgerModal, setShowLedgerModal] = useState(false) + const [showConfirmationModal, setShowConfirmationModal] = useState(false) const sendHandler = useCallback(() => { onSubmit({ @@ -193,42 +190,38 @@ export const SendFormTHOR: React.FC = (props): JSX.Element => { }) }, [onSubmit, form, balance.asset, amountToSend, walletType, walletIndex]) - const onClosePwModal = useCallback(() => { - setShowPwModal(false) - sendHandler() - }, [sendHandler]) + const renderConfirmationModal = useMemo(() => { + const onSuccessHandler = () => { + setShowConfirmationModal(false) + sendHandler() + } + const onCloseHandler = () => { + setShowConfirmationModal(false) + } - const renderPwModal = useMemo( - () => - showPwModal ? ( + if (isKeystoreWallet(walletType)) { + return ( setShowPwModal(false)} + onSuccess={onSuccessHandler} + onClose={onCloseHandler} validatePassword$={validatePassword$} /> - ) : null, - [onClosePwModal, showPwModal, validatePassword$] - ) - - const onCloseLedgerModal = useCallback(() => { - setShowLedgerModal(false) - sendHandler() - }, [sendHandler]) - - const renderLedgerModal = useMemo( - () => - showLedgerModal ? ( + ) + } else if (isLedgerWallet(walletType)) { + return ( setShowLedgerModal(false)} - visible={showLedgerModal} + onSuccess={onSuccessHandler} + onClose={onCloseHandler} + visible={showConfirmationModal} chain={THORChain} description={intl.formatMessage({ id: 'wallet.ledger.confirm' })} /> - ) : null, - [intl, network, onCloseLedgerModal, showLedgerModal] - ) + ) + } else { + return null + } + }, [intl, network, sendHandler, showConfirmationModal, validatePassword$, walletType]) const uiFeesRD: UIFeesRD = useMemo( () => @@ -254,11 +247,6 @@ export const SendFormTHOR: React.FC = (props): JSX.Element => { const addMaxAmountHandler = useCallback(() => setAmountToSend(maxAmount), [maxAmount]) - const onFinishHandler = useCallback(() => { - if (isKeystoreWallet(walletType)) setShowPwModal(true) - if (isLedgerWallet(walletType)) setShowLedgerModal(true) - }, [walletType]) - const [recipientAddress, setRecipientAddress] = useState
('') const handleOnKeyUp = useCallback(() => { setRecipientAddress(form.getFieldValue('recipient')) @@ -281,7 +269,11 @@ export const SendFormTHOR: React.FC = (props): JSX.Element => { walletBalances={balances} network={network} /> - + setShowConfirmationModal(true)} + labelCol={{ span: 24 }}> {intl.formatMessage({ id: 'common.address' })} @@ -321,8 +313,7 @@ export const SendFormTHOR: React.FC = (props): JSX.Element => { - {renderPwModal} - {renderLedgerModal} + {showConfirmationModal && renderConfirmationModal} ) } From 8f9655325d4711bd57edd74715b69c817c6e27fc Mon Sep 17 00:00:00 2001 From: Veado Date: Wed, 15 Dec 2021 13:35:42 +0100 Subject: [PATCH 4/4] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 76b396657..4326fcff8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ - Pimp Ledger confirmation modal [#1941](https://github.com/thorchain/asgardex-electron/pull/1941) - Update FR translation by @Weyland2093 [#1972](https://github.com/thorchain/asgardex-electron/pull/1972) - Switch to haskoin.ninerealms.com [#1974](https://github.com/thorchain/asgardex-electron/issues/1974) +- [Send] Show Ledger modal [#1979](https://github.com/thorchain/asgardex-electron/pull/1979) ## Remove