From 01eb37af201639dd118c4369d3c9b894fce02a8b Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Mon, 16 Dec 2024 10:39:28 +0100 Subject: [PATCH 001/109] implements VipQrCodeModal --- .../lib/components/qr/VipQrCodeModal.svelte | 44 +++++++++++++++++++ src/frontend/src/lib/derived/modal.derived.ts | 4 ++ src/frontend/src/lib/i18n/en.json | 7 +++ src/frontend/src/lib/stores/modal.store.ts | 3 ++ src/frontend/src/lib/types/i18n.d.ts | 9 ++++ 5 files changed, 67 insertions(+) create mode 100644 src/frontend/src/lib/components/qr/VipQrCodeModal.svelte diff --git a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte new file mode 100644 index 0000000000..09bf9b38c1 --- /dev/null +++ b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte @@ -0,0 +1,44 @@ + + + + {replaceOisyPlaceholders($i18n.vip.qr.text.title)} + + + + +
+ {#if nonNullish(code)} + + +
+ +
+ + + {/if} +
+ + + + \ No newline at end of file diff --git a/src/frontend/src/lib/derived/modal.derived.ts b/src/frontend/src/lib/derived/modal.derived.ts index 32e45708ed..1eb9b484a7 100644 --- a/src/frontend/src/lib/derived/modal.derived.ts +++ b/src/frontend/src/lib/derived/modal.derived.ts @@ -109,6 +109,10 @@ export const modalAboutWhyOisy: Readable = derived( modalStore, ($modalStore) => $modalStore?.type === 'about-why-oisy' ); +export const modalVipQrCode: Readable = derived( + modalStore, + ($modalStore) => $modalStore?.type === 'vip-qr-code' +); export const modalDAppDetails: Readable = derived( modalStore, ($modalStore) => $modalStore?.type === 'dapp-details' diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json index 37c79642c9..06c94e72b2 100644 --- a/src/frontend/src/lib/i18n/en.json +++ b/src/frontend/src/lib/i18n/en.json @@ -733,6 +733,13 @@ } } }, + "vip": { + "qr": { + "text": { + "title": "Generate invitation link" + } + } + }, "signer": { "sign_in": { "text": { diff --git a/src/frontend/src/lib/stores/modal.store.ts b/src/frontend/src/lib/stores/modal.store.ts index 0d564c67c5..930aa818de 100644 --- a/src/frontend/src/lib/stores/modal.store.ts +++ b/src/frontend/src/lib/stores/modal.store.ts @@ -29,6 +29,7 @@ export interface Modal { | 'ic-token' | 'receive-bitcoin' | 'about-why-oisy' + | 'vip-qr-code' | 'btc-transaction' | 'dapp-details'; data?: T; @@ -65,6 +66,7 @@ export interface ModalStore extends Readable> { openIcToken: () => void; openReceiveBitcoin: () => void; openAboutWhyOisy: () => void; + openVipQrCode: () => void; openDappDetails: (data: D) => void; close: () => void; } @@ -109,6 +111,7 @@ const initModalStore = (): ModalStore => { openIcToken: setType('ic-token'), openReceiveBitcoin: setType('receive-bitcoin'), openAboutWhyOisy: setType('about-why-oisy'), + openVipQrCode: setType('vip-qr-code'), openDappDetails: setTypeWithData('dapp-details'), close: () => set(null), subscribe diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts index e1819c6830..34aca7a4a5 100644 --- a/src/frontend/src/lib/types/i18n.d.ts +++ b/src/frontend/src/lib/types/i18n.d.ts @@ -643,6 +643,14 @@ interface I18nAbout { }; } +interface I18nVip { + qr: { + text: { + title: string; + } + } +} + interface I18nSigner { sign_in: { text: { access_your_wallet: string; open_or_create: string } }; idle: { text: { waiting: string }; alt: { img_placeholder: string } }; @@ -731,6 +739,7 @@ interface I18n { transaction: I18nTransaction; transactions: I18nTransactions; about: I18nAbout; + vip: I18nVip; signer: I18nSigner; carousel: I18nCarousel; license_agreement: I18nLicense_agreement; From cee918394a9221b65ad509443c525bad45d5a70c Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Mon, 16 Dec 2024 10:55:10 +0100 Subject: [PATCH 002/109] adds invitation link address field --- .../src/lib/components/qr/VipQrCodeModal.svelte | 14 ++++++++++++-- src/frontend/src/lib/i18n/en.json | 5 +++-- src/frontend/src/lib/types/i18n.d.ts | 3 ++- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte index 09bf9b38c1..23a3e7ddf6 100644 --- a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte +++ b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte @@ -7,6 +7,8 @@ import ButtonCloseModal from '$lib/components/ui/ButtonCloseModal.svelte'; import IconAstronautHelmet from '$lib/components/icons/IconAstronautHelmet.svelte'; import { nonNullish } from '@dfinity/utils'; + import SkeletonText from '$lib/components/ui/SkeletonText.svelte'; + import ReceiveCopy from '$lib/components/receive/ReceiveCopy.svelte'; let code; $: code = '02vn3uCMKZG' // TODO generate Code @@ -22,11 +24,10 @@ {replaceOisyPlaceholders($i18n.vip.qr.text.title)} + >{replaceOisyPlaceholders($i18n.vip.invitation.text.title)} -
{#if nonNullish(code)} @@ -39,6 +40,15 @@ {/if}
+ {#if nonNullish(code)} +
+ {qrCodeUrl} + +
+ {:else} + + {/if} + \ No newline at end of file diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json index 06c94e72b2..4f3e3780bc 100644 --- a/src/frontend/src/lib/i18n/en.json +++ b/src/frontend/src/lib/i18n/en.json @@ -734,9 +734,10 @@ } }, "vip": { - "qr": { + "invitation": { "text": { - "title": "Generate invitation link" + "title": "Generate invitation link", + "invitation_link_copied": "Invitation link copied to clipboard." } } }, diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts index 34aca7a4a5..f917c4c4a6 100644 --- a/src/frontend/src/lib/types/i18n.d.ts +++ b/src/frontend/src/lib/types/i18n.d.ts @@ -644,9 +644,10 @@ interface I18nAbout { } interface I18nVip { - qr: { + invitation: { text: { title: string; + invitation_link_copied: string; } } } From a4db206e1e668219688157936d96e04a1c71ca8e Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Mon, 16 Dec 2024 12:02:36 +0100 Subject: [PATCH 003/109] adds generate new link button --- .../lib/components/qr/VipQrCodeModal.svelte | 37 ++++++++++++++++--- src/frontend/src/lib/i18n/en.json | 3 +- src/frontend/src/lib/types/i18n.d.ts | 1 + 3 files changed, 34 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte index 23a3e7ddf6..0525d33763 100644 --- a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte +++ b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte @@ -9,17 +9,35 @@ import { nonNullish } from '@dfinity/utils'; import SkeletonText from '$lib/components/ui/SkeletonText.svelte'; import ReceiveCopy from '$lib/components/receive/ReceiveCopy.svelte'; + import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte'; + import Button from '$lib/components/ui/Button.svelte'; + + function generateRandomString() { // TODO remove this function + var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; + var result = ''; + for (var i = 0; i < 11; i++ ) { + result += chars.charAt(Math.floor(Math.random() * chars.length)); + } + return result; + } + + let code; - $: code = '02vn3uCMKZG' // TODO generate Code + const generateCode = () => { + code = generateRandomString() // TODO load Code from backend + } + + const regenerateCode = () => { + generateCode(); + } + + generateCode(); let oisyCodeBaseUrl = 'https://oisy.com/?code='; let qrCodeUrl; $: qrCodeUrl = `${oisyCodeBaseUrl}${code}`; - - $: console.log(qrCodeUrl) - @@ -28,7 +46,7 @@ -
+
{#if nonNullish(code)} @@ -45,10 +63,17 @@ {qrCodeUrl}
+ + New link will be generated in 45 sec {:else} {/if} - + + + + \ No newline at end of file diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json index 4f3e3780bc..1d1fc2a0ef 100644 --- a/src/frontend/src/lib/i18n/en.json +++ b/src/frontend/src/lib/i18n/en.json @@ -737,7 +737,8 @@ "invitation": { "text": { "title": "Generate invitation link", - "invitation_link_copied": "Invitation link copied to clipboard." + "invitation_link_copied": "Invitation link copied to clipboard.", + "new_link": "Generate new link" } } }, diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts index f917c4c4a6..318df57612 100644 --- a/src/frontend/src/lib/types/i18n.d.ts +++ b/src/frontend/src/lib/types/i18n.d.ts @@ -648,6 +648,7 @@ interface I18nVip { text: { title: string; invitation_link_copied: string; + new_link: string; } } } From cd54a8507e7fe6e243cb550daae53bc2eb016f88 Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Mon, 16 Dec 2024 12:44:52 +0100 Subject: [PATCH 004/109] adds countdown to regenerate qr code --- .../lib/components/qr/VipQrCodeModal.svelte | 36 +++++++++++++++---- src/frontend/src/lib/i18n/en.json | 3 +- src/frontend/src/lib/types/i18n.d.ts | 3 +- 3 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte index 0525d33763..5144ee83de 100644 --- a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte +++ b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte @@ -1,7 +1,7 @@ + + + + + + + + + + + + + + + diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json index 37c79642c9..8384daeecd 100644 --- a/src/frontend/src/lib/i18n/en.json +++ b/src/frontend/src/lib/i18n/en.json @@ -41,7 +41,8 @@ "source_code": "Source code", "changelog": "Changelog", "submit_ticket": "Submit a ticket", - "confirm_navigate": "Are you sure you want to navigate away?" + "confirm_navigate": "Are you sure you want to navigate away?", + "vip_qr_code": "VIP QR codes" }, "alt": { "tokens": "Go to the assets view", diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts index e1819c6830..746123bf84 100644 --- a/src/frontend/src/lib/types/i18n.d.ts +++ b/src/frontend/src/lib/types/i18n.d.ts @@ -38,6 +38,7 @@ interface I18nNavigation { changelog: string; submit_ticket: string; confirm_navigate: string; + vip_qr_code: string; }; alt: { tokens: string; From 64cfb2ec8c3eaa77607232ebd1a61302adbfcdd0 Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Mon, 16 Dec 2024 14:54:50 +0100 Subject: [PATCH 007/109] adds alt text to button --- src/frontend/src/lib/components/core/Menu.svelte | 2 +- src/frontend/src/lib/i18n/en.json | 3 ++- src/frontend/src/lib/types/i18n.d.ts | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte index 1b2c3e170e..a2d675c700 100644 --- a/src/frontend/src/lib/components/core/Menu.svelte +++ b/src/frontend/src/lib/components/core/Menu.svelte @@ -129,7 +129,7 @@ {/if} {#if isVip} - console.log("openModal")}> + {$i18n.navigation.text.vip_qr_code} diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json index 8384daeecd..eced597afc 100644 --- a/src/frontend/src/lib/i18n/en.json +++ b/src/frontend/src/lib/i18n/en.json @@ -53,7 +53,8 @@ "menu": "Your wallet address, settings, sign-out and external links", "changelog": "Open the changelog of $oisy_name on GitHub to review the latest updates", "submit_ticket": "Report an issue or request a feature on GitHub", - "open_twitter": "Open the DFINITY X/Twitter feed" + "open_twitter": "Open the DFINITY X/Twitter feed", + "vip_qr_code": "Generate an invitation link" } }, "auth": { diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts index 746123bf84..c900592da7 100644 --- a/src/frontend/src/lib/types/i18n.d.ts +++ b/src/frontend/src/lib/types/i18n.d.ts @@ -50,6 +50,7 @@ interface I18nNavigation { changelog: string; submit_ticket: string; open_twitter: string; + vip_qr_code: string; }; } From e12f611a5de1b95414660686f1b4c0061dc08b5a Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Mon, 16 Dec 2024 14:55:45 +0100 Subject: [PATCH 008/109] removes unused import --- src/frontend/src/lib/components/core/Menu.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte index a2d675c700..479ffb5b28 100644 --- a/src/frontend/src/lib/components/core/Menu.svelte +++ b/src/frontend/src/lib/components/core/Menu.svelte @@ -31,7 +31,6 @@ networkUrl } from '$lib/utils/nav.utils'; import IconVipQr from '$lib/components/icons/IconVipQr.svelte'; - import { modalStore } from '$lib/stores/modal.store'; import { userSettings } from '$lib/derived/user-profile.derived'; let visible = false; From 1d7f8c1d3513708cc17ce63e2d2265a7c28f787a Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Mon, 16 Dec 2024 14:58:43 +0100 Subject: [PATCH 009/109] resolves lint issue --- src/frontend/src/lib/components/core/Menu.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte index 479ffb5b28..4094959632 100644 --- a/src/frontend/src/lib/components/core/Menu.svelte +++ b/src/frontend/src/lib/components/core/Menu.svelte @@ -128,7 +128,7 @@ {/if} {#if isVip} - + console.log("openModal")}> {$i18n.navigation.text.vip_qr_code} From 1bb17892a6f2023301dbeb6f9b54cdf0de701bbd Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Mon, 16 Dec 2024 15:01:43 +0100 Subject: [PATCH 010/109] resolves lint issue --- src/frontend/src/lib/components/core/Menu.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte index 4094959632..312f60cc4c 100644 --- a/src/frontend/src/lib/components/core/Menu.svelte +++ b/src/frontend/src/lib/components/core/Menu.svelte @@ -128,7 +128,7 @@ {/if} {#if isVip} - console.log("openModal")}> + {}}> {$i18n.navigation.text.vip_qr_code} From 872a275c96f3a528044a1b78eab3942af7a6e7c6 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 16 Dec 2024 14:03:33 +0000 Subject: [PATCH 011/109] =?UTF-8?q?=F0=9F=A4=96=20Apply=20formatting=20cha?= =?UTF-8?q?nges?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/lib/components/core/Menu.svelte | 4 +- .../src/lib/components/icons/IconVipQr.svelte | 84 ++++++++++++++++--- 2 files changed, 74 insertions(+), 14 deletions(-) diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte index 312f60cc4c..87b1efa1cd 100644 --- a/src/frontend/src/lib/components/core/Menu.svelte +++ b/src/frontend/src/lib/components/core/Menu.svelte @@ -7,6 +7,7 @@ import MenuAddresses from '$lib/components/core/MenuAddresses.svelte'; import SignOut from '$lib/components/core/SignOut.svelte'; import IconGitHub from '$lib/components/icons/IconGitHub.svelte'; + import IconVipQr from '$lib/components/icons/IconVipQr.svelte'; import IconWallet from '$lib/components/icons/IconWallet.svelte'; import IconActivity from '$lib/components/icons/iconly/IconActivity.svelte'; import IconlySettings from '$lib/components/icons/iconly/IconlySettings.svelte'; @@ -21,6 +22,7 @@ import { AppPath } from '$lib/constants/routes.constants'; import { NAVIGATION_MENU_BUTTON, NAVIGATION_MENU } from '$lib/constants/test-ids.constants'; import { networkId } from '$lib/derived/network.derived'; + import { userSettings } from '$lib/derived/user-profile.derived'; import { i18n } from '$lib/stores/i18n.store'; import { isRouteActivity, @@ -30,8 +32,6 @@ isRouteTransactions, networkUrl } from '$lib/utils/nav.utils'; - import IconVipQr from '$lib/components/icons/IconVipQr.svelte'; - import { userSettings } from '$lib/derived/user-profile.derived'; let visible = false; let button: HTMLButtonElement | undefined; diff --git a/src/frontend/src/lib/components/icons/IconVipQr.svelte b/src/frontend/src/lib/components/icons/IconVipQr.svelte index 7ba6c32780..6c5023dc6c 100644 --- a/src/frontend/src/lib/components/icons/IconVipQr.svelte +++ b/src/frontend/src/lib/components/icons/IconVipQr.svelte @@ -3,16 +3,76 @@ - - - - - - - - - - - - + + + + + + + + + + + + From f97e89b72bb1ea7ccfddda382796e183400b8857 Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Mon, 16 Dec 2024 15:09:01 +0100 Subject: [PATCH 012/109] opens qr code modal on menu click --- src/frontend/src/lib/components/core/Menu.svelte | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte index 87b1efa1cd..d21248fd15 100644 --- a/src/frontend/src/lib/components/core/Menu.svelte +++ b/src/frontend/src/lib/components/core/Menu.svelte @@ -32,6 +32,9 @@ isRouteTransactions, networkUrl } from '$lib/utils/nav.utils'; + import { modalStore } from '$lib/stores/modal.store'; + import { modalVipQrCode } from '$lib/derived/modal.derived'; + import VipQrCodeModal from '$lib/components/qr/VipQrCodeModal.svelte'; let visible = false; let button: HTMLButtonElement | undefined; @@ -65,6 +68,8 @@ const goToActivity = async () => await navigateTo(AppPath.Activity); + const openVipQrCode = () => modalStore.openVipQrCode(); + let assetsRoute = false; $: assetsRoute = isRouteTokens($page); @@ -128,7 +133,7 @@ {/if} {#if isVip} - {}}> + {$i18n.navigation.text.vip_qr_code} @@ -169,3 +174,7 @@
+ +{#if $modalVipQrCode} + +{/if} From 25f50e2aa599e6a8c0bfe41c13bb6d93d9b14a61 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 16 Dec 2024 14:10:25 +0000 Subject: [PATCH 013/109] =?UTF-8?q?=F0=9F=A4=96=20Updated=20i18n=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/lib/types/i18n.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/lib/types/i18n.d.ts b/src/frontend/src/lib/types/i18n.d.ts index 3d2a24bcf6..1e56b22060 100644 --- a/src/frontend/src/lib/types/i18n.d.ts +++ b/src/frontend/src/lib/types/i18n.d.ts @@ -652,8 +652,8 @@ interface I18nVip { invitation_link_copied: string; generate_new_link: string; regenerate_countdown_text: string; - } - } + }; + }; } interface I18nSigner { From 8c3e70a4c8294f726633824e413d522f017c48f5 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 16 Dec 2024 14:12:02 +0000 Subject: [PATCH 014/109] =?UTF-8?q?=F0=9F=A4=96=20Apply=20formatting=20cha?= =?UTF-8?q?nges?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/lib/components/core/Menu.svelte | 6 +-- .../lib/components/qr/VipQrCodeModal.svelte | 43 ++++++++++--------- 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte index d21248fd15..8ee4a9fa46 100644 --- a/src/frontend/src/lib/components/core/Menu.svelte +++ b/src/frontend/src/lib/components/core/Menu.svelte @@ -14,6 +14,7 @@ import IconlyUfo from '$lib/components/icons/iconly/IconlyUfo.svelte'; import LicenseLink from '$lib/components/license-agreement/LicenseLink.svelte'; import ChangelogLink from '$lib/components/navigation/ChangelogLink.svelte'; + import VipQrCodeModal from '$lib/components/qr/VipQrCodeModal.svelte'; import ButtonIcon from '$lib/components/ui/ButtonIcon.svelte'; import ButtonMenu from '$lib/components/ui/ButtonMenu.svelte'; import ExternalLink from '$lib/components/ui/ExternalLink.svelte'; @@ -21,9 +22,11 @@ import { OISY_REPO_URL } from '$lib/constants/oisy.constants'; import { AppPath } from '$lib/constants/routes.constants'; import { NAVIGATION_MENU_BUTTON, NAVIGATION_MENU } from '$lib/constants/test-ids.constants'; + import { modalVipQrCode } from '$lib/derived/modal.derived'; import { networkId } from '$lib/derived/network.derived'; import { userSettings } from '$lib/derived/user-profile.derived'; import { i18n } from '$lib/stores/i18n.store'; + import { modalStore } from '$lib/stores/modal.store'; import { isRouteActivity, isRouteDappExplorer, @@ -32,9 +35,6 @@ isRouteTransactions, networkUrl } from '$lib/utils/nav.utils'; - import { modalStore } from '$lib/stores/modal.store'; - import { modalVipQrCode } from '$lib/derived/modal.derived'; - import VipQrCodeModal from '$lib/components/qr/VipQrCodeModal.svelte'; let visible = false; let button: HTMLButtonElement | undefined; diff --git a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte index eea95aaf35..7c22d4caed 100644 --- a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte +++ b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte @@ -1,43 +1,43 @@ diff --git a/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts b/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts new file mode 100644 index 0000000000..951ab2dc89 --- /dev/null +++ b/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts @@ -0,0 +1,92 @@ +import type { Identity } from '@dfinity/agent'; +import { mockIdentity } from '$tests/mocks/identity.mock'; +import { readable } from 'svelte/store'; +import * as authStore from '$lib/derived/auth.derived'; +import { render, waitFor } from '@testing-library/svelte'; +import VipQrCodeModal from '$lib/components/qr/VipQrCodeModal.svelte'; +import type { NewVipRewardResponse } from '$declarations/rewards/rewards.did'; +import { vi } from 'vitest'; +import * as rewardApi from '$lib/api/reward.api'; + +describe('VipQrCodeModal', () => { + const qrCodeSelector = `div[data-tid="qr-code"]`; + const urlSelector = `output`; + const copyButtonSelector = `button[data-tid="vip-qr-code-copy-button"]`; + const regenerateButtonSelector = `button[data-tid="vip-code-regenerate-button"]`; + + const mockAuthStore = (value: Identity | null = mockIdentity) => + vi.spyOn(authStore, 'authIdentity', 'get').mockImplementation(() => readable(value)); + + const mockedNewRewardResponse: NewVipRewardResponse = { + VipReward: { + code: '1234567890' + } + }; + + it('renders the vip qr code modal items', async () => { + mockAuthStore(); + vi.spyOn(rewardApi, 'getNewVipReward').mockResolvedValue(mockedNewRewardResponse); + + const { container } = render(VipQrCodeModal); + + await waitFor(() => { + const qrCode: HTMLDivElement | null = container.querySelector(qrCodeSelector); + const qrCodeURL: HTMLOutputElement | null = container.querySelector(urlSelector); + const copyButton: HTMLButtonElement | null = container.querySelector(copyButtonSelector); + const regenerateButton: HTMLButtonElement | null = container.querySelector(regenerateButtonSelector); + + if (qrCode === null || qrCodeURL === null || copyButton === null || regenerateButton === null) { + throw new Error('one of the elements is not yet loaded.'); + } + + expect(qrCode).toBeInTheDocument(); + + expect(qrCodeURL).toBeInTheDocument(); + expect(qrCodeURL?.textContent?.includes(mockedNewRewardResponse.VipReward.code)); + + expect(copyButton).toBeInTheDocument(); + + expect(regenerateButton).toBeInTheDocument(); + }); + }); + + it('regenerates reward code', async () => { + const regeneratedNewRewardResponse: NewVipRewardResponse = { + VipReward: { + code: '0987654321' + } + }; + + mockAuthStore(); + vi.spyOn(rewardApi, 'getNewVipReward').mockResolvedValue(mockedNewRewardResponse); + + const { container } = render(VipQrCodeModal); + + await waitFor(() => { + const qrCodeURL: HTMLOutputElement | null = container.querySelector(urlSelector); + const regenerateButton: HTMLButtonElement | null = container.querySelector(regenerateButtonSelector); + + if (qrCodeURL === null || regenerateButton === null) { + throw new Error('one of the elements is not yet loaded.'); + } + + expect(qrCodeURL).toBeInTheDocument(); + expect(qrCodeURL?.textContent?.includes(mockedNewRewardResponse.VipReward.code)); + + expect(regenerateButton).toBeInTheDocument(); + + vi.spyOn(rewardApi, 'getNewVipReward').mockResolvedValue(regeneratedNewRewardResponse); + regenerateButton.click(); + }); + + await waitFor(() => { + const reloadedQrCodeUrl: HTMLOutputElement | null = container.querySelector(urlSelector); + + if (reloadedQrCodeUrl === null || !reloadedQrCodeUrl?.textContent?.includes(regeneratedNewRewardResponse.VipReward.code)) { + throw new Error('reward code not yet reloaded.'); + } + + expect(reloadedQrCodeUrl?.textContent?.includes(regeneratedNewRewardResponse.VipReward.code)); + }); + }); +}); \ No newline at end of file From fee9a2e984aba77c0795aa05228a41c0ac01c8b9 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 7 Jan 2025 09:22:10 +0000 Subject: [PATCH 096/109] =?UTF-8?q?=F0=9F=A4=96=20Apply=20formatting=20cha?= =?UTF-8?q?nges?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/components/qr/VipQrCodeModal.svelte | 9 ++++- .../lib/components/qr/VipQrCodeModal.spec.ts | 34 ++++++++++++------- 2 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte index eebe496021..f47e184e56 100644 --- a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte +++ b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte @@ -93,7 +93,14 @@ - diff --git a/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts b/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts index 951ab2dc89..1c69fab71a 100644 --- a/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts +++ b/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts @@ -1,12 +1,12 @@ -import type { Identity } from '@dfinity/agent'; -import { mockIdentity } from '$tests/mocks/identity.mock'; -import { readable } from 'svelte/store'; +import type { NewVipRewardResponse } from '$declarations/rewards/rewards.did'; +import * as rewardApi from '$lib/api/reward.api'; +import VipQrCodeModal from '$lib/components/qr/VipQrCodeModal.svelte'; import * as authStore from '$lib/derived/auth.derived'; +import { mockIdentity } from '$tests/mocks/identity.mock'; +import type { Identity } from '@dfinity/agent'; import { render, waitFor } from '@testing-library/svelte'; -import VipQrCodeModal from '$lib/components/qr/VipQrCodeModal.svelte'; -import type { NewVipRewardResponse } from '$declarations/rewards/rewards.did'; +import { readable } from 'svelte/store'; import { vi } from 'vitest'; -import * as rewardApi from '$lib/api/reward.api'; describe('VipQrCodeModal', () => { const qrCodeSelector = `div[data-tid="qr-code"]`; @@ -33,9 +33,15 @@ describe('VipQrCodeModal', () => { const qrCode: HTMLDivElement | null = container.querySelector(qrCodeSelector); const qrCodeURL: HTMLOutputElement | null = container.querySelector(urlSelector); const copyButton: HTMLButtonElement | null = container.querySelector(copyButtonSelector); - const regenerateButton: HTMLButtonElement | null = container.querySelector(regenerateButtonSelector); - - if (qrCode === null || qrCodeURL === null || copyButton === null || regenerateButton === null) { + const regenerateButton: HTMLButtonElement | null = + container.querySelector(regenerateButtonSelector); + + if ( + qrCode === null || + qrCodeURL === null || + copyButton === null || + regenerateButton === null + ) { throw new Error('one of the elements is not yet loaded.'); } @@ -64,7 +70,8 @@ describe('VipQrCodeModal', () => { await waitFor(() => { const qrCodeURL: HTMLOutputElement | null = container.querySelector(urlSelector); - const regenerateButton: HTMLButtonElement | null = container.querySelector(regenerateButtonSelector); + const regenerateButton: HTMLButtonElement | null = + container.querySelector(regenerateButtonSelector); if (qrCodeURL === null || regenerateButton === null) { throw new Error('one of the elements is not yet loaded.'); @@ -82,11 +89,14 @@ describe('VipQrCodeModal', () => { await waitFor(() => { const reloadedQrCodeUrl: HTMLOutputElement | null = container.querySelector(urlSelector); - if (reloadedQrCodeUrl === null || !reloadedQrCodeUrl?.textContent?.includes(regeneratedNewRewardResponse.VipReward.code)) { + if ( + reloadedQrCodeUrl === null || + !reloadedQrCodeUrl?.textContent?.includes(regeneratedNewRewardResponse.VipReward.code) + ) { throw new Error('reward code not yet reloaded.'); } expect(reloadedQrCodeUrl?.textContent?.includes(regeneratedNewRewardResponse.VipReward.code)); }); }); -}); \ No newline at end of file +}); From f25aea8888cd9cc27267546ff901ce6a0967c259 Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Wed, 8 Jan 2025 11:40:55 +0100 Subject: [PATCH 097/109] resolves review feedback --- src/frontend/src/lib/components/qr/VipQrCodeModal.svelte | 7 ++++--- src/frontend/src/lib/constants/test-ids.constants.ts | 3 +++ .../src/tests/lib/components/qr/VipQrCodeModal.spec.ts | 9 +++++---- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte index f47e184e56..c5a93b0a29 100644 --- a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte +++ b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte @@ -14,6 +14,7 @@ import { i18n } from '$lib/stores/i18n.store'; import { modalStore } from '$lib/stores/modal.store'; import { replacePlaceholders } from '$lib/utils/i18n.utils'; + import { VIP_CODE_REGENERATE_BUTTON, VIP_QR_CODE_COPY_BUTTON } from '$lib/constants/test-ids.constants'; const secondsToRegenerate = 45; let counter = secondsToRegenerate; @@ -60,7 +61,7 @@ -
+
{#if nonNullish(code)} @@ -78,7 +79,7 @@
@@ -99,7 +100,7 @@ type="button" fullWidth on:click={regenerateCode} - testId="vip-code-regenerate-button" + testId={VIP_CODE_REGENERATE_BUTTON} > {$i18n.vip.invitation.text.generate_new_link} diff --git a/src/frontend/src/lib/constants/test-ids.constants.ts b/src/frontend/src/lib/constants/test-ids.constants.ts index 4867369c2c..030a4af546 100644 --- a/src/frontend/src/lib/constants/test-ids.constants.ts +++ b/src/frontend/src/lib/constants/test-ids.constants.ts @@ -63,3 +63,6 @@ export const TOKEN_MENU_ETH = 'token-menu-eth'; export const TOKEN_MENU_ETH_BUTTON = 'token-menu-eth-button'; export const TOKEN_MENU_BTC = 'token-menu-btc'; export const TOKEN_MENU_BTC_BUTTON = 'token-menu-btc-button'; + +export const VIP_QR_CODE_COPY_BUTTON = 'vip-qr-code-copy-button'; +export const VIP_CODE_REGENERATE_BUTTON = 'vip-code-regenerate-button'; diff --git a/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts b/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts index 1c69fab71a..ed50ca8ade 100644 --- a/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts +++ b/src/frontend/src/tests/lib/components/qr/VipQrCodeModal.spec.ts @@ -7,12 +7,13 @@ import type { Identity } from '@dfinity/agent'; import { render, waitFor } from '@testing-library/svelte'; import { readable } from 'svelte/store'; import { vi } from 'vitest'; +import { VIP_CODE_REGENERATE_BUTTON, VIP_QR_CODE_COPY_BUTTON } from '$lib/constants/test-ids.constants'; describe('VipQrCodeModal', () => { const qrCodeSelector = `div[data-tid="qr-code"]`; const urlSelector = `output`; - const copyButtonSelector = `button[data-tid="vip-qr-code-copy-button"]`; - const regenerateButtonSelector = `button[data-tid="vip-code-regenerate-button"]`; + const copyButtonSelector = `button[data-tid=${VIP_QR_CODE_COPY_BUTTON}]`; + const regenerateButtonSelector = `button[data-tid=${VIP_CODE_REGENERATE_BUTTON}]`; const mockAuthStore = (value: Identity | null = mockIdentity) => vi.spyOn(authStore, 'authIdentity', 'get').mockImplementation(() => readable(value)); @@ -23,7 +24,7 @@ describe('VipQrCodeModal', () => { } }; - it('renders the vip qr code modal items', async () => { + it('should render the vip qr code modal items', async () => { mockAuthStore(); vi.spyOn(rewardApi, 'getNewVipReward').mockResolvedValue(mockedNewRewardResponse); @@ -56,7 +57,7 @@ describe('VipQrCodeModal', () => { }); }); - it('regenerates reward code', async () => { + it('should regenerate reward code', async () => { const regeneratedNewRewardResponse: NewVipRewardResponse = { VipReward: { code: '0987654321' From d38c314f5cd76885c709407d9182b37bf0280ffe Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Wed, 8 Jan 2025 12:53:06 +0100 Subject: [PATCH 098/109] resolves review feedback --- .../src/lib/components/qr/VipQrCodeModal.svelte | 15 +++++++++------ src/frontend/src/lib/constants/app.constants.ts | 3 +++ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte index c5a93b0a29..49da313d5f 100644 --- a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte +++ b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte @@ -1,7 +1,7 @@ + + {$i18n.vip.invitation.text.title} diff --git a/src/frontend/src/lib/constants/app.constants.ts b/src/frontend/src/lib/constants/app.constants.ts index ae8d515130..37100e8196 100644 --- a/src/frontend/src/lib/constants/app.constants.ts +++ b/src/frontend/src/lib/constants/app.constants.ts @@ -111,4 +111,4 @@ export const WALLET_TIMER_INTERVAL_MILLIS = (SECONDS_IN_MINUTE / 2) * 1000; // 3 export const WALLET_PAGINATION = 10n; // VIP -export const VIP_CODE_REGENERATE_INTERVAL = 45; +export const VIP_CODE_REGENERATE_INTERVAL_IN_SECONDS = 45; From 81adf43fa353df9f6c187263099ae36119684225 Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Thu, 9 Jan 2025 10:24:15 +0100 Subject: [PATCH 107/109] solves lint issue --- src/frontend/src/lib/components/qr/VipQrCodeModal.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte index 31753ff732..303838aa69 100644 --- a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte +++ b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte @@ -70,7 +70,7 @@ }; onMount(regenerateCode); - onDestroy(clearInterval(countdown)); + onDestroy(() => clearInterval(countdown)); let qrCodeUrl; $: qrCodeUrl = `${window.location.origin}/?code=${code}`; From 9ada8ae693477bd87ae933968e9f1aee09ea56b0 Mon Sep 17 00:00:00 2001 From: AlessandroBonomo Date: Thu, 9 Jan 2025 14:57:27 +0100 Subject: [PATCH 108/109] aligns modal buttons next to each other --- src/frontend/src/lib/components/qr/VipQrCodeModal.svelte | 2 +- src/frontend/src/lib/components/ui/ButtonGroup.svelte | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte index 303838aa69..204e63536e 100644 --- a/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte +++ b/src/frontend/src/lib/components/qr/VipQrCodeModal.svelte @@ -117,7 +117,7 @@ {/if} - +