feat: add vibrations for specific actions

src/components/AChat/AChatActionsOverlay.vue

@@ -37,6 +37,7 @@
 import { usePartnerId } from '@/components/AChat/hooks/usePartnerId'
 import { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
 import { computed, defineComponent, onMounted, PropType, reactive, ref } from 'vue'
+import { vibrate } from '@/lib/vibrate'
 
 const className = 'a-chat-actions-overlay'
 const classes = {
@@ -95,6 +96,8 @@ export default defineComponent({
 
     onMounted(() => {
       setTimeout(() => {
+        vibrate.veryShort()
+
         if (rect.value) {
           const halfOfElementHeight = rect.value ? rect.value.height : 0
 

src/components/FreeTokensDialog.vue

@@ -32,8 +32,11 @@
 </template>
 
 <script>
+import { watch } from 'vue'
+
 import { websiteUriToOnion } from '@/lib/uri'
 import { mdiGift } from '@mdi/js'
+import { vibrate } from '@/lib/vibrate'
 
 export default {
   props: {
@@ -43,7 +46,13 @@ export default {
     }
   },
   emits: ['update:modelValue'],
-  setup() {
+  setup(props) {
+    watch(() => props.modelValue, () => {
+      if (props.modelValue) {
+        vibrate.medium()
+      }
+    })
+
     return {
       mdiGift
     }

src/components/QrcodeCapture.vue

@@ -18,6 +18,8 @@
 </template>
 
 <script>
+import { vibrate } from '@/lib/vibrate'
+
 export default {
   emits: ['detect', 'error'],
   data: () => ({
@@ -41,8 +43,12 @@ export default {
         this.imageBase64 = await this.getImageBase64()
         this.qrCodeText = await this.tryToDecode()
 
+        vibrate.veryShort()
+
         this.$emit('detect', this.qrCodeText)
       } catch (err) {
+        vibrate.tripleVeryShort()
+
         this.$emit('error', err)
       }
       // Reset input to trigger change event later if user selects same image (Chrome)

src/components/WalletTab.vue

@@ -24,14 +24,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, watch } from 'vue'
 import { useStore } from 'vuex'
 import type { PropType } from 'vue'
 
 import { Cryptos, FetchStatus } from '@/lib/constants'
 import CryptoIcon from '@/components/icons/CryptoIcon.vue'
 import numberFormat from '@/filters/numberFormat'
 import { mdiDotsHorizontal,  mdiHelpCircleOutline } from '@mdi/js'
+import { vibrate } from '@/lib/vibrate'
 
 
 const className = 'wallet-tab'
@@ -71,6 +72,8 @@ export default defineComponent({
   setup(props) {
     const store = useStore()
 
+    const currentBalance = computed(() => props.wallet.balance)
+
     const isRateLoaded = computed(() => store.state.rate.isLoaded && props.wallet.rate)
     const balanceStatus = computed(() => {
       const { cryptoCurrency } = props.wallet
@@ -86,6 +89,13 @@ export default defineComponent({
     const isBalanceLoading = computed(() => balanceStatus.value === FetchStatus.Loading)
     const fetchBalanceSucceeded = computed(() => balanceStatus.value === FetchStatus.Success)
 
+    watch(currentBalance, (newBalance, oldBalance) => {
+      if (oldBalance < newBalance) {
+          vibrate.doubleVeryShort()
+        }
+      }
+    )
+
     return {
       classes,
       isRateLoaded,

src/views/Home.vue

@@ -74,6 +74,7 @@ import numberFormat from '@/filters/numberFormat'
 
 import { PullDown } from '@/components/common/PullDown'
 import { Cryptos, CryptosInfo, isErc20 } from '@/lib/constants'
+import { vibrate } from '@/lib/vibrate'
 
 /**
  * Center VTab element on click.
@@ -184,6 +185,8 @@ export default {
       this.$store.dispatch('updateBalance', {
         requestedByUser: true
       })
+
+      vibrate.veryShort()
     },
     numberFormat
   }

src/views/SendFunds.vue

@@ -72,14 +72,16 @@ export default {
     onSend(transactionId, crypto) {
       const userComeFrom = this.$route.query.from
 
+      vibrate.doubleVeryShort()
+
       if (userComeFrom) {
         this.$router.replace(userComeFrom)
       } else {
         this.$router.replace(`/transactions/${crypto}/${transactionId}`)
       }
     },
     onError(message) {
-      vibrate.doubleShort();
+      vibrate.tripleVeryShort();
       this.$store.dispatch('snackbar/show', {
         message,
         timeout: 3000,