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

… adding new asset button
input-output-hk · Jan 26, 2021 · 72c3764 · 72c3764
1 parent 009069b
commit 72c3764
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/source/renderer/app/components/wallet/WalletTokenSendForm.js b/source/renderer/app/components/wallet/WalletTokenSendForm.js
@@ -76,6 +76,12 @@ export const messages = defineMessages({
     defaultMessage: '!!!Remove',
     description: 'Label for the "Remove" button in the wallet send form.',
   },
+  addAssetButtonLabel: {
+    id: 'wallet.send.form.button.addAssetButtonLabel',
+    defaultMessage: '!!!+ Add another asset',
+    description:
+      'Label for the "+ Add another asset" button in the wallet send form.',
+  },
   estimatedFeeLabel: {
     id: 'wallet.send.form.estimatedFee.label',
     defaultMessage: '!!!Estimated fees',
@@ -415,6 +421,8 @@ export default class WalletTokenSendForm extends Component<Props, State> {
     this.clearReceiverAddress();
   };
 
+  addAssetRow = () => {};
+
   render() {
     const { form } = this;
     const { intl } = this.context;
@@ -466,6 +474,11 @@ export default class WalletTokenSendForm extends Component<Props, State> {
       'flat',
     ]);
 
+    const addAssetButtonClasses = classNames([
+      styles.addAssetButton,
+      'primary',
+    ]);
+
     return (
       <div className={styles.component}>
         {isRestoreActive ? (
@@ -589,6 +602,14 @@ export default class WalletTokenSendForm extends Component<Props, State> {
                             </PopOver>
                           </div>
                         )}
+                        <Button
+                          className={addAssetButtonClasses}
+                          label={intl.formatMessage(
+                            messages.addAssetButtonLabel
+                          )}
+                          onClick={this.addAssetRow}
+                          skin={ButtonSkin}
+                        />
                       </div>
                     </>
                   )}

diff --git a/source/renderer/app/components/wallet/WalletTokenSendForm.scss b/source/renderer/app/components/wallet/WalletTokenSendForm.scss
@@ -39,7 +39,7 @@
       left: 50px;
       max-height: 120px;
       position: absolute;
-      top: 130px;
+      top: 136px;
       width: 6px;
     }
 
@@ -140,6 +140,18 @@
   }
 }
 
+.addAssetButton {
+  font-family: var(--font-semibold);
+  font-size: 10px;
+  font-weight: 500;
+  height: 20px;
+  letter-spacing: 0.5px;
+  line-height: 1.2;
+  margin-top: 24px;
+  text-transform: uppercase;
+  width: 143px;
+}
+
 .clearAssetContainer {
   bottom: 0.5px;
   display: flex;

diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
@@ -823,6 +823,7 @@
   "wallet.send.confirmationDialog.totalLabel": "Total",
   "wallet.send.form.amount.label": "Amount",
   "wallet.send.form.asset.label": "Asset",
+  "wallet.send.form.button.addAssetButtonLabel": "+ Add another asset",
   "wallet.send.form.button.addNewReceiver": "+ Add another receiver",
   "wallet.send.form.button.removeReceiver": "Remove",
   "wallet.send.form.deposit.label": "Deposit",

diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
@@ -823,6 +823,7 @@
   "wallet.send.confirmationDialog.totalLabel": "合計",
   "wallet.send.form.amount.label": "金額",
   "wallet.send.form.asset.label": "資産",
+  "wallet.send.form.button.addAssetButtonLabel": "+別のアセットを追加する",
   "wallet.send.form.button.addNewReceiver": "+別のレシーバーを追加する",
   "wallet.send.form.button.removeReceiver": "削除",
   "wallet.send.form.deposit.label": "預り金",