thorchain · veado · Dec 15, 2021 · Dec 15, 2021 · Dec 15, 2021 · Dec 15, 2021
diff --git 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
 

diff --git 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'
@@ -177,13 +178,9 @@ export const SendFormBNB: React.FC<Props> = (props): JSX.Element => {
     [balance, intl, maxAmount]
   )
 
-  // State for visibility of Modal to confirm tx
-  const [showPwModal, setShowPwModal] = useState(false)
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false)
 
   const sendHandler = useCallback(() => {
-    // close PW modal
-    setShowPwModal(false)
-
     onSubmit({
       walletType,
       walletIndex,
@@ -195,19 +192,38 @@ export const SendFormBNB: React.FC<Props> = (props): JSX.Element => {
     })
   }, [onSubmit, walletType, walletAddress, form, balance.asset, amountToSend, walletIndex])
 
-  const renderPwModal = useMemo(
-    () =>
-      showPwModal ? (
+  const renderConfirmationModal = useMemo(() => {
+    const onSuccessHandler = () => {
+      setShowConfirmationModal(false)
+      sendHandler()
+    }
+    const onCloseHandler = () => {
+      setShowConfirmationModal(false)
+    }
+
+    if (isLedgerWallet(walletType)) {
+      return (
+        <LedgerConfirmationModal
+          network={network}
+          onSuccess={onSuccessHandler}
+          onClose={onCloseHandler}
+          visible={showConfirmationModal}
+          chain={BNBChain}
+          description={intl.formatMessage({ id: 'wallet.ledger.confirm' })}
+        />
+      )
+    } else if (isKeystoreWallet(walletType)) {
+      return (
         <WalletPasswordConfirmationModal
-          onSuccess={sendHandler}
-          onClose={() => setShowPwModal(false)}
+          onSuccess={onSuccessHandler}
+          onClose={onCloseHandler}
           validatePassword$={validatePassword$}
         />
-      ) : (
-        <></>
-      ),
-    [sendHandler, showPwModal, validatePassword$]
-  )
+      )
+    } else {
+      return null
+    }
+  }, [intl, network, sendHandler, showConfirmationModal, validatePassword$, walletType])
 
   const uiFeesRD: UIFeesRD = useMemo(
     () =>
@@ -233,12 +249,6 @@ export const SendFormBNB: React.FC<Props> = (props): JSX.Element => {
 
   const addMaxAmountHandler = useCallback(() => setAmountToSend(maxAmount), [maxAmount])
 
-  const onFinishHandler = useCallback(() => {
-    if (isKeystoreWallet(walletType)) setShowPwModal(true)
-
-    if (isLedgerWallet(walletType)) sendHandler()
-  }, [sendHandler, walletType])
-
   const [recipientAddress, setRecipientAddress] = useState<Address>('')
   const handleOnKeyUp = useCallback(() => {
     setRecipientAddress(form.getFieldValue('recipient'))
@@ -261,7 +271,11 @@ export const SendFormBNB: React.FC<Props> = (props): JSX.Element => {
             walletBalances={balances}
             network={network}
           />
-          <Styled.Form form={form} initialValues={{ amount: bn(0) }} onFinish={onFinishHandler} labelCol={{ span: 24 }}>
+          <Styled.Form
+            form={form}
+            initialValues={{ amount: bn(0) }}
+            onFinish={() => setShowConfirmationModal(true)}
+            labelCol={{ span: 24 }}>
             <Styled.SubForm>
               <Styled.CustomLabel size="big">
                 {intl.formatMessage({ id: 'common.address' })}
@@ -295,7 +309,7 @@ export const SendFormBNB: React.FC<Props> = (props): JSX.Element => {
           </Styled.Form>
         </Styled.Col>
       </Row>
-      {renderPwModal}
+      {showConfirmationModal && renderConfirmationModal}
     </>
   )
 }
diff --git 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'
@@ -176,13 +177,9 @@ export const SendFormTHOR: React.FC<Props> = (props): JSX.Element => {
     [balance, intl, maxAmount]
   )
 
-  // State for visibility of Modal to confirm tx
-  const [showPwModal, setShowPwModal] = useState(false)
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false)
 
   const sendHandler = useCallback(() => {
-    // close PW modal
-    setShowPwModal(false)
-
     onSubmit({
       walletType,
       walletIndex,
@@ -193,19 +190,38 @@ export const SendFormTHOR: React.FC<Props> = (props): JSX.Element => {
     })
   }, [onSubmit, form, balance.asset, amountToSend, walletType, walletIndex])
 
-  const renderPwModal = useMemo(
-    () =>
-      showPwModal ? (
+  const renderConfirmationModal = useMemo(() => {
+    const onSuccessHandler = () => {
+      setShowConfirmationModal(false)
+      sendHandler()
+    }
+    const onCloseHandler = () => {
+      setShowConfirmationModal(false)
+    }
+
+    if (isKeystoreWallet(walletType)) {
+      return (
         <WalletPasswordConfirmationModal
-          onSuccess={sendHandler}
-          onClose={() => setShowPwModal(false)}
+          onSuccess={onSuccessHandler}
+          onClose={onCloseHandler}
           validatePassword$={validatePassword$}
         />
-      ) : (
-        <></>
-      ),
-    [sendHandler, showPwModal, validatePassword$]
-  )
+      )
+    } else if (isLedgerWallet(walletType)) {
+      return (
+        <LedgerConfirmationModal
+          network={network}
+          onSuccess={onSuccessHandler}
+          onClose={onCloseHandler}
+          visible={showConfirmationModal}
+          chain={THORChain}
+          description={intl.formatMessage({ id: 'wallet.ledger.confirm' })}
+        />
+      )
+    } else {
+      return null
+    }
+  }, [intl, network, sendHandler, showConfirmationModal, validatePassword$, walletType])
 
   const uiFeesRD: UIFeesRD = useMemo(
     () =>
@@ -231,12 +247,6 @@ export const SendFormTHOR: React.FC<Props> = (props): JSX.Element => {
 
   const addMaxAmountHandler = useCallback(() => setAmountToSend(maxAmount), [maxAmount])
 
-  const onFinishHandler = useCallback(() => {
-    if (isKeystoreWallet(walletType)) setShowPwModal(true)
-
-    if (isLedgerWallet(walletType)) sendHandler()
-  }, [sendHandler, walletType])
-
   const [recipientAddress, setRecipientAddress] = useState<Address>('')
   const handleOnKeyUp = useCallback(() => {
     setRecipientAddress(form.getFieldValue('recipient'))
@@ -259,7 +269,11 @@ export const SendFormTHOR: React.FC<Props> = (props): JSX.Element => {
             walletBalances={balances}
             network={network}
           />
-          <Styled.Form form={form} initialValues={{ amount: bn(0) }} onFinish={onFinishHandler} labelCol={{ span: 24 }}>
+          <Styled.Form
+            form={form}
+            initialValues={{ amount: bn(0) }}
+            onFinish={() => setShowConfirmationModal(true)}
+            labelCol={{ span: 24 }}>
             <Styled.SubForm>
               <Styled.CustomLabel size="big">
                 {intl.formatMessage({ id: 'common.address' })}
@@ -299,7 +313,7 @@ export const SendFormTHOR: React.FC<Props> = (props): JSX.Element => {
           </Styled.Form>
         </Styled.Col>
       </Row>
-      {renderPwModal}
+      {showConfirmationModal && renderConfirmationModal}
     </>
   )
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'