From 460bd3e5e7c988cc52b451b3011c239b65c4e513 Mon Sep 17 00:00:00 2001 From: Max Strasinsky Date: Wed, 31 Jul 2024 11:16:23 +0200 Subject: [PATCH 01/22] feat: propagate more props from PrincipalInput --- frontend/src/lib/components/ui/PrincipalInput.svelte | 4 ++++ 1 file changed, 4 insertions(+) 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} > From 09ccd99d2d2adccb341f45893a910d636b3bd5b7 Mon Sep 17 00:00:00 2001 From: Max Strasinsky Date: Wed, 31 Jul 2024 11:16:44 +0200 Subject: [PATCH 02/22] New component ImportTokenForm --- .../accounts/ImportTokenForm.svelte | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 frontend/src/lib/components/accounts/ImportTokenForm.svelte diff --git a/frontend/src/lib/components/accounts/ImportTokenForm.svelte b/frontend/src/lib/components/accounts/ImportTokenForm.svelte new file mode 100644 index 00000000000..764507daed0 --- /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} + + + + + + +

+ +

+ + + +
+ + + +
+ +
 + + From f793680fd5808f47ad27e9f1126ca813473ea4f4 Mon Sep 17 00:00:00 2001 From: Max Strasinsky Date: Wed, 31 Jul 2024 11:23:03 +0200 Subject: [PATCH 03/22] Update labels --- frontend/src/lib/i18n/en.json | 16 +++++++++++++++- frontend/src/lib/types/i18n.d.ts | 16 ++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json index 1915f884607..a0097e61326 100644 --- a/frontend/src/lib/i18n/en.json +++ b/frontend/src/lib/i18n/en.json @@ -1036,8 +1036,22 @@ "hide_zero_balances": "Hide zero balances", "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", + "show_all": "Show all" + }, + "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", + "link_to_canister": "https://dashboard.internetcomputer.org/canister/$canisterId", "add_imported_token_success": "New token has been successfully imported!", "remove_imported_token_success": "The token has been successfully removed!" } diff --git a/frontend/src/lib/types/i18n.d.ts b/frontend/src/lib/types/i18n.d.ts index 5908d011372..cc9a0ef02fb 100644 --- a/frontend/src/lib/types/i18n.d.ts +++ b/frontend/src/lib/types/i18n.d.ts @@ -1097,7 +1097,22 @@ interface I18nTokens { hide_zero_balances_toggle_label: string; zero_balance_hidden: string; show_all: string; +} + +interface I18nImport_token { import_token: string; + description: string; + ledger_label: string; + index_label_optional: string; + index_label: string; + index_fallback_label: string; + placeholder: string; + index_canister_description: string; + warning: string; + verifying: string; + review_token_info: string; + import_button: string; + link_to_canister: string; add_imported_token_success: string; remove_imported_token_success: string; } @@ -1386,6 +1401,7 @@ interface I18n { settings: I18nSettings; sync: I18nSync; tokens: I18nTokens; + import_token: I18nImport_token; neuron_state: I18nNeuron_state; topics: I18nTopics; topics_description: I18nTopics_description; From 5e3f2eb3cdc6e40c49fc61a4849f85689908251a Mon Sep 17 00:00:00 2001 From: Max Strasinsky Date: Wed, 31 Jul 2024 11:23:53 +0200 Subject: [PATCH 04/22] New busy store initiator --- frontend/src/lib/stores/busy.store.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/stores/busy.store.ts b/frontend/src/lib/stores/busy.store.ts index 95291a7be3b..954680c21e3 100644 --- a/frontend/src/lib/stores/busy.store.ts +++ b/frontend/src/lib/stores/busy.store.ts @@ -45,7 +45,8 @@ export type BusyStateInitiatorType = | "dev-add-sns-neuron-maturity" | "dev-add-nns-neuron-maturity" | "update-ckbtc-balance" - | "reload-receive-account"; + | "reload-receive-account" + | "import-token-validation"; export interface BusyState { initiator: BusyStateInitiatorType; From 77d3b2084878704bc701a153733ac753266e3882 Mon Sep 17 00:00:00 2001 From: Max Strasinsky Date: Wed, 31 Jul 2024 11:24:02 +0200 Subject: [PATCH 05/22] feat: fetchIcrcTokenMetaData service --- .../src/lib/services/icrc-accounts.services.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/services/icrc-accounts.services.ts b/frontend/src/lib/services/icrc-accounts.services.ts index 32fd445e16a..bcb3ae81d0f 100644 --- a/frontend/src/lib/services/icrc-accounts.services.ts +++ b/frontend/src/lib/services/icrc-accounts.services.ts @@ -5,7 +5,10 @@ import { } from "$lib/api/icrc-ledger.api"; import { FORCE_CALL_STRATEGY } from "$lib/constants/mockable.constants"; import { snsTokensByLedgerCanisterIdStore } from "$lib/derived/sns/sns-tokens.derived"; -import { getAuthenticatedIdentity } from "$lib/services/auth.services"; +import { + getAuthenticatedIdentity, + getCurrentIdentity, +} from "$lib/services/auth.services"; import { icrcAccountsStore } from "$lib/stores/icrc-accounts.store"; import { icrcTransactionsStore } from "$lib/stores/icrc-transactions.store"; import { toastsError } from "$lib/stores/toasts.store"; @@ -32,6 +35,19 @@ export const getIcrcAccountIdentity = (_: Account): Promise => { return getAuthenticatedIdentity(); }; +// Returns null if the token is not found +export const fetchIcrcTokenMetaData = async ({ + ledgerCanisterId, +}: { + ledgerCanisterId: Principal; +}): Promise => { + return queryIcrcToken({ + identity: getCurrentIdentity(), + canisterId: ledgerCanisterId, + certified: false, + }).catch(() => null); +}; + export const loadIcrcToken = ({ ledgerCanisterId, certified = true, From 73e8970b243f12a7ead626df3bfab72feaa9eb00 Mon Sep 17 00:00:00 2001 From: Max Strasinsky Date: Wed, 31 Jul 2024 11:24:36 +0200 Subject: [PATCH 06/22] New component ImportTokenReview --- .../accounts/ImportTokenReview.svelte | 108 ++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 frontend/src/lib/components/accounts/ImportTokenReview.svelte diff --git a/frontend/src/lib/components/accounts/ImportTokenReview.svelte b/frontend/src/lib/components/accounts/ImportTokenReview.svelte new file mode 100644 index 00000000000..3b179b3a436 --- /dev/null +++ b/frontend/src/lib/components/accounts/ImportTokenReview.svelte @@ -0,0 +1,108 @@ + + +
+
+ +
+
{tokenMetaData.name}
+
+ {tokenMetaData.symbol} +
+
+
+ + + + + + + + + + + +
+ + + +
+
+ + From e988727368c2f44c036c6b6a765efd4bf0918b84 Mon Sep 17 00:00:00 2001 From: Max Strasinsky Date: Wed, 31 Jul 2024 11:25:07 +0200 Subject: [PATCH 07/22] New component ImportTokenModal --- .../modals/accounts/ImportTokenModal.svelte | 106 ++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 frontend/src/lib/modals/accounts/ImportTokenModal.svelte diff --git a/frontend/src/lib/modals/accounts/ImportTokenModal.svelte b/frontend/src/lib/modals/accounts/ImportTokenModal.svelte new file mode 100644 index 00000000000..de3dc051f42 --- /dev/null +++ b/frontend/src/lib/modals/accounts/ImportTokenModal.svelte @@ -0,0 +1,106 @@ + + + + {currentStep?.title} + + {#if currentStep?.name === STEP_FORM} + + {/if} + {#if currentStep?.name === STEP_REVIEW && nonNullish(ledgerCanisterId) && nonNullish(tokenMetaData)} + + {/if} + From ffecb60c36c80060df80f828a660eb2e785cbca6 Mon Sep 17 00:00:00 2001 From: Max Strasinsky Date: Wed, 31 Jul 2024 11:25:36 +0200 Subject: [PATCH 08/22] feat: display the modal on import token click --- frontend/src/lib/pages/Tokens.svelte | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) 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}