Feat/update package

package.json

@@ -29,11 +29,11 @@
     "@sentry/vue": "^7.77.0",
     "@solana/pay": "^0.2.5",
     "@solana/qr-code-styling": "^1.6.0",
-    "@solana/spl-name-service": "^0.2.0",
+    "@solana/spl-name-service": "^0.2.1",
     "@solana/spl-token": "0.3.8",
     "@solana/web3.js": "^1.87.3",
-    "@toruslabs/base-controllers": "^4.11.0",
-    "@toruslabs/broadcast-channel": "^9.0.1",
+    "@toruslabs/base-controllers": "^6.2.4",
+    "@toruslabs/broadcast-channel": "^11.0.0",
     "@toruslabs/eccrypto": "^4.0.0",
     "@toruslabs/http-helpers": "^6.0.0",
     "@toruslabs/loglevel-sentry": "^6.0.1",
@@ -44,14 +44,15 @@
     "@toruslabs/openlogin-session-manager": "^3.0.0",
     "@toruslabs/openlogin-subkey": "^6.0.0",
     "@toruslabs/openlogin-utils": "^6.1.0",
-    "@toruslabs/solana-controllers": "^4.11.0",
+    "@toruslabs/solana-controllers": "^6.3.0",
     "@toruslabs/tweetnacl-js": "^1.0.4",
     "@toruslabs/vue-components": "^2.0.1",
     "@toruslabs/vue-icons": "^2.0.0",
     "@types/bn.js": "^5.1.4",
     "@types/elliptic": "^6.4.16",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
+    "@web3auth/auth": "^9.3.1",
     "async-mutex": "^0.4.0",
     "bignumber.js": "^9.1.2",
     "bowser": "^2.11.0",

src/auth/OpenLoginHandler.ts

@@ -1,6 +1,6 @@
 import { PopupWithBcHandler, randomId } from "@toruslabs/base-controllers";
-import { JRPCEngine, SafeEventEmitter } from "@toruslabs/openlogin-jrpc";
-import { LOGIN_PROVIDER_TYPE, safebtoa } from "@toruslabs/openlogin-utils";
+import type { JRPCEngine, SafeEventEmitter } from "@web3auth/auth";
+import { LOGIN_PROVIDER_TYPE, safebtoa } from "@web3auth/auth";
 import { Mutex } from "async-mutex";
 import log from "loglevel";
 
@@ -60,12 +60,13 @@ class OpenLoginHandler {
     log.info("channel name", this.nonce);
     const verifierWindow = new PopupWithBcHandler<OpenLoginPopupResponse, never>({
       config: {
-        dappStorageKey: config.dappStorageKey || undefined,
         communicationEngine,
         communicationWindowManager,
+        instanceId: `${this.nonce}`,
+        timeout: 30000,
       },
-      state: { url: this.finalURL, windowId: this.windowId },
-      instanceId: this.nonce,
+      state: { url: this.finalURL, windowId: "" },
+      channelPrefix: "openlogin",
     });
     const result = await verifierWindow.handle();
     if (result.sessionId) {

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/home/ImportToken.vue

@@ -12,7 +12,7 @@
 const props = withDefaults(
   defineProps<{
     isOpen?: boolean;
     tokenList?: any;
     importDisabled?: boolean;
     pricePerToken?: number;
   }>(),
@@ -72,7 +72,7 @@
 
 function resetState() {
   setImportTokenState("", "", "", true);
-  $v.value.$rese$t();
+  $v.value.$reset();
 }
 
 const onCancel = () => {

src/components/home/ImportTokenConfirmation.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { Dialog, DialogOverlay, DialogTitle, TransitionChild, TransitionRoot } from "@headlessui/vue";
+import { ref } from "vue";
+
+import { Button } from "@/components/common";
+import ControllerModule from "@/modules/controllers";
+
+const props = withDefaults(
+  defineProps<{
+    isOpen?: boolean;
+    importDisabled?: boolean;
+  }>(),
+  {
+    isOpen: false,
+    importDisabled: false,
+  }
+);
+const emits = defineEmits(["importConfirm", "importCanceled", "onCloseModal"]);
+
+const closeModal = () => {
+  emits("onCloseModal");
+};
+
+const onCancel = () => {
+  emits("importCanceled");
+};
+
+const onImport = async () => {
+  emits("importConfirm");
+};
+
+const refDiv = ref(null);
+</script>
+<template>
+  <TransitionRoot appear :show="isOpen || props.isOpen" as="template">
+    <Dialog :open="isOpen" :class="{ dark: ControllerModule.isDarkMode }" as="div" :initial-focus="refDiv" @close="closeModal">
+      <div ref="refDiv" class="fixed inset-0 z-30 overflow-y-auto">
+        <div class="min-h-screen px-4 text-center">
+          <DialogOverlay class="fixed inset-0 opacity-30 bg-gray-200 dark:bg-gray-500" />
+          <span class="inline-block h-screen align-middle" aria-hidden="true">&#8203;</span>
+          <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 my-8 overflow-hidden text-left align-middle transition-all bg-white dark:bg-app-gray-700 shadow-xl rounded-md px-4"
+            >
+              <DialogTitle as="div" class="shadow dark:shadow-dark text-center py-6 w-full">
+                <p class="font-header text-lg font-bold text-app-text-600 dark:text-app-text-dark-500">Confirm Import Token</p>
+              </DialogTitle>
+              <div class="m-3 text-center">
+                <p class="text-app-text-600 dark:text-app-text-dark-500">
+                  A standard token has been detected. This token will be saved to your custom tokens instead of your input. Do you want to proceed?
+                </p>
+              </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") }}
+                </Button>
+                <Button class="flex-auto mx-2 w-1/2" :disabled="importDisabled" :block="true" variant="primary" @click="onImport">
+                  {{ $t("walletTransfer.confirm") }}
+                </Button>
+              </div>
+            </div>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+<style scoped>
+.img_preview {
+  max-width: 160px;
+  min-width: 160px;
+  @apply h-40 rounded-md object-cover;
+}
+
+.property-name {
+  @apply font-bold text-sm leading-4;
+}
+
+.property-value {
+  @apply text-sm leading-4;
+}
+</style>

src/components/home/SplCard.vue

@@ -51,8 +51,9 @@ function splClicked() {
           :src="splToken?.iconURL || (ControllerModule.isDarkMode ? SolanaLogoLight : SolanaLogoDark)"
           alt="TOKEN Logo"
         />
-        <p class="text-app-text-600 dark:text-app-text-dark-500 font-bold text-xs leading-3 w-24 truncate">{{ splToken?.name }}</p></span
-      >
+        <p class="text-app-text-600 dark:text-app-text-dark-500 font-bold text-xs leading-3 w-24 truncate">{{ splToken?.name }}</p>
+        <span v-if="splToken.isImportToken" class="text-xs text-app-primary-500 ml-1 border border-gray-300 rounded px-1">Imported</span>
+      </span>
       <p class="font-medium text-xs leading-3 text-right text-app-text-600 dark:text-app-text-dark-500 mr-1 truncate w-20">
         ~ {{ significantDigits(splToken.balance?.uiAmount || 0, false, 4) }} {{ splToken?.symbol }}
       </p>
@@ -85,12 +86,13 @@ function splClicked() {
         <img
           :class="splTokenLoading ? 'skeleton-animation skeleton-img' : ''"
           class="block h-5 mr-2 w-auto text-white font-bold text-xs leading-3"
-          alt="" />
+          alt=""
+        />
         <p
           class="text-app-text-600 dark:text-app-text-dark-500 font-bold text-xs leading-3 w-24 truncate"
           :class="splTokenLoading ? 'skeleton-animation skeleton-p' : ''"
-        ></p
-      ></span>
+        ></p>
+      </span>
       <p
         class="font-medium text-xs leading-3 text-right text-app-text-600 dark:text-app-text-dark-500 mr-1 truncate w-20"
         :class="splTokenLoading ? 'skeleton-animation skeleton-p' : ''"

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

@@ -131,7 +131,7 @@
             <!-- <p>{{ t("walletTopUp.youSend") }}</p> -->
             <p>{{ props.cryptoAmount }} {{ props.token }}</p>
           </span>
           <div v-if="false" class="mt-3 w-full">
             <EstimateChanges
               :estimated-balance-change="props.estimatedBalanceChange"
               :has-estimation-error="props.hasEstimationError"
@@ -141,7 +141,7 @@
           </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/components/topup/gateways/BaseTopup.vue

@@ -31,7 +31,7 @@ const isLoadingQuote = ref(false);
 const sendingTopup = ref(false);
 const errorMsg = ref("");
 let decimals = 0;
-// eslint-disable-next-line vue/no-setup-props-destructure
+
 const $v = useVuelidate(props.selectedProvider.rules, { amount });
 
 async function refreshTransferEstimate(quote: (requestObject: RequestObject) => Promise<QuoteResponse>) {

src/components/transfer/token-helper.ts

@@ -16,24 +16,31 @@ const SOLANA_TOKEN: Partial<SolAndSplToken> = {
 
 // concat SOL + SPL tokens
 export const tokens = computed<Partial<SolAndSplToken>[]>(() => {
-  return [
-    {
-      ...SOLANA_TOKEN,
-      balance: {
-        amount: ControllerModule.solBalance.multipliedBy(LAMPORTS_PER_SOL).toString(),
-        decimals: 9,
-        uiAmount: ControllerModule.solBalance.toNumber(),
-        uiAmountString: ControllerModule.solBalance.toFixed(4),
-      },
+  const customTokens = ControllerModule.userCustomTokens;
+
+  const solToken = {
+    ...SOLANA_TOKEN,
+    balance: {
+      amount: ControllerModule.solBalance.multipliedBy(LAMPORTS_PER_SOL).toString(),
+      decimals: 9,
+      uiAmount: ControllerModule.solBalance.toNumber(),
+      uiAmountString: ControllerModule.solBalance.toFixed(4),
     },
-    ...sortSolanaTokens(
-      ControllerModule.fungibleTokens?.map((st) => {
-        return { ...st, name: st.data?.name || "", iconURL: st.data?.logoURI ? `${st.data?.logoURI}` : "", symbol: st.data?.symbol };
-      }) || [],
-      SORT_SPL_TOKEN.TOKEN_CURRENCY_VALUE,
-      ControllerModule.torusState.CurrencyControllerState.currentCurrency
-    ),
-  ];
+  };
+
+  const fungibleTokens = sortSolanaTokens(
+    ControllerModule.fungibleTokens?.map((st) => {
+      return { ...st, name: st.data?.name || "", iconURL: st.data?.logoURI ? `${st.data?.logoURI}` : "", symbol: st.data?.symbol };
+    }) || [],
+    SORT_SPL_TOKEN.TOKEN_CURRENCY_VALUE,
+    ControllerModule.torusState.CurrencyControllerState.currentCurrency
+  );
+
+  const customTokensFormatted = customTokens.map((ct) => {
+    return { ...ct, name: ct.data?.name || "", iconURL: ct.data?.logoURI ? `${ct.data?.logoURI}` : "", symbol: ct.data?.symbol, isImportToken: true };
+  });
+
+  return [solToken, ...fungibleTokens, ...customTokensFormatted];
 });
 
 export const nftTokens = computed<Partial<SolAndSplToken>[]>(() => {