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

… adding sync fees button
input-output-hk · Jan 26, 2021 · 6fa3f07 · 6fa3f07
1 parent 9c07c48
commit 6fa3f07
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 4 deletions.
diff --git a/source/renderer/app/components/wallet/WalletTokenSendForm.js b/source/renderer/app/components/wallet/WalletTokenSendForm.js
@@ -132,6 +132,12 @@ export const messages = defineMessages({
     description:
       'Syncing transactions message shown during async wallet restore in the wallet send form.',
   },
+  calculatingFeesLabel: {
+    id: 'wallet.send.form.calculatingFeesLabel',
+    defaultMessage: '!!!Calculating fees',
+    description:
+      'Label for the "Calculating fees" message for amount input field.',
+  },
 });
 
 messages.fieldIsRequired = globalMessages.fieldIsRequired;
@@ -479,6 +485,11 @@ export default class WalletTokenSendForm extends Component<Props, State> {
       'primary',
     ]);
 
+    const calculatingFeesSpinnerButtonClasses = classNames([
+      styles.calculatingFeesSpinnerButton,
+      styles.spinning,
+    ]);
+
     return (
       <div className={styles.component}>
         {isRestoreActive ? (
@@ -565,7 +576,6 @@ export default class WalletTokenSendForm extends Component<Props, State> {
                           numberLocaleOptions={{
                             minimumFractionDigits: currencyMaxFractionalDigits,
                           }}
-                          error={transactionFeeError || assetField.error}
                           onChange={(value) => {
                             this._isCalculatingTransactionFee = true;
                             assetField.onChange(value);
@@ -575,12 +585,9 @@ export default class WalletTokenSendForm extends Component<Props, State> {
                             }
                           }}
                           currency={currencyUnit}
-                          fees={fees}
-                          total={total}
                           skin={AmountInputSkin}
                           onKeyPress={this.handleSubmitOnEnter}
                           allowSigns={false}
-                          isCalculatingFees={this._isCalculatingTransactionFee}
                         />
                         {this.hasAssetValue && (
                           <div className={styles.clearAssetContainer}>
@@ -632,12 +639,26 @@ export default class WalletTokenSendForm extends Component<Props, State> {
                   numberLocaleOptions={{
                     minimumFractionDigits: currencyMaxFractionalDigits,
                   }}
+                  error={transactionFeeError || assetField.error}
                   currency={intl.formatMessage(globalMessages.unitAda)}
                   fees={fees}
                   total={total}
                   skin={AmountInputSkin}
                   disabled
                 />
+                {this._isCalculatingTransactionFee && (
+                  <div className={styles.calculatingFeesContainer}>
+                    <PopOver
+                      content={intl.formatMessage(
+                        messages.calculatingFeesLabel
+                      )}
+                    >
+                      <button
+                        className={calculatingFeesSpinnerButtonClasses}
+                      />
+                    </PopOver>
+                  </div>
+                )}
               </div>
               <div className={styles.buttonsContainer}>
                 <Button

diff --git a/source/renderer/app/components/wallet/WalletTokenSendForm.scss b/source/renderer/app/components/wallet/WalletTokenSendForm.scss
@@ -191,6 +191,51 @@
   }
 }
 
+.calculatingFeesContainer {
+  bottom: 0.5px;
+  display: flex;
+  height: 48px;
+  line-height: 48px;
+  padding-left: 20px;
+  position: absolute;
+  right: 11px;
+
+  .calculatingFeesSpinnerButton {
+    background-color: var(
+        --theme-staking-stake-pools-search-clear-button-background-color
+    );
+    border-radius: 3px;
+    bottom: 5px;
+    cursor: pointer;
+    height: 28px;
+    position: relative;
+    width: 28px;
+
+    &:hover {
+      background-color: var(
+          --theme-staking-stake-pools-search-clear-button-hover-background-color
+      );
+    }
+
+    .calculatingFeesSpinnerIcon {
+      svg {
+        position: relative;
+        height: 10px;
+        top: 0.5px;
+        width: 10px;
+
+        path {
+          stroke: var(--theme-staking-stake-pools-search-clear-button-color);
+        }
+      }
+    }
+
+    &.spinning {
+      @include loading-spinner('../../assets/images/spinner-dark.svg');
+    }
+  }
+}
+
 .adaLabel {
   bottom: 16px;
   color: var(--theme-input-right-floating-text-color);
@@ -234,3 +279,13 @@
     margin: 0 10px;
   }
 }
+
+:global {
+  .WalletTokenSendForm_calculatingFeesContainer .WalletTokenSendForm_calculatingFeesSpinnerButton.WalletTokenSendForm_spinning:after {
+    background-size: 12px !important;
+    height: 12px !important;
+    left: calc(50% - 6px) !important;
+    top: calc(50% - 6px) !important;
+    width: 12px !important;
+  }
+}
diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json
@@ -826,6 +826,7 @@
   "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.calculatingFeesLabel": "Calculating fees",
   "wallet.send.form.deposit.label": "Deposit",
   "wallet.send.form.description.hint": "You can type a message here, if you want.",
   "wallet.send.form.description.label": "Description",

diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json
@@ -826,6 +826,7 @@
   "wallet.send.form.button.addAssetButtonLabel": "+別のアセットを追加する",
   "wallet.send.form.button.addNewReceiver": "+別のレシーバーを追加する",
   "wallet.send.form.button.removeReceiver": "削除",
+  "wallet.send.form.calculatingFeesLabel": "手数料を計算しています",
   "wallet.send.form.deposit.label": "預り金",
   "wallet.send.form.description.hint": "任意のメッセージを入力できます",
   "wallet.send.form.description.label": "詳細",