[wallet-ext] bullshark modal followups (#12879)

## Description 

some behavior changes

## Test Plan 

Locally

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] protocol change
- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes

---------

Co-authored-by: William Robertson <williamrobertson@mystenlabs.com>

apps/wallet/src/shared/analytics/ampli/index.ts

@@ -121,6 +121,13 @@ export interface AddedAccountsProperties {
 	numberOfAccounts: number;
 }
 
+export interface ClickedBullsharkQuestsCtaProperties {
+	/**
+	 * The flow the user came from.
+	 */
+	sourceFlow: string;
+}
+
 export interface ClickedCollectibleCardProperties {
 	/**
 	 * The object type of a collectible.
@@ -358,6 +365,14 @@ export class AddedAccounts implements BaseEvent {
 	}
 }
 
+export class ClickedBullsharkQuestsCta implements BaseEvent {
+	event_type = 'clicked bullshark quests cta';
+
+	constructor(public event_properties: ClickedBullsharkQuestsCtaProperties) {
+		this.event_properties = event_properties;
+	}
+}
+
 export class ClickedCollectibleCard implements BaseEvent {
 	event_type = 'clicked collectible card';
 
@@ -675,6 +690,23 @@ export class Ampli {
     return this.track(new AddedAccounts(properties), options);
   }
 
+  /**
+   * clicked bullshark quests cta
+   *
+   * [View in Tracking Plan](https://data.amplitude.com/mystenlabs/Sui%20Wallet/events/main/latest/clicked%20bullshark%20quests%20cta)
+   *
+   * When users click the call-to-action for the Bullshark Quests interstitial/banner.
+   *
+   * @param properties The event's properties (e.g. sourceFlow)
+   * @param options Amplitude event options.
+   */
+  clickedBullsharkQuestsCta(
+    properties: ClickedBullsharkQuestsCtaProperties,
+    options?: EventOptions,
+  ) {
+    return this.track(new ClickedBullsharkQuestsCta(properties), options);
+  }
+
   /**
    * clicked collectible card
    *

apps/wallet/src/ui/app/components/sui-apps/index.tsx

@@ -12,6 +12,7 @@ import ExternalLink from '../external-link';
 import { Heading } from '_app/shared/heading';
 import { Text } from '_app/shared/text';
 import { useAppSelector } from '_hooks';
+import { ampli } from '_src/shared/analytics/ampli';
 import { FEATURES } from '_src/shared/experimentation/features';
 import { prepareLinkToCompare } from '_src/shared/utils';
 
@@ -53,11 +54,12 @@ function AppsPlayGround() {
 
 			{BullsharkInterstitialEnabled && (
 				<div className="font-frankfurter flex flex-col w-full border-2 border-black border-solid bg-[#99DBFB] p-3 rounded-lg items-center text-white gap-1 [-webkit-text-stroke:1px_black] mb-3">
-					<div className="text-heading4">Join bullsharks quests!</div>
+					<div className="text-heading6">Join bullsharks quests!</div>
 					<div className="text-heading3">5 million sui prize pool!</div>
 					<ExternalLink
-						className="appearance-none no-underline text-white bg-[#EA3389] rounded-lg p-2 [-webkit-text-stroke:1px_black]"
+						className="appearance-none no-underline text-white bg-[#EA3389] rounded-lg p-2 [-webkit-text-stroke:1px_black] leading-none text-heading6"
 						href="https://tech.mystenlabs.com/introducing-bullsharks-quests/"
+						onClick={() => ampli.clickedBullsharkQuestsCta({ sourceFlow: 'Banner - Apps tab' })}
 					>
 						read more on the blog
 					</ExternalLink>

apps/wallet/src/ui/app/hooks/useLedgerNotification.tsx

@@ -20,7 +20,7 @@ const HAS_ACKNOWLEDGED_LEDGER_NOTIFICATION_VALUE = 'true';
 const LEDGER_NOTIFICATION_TOAST_ID = 'ledger-notification-toast';
 
 // TODO: Delete this *soon* because custom, imperative toasts shouldn't be used for notifications :)
-export function useLedgerNotification() {
+export function useLedgerNotification(displayNotification: boolean) {
 	const isLedgerNotificationEnabled = useFeatureIsOn('wallet-ledger-notification-enabled');
 	const isMenuOpen = useMenuIsOpen();
 	const appType = useAppSelector((state) => state.app.appType);
@@ -37,7 +37,7 @@ export function useLedgerNotification() {
 		const hasAcknowledgedVal = localStorage.getItem(HAS_ACKNOWLEDGED_LEDGER_NOTIFICATION_KEY);
 		const hasAcknowledged = hasAcknowledgedVal === HAS_ACKNOWLEDGED_LEDGER_NOTIFICATION_VALUE;
 
-		if (isLedgerNotificationEnabled && !hasAcknowledged && !isMenuOpen) {
+		if (isLedgerNotificationEnabled && !hasAcknowledged && !isMenuOpen && displayNotification) {
 			// If we don't have a timeout, the toast doesn't get rendered after initial render.
 			// We'll do this for now since we don't have the time to figure out what exactly is going on
 			setTimeout(() => {
@@ -96,5 +96,12 @@ export function useLedgerNotification() {
 		return () => {
 			toast.remove(LEDGER_NOTIFICATION_TOAST_ID);
 		};
-	}, [appType, connectLedgerModalUrl, isLedgerNotificationEnabled, isMenuOpen, navigate]);
+	}, [
+		appType,
+		connectLedgerModalUrl,
+		isLedgerNotificationEnabled,
+		isMenuOpen,
+		navigate,
+		displayNotification,
+	]);
 }

apps/wallet/src/ui/app/pages/home/apps/index.tsx

@@ -67,7 +67,7 @@ function AppsPage() {
 	};
 
 	return (
-		<div className={st.container}>
+		<div className={st.container} data-testid="apps-page">
 			<Content>
 				<section>
 					<FiltersPortal firstLastMargin tags={allFilterTags} callback={handleFiltersPortalClick} />

apps/wallet/src/ui/app/pages/home/bullshark-quests-notification/index.tsx

@@ -3,7 +3,9 @@
 
 import { X32 } from '@mysten/icons';
 
+import { useNavigate } from 'react-router-dom';
 import { Portal } from '../../../shared/Portal';
+import { ampli } from '_src/shared/analytics/ampli';
 import ExternalLink from '_src/ui/app/components/external-link';
 
 const InterstitialHeading = ({ text }: { text: string }) => {
@@ -21,6 +23,7 @@ const InterstitialBanner = ({ lines }: { lines: string[] }) => {
 };
 
 function BullsharkQuestsNotification({ onClose }: { onClose: () => void }) {
+	const navigate = useNavigate();
 	const setInterstitialDismissed = () => {
 		localStorage.setItem('bullshark-interstitial-dismissed', 'true');
 	};
@@ -43,15 +46,18 @@ function BullsharkQuestsNotification({ onClose }: { onClose: () => void }) {
 						<div className="flex flex-col items-center gap-4 [-webkit-text-stroke:1px_black] w-full mt-5">
 							<ExternalLink
 								href="https://tech.mystenlabs.com/introducing-bullsharks-quests/"
-								className="appearance-none no-underline text-white bg-[#EA3389] rounded-lg py-2 w-60 [-webkit-text-stroke:1px_black]"
+								onClick={() => ampli.clickedBullsharkQuestsCta({ sourceFlow: 'Interstitial' })}
+								className="appearance-none no-underline text-white bg-[#EA3389] rounded-lg py-2 w-60 [-webkit-text-stroke:1px_black] leading-none text-heading6"
 							>
 								Read more on the blog
 							</ExternalLink>
 							<button
+								data-testid="bullshark-dismiss"
 								className="appearance-none bg-transparent border-none cursor-pointer mt-1"
 								onClick={() => {
 									setInterstitialDismissed();
 									onClose();
+									navigate('/apps');
 								}}
 							>
 								<X32 className="text-sui-dark h-8 w-8" />

apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx

@@ -197,7 +197,7 @@ function TokenDetails({ coinType }: TokenDetailsProps) {
 		FEATURES.BULLSHARK_QUESTS_INTERSTITIAL,
 	).value;
 
-	useLedgerNotification();
+	useLedgerNotification(!BullsharkInterstitialEnabled || interstitialDismissed);
 
 	const { providers } = useOnrampProviders();
 

apps/wallet/tests/balanceChanges.spec.ts

@@ -39,6 +39,7 @@ const COIN_TO_SEND = 20;
 
 test('request SUI from local faucet', async ({ page, extensionUrl }) => {
 	await createWallet(page, extensionUrl);
+	await page.getByRole('navigation').getByRole('link', { name: 'Coins' }).click();
 
 	const originalBalance = await page.getByTestId('coin-balance').textContent();
 	await page.getByTestId('faucet-request-button').click();
@@ -54,6 +55,7 @@ test('send 20 SUI to an address', async ({ page, extensionUrl }) => {
 	const originAddress = originKeypair.getPublicKey().toSuiAddress();
 
 	await importWallet(page, extensionUrl, currentWalletMnemonic);
+	await page.getByRole('navigation').getByRole('link', { name: 'Coins' }).click();
 
 	await requestSuiFromFaucet(originAddress);
 	await expect(page.getByTestId('coin-balance')).not.toHaveText('0SUI');
@@ -77,6 +79,7 @@ test('check balance changes in Activity', async ({ page, extensionUrl }) => {
 	const originAddress = originKeypair.getPublicKey().toSuiAddress();
 
 	await importWallet(page, extensionUrl, currentWalletMnemonic);
+	await page.getByRole('navigation').getByRole('link', { name: 'Coins' }).click();
 
 	await requestSuiFromFaucet(originAddress);
 	await page.getByTestId('nav-activity').click();

apps/wallet/tests/onboarding.spec.ts

@@ -7,7 +7,7 @@ import { generateKeypair } from './utils/localnet';
 
 test('create new wallet', async ({ page, extensionUrl }) => {
 	await createWallet(page, extensionUrl);
-	await expect(page.getByTestId('coin-page')).toBeVisible();
+	await expect(page.getByTestId('apps-page')).toBeVisible();
 });
 
 test('import wallet', async ({ page, extensionUrl }) => {
@@ -22,6 +22,8 @@ test('import wallet', async ({ page, extensionUrl }) => {
 	await page.getByLabel('Confirm Password').fill('mystenlabs');
 	await page.getByRole('button', { name: /Import/ }).click();
 	await page.getByRole('link', { name: /Open Sui Wallet/ }).click();
-	await expect(page.getByTestId('coin-page')).toBeVisible();
+	await page.getByTestId('bullshark-dismiss').click();
+	await page.getByRole('navigation').getByRole('link', { name: 'Coins' }).click();
+
 	await expect(page.getByText(keypair.getPublicKey().toSuiAddress().slice(0, 6))).toBeVisible();
 });

apps/wallet/tests/utils/auth.ts

@@ -15,6 +15,7 @@ export async function createWallet(page: Page, extensionUrl: string) {
 	await page.getByRole('button', { name: /Create Wallet/ }).click();
 	await page.locator('label', { has: page.locator('input[type=checkbox]') }).click();
 	await page.getByRole('link', { name: /Open Sui Wallet/ }).click();
+	await page.getByTestId('bullshark-dismiss').click();
 }
 
 export async function importWallet(page: Page, extensionUrl: string, mnemonic: string[]) {
@@ -31,4 +32,5 @@ export async function importWallet(page: Page, extensionUrl: string, mnemonic: s
 	await page.getByLabel('Confirm Password').fill(PASSWORD);
 	await page.getByRole('button', { name: /Import/ }).click();
 	await page.getByRole('link', { name: /Open Sui Wallet/ }).click();
+	await page.getByTestId('bullshark-dismiss').click();
 }