diff --git a/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte b/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte index 4d3b48d53cc..7a16adbaabf 100644 --- a/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte +++ b/frontend/src/lib/components/tokens/TokensTable/TokenActionsCell.svelte @@ -5,7 +5,8 @@ type UserTokenData, type UserTokenLoading, } from "$lib/types/tokens-page"; - import { isUserTokenData } from "$lib/utils/user-token.utils"; + import { isUserTokenLoading } from "$lib/utils/user-token.utils"; + import GoToDashboardButton from "./actions/GoToDashboardButton.svelte"; import GoToDetailIcon from "./actions/GoToDetailIcon.svelte"; import ReceiveButton from "./actions/ReceiveButton.svelte"; import SendButton from "./actions/SendButton.svelte"; @@ -16,15 +17,18 @@ const actionMapper: Record< UserTokenAction, - ComponentType> + ComponentType< + SvelteComponent<{ userToken: UserTokenData | UserTokenFailed }> + > > = { [UserTokenAction.GoToDetail]: GoToDetailIcon, [UserTokenAction.Receive]: ReceiveButton, [UserTokenAction.Send]: SendButton, + [UserTokenAction.GoToDashboard]: GoToDashboardButton, }; - let userToken: UserTokenData | undefined; - $: userToken = isUserTokenData(rowData) ? rowData : undefined; + let userToken: UserTokenData | UserTokenFailed | undefined; + $: userToken = isUserTokenLoading(rowData) ? undefined : rowData; {#if nonNullish(userToken)} diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte new file mode 100644 index 00000000000..003a5a0a1cb --- /dev/null +++ b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDashboardButton.svelte @@ -0,0 +1,12 @@ + + + diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/GoToDetailIcon.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDetailIcon.svelte index 68ab88a9780..56e5e9d4da0 100644 --- a/frontend/src/lib/components/tokens/TokensTable/actions/GoToDetailIcon.svelte +++ b/frontend/src/lib/components/tokens/TokensTable/actions/GoToDetailIcon.svelte @@ -1,9 +1,9 @@ diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/ReceiveButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/ReceiveButton.svelte index d2c8846b8aa..5ade167d78c 100644 --- a/frontend/src/lib/components/tokens/TokensTable/actions/ReceiveButton.svelte +++ b/frontend/src/lib/components/tokens/TokensTable/actions/ReceiveButton.svelte @@ -1,20 +1,24 @@ - +{#if isUserTokenData(userToken)} + +{/if} diff --git a/frontend/src/lib/components/tokens/TokensTable/actions/SendButton.svelte b/frontend/src/lib/components/tokens/TokensTable/actions/SendButton.svelte index ccb85be8782..3f99a72bd55 100644 --- a/frontend/src/lib/components/tokens/TokensTable/actions/SendButton.svelte +++ b/frontend/src/lib/components/tokens/TokensTable/actions/SendButton.svelte @@ -1,20 +1,24 @@ - +{#if isUserTokenData(userToken)} + +{/if} diff --git a/frontend/src/lib/types/tokens-page.ts b/frontend/src/lib/types/tokens-page.ts index 3157f2ff5a0..e5e4651266a 100644 --- a/frontend/src/lib/types/tokens-page.ts +++ b/frontend/src/lib/types/tokens-page.ts @@ -17,6 +17,7 @@ export enum UserTokenAction { Send = "send", GoToDetail = "goToDetail", Receive = "receive", + GoToDashboard = "goToDashboard", } export type UserTokenBase = { diff --git a/frontend/src/lib/utils/user-token.utils.ts b/frontend/src/lib/utils/user-token.utils.ts index d67b9fb378e..6eecfa64790 100644 --- a/frontend/src/lib/utils/user-token.utils.ts +++ b/frontend/src/lib/utils/user-token.utils.ts @@ -1,8 +1,9 @@ import UNKNOWN_LOGO from "$lib/assets/question-mark.svg"; -import type { - UserTokenData, - UserTokenFailed, - UserTokenLoading, +import { + UserTokenAction, + type UserTokenData, + type UserTokenFailed, + type UserTokenLoading, } from "$lib/types/tokens-page"; import { Principal } from "@dfinity/principal"; @@ -33,5 +34,5 @@ export const toUserTokenFailed = ( logo: UNKNOWN_LOGO, balance: "failed", domKey: ledgerCanisterIdText, - actions: [], + actions: [UserTokenAction.GoToDashboard], }); diff --git a/frontend/src/tests/page-objects/TokensTableRow.page-object.ts b/frontend/src/tests/page-objects/TokensTableRow.page-object.ts index fe4bc65bc22..86beb61cda5 100644 --- a/frontend/src/tests/page-objects/TokensTableRow.page-object.ts +++ b/frontend/src/tests/page-objects/TokensTableRow.page-object.ts @@ -3,6 +3,7 @@ import type { PageObjectElement } from "$tests/types/page-object.types"; import { nonNullish } from "@dfinity/utils"; import { AmountDisplayPo } from "./AmountDisplay.page-object"; import { HashPo } from "./Hash.page-object"; +import { LinkToDashboardCanisterPo } from "./LinkToDashboardCanister.page-object"; import { TooltipPo } from "./Tooltip.page-object"; export type TokensTableRowData = { @@ -134,6 +135,10 @@ export class TokensTableRowPo extends ResponsiveTableRowPo { return this.root.byTestId("go-to-detail-icon-component"); } + getGoToDashboardButton(): LinkToDashboardCanisterPo { + return LinkToDashboardCanisterPo.under({ element: this.root }); + } + hasGoToDetailIcon(): Promise { return this.getGoToDetailIcon().isPresent(); } diff --git a/frontend/src/tests/routes/app/tokens/page.spec.ts b/frontend/src/tests/routes/app/tokens/page.spec.ts index 78bdac07e34..e0d6dcdff80 100644 --- a/frontend/src/tests/routes/app/tokens/page.spec.ts +++ b/frontend/src/tests/routes/app/tokens/page.spec.ts @@ -789,6 +789,39 @@ describe("Tokens route", () => { } } }); + + it("should not display goto dashboard for not failed tokens", async () => { + const po = await renderPage(); + const tokensPagePo = po.getTokensPagePo(); + const ckBTCTokenRow = await tokensPagePo + .getTokensTable() + .getRowByName("ckBTC"); + const notFailedTokenRow = await tokensPagePo + .getTokensTable() + .getRowByName("ZTOKEN1"); + + expect( + await ckBTCTokenRow.getGoToDashboardButton().isPresent() + ).toEqual(false); + expect( + await notFailedTokenRow.getGoToDashboardButton().isPresent() + ).toEqual(false); + }); + + it("should have view on dashboard action button", async () => { + const po = await renderPage(); + const tokensPagePo = po.getTokensPagePo(); + const failedTokenRow = await tokensPagePo + .getTokensTable() + .getRowByName(failedImportedTokenIdText); + + expect( + await failedTokenRow.getGoToDashboardButton().isPresent() + ).toEqual(true); + expect(await failedTokenRow.getGoToDashboardButton().getHref()).toEqual( + `https://dashboard.internetcomputer.org/canister/${failedImportedTokenIdText}` + ); + }); }); describe("when logged out", () => {