diff --git a/.env.production b/.env.production
index 5010b465..0200cfbd 100644
--- a/.env.production
+++ b/.env.production
@@ -5,7 +5,7 @@ VUE_APP_MODE=production
 VUE_APP_SENTRY_SAMPLE_RATE=0.95
 VUE_APP_SENTRY_DSN=https://f08dc5725ef448ba9960e5d8ec4f8a3c@o503538.ingest.sentry.io/6125850
 VUE_APP_SOLANA_BUILD_VERSION=0.1
-VUE_APP_GA_ID=G-RCNKR0V6N2
+VUE_APP_GA_ID=GTM-RCNKR0V6N2
 VUE_APP_DEVELOPER_DASHBOARD_URL="https://api.developer.tor.us"
 VUE_APP_IMGPROXY_URL=https://img-cdn.magiceden.dev
 # this signature is for solana.tor.us
diff --git a/.env.testing b/.env.testing
index f27acb35..dc865b77 100644
--- a/.env.testing
+++ b/.env.testing
@@ -8,7 +8,7 @@ STATE_DOMAIN=https://solana-openlogin-state.tor.us
 VUE_APP_SENTRY_SAMPLE_RATE=0.95
 VUE_APP_SENTRY_DSN=https://f08dc5725ef448ba9960e5d8ec4f8a3c@o503538.ingest.sentry.io/6125850
 VUE_APP_SOLANA_BUILD_VERSION=0.1
-VUE_APP_GA_ID=G-LQ8G005HR9
+VUE_APP_GA_ID=GTM-LQ8G005HR9
 BROWSERSTACK_USERNAME=
 BROWSERSTACK_ACCESS_KEY=
 VUE_APP_DEVELOPER_DASHBOARD_URL="https://api.developer.tor.us"
diff --git a/package-lock.json b/package-lock.json
index d42a6477..d16eefc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,7 @@
         "json-stable-stringify": "^1.0.2",
         "lodash-es": "^4.17.21",
         "loglevel": "^1.8.1",
+        "node-fetch": "^3.3.2",
         "pump": "^3.0.0",
         "qr-scanner": "^1.4.2",
         "readable-stream": "^4.4.2",
@@ -10361,6 +10362,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/data-urls": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
@@ -12618,6 +12627,28 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/figures": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
@@ -13063,6 +13094,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -17196,6 +17238,41 @@
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-2.0.2.tgz",
       "integrity": "sha512-Ntyt4AIXyaLIuMHF6IOoTakB3K+RWxwtsHNRxllEoA6vPwP9o4866g6YWDLUdnucilZhmkxiHwHr11gAENw+QA=="
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
+    "node_modules/node-fetch": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "dependencies": {
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
+      }
+    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -22764,6 +22841,14 @@
         "defaults": "^1.0.3"
       }
     },
+    "node_modules/web-streams-polyfill": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
+      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index b303abcc..b96bf658 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,8 @@
     "@toruslabs/openlogin": "^4.7.0",
     "@toruslabs/openlogin-ed25519": "^2.0.0",
     "@toruslabs/openlogin-jrpc": "^4.7.0",
-    "@toruslabs/openlogin-utils": "^4.7.0",
     "@toruslabs/openlogin-subkey": "^4.2.0",
+    "@toruslabs/openlogin-utils": "^4.7.0",
     "@toruslabs/solana-controllers": "^3.0.3",
     "@toruslabs/tweetnacl-js": "^1.0.4",
     "@toruslabs/vue-components": "^2.0.1",
@@ -64,6 +64,7 @@
     "json-stable-stringify": "^1.0.2",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.8.1",
+    "node-fetch": "^3.3.2",
     "pump": "^3.0.0",
     "qr-scanner": "^1.4.2",
     "readable-stream": "^4.4.2",
diff --git a/src/components/TokenBalance.vue b/src/components/TokenBalance.vue
index 1a16297c..af6d53c7 100644
--- a/src/components/TokenBalance.vue
+++ b/src/components/TokenBalance.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { significantDigits } from "@toruslabs/base-controllers";
 import { computed, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
 
 import { Card, NetworkDisplay } from "@/components/common";
 import ControllerModule from "@/modules/controllers";
+// import { i18n } from "@/plugins/i18nPlugin";
 import { SolAndSplToken } from "@/utils/interfaces";
 
-const { t } = useI18n();
+// const { t } = i18n.global;
 
 const props = defineProps<{
   selectedToken?: Partial<SolAndSplToken>;
@@ -42,7 +42,7 @@ watch(
   <Card>
     <div class="flex w-full justify-between items-center">
       <div class="font-header font-semibold text-app-text-600 dark:text-app-text-dark-500">
-        {{ t("walletHome.totalValue") }}
+        {{ $t("walletHome.totalValue") }}
       </div>
       <NetworkDisplay />
     </div>
diff --git a/src/components/WalletBalance.vue b/src/components/WalletBalance.vue
index 96037f72..2f61e6ac 100644
--- a/src/components/WalletBalance.vue
+++ b/src/components/WalletBalance.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
 import { LoadingState } from "@toruslabs/solana-controllers";
 import { computed } from "vue";
-import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 
 import { Button, Card, CurrencySelector, NetworkDisplay } from "@/components/common";
 import { GeneralInteractions, HomePageInteractions, trackUserClick } from "@/directives/google-analytics";
 import ControllerModule from "@/modules/controllers";
+// import { i18n } from "@/plugins/i18nPlugin";
 import { isTopupHidden } from "@/utils/whitelabel";
 
-const { t } = useI18n();
+// const { t } = i18n.global;
+
 const isCurrencyRateUpdate = computed(() => ControllerModule.isCurrencyRateUpdate);
 const isSplTokenLoading = computed(() => ControllerModule.isSplTokenLoading);
 
@@ -37,7 +38,7 @@ const updateCurrency = (newCurrency: string) => {
   <Card :height="showButtons ? '164px' : undefined">
     <div class="flex w-full justify-between items-center">
       <div class="font-header font-semibold text-app-text-600 dark:text-app-text-dark-500">
-        {{ t("walletHome.totalValue") }}
+        {{ $t("walletHome.totalValue") }}
       </div>
       <NetworkDisplay />
     </div>
@@ -71,7 +72,7 @@ const updateCurrency = (newCurrency: string) => {
           variant="tertiary"
           class="w-full mr-3 text-app-primary-500"
           @click="router.push('/wallet/topup')"
-          >{{ t("walletHome.topUp") }}</Button
+          >{{ $t("walletHome.topUp") }}</Button
         >
         <Button
           v-ga="HomePageInteractions.TRANSFER"
@@ -79,7 +80,7 @@ const updateCurrency = (newCurrency: string) => {
           variant="tertiary"
           class="w-full text-app-primary-500"
           @click="router.push('/wallet/transfer')"
-          >{{ t("walletHome.transfer") }}</Button
+          >{{ $t("walletHome.transfer") }}</Button
         >
       </div>
     </template>
diff --git a/src/components/WalletTabs.vue b/src/components/WalletTabs.vue
index 908e351b..e94682e9 100644
--- a/src/components/WalletTabs.vue
+++ b/src/components/WalletTabs.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import SolanaLogoURL from "@/assets/solana-dark.svg";
 import SolanaLightLogoURL from "@/assets/solana-light.svg";
@@ -26,7 +25,6 @@ const props = withDefaults(
   }
 );
 
-const { t } = useI18n();
 const tabs = ref(NAVIGATION_LIST);
 const user = computed(() => ControllerModule.torus.userInfo);
 const selectedAddress = computed(() => ControllerModule.torus.selectedAddress);
@@ -62,7 +60,7 @@ const logout = async () => {
                 value.navHidden && 'hidden',
               ]"
               :aria-current="key === tab ? 'page' : undefined"
-              >{{ t(value.name) }}</router-link
+              >{{ $t(value.name) }}</router-link
             >
           </div>
         </div>
@@ -79,7 +77,7 @@ const logout = async () => {
       <header v-if="props.showHeader">
         <div class="flex items-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex-wrap">
           <h1 class="text-xl sm:text-3xl font-medium leading-tight text-app-text-500 dark:text-app-text-dark-400">
-            {{ t(tabs[tab]?.title) || "" }}
+            {{ $t(tabs[tab]?.title) || "" }}
           </h1>
           <div class="grow flex">
             <div id="rightPanel" class="w-full" />
@@ -117,7 +115,7 @@ const logout = async () => {
             class="text-xs text-center leading-none mt-1"
             :class="[key === tab ? (ControllerModule.isDarkMode ? 'item-white' : 'item-black') : 'item-gray opacity-90']"
           >
-            {{ t(value.name) || "" }}
+            {{ $t(value.name) || "" }}
           </p>
         </div>
       </router-link>
diff --git a/src/components/activity/ActivityItem.vue b/src/components/activity/ActivityItem.vue
index d5e28f3d..50958a50 100644
--- a/src/components/activity/ActivityItem.vue
+++ b/src/components/activity/ActivityItem.vue
@@ -3,7 +3,6 @@ import { ACTIVITY_STATUS_CANCELLED, ACTIVITY_STATUS_SUCCESSFUL, ACTIVITY_STATUS_
 import { SolanaTransactionActivity } from "@toruslabs/solana-controllers";
 import dateFormat from "dateformat";
 import { computed } from "vue";
-import { useI18n } from "vue-i18n";
 
 import SolanaLogoDark from "@/assets/solana-logo-shaded.png";
 import SolanaLogoLight from "@/assets/solana-logo-shaded-light.png";
@@ -17,8 +16,6 @@ const props = defineProps<{
 // const selectedNetworkDisplayName = computed(() => ControllerModule.selectedNetworkDisplayName);
 // const showDetails = ref(false);
 
-const { t } = useI18n();
-
 const openExplorerLink = (link: string) => {
   trackUserClick(ActivityPageInteractions.ACTIVITY_DETAIL + link);
   window.open(link, "_blank");
@@ -68,16 +65,16 @@ const amountIsVisible = computed(() => {
         </div>
         <div class="text-left ml-4 break-words overflow-hidden">
           <div v-if="activity.type === 'unknown'" class="text-xs font-medium text-app-text-600 dark:text-app-text-dark-600">
-            {{ t("walletActivity.unknown") }}
+            {{ $t("walletActivity.unknown") }}
           </div>
           <!-- Transfer Instruction -->
           <div v-if="['transfer', 'transferChecked'].includes(activity.type)">
             <div class="text-xs font-medium text-app-text-600 dark:text-app-text-dark-600">
-              {{ activity.send ? t("walletActivity.sent") : t("walletActivity.received") }} {{ " " }} {{ Number(activity.totalAmountString) }}
+              {{ activity.send ? $t("walletActivity.sent") : $t("walletActivity.received") }} {{ " " }} {{ Number(activity.totalAmountString) }}
               {{ activity.cryptoCurrency }}
 
               <span v-if="activity.cryptoCurrency === 'SOL'" class="text-xxs text-app-text-400 dark:text-app-text-dark-600"
-                >{{ activity.send ? t("walletActivity.to") : t("walletActivity.from") }} {{ " " }}</span
+                >{{ activity.send ? $t("walletActivity.to") : $t("walletActivity.from") }} {{ " " }}</span
               >
             </div>
             <div v-if="activity.cryptoCurrency === 'SOL'" class="text-xs text-app-text-400 dark:text-app-text-dark-600 break-words">
@@ -90,7 +87,7 @@ const amountIsVisible = computed(() => {
               Burnt {{ Number(activity.totalAmountString) }} {{ activity.cryptoCurrency }}
 
               <span v-if="activity.cryptoCurrency === 'SOL'" class="text-xxs text-app-text-400 dark:text-app-text-dark-600"
-                >{{ activity.send ? t("walletActivity.to") : t("walletActivity.from") }} {{ " " }}</span
+                >{{ activity.send ? $t("walletActivity.to") : $t("walletActivity.from") }} {{ " " }}</span
               >
             </div>
             <div v-if="activity.cryptoCurrency === 'SOL'" class="text-xs text-app-text-400 dark:text-app-text-dark-600 break-words">
@@ -122,7 +119,7 @@ const amountIsVisible = computed(() => {
     <!-- status -->
     <div class="col-span-4 text-right order-4 flex items-center justify-end sm:col-span-2" :class="{ 'sm:col-span-4': !amountIsVisible }">
       <div class="rounded-xl inline-block bg-green-300 text-xs text-center py-1 px-5" :style="{ backgroundColor: getTxStatusColor(activity.status) }">
-        {{ t(`walletActivity.${activity.status}`) }}
+        {{ $t(`walletActivity.${activity.status}`) }}
       </div>
     </div>
   </div>
diff --git a/src/components/burnNFT/BurnNFT.vue b/src/components/burnNFT/BurnNFT.vue
index 2c4702a9..37aee550 100644
--- a/src/components/burnNFT/BurnNFT.vue
+++ b/src/components/burnNFT/BurnNFT.vue
@@ -2,7 +2,6 @@
 import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from "@headlessui/vue";
 import { NFTInfo } from "@toruslabs/solana-controllers";
 import { ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import FallbackNft from "@/assets/fallback-nft.svg";
 import { Button } from "@/components/common";
@@ -29,8 +28,6 @@ const props = withDefaults(
   }
 );
 
-const { t } = useI18n();
-
 const emits = defineEmits(["transferConfirm", "transferReject", "onCloseModal"]);
 
 const closeModal = () => {
@@ -88,7 +85,7 @@ const refDiv = ref(null);
               </div>
               <div class="flex flex-row items-center my-6 mx-3">
                 <Button class="flex-auto mx-2 w-1/2" :block="true" variant="tertiary" @click="onCancel">
-                  {{ t("walletTransfer.cancel") }}
+                  {{ $t("walletTransfer.cancel") }}
                 </Button>
                 <button
                   type="button"
diff --git a/src/components/common/ComboBox.vue b/src/components/common/ComboBox.vue
index 1b8f11b0..48faf9ae 100644
--- a/src/components/common/ComboBox.vue
+++ b/src/components/common/ComboBox.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ErrorObject } from "@vuelidate/core";
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 type ItemType = { text: string; value: string };
 
@@ -33,8 +32,6 @@ const filteredItems = computed(() => {
   });
 });
 
-const { t } = useI18n();
-
 const setSelectedItem = (item: ItemType) => {
   value.value = item.value;
   isListOpen.value = false;
@@ -51,7 +48,7 @@ const onBlur = () => {
   <div class="flex flex-col">
     <div v-show="filteredItems.length > 0 && isListOpen" class="absolute inset-0 z-0" @click="isListOpen = false" @keydown="isListOpen = false"></div>
 
-    <div class="text-sm mb-1 text-app-text-600 dark:text-app-text-dark-500">{{ t("walletActivity.sendTo") }}</div>
+    <div class="text-sm mb-1 text-app-text-600 dark:text-app-text-dark-500">{{ $t("walletActivity.sendTo") }}</div>
     <input
       v-model="value"
       type="text"
diff --git a/src/components/common/CurrencySelector.vue b/src/components/common/CurrencySelector.vue
index bd472b05..64a49b2c 100644
--- a/src/components/common/CurrencySelector.vue
+++ b/src/components/common/CurrencySelector.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   token: string;
 }>();
 
-const currencies = computed(() => supportedCurrencies(props.token.toUpperCase()));
+const currencies = computed(() => supportedCurrencies());
 const emits = defineEmits(["onChange"]);
 
 const value = computed({
diff --git a/src/components/frame/PopupLoader.vue b/src/components/frame/PopupLoader.vue
index fc2852c9..582fe4cc 100644
--- a/src/components/frame/PopupLoader.vue
+++ b/src/components/frame/PopupLoader.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { Dialog, DialogOverlay, TransitionChild, TransitionRoot } from "@headlessui/vue";
 import { ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import TorusLogoURL from "@/assets/torus-logo.svg";
 import TorusLogoLightURL from "@/assets/torus-logo-light.svg";
+import { i18n } from "@/plugins/i18nPlugin";
 import { getTailwindColor } from "@/utils/tailwindHelper";
 import { isWhiteLabelDark } from "@/utils/whitelabel";
 
 import ControllerModule from "../../modules/controllers";
 import BoxLoader from "../common/BoxLoader.vue";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 const refDiv = ref(null);
 </script>
diff --git a/src/components/frame/PopupLogin.vue b/src/components/frame/PopupLogin.vue
index b5671097..8929f8f6 100755
--- a/src/components/frame/PopupLogin.vue
+++ b/src/components/frame/PopupLogin.vue
@@ -3,7 +3,6 @@ import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } f
 import { XIcon } from "@heroicons/vue/solid";
 import { LOGIN_PROVIDER } from "@toruslabs/openlogin-utils";
 import { ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import TorusLogoURL from "@/assets/torus-logo.svg";
 import TorusLogoLightURL from "@/assets/torus-logo-light.svg";
@@ -25,8 +24,6 @@ withDefaults(
   }
 );
 
-const { t } = useI18n();
-
 const emits = defineEmits(["onClose", "onLogin"]);
 
 const closeModal = () => {
@@ -73,7 +70,7 @@ const refDiv = ref(null);
                   "
                 >
                   <DialogTitle as="div" class="focus-within:outline-none bg-transparent w-full" tabindex="0">
-                    <h1 class="font-bold dark:text-white text-app-text-600 text-2xl mt-8">{{ t("login.setupWallet") }}</h1>
+                    <h1 class="font-bold dark:text-white text-app-text-600 text-2xl mt-8">{{ $t("login.setupWallet") }}</h1>
                     <div
                       class="w-7 h-7 absolute top-3 right-3 cursor-pointer rounded-full bg-opacity-3 dark:bg-white dark:bg-opacity-5 flex items-center justify-center"
                       @click="closeModal"
@@ -82,7 +79,7 @@ const refDiv = ref(null);
                       <XIcon class="w-5 h-5 text-app-gray-800 dark:text-white text-opacity-70 hover:text-opacity-100" />
                     </div>
                   </DialogTitle>
-                  <p class="dark:text-white text-app-text-600 text-opacity-80 font-normal text-sm mt-1 pr-5">{{ t("login.poweredBy") }}</p>
+                  <p class="dark:text-white text-app-text-600 text-opacity-80 font-normal text-sm mt-1 pr-5">{{ $t("login.poweredBy") }}</p>
                 </div>
               </div>
               <div class="mt-8 w-full px-4">
@@ -95,7 +92,7 @@ const refDiv = ref(null);
                 />
               </div>
               <div class="w-full mt-6 mb-12 text-center">
-                <span class="dark:text-white text-app-text-600 text-opacity-70 text-xs font-normal mr-2">{{ t("dappLogin.poweredBy") }}</span>
+                <span class="dark:text-white text-app-text-600 text-opacity-70 text-xs font-normal mr-2">{{ $t("dappLogin.poweredBy") }}</span>
                 <img
                   :src="ControllerModule.isDarkMode ? TorusLogoLightURL : TorusLogoURL"
                   alt="Torus Logo"
@@ -107,7 +104,7 @@ const refDiv = ref(null);
                 class="mt-auto pt-4 pb-6 px-2 w-full border-t-2 border-solid border-white border-opacity-10 text-center"
               >
                 <span class="cursor-pointer text-base dark:text-white text-app-text-600 font-normal hover:text-opacity-80" tabindex="0">{{
-                  t("login.differentWallet")
+                  $t("login.differentWallet")
                 }}</span>
               </div>
             </div>
diff --git a/src/components/frame/PopupWidget.vue b/src/components/frame/PopupWidget.vue
index fc6614f4..3819a546 100755
--- a/src/components/frame/PopupWidget.vue
+++ b/src/components/frame/PopupWidget.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { SolanaTransactionActivity } from "@toruslabs/solana-controllers";
-import { useI18n } from "vue-i18n";
 
 import LoginUrl from "@/assets/login.png";
 import SolanaLogoLight from "@/assets/solana-light.svg";
 import { RoundLoader } from "@/components/common";
+import { i18n } from "@/plugins/i18nPlugin";
 import { getWhiteLabelLogoLight } from "@/utils/whitelabel";
 
 import PopupWidgetPanel from "./PopupWidgetPanel.vue";
@@ -16,7 +16,7 @@ defineProps<{
   buttonPosition: string;
   lastTransaction: SolanaTransactionActivity;
 }>();
-const { t } = useI18n();
+const { t } = i18n.global;
 const emits = defineEmits(["closePanel", "togglePanel", "showLoginModal", "showWallet"]);
 const closePanel = () => {
   emits("closePanel");
diff --git a/src/components/frame/PopupWidgetPanel.vue b/src/components/frame/PopupWidgetPanel.vue
index e7563e39..2d9e437d 100644
--- a/src/components/frame/PopupWidgetPanel.vue
+++ b/src/components/frame/PopupWidgetPanel.vue
@@ -8,16 +8,17 @@ import { GoogleIcon } from "@toruslabs/vue-icons/auth";
 import { PlusIcon } from "@toruslabs/vue-icons/basic";
 import { CreditcardFaceIcon } from "@toruslabs/vue-icons/finance";
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
+import { VueI18nTranslation } from "vue-i18n";
 
 import SolanaLogo from "@/assets/solana-dark.svg";
 import SolanaLogoLight from "@/assets/solana-light.svg";
 import solicon from "@/assets/solana-logo-light.svg";
 import { Button } from "@/components/common";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { getWhiteLabelLogoDark, getWhiteLabelLogoLight, isTopupHidden } from "@/utils/whitelabel";
 
-const { t } = useI18n();
+const t = i18n.global.t as VueI18nTranslation;
 const selectedNetworkDisplayName = computed(() => ControllerModule.selectedNetworkDisplayName);
 const selectedPublicKey = computed(() => ControllerModule.selectedAddress);
 const formattedBalance = computed(() => ControllerModule.totalBalance);
diff --git a/src/components/home/AddressAndScan.vue b/src/components/home/AddressAndScan.vue
index 80ea75be..56ba4287 100644
--- a/src/components/home/AddressAndScan.vue
+++ b/src/components/home/AddressAndScan.vue
@@ -4,7 +4,6 @@ import { addressSlicer } from "@toruslabs/base-controllers";
 import { ScanIcon } from "@toruslabs/vue-icons/basic";
 import log from "loglevel";
 import { ref } from "vue";
-import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 
 import WalletIcon from "@/assets/wallet.svg";
@@ -14,7 +13,6 @@ import { copyText } from "@/utils/helpers";
 
 import QrcodeDisplay from "./QrcodeDisplay.vue";
 
-const { t } = useI18n();
 const router = useRouter();
 defineProps<{
   selectedAddress: string;
@@ -55,7 +53,7 @@ const closeQr = () => {
       @keydown="router.push('/wallet/pay')"
     >
       <ScanIcon class="w-4 h-4 mr-2" />
-      <span class="text-app-text-500 text-xs font-bold"> {{ t("walletHome.scanAndPay") }}</span>
+      <span class="text-app-text-500 text-xs font-bold"> {{ $t("walletHome.scanAndPay") }}</span>
     </div>
     <QrcodeDisplay
       v-if="displayQr"
diff --git a/src/components/home/ImportToken.vue b/src/components/home/ImportToken.vue
index 2cd9017e..acd025a9 100644
--- a/src/components/home/ImportToken.vue
+++ b/src/components/home/ImportToken.vue
@@ -5,7 +5,6 @@ import { useVuelidate } from "@vuelidate/core";
 import { helpers, required } from "@vuelidate/validators";
 import log from "loglevel";
 import { reactive, ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import { Button, TextField } from "@/components/common";
 import ControllerModule from "@/modules/controllers";
@@ -25,8 +24,6 @@ const props = withDefaults(
   }
 );
 
-const { t } = useI18n();
-
 const emits = defineEmits(["importConfirm", "importCanceled", "onCloseModal"]);
 
 const closeModal = () => {
@@ -75,7 +72,7 @@ function setImportTokenState(contractAddress: string, name: string, symbol: stri
 
 function resetState() {
   setImportTokenState("", "", "", true);
-  $v.value.$reset();
+  $v.value.$rese$t();
 }
 
 const onCancel = () => {
@@ -136,10 +133,10 @@ const refDiv = ref(null);
               </form>
               <div class="flex flex-row items-center my-6 mx-3">
                 <Button class="flex-auto mx-2 w-1/2" :block="true" variant="tertiary" @click="onCancel">
-                  {{ t("walletTransfer.cancel") }}
+                  {{ $t("walletTransfer.cancel") }}
                 </Button>
                 <Button class="flex-auto mx-2 w-1/2" :disabled="$v.$invalid || importDisabled" :block="true" variant="primary" @click="onImport">
-                  {{ t("walletTransfer.confirm") }}
+                  {{ $t("walletTransfer.confirm") }}
                 </Button>
               </div>
             </div>
diff --git a/src/components/home/SplCard.vue b/src/components/home/SplCard.vue
index 348fbb78..b613730f 100644
--- a/src/components/home/SplCard.vue
+++ b/src/components/home/SplCard.vue
@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import { significantDigits } from "@toruslabs/base-controllers";
 import { computed } from "vue";
-import { useI18n } from "vue-i18n";
 
 import SolanaLogoDark from "@/assets/solana-logo-shaded.png";
 import SolanaLogoLight from "@/assets/solana-logo-shaded-light.png";
 import ControllerModule from "@/modules/controllers";
 import { SolAndSplToken } from "@/utils/interfaces";
 
-const { t } = useI18n();
-
 const currency = computed(() => ControllerModule.torus.currentCurrency?.toLocaleLowerCase());
 
 function getUiTokenValue(perTokenPrice: number, tokenAmount: number, subStringLength = 5): number {
@@ -61,7 +58,7 @@ function splClicked() {
         {{ (currency === "sol" ? "usd" : currency).toUpperCase() }}
       </p>
       <p v-if="!hasGeckoPrice">
-        {{ t("homeToken.noRate") }}
+        {{ $t("homeToken.noRate") }}
       </p>
       <p v-if="hasGeckoPrice">
         ~{{
diff --git a/src/components/login/LoginButtons.vue b/src/components/login/LoginButtons.vue
index 5f411cfd..2d71c718 100644
--- a/src/components/login/LoginButtons.vue
+++ b/src/components/login/LoginButtons.vue
@@ -18,7 +18,6 @@ import {
 import { useVuelidate } from "@vuelidate/core";
 import { email, required } from "@vuelidate/validators";
 import { computed, ref, RenderFunction } from "vue";
-import { useI18n } from "vue-i18n";
 
 import {
   ActiveAppleIcon,
@@ -34,11 +33,12 @@ import {
   ActiveTwitterIcon,
   ActiveWechatIcon,
 } from "@/assets/auth";
+import { i18n } from "@/plugins/i18nPlugin";
 import { LOGIN_CONFIG } from "@/utils/enums";
 
 import { TextField } from "../common";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 const iconList: Record<string, { default: RenderFunction; active: string }> = {
   google: {
     default: GoogleIcon,
diff --git a/src/components/login/LoginFooter.vue b/src/components/login/LoginFooter.vue
index 6f54bd50..68e61e8d 100644
--- a/src/components/login/LoginFooter.vue
+++ b/src/components/login/LoginFooter.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
+import { i18n } from "@/plugins/i18nPlugin";
 
 withDefaults(
   defineProps<{
@@ -11,7 +11,7 @@ withDefaults(
     isEmbed: false,
   }
 );
-const { t } = useI18n();
+const { t } = i18n.global;
 </script>
 
 <template>
diff --git a/src/components/login/LoginTitle.vue b/src/components/login/LoginTitle.vue
index 7d8db237..39f3dfcf 100644
--- a/src/components/login/LoginTitle.vue
+++ b/src/components/login/LoginTitle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { LOGIN_PROVIDER } from "@toruslabs/openlogin-utils";
-import { useI18n } from "vue-i18n";
 
+import { i18n } from "@/plugins/i18nPlugin";
 import { LOGIN_CONFIG } from "@/utils/enums";
 
 withDefaults(
@@ -14,7 +14,7 @@ withDefaults(
   }
 );
 
-const { t } = useI18n();
+const { t } = i18n.global;
 </script>
 
 <template>
diff --git a/src/components/loginFooter/LoginFooter.vue b/src/components/loginFooter/LoginFooter.vue
index 354703df..b3c3d1fc 100644
--- a/src/components/loginFooter/LoginFooter.vue
+++ b/src/components/loginFooter/LoginFooter.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
+import { VueI18nTranslation } from "vue-i18n";
 
 import Web3AuthLogo from "@/assets/web3auth.svg";
+import { i18n } from "@/plugins/i18nPlugin";
 
-const { t } = useI18n();
+const t = i18n.global.t as VueI18nTranslation;
 
 const footerSupportLinks = [
   { href: "https://docs.tor.us/legal/terms-and-conditions", translateText: "dappLogin.termsConditions" },
diff --git a/src/components/loginSlider/LoginSlider.vue b/src/components/loginSlider/LoginSlider.vue
index e01d4625..dc81bf33 100644
--- a/src/components/loginSlider/LoginSlider.vue
+++ b/src/components/loginSlider/LoginSlider.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
-import { useI18n } from "vue-i18n";
+
+import { i18n } from "@/plugins/i18nPlugin";
 
 const props = withDefaults(
   defineProps<{
@@ -10,7 +11,7 @@ const props = withDefaults(
     isDark: true,
   }
 );
-const { t } = useI18n();
+const { t } = i18n.global;
 
 const isDark = computed(() => {
   return props.isDark;
diff --git a/src/components/nav/AccountMenu.vue b/src/components/nav/AccountMenu.vue
index dca16841..c4908c88 100755
--- a/src/components/nav/AccountMenu.vue
+++ b/src/components/nav/AccountMenu.vue
@@ -2,19 +2,17 @@
 import { Menu, MenuButton, MenuItems } from "@headlessui/vue";
 import { UserInfo } from "@toruslabs/base-controllers";
 import { ChevronBottomIcon } from "@toruslabs/vue-icons/arrows";
-import { useI18n } from "vue-i18n";
 
 defineProps<{
   user: UserInfo;
 }>();
-const { t } = useI18n();
 </script>
 
 <template>
   <Menu as="div" class="ml-3 relative z-50">
     <div>
       <MenuButton class="max-w-xs flex items-center text-sm outline-focus" tabindex="0">
-        <span class="sr-only">{{ t("navBar.userMenu") }}</span>
+        <span class="sr-only">{{ $t("navBar.userMenu") }}</span>
         <div class="flex items-center">
           <span class="text-app-text-600 dark:text-app-text-dark-500 text-sm font-bold mr-1">{{ user?.name }}</span>
           <ChevronBottomIcon class="text-app-text-600 dark:text-app-text-dark-500 w-4" />
diff --git a/src/components/nav/AccountMenuList.vue b/src/components/nav/AccountMenuList.vue
index a987403a..0a4eecf4 100755
--- a/src/components/nav/AccountMenuList.vue
+++ b/src/components/nav/AccountMenuList.vue
@@ -8,18 +8,18 @@ import { CopyIcon, ExternalLinkIcon } from "@toruslabs/vue-icons/basic";
 import { WalletIcon } from "@toruslabs/vue-icons/finance";
 import BigNumber from "bignumber.js";
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import solicon from "@/assets/solana-logo-light.svg";
 import { Button } from "@/components/common";
 import { GeneralInteractions, trackUserClick } from "@/directives/google-analytics";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { copyText } from "@/utils/helpers";
 
 import QrcodeDisplay from "../home/QrcodeDisplay.vue";
 import LanguageSelector from "./LanguageSelector.vue";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 defineProps<{
   user: UserInfo;
   selectedAddress: string;
diff --git a/src/components/payments/EstimateChanges.vue b/src/components/payments/EstimateChanges.vue
index e481cca1..7c8edc02 100644
--- a/src/components/payments/EstimateChanges.vue
+++ b/src/components/payments/EstimateChanges.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import log from "loglevel";
 import { ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
 
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { AccountEstimation } from "@/utils/interfaces";
 
 const props = defineProps<{
@@ -37,7 +37,7 @@ watch(
   { immediate: true, deep: true }
 );
 
-const { t } = useI18n();
+const { t } = i18n.global;
 </script>
 <template>
   <div class="flex w-full">
diff --git a/src/components/payments/PaymentConfirm.vue b/src/components/payments/PaymentConfirm.vue
index 57a8a453..dea94874 100644
--- a/src/components/payments/PaymentConfirm.vue
+++ b/src/components/payments/PaymentConfirm.vue
@@ -3,12 +3,12 @@ import { addressSlicer, significantDigits } from "@toruslabs/base-controllers";
 import { ExternalLinkIcon } from "@toruslabs/vue-icons/basic";
 import { BigNumber } from "bignumber.js";
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import QuestionMark from "@/assets/question-circle.svg";
 import SolanaLogoURL from "@/assets/solana-mascot.svg";
 import { Button, NetworkDisplay } from "@/components/common";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { DecodedDataType } from "@/utils/instructionDecoder";
 import { AccountEstimation } from "@/utils/interfaces";
 import { getWhiteLabelLogoDark, getWhiteLabelLogoLight } from "@/utils/whitelabel";
@@ -16,7 +16,7 @@ import { getWhiteLabelLogoDark, getWhiteLabelLogoLight } from "@/utils/whitelabe
 import EstimateChanges from "./EstimateChanges.vue";
 import InstructionDisplay from "./InstructionDisplay.vue";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/components/permissions/Permissions.vue b/src/components/permissions/Permissions.vue
index bf529046..2699fba2 100644
--- a/src/components/permissions/Permissions.vue
+++ b/src/components/permissions/Permissions.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { CheckCircleIcon } from "@heroicons/vue/solid";
-import { useI18n } from "vue-i18n";
 
 import GoToLinkLogo from "@/assets/go-to-link.svg";
 import SolanaLogoURL from "@/assets/solana-mascot.svg";
 import { Button } from "@/components/common";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { getDomainFromUrl } from "@/utils/helpers";
 import { getWhiteLabelLogoDark, getWhiteLabelLogoLight } from "@/utils/whitelabel";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 const props = withDefaults(
   defineProps<{
     requestedFrom: string;
diff --git a/src/components/permissionsTx/PermissionsTx.vue b/src/components/permissionsTx/PermissionsTx.vue
index f5eb77b8..b769c345 100644
--- a/src/components/permissionsTx/PermissionsTx.vue
+++ b/src/components/permissionsTx/PermissionsTx.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { CheckCircleIcon } from "@heroicons/vue/solid";
 import { ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import GoToLinkLogo from "@/assets/go-to-link.svg";
 import SolanaLogoURL from "@/assets/solana-mascot.svg";
 import { Button } from "@/components/common";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { getDomainFromUrl } from "@/utils/helpers";
 import { DecodedDataType } from "@/utils/instructionDecoder";
 import { AccountEstimation } from "@/utils/interfaces";
@@ -16,7 +16,7 @@ import NetworkDisplay from "../common/NetworkDisplay.vue";
 import EstimateChanges from "../payments/EstimateChanges.vue";
 import InstructionDisplay from "../payments/InstructionDisplay.vue";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 const props = withDefaults(
   defineProps<{
     logoUrl?: string;
diff --git a/src/components/providerChange/ProviderChange.vue b/src/components/providerChange/ProviderChange.vue
index 62cfeba3..0ccd71db 100644
--- a/src/components/providerChange/ProviderChange.vue
+++ b/src/components/providerChange/ProviderChange.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
-
 import SolanaLogoURL from "@/assets/solana-mascot.svg";
 import { Button, TextField } from "@/components/common";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { getWhiteLabelLogoDark, getWhiteLabelLogoLight } from "@/utils/whitelabel";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 defineProps<{
   origin: string;
diff --git a/src/components/settings/AccountDetails.vue b/src/components/settings/AccountDetails.vue
index f153d658..15ff16ea 100644
--- a/src/components/settings/AccountDetails.vue
+++ b/src/components/settings/AccountDetails.vue
@@ -3,14 +3,12 @@ import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } f
 import { CopyIcon, EyeIcon, EyeNoIcon } from "@toruslabs/vue-icons/basic";
 import { KeyIcon } from "@toruslabs/vue-icons/security";
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import { Button } from "@/components/common";
 import { SettingsPageInteractions, trackUserClick } from "@/directives/google-analytics";
 import ControllerModule from "@/modules/controllers";
 import { copyText } from "@/utils/helpers";
 
-const { t } = useI18n();
 const isOpen = ref(false);
 const isKeyShown = ref(false);
 const key = computed(() => ControllerModule.torus.privateKey);
@@ -35,7 +33,7 @@ const refDiv = ref(null);
     @keydown="openModal"
   >
     <KeyIcon class="w-5 h-5 mr-5" />
-    <div>{{ t("walletSettings.accountDetails") }}</div>
+    <div>{{ $t("walletSettings.accountDetails") }}</div>
   </div>
   <TransitionRoot appear :show="isOpen" as="template">
     <Dialog :open="isOpen" :class="{ dark: ControllerModule.isDarkMode }" as="div" :initial-focus="refDiv" @close="closeModal">
@@ -62,12 +60,12 @@ const refDiv = ref(null);
                 as="h3"
                 class="text-lg font-bold leading-6 text-app-text-500 dark:text-app-text-dark-400 focus-within:outline-none"
                 tabindex="0"
-                >{{ t("walletSettings.privateKey") }}</DialogTitle
+                >{{ $t("walletSettings.privateKey") }}</DialogTitle
               >
               <div class="mt-5 flex items-center">
                 <div class="flex items-center text-app-text-400 dark:text-app-text-dark-500">
                   <KeyIcon class="w-5 h-5 mr-3" />
-                  <div class="font-medium">{{ t("walletSettings.showPrivateKey") }}</div>
+                  <div class="font-medium">{{ $t("walletSettings.showPrivateKey") }}</div>
                 </div>
                 <div class="ml-auto">
                   <Button variant="text" @click="isKeyShown = !isKeyShown">
@@ -80,12 +78,12 @@ const refDiv = ref(null);
                 <div class="text-xs text-app-text-500 dark:text-app-text-dark-600 mr-2 priv-key">{{ key }}</div>
                 <Button variant="text" @click="copyPrivKey()">
                   <CopyIcon class="w-4 h-4 mr-1" />
-                  {{ t("walletSettings.clickCopy") }}
+                  {{ $t("walletSettings.clickCopy") }}
                 </Button>
               </div>
 
               <div class="mt-8">
-                <Button class="ml-auto" variant="tertiary" @click="closeModal">{{ t("walletSettings.close") }}</Button>
+                <Button class="ml-auto" variant="tertiary" @click="closeModal">{{ $t("walletSettings.close") }}</Button>
               </div>
             </div>
           </TransitionChild>
diff --git a/src/components/settings/AccountManagement.vue b/src/components/settings/AccountManagement.vue
index ccfcfda2..b58a2d2e 100644
--- a/src/components/settings/AccountManagement.vue
+++ b/src/components/settings/AccountManagement.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { GithubIcon } from "@toruslabs/vue-icons/symbols";
-import { useI18n } from "vue-i18n";
 
 import { Button } from "@/components/common";
+import { i18n } from "@/plugins/i18nPlugin";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 const accounts = [
   {
diff --git a/src/components/settings/AddressBook.vue b/src/components/settings/AddressBook.vue
index e55585b8..9e212287 100644
--- a/src/components/settings/AddressBook.vue
+++ b/src/components/settings/AddressBook.vue
@@ -6,13 +6,13 @@ import { useVuelidate } from "@vuelidate/core";
 import { helpers, required } from "@vuelidate/validators";
 import { debounce } from "lodash-es";
 import { computed, reactive, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
 
 import { Button, SelectField, TextField } from "@/components/common";
+import { i18n } from "@/plugins/i18nPlugin";
 import { ALLOWED_VERIFIERS, ALLOWED_VERIFIERS_ERRORS, TransferType } from "@/utils/enums";
 import { ruleVerifierId } from "@/utils/solanaHelpers";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 const searchFilter = ref("");
 const typeFilter = ref<TransferType>();
 
diff --git a/src/components/settings/CrashReporting.vue b/src/components/settings/CrashReporting.vue
index 12a71ec8..378fb9fc 100644
--- a/src/components/settings/CrashReporting.vue
+++ b/src/components/settings/CrashReporting.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Switch } from "@headlessui/vue";
 import { computed } from "vue";
-import { useI18n } from "vue-i18n";
 
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 const enabled = computed(() => ControllerModule.crashReport);
 </script>
 <template>
diff --git a/src/components/settings/Display.vue b/src/components/settings/Display.vue
index 05544287..66f613a3 100644
--- a/src/components/settings/Display.vue
+++ b/src/components/settings/Display.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
-
 import { Button } from "@/components/common";
 import { SettingsPageInteractions } from "@/directives/google-analytics";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 </script>
 <template>
   <div class="pb-4">
diff --git a/src/components/settings/Language.vue b/src/components/settings/Language.vue
index 2d319e34..d0136631 100644
--- a/src/components/settings/Language.vue
+++ b/src/components/settings/Language.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { useI18n } from "vue-i18n";
 
 import { SelectField } from "@/components/common";
 import { SettingsPageInteractions, trackUserClick } from "@/directives/google-analytics";
@@ -8,8 +7,6 @@ import ControllerModule from "@/modules/controllers";
 import { i18n, setLocale } from "@/plugins/i18nPlugin";
 import { LOCALES } from "@/utils/enums";
 
-const { t } = useI18n();
-
 const selectedLanguage = computed({
   get: () => LOCALES.find((x) => x.value === i18n.global.locale) || LOCALES[0],
   set: (value) => {
@@ -24,7 +21,7 @@ const selectedLanguage = computed({
 <template>
   <div class="pb-4">
     <div class="mb-4">
-      <SelectField v-if="selectedLanguage" v-model="selectedLanguage" :label="t('walletSettings.language')" :items="LOCALES" />
+      <SelectField v-if="selectedLanguage" v-model="selectedLanguage" :label="$t('walletSettings.language')" :items="LOCALES" />
     </div>
   </div>
 </template>
diff --git a/src/components/settings/Network.vue b/src/components/settings/Network.vue
index 5e235a21..dc7704ec 100644
--- a/src/components/settings/Network.vue
+++ b/src/components/settings/Network.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { computed, watch } from "vue";
-import { useI18n } from "vue-i18n";
 
 import { SelectField } from "@/components/common";
 import { SettingsPageInteractions, trackUserClick } from "@/directives/google-analytics";
 import { addToast } from "@/modules/app";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 
 import { WALLET_SUPPORTED_NETWORKS } from "../../utils/const";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 const networks = Object.keys(WALLET_SUPPORTED_NETWORKS).map((key) => {
   const value = WALLET_SUPPORTED_NETWORKS[key as keyof typeof WALLET_SUPPORTED_NETWORKS];
   return {
diff --git a/src/components/topup/gateways/BaseTopup.vue b/src/components/topup/gateways/BaseTopup.vue
index f98f2e02..d666aded 100644
--- a/src/components/topup/gateways/BaseTopup.vue
+++ b/src/components/topup/gateways/BaseTopup.vue
@@ -4,17 +4,17 @@ import { useVuelidate } from "@vuelidate/core";
 import { throttle } from "lodash-es";
 import log from "loglevel";
 import { computed, onBeforeMount, onMounted, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
 
 import { Button, RoundLoader, SelectField, TextField } from "@/components/common";
 import { addToast } from "@/modules/app";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { TopUpProvider } from "@/plugins/Topup/interface";
 import { isTopupHidden } from "@/utils/whitelabel";
 
 import { QuoteResponse, RequestObject } from "./types";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 const props = defineProps<{
   selectedProvider: TopUpProvider;
diff --git a/src/components/transfer/PreviewNFT.vue b/src/components/transfer/PreviewNFT.vue
index d2e806db..512df18a 100644
--- a/src/components/transfer/PreviewNFT.vue
+++ b/src/components/transfer/PreviewNFT.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { NFTInfo } from "@toruslabs/solana-controllers";
-import { useI18n } from "vue-i18n";
+import { VueI18nTranslation } from "vue-i18n";
+
+import { i18n } from "@/plugins/i18nPlugin";
 
 const props = withDefaults(
   defineProps<{
@@ -9,7 +11,7 @@ const props = withDefaults(
   }>(),
   {}
 );
-const { t } = useI18n();
+const t = i18n.global.t as VueI18nTranslation;
 </script>
 <template>
   <div class="flex flex-col justify-center items-start h-full w-full ml-6">
diff --git a/src/components/transfer/TransferConfirm.vue b/src/components/transfer/TransferConfirm.vue
index 4e1754a5..609c1825 100644
--- a/src/components/transfer/TransferConfirm.vue
+++ b/src/components/transfer/TransferConfirm.vue
@@ -4,17 +4,17 @@ import { addressSlicer, significantDigits } from "@toruslabs/base-controllers";
 import { WiFiIcon } from "@toruslabs/vue-icons/connection";
 import { BigNumber } from "bignumber.js";
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import SolanaLogoURL from "@/assets/solana-mascot.svg";
 import { Button } from "@/components/common";
 import { tokens } from "@/components/transfer/token-helper";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { AccountEstimation, SolAndSplToken } from "@/utils/interfaces";
 
 import EstimateChanges from "../payments/EstimateChanges.vue";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 const currency = computed(() => ControllerModule.torus.currentCurrency);
 
 const props = withDefaults(
diff --git a/src/components/transfer/TransferNFT.vue b/src/components/transfer/TransferNFT.vue
index 83794025..4b60f77e 100644
--- a/src/components/transfer/TransferNFT.vue
+++ b/src/components/transfer/TransferNFT.vue
@@ -6,11 +6,11 @@ import { getChainIdToNetwork } from "@toruslabs/solana-controllers";
 import { ExternalLinkIcon } from "@toruslabs/vue-icons/basic";
 import BigNumber from "bignumber.js";
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import FallbackNft from "@/assets/nft.png";
 import { Button } from "@/components/common";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { getImgProxyUrl, setFallbackImg } from "@/utils/helpers";
 import { AccountEstimation, SolAndSplToken } from "@/utils/interfaces";
 
@@ -47,7 +47,7 @@ const props = withDefaults(
   }
 );
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 const currency = computed(() => ControllerModule.torus.currentCurrency);
 const pricePerToken = computed<number>((): number => {
diff --git a/src/components/transfer/TransferSPL.vue b/src/components/transfer/TransferSPL.vue
index c3737d52..6ca8186a 100644
--- a/src/components/transfer/TransferSPL.vue
+++ b/src/components/transfer/TransferSPL.vue
@@ -6,11 +6,12 @@ import { getChainIdToNetwork } from "@toruslabs/solana-controllers";
 import { ExternalLinkIcon } from "@toruslabs/vue-icons/basic";
 import BigNumber from "bignumber.js";
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
+import { VueI18nTranslation } from "vue-i18n";
 
 import FallbackSPL from "@/assets/solana-mascot.svg";
 import { Button } from "@/components/common";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { setFallbackImg } from "@/utils/helpers";
 import { AccountEstimation, SolAndSplToken } from "@/utils/interfaces";
 
@@ -47,7 +48,7 @@ const props = withDefaults(
   }
 );
 
-const { t } = useI18n();
+const t = i18n.global.t as VueI18nTranslation;
 
 const currency = computed(() => ControllerModule.torus.currentCurrency);
 const pricePerToken = computed<number>((): number => {
diff --git a/src/components/transfer/TransferTokenSelect.vue b/src/components/transfer/TransferTokenSelect.vue
index a3c0c0f8..e304f495 100644
--- a/src/components/transfer/TransferTokenSelect.vue
+++ b/src/components/transfer/TransferTokenSelect.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions } from "@headlessui/vue";
 import { ChevronBottomIcon } from "@toruslabs/vue-icons/arrows";
-import { computed, watch } from "vue";
-import { useI18n } from "vue-i18n";
+import { computed } from "vue";
 
 import FallbackNft from "@/assets/nft.png";
 import NftLogo from "@/assets/nft_token.svg";
 import SolTokenLogo from "@/assets/sol_token.svg";
 import solicon from "@/assets/solana-mascot.svg";
+import { i18n } from "@/plugins/i18nPlugin";
 import { setFallbackImg } from "@/utils/helpers";
 import { SolAndSplToken } from "@/utils/interfaces";
 import { getClubbedNfts } from "@/utils/solanaHelpers";
@@ -24,16 +24,17 @@ const props = withDefaults(
     selectedToken: tokens.value[0],
   }
 );
-const { t } = useI18n();
-const localToken = computed(() => props.selectedToken);
+const { t } = i18n.global;
 const emits = defineEmits(["update:selectedToken"]);
-
-watch(localToken, () => {
-  emits("update:selectedToken", localToken.value);
+const value = computed({
+  get: () => {
+    return props.selectedToken;
+  },
+  set: (val) => emits("update:selectedToken", val),
 });
 </script>
 <template>
-  <Listbox v-model="localToken" as="div">
+  <Listbox v-model="value" as="div">
     <ListboxLabel class="text-sm text-app-text-600 dark:text-app-text-dark-500">{{ t("walletTransfer.selectItem") }}</ListboxLabel>
     <div class="mt-1 relative">
       <ListboxButton class="bg-white dark:bg-app-gray-800 select-container shadow-inner dark:shadow-none rounded-md w-full px-3">
diff --git a/src/modules/controllers.ts b/src/modules/controllers.ts
index 776dee7b..2dd18e22 100644
--- a/src/modules/controllers.ts
+++ b/src/modules/controllers.ts
@@ -29,11 +29,13 @@ import { ExtendedAddressPreferences, LoadingState, NFTInfo, SolanaToken, SolanaT
 import { BigNumber } from "bignumber.js";
 import { cloneDeep, merge, omit } from "lodash-es";
 import log from "loglevel";
-import { useI18n } from "vue-i18n";
+import { VueI18nTranslation } from "vue-i18n";
+// import { i18n } from "@/plugins/i18nPlugin";
 import { Action, getModule, Module, Mutation, VuexModule } from "vuex-module-decorators";
 
 import OpenLoginFactory from "@/auth/OpenLogin";
 import TorusController, { DEFAULT_CONFIG, DEFAULT_STATE, EPHERMAL_KEY } from "@/controllers/TorusController";
+import { i18n } from "@/plugins/i18nPlugin";
 import installStorePlugin from "@/plugins/persistPlugin";
 import { WALLET_SUPPORTED_NETWORKS } from "@/utils/const";
 import { CONTROLLER_MODULE_KEY, LOCAL_STORAGE_KEY, TorusControllerState } from "@/utils/enums";
@@ -288,7 +290,7 @@ class ControllerModule extends VuexModule {
 
   @Action
   public async setCrashReport(status: boolean): Promise<void> {
-    const { t } = useI18n({ useScope: "global" });
+    const t = i18n.global.t as VueI18nTranslation;
     const isSet = await this.torus.setCrashReport(status);
     if (isSet) {
       if (storageAvailable("localStorage")) {
@@ -340,7 +342,8 @@ class ControllerModule extends VuexModule {
 
   @Action
   public async addContact(contactPayload: ContactPayload): Promise<void> {
-    const { t } = useI18n({ useScope: "global" });
+    const t = i18n.global.t as VueI18nTranslation;
+    // const { t } = useI18n({ useScope: "global" });
     const isDeleted = await this.torus.addContact(contactPayload);
     if (isDeleted) {
       this.handleSuccess(t(NAVBAR_MESSAGES.success.ADD_CONTACT_SUCCESS));
@@ -351,7 +354,8 @@ class ControllerModule extends VuexModule {
 
   @Action
   public async deleteContact(contactId: number): Promise<void> {
-    const { t } = useI18n({ useScope: "global" });
+    const t = i18n.global.t as VueI18nTranslation;
+    // const { t } = useI18n({ useScope: "global" });
     const isDeleted = await this.torus.deleteContact(contactId);
     if (isDeleted) {
       this.handleSuccess(t(NAVBAR_MESSAGES.success.DELETE_CONTACT_SUCCESS));
@@ -381,7 +385,7 @@ class ControllerModule extends VuexModule {
 
   @Action
   public async setCurrency(currency: string): Promise<void> {
-    const { t } = useI18n({ useScope: "global" });
+    const t = i18n.global.t as VueI18nTranslation;
     const isSet = await this.torus.setDefaultCurrency(currency);
     if (isSet) {
       this.handleSuccess(t(NAVBAR_MESSAGES.success.SET_CURRENCY_SUCCESS));
@@ -392,7 +396,7 @@ class ControllerModule extends VuexModule {
 
   @Action
   public async setLocale(locale: string): Promise<void> {
-    const { t } = useI18n({ useScope: "global" });
+    const t = i18n.global.t as VueI18nTranslation;
     const isSet = await this.torus.setLocale(locale);
     if (isSet) {
       this.handleSuccess(t(NAVBAR_MESSAGES.success.SET_LOCALE_SUCCESS));
@@ -504,7 +508,7 @@ class ControllerModule extends VuexModule {
       const openLoginInstance = await OpenLoginFactory.getInstance();
       // if (openLoginInstance.state.support3PC) {
 
-      openLoginInstance.logout();
+      await openLoginInstance.logout();
     } catch (error) {
       log.warn(error, "unable to logout with openlogin");
     }
diff --git a/src/pages/End.vue b/src/pages/End.vue
index d610792a..a618616f 100644
--- a/src/pages/End.vue
+++ b/src/pages/End.vue
@@ -10,16 +10,16 @@ import { Button, Loader } from "@toruslabs/vue-components/common";
 import base58 from "bs58";
 import log from "loglevel";
 import { onErrorCaptured, ref } from "vue";
-import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 
 import config from "@/config";
+import { i18n } from "@/plugins/i18nPlugin";
 import { generateTorusAuthHeaders, openCrispChat } from "@/utils/helpers";
 
 import OpenLoginFactory from "../auth/OpenLogin";
 import { APPLE, OpenLoginPopupResponse, ProjectAccountType } from "../utils/enums";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 const loading = ref(true);
 const selectedAccountIndex = ref(0);
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index e6f054c1..1a021f33 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -6,7 +6,6 @@ import { email, required } from "@vuelidate/validators";
 import { throttle } from "lodash-es";
 import log from "loglevel";
 import { computed, onMounted, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 
 import DiscordLoginImage from "@/assets/auth/login-discord.svg";
@@ -18,6 +17,7 @@ import LoginFooter from "@/components/loginFooter/LoginFooter.vue";
 import LoginSlider from "@/components/loginSlider/LoginSlider.vue";
 import { LoginInteractions } from "@/directives/google-analytics";
 import { addToast, app } from "@/modules/app";
+import { i18n } from "@/plugins/i18nPlugin";
 import { AVAILABLE_WEBSITES } from "@/utils/enums";
 import { isWhiteLabelDark } from "@/utils/whitelabel";
 
@@ -72,7 +72,7 @@ const listOfChains = ref<{ value: string; label: string; img?: string; link?: st
 ]);
 const selectedChain = ref(listOfChains.value[0]);
 
-const { t } = useI18n();
+const { t } = i18n.global;
 const router = useRouter();
 const userEmail = ref("");
 const isLoading = ref(false);
@@ -186,7 +186,7 @@ watch(
                       :alt="loginButton.imgAltText"
                     />
                     <template v-if="loginButton.buttonLoginText">
-                      {{ t(loginButton.translateLoginText, { verifier: loginButton.verifier }) }}
+                      {{ $t(loginButton.translateLoginText, { verifier: loginButton.verifier }) }}
                     </template>
                   </Button>
                 </div>
@@ -206,7 +206,7 @@ watch(
                   v-model.lazy="userEmail"
                   variant="dark-bg"
                   class="mb-3 dark:text-app-text-dark-500 dark:bg-app-loginBg"
-                  :placeholder="t('login.enterYourEmail')"
+                  :placeholder="$t('login.enterYourEmail')"
                   :errors="$v.userEmail.$errors"
                 />
                 <Button
@@ -215,7 +215,7 @@ watch(
                   :block="true"
                   type="submit"
                   class="w-full mt-2 dark:text-app-gray-400 dark:bg-app-loginBg"
-                  >{{ t("dappLogin.continue", { verifier: t("loginCountry.email") }) }}
+                  >{{ $t("dappLogin.continue", { verifier: $t("loginCountry.email") }) }}
                 </Button>
               </form>
             </div>
@@ -238,7 +238,7 @@ watch(
     </div>
     <div v-if="isLoading" class="flex justify-center items-center fixed bg-white dark:bg-app-gray-800 inset-0 h-full w-full z-10">
       <Loader :use-spinner="true" :is-dark="isWhiteLabelDark()" />
-      <p class="absolute bottom-12 text-white text-center">{{ t("dappLogin.completeVerification") }}.</p>
+      <p class="absolute bottom-12 text-white text-center">{{ $t("dappLogin.completeVerification") }}.</p>
     </div>
   </div>
 </template>
diff --git a/src/pages/Logout.vue b/src/pages/Logout.vue
index 394d4b78..b72632f4 100644
--- a/src/pages/Logout.vue
+++ b/src/pages/Logout.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { useI18n } from "vue-i18n";
 
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 
 import { redirectToResult, useRedirectFlow } from "../utils/redirectflowHelpers";
 
 const { isRedirectFlow, method, resolveRoute, req_id, jsonrpc } = useRedirectFlow();
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 onMounted(async () => {
   await ControllerModule.logout();
diff --git a/src/pages/wallet/Activity.vue b/src/pages/wallet/Activity.vue
index 8cb7ac7e..f18bc0d8 100644
--- a/src/pages/wallet/Activity.vue
+++ b/src/pages/wallet/Activity.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
 
 import ActivityItem from "@/components/activity/ActivityItem.vue";
 import { SelectField } from "@/components/common";
 import { ActivityPageInteractions, trackUserClick } from "@/directives/google-analytics";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 
 const ACTIVITY_ACTION_ALL = "walletActivity.allTransactions";
 const ACTIVITY_ACTION_SEND = "walletActivity.send";
@@ -17,7 +17,7 @@ const ACTIVITY_PERIOD_WEEK_ONE = "walletActivity.lastOneWeek";
 const ACTIVITY_PERIOD_MONTH_ONE = "walletActivity.lastOneMonth";
 const ACTIVITY_PERIOD_MONTH_SIX = "walletActivity.lastSixMonts";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 const actionTypes = [
   {
diff --git a/src/pages/wallet/Discover.vue b/src/pages/wallet/Discover.vue
index 88b99e3d..913769e7 100644
--- a/src/pages/wallet/Discover.vue
+++ b/src/pages/wallet/Discover.vue
@@ -2,15 +2,12 @@
 import { DiscoverDapp } from "@toruslabs/base-controllers";
 import log from "loglevel";
 import { computed, onMounted, ref } from "vue";
-import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 
 import { RoundLoader, SelectField } from "@/components/common";
 import DappItem from "@/components/discover/DappItem.vue";
 import ControllerModule from "@/modules/controllers";
 
-const { t } = useI18n();
-
 const ALL_CATEGORIES = {
   value: "All DApps",
   label: "All DApps",
@@ -92,11 +89,11 @@ const filteredDapps = computed(() => {
   <div v-if="loading" class="pt-6 text-center">
     <RoundLoader class="w-10 h-10 mx-auto mb-4" color="border-white" />
     <div class="text-sm text-app-text-600 dark:text-app-text-dark-500">
-      {{ redirectUrl ? t("walletDiscover.redirecting", { url: redirectUrl.href }) : t("walletDiscover.loading") }}
+      {{ redirectUrl ? $t("walletDiscover.redirecting", { url: redirectUrl.href }) : $t("walletDiscover.loading") }}
     </div>
   </div>
   <div v-else-if="filteredDapps.length === 0 && !redirectUrl" class="pt-6 text-center">
-    <div class="text-sm text-app-text-600 dark:text-app-text-dark-500">{{ t("walletDiscover.noData") }}</div>
+    <div class="text-sm text-app-text-600 dark:text-app-text-dark-500">{{ $t("walletDiscover.noData") }}</div>
   </div>
   <div v-else class="pt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-10">
     <DappItem v-for="dapp in filteredDapps" :key="dapp.url" :dapp="dapp" />
diff --git a/src/pages/wallet/Home.vue b/src/pages/wallet/Home.vue
index bc8523f7..f577b7e8 100644
--- a/src/pages/wallet/Home.vue
+++ b/src/pages/wallet/Home.vue
@@ -3,7 +3,6 @@ import { RefreshIcon } from "@heroicons/vue/solid";
 import { CustomTokenInfo } from "@toruslabs/solana-controllers";
 import { throttle } from "lodash-es";
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
 
 import { Button } from "@/components/common";
 import AddressAndScan from "@/components/home/AddressAndScan.vue";
@@ -13,6 +12,7 @@ import WalletBalance from "@/components/WalletBalance.vue";
 import { HomePageInteractions } from "@/directives/google-analytics";
 import { addToast } from "@/modules/app";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { NAVIGATION_LIST } from "@/utils/navHelpers";
 
 const isImportTokenOpen = ref(false);
@@ -20,7 +20,7 @@ const tokenList = computed(() => ControllerModule.torus.existingTokenAddress);
 const connection = computed(() => ControllerModule.torus.connection);
 const importDisabled = ref(true);
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 const lastRefreshDate = computed(() => ControllerModule.lastTokenRefreshDate);
 
diff --git a/src/pages/wallet/Nft.vue b/src/pages/wallet/Nft.vue
index a412e685..949bd8c7 100644
--- a/src/pages/wallet/Nft.vue
+++ b/src/pages/wallet/Nft.vue
@@ -3,7 +3,7 @@ import { ChevronLeftIcon, GlobeAltIcon } from "@heroicons/vue/outline";
 import { DotsHorizontalIcon } from "@heroicons/vue/solid";
 import { NFTInfo, SolanaToken } from "@toruslabs/solana-controllers";
 import { computed, defineAsyncComponent, onMounted, reactive, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
+import { VueI18nTranslation } from "vue-i18n";
 import { useRouter } from "vue-router";
 
 import FallbackNft from "@/assets/fallback-nft.svg";
@@ -11,12 +11,13 @@ import PaperAirplane from "@/assets/paper-airplane.svg";
 import BurnNFT from "@/components/burnNFT/BurnNFT.vue";
 import { NftsPageInteractions, trackUserClick, TransferPageInteractions } from "@/directives/google-analytics";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { STATUS, STATUS_TYPE } from "@/utils/enums";
 import { delay, getImgProxyUrl, setFallbackImg } from "@/utils/helpers";
 import { NAVIGATION_LIST } from "@/utils/navHelpers";
 
 const router = useRouter();
-const { t } = useI18n();
+const t = i18n.global.t as VueI18nTranslation;
 const tabs = NAVIGATION_LIST;
 const user = computed(() => ControllerModule.torus.userInfo);
 const selectedAddress = computed(() => ControllerModule.torus.selectedAddress);
diff --git a/src/pages/wallet/Pay.vue b/src/pages/wallet/Pay.vue
index 61d5ee36..b9477176 100644
--- a/src/pages/wallet/Pay.vue
+++ b/src/pages/wallet/Pay.vue
@@ -4,16 +4,16 @@ import { VersionedTransaction } from "@solana/web3.js";
 import log from "loglevel";
 import QrScanner from "qr-scanner";
 import { onMounted, reactive, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 
 import MessageModal from "@/components/common/MessageModal.vue";
 import FullDivLoader from "@/components/FullDivLoader.vue";
 import SolanaPay from "@/components/payments/SolanaPay.vue";
 import controllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { STATUS, STATUS_TYPE } from "@/utils/enums";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 const router = useRouter();
 const route = useRoute();
 const requestLink = ref("");
diff --git a/src/pages/wallet/Settings.vue b/src/pages/wallet/Settings.vue
index 4921d7bb..cdd57e5d 100644
--- a/src/pages/wallet/Settings.vue
+++ b/src/pages/wallet/Settings.vue
@@ -5,7 +5,6 @@ import { GlobeIcon, ListIcon, OptionsIcon } from "@toruslabs/vue-icons/basic";
 import { MonitorIcon } from "@toruslabs/vue-icons/gadgets";
 import { LockIcon } from "@toruslabs/vue-icons/security";
 import { computed } from "vue";
-import { useI18n } from "vue-i18n";
 
 import { Panel } from "@/components/common";
 import { AccountDetails, AddressBook, CrashReporting, Display, Network } from "@/components/settings";
@@ -14,8 +13,6 @@ import ControllerModule from "@/modules/controllers";
 
 const contacts = computed(() => ControllerModule.contacts);
 
-const { t } = useI18n();
-
 const saveContact = async (contactPayload: ContactPayload): Promise<void> => {
   await ControllerModule.addContact(contactPayload);
 };
@@ -30,19 +27,19 @@ const deleteContact = async (contactId: number): Promise<void> => {
     <div class="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-2">
       <div>
         <div class="mb-4">
-          <Panel :title="t('walletSettings.privacySecurity')" disabled>
+          <Panel :title="$t('walletSettings.privacySecurity')" disabled>
             <AccountDetails />
             <template #leftIcon><LockIcon class="w-5 h-5 mr-2 text-app-text-600 dark:text-app-text-dark-500" /></template>
           </Panel>
         </div>
         <div class="mb-4">
-          <Panel :title="t('walletSettings.addressBook')" disabled>
+          <Panel :title="$t('walletSettings.addressBook')" disabled>
             <AddressBook :state-contacts="contacts" @save-contact="saveContact" @delete-contact="deleteContact" />
             <template #leftIcon><ListIcon class="w-5 h-5 mr-2 text-app-text-600 dark:text-app-text-dark-500" /></template>
           </Panel>
         </div>
         <div class="mb-4">
-          <Panel :title="t('walletSettings.crashReport')" disabled>
+          <Panel :title="$t('walletSettings.crashReport')" disabled>
             <CrashReporting />
             <template #leftIcon><MonitorIcon class="w-5 h-5 mr-2 text-app-text-600 dark:text-app-text-dark-500" /></template>
           </Panel>
@@ -50,19 +47,19 @@ const deleteContact = async (contactId: number): Promise<void> => {
       </div>
       <div>
         <div class="mb-4">
-          <Panel :title="t('walletSettings.network')" disabled>
+          <Panel :title="$t('walletSettings.network')" disabled>
             <Network />
             <template #leftIcon><GlobeIcon class="w-5 h-5 mr-2 text-app-text-600 dark:text-app-text-dark-500" /></template>
           </Panel>
         </div>
         <div class="mb-4">
-          <Panel :title="t('walletSettings.display')" disabled>
+          <Panel :title="$t('walletSettings.display')" disabled>
             <Display />
             <template #leftIcon><OptionsIcon class="w-5 h-5 mr-2 text-app-text-600 dark:text-app-text-dark-500" /></template>
           </Panel>
         </div>
         <div class="mb-4">
-          <Panel :title="t('walletSettings.language')" disabled>
+          <Panel :title="$t('walletSettings.language')" disabled>
             <Language />
             <template #leftIcon><TranslateIcon class="w-5 h-5 mr-2 text-app-text-600 dark:text-app-text-dark-500" /></template>
           </Panel>
diff --git a/src/pages/wallet/TopUp.vue b/src/pages/wallet/TopUp.vue
index acab6f8a..1712f0ed 100644
--- a/src/pages/wallet/TopUp.vue
+++ b/src/pages/wallet/TopUp.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { RadioGroup, RadioGroupDescription, RadioGroupLabel, RadioGroupOption } from "@headlessui/vue";
 import { ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 
 import controllerModule from "@/modules/controllers";
@@ -14,7 +13,6 @@ const router = useRouter();
 const routeName = router.currentRoute.value.name === "walletTopUp" ? TOPUP.MOONPAY : router.currentRoute.value.name;
 const selectedProvider = ref<TopUpProvider>(topupPlugin[routeName?.toString() || TOPUP.MOONPAY]);
 const providers = activeProvider.map((item) => topupPlugin[item]);
-const { t } = useI18n();
 
 watch(selectedProvider, () => {
   router.push({ name: selectedProvider.value.name });
@@ -25,7 +23,7 @@ watch(selectedProvider, () => {
   <div class="py-2">
     <dl class="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-2">
       <RadioGroup v-model="selectedProvider">
-        <RadioGroupLabel class="sr-only">{{ t("walletTopUp.serverSize") }}</RadioGroupLabel>
+        <RadioGroupLabel class="sr-only">{{ $t("walletTopUp.serverSize") }}</RadioGroupLabel>
         <div class="space-y-4">
           <RadioGroupOption v-for="provider in providers" :key="provider.name" v-slot="{ checked }" :value="provider" as="template">
             <div
@@ -43,18 +41,18 @@ watch(selectedProvider, () => {
               </div>
               <RadioGroupDescription as="div" class="col-span-1 whitespace-pre-wrap">
                 <div class="text-right font-medium text-xs text-app-text-600 dark:text-app-text-dark-500">
-                  {{ `${t("walletTopUp.paywith")} ${provider.paymentMethod}` }}
+                  {{ `${$t("walletTopUp.paywith")} ${provider.paymentMethod}` }}
                 </div>
                 <div class="text-right font-medium text-xs text-app-text-600 dark:text-app-text-dark-500">
-                  <span class="font-bold">{{ `${t("walletTopUp.fees")}:` }}</span
+                  <span class="font-bold">{{ `${$t("walletTopUp.fees")}:` }}</span
                   >: {{ provider.fee }}
                 </div>
                 <div class="text-right ml-1 text-xs text-app-text-600 dark:text-app-text-dark-500 md:ml-0">
-                  <span class="font-bold">{{ t("walletTopUp.limits") }}</span
+                  <span class="font-bold">{{ $t("walletTopUp.limits") }}</span
                   >: {{ provider.limit }}
                 </div>
                 <div class="text-right ml-1 text-xs text-app-text-600 dark:text-app-text-dark-500 md:ml-0">
-                  <span class="font-bold">{{ t("walletTopUp.currencies") }}</span
+                  <span class="font-bold">{{ $t("walletTopUp.currencies") }}</span
                   >:
                   {{ provider.validCryptocurrencies.map((k) => k.value).join(", ") }}
                 </div>
diff --git a/src/pages/wallet/Transfer.vue b/src/pages/wallet/Transfer.vue
index 5d232089..eeb59b63 100644
--- a/src/pages/wallet/Transfer.vue
+++ b/src/pages/wallet/Transfer.vue
@@ -9,7 +9,6 @@ import { BigNumber } from "bignumber.js";
 import { debounce } from "lodash-es";
 import log from "loglevel";
 import { computed, defineAsyncComponent, onMounted, reactive, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 
 import { Button, Card, ComboBox, SelectField, TextField } from "@/components/common";
@@ -20,6 +19,7 @@ import { addressPromise, isOwnerEscrow } from "@/components/transfer/transfer-he
 import TransferTokenSelect from "@/components/transfer/TransferTokenSelect.vue";
 import { trackUserClick, TransferPageInteractions } from "@/directives/google-analytics";
 import ControllerModule from "@/modules/controllers";
+import { i18n } from "@/plugins/i18nPlugin";
 import { ALLOWED_VERIFIERS, ALLOWED_VERIFIERS_ERRORS, STATUS, STATUS_TYPE, TransferType } from "@/utils/enums";
 import { delay } from "@/utils/helpers";
 import { SolAndSplToken } from "@/utils/interfaces";
@@ -27,7 +27,7 @@ import { calculateTxFee, generateSolTransaction, generateSPLTransaction, ruleVer
 
 import CheckBox from "../../components/common/CheckBox.vue";
 
-const { t } = useI18n();
+const { t } = i18n.global;
 
 const snsError = ref("Account Does Not Exist");
 const isOpen = ref(false);
@@ -506,7 +506,7 @@ async function onSelectTransferType() {
             <div class="w-full flex flex-row space-x-2">
               <ComboBox
                 v-model="transferTo"
-                :label="t('walletActivity.sendTo')"
+                :label="$t('walletActivity.sendTo')"
                 :errors="isOpen ? undefined : $v.transferTo.$errors"
                 :items="contacts"
                 class="w-2/3 flex-auto"
@@ -518,16 +518,16 @@ async function onSelectTransferType() {
             <div v-if="isNewContact()" class="w-full">
               <CheckBox class="mb-4" label="Save Contact" :checked="checked" label-position="right" @change="checked = !checked" />
               <div v-if="checked">
-                <TextField v-model="contactName" :errors="$v.contactName.$errors" :placeholder="t('walletSettings.enterContact')" />
+                <TextField v-model="contactName" :errors="$v.contactName.$errors" :placeholder="$t('walletSettings.enterContact')" />
               </div>
             </div>
 
             <div v-if="showAmountField" class="w-full">
               <TextField
                 v-model="sendAmount"
-                :label="t('dappTransfer.amount')"
+                :label="$t('dappTransfer.amount')"
                 :errors="$v.sendAmount.$errors"
-                :postfix-text="isSendAllActive ? t('walletTransfer.reset') : t('walletTransfer.sendAll')"
+                :postfix-text="isSendAllActive ? $t('walletTransfer.reset') : $t('walletTransfer.sendAll')"
                 type="number"
                 @update:postfix-text-clicked="setTokenAmount(isSendAllActive ? 'reset' : 'max')"
               >
@@ -554,10 +554,10 @@ async function onSelectTransferType() {
               </TextField>
             </div>
             <div v-if="spayMessage" class="w-full">
-              <TextField :label="t('walletPay.message')" :disabled="true" :model-value="spayMessage"> </TextField>
+              <TextField :label="$t('walletPay.message')" :disabled="true" :model-value="spayMessage"> </TextField>
             </div>
             <Button class="ml-auto" :disabled="$v.$dirty && $v.$invalid" @click="openModal">
-              {{ t("dappTransfer.transfer") }}
+              {{ $t("dappTransfer.transfer") }}
             </Button>
           </div>
         </form>
diff --git a/src/plugins/i18nPlugin.ts b/src/plugins/i18nPlugin.ts
index b809ce4e..6663d552 100644
--- a/src/plugins/i18nPlugin.ts
+++ b/src/plugins/i18nPlugin.ts
@@ -23,7 +23,7 @@ export function setI18nLanguage(i18n: I18n, locale: string) {
 
 export function setupI18n(locale = LOCALE_EN) {
   const i18n = createI18n({
-    legacy: false,
+    // legacy: false,
     globalInjection: true,
     locale,
     fallbackLocale: locale,
diff --git a/src/utils/const.ts b/src/utils/const.ts
index c02b08e9..7a965386 100644
--- a/src/utils/const.ts
+++ b/src/utils/const.ts
@@ -6,6 +6,7 @@ export const WALLET_SUPPORTED_NETWORKS: { [key: string]: ProviderConfig } = {
   mainnet: {
     ...SUPPORTED_NETWORKS.mainnet,
     rpcTarget: "https://green-dark-sky.solana-mainnet.quiknode.pro/0b4b99540b7930cf590dc7fb0a2d1c9a906fd53c/",
+    // rpcTarget: "https://nyc39.rpcpool.com",
   },
   testnet: {
     ...SUPPORTED_NETWORKS.testnet,
diff --git a/src/utils/errorHandlers.ts b/src/utils/errorHandlers.ts
index 9ebf8812..30f463ce 100644
--- a/src/utils/errorHandlers.ts
+++ b/src/utils/errorHandlers.ts
@@ -1,10 +1,11 @@
 import * as Sentry from "@sentry/vue";
-import { useI18n } from "vue-i18n";
+import { VueI18nTranslation } from "vue-i18n";
 
 import { addToast, removeToast } from "@/modules/app";
+import { i18n } from "@/plugins/i18nPlugin";
 
 export function handleExceptions(e: any): void {
-  const { t } = useI18n({ useScope: "global" });
+  const t = i18n.global.t as VueI18nTranslation;
   if (e.exception?.values?.[0]?.value?.includes("Network request failed")) {
     // subsequent error which are not network errors will have the tag that there was a rpc error in the past for this session.
     // which might be a possible explanation of error in inspection
diff --git a/tests/controller/nockRequest.ts b/tests/controller/nockRequest.ts
index 5f5f16ce..f6801cfc 100644
--- a/tests/controller/nockRequest.ts
+++ b/tests/controller/nockRequest.ts
@@ -115,8 +115,7 @@ export default () => {
     .reply(200, (_uri: string, body: JRPCRequest<unknown>) => {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { method, params, ...others } = body;
-      // log.error(method);
-      if (method === "getHealth" || method === "qn_fetchNFTs") {
+      if (method === "getHealth" || method === "qn_fetchNFTs" || method === "getLatestBlockhash") {
         const value = { ...others, result: "ok" };
         // log.error(value);
         return value;
diff --git a/tests/setup.js b/tests/setup.js
index 896e93bb..278c4b95 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -5,6 +5,8 @@ require("jsdom-global")("", {
   url: "https://solana.tor.us",
 });
 
+const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
+
 global.localStorage = window.localStorage;
 global.sessionStorage = window.sessionStorage;
 global.open = window.open;
@@ -22,3 +24,6 @@ require("ts-node").register({
   transpileOnly: true,
   compilerOptions: { module: "commonjs" },
 });
+
+global.fetch = fetch;
+global.Headers = fetch.Headers;