diff --git a/e2e/about-how-modal.spec.ts-snapshots/should-display-about-how-modal-1-Google-Chrome-linux.png b/e2e/about-how-modal.spec.ts-snapshots/should-display-about-how-modal-1-Google-Chrome-linux.png deleted file mode 100644 index a622f14183..0000000000 Binary files a/e2e/about-how-modal.spec.ts-snapshots/should-display-about-how-modal-1-Google-Chrome-linux.png and /dev/null differ diff --git a/e2e/about-how-modal.spec.ts b/e2e/about-why-oisy-modal.spec.ts similarity index 62% rename from e2e/about-how-modal.spec.ts rename to e2e/about-why-oisy-modal.spec.ts index 4811df0fb7..8c3c725f52 100644 --- a/e2e/about-how-modal.spec.ts +++ b/e2e/about-why-oisy-modal.spec.ts @@ -1,20 +1,20 @@ 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 }); @@ -22,7 +22,7 @@ test('should display about-how modal', async ({ page, isMobile }) => { 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 }); }); diff --git a/e2e/about-why-oisy-modal.spec.ts-snapshots/should-display-about-why-oisy-modal-1-Google-Chrome-linux.png b/e2e/about-why-oisy-modal.spec.ts-snapshots/should-display-about-why-oisy-modal-1-Google-Chrome-linux.png new file mode 100644 index 0000000000..ddd56fc923 Binary files /dev/null and b/e2e/about-why-oisy-modal.spec.ts-snapshots/should-display-about-why-oisy-modal-1-Google-Chrome-linux.png differ diff --git a/e2e/homepage.spec.ts-snapshots/should-display-homepage-in-logged-out-state-1-Google-Chrome-linux.png b/e2e/homepage.spec.ts-snapshots/should-display-homepage-in-logged-out-state-1-Google-Chrome-linux.png index 54d7916d71..85d745996e 100644 Binary files a/e2e/homepage.spec.ts-snapshots/should-display-homepage-in-logged-out-state-1-Google-Chrome-linux.png and b/e2e/homepage.spec.ts-snapshots/should-display-homepage-in-logged-out-state-1-Google-Chrome-linux.png differ diff --git a/src/frontend/src/lib/components/core/Menu.svelte b/src/frontend/src/lib/components/core/Menu.svelte index 96469b5f29..10166fd24c 100644 --- a/src/frontend/src/lib/components/core/Menu.svelte +++ b/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 @@
{/if} - + diff --git a/src/frontend/src/lib/components/hero/Header.svelte b/src/frontend/src/lib/components/hero/Header.svelte index 890dbcdd9f..80d99f2e91 100644 --- a/src/frontend/src/lib/components/hero/Header.svelte +++ b/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';
-{#if $modalAboutHow} - +{#if $modalAboutWhyOisy} + {/if} diff --git a/src/frontend/src/lib/components/hero/about/AboutMenu.svelte b/src/frontend/src/lib/components/hero/about/AboutMenu.svelte index 82fad87e54..cac8b3baf9 100644 --- a/src/frontend/src/lib/components/hero/about/AboutMenu.svelte +++ b/src/frontend/src/lib/components/hero/about/AboutMenu.svelte @@ -1,6 +1,6 @@
@@ -27,7 +27,7 @@
    -
    • +
diff --git a/src/frontend/src/lib/components/hero/about/AboutHow.svelte b/src/frontend/src/lib/components/hero/about/AboutWhyOisy.svelte similarity index 67% rename from src/frontend/src/lib/components/hero/about/AboutHow.svelte rename to src/frontend/src/lib/components/hero/about/AboutWhyOisy.svelte index d9138a338a..96f6f77489 100644 --- a/src/frontend/src/lib/components/hero/about/AboutHow.svelte +++ b/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(); }; - + - {replaceOisyPlaceholders($i18n.about.how.text.label)} + {replaceOisyPlaceholders($i18n.about.why_oisy.text.label)} diff --git a/src/frontend/src/lib/components/hero/about/AboutHowModal.svelte b/src/frontend/src/lib/components/hero/about/AboutWhyOisyModal.svelte similarity index 55% rename from src/frontend/src/lib/components/hero/about/AboutHowModal.svelte rename to src/frontend/src/lib/components/hero/about/AboutWhyOisyModal.svelte index d52f9c8cf8..b3485c8c2b 100644 --- a/src/frontend/src/lib/components/hero/about/AboutHowModal.svelte +++ b/src/frontend/src/lib/components/hero/about/AboutWhyOisyModal.svelte @@ -1,6 +1,7 @@ - + {replaceOisyPlaceholders($i18n.about.how.text.title)} + >{replaceOisyPlaceholders($i18n.about.why_oisy.text.title)}
- +

+ + +

+ +

- +

- +

- +

- +

- +

diff --git a/src/frontend/src/lib/components/navigation/InfoMenu.svelte b/src/frontend/src/lib/components/navigation/InfoMenu.svelte index c2eec0c3d3..72b8fc32c7 100644 --- a/src/frontend/src/lib/components/navigation/InfoMenu.svelte +++ b/src/frontend/src/lib/components/navigation/InfoMenu.svelte @@ -1,10 +1,10 @@
- +
diff --git a/src/frontend/src/lib/constants/test-ids.constants.ts b/src/frontend/src/lib/constants/test-ids.constants.ts index bd5f108dfc..8303393551 100644 --- a/src/frontend/src/lib/constants/test-ids.constants.ts +++ b/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'; diff --git a/src/frontend/src/lib/derived/modal.derived.ts b/src/frontend/src/lib/derived/modal.derived.ts index 0fc19a449c..24bb05828f 100644 --- a/src/frontend/src/lib/derived/modal.derived.ts +++ b/src/frontend/src/lib/derived/modal.derived.ts @@ -101,9 +101,9 @@ export const modalReceiveBitcoin: Readable = derived( modalStore, ($modalStore) => $modalStore?.type === 'receive-bitcoin' ); -export const modalAboutHow: Readable = derived( +export const modalAboutWhyOisy: Readable = derived( modalStore, - ($modalStore) => $modalStore?.type === 'about-how' + ($modalStore) => $modalStore?.type === 'about-why-oisy' ); export const modalDAppDetails: Readable = derived( modalStore, diff --git a/src/frontend/src/lib/i18n/en.json b/src/frontend/src/lib/i18n/en.json index cb00009cf8..7002f2a021 100644 --- a/src/frontend/src/lib/i18n/en.json +++ b/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": "Network custody
$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": "Fully on-chain
Not only the keys but the entire wallet application is stored on-chain 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": "Cross-device
Using Internet Identity means that $oisy_short can easily be used across all devices you have linked to a particular identity.", - "verifiable_credentials": "Compatible with verifiable credentials
$oisy_short is designed to integrate with Internet Computer’s verifiable credentials platform. Users can access additional functionality, like airdrops, if they acquire credentials of a certain type.", - "open_source": "Open source
$oisy_short is an open-source project lead by a dedicated team within the DFINITY foundation supported by the organisation’s 200 world-leading cryptographers and engineers." + "label": "Why $oisy_short", + "title": "Why $oisy_short", + "hold_crypto": "Unified Management of All Your Digital Assets
$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": "No more private key anxiety with Network Custody
$oisy_name implements network custody, 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": "Tamper-Proof Security with a Fully On-Chain Wallet
Not only are your keys secured, but the entire wallet application is stored fully on-chain 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": "Access your wallet anytime from anywhere
Using Internet Identity, $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": "Unlock Extra Features with Verifiable Credentials
$oisy_short integrates with the Internet Computer’s verifiable credentials platform. Access additional features like airdrops and exclusive functionalities by acquiring certain types of credentials, enhancing your overall experience.", + "open_source": "Trust in Transparency with Open Source
$oisy_short is an open-source project led by a dedicated team within the DFINITY foundation, 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." } } }, diff --git a/src/frontend/src/lib/stores/modal.store.ts b/src/frontend/src/lib/stores/modal.store.ts index e7856643c2..6711126cd9 100644 --- a/src/frontend/src/lib/stores/modal.store.ts +++ b/src/frontend/src/lib/stores/modal.store.ts @@ -27,7 +27,7 @@ export interface Modal { | 'token' | 'ic-token' | 'receive-bitcoin' - | 'about-how' + | 'about-why-oisy' | 'btc-transaction' | 'dapp-details'; data?: T; @@ -61,7 +61,7 @@ export interface ModalStore extends Readable> { openToken: () => void; openIcToken: () => void; openReceiveBitcoin: () => void; - openAboutHow: () => void; + openAboutWhyOisy: () => void; openDappDetails: (data: D) => void; close: () => void; } @@ -95,7 +95,7 @@ const initModalStore = (): ModalStore => { 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: (data: D) => set({ type: 'dapp-details', data }), 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 f447d02c8f..f125195ac1 100644 --- a/src/frontend/src/lib/types/i18n.d.ts +++ b/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;