Fix/embed depreciation

src/components/WalletTabs.vue

@@ -101,7 +101,7 @@ const logout = async () => {
         :class="[value.mobHidden ? 'hidden' : 'block']"
       >
         <div
-          :id="key + '_link'"
+          :id="`${key}_link`"
           class="flex flex-col h-full items-center justify-center select-none w-16 py-1"
           :class="[key === tab ? 'border-t-2 border-app-primary-500' : '']"
         >

src/components/depreceiated/Depreciated.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { XIcon } from "@heroicons/vue/solid";
+
+import StartLogo from "@/assets/star.svg";
+
+const props = defineProps({
+  useNewContent: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const redirect = (redirectUrl: string) => {
+  window.open(redirectUrl, "_blank");
+};
+</script>
+
+<template>
+  <div :class="['flex justify-center items-center bg-gray-900', useNewContent ? 'min-h-screen' : 'min-h-[222px] rounded-3xl']">
+    <div class="relative text-center rounded-lg px-6 w-full max-w-md text-white shadow-lg">
+      <!-- Title with Icon and Close Button -->
+      <div class="flex items-center justify-between mb-4">
+        <div class="flex items-center">
+          <img class="h-6 w-6 mr-2" :src="StartLogo" alt="Star Logo" />
+          <h1 class="text-xl font-bold text-gray-50">Torus Solana Wallet Upgrade</h1>
+        </div>
+        <button v-if="!props.useNewContent" type="button" class="absolute -top-4 right-4" @click="$emit('close')">
+          <XIcon class="w-4 h-4 text-app-gray-50 dark:text-gray-50 text-opacity-70 hover:text-opacity-100" />
+        </button>
+      </div>
+
+      <!-- Main Text -->
+      <p class="mb-4 text-sm font-normal text-gray-300">
+        We are currently upgrading the Torus Solana Wallet for a better experience. You may still access your funds at
+        <a href="https://solana.tor.us" class="text-blue-500" @click="redirect('https://solana.tor.us')"> solana.tor.us </a>
+        directly.
+      </p>
+
+      <!-- Apology & Community Forum -->
+      <p class="text-sm font-normal text-gray-300">
+        We apologize for any inconvenience. For assistance, visit our
+        <a href="https://web3auth.io/community" class="text-blue-500" @click="redirect('https://web3auth.io/community')"> Community Forum </a>.
+      </p>
+    </div>
+  </div>
+</template>

src/components/frame/PopupLogin.vue

@@ -12,6 +12,7 @@ import { LOGIN_CONFIG } from "@/utils/enums";
 import { getWhiteLabelLogo, isWhiteLabelSet } from "@/utils/whitelabel";
 
 import ControllerModule from "../../modules/controllers";
+import Depreciated from "../depreceiated/Depreciated.vue";
 
 withDefaults(
   defineProps<{
@@ -29,8 +30,9 @@ const emits = defineEmits(["onClose", "onLogin"]);
 const closeModal = () => {
   emits("onClose");
 };
-const onLogin = (provider: string, userEmail: string) => {
-  emits("onLogin", provider, userEmail);
+const onLogin = (_provider: string, _userEmail: string) => {
+  // depreciating iframe login
+  // emits("onLogin", provider, userEmail);
 };
 
 const loginButtonsArray: LOGIN_CONFIG[] = Object.values(config.loginConfig);
@@ -41,7 +43,9 @@ const setActiveButton = (provider: string) => {
   activeButton.value = provider;
 };
 const refDiv = ref(null);
+const isDepreciatedOpen = ref(true);
 </script>
+
 <template>
   <TransitionRoot appear :show="isOpen" as="template">
     <Dialog :open="isOpen" as="div" :initial-focus="refDiv">
@@ -113,6 +117,28 @@ const refDiv = ref(null);
       </div>
     </Dialog>
   </TransitionRoot>
+  <TransitionRoot appear :show="isDepreciatedOpen" as="template">
+    <Dialog :open="isDepreciatedOpen" as="div" :initial-focus="refDiv" @close="closeModal">
+      <div ref="refDiv" class="fixed inset-0 z-40 overflow-y-auto">
+        <div class="min-h-screen px-4 flex justify-center items-center">
+          <DialogOverlay class="fixed inset-0 opacity-30 bg-gray-200 dark:bg-gray-500" />
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <div class="relative inline-block w-full max-w-sm text-left align-middle transition-all transform shadow-xl" style="height: auto">
+              <Depreciated :use-new-content="false" @close="closeModal" />
+            </div>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
 </template>
 
 <style scoped>

src/components/payments/EstimateChanges.vue

@@ -46,7 +46,7 @@ const { t } = useI18n();
       <div v-if="props.estimationInProgress" class="text-xs italic text-app-text-500 dark:text-app-text-dark-500">Estimating...</div>
       <div v-for="item in props.estimatedBalanceChange" :key="item.symbol" class="text-xs italic text-red-500">
         <div v-if="!props.estimationInProgress" :class="item.changes >= 0 && 'text-green-400'">
-          {{ item.changes + "   " + symbols[item.mint] }}
+          {{ `${item.changes}   ${symbols[item.mint]}` }}
         </div>
       </div>
     </div>

src/components/payments/PaymentConfirm.vue

@@ -141,7 +141,7 @@ const explorerUrl = computed(() => {
           </div>
           <span class="flex flex-row mt-3 justify-between items-center w-full text-sm text-app-text-500 dark:text-app-text-dark-500">
             <p>{{ t("walletTransfer.transferFee") }} <img :src="QuestionMark" alt="QuestionMark" class="ml-2 float-right mt-1 cursor-pointer" /></p>
-            <p>{{ props.isGasless ? "Paid by DApp" : props.cryptoTxFee + " SOL" }}</p>
+            <p>{{ props.isGasless ? "Paid by DApp" : `${props.cryptoTxFee} SOL` }}</p>
           </span>
 
           <p

src/components/settings/Display.vue

@@ -13,7 +13,7 @@ const { t } = useI18n();
     <div class="grid grid-cols-2 space-x-3">
       <div>
         <Button
-          v-ga="SettingsPageInteractions.DISPLAY + 'light'"
+          v-ga="`${SettingsPageInteractions.DISPLAY}light`"
           class="w-full"
           :variant="ControllerModule.isDarkMode ? 'tertiary' : 'primary'"
           :block="true"
@@ -23,7 +23,7 @@ const { t } = useI18n();
       </div>
       <div>
         <Button
-          v-ga="SettingsPageInteractions.DISPLAY + 'dark'"
+          v-ga="`${SettingsPageInteractions.DISPLAY}dark`"
           :variant="ControllerModule.isDarkMode ? 'primary' : 'tertiary'"
           :block="true"
           class="w-full"

src/pages/RedirectHandler.vue

@@ -1,30 +1,17 @@
 <script setup lang="ts">
-import { RedirectHandler } from "@toruslabs/base-controllers";
-import Loader from "@toruslabs/vue-components/common/Loader.vue";
 import { onMounted } from "vue";
 
-import { redirectToResult, useRedirectFlow } from "../utils/redirectflowHelpers";
+import Depreciated from "@/components/depreceiated/Depreciated.vue";
 
-const { isRedirectFlow, method, resolveRoute, req_id, jsonrpc } = useRedirectFlow();
-
-const checkTopupSuccess = async () => {
-  const queryParameters = new URLSearchParams(window.location.search);
-  const state = queryParameters.get("state");
-  if (isRedirectFlow && state) {
-    redirectToResult(jsonrpc, { success: true, method }, req_id, resolveRoute);
-  }
-};
 onMounted(async () => {
-  checkTopupSuccess();
-  if (!isRedirectFlow) {
-    const redirectHandler = new RedirectHandler();
-    await redirectHandler.handle();
-  }
+  // checkTopupSuccess();
+  // if (!isRedirectFlow) {
+  //   const redirectHandler = new RedirectHandler();
+  //   await redirectHandler.handle();
+  // }
 });
 </script>
 
 <template>
-  <div class="min-h-screen bg-white dark:bg-app-gray-800 flex justify-center items-center">
-    <Loader :use-spinner="true" />
-  </div>
+  <Depreciated :use-new-content="true" />
 </template>

src/pages/wallet/Home.vue

@@ -77,7 +77,7 @@ const lastUpdateString = computed(() => {
       <header>
         <div class="flex items-center max-w-7xl justify-between">
           <h1 class="text-xl sm:text-3xl font-medium leading-tight text-app-text-500 dark:text-app-text-dark-400">
-            {{ t(NAVIGATION_LIST["home"].title) }}
+            {{ t(NAVIGATION_LIST.home.title) }}
           </h1>
           <div class="flex items-center space-x-2">
             <AddressAndScan class="hidden lg:flex" :selected-address="ControllerModule.selectedAddress" />

src/pages/wallet/NftDetail.vue

@@ -79,7 +79,7 @@ function getNftFetchMessage(state: FETCH_STATE): string {
       <span class="text-app-text-500 nft-title">You have {{ nfts.length }} NFTs</span>
       <div v-if="nfts.length === 0" class="w-full shadow dark:shadow-dark bg-white dark:bg-app-gray-700 rounded-md mt-10 p-12 pt-8">
         <span class="text-app-text-500 dark:text-app-text-dark-400 text-center inline-block">{{ getNftFetchMessage(exploreNFTSFetchState) }}</span>
-        <RoundLoader v-if="exploreNFTSFetchState == 'loading'" class="w-10 h-10 mx-auto mb-4" color="border-white" />
+        <RoundLoader v-if="exploreNFTSFetchState === 'loading'" class="w-10 h-10 mx-auto mb-4" color="border-white" />
         <div v-if="exploreNFTS.length" class="flex flex-wrap justify-center mt-12">
           <div v-for="collection in exploreNFTS" :key="collection.image" class="flex flex-col items-center m-4 w-48 popular-nft">
             <img