feat(frontend): remove about what modal (#3097)

# Motivation

As part of #3096 the info
modals are unified. First step is to remove the about what modal.

# Changes

- Remove all references and usages of about what modal including tests

# Tests

- Removed tests for about what modal


![image](https://github.com/user-attachments/assets/9e905d02-59c6-4a1d-867b-bbcdda5c7371)

![image](https://github.com/user-attachments/assets/156ed596-9353-45dc-8121-ab0f1c5ab16d)

![image](https://github.com/user-attachments/assets/440b8ac9-ed0b-4de9-a886-5ff8e39b7fa2)

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

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

@@ -5,7 +5,6 @@
 	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 AboutWhat from '$lib/components/hero/about/AboutWhat.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';
@@ -77,7 +76,6 @@
 		{/if}
 
 		<AboutHow asMenuItem on:icOpenAboutModal={hidePopover} />
-		<AboutWhat asMenuItem on:icOpenAboutModal={hidePopover} />
 
 		<ChangelogLink />
 

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

@@ -5,9 +5,8 @@
 	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 AboutWhatModal from '$lib/components/hero/about/AboutWhatModal.svelte';
 	import { authNotSignedIn, authSignedIn } from '$lib/derived/auth.derived';
-	import { modalAboutHow, modalAboutWhat } from '$lib/derived/modal.derived';
+	import { modalAboutHow } from '$lib/derived/modal.derived';
 </script>
 
 <header
@@ -47,8 +46,6 @@
 	</div>
 </header>
 
-{#if $modalAboutWhat}
-	<AboutWhatModal />
-{:else if $modalAboutHow}
+{#if $modalAboutHow}
 	<AboutHowModal />
 {/if}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Html, Modal } from '@dfinity/gix-components';
-	import CoverHow from '$lib/assets/cover-how-it-works.png';
+	import CoverWhyOisy from '$lib/assets/cover-why-oisy.png';
 	import IconGitHub from '$lib/components/icons/IconGitHub.svelte';
 	import IconIcLogoPlain from '$lib/components/icons/IconIcLogoPlain.svelte';
 	import IconIdCard from '$lib/components/icons/IconIdCard.svelte';
@@ -20,7 +20,7 @@
 	</svelte:fragment>
 
 	<div class="stretch pt-4">
-		<ImgBanner size="small" src={CoverHow} alt={$i18n.about.how.text.title} />
+		<ImgBanner size="small" src={CoverWhyOisy} alt={$i18n.about.how.text.title} />
 
 		<p class="mt-12">
 			<IconKey />

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

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

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

@@ -1,13 +1,10 @@
 <script lang="ts">
 	import AboutHow from '$lib/components/hero/about/AboutHow.svelte';
-	import AboutWhat from '$lib/components/hero/about/AboutWhat.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 />
 
-	<AboutWhat asMenuItem />
-
 	<ChangelogLink />
 </div>

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

@@ -10,9 +10,6 @@ export const TOKEN_CARD = 'token-card';
 export const TOKEN_GROUP = 'token-group';
 export const TOKEN_BALANCE = 'token-balance';
 
-export const ABOUT_WHAT_MODAL_OPEN_BUTTON = 'about-what-modal-open-button';
-export const ABOUT_WHAT_MODAL = 'about-what-modal';
-
 export const ABOUT_HOW_MODAL_OPEN_BUTTON = 'about-how-modal-open-button';
 export const ABOUT_HOW_MODAL = 'about-how-modal';
 

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

@@ -101,10 +101,6 @@ export const modalReceiveBitcoin: Readable<boolean> = derived(
 	modalStore,
 	($modalStore) => $modalStore?.type === 'receive-bitcoin'
 );
-export const modalAboutWhat: Readable<boolean> = derived(
-	modalStore,
-	($modalStore) => $modalStore?.type === 'about-what'
-);
 export const modalAboutHow: Readable<boolean> = derived(
 	modalStore,
 	($modalStore) => $modalStore?.type === 'about-how'

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

@@ -655,15 +655,6 @@
 		"text": {
 			"title": "About $oisy_name"
 		},
-		"what": {
-			"text": {
-				"label": "Wallet Features",
-				"title": "$oisy_name Features",
-				"hold_crypto": "<strong>Hold crypto across networks</strong><br>Manage and transact with native Ethereum, Bitcoin, and Internet Computer assets. Powered by <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://internetcomputer.org/chainfusion\">Chain Fusion</a>.",
-				"use_eth_dapps": "<strong>Use with Ethereum dapps</strong><br>$oisy_short is fully compatible with Ethereum Defi like <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://uniswap.org/\">Uniswap</a> thanks to the <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://walletconnect.com/\">WalletConnect</a> framework.",
-				"use_ic_dapps": "<strong>Use with Internet Computer dapps</strong><br>Use your $oisy_name in any <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://internetcomputer.org/ecosystem\">dapp on the Internet Computer</a> that supports the signer standards, including <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://oc.app/\">OpenChat</a>, <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://www.icpswap.com/\">ICPSwap</a>, and the <a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https://nns.ic0.app/\">NNS dapp</a>."
-			}
-		},
 		"how": {
 			"text": {
 				"label": "What sets $oisy_short apart",

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

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

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

@@ -590,15 +590,6 @@ interface I18nTransactions {
 
 interface I18nAbout {
 	text: { title: string };
-	what: {
-		text: {
-			label: string;
-			title: string;
-			hold_crypto: string;
-			use_eth_dapps: string;
-			use_ic_dapps: string;
-		};
-	};
 	how: {
 		text: {
 			label: string;