From 3787acd529abe3d87cf4b7a664ff60998286cc5b Mon Sep 17 00:00:00 2001
From: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com>
Date: Wed, 8 Jul 2020 12:10:18 +0100
Subject: [PATCH] refactor: transfer multipayment ux (#2392)

---
 .../TransactionFormTransfer.spec.js           |  60 ++++--
 src/renderer/components/Input/InputFee.vue    |  27 ++-
 .../Input/InputToggle/InputToggleChoice.vue   |   2 +-
 .../TransactionFormTransfer.vue               | 194 +++++++++++-------
 src/renderer/i18n/locales/en-US.js            |   4 +-
 src/renderer/styles/_theme.css                |  14 +-
 tailwind.js                                   |   6 +
 7 files changed, 216 insertions(+), 91 deletions(-)

diff --git a/__tests__/unit/components/Transaction/TransactionForm/TransactionFormTransfer.spec.js b/__tests__/unit/components/Transaction/TransactionForm/TransactionFormTransfer.spec.js
index f411efe54b..1114a4b806 100644
--- a/__tests__/unit/components/Transaction/TransactionForm/TransactionFormTransfer.spec.js
+++ b/__tests__/unit/components/Transaction/TransactionForm/TransactionFormTransfer.spec.js
@@ -184,7 +184,12 @@ describe('TransactionFormTransfer', () => {
       expect(wrapper.contains('.TransactionFormTransfer__amount')).toBe(true)
     })
 
-    it('should have add button', () => {
+    it('should have add button on multiple tab', async () => {
+      expect(wrapper.contains('.TransactionFormTransfer__add')).toBe(false)
+
+      wrapper.vm.onSendTypeChange('Multiple')
+      await wrapper.vm.$nextTick()
+
       expect(wrapper.contains('.TransactionFormTransfer__add')).toBe(true)
     })
 
@@ -233,7 +238,20 @@ describe('TransactionFormTransfer', () => {
     })
 
     describe('next button', () => {
-      it('should be enabled if recipients form is valid', async () => {
+      it('should be enabled for single if recipients form is valid', async () => {
+        wrapper.vm.$v.recipientId.$model = 'address-1'
+        wrapper.vm.$v.amount.$model = 10
+        wrapper.vm.$v.form.fee.$model = 0.1
+        wrapper.vm.$v.form.vendorField.$model = 'vendorfield test'
+        wrapper.vm.$v.form.passphrase.$model = 'passphrase'
+
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.find('.TransactionFormTransfer__next').attributes('disabled')).toBeFalsy()
+      })
+
+      it('should be enabled for multiple if recipients form is valid', async () => {
+        wrapper.vm.onSendTypeChange('Multiple')
         wrapper.vm.$v.form.recipients.$model = [{
           address: 'address-2',
           amount: 10
@@ -284,6 +302,7 @@ describe('TransactionFormTransfer', () => {
       })
 
       it('should return true if it is multipayment transaction', () => {
+        wrapper.vm.onSendTypeChange('Multiple')
         wrapper.vm.$v.form.recipients.$model = [{
           address: 'address-2',
           amount: 10
@@ -394,7 +413,11 @@ describe('TransactionFormTransfer', () => {
         expect(wrapper.vm.maximumAvailableAmount).toEqual((new BigNumber(1000)).minus(0.1))
       })
 
-      it('should return value including all recipients', async () => {
+      it('should return value including all recipients for multiple', async () => {
+        wrapper.vm.onSendTypeChange('Multiple')
+
+        await wrapper.vm.$nextTick()
+
         wrapper.vm.$v.form.fee.$model = 0.1
         wrapper.vm.$v.recipientId.$model = Identities.Address.fromPassphrase('test')
         wrapper.vm.$v.amount.$model = 10
@@ -812,7 +835,7 @@ describe('TransactionFormTransfer', () => {
 
   describe('methods', () => {
     describe('getTransactionData', () => {
-      it('should return correct data with passphrase for normal transaction', () => {
+      it('should return correct data with passphrase for normal transaction', async () => {
         wrapper.vm.$v.form.fee.$model = 0.1
         wrapper.vm.$v.form.vendorField.$model = 'vendorfield test'
         wrapper.vm.$v.form.passphrase.$model = 'passphrase'
@@ -820,14 +843,18 @@ describe('TransactionFormTransfer', () => {
           address: 'address-2',
           amount: (1 * 1e8).toString()
         }]
-        wrapper.vm.$v.recipientId.$model = wrapper.vm.$v.form.recipients.$model[0].address
-        wrapper.vm.$v.amount.$model = wrapper.vm.$v.form.recipients.$model[0].amount
+        wrapper.vm.$v.recipientId.$model = 'address-1'
+        wrapper.vm.$v.amount.$model = 50
+        // wrapper.vm.$v.recipientId.$model = wrapper.vm.$v.form.recipients.$model[0].address
+        // wrapper.vm.$v.amount.$model = wrapper.vm.$v.form.recipients.$model[0].amount
+
+        await wrapper.vm.$nextTick()
 
         expect(wrapper.vm.getTransactionData()).toEqual({
           address: 'address-1',
           passphrase: 'passphrase',
-          recipientId: 'address-2',
-          amount: (1 * 1e8).toString(),
+          recipientId: 'address-1',
+          amount: new BigNumber(50 * 1e8),
           fee: new BigNumber(0.1 * 1e8),
           vendorField: 'vendorfield test',
           wif: undefined,
@@ -838,6 +865,7 @@ describe('TransactionFormTransfer', () => {
       })
 
       it('should return correct data with passphrase for multipayment transaction', () => {
+        wrapper.vm.onSendTypeChange('Multiple')
         wrapper.vm.$v.form.fee.$model = 0.1
         wrapper.vm.$v.form.vendorField.$model = 'vendorfield test'
         wrapper.vm.$v.form.passphrase.$model = 'passphrase'
@@ -874,6 +902,7 @@ describe('TransactionFormTransfer', () => {
           secondPublicKey: Identities.PublicKey.fromPassphrase('second passphrase')
         })
 
+        wrapper.vm.onSendTypeChange('Multiple')
         wrapper.vm.$v.form.fee.$model = 0.1
         wrapper.vm.$v.form.vendorField.$model = 'vendorfield test'
         wrapper.vm.$v.form.passphrase.$model = 'passphrase'
@@ -920,6 +949,7 @@ describe('TransactionFormTransfer', () => {
       })
 
       it('should build multipayment transaction', async () => {
+        wrapper.vm.onSendTypeChange('Multiple')
         wrapper.vm.$v.form.recipients.$model = [{
           address: 'address-2',
           amount: 10
@@ -952,6 +982,7 @@ describe('TransactionFormTransfer', () => {
       })
 
       it('should build multipayment transaction with default arguments', async () => {
+        wrapper.vm.onSendTypeChange('Multiple')
         wrapper.vm.$v.form.recipients.$model = [{
           address: 'address-2',
           amount: 10
@@ -994,8 +1025,8 @@ describe('TransactionFormTransfer', () => {
 
         wrapper.vm.populateSchema()
 
-        expect(wrapper.vm.form.recipients[0].address).toBe('address-5')
-        expect(wrapper.vm.form.recipients[0].amount).toEqual(new BigNumber(100 * 1e8))
+        expect(wrapper.vm.recipientId).toBe('address-5')
+        expect(wrapper.vm.amount).toEqual(100)
         expect(wrapper.vm.form.vendorField).toBe('test vendorfield')
       })
 
@@ -1129,6 +1160,7 @@ describe('TransactionFormTransfer', () => {
       })
 
       it('should generate error for multipayment transaction', () => {
+        wrapper.vm.onSendTypeChange('Multiple')
         wrapper.vm.$v.form.recipients.$model = [{
           address: 'address-2',
           amount: 10
@@ -1395,9 +1427,9 @@ describe('TransactionFormTransfer', () => {
       it('should submit form data', async () => {
         const spy = jest.spyOn(wrapper.vm, 'onSubmit').mockImplementation()
 
-        wrapper.vm.nextStep()
+        await wrapper.vm.nextStep()
 
-        expect(spy).toHaveBeenCalledTimes(0)
+        expect(spy).toHaveBeenCalledTimes(1)
       })
     })
 
@@ -1606,9 +1638,13 @@ describe('TransactionFormTransfer', () => {
         })
 
         it('should be above minimum if set', () => {
+          wrapper.vm.onSendTypeChange('Multiple')
           wrapper.vm.$v.form.recipients.$model = [{
             address: 'address-1',
             amount: 10
+          }, {
+            address: 'address-1',
+            amount: 10
           }]
 
           expect(wrapper.vm.$v.form.recipients.aboveMinimum).toBe(true)
diff --git a/src/renderer/components/Input/InputFee.vue b/src/renderer/components/Input/InputFee.vue
index 10d22e7763..41a82b43fd 100644
--- a/src/renderer/components/Input/InputFee.vue
+++ b/src/renderer/components/Input/InputFee.vue
@@ -58,7 +58,7 @@
     </p>
 
     <div
-      v-if="isStaticFee && !isAdvancedFee"
+      v-if="!hideStaticFeeNotice && isStaticFee && !isAdvancedFee"
       class="mt-6 mb-4"
     >
       {{ $t(`INPUT_FEE.UNIQUE`, { fee: parseFloat(fee) }) }}
@@ -121,6 +121,12 @@ export default {
       type: Object,
       required: false,
       default: null
+    },
+
+    hideStaticFeeNotice: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
 
@@ -260,15 +266,17 @@ export default {
     }
   },
 
+  watch: {
+    transactionType () {
+      this.triggerTypeUpdate()
+    }
+  },
+
   created () {
     // Fees should be synchronized only when this component is active
     this.$synchronizer.appendFocus('fees')
 
-    if (this.lastFee && this.session_profile.defaultChosenFee === 'LAST') {
-      this.onChoice(this.session_profile.defaultChosenFee)
-    } else {
-      this.emitFee(this.feeChoices.AVERAGE)
-    }
+    this.triggerTypeUpdate()
   },
 
   beforeDestroy () {
@@ -276,6 +284,13 @@ export default {
   },
 
   methods: {
+    triggerTypeUpdate () {
+      if (this.lastFee && this.session_profile.defaultChosenFee === 'LAST') {
+        this.onChoice(this.session_profile.defaultChosenFee)
+      } else {
+        this.emitFee(this.feeChoices.AVERAGE)
+      }
+    },
     focusInput () {
       this.$refs.input.focus()
     },
diff --git a/src/renderer/components/Input/InputToggle/InputToggleChoice.vue b/src/renderer/components/Input/InputToggle/InputToggleChoice.vue
index abac5c46e7..f19b0b0e57 100644
--- a/src/renderer/components/Input/InputToggle/InputToggleChoice.vue
+++ b/src/renderer/components/Input/InputToggle/InputToggleChoice.vue
@@ -5,7 +5,7 @@
       'rounded-l': isFirst,
       'rounded-r': isLast,
       'InputToggleChoice--selected bg-blue text-white font-semibold shadow-lg': isSelected,
-      'bg-theme-input-toggle-choice text-theme-input-toggle-choice-text': !isSelected
+      'bg-theme-input-toggle-choice text-theme-input-toggle-choice-text hover:bg-theme-input-toggle-choice-hover': !isSelected
     }"
     type="button"
     @click="emitSelect(choice)"
diff --git a/src/renderer/components/Transaction/TransactionForm/TransactionFormTransfer.vue b/src/renderer/components/Transaction/TransactionForm/TransactionFormTransfer.vue
index d827813ecc..5c6d75efab 100644
--- a/src/renderer/components/Transaction/TransactionForm/TransactionFormTransfer.vue
+++ b/src/renderer/components/Transaction/TransactionForm/TransactionFormTransfer.vue
@@ -3,6 +3,28 @@
     class="TransactionFormTransfer flex flex-col"
     @submit.prevent
   >
+    <div v-if="hasAip11">
+      <div class="text-sm text-theme-page-text-light">
+        Select a Single or Multiple Recipient Transaction
+      </div>
+
+      <div class="flex items-center mt-2">
+        <InputToggle
+          v-model="sendType"
+          :choices="sendTypes"
+          :selected-choice="sendType"
+          @select="onSendTypeChange"
+        />
+
+        <div
+          v-tooltip="{ content: $tc('TRANSACTION.MULTI_PAYMENT.TOOLTIP', maximumRecipients, [maximumRecipients]), toggle: 'hover' }"
+          class="TransactionFormTransfer__single-multiple-tooltip"
+        >
+          ?
+        </div>
+      </div>
+    </div>
+
     <ListDivided
       v-if="senderLabel"
       :is-floating-label="true"
@@ -32,57 +54,59 @@
       @select="ensureAvailableAmount"
     />
 
-    <InputAddress
-      ref="recipient"
-      v-model="$v.recipientId.$model"
-      :label="$t('TRANSACTION.RECIPIENT')"
-      :pub-key-hash="walletNetwork.version"
-      :show-suggestions="true"
-      :is-disabled="!currentWallet"
-      :warning-text="recipientWarning"
-      name="recipientId"
-      class="TransactionFormTransfer__recipient mb-5"
-    />
-
-    <div class="flex items-baseline mb-5">
-      <InputCurrency
-        ref="amount"
-        v-model="$v.amount.$model"
-        :alternative-currency="alternativeCurrency"
-        :currency="walletNetwork.token"
-        :is-invalid="$v.amount.$dirty && $v.amount.$invalid"
-        :label="$t('TRANSACTION.AMOUNT')"
-        :minimum-error="amountTooLowError"
-        :minimum-amount="minimumAmount"
-        :maximum-amount="maximumAvailableAmount"
-        :maximum-error="notEnoughBalanceError"
-        :required="true"
+    <div :class="{ 'rounded-lg bg-theme-input-toggle-choice -mx-6 p-6 pt-4 mb-2': isMultiPayment }">
+      <InputAddress
+        ref="recipient"
+        v-model="$v.recipientId.$model"
+        :label="recipientFieldLabel"
+        :pub-key-hash="walletNetwork.version"
+        :show-suggestions="true"
         :is-disabled="!currentWallet"
-        :wallet-network="walletNetwork"
-        class="TransactionFormTransfer__amount flex-1 mr-3"
-        @blur="ensureAvailableAmount"
-        @input="setSendAll(false, false)"
+        :warning-text="recipientWarning"
+        name="recipientId"
+        class="TransactionFormTransfer__recipient mb-5"
       />
 
+      <div class="flex items-baseline mb-5">
+        <InputCurrency
+          ref="amount"
+          v-model="$v.amount.$model"
+          :alternative-currency="alternativeCurrency"
+          :currency="walletNetwork.token"
+          :is-invalid="$v.amount.$dirty && $v.amount.$invalid"
+          :label="$t('TRANSACTION.AMOUNT')"
+          :minimum-error="amountTooLowError"
+          :minimum-amount="minimumAmount"
+          :maximum-amount="maximumAvailableAmount"
+          :maximum-error="notEnoughBalanceError"
+          :required="true"
+          :is-disabled="!currentWallet"
+          :wallet-network="walletNetwork"
+          class="TransactionFormTransfer__amount flex-1 mr-3"
+          @blur="ensureAvailableAmount"
+          @input="setSendAll(false, false)"
+        />
+
+        <InputSwitch
+          v-model="isSendAllActive"
+          :text="$t('TRANSACTION.SEND_ALL')"
+          :is-disabled="isRecipientSendAll || !canSendAll || !currentWallet"
+          class="TransactionFormTransfer__send-all"
+          @change="setSendAll"
+        />
+      </div>
+
       <ButtonGeneric
-        v-if="hasAip11"
+        v-if="isMultiPayment"
         :disabled="!isValidRecipient"
-        :label="$t('TRANSACTION.BUTTON_ADD')"
-        class="TransactionFormTransfer__add py-1 flex-inline h-8 mt-4 mr-3"
+        :label="addRecipientLabel"
+        class="TransactionFormTransfer__add py-1 w-full h-8"
         @click="addRecipient"
       />
-
-      <InputSwitch
-        v-model="isSendAllActive"
-        :text="$t('TRANSACTION.SEND_ALL')"
-        :is-disabled="isRecipientSendAll || !canSendAll || !currentWallet"
-        class="TransactionFormTransfer__send-all"
-        @change="setSendAll"
-      />
     </div>
 
     <TransactionRecipientList
-      v-if="hasAip11"
+      v-if="isMultiPayment"
       :items="$v.form.recipients.$model"
       :max-items="maximumRecipients"
       :show-count="true"
@@ -111,6 +135,7 @@
         :is-disabled="!currentWallet"
         :wallet="currentWallet"
         :wallet-network="walletNetwork"
+        :hide-static-fee-notice="isMultiPayment"
         class="TransactionFormTransfer__fee"
         :class="{
           'TransactionFormTransfer__fee--helper': isMultiPayment && insufficientFundsError
@@ -216,7 +241,7 @@
 import { required } from 'vuelidate/lib/validators'
 import { TRANSACTION_TYPES, VENDOR_FIELD } from '@config'
 import { ButtonGeneric } from '@/components/Button'
-import { InputAddress, InputCurrency, InputPassword, InputSwitch, InputText, InputFee } from '@/components/Input'
+import { InputAddress, InputCurrency, InputPassword, InputSwitch, InputText, InputToggle, InputFee } from '@/components/Input'
 import { ListDivided, ListDividedItem } from '@/components/ListDivided'
 import { ModalConfirmation, ModalLoader } from '@/components/Modal'
 import { PassphraseInput } from '@/components/Passphrase'
@@ -238,6 +263,7 @@ export default {
     InputPassword,
     InputSwitch,
     InputText,
+    InputToggle,
     InputFee,
     ListDivided,
     ListDividedItem,
@@ -260,6 +286,11 @@ export default {
   },
 
   data: () => ({
+    sendType: 'Single',
+    sendTypes: [
+      'Single',
+      'Multiple'
+    ],
     recipientId: '',
     amount: '',
     isSendAllActive: false,
@@ -300,9 +331,9 @@ export default {
       return !this.$v.form.$invalid
     },
 
-    isMultiPayment () {
-      return this.form.recipients.length > 1
-    },
+    // isMultiPayment () {
+    //   return this.isMultiPayment // && this.form.recipients.length > 1
+    // },
 
     isLedger () {
       return this.currentWallet && !!this.currentWallet.isLedger
@@ -349,7 +380,7 @@ export default {
         return this.currency_subToUnit(0)
       }
 
-      if (!this.hasAip11) {
+      if (!this.isMultiPayment) {
         return this.currency_subToUnit(this.currentWallet.balance).minus(this.form.fee)
       }
 
@@ -477,6 +508,26 @@ export default {
       }
 
       return this.session_network.constants.multiPaymentLimit
+    },
+
+    isMultiPayment () {
+      return this.hasAip11 && this.sendType === 'Multiple'
+    },
+
+    recipientFieldLabel () {
+      const label = this.$t('TRANSACTION.RECIPIENT')
+
+      if (this.isMultiPayment) {
+        return `${label} #${this.form.recipients.length + 1}`
+      }
+
+      return label
+    },
+
+    addRecipientLabel () {
+      return this.$tc('TRANSACTION.BUTTON_ADD_RECIPIENT', this.form.recipients.length + 1, {
+        number: this.form.recipients.length + 1
+      })
     }
   },
 
@@ -512,14 +563,8 @@ export default {
       if (this.isMultiPayment) {
         transactionData.recipients = this.form.recipients
       } else {
-        if (this.hasAip11) {
-          transactionData.recipientId = this.form.recipients[0].address
-          transactionData.amount = this.getAmountNormalTransaction()
-        } else {
-          transactionData.recipientId = this.recipientId
-          transactionData.amount = this.currency_unitToSub(this.amount)
-        }
-
+        transactionData.recipientId = this.recipientId
+        transactionData.amount = this.currency_unitToSub(this.amount)
         transactionData.networkId = this.walletNetwork.id
       }
 
@@ -561,18 +606,12 @@ export default {
 
       try {
         if (WalletService.validateAddress(this.schema.address, this.session_network.version)) {
-          if (this.schema.address && this.schema.amount) {
-            this.$v.form.recipients.$model = []
-            this.$v.form.recipients.$model.push({
-              address: this.schema.address,
-              amount: this.currency_unitToSub(this.schema.amount),
-              sendAll: false
-            })
-          } else {
-            this.$set(this, 'recipientId', this.schema.address || '')
-          }
-
+          this.$set(this, 'recipientId', this.schema.address || '')
           this.$set(this.form, 'vendorField', this.schema.vendorField || '')
+
+          if (this.schema.amount) {
+            this.$set(this, 'amount', this.schema.amount || '')
+          }
         } else {
           throw new Error(this.$t('VALIDATION.RECIPIENT_DIFFERENT_NETWORK', [
             this.wallet_truncate(this.schema.address)
@@ -701,7 +740,7 @@ export default {
     },
 
     async nextStep () {
-      if (this.hasAip11) {
+      if (this.isMultiPayment) {
         for await (const recipient of this.$v.form.recipients.$model) {
           if (recipient.sendAll) {
             recipient.amount = this.currency_unitToSub(this.maximumAvailableAmount)
@@ -737,7 +776,7 @@ export default {
               throw new Error(this.$t('VALIDATION.INVALID_TYPE'))
             }
 
-            if (this.hasAip11 && Object.prototype.hasOwnProperty.call(transaction, 'asset') && Object.prototype.hasOwnProperty.call(transaction.asset, 'payments')) {
+            if (this.isMultiPayment && Object.prototype.hasOwnProperty.call(transaction, 'asset') && Object.prototype.hasOwnProperty.call(transaction.asset, 'payments')) {
               this.$refs.recipient.reset()
               this.$refs.amount.reset()
               this.$v.form.recipients.$model = []
@@ -792,6 +831,10 @@ export default {
       } catch (error) {
         this.$error(`${this.$t('TRANSACTION.ERROR.LOAD_FROM_FILE')}: ${error.message}`)
       }
+    },
+
+    onSendTypeChange (choice) {
+      this.sendType = choice
     }
   },
 
@@ -820,11 +863,15 @@ export default {
     form: {
       recipients: {
         aboveMinimum () {
-          if (!this.hasAip11) {
-            return true
+          if (!this.isMultiPayment) {
+            if (this.$refs.recipient && this.$refs.amount) {
+              return !this.$refs.recipient.$v.$invalid && !this.$refs.amount.$v.$invalid
+            }
+
+            return false
           }
 
-          return this.form.recipients.length >= 1
+          return this.form.recipients.length > 1
         },
         belowOrEqualMaximum () {
           return this.form.recipients.length <= this.maximumRecipients
@@ -856,4 +903,11 @@ export default {
   min-width: calc(var(--contact-identicon-xl) + 74px * 2);
   max-width: calc(var(--contact-identicon-xl) + 74px * 2 + 50px);
 }
+
+.TransactionFormTransfer__single-multiple-tooltip {
+  @apply flex items-center justify-center ml-2 rounded-full bg-theme-tooltip-icon text-theme-tooltip-icon-text w-4 h-4 cursor-pointer select-none text-xs font-bold;
+}
+.TransactionFormTransfer__single-multiple-tooltip:hover {
+  @apply bg-theme-tooltip-icon-hover text-theme-tooltip-icon-hover-text;
+}
 </style>
diff --git a/src/renderer/i18n/locales/en-US.js b/src/renderer/i18n/locales/en-US.js
index 03940ed28b..645f278505 100644
--- a/src/renderer/i18n/locales/en-US.js
+++ b/src/renderer/i18n/locales/en-US.js
@@ -1082,7 +1082,8 @@ export default {
     },
     MULTI_PAYMENT: {
       TOTAL_AMOUNT: 'Total amount',
-      WARNING_DUPLICATE: 'The address is already a recipient'
+      WARNING_DUPLICATE: 'The address is already a recipient',
+      TOOLTIP: 'A multiple recipient transaction allows up to {0} recipients in one transaction'
     },
     MULTI_SIGNATURE: {
       ADDRESS: 'Multisignature Address',
@@ -1125,6 +1126,7 @@ export default {
     BRIDGECHAIN_NAME: 'Bridgechain Name',
     BUSINESS_NAME: 'Business Name',
     BUTTON_ADD: 'Add',
+    BUTTON_ADD_RECIPIENT: 'Add Recipient #{number}',
     CONFIRMATION_COUNT: '{confirmations} Confirmations',
     CONFIRM_SEND_ALL: 'This will enable sending all of your tokens from the current wallet in this transaction. The selected transfer fee will be deducted from the send amount.',
     CONFIRM_SEND_ALL_TITLE: 'Send all your tokens?',
diff --git a/src/renderer/styles/_theme.css b/src/renderer/styles/_theme.css
index 5c5b931b87..1e7e054f42 100644
--- a/src/renderer/styles/_theme.css
+++ b/src/renderer/styles/_theme.css
@@ -82,6 +82,7 @@
   --theme-option-heading-button-disabled-hover: #555869;
   --theme-option-heading-button-text-disabled-hover: #828d9e;
   --theme-input-toggle-choice: #f1f5f8;
+  --theme-input-toggle-choice-hover: #e0f0fd;
   --theme-input-toggle-choice-text: #606f7b;
   --theme-input-field-border: #b9c2d7;
   --theme-modal-footer-button: #e7d28e;
@@ -115,6 +116,11 @@
   --theme-fee-range-track: var(--theme-page-text-light);
   --theme-fee-range-track-active: var(--theme-button-text);
 	--theme-fee-range-shadow: rgba(9, 100, 228, 0.34);
+
+  --theme-tooltip-icon: #f1f5f8;
+  --theme-tooltip-icon-hover: #212225;
+  --theme-tooltip-icon-text: #606f7b;
+  --theme-tooltip-icon-hover-text: #fff;
 }
 
 .theme-dark {
@@ -196,7 +202,8 @@
   --theme-option-heading-button-disabled-hover: #555869;
   --theme-option-heading-button-text-disabled-hover: #828d9e;
   --theme-input-toggle-choice: #333644;
-  --theme-input-toggle-choice-text: #4c5166;
+  --theme-input-toggle-choice-hover: #383c4d;
+  --theme-input-toggle-choice-text: #787fa3;
   --theme-input-field-border: #585c6f;
   --theme-modal-footer-button: #e7d28e;
   --theme-modal-footer-button-text: #b3a36f;
@@ -228,6 +235,11 @@
   --theme-fee-handler-inside: var(--theme-modal);
   --theme-fee-range-track: var(--theme-page-text-light);
   --theme-fee-range-track-active: var(--theme-button-text);
+
+  --theme-tooltip-icon: #333644;
+  --theme-tooltip-icon-hover: #919eca;
+  --theme-tooltip-icon-text: #4c5166;
+  --theme-tooltip-icon-hover-text: #383c4d;
 }
 
 #app {
diff --git a/tailwind.js b/tailwind.js
index c78891bcc7..0469ba8768 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -122,6 +122,7 @@ let colors = {
   'theme-option-heading-button-text': 'var(--theme-option-heading-button-text)',
   'theme-input-field-border': 'var(--theme-input-field-border)',
   'theme-input-toggle-choice': 'var(--theme-input-toggle-choice)',
+  'theme-input-toggle-choice-hover': 'var(--theme-input-toggle-choice-hover)',
   'theme-input-toggle-choice-text': 'var(--theme-input-toggle-choice-text)',
   'theme-modal-footer-button': 'var(--theme-modal-footer-button)',
   'theme-modal-footer-button-text': 'var(--theme-modal-footer-button-text)',
@@ -159,6 +160,11 @@ let colors = {
 
   'theme-footer-text': '#a4acb8',
 
+  'theme-tooltip-icon': 'var(--theme-tooltip-icon)',
+  'theme-tooltip-icon-hover': 'var(--theme-tooltip-icon-hover)',
+  'theme-tooltip-icon-text': 'var(--theme-tooltip-icon-text)',
+  'theme-tooltip-icon-hover-text': 'var(--theme-tooltip-icon-hover-text)',
+
   'transparent': 'transparent',
   'inherit': 'inherit',