DDW-500 Implement design for native tokens - Wallet token send form u…

…pdates for deposit, fee fields
input-output-hk · Jan 19, 2021 · 6220631 · 6220631
1 parent dc1ad5a
commit 6220631
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 3 deletions.
diff --git a/source/renderer/app/components/wallet/WalletTokenSendForm.js b/source/renderer/app/components/wallet/WalletTokenSendForm.js
@@ -60,6 +60,16 @@ export const messages = defineMessages({
     defaultMessage: '!!!Amount',
     description: 'Label for the "Amount" number input in the wallet send form.',
   },
+  depositLabel: {
+    id: 'wallet.send.form.deposit.label',
+    defaultMessage: '!!!Deposit',
+    description: 'Label for the "Deposit" number input in the wallet send form.',
+  },
+  estimatedFeeLabel: {
+    id: 'wallet.send.form.estimatedFee.label',
+    defaultMessage: '!!!Estimated fees',
+    description: 'Label for the "Estimated fees" number input in the wallet send form.',
+  },
   descriptionLabel: {
     id: 'wallet.send.form.description.label',
     defaultMessage: '!!!Description',
@@ -242,6 +252,20 @@ export default class WalletTokenSendForm extends Component<Props, State> {
             },
           ],
         },
+        deposit: {
+          label: this.context.intl.formatMessage(messages.depositLabel),
+          placeholder: `0${
+            this.getCurrentNumberFormat().decimalSeparator
+          }${'0'.repeat(this.props.currencyMaxFractionalDigits)}`,
+          value: '1',
+        },
+        estimatedFee: {
+          label: this.context.intl.formatMessage(messages.estimatedFeeLabel),
+          placeholder: `0${
+            this.getCurrentNumberFormat().decimalSeparator
+          }${'0'.repeat(this.props.currencyMaxFractionalDigits)}`,
+          value: null,
+        },
       },
     },
     {
@@ -348,8 +372,12 @@ export default class WalletTokenSendForm extends Component<Props, State> {
     } = this.state;
     const amountField = form.$('amount');
     const receiverField = form.$('receiver');
+    const estimatedField = form.$('estimatedFee');
+    const depositField = form.$('deposit');
     const receiverFieldProps = receiverField.bind();
     const amountFieldProps = amountField.bind();
+    const estimatedFieldProps = estimatedField.bind();
+    const depositFieldProps = depositField.bind();
 
     const amount = new BigNumber(amountFieldProps.value || 0);
 
@@ -403,7 +431,6 @@ export default class WalletTokenSendForm extends Component<Props, State> {
                     this._isCalculatingTransactionFee = true;
                     amountField.onChange(value);
                   }}
-                  // AmountInputSkin props
                   currency={currencyUnit}
                   fees={fees}
                   total={total}
@@ -413,6 +440,39 @@ export default class WalletTokenSendForm extends Component<Props, State> {
                   isCalculatingFees={this._isCalculatingTransactionFee}
                 />
               </div>
+              <div className={styles.amountInput}>
+                <NumericInput
+                  {...depositFieldProps}
+                  className="deposit"
+                  label={intl.formatMessage(messages.depositLabel)}
+                  numberFormat={this.getCurrentNumberFormat()}
+                  numberLocaleOptions={{
+                    minimumFractionDigits: currencyMaxFractionalDigits,
+                  }}
+                  currency={intl.formatMessage(globalMessages.unitAda)}
+                  total={total}
+                  skin={AmountInputSkin}
+                  disabled
+                />
+              </div>
+
+              <div className={styles.amountInput}>
+                <NumericInput
+                  {...estimatedFieldProps}
+                  className="estimatedFee"
+                  label={intl.formatMessage(messages.estimatedFeeLabel)}
+                  numberFormat={this.getCurrentNumberFormat()}
+                  numberLocaleOptions={{
+                    minimumFractionDigits: currencyMaxFractionalDigits,
+                  }}
+                  error={transactionFeeError || amountField.error}
+                  currency={currencyUnit}
+                  fees={fees}
+                  total={total}
+                  skin={AmountInputSkin}
+                  disabled
+                />
+              </div>
 
               <Button
                 className={buttonClasses}

diff --git a/source/renderer/app/components/wallet/WalletTokenSendForm.scss b/source/renderer/app/components/wallet/WalletTokenSendForm.scss
@@ -33,6 +33,10 @@
     .SimpleFormField_error a {
       color: var(--rp-formfield-error-text-color, rgba(222, 50, 38, 0.5));
     }
+
+    .AmountInputSkin_total {
+      left: 180px;
+    }
   }
 }
 

diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
@@ -821,8 +821,10 @@
   "wallet.send.form.amount.label": "Amount",
   "wallet.send.form.description.hint": "You can type a message here, if you want.",
   "wallet.send.form.description.label": "Description",
+  "wallet.send.form.deposit.label": "Deposit",
   "wallet.send.form.errors.invalidAmount": "Please enter a valid amount.",
   "wallet.send.form.errors.invalidTitle": "Please enter a title with at least 3 characters.",
+  "wallet.send.form.estimatedFee.label": "Estimated fees",
   "wallet.send.form.next": "Next",
   "wallet.send.form.receiver.hint": "Wallet Address",
   "wallet.send.form.receiver.label": "Receiver",
@@ -991,4 +993,4 @@
   "wallet.transferFunds.dialog2.sourceWalletAmount.label": "{sourceWalletName} amount",
   "wallet.transferFunds.dialog2.title": "Transfer funds",
   "wallet.transferFunds.dialog2.total.label": "Total"
-}
+}
diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
@@ -821,8 +821,10 @@
   "wallet.send.form.amount.label": "金額",
   "wallet.send.form.description.hint": "任意のメッセージを入力できます",
   "wallet.send.form.description.label": "詳細",
+  "wallet.send.form.deposit.label": "預り金",
   "wallet.send.form.errors.invalidAmount": "有効な金額を入力してください。",
   "wallet.send.form.errors.invalidTitle": "タイトルを3字以上で入力してください。",
+  "wallet.send.form.estimatedFee.label": "推定料金",
   "wallet.send.form.next": "続ける",
   "wallet.send.form.receiver.hint": "ウォレットアドレス",
   "wallet.send.form.receiver.label": "送金先",
@@ -991,4 +993,4 @@
   "wallet.transferFunds.dialog2.sourceWalletAmount.label": "{sourceWalletName}の額",
   "wallet.transferFunds.dialog2.title": "資金を移す",
   "wallet.transferFunds.dialog2.total.label": "合計"
-}
+}