feat: translation

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>

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,15 +72,15 @@ 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"
           :block="true"
           variant="tertiary"
           class="w-full text-app-primary-500"
           @click="router.push('/wallet/transfer')"
-          >{{ t("walletHome.transfer") }}</Button
+          >{{ $t("walletHome.transfer") }}</Button
         >
       </div>
     </template>

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>

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>

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"

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"

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>

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>

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");

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);

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"

src/components/home/ImportToken.vue

@@ -5,7 +5,6 @@
 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";
@@ -13,7 +12,7 @@
 const props = withDefaults(
   defineProps<{
     isOpen?: boolean;
     tokenList?: any;
     importDisabled?: boolean;
     pricePerToken?: number;
   }>(),
@@ -25,8 +24,6 @@
   }
 );
 
-const { t } = useI18n();
-
 const emits = defineEmits(["importConfirm", "importCanceled", "onCloseModal"]);
 
 const closeModal = () => {
@@ -75,7 +72,7 @@
 
 function resetState() {
   setImportTokenState("", "", "", true);
-  $v.value.$reset();
+  $v.value.$rese$t();
 }
 
 const onCancel = () => {
@@ -136,10 +133,10 @@
               </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>