diff --git a/frontend/src/lib/components/accounts/ImportTokenCanisterId.svelte b/frontend/src/lib/components/accounts/ImportTokenCanisterId.svelte index 1c46ce0e7b5..1eb13108381 100644 --- a/frontend/src/lib/components/accounts/ImportTokenCanisterId.svelte +++ b/frontend/src/lib/components/accounts/ImportTokenCanisterId.svelte @@ -4,12 +4,13 @@ import LinkIcon from "$lib/components/common/LinkIcon.svelte"; export let label: string; + export let testId: string = "import-token-canister-id-component"; export let canisterId: string | undefined = undefined; export let canisterLinkHref: string | undefined = undefined; export let canisterIdFallback: string | undefined = undefined; -
+
{label}
{#if nonNullish(canisterId)} diff --git a/frontend/src/lib/components/accounts/ImportTokenForm.svelte b/frontend/src/lib/components/accounts/ImportTokenForm.svelte new file mode 100644 index 00000000000..64a914680ad --- /dev/null +++ b/frontend/src/lib/components/accounts/ImportTokenForm.svelte @@ -0,0 +1,72 @@ + + + +

{$i18n.import_token.description}

+ +
dispatch("nnsSubmit")}> + + {$i18n.import_token.ledger_label} + + + + + + +

+ +

+ + + +
+ + + +
+ +
 + + diff --git a/frontend/src/lib/components/accounts/ImportTokenReview.svelte b/frontend/src/lib/components/accounts/ImportTokenReview.svelte new file mode 100644 index 00000000000..55dffb951e3 --- /dev/null +++ b/frontend/src/lib/components/accounts/ImportTokenReview.svelte @@ -0,0 +1,105 @@ + + +
+
+ +
+
{tokenMetaData.name}
+
+ {tokenMetaData.symbol} +
+
+
+ + + + + + + +
+ + + +
+
+ + diff --git a/frontend/src/lib/components/ui/PrincipalInput.svelte b/frontend/src/lib/components/ui/PrincipalInput.svelte index baedf068c4b..9c224c1ddd6 100644 --- a/frontend/src/lib/components/ui/PrincipalInput.svelte +++ b/frontend/src/lib/components/ui/PrincipalInput.svelte @@ -7,6 +7,8 @@ export let placeholderLabelKey: string; export let name: string; export let principal: Principal | undefined = undefined; + export let required: boolean | undefined = undefined; + export let testId: string | undefined = undefined; let address = principal?.toText() ?? ""; $: principal = getPrincipalFromString(address); @@ -23,10 +25,12 @@ inputType="text" {placeholderLabelKey} {name} + {testId} bind:value={address} errorMessage={showError ? $i18n.error.principal_not_valid : undefined} on:blur={showErrorIfAny} showInfo={$$slots.label !== undefined} + {required} > diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json index 1915f884607..6e73c197b4e 100644 --- a/frontend/src/lib/i18n/en.json +++ b/frontend/src/lib/i18n/en.json @@ -1037,8 +1037,23 @@ "hide_zero_balances_toggle_label": "Switch between showing and hiding tokens with a balance of zero", "zero_balance_hidden": "Tokens with 0 balances are hidden.", "show_all": "Show all", - "import_token": "Import Token", "add_imported_token_success": "New token has been successfully imported!", "remove_imported_token_success": "The token has been successfully removed!" + }, + "import_token": { + "import_token": "Import Token", + "description": "To import a new token to your NNS dapp wallet, you will need to find, and paste the ledger canister id of the token. If you want to see your transaction history, you need to import the token’s index canister.", + "ledger_label": "Ledger Canister ID", + "index_label_optional": "Index Canister ID (Optional)", + "index_label": "Index Canister ID", + "index_fallback_label": "Transaction history won’t be displayed.", + "placeholder": "00000-00000-00000-00000-000", + "index_canister_description": "Index Canister allows to display a token balance and transaction history. Note: not all tokens have index canisters.", + "warning": "Warning: Be careful what token you import! Anyone can create a token including one with the same name as existing tokens, such as ckBTC.", + "verifying": "Veryifying token details...", + "review_token_info": "Review token info", + "import_button": "Import", + "ledger_canister_loading_error": "Unable to load token details using the provided Ledger Canister ID.", + "link_to_canister": "https://dashboard.internetcomputer.org/canister/$canisterId" } } diff --git a/frontend/src/lib/modals/accounts/ImportTokenModal.svelte b/frontend/src/lib/modals/accounts/ImportTokenModal.svelte new file mode 100644 index 00000000000..8cddcd15e85 --- /dev/null +++ b/frontend/src/lib/modals/accounts/ImportTokenModal.svelte @@ -0,0 +1,110 @@ + + + + {currentStep?.title} + + {#if currentStep?.name === STEP_FORM} + + {/if} + {#if currentStep?.name === STEP_REVIEW && nonNullish(ledgerCanisterId) && nonNullish(tokenMetaData)} + + {/if} + diff --git a/frontend/src/lib/pages/Tokens.svelte b/frontend/src/lib/pages/Tokens.svelte index 6c11737f20d..92e3c231ca5 100644 --- a/frontend/src/lib/pages/Tokens.svelte +++ b/frontend/src/lib/pages/Tokens.svelte @@ -11,6 +11,7 @@ import { Popover } from "@dfinity/gix-components"; import { TokenAmountV2 } from "@dfinity/utils"; import { ENABLE_IMPORT_TOKEN } from "$lib/stores/feature-flags.store"; + import ImportTokenModal from "$lib/modals/accounts/ImportTokenModal.svelte"; export let userTokensData: UserToken[]; @@ -41,9 +42,7 @@ hideZeroBalancesStore.set("show"); }; - const importToken = async () => { - // TBD: Implement import token. - }; + let showImportTokenModal = false; // TODO(Import token): After removing ENABLE_IMPORT_TOKEN combine divs ->
@@ -82,9 +81,9 @@
{:else if shouldHideZeroBalances} @@ -112,6 +111,10 @@ > + + {#if showImportTokenModal} + (showImportTokenModal = false)} /> + {/if}