Stake warning (#20027)

## Description 

Describe the changes or additions included in this PR.

## Test plan 

How did you test the new or updated feature?

---

## Release notes

Check each box that your changes affect. If none of the boxes relate to
your changes, release notes aren't required.

For each box you select, include information after the relevant heading
that describes the impact of your changes that a user might notice and
any actions they must take to implement updates.

- [ ] Protocol: 
- [ ] Nodes (Validators and Full nodes): 
- [ ] Indexer: 
- [ ] JSON-RPC: 
- [ ] GraphQL: 
- [ ] CLI: 
- [ ] Rust SDK:
- [ ] REST API:

apps/wallet/src/ui/app/components/StakeWarning.tsx

@@ -0,0 +1,88 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useFeatureValue } from '@growthbook/growthbook-react';
+import { useEffect, useState } from 'react';
+
+import { Text } from '../shared/text';
+import Close from './buynlarge/close.svg';
+
+const STAKE_SEEN_KEY = 'stake-warning-seen';
+
+type StakeWarningItem = {
+	enabled: boolean;
+	link: string;
+	text: string;
+	endDate: string;
+};
+
+export function StakeWarning() {
+	const [today, setToday] = useState(new Date());
+	const [seen, setSeen] = useState<boolean>(() => {
+		const stored = localStorage.getItem(STAKE_SEEN_KEY);
+		if (stored) {
+			return JSON.parse(stored);
+		}
+		return false;
+	});
+
+	const warning = useFeatureValue<StakeWarningItem | null>('wallet-stake-warning', null);
+
+	useEffect(() => {
+		// We update every minute to make sure the warning is removed after the end date
+		const interval = setInterval(() => {
+			setToday(new Date());
+		}, 1000 * 60);
+
+		return () => clearInterval(interval);
+	}, []);
+
+	if (
+		seen ||
+		!warning ||
+		!warning.enabled ||
+		today.getTime() > new Date(warning.endDate).getTime()
+	) {
+		return null;
+	}
+
+	return (
+		<a
+			target="_blank"
+			rel="noreferrer"
+			href={warning.link}
+			className="flex flex-row items-center rounded-xl px-4 py-3 gap-4 w-full no-underline"
+			style={{
+				backgroundColor: '#211C35',
+			}}
+		>
+			<div className="flex-1">
+				<Text variant="body" weight="medium" color="white">
+					{warning.text.replace(
+						'{endDate}',
+						new Date(warning.endDate).toLocaleString(undefined, {
+							dateStyle: 'full',
+							timeStyle: 'short',
+						}),
+					)}
+				</Text>
+			</div>
+
+			<div>
+				<button
+					type="button"
+					aria-label="Close"
+					className="bg-transparent p-0 m-0 border-none"
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						localStorage.setItem(STAKE_SEEN_KEY, JSON.stringify(true));
+						setSeen(true);
+					}}
+				>
+					<Close className="text-content-onColor" width={16} height={16} />
+				</button>
+			</div>
+		</a>
+	);
+}

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

@@ -22,6 +22,7 @@ import { FEATURES } from '_src/shared/experimentation/features';
 import { AccountsList } from '_src/ui/app/components/accounts/AccountsList';
 import { UnlockAccountButton } from '_src/ui/app/components/accounts/UnlockAccountButton';
 import { BuyNLargeHomePanel } from '_src/ui/app/components/buynlarge/HomePanel';
+import { StakeWarning } from '_src/ui/app/components/StakeWarning';
 import { useActiveAccount } from '_src/ui/app/hooks/useActiveAccount';
 import { useCoinMetadataOverrides } from '_src/ui/app/hooks/useCoinMetadataOverride';
 import { usePinnedCoinTypes } from '_src/ui/app/hooks/usePinnedCoinTypes';
@@ -419,6 +420,7 @@ function TokenDetails({ coinType }: TokenDetailsProps) {
 					data-testid="coin-page"
 				>
 					<AccountsList />
+					<StakeWarning />
 					<BuyNLargeHomePanel />
 					<UsdcPromoBanner />