[wallet-ext] bullsharks interstitial (MystenLabs#12865)

## Description 

<img width="420" alt="image"
src="https://github.com/MystenLabs/sui/assets/128089541/17c05c1b-eed6-4271-804a-22922f3784c5">
<img width="467" alt="image"
src="https://github.com/MystenLabs/sui/assets/128089541/e968a63d-4670-4801-9b2f-56565fbb4484">

## 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

apps/wallet/src/shared/experimentation/features.ts

@@ -25,6 +25,7 @@ export enum FEATURES {
 	WALLET_ACTIVITY_REFETCH_INTERVAL = 'wallet-activity-refetch-interval',
 	WALLET_EFFECTS_ONLY_SHARED_TRANSACTION = 'wallet-effects-only-shared-transaction',
 	WALLET_QREDO = 'wallet-qredo',
+	BULLSHARK_QUESTS_INTERSTITIAL = 'wallet-bullshark-interstitial',
 }
 
 export function setAttributes(network?: { apiEnv: API_ENV; customRPC?: string | null }) {

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

@@ -8,6 +8,7 @@ import { useParams } from 'react-router-dom';
 import { SuiApp, type DAppEntry } from './SuiApp';
 import { SuiAppEmpty } from './SuiAppEmpty';
 import { permissionsSelectors } from '../../redux/slices/permissions';
+import ExternalLink from '../external-link';
 import { Heading } from '_app/shared/heading';
 import { Text } from '_app/shared/text';
 import { useAppSelector } from '_hooks';
@@ -16,6 +17,9 @@ import { prepareLinkToCompare } from '_src/shared/utils';
 
 function AppsPlayGround() {
 	const ecosystemApps = useFeature<DAppEntry[]>(FEATURES.WALLET_DAPPS).value;
+	const BullsharkInterstitialEnabled = useFeature<boolean>(
+		FEATURES.BULLSHARK_QUESTS_INTERSTITIAL,
+	).value;
 	const { tagName } = useParams();
 
 	const filteredEcosystemApps = useMemo(() => {
@@ -47,6 +51,19 @@ function AppsPlayGround() {
 				</Heading>
 			</div>
 
+			{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-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]"
+						href="https://tech.mystenlabs.com/introducing-bullsharks-quests/"
+					>
+						read more on the blog
+					</ExternalLink>
+				</div>
+			)}
+
 			{filteredEcosystemApps?.length ? (
 				<div className="p-4 bg-gray-40 rounded-xl">
 					<Text variant="pBodySmall" color="gray-75" weight="normal">

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

@@ -0,0 +1,67 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { X32 } from '@mysten/icons';
+
+import { Portal } from '../../../shared/Portal';
+import ExternalLink from '_src/ui/app/components/external-link';
+
+const InterstitialHeading = ({ text }: { text: string }) => {
+	return <div className="[-webkit-text-stroke:2px_black] text-heading1">{text}</div>;
+};
+
+const InterstitialBanner = ({ lines }: { lines: string[] }) => {
+	return (
+		<div className="text-heading4 flex flex-col border-solid border-2 border-gray-90 text-black bg-white py-1 px-3 rounded-md">
+			{lines.map((line, key) => {
+				return <div key={key}>{line}</div>;
+			})}
+		</div>
+	);
+};
+
+function BullsharkQuestsNotification({ onClose }: { onClose: () => void }) {
+	const setInterstitialDismissed = () => {
+		localStorage.setItem('bullshark-interstitial-dismissed', 'true');
+	};
+
+	return (
+		<Portal containerId="overlay-portal-container">
+			<div className="flex flex-col justify-center flex-nowrap items-center bg-[#99dbfb] border-solid border-4 border-black rounded-lg z-50 overflow-hidden absolute top-0 bottom-0 left-0 right-0 backdrop-blur-sm">
+				<div className="flex flex-col font-frankfurter w-full h-full items-center p-4 text-white text-center">
+					<div className="flex flex-col py-6 px-7 border-4 border-black border-solid w-full rounded-md h-full items-center">
+						<div className="flex flex-col items-center">
+							<InterstitialHeading text="Join Bullshark Quests!" />
+							<div className="bg-[url('https://quests.mystenlabs.com/_next/static/media/logo.81b4eb8f.svg')] h-40 w-40 bg-cover" />
+							<InterstitialHeading text="5 Million SUI prize pool!" />
+							<div className="flex flex-col items-center gap-2 mt-2">
+								<InterstitialBanner lines={['2.5M SUI', 'Top 10,000 players!']} />
+								<InterstitialBanner lines={['2.5M SUI', 'all eligible players!']} />
+							</div>
+						</div>
+
+						<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]"
+							>
+								Read more on the blog
+							</ExternalLink>
+							<button
+								className="appearance-none bg-transparent border-none cursor-pointer mt-1"
+								onClick={() => {
+									setInterstitialDismissed();
+									onClose();
+								}}
+							>
+								<X32 className="text-sui-dark h-8 w-8" />
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</Portal>
+	);
+}
+
+export default BullsharkQuestsNotification;

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

@@ -1,6 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { useFeature } from '@growthbook/growthbook-react';
 import { useAppsBackend, useGetCoinBalance, useGetAllBalances } from '@mysten/core';
 import {
 	Info12,
@@ -12,13 +13,14 @@ import {
 } from '@mysten/icons';
 import { SUI_TYPE_ARG, Coin, type CoinBalance as CoinBalanceType } from '@mysten/sui.js';
 import { useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { CoinActivitiesCard } from './CoinActivityCard';
 import { TokenIconLink } from './TokenIconLink';
 import { TokenLink } from './TokenLink';
 import { TokenList } from './TokenList';
 import CoinBalance from './coin-balance';
+import BullsharkQuestsNotification from '../bullshark-quests-notification';
 import { useOnrampProviders } from '../onramp/useOnrampProviders';
 import { useActiveAddress } from '_app/hooks/useActiveAddress';
 import { LargeButton } from '_app/shared/LargeButton';
@@ -29,6 +31,7 @@ import { filterAndSortTokenBalances } from '_helpers';
 import { useAppSelector, useCoinsReFetchingConfig } from '_hooks';
 import { ampli } from '_src/shared/analytics/ampli';
 import { API_ENV } from '_src/shared/api-env';
+import { FEATURES } from '_src/shared/experimentation/features';
 import { AccountSelector } from '_src/ui/app/components/AccountSelector';
 import { useLedgerNotification } from '_src/ui/app/hooks/useLedgerNotification';
 import { usePinnedCoinTypes } from '_src/ui/app/hooks/usePinnedCoinTypes';
@@ -167,6 +170,7 @@ function MyTokens() {
 }
 
 function TokenDetails({ coinType }: TokenDetailsProps) {
+	const [interstitialDismissed, setInterstitialDismissed] = useState<boolean>(false);
 	const activeCoinType = coinType || SUI_TYPE_ARG;
 	const accountAddress = useActiveAddress();
 	const { staleTime, refetchInterval } = useCoinsReFetchingConfig();
@@ -189,6 +193,9 @@ function TokenDetails({ coinType }: TokenDetailsProps) {
 		retry: false,
 		enabled: apiEnv === API_ENV.mainnet,
 	});
+	const BullsharkInterstitialEnabled = useFeature<boolean>(
+		FEATURES.BULLSHARK_QUESTS_INTERSTITIAL,
+	).value;
 
 	useLedgerNotification();
 
@@ -200,6 +207,21 @@ function TokenDetails({ coinType }: TokenDetailsProps) {
 	// Avoid perpetual loading state when fetching and retry keeps failing add isFetched check
 	const isFirstTimeLoading = isLoading && !isFetched;
 
+	useEffect(() => {
+		const dismissed = localStorage.getItem('bullshark-interstitial-dismissed');
+		setInterstitialDismissed(dismissed === 'true');
+	}, []);
+
+	if (BullsharkInterstitialEnabled && !interstitialDismissed) {
+		return (
+			<BullsharkQuestsNotification
+				onClose={() => {
+					setInterstitialDismissed(true);
+				}}
+			/>
+		);
+	}
+
 	return (
 		<>
 			{apiEnv === API_ENV.mainnet && data?.degraded && (

apps/wallet/src/ui/styles/global.scss

@@ -105,3 +105,9 @@ textarea {
 ::-ms-reveal {
 	display: none;
 }
+
+@font-face {
+	font-family: 'Frankfurter Normal';
+	src: url('../assets/fonts/FrankfurterNormal.woff2') format('woff2'),
+		url('../assets/fonts/FrankfurterNormal.woff') format('woff');
+}

apps/wallet/tailwind.config.ts

@@ -60,6 +60,9 @@ export default {
 			dropShadow: {
 				accountModal: ['0px 10px 30px rgba(0, 0, 0, 0.15)', '0px 10px 50px rgba(0, 0, 0, 0.15)'],
 			},
+			fontFamily: {
+				frankfurter: ['Frankfurter Normal', 'sans-serif'],
+			},
 		},
 	},
 } satisfies Partial<Config>;