diff --git a/apps/wallet/src/ui/app/components/StakeWarning.tsx b/apps/wallet/src/ui/app/components/StakeWarning.tsx new file mode 100644 index 0000000000000..4432f23ab770c --- /dev/null +++ b/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(() => { + const stored = localStorage.getItem(STAKE_SEEN_KEY); + if (stored) { + return JSON.parse(stored); + } + return false; + }); + + const warning = useFeatureValue('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 ( + +
+ + {warning.text.replace( + '{endDate}', + new Date(warning.endDate).toLocaleString(undefined, { + dateStyle: 'full', + timeStyle: 'short', + }), + )} + +
+ +
+ +
+
+ ); +} diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx index 19296c0687f89..ffcef3b18ac29 100644 --- a/apps/wallet/src/ui/app/pages/home/tokens/TokensDetails.tsx +++ b/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" > +