chore(i18n): use t() instead on this.$t()

src/components/AChat/AChatMessage.vue

@@ -42,7 +42,7 @@
             <v-icon
               v-if="transaction.status === 'REJECTED'"
               :icon="statusIcon"
-              :title="$t('chats.retry_message')"
+              :title="t('chats.retry_message')"
               size="15"
               color="red"
               @click="$emit('resend')"
@@ -82,6 +82,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import { useFormatMessage } from './hooks/useFormatMessage'
@@ -130,6 +131,7 @@ export default defineComponent({
   },
   emits: ['resend', 'click:quotedMessage', 'swipe:left', 'longpress'],
   setup(props, { emit }) {
+    const { t } = useI18n()
     const store = useStore()
 
     const userId = computed(() => store.state.address)
@@ -153,6 +155,7 @@ export default defineComponent({
     }
 
     return {
+      t,
       userId,
       statusIcon,
       isOutgoingMessage,

src/components/AChat/AChatTransaction.vue

@@ -34,7 +34,7 @@
                 <v-icon
                   size="13"
                   :icon="tsIcon(status)"
-                  :title="$t(`chats.transaction_statuses.${status}`)"
+                  :title="t(`chats.transaction_statuses.${status}`)"
                   :color="tsColor(status)"
                   :style="checkStatusUpdatable(status) ? 'cursor: pointer;' : 'cursor: default;'"
                   @click="checkStatusUpdatable(status) ? refetch() : undefined"
@@ -55,8 +55,8 @@
           <div class="a-chat__direction a-text-regular-bold">
             {{
               isStringEqualCI(transaction.senderId, userId)
-                ? $t('chats.sent_label')
-                : $t('chats.received_label')
+                ? t('chats.sent_label')
+                : t('chats.received_label')
             }}
           </div>
           <div
@@ -87,11 +87,12 @@
 </template>
 
 <script lang="ts">
-import { useTransactionTime } from '@/components/AChat/hooks/useTransactionTime.ts'
-import { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
-import { CryptoSymbol } from '@/lib/constants/cryptos'
 import { computed, watch, onMounted, defineComponent, PropType } from 'vue'
 import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+import { useTransactionTime } from '@/components/AChat/hooks/useTransactionTime'
+import { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
+import { CryptoSymbol } from '@/lib/constants/cryptos'
 
 import { tsIcon, tsUpdatable, tsColor, Cryptos, TransactionStatusType } from '@/lib/constants'
 import { isStringEqualCI } from '@/lib/textHelpers'
@@ -138,6 +139,7 @@ export default defineComponent({
   },
   emits: ['click:transaction', 'click:quotedMessage', 'swipe:left', 'longpress'],
   setup(props, { emit }) {
+    const { t } = useI18n()
     const store = useStore()
 
     const userId = computed(() => store.state.address)
@@ -192,6 +194,7 @@ export default defineComponent({
     })
 
     return {
+      t,
       userId,
 
       time,

src/components/QrcodeScannerDialog.vue

@@ -10,7 +10,7 @@
         no-gutters
       >
         <div class="a-text-header">
-          {{ $t('scan.waiting_camera') }}
+          {{ t('scan.waiting_camera') }}
         </div>
         <v-progress-circular indeterminate color="primary" size="32" class="ml-4" />
       </v-row>
@@ -41,7 +41,7 @@
         </v-col>
         <v-col cols="12" class="pa-6">
           <h3 class="a-text-regular text-center">
-            {{ $t('scan.hold_your_device') }}
+            {{ t('scan.hold_your_device') }}
           </h3>
         </v-col>
       </v-row>
@@ -59,27 +59,27 @@
         <v-col cols="12">
           <template v-if="cameraStatus === 'nocamera'">
             <h3 class="a-text-header">
-              {{ $t('scan.no_camera_found') }}
+              {{ t('scan.no_camera_found') }}
             </h3>
             <p class="a-text-regular mt-1 mb-0">
-              {{ $t('scan.connect_camera') }}
+              {{ t('scan.connect_camera') }}
             </p>
           </template>
           <template v-else-if="cameraStatus === 'noaccess'">
             <h3 class="a-text-header">
-              {{ $t('scan.no_camera_access') }}
+              {{ t('scan.no_camera_access') }}
             </h3>
             <p class="a-text-regular mt-1 mb-0">
-              {{ $t('scan.grant_camera_permissions') }}
+              {{ t('scan.grant_camera_permissions') }}
             </p>
           </template>
           <template v-else-if="cameraStatus === 'nostream'">
             <h3 class="a-text-header">
-              {{ $t('scan.no_camera_stream') }}
+              {{ t('scan.no_camera_stream') }}
             </h3>
             <p
               class="a-text-regular mt-1 mb-0"
-              v-html="$t('scan.no_stream_details', { noStreamDetails })"
+              v-html="t('scan.no_stream_details', { noStreamDetails })"
             />
           </template>
         </v-col>
@@ -90,7 +90,7 @@
       <v-card-actions>
         <v-spacer />
         <v-btn variant="text" class="a-btn-regular" @click="show = false">
-          {{ $t('scan.close_button') }}
+          {{ t('scan.close_button') }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -215,6 +215,7 @@ export default defineComponent({
     })
 
     return {
+      t,
       cameras,
       cameraStatus,
       classes,

src/components/WalletCard.vue

@@ -3,7 +3,7 @@
     <v-list lines="two" :class="classes.walletCardList">
       <v-list-item :class="classes.walletCardTile" @click="showShareURIDialog = true">
         <v-list-item-title :class="classes.walletCardTitle">
-          {{ $t('home.wallet_crypto', { crypto: cryptoName }) }}
+          {{ t('home.wallet_crypto', { crypto: cryptoName }) }}
         </v-list-item-title>
         <v-list-item-subtitle :class="classes.walletCardSubtitle">
           {{ address }}
@@ -18,7 +18,7 @@
 
       <v-list-item @click="$emit('click:balance', crypto)">
         <v-list-item-title :class="classes.walletCardTitle">
-          {{ $t('home.balance') }}
+          {{ t('home.balance') }}
         </v-list-item-title>
         <v-list-item-subtitle :class="classes.walletCardSubtitle">
           <p>
@@ -57,6 +57,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import ShareURIDialog from '@/components/ShareURIDialog.vue'
 import WalletCardListActions from '@/components/WalletCardListActions.vue'
 import { Cryptos } from '@/lib/constants'
@@ -106,6 +107,7 @@ export default defineComponent({
     WalletCardListActions
   },
   setup(props) {
+    const { t } = useI18n()
     const store = useStore()
     const { xs } = useDisplay()
     const key = props.crypto.toLowerCase()
@@ -132,6 +134,7 @@ export default defineComponent({
     })
 
     return {
+      t,
       SIGNIFICANT_DIGITS,
       classes,
       calculatedBalance,

src/components/nodes/NodesTable.vue

@@ -1,9 +1,9 @@
 <template>
   <div :class="classes.root">
     <v-tabs v-model="tab" bg-color="transparent">
-      <v-tab value="adm">{{ $t('nodes.tabs.adm_nodes') }}</v-tab>
-      <v-tab value="coins">{{ $t('nodes.tabs.coin_nodes') }}</v-tab>
-      <v-tab value="services">{{ $t('nodes.tabs.service_nodes') }}</v-tab>
+      <v-tab value="adm">{{ t('nodes.tabs.adm_nodes') }}</v-tab>
+      <v-tab value="coins">{{ t('nodes.tabs.coin_nodes') }}</v-tab>
+      <v-tab value="services">{{ t('nodes.tabs.service_nodes') }}</v-tab>
     </v-tabs>
 
     <v-window v-model="tab">
@@ -21,60 +21,60 @@
       <div v-if="tab === 'coins'">
         <v-checkbox
           v-model="preferFastestCoinNodeOption"
-          :label="$t('nodes.fastest_title')"
+          :label="t('nodes.fastest_title')"
           :class="classes.checkbox"
           class="mt-4"
           color="grey darken-1"
           hide-details
         />
         <div class="a-text-explanation-enlarged">
-          {{ $t('nodes.fastest_tooltip') }}
+          {{ t('nodes.fastest_tooltip') }}
         </div>
         <div>&nbsp;<br />&nbsp;</div>
       </div>
       <div v-else-if="tab === 'services'">
         <v-checkbox
           v-model="preferFasterServiceNodeOption"
-          :label="$t('nodes.fastest_title')"
+          :label="t('nodes.fastest_title')"
           :class="classes.checkbox"
           class="mt-4"
           color="grey darken-1"
           hide-details
         />
         <div class="a-text-explanation-enlarged">
-          {{ $t('nodes.fastest_tooltip') }}
+          {{ t('nodes.fastest_tooltip') }}
         </div>
         <div>&nbsp;<br />&nbsp;</div>
       </div>
       <div v-else-if="tab === 'adm'">
         <v-checkbox
           v-model="preferFastestAdmNodeOption"
-          :label="$t('nodes.fastest_title')"
+          :label="t('nodes.fastest_title')"
           :class="classes.checkbox"
           class="mt-4"
           color="grey darken-1"
           hide-details
         />
         <div class="a-text-explanation-enlarged">
-          {{ $t('nodes.fastest_tooltip') }}
+          {{ t('nodes.fastest_tooltip') }}
         </div>
         <v-checkbox
           v-model="useSocketConnection"
-          :label="$t('nodes.use_socket_connection')"
+          :label="t('nodes.use_socket_connection')"
           :class="classes.checkbox"
           class="mt-4"
           color="grey darken-1"
           hide-details
         />
         <div class="a-text-explanation-enlarged">
-          {{ $t('nodes.use_socket_connection_tooltip') }}
+          {{ t('nodes.use_socket_connection_tooltip') }}
         </div>
 
         <!-- eslint-disable vue/no-v-html -- Safe internal content -->
         <div
           :class="classes.info"
           class="a-text-regular-enlarged mt-6"
-          v-html="$t('nodes.nodeLabelDescription')"
+          v-html="t('nodes.nodeLabelDescription')"
         />
         <!-- eslint-enable vue/no-v-html -->
 
@@ -86,6 +86,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import { AdmNodesTable } from './adm'
@@ -108,6 +109,7 @@ export default defineComponent({
     CoinNodesTable
   },
   setup() {
+    const { t } = useI18n()
     const store = useStore()
     const tab = ref<Tab>('adm')
 
@@ -150,6 +152,7 @@ export default defineComponent({
     })
 
     return {
+      t,
       tab,
       classes,
       useSocketConnection,

src/components/nodes/coins/CoinNodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead hide-socket :label="$t('nodes.coin')" />
+    <NodesTableHead hide-socket :label="t('nodes.coin')" />
 
     <tbody>
       <CoinNodesTableItem v-for="node in nodes" :key="node.url" :label="node.label" :node="node" />
@@ -10,6 +10,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 import NodesTableContainer from '@/components/nodes/components/NodesTableContainer.vue'
 import NodesTableHead from '@/components/nodes/components/NodesTableHead.vue'
@@ -29,6 +30,7 @@ export default defineComponent({
     CoinNodesTableItem
   },
   setup() {
+    const { t } = useI18n()
     const store = useStore()
 
     const nodes = computed<NodeStatusResult[]>(() => {
@@ -38,6 +40,7 @@ export default defineComponent({
     })
 
     return {
+      t,
       nodes,
       classes
     }

src/components/nodes/components/NodeStatus.vue

@@ -3,7 +3,7 @@
     <span>
       {{ nodeStatusTitle
       }}<span v-if="node.status === 'online'" :class="classes.textMs">{{
-        $t('nodes.ms')
+        t('nodes.ms')
       }}</span></span
     >
 
@@ -29,6 +29,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, toRefs } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { NodeStatusResult } from '@/lib/nodes/abstract.node'
 import { useNodeStatus } from '@/components/nodes/hooks'
 
@@ -52,11 +53,13 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const { t } = useI18n()
     const { node } = toRefs(props)
 
     const { nodeStatusTitle, nodeStatusDetail, nodeStatusColor } = useNodeStatus(node)
 
     return {
+      t,
       nodeStatusTitle,
       nodeStatusDetail,
       nodeStatusColor,

src/components/nodes/services/ServiceNodesTable.vue

@@ -1,6 +1,6 @@
 <template>
   <NodesTableContainer>
-    <NodesTableHead hide-socket :label="$t('nodes.service')" />
+    <NodesTableHead hide-socket :label="t('nodes.service')" />
 
     <tbody>
       <ServiceNodesTableItem
@@ -15,6 +15,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 import NodesTableContainer from '@/components/nodes/components/NodesTableContainer.vue'
 import NodesTableHead from '@/components/nodes/components/NodesTableHead.vue'
@@ -34,6 +35,7 @@ export default defineComponent({
     ServiceNodesTableItem
   },
   setup() {
+    const { t } = useI18n()
     const store = useStore()
 
     const nodes = computed<NodeStatusResult[]>(() => {
@@ -43,6 +45,7 @@ export default defineComponent({
     })
 
     return {
+      t,
       nodes,
       classes
     }