diff --git a/src/components/home/ImportTokenConfirmation.vue b/src/components/home/ImportTokenConfirmation.vue new file mode 100644 index 00000000..53a37e4b --- /dev/null +++ b/src/components/home/ImportTokenConfirmation.vue @@ -0,0 +1,80 @@ + + + + + + + + + + + + Confirm Import Token + + + + A standard token has been detected. This token will be saved to your custom tokens instead of your input. Do you want to proceed? + + + + + {{ $t("walletTransfer.cancel") }} + + + {{ $t("walletTransfer.confirm") }} + + + + + + + + + + diff --git a/src/pages/wallet/Home.vue b/src/pages/wallet/Home.vue index d23f7a4f..864a3b0c 100644 --- a/src/pages/wallet/Home.vue +++ b/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(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 => { return torus.conversionRate; }); @@ -102,16 +144,6 @@ const lastUpdateString = computed(() => { Import Token - @@ -134,6 +166,12 @@ const lastUpdateString = computed(() => { @import-canceled="importCanceled" @import-confirm="importConfirm" /> +
Confirm Import Token
+ A standard token has been detected. This token will be saved to your custom tokens instead of your input. Do you want to proceed? +