Merge pull request #452 from torusresearch/feat/import-token-popup

feat: import token confirmation popup for spl tokens

src/components/home/ImportTokenConfirmation.vue

@@ -0,0 +1,80 @@
+<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 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" 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/pages/wallet/Home.vue

@@ -8,6 +8,7 @@ import { useI18n } from "vue-i18n";
 import { Button } from "@/components/common";
 import AddressAndScan from "@/components/home/AddressAndScan.vue";
 import ImportToken from "@/components/home/ImportToken.vue";
+import ImportTokenConfirmation from "@/components/home/ImportTokenConfirmation.vue";
 import TokensAssetsBalance from "@/components/TokensAssetsBalance.vue";
 import WalletBalance from "@/components/WalletBalance.vue";
 import { HomePageInteractions } from "@/directives/google-analytics";
@@ -16,9 +17,11 @@ import ControllerModule, { torus } from "@/modules/controllers";
 import { NAVIGATION_LIST } from "@/utils/navHelpers";
 
 const isImportTokenOpen = ref(false);
+const isImportConfirmationOpen = ref(false);
 const tokenList = computed(() => ControllerModule.existingTokenAddress);
-// const connection = computed(() => ControllerModule.torusState.NetworkControllerState.connection);
 const importDisabled = ref(true);
+const importConfirmationDisabled = ref(false);
+const customToken = ref<CustomTokenInfo | null>(null);
 
 const { t } = useI18n();
 
@@ -37,24 +40,63 @@ const importCanceled = async () => {
   isImportTokenOpen.value = false;
 };
 
-const importConfirm = async (importToken: CustomTokenInfo) => {
-  isImportTokenOpen.value = false;
+const importTokenCall = async (importToken: CustomTokenInfo) => {
+  // if not proceed to import token api call
   try {
     await torus.importCustomToken(importToken);
     // close dialog and show success message
     addToast({
-      message: `Token ${importToken.name} Imported Successfully`,
+      message: `Token ${importToken.name} imported successfully`,
       type: "success",
     });
   } catch (err) {
     // showing transaction failed message
     addToast({
-      message: `Token could not Imported: ${err || "Something Went Wrong"}`,
+      message: `Token could not be imported: ${err || "Something went wrong"}`,
       type: "error",
     });
   }
 };
 
+const importConfirm = async (importToken: CustomTokenInfo) => {
+  const { address, name, symbol } = importToken;
+  isImportTokenOpen.value = false;
+  // check if token is already present in the spl token list
+  const result = await torus.fetchTokenInfo(address);
+  const tokenInfo = {
+    address,
+    name,
+    symbol,
+    publicAddress: "",
+    network: "",
+  };
+  // if present show dialog to import token
+  if (result && result.address) {
+    customToken.value = { ...result, network: result.chainId };
+    isImportConfirmationOpen.value = true;
+  } else {
+    await importTokenCall(tokenInfo);
+  }
+};
+
+const canceledSplTokenImport = async () => {
+  isImportConfirmationOpen.value = false;
+};
+
+const confirmSplTokenImport = async () => {
+  importConfirmationDisabled.value = true;
+  if (customToken.value) {
+    await importTokenCall(customToken.value);
+  } else {
+    addToast({
+      message: "Token could not be imported: Something went wrong",
+      type: "error",
+    });
+  }
+  importConfirmationDisabled.value = false;
+  isImportConfirmationOpen.value = false;
+};
+
 const pricePerToken = computed<number>((): number => {
   return torus.conversionRate;
 });
@@ -102,16 +144,6 @@ const lastUpdateString = computed(() => {
           <Button v-ga="HomePageInteractions.REFRESH" class="flex flex-column" variant="text" @click="importTokens"> Import Token </Button>
         </div>
       </div>
-      <!-- <div
-        class="shadow dark:shadow_box border border-app-gray-300 dark:border-transparent bg-white dark:bg-app-gray-700 rounded-md h-20 flex flex-col justify-center"
-      >
-        <div class="dark:shadow_down flex flex-row justify-center items-center flex-auto border-b border-app-gray-300 dark:border-b-0">
-          <span class="text-app-text-600 dark:text-app-text-dark-500 font-bold text-sm black">Did not see your Tokens?</span>
-        </div>
-        <div class="flex justify-center items-center flex-auto">
-          <span class="cursor-pointer font-normal text-app-primary-500 text-xs">Add your Tokens here</span>
-        </div>
-      </div> -->
       <div class="flex flex-col w-full items-end !mt-8">
         <div class="bg-white border dark:border-0 dark:bg-app-gray-700 flex items-center space-x-2 py-2 px-4 rounded-full w-fit">
           <RefreshIcon class="w-3 h-3 text-app-text-500 dark:text-app-text-dark-400" />
@@ -134,6 +166,12 @@ const lastUpdateString = computed(() => {
       @import-canceled="importCanceled"
       @import-confirm="importConfirm"
     />
+    <ImportTokenConfirmation
+      :is-open="isImportConfirmationOpen"
+      :import-disabled="importConfirmationDisabled"
+      @import-canceled="canceledSplTokenImport"
+      @import-confirm="confirmSplTokenImport"
+    />
   </div>
 </template>