Merge branch 'dev' into fix/failed-tx-status

# Conflicts:
#	src/components/transactions/TransactionTemplate.vue

Author: S-FrontendDev

commitlint.config.js

@@ -0,0 +1,7 @@
+import type { UserConfig } from '@commitlint/types'
+
+const config: UserConfig = {
+  extends: ['@commitlint/config-conventional']
+}
+
+export default config

commitlint.config.ts

@@ -1,6 +1,7 @@
 {
   "name": "adamant-im",
   "version": "4.9.2",
+  "type": "module",
   "author": "ADAMANT Foundation <devs@adamant.im>",
   "license": "GPLv3",
   "description": "Decentralized Messenger",
@@ -120,8 +121,9 @@
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",
     "@capacitor/cli": "^6.1.2",
-    "@commitlint/cli": "^19.7.1",
+    "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.7.1",
+    "@commitlint/types": "^19.8.0",
     "@electron/notarize": "^2.5.0",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@openapitools/openapi-generator-cli": "^2.16.3",
@@ -170,7 +172,7 @@
     "vite-plugin-pwa": "^0.20.1",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.3.0",
-    "vitest": "^2.0.5",
+    "vitest": "^3.0.9",
     "vue-cli-plugin-i18n": "^2.3.2",
     "vue-cli-plugin-vuetify": "~2.5.8",
     "vue-eslint-parser": "^9.4.3",

package-lock.json

@@ -3,10 +3,7 @@
     <v-row justify="center" no-gutters>
       <container>
         <v-toolbar ref="toolbar" :flat="flat" :height="height">
-          <v-btn v-if="showBack" icon size="small" @click="goBack">
-            <v-icon :icon="mdiArrowLeft" size="x-large" />
-          </v-btn>
-
+          <back-button v-if="showBack" @click="goBack" />
           <v-toolbar-title v-if="title" class="a-text-regular-enlarged">
             <div>{{ title }}</div>
             <div v-if="subtitle" class="body-1">
@@ -21,8 +18,10 @@
 
 <script>
 import { mdiArrowLeft } from '@mdi/js'
+import BackButton from '@/components/common/BackButton/BackButton.vue'
 
 export default {
+  components: { BackButton },
   props: {
     title: {
       type: String,
@@ -96,16 +95,6 @@ export default {
   :deep(.v-toolbar-title:not(:first-child)) {
     margin-inline-start: 0;
   }
-
-  :deep(.v-toolbar__content > .v-btn:first-child) {
-    margin-inline-start: 4px;
-  }
-
-  :deep(.v-btn:hover) {
-    > .v-btn__overlay {
-      opacity: 0;
-    }
-  }
 }
 
 .app-toolbar--fixed {

package.json

@@ -1,6 +1,6 @@
 <template>
   <v-toolbar flat height="56" :class="`${className}`" color="transparent">
-    <v-btn icon @click="goBack">
+    <back-button @click="goBack">
       <v-badge
         v-if="numOfNewMessages > 0"
         :value="numOfNewMessages"
@@ -9,8 +9,7 @@
         :content="numOfNewMessages > 99 ? '99+' : numOfNewMessages"
       >
       </v-badge>
-      <v-icon :icon="mdiArrowLeft" />
-    </v-btn>
+    </back-button>
     <div v-if="!isWelcomeChat(partnerId)">
       <slot name="avatar-toolbar" />
     </div>
@@ -44,8 +43,10 @@
 import partnerName from '@/mixins/partnerName'
 import { isAdamantChat, isWelcomeChat } from '@/lib/chat/meta/utils'
 import { mdiArrowLeft } from '@mdi/js'
+import BackButton from '@/components/common/BackButton/BackButton.vue'
 
 export default {
+  components: { BackButton },
   mixins: [partnerName],
   props: {
     partnerId: {
@@ -140,13 +141,6 @@ export default {
     }
   }
 
-  :deep(.v-toolbar__content > .v-btn:first-child) {
-    width: 36px;
-    height: 36px;
-    margin: 0 12px;
-    border-radius: 50%;
-  }
-
   :deep(.v-text-field) {
     @include mixins.a-text-regular-enlarged-bold();
 
@@ -181,13 +175,6 @@ export default {
       margin-bottom: 0;
     }
   }
-
-  :deep(.v-btn) {
-    &:hover > .v-btn__overlay {
-      opacity: 0.2;
-      transition: all 0.4s ease;
-    }
-  }
 }
 
 /** Themes **/

src/components/AppToolbarCentered.vue

@@ -4,6 +4,7 @@
       <slot>
         <!--     Todo: check src/components/PasswordSetDialog.vue component and consider the possibility to move common code to new component  -->
         <v-text-field
+          ref="passphraseInput"
           v-model="passphrase"
           :label="$t('login.password_label')"
           autocomplete="current-password"
@@ -54,14 +55,14 @@
 
 <script>
 import { validateMnemonic } from 'bip39'
-import { computed, ref, defineComponent } from 'vue'
+import { computed, ref, defineComponent, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
 import { isAxiosError } from 'axios'
 import { isAllNodesOfflineError, isAllNodesDisabledError } from '@/lib/nodes/utils/errors'
 import { mdiEye, mdiEyeOff } from '@mdi/js'
-
+import { useSaveCursor } from '@/hooks/useSaveCursor'
 
 const className = 'login-form'
 const classes = {
@@ -83,10 +84,14 @@ export default defineComponent({
     const { t } = useI18n()
     const showSpinner = ref(false)
     const showPassphrase = ref(false)
+    const passphraseInput = useTemplateRef('passphraseInput')
+
     const togglePassphraseVisibility = () => {
       showPassphrase.value = !showPassphrase.value
     }
 
+    useSaveCursor(passphraseInput, showPassphrase)
+
     const passphrase = computed({
       get() {
         return props.modelValue
@@ -143,6 +148,7 @@ export default defineComponent({
     return {
       showSpinner,
       passphrase,
+      passphraseInput,
       showPassphrase,
       classes,
       mdiEye,
@@ -174,5 +180,4 @@ export default defineComponent({
     }
   }
 }
-
 </style>

src/components/Chat/ChatToolbar.vue

@@ -2,7 +2,7 @@
   <v-form ref="form" class="login-form" @submit.prevent="submit">
     <v-row no-gutters>
       <v-text-field
-        ref="passwordField"
+        ref="passwordInput"
         v-model="password"
         autofocus
         autocomplete="new-password"
@@ -13,13 +13,7 @@
         variant="underlined"
       >
         <template #append-inner>
-          <v-btn
-            @click="togglePasswordVisibility"
-            icon
-            :ripple="false"
-            :size="28"
-            variant="plain"
-          >
+          <v-btn @click="togglePasswordVisibility" icon :ripple="false" :size="28" variant="plain">
             <v-icon :icon="showPassword ? mdiEye : mdiEyeOff" :size="24" />
           </v-btn>
         </template>
@@ -55,14 +49,15 @@
 
 <script>
 import { isAxiosError } from 'axios'
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, ref, useTemplateRef } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import { useI18n } from 'vue-i18n'
 
 import { clearDb } from '@/lib/idb'
 import { isAllNodesDisabledError, isAllNodesOfflineError } from '@/lib/nodes/utils/errors'
 import { mdiEye, mdiEyeOff } from '@mdi/js'
+import { useSaveCursor } from '@/hooks/useSaveCursor'
 
 export default defineComponent({
   props: {
@@ -76,13 +71,15 @@ export default defineComponent({
     const router = useRouter()
     const store = useStore()
     const { t } = useI18n()
-    const passwordField = ref(null)
+    const passwordInput = useTemplateRef('passwordInput')
     const showSpinner = ref(false)
     const showPassword = ref(false)
     const togglePasswordVisibility = () => {
       showPassword.value = !showPassword.value
     }
 
+    useSaveCursor(passwordInput, showPassword)
+
     const password = computed({
       get() {
         return props.modelValue
@@ -132,7 +129,7 @@ export default defineComponent({
     }
 
     return {
-      passwordField,
+      passwordInput,
       showSpinner,
       password,
       showPassword,

src/components/LoginForm.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-btn :class="className" icon>
+    <slot />
+    <v-icon :icon="mdiArrowLeft" />
+  </v-btn>
+</template>
+
+<script setup lang="ts">
+import { mdiArrowLeft } from '@mdi/js'
+
+const className = 'back-button'
+</script>
+
+<style lang="scss">
+.back-button {
+  &:first-child {
+    width: 36px;
+    height: 36px;
+    margin: 0 12px !important;
+    border-radius: 50%;
+  }
+
+  &:hover > .v-btn__overlay {
+    opacity: 0.2;
+    transition: all 0.4s ease;
+  }
+}
+</style>

src/components/LoginPasswordForm.vue

@@ -290,7 +290,7 @@ export default defineComponent({
       )
     })
     const rate = computed(() => {
-      if (!transaction.value) return
+      if (!transaction.value) return Symbols.HOURGLASS
 
       return store.getters['rate/rate'](transaction.value.amount, props.crypto)
     })
@@ -309,7 +309,7 @@ export default defineComponent({
       const { cryptoTransferDecimals, decimals } = CryptosInfo[commissionTokenLabel]
 
       const tokenFee =
-        typeof props.fee === 'number'
+        props.queryStatus === 'success' && typeof props.fee === 'number'
           ? `${formatAmount(props.fee, cryptoTransferDecimals ?? decimals)} ${commissionTokenLabel}`
           : placeholder.value
 

src/components/common/BackButton/BackButton.vue

@@ -0,0 +1,18 @@
+import { watch, type Ref, type ShallowRef } from 'vue'
+
+export function useSaveCursor(
+  inputRef: Readonly<ShallowRef<HTMLInputElement | null>>,
+  trigger: Ref<boolean>
+) {
+  watch(trigger, () => {
+    const inputElement = inputRef.value
+    if (inputElement) {
+      const cursorPosition = inputElement.selectionStart || 0
+
+      requestAnimationFrame(() => {
+        inputElement.setSelectionRange(cursorPosition, cursorPosition)
+        inputElement.focus()
+      })
+    }
+  })
+}