SweepVerifySection; rm verify popup

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'
 

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 (
     <>
       <div className="mt-6">
+        {contract.token === 'CASH' && !user?.sweepstakesVerified && (
+          <SweepVerifySection />
+        )}
         {isCreator || isAdmin ? (
           <EditableDescription contract={contract} description={description} />
         ) : (
@@ -35,7 +39,7 @@ export function ContractDescription(props: {
           />
         )}
         {contract.token === 'CASH' && (
-          <div className="text-ink-600 flex items-center justify-center space-x-2 rounded-md bg-gray-50 px-4 py-2 italic">
+          <div className="text-ink-600 bg-canvas-50 flex items-center justify-center space-x-2 rounded-md px-4 py-2 italic">
             <LogoIcon className="h-5 w-5 text-indigo-600" />
             <span>This question is managed and resolved by Manifold.</span>
             <LogoIcon className="h-5 w-5 text-indigo-600" />

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) {
               />
             </Row>
           )}
-          {!!liveContract.siblingContractId && (
-            <ToggleVerifyCallout
-              className="mx-4 mb-4 mt-1.5 w-[calc(100%-2rem)] sm:hidden"
-              caratClassName="right-[81px]"
-            />
-          )}
+
           <Col className={clsx('mb-4 p-4 pt-0 md:pb-8 lg:px-8')}>
             <Col className="w-full gap-3 lg:gap-4">
               <Col>

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 && (
         <div className="relative">
           <TwombaToggle />
-          <ToggleVerifyCallout
-            className="absolute -right-[60px] top-full z-10 mt-3 hidden w-80 sm:flex"
-            caratClassName="right-[84px]"
-          />
         </div>
       )}
       {!playContract.coverImageUrl && isCreator && (

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'

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'
 

web/components/sweeps-explainer.tsx

@@ -54,3 +54,11 @@ export function SweepsExplainer() {
     </>
   )
 }
+
+export function SweepsInfographic() {
+  return (
+    <div className="w-full max-w-2xl mx-auto">
+      <img src="/sweeps-infographic.svg" alt="Sweepstakes Infographic" className="w-full h-auto" />
+    </div>
+  )
+}

web/components/twomba/toggle-verify-callout.tsx → 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,49 +33,59 @@ 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 (
-      <CalloutFrame
-        className={className}
-        setDismissed={setDismissed}
-        caratClassName={caratClassName}
+      <div
+        className={`border-ink-300 bg-canvas-50 text-ink-800 relative rounded-lg border px-5 py-4 text-sm shadow-lg ${className}`}
       >
-        <Row className="w-full justify-between gap-2">
-          <div className=" font-semibold">Sweepstakes are here</div>
-          <InBeta className="mb-2" tooltipPlacement={'bottom'} />
-        </Row>
-        <div className="text-ink-700 text-sm">
+        <SweepsInfographic />
+
+        <div className="text-ink-700 mt-4 text-sm">
           This is a <b>sweepstakes market</b>! {capitalize(TRADE_TERM)} with{' '}
           {SWEEPIES_NAME} for the chance to win real cash prizes.
         </div>
-      </CalloutFrame>
+        <Button
+          color="gradient-pink"
+          size="xl"
+          onClick={firebaseLogin}
+          className="w-full mt-4"
+        >
+          Get started
+        </Button>
+        <Row className="mt-1 w-full">
+          <button
+            onClick={() => setDismissed(true)}
+            className="text-ink-500 hover:text-ink-600 mx-auto underline"
+          >
+            Dismiss
+          </button>
+        </Row>
+      </div>
     )
   }
 
   const { message } = getVerificationStatus(user, privateUser)
   if (!PROMPT_USER_VERIFICATION_MESSAGES.includes(message)) return null
 
   return (
-    <CalloutFrame
-      className={className}
-      setDismissed={setDismissed}
-      caratClassName={caratClassName}
-    >
-      <Row className="w-full justify-between gap-2">
-        <div className="font-semibold">Sweepstakes are here</div>
-        <InBeta className="mb-2" tooltipPlacement={'bottom'} />
-      </Row>
-      Verify your identity and start earning <b>real cash prizes</b> today.
-      <div
-        className={clsx('absolute -top-[10px] right-4 h-0 w-0', caratClassName)}
-      >
-        <div className="border-b-ink-300 relative h-0 w-0 border-b-[10px] border-l-[10px] border-r-[10px] border-l-transparent border-r-transparent">
-          <div className="border-b-canvas-50 absolute -left-[9px] top-[1px] h-0 w-0 border-b-[9px] border-l-[9px] border-r-[9px] border-l-transparent border-r-transparent"></div>
-        </div>
+    <div className={`border-ink-300 bg-canvas-50 text-ink-800 relative rounded-lg border px-5 py-4 text-sm shadow-lg ${className}`}>
+      <SweepsInfographic />
+
+      <div className="text-ink-700 text-sm mt-4">
+        Verify your identity and start earning <b>real cash prizes</b> today.
       </div>
+
       <VerifyButton className="mt-2" />
-    </CalloutFrame>
+
+      <Row className="mt-1 w-full">
+        <button
+          onClick={() => setDismissed(true)}
+          className="text-ink-500 hover:text-ink-600 mx-auto underline"
+        >
+          Dismiss
+        </button>
+      </Row>
+    </div>
   )
 }
 
@@ -86,20 +97,21 @@ export function InBeta(props: {
   return (
     <Row
       className={clsx(
-        ' bg-ink-200 text-ink-700 w-fit select-none items-center rounded-sm px-1.5 py-0.5 text-xs font-semibold',
+        'bg-ink-200 text-ink-700 w-fit select-none items-center rounded-sm px-1.5 py-0.5 text-xs font-semibold',
         className
       )}
     >
       <Tooltip
         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
       </Tooltip>
     </Row>
   )
 }
-function CalloutFrame(props: {
+
+export function CalloutFrame(props: {
   children: React.ReactNode
   className?: string
   caratClassName?: string
@@ -145,7 +157,7 @@ export function VerifyButton(props: { className?: string }) {
     <Link
       href={'/gidx/register'}
       className={clsx(
-        buttonClass('md', 'gradient-pink'),
+        buttonClass('xl', 'gradient-pink'),
         'w-full font-semibold',
         className
       )}