feat(frontend): unify info modals

e2e/about-how-modal.spec.ts → e2e/about-why-oisy-modal.spec.ts

@@ -1,28 +1,28 @@
 import { test } from '@playwright/test';
 import {
-	ABOUT_HOW_MODAL,
-	ABOUT_HOW_MODAL_OPEN_BUTTON
+	ABOUT_WHY_OISY_BUTTON,
+	ABOUT_WHY_OISY_MODAL
 } from '../src/frontend/src/lib/constants/test-ids.constants';
 import { MODALS_VIEWPORT_WIDTH } from './utils/constants/e2e.constants';
 import { HomepageLoggedOut } from './utils/pages/homepage.page';
 
-const ABOUT_HOW_MODAL_VIEWPORT_HEIGHT = 1600;
+const ABOUT_WHY_OISY_MODAL_VIEWPORT_HEIGHT = 1600;
 
-test('should display about-how modal', async ({ page, isMobile }) => {
+test('should display about-why-oisy modal', async ({ page, isMobile }) => {
 	const homepageLoggedOut = new HomepageLoggedOut({
 		page,
 		viewportSize: !isMobile
 			? {
 					width: MODALS_VIEWPORT_WIDTH,
-					height: ABOUT_HOW_MODAL_VIEWPORT_HEIGHT
+					height: ABOUT_WHY_OISY_MODAL_VIEWPORT_HEIGHT
 				}
 			: undefined
 	});
 
 	await homepageLoggedOut.waitForReady();
 
 	await homepageLoggedOut.testModalSnapshot({
-		modalOpenButtonTestId: ABOUT_HOW_MODAL_OPEN_BUTTON,
-		modalTestId: ABOUT_HOW_MODAL
+		modalOpenButtonTestId: ABOUT_WHY_OISY_BUTTON,
+		modalTestId: ABOUT_WHY_OISY_MODAL
 	});
 });

src/frontend/src/lib/components/core/Menu.svelte

@@ -4,7 +4,7 @@
 	import { page } from '$app/stores';
 	import MenuWallet from '$lib/components/core/MenuWallet.svelte';
 	import SignOut from '$lib/components/core/SignOut.svelte';
-	import AboutHow from '$lib/components/hero/about/AboutHow.svelte';
+	import AboutWhyOisy from '$lib/components/hero/about/AboutWhyOisy.svelte';
 	import IconGitHub from '$lib/components/icons/IconGitHub.svelte';
 	import IconlySettings from '$lib/components/icons/iconly/IconlySettings.svelte';
 	import IconlyUfo from '$lib/components/icons/iconly/IconlyUfo.svelte';
@@ -75,7 +75,7 @@
 			<Hr />
 		{/if}
 
-		<AboutHow asMenuItem on:icOpenAboutModal={hidePopover} />
+		<AboutWhyOisy asMenuItem on:icOpenAboutModal={hidePopover} />
 
 		<ChangelogLink />
 

src/frontend/src/lib/components/hero/Header.svelte

@@ -3,10 +3,10 @@
 	import Alpha from '$lib/components/core/Alpha.svelte';
 	import Menu from '$lib/components/core/Menu.svelte';
 	import OisyWalletLogoLink from '$lib/components/core/OisyWalletLogoLink.svelte';
-	import AboutHowModal from '$lib/components/hero/about/AboutHowModal.svelte';
 	import AboutMenu from '$lib/components/hero/about/AboutMenu.svelte';
+	import AboutWhyOisyModal from '$lib/components/hero/about/AboutWhyOisyModal.svelte';
 	import { authNotSignedIn, authSignedIn } from '$lib/derived/auth.derived';
-	import { modalAboutHow } from '$lib/derived/modal.derived';
+	import { modalAboutWhyOisy } from '$lib/derived/modal.derived';
 </script>
 
 <header
@@ -46,6 +46,6 @@
 	</div>
 </header>
 
-{#if $modalAboutHow}
-	<AboutHowModal />
+{#if $modalAboutWhyOisy}
+	<AboutWhyOisyModal />
 {/if}

src/frontend/src/lib/components/hero/about/AboutMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { IconMenu, Popover } from '@dfinity/gix-components';
-	import AboutHow from '$lib/components/hero/about/AboutHow.svelte';
+	import AboutWhyOisy from '$lib/components/hero/about/AboutWhyOisy.svelte';
 	import ButtonIcon from '$lib/components/ui/ButtonIcon.svelte';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { replaceOisyPlaceholders } from '$lib/utils/i18n.utils';
@@ -12,7 +12,7 @@
 </script>
 
 <div class="hidden gap-5 md:flex">
-	<AboutHow />
+	<AboutWhyOisy />
 </div>
 
 <div class="flex md:hidden">
@@ -27,7 +27,7 @@
 
 	<Popover bind:visible anchor={button} direction="rtl">
 		<ul class="flex list-none flex-col gap-4">
-			<li><AboutHow asMenuItem on:icOpenAboutModal={hidePopover} /></li>
+			<li><AboutWhyOisy asMenuItem on:icOpenAboutModal={hidePopover} /></li>
 		</ul>
 	</Popover>
 </div>

src/frontend/src/lib/components/hero/about/AboutHow.svelte → src/frontend/src/lib/components/hero/about/AboutWhyOisy.svelte

@@ -2,7 +2,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import AboutItem from '$lib/components/hero/about/AboutItem.svelte';
 	import IconInfo from '$lib/components/icons/lucide/IconInfo.svelte';
-	import { ABOUT_HOW_MODAL_OPEN_BUTTON } from '$lib/constants/test-ids.constants';
+	import { ABOUT_WHY_OISY_BUTTON } from '$lib/constants/test-ids.constants';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { modalStore } from '$lib/stores/modal.store';
 	import { replaceOisyPlaceholders } from '$lib/utils/i18n.utils';
@@ -13,11 +13,11 @@
 
 	const openModal = () => {
 		dispatch('icOpenAboutModal');
-		modalStore.openAboutHow();
+		modalStore.openAboutWhyOisy();
 	};
 </script>
 
-<AboutItem {asMenuItem} on:click={openModal} testId={ABOUT_HOW_MODAL_OPEN_BUTTON}>
+<AboutItem {asMenuItem} on:click={openModal} testId={ABOUT_WHY_OISY_BUTTON}>
 	<IconInfo slot="icon" />
-	<span slot="label">{replaceOisyPlaceholders($i18n.about.how.text.label)}</span>
+	<span slot="label">{replaceOisyPlaceholders($i18n.about.why_oisy.text.label)}</span>
 </AboutItem>

src/frontend/src/lib/components/hero/about/AboutHowModal.svelte → src/frontend/src/lib/components/hero/about/AboutWhyOisyModal.svelte

@@ -1,50 +1,56 @@
 <script lang="ts">
 	import { Html, Modal } from '@dfinity/gix-components';
 	import CoverWhyOisy from '$lib/assets/cover-why-oisy.png';
+	import IconCrypto from '$lib/components/icons/IconCrypto.svelte';
 	import IconGitHub from '$lib/components/icons/IconGitHub.svelte';
 	import IconIcLogoPlain from '$lib/components/icons/IconIcLogoPlain.svelte';
 	import IconIdCard from '$lib/components/icons/IconIdCard.svelte';
 	import IconKey from '$lib/components/icons/IconKey.svelte';
 	import IconWorld from '$lib/components/icons/IconWorld.svelte';
 	import ButtonCloseModal from '$lib/components/ui/ButtonCloseModal.svelte';
 	import ImgBanner from '$lib/components/ui/ImgBanner.svelte';
-	import { ABOUT_HOW_MODAL } from '$lib/constants/test-ids.constants';
+	import { ABOUT_WHY_OISY_MODAL } from '$lib/constants/test-ids.constants';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { modalStore } from '$lib/stores/modal.store';
 	import { replaceOisyPlaceholders } from '$lib/utils/i18n.utils';
 </script>
 
-<Modal on:nnsClose={modalStore.close} testId={ABOUT_HOW_MODAL}>
+<Modal on:nnsClose={modalStore.close} testId={ABOUT_WHY_OISY_MODAL}>
 	<svelte:fragment slot="title"
-		><span class="text-xl">{replaceOisyPlaceholders($i18n.about.how.text.title)}</span>
+		><span class="text-xl">{replaceOisyPlaceholders($i18n.about.why_oisy.text.title)}</span>
 	</svelte:fragment>
 
 	<div class="stretch pt-4">
-		<ImgBanner size="small" src={CoverWhyOisy} alt={$i18n.about.how.text.title} />
+		<ImgBanner size="small" src={CoverWhyOisy} alt={$i18n.about.why_oisy.text.title} />
 
 		<p class="mt-12">
+			<IconCrypto />
+			<Html text={replaceOisyPlaceholders($i18n.about.why_oisy.text.hold_crypto)} />
+		</p>
+
+		<p class="mt-6">
 			<IconKey />
-			<Html text={replaceOisyPlaceholders($i18n.about.how.text.self_custody)} />
+			<Html text={replaceOisyPlaceholders($i18n.about.why_oisy.text.network_custody)} />
 		</p>
 
 		<p class="mt-6">
 			<IconIcLogoPlain />
-			<Html text={replaceOisyPlaceholders($i18n.about.how.text.fully_on_chain)} />
+			<Html text={replaceOisyPlaceholders($i18n.about.why_oisy.text.fully_on_chain)} />
 		</p>
 
 		<p class="mt-6">
 			<IconWorld />
-			<Html text={replaceOisyPlaceholders($i18n.about.how.text.cross_device)} />
+			<Html text={replaceOisyPlaceholders($i18n.about.why_oisy.text.cross_device)} />
 		</p>
 
 		<p class="mt-6">
 			<IconIdCard />
-			<Html text={replaceOisyPlaceholders($i18n.about.how.text.verifiable_credentials)} />
+			<Html text={replaceOisyPlaceholders($i18n.about.why_oisy.text.verifiable_credentials)} />
 		</p>
 
 		<p class="my-6">
 			<IconGitHub />
-			<Html text={replaceOisyPlaceholders($i18n.about.how.text.open_source)} />
+			<Html text={replaceOisyPlaceholders($i18n.about.why_oisy.text.open_source)} />
 		</p>
 	</div>
 

src/frontend/src/lib/components/navigation/InfoMenu.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import AboutHow from '$lib/components/hero/about/AboutHow.svelte';
+	import AboutWhyOisy from '$lib/components/hero/about/AboutWhyOisy.svelte';
 	import ChangelogLink from '$lib/components/navigation/ChangelogLink.svelte';
 </script>
 
 <div class="box-content flex w-full flex-col gap-5 py-3">
-	<AboutHow asMenuItem />
+	<AboutWhyOisy asMenuItem />
 
 	<ChangelogLink />
 </div>

src/frontend/src/lib/constants/test-ids.constants.ts

@@ -10,8 +10,8 @@ export const TOKEN_CARD = 'token-card';
 export const TOKEN_GROUP = 'token-group';
 export const TOKEN_BALANCE = 'token-balance';
 
-export const ABOUT_HOW_MODAL_OPEN_BUTTON = 'about-how-modal-open-button';
-export const ABOUT_HOW_MODAL = 'about-how-modal';
+export const ABOUT_WHY_OISY_BUTTON = 'about-why-oisy-modal-open-button';
+export const ABOUT_WHY_OISY_MODAL = 'about-why-oisy-modal';
 
 export const RECEIVE_TOKENS_MODAL_OPEN_BUTTON = 'receive-tokens-modal-open-button';
 export const RECEIVE_TOKENS_MODAL = 'receive-tokens-modal';

src/frontend/src/lib/derived/modal.derived.ts

@@ -101,9 +101,9 @@ export const modalReceiveBitcoin: Readable<boolean> = derived(
 	modalStore,
 	($modalStore) => $modalStore?.type === 'receive-bitcoin'
 );
-export const modalAboutHow: Readable<boolean> = derived(
+export const modalAboutWhyOisy: Readable<boolean> = derived(
 	modalStore,
-	($modalStore) => $modalStore?.type === 'about-how'
+	($modalStore) => $modalStore?.type === 'about-why-oisy'
 );
 export const modalDAppDetails: Readable<boolean> = derived(
 	modalStore,

src/frontend/src/lib/i18n/en.json

@@ -655,15 +655,16 @@
 		"text": {
 			"title": "About $oisy_name"
 		},
-		"how": {
+		"why_oisy": {
 			"text": {
-				"label": "What sets $oisy_short apart",
-				"title": "What sets $oisy_short apart",
-				"self_custody": "<strong>Network custody</strong><br>$oisy_name implements network custody, an innovative approach that leverages the Internet Computer’s advanced cryptography to eliminate the need for users to handle private keys directly. This solution offers a secure and user-friendly alternative to traditional methods, aligning with the “Onchain is the New Online” movement, a shift toward solutions that enhance security and resilience against cyber attacks by running on the distributed Internet Computer network.",
-				"fully_on_chain": "<strong>Fully on-chain</strong><br>Not only the keys but the entire wallet application is <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://internetcomputer.org/capabilities\">stored on-chain</a> and served directly into your browser from ICP. Therefore the entire wallet is secured by a decentralized trust model making it tamper-proof.",
-				"cross_device": "<strong>Cross-device</strong><br>Using <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://identity.ic0.app/\">Internet Identity</a> means that $oisy_short can easily be used across all devices you have linked to a particular identity.",
-				"verifiable_credentials": "<strong>Compatible with verifiable credentials</strong><br>$oisy_short is designed to integrate with Internet Computer’s <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://internetcomputer.org/docs/current/developer-docs/identity/verifiable-credentials/overview\">verifiable credentials platform</a>. Users can access additional functionality, like airdrops, if they acquire credentials of a certain type.",
-				"open_source": "<strong>Open source</strong><br>$oisy_short is an <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://github.com/dfinity/oisy-wallet\">open-source project</a> lead by a dedicated team within the <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://dfinity.org/\">DFINITY foundation</a> supported by the organisation’s 200 world-leading cryptographers and engineers."
+				"label": "Why $oisy_short",
+				"title": "Why $oisy_short",
+				"hold_crypto": "<strong>Unified Management of All Your Digital Assets</strong><br>$oisy_short allows you to manage all your digital assets — including Bitcoin, Ethereum, ICP, and more — in a single, unified wallet. No more juggling multiple wallets for different cryptocurrencies — enjoy a seamless and efficient experience across various platforms.",
+				"network_custody": "<strong>No more private key anxiety with Network Custody</strong><br>$oisy_name implements <strong>network custody</strong>, an innovative approach that leverages the Internet Computer’s advanced cryptography to eliminate the need for you to handle private keys directly. This provides a secure and user-friendly alternative to traditional methods, aligning with the “Onchain is the New Online” movement — a shift toward solutions that enhance security and resilience against cyber attacks by running on a distributed network.",
+				"fully_on_chain": "<strong>Tamper-Proof Security with a Fully On-Chain Wallet</strong><br>Not only are your keys secured, but the entire wallet application is stored <strong><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://internetcomputer.org/capabilities\">fully on-chain</a></strong> and served directly into your browser from the Internet Computer. This means the entire wallet benefits from a decentralized trust model, making it tamper-proof and highly secure.",
+				"cross_device": "<strong>Access your wallet anytime from anywhere</strong><br>Using <strong><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://identity.ic0.app/\">Internet Identity</a></strong>, $oisy_short can easily be used across all devices you have linked to your private decentralized identity. This ensures seamless and secure access to your wallet whether you're on a smartphone, tablet, or desktop.",
+				"verifiable_credentials": "<strong>Unlock Extra Features with Verifiable Credentials</strong><br>$oisy_short integrates with the Internet Computer’s <strong><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://internetcomputer.org/docs/current/developer-docs/identity/verifiable-credentials/overview\">verifiable credentials</a></strong> platform. Access additional features like airdrops and exclusive functionalities by acquiring certain types of credentials, enhancing your overall experience.",
+				"open_source": "<strong>Trust in Transparency with Open Source</strong><br>$oisy_short is an <strong><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://github.com/dfinity/oisy-wallet\">open-source</a></strong> project led by a dedicated team within the <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://dfinity.org/\">DFINITY foundation</a>, supported by over 200 world-leading cryptographers and engineers. Open sourcing ensures transparency, allowing the community to audit, contribute, and trust in the wallet's integrity."
 			}
 		}
 	},

src/frontend/src/lib/stores/modal.store.ts

@@ -27,7 +27,7 @@ export interface Modal<T> {
 		| 'token'
 		| 'ic-token'
 		| 'receive-bitcoin'
-		| 'about-how'
+		| 'about-why-oisy'
 		| 'btc-transaction'
 		| 'dapp-details';
 	data?: T;
@@ -61,7 +61,7 @@ export interface ModalStore<T> extends Readable<ModalData<T>> {
 	openToken: () => void;
 	openIcToken: () => void;
 	openReceiveBitcoin: () => void;
-	openAboutHow: () => void;
+	openAboutWhyOisy: () => void;
 	openDappDetails: <D extends T>(data: D) => void;
 	close: () => void;
 }
@@ -95,7 +95,7 @@ const initModalStore = <T>(): ModalStore<T> => {
 		openToken: () => set({ type: 'token' }),
 		openIcToken: () => set({ type: 'ic-token' }),
 		openReceiveBitcoin: () => set({ type: 'receive-bitcoin' }),
-		openAboutHow: () => set({ type: 'about-how' }),
+		openAboutWhyOisy: () => set({ type: 'about-why-oisy' }),
 		openDappDetails: <D extends T>(data: D) => set({ type: 'dapp-details', data }),
 		close: () => set(null),
 		subscribe

src/frontend/src/lib/types/i18n.d.ts

@@ -590,11 +590,12 @@ interface I18nTransactions {
 
 interface I18nAbout {
 	text: { title: string };
-	how: {
+	why_oisy: {
 		text: {
 			label: string;
 			title: string;
-			self_custody: string;
+			hold_crypto: string;
+			network_custody: string;
 			fully_on_chain: string;
 			cross_device: string;
 			verifiable_credentials: string;