From 6cfae81093b943978d1014cc0bb6042b6418d8f1 Mon Sep 17 00:00:00 2001 From: mantikoros Date: Mon, 23 Sep 2024 23:51:16 -0700 Subject: [PATCH] SweepVerifySection; rm verify popup --- web/components/bet/bet-panel.tsx | 2 +- .../contract/contract-description.tsx | 6 +- .../contract/twomba-contract-page.tsx | 8 +- .../contract/twomba-header-actions.tsx | 5 -- web/components/gidx/verify-me.tsx | 2 +- .../profile/redeem-sweeps-buttons.tsx | 2 +- web/components/sweeps-explainer.tsx | 8 ++ ...y-callout.tsx => sweep-verify-section.tsx} | 84 +++++++++++-------- web/public/sweeps-infographic.svg | 32 +++++++ 9 files changed, 97 insertions(+), 52 deletions(-) rename web/components/twomba/{toggle-verify-callout.tsx => sweep-verify-section.tsx} (72%) create mode 100644 web/public/sweeps-infographic.svg diff --git a/web/components/bet/bet-panel.tsx b/web/components/bet/bet-panel.tsx index 61fdaa25b0..f92dded4bb 100644 --- a/web/components/bet/bet-panel.tsx +++ b/web/components/bet/bet-panel.tsx @@ -63,7 +63,7 @@ import { MoneyDisplay } from './money-display' import { OrderBookPanel, YourOrders } from './order-book' import { YesNoSelector } from './yes-no-selector' import { CashoutLimitWarning } from './cashout-limit-warning' -import { InBeta } from '../twomba/toggle-verify-callout' +import { InBeta } from '../twomba/sweep-verify-section' import { LocationMonitor } from '../gidx/location-monitor' import { getVerificationStatus } from 'common/gidx/user' diff --git a/web/components/contract/contract-description.tsx b/web/components/contract/contract-description.tsx index f2c3fbc014..06b84c4240 100644 --- a/web/components/contract/contract-description.tsx +++ b/web/components/contract/contract-description.tsx @@ -11,6 +11,7 @@ import { JSONContent } from '@tiptap/core' import { updateMarket } from 'web/lib/api/api' import { toast } from 'react-hot-toast' import { LogoIcon } from '../icons/logo-icon' +import { SweepVerifySection } from '../twomba/sweep-verify-section' export function ContractDescription(props: { contract: Contract @@ -25,6 +26,9 @@ export function ContractDescription(props: { return ( <>
+ {contract.token === 'CASH' && !user?.sweepstakesVerified && ( + + )} {isCreator || isAdmin ? ( ) : ( @@ -35,7 +39,7 @@ export function ContractDescription(props: { /> )} {contract.token === 'CASH' && ( -
+
This question is managed and resolved by Manifold. diff --git a/web/components/contract/twomba-contract-page.tsx b/web/components/contract/twomba-contract-page.tsx index e4db407bda..8d3250ac30 100644 --- a/web/components/contract/twomba-contract-page.tsx +++ b/web/components/contract/twomba-contract-page.tsx @@ -71,7 +71,6 @@ import { scrollIntoViewCentered } from 'web/lib/util/scroll' import { SpiceCoin } from 'web/public/custom-components/spiceCoin' import { YourTrades } from 'web/pages/[username]/[contractSlug]' import { useSweepstakes } from '../sweestakes-context' -import { ToggleVerifyCallout } from '../twomba/toggle-verify-callout' import { useRouter } from 'next/router' export function TwombaContractPageContent(props: ContractParams) { @@ -316,12 +315,7 @@ export function TwombaContractPageContent(props: ContractParams) { /> )} - {!!liveContract.siblingContractId && ( - - )} + diff --git a/web/components/contract/twomba-header-actions.tsx b/web/components/contract/twomba-header-actions.tsx index 48b989b347..9c517a05f6 100644 --- a/web/components/contract/twomba-header-actions.tsx +++ b/web/components/contract/twomba-header-actions.tsx @@ -33,7 +33,6 @@ import { WatchMarketModal } from './watch-market-modal' import { ChangeBannerButton } from './change-banner-button' import { isAdminId } from 'common/envs/constants' import { FaDollarSign } from 'react-icons/fa' -import { ToggleVerifyCallout } from '../twomba/toggle-verify-callout' import router from 'next/router' export function TwombaHeaderActions(props: { @@ -256,10 +255,6 @@ export function TwombaHeaderActions(props: { {!!currentContract.siblingContractId && (
-
)} {!playContract.coverImageUrl && isCreator && ( diff --git a/web/components/gidx/verify-me.tsx b/web/components/gidx/verify-me.tsx index 1f0fee7fc8..0793a4ad79 100644 --- a/web/components/gidx/verify-me.tsx +++ b/web/components/gidx/verify-me.tsx @@ -11,7 +11,7 @@ import { Row } from 'web/components/layout/row' import { SWEEPIES_NAME, TWOMBA_ENABLED } from 'common/envs/constants' import { getDocumentsStatus } from 'common/gidx/document' import { useMonitorStatus } from 'web/hooks/use-monitor-status' -import { VerifyButton } from '../twomba/toggle-verify-callout' +import { VerifyButton } from '../twomba/sweep-verify-section' import { MdBlock } from 'react-icons/md' import { XIcon } from '@heroicons/react/solid' import { usePersistentLocalState } from 'web/hooks/use-persistent-local-state' diff --git a/web/components/profile/redeem-sweeps-buttons.tsx b/web/components/profile/redeem-sweeps-buttons.tsx index 272ce230d1..327034460a 100644 --- a/web/components/profile/redeem-sweeps-buttons.tsx +++ b/web/components/profile/redeem-sweeps-buttons.tsx @@ -4,7 +4,7 @@ import { useAPIGetter } from 'web/hooks/use-api-getter' import { Button } from '../buttons/button' import { CoinNumber } from '../widgets/coin-number' import { KYC_VERIFICATION_BONUS_CASH } from 'common/economy' -import { useKYCGiftAmount } from '../twomba/toggle-verify-callout' +import { useKYCGiftAmount } from '../twomba/sweep-verify-section' import { SweepiesCoin } from 'web/public/custom-components/sweepiesCoin' import { blockFromSweepstakes } from 'common/gidx/user' diff --git a/web/components/sweeps-explainer.tsx b/web/components/sweeps-explainer.tsx index 89e8e2d068..b14c5ebc7c 100644 --- a/web/components/sweeps-explainer.tsx +++ b/web/components/sweeps-explainer.tsx @@ -54,3 +54,11 @@ export function SweepsExplainer() { ) } + +export function SweepsInfographic() { + return ( +
+ Sweepstakes Infographic +
+ ) +} diff --git a/web/components/twomba/toggle-verify-callout.tsx b/web/components/twomba/sweep-verify-section.tsx similarity index 72% rename from web/components/twomba/toggle-verify-callout.tsx rename to web/components/twomba/sweep-verify-section.tsx index 32adca14e9..98137469ad 100644 --- a/web/components/twomba/toggle-verify-callout.tsx +++ b/web/components/twomba/sweep-verify-section.tsx @@ -6,7 +6,7 @@ import { capitalize } from 'lodash' import Link from 'next/link' import { usePersistentLocalState } from 'web/hooks/use-persistent-local-state' import { usePrivateUser, useUser } from 'web/hooks/use-user' -import { buttonClass } from '../buttons/button' +import { Button, buttonClass } from '../buttons/button' import { Row } from '../layout/row' import { CoinNumber } from '../widgets/coin-number' import { Tooltip } from '../widgets/tooltip' @@ -17,12 +17,13 @@ import { getVerificationStatus, PROMPT_USER_VERIFICATION_MESSAGES, } from 'common/gidx/user' +import { SweepsInfographic } from '../sweeps-explainer' +import { firebaseLogin } from 'web/lib/firebase/users' -export function ToggleVerifyCallout(props: { +export function SweepVerifySection(props: { className?: string - caratClassName?: string }) { - const { className, caratClassName } = props + const { className } = props const user = useUser() const privateUser = usePrivateUser() const [dismissed, setDismissed] = usePersistentLocalState( @@ -32,23 +33,34 @@ export function ToggleVerifyCallout(props: { if (dismissed || user === undefined || privateUser === undefined) return null - // TWODO: Add a link to about here if (user === null || privateUser === null) { return ( - - -
Sweepstakes are here
- - -
+ + +
This is a sweepstakes market! {capitalize(TRADE_TERM)} with{' '} {SWEEPIES_NAME} for the chance to win real cash prizes.
- + + + + +
) } @@ -56,25 +68,24 @@ export function ToggleVerifyCallout(props: { if (!PROMPT_USER_VERIFICATION_MESSAGES.includes(message)) return null return ( - - -
Sweepstakes are here
- - - Verify your identity and start earning real cash prizes today. -
-
-
-
+
+ + +
+ Verify your identity and start earning real cash prizes today.
+ - + + + + +
) } @@ -86,7 +97,7 @@ export function InBeta(props: { return ( @@ -94,12 +105,13 @@ export function InBeta(props: { text={`${SWEEPIES_NAME} is currently in beta, which means we’re still fine-tuning it. You may encounter some bugs or imperfections as we continue to improve it.`} placement={tooltipPlacement} > - IN BETA + BETA ) } -function CalloutFrame(props: { + +export function CalloutFrame(props: { children: React.ReactNode className?: string caratClassName?: string @@ -145,7 +157,7 @@ export function VerifyButton(props: { className?: string }) { + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +