WarningConfirmationButton for bets

web/components/answers/answer-bet-panel.tsx

@@ -26,7 +26,7 @@ import { Bet } from 'common/bet'
 import { track } from 'web/lib/service/analytics'
 import { BetSignUpPrompt } from '../sign-up-prompt'
 import { isIOS } from 'web/lib/util/device'
-import { AlertBox } from '../alert-box'
+import { WarningConfirmationButton } from '../warning-confirmation-button'
 
 export function AnswerBetPanel(props: {
   answer: Answer
@@ -116,6 +116,15 @@ export function AnswerBetPanel(props: {
 
   const bankrollFraction = (betAmount ?? 0) / (user?.balance ?? 1e9)
 
+  const warning =
+    (betAmount ?? 0) > 10 && bankrollFraction >= 0.5 && bankrollFraction <= 1
+      ? `You might not want to spend ${formatPercent(
+          bankrollFraction
+        )} of your balance on a single bet. \n\nCurrent balance: ${formatMoney(
+          user?.balance ?? 0
+        )}`
+      : undefined
+
   return (
     <Col className={clsx('px-2 pb-2 pt-4 sm:pt-0', className)}>
       <Row className="items-center justify-between self-stretch">
@@ -148,21 +157,6 @@ export function AnswerBetPanel(props: {
         showSliderOnMobile
       />
 
-      {(betAmount ?? 0) > 10 &&
-      bankrollFraction >= 0.5 &&
-      bankrollFraction <= 1 ? (
-        <AlertBox
-          title="Whoa, there!"
-          text={`You might not want to spend ${formatPercent(
-            bankrollFraction
-          )} of your balance on a single bet. \n\nCurrent balance: ${formatMoney(
-            user?.balance ?? 0
-          )}`}
-        />
-      ) : (
-        ''
-      )}
-
       <Col className="mt-3 w-full gap-3">
         <Row className="items-center justify-between text-sm">
           <div className="text-gray-500">Probability</div>
@@ -198,16 +192,17 @@ export function AnswerBetPanel(props: {
       <Spacer h={6} />
 
       {user ? (
-        <button
+        <WarningConfirmationButton
-          className={clsx(
+          warning={warning}
+          onSubmit={submitBet}
+          isSubmitting={isSubmitting}
+          disabled={!!betDisabled}
+          openModalButtonClass={clsx(
             'btn self-stretch',
             betDisabled ? 'btn-disabled' : 'btn-primary',
             isSubmitting ? 'loading' : ''
           )}
-          onClick={betDisabled ? undefined : submitBet}
+        />
-        >
-          {isSubmitting ? 'Submitting...' : 'Submit'}
-        </button>
       ) : (
         <BetSignUpPrompt />
       )}

web/components/bet-panel.tsx

@@ -40,8 +40,8 @@ import { LimitBets } from './limit-bets'
 import { PillButton } from './buttons/pill-button'
 import { YesNoSelector } from './yes-no-selector'
 import { PlayMoneyDisclaimer } from './play-money-disclaimer'
-import { AlertBox } from './alert-box'
 import { isAndroid, isIOS } from 'web/lib/util/device'
+import { WarningConfirmationButton } from './warning-confirmation-button'
 
 export function BetPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
@@ -271,25 +271,15 @@ function BuyPanel(props: {
   const bankrollFraction = (betAmount ?? 0) / (user?.balance ?? 1e9)
 
   const warning =
-    (betAmount ?? 0) > 10 &&
+    (betAmount ?? 0) > 10 && bankrollFraction >= 0.5 && bankrollFraction <= 1
-    bankrollFraction >= 0.5 &&
+      ? `You might not want to spend ${formatPercent(
-    bankrollFraction <= 1 ? (
-      <AlertBox
-        title="Whoa, there!"
-        text={`You might not want to spend ${formatPercent(
           bankrollFraction
         )} of your balance on a single trade. \n\nCurrent balance: ${formatMoney(
           user?.balance ?? 0
-        )}`}
+        )}`
-      />
+      : (betAmount ?? 0) > 10 && probChange >= 0.3 && bankrollFraction <= 1
-    ) : (betAmount ?? 0) > 10 && probChange >= 0.3 && bankrollFraction <= 1 ? (
+      ? `Are you sure you want to move the market by ${displayedDifference}?`
-      <AlertBox
+      : undefined
-        title="Whoa, there!"
-        text={`Are you sure you want to move the market by ${displayedDifference}?`}
-      />
-    ) : (
-      <></>
-    )
 
   return (
     <Col className={hidden ? 'hidden' : ''}>
@@ -322,8 +312,6 @@ function BuyPanel(props: {
         showSliderOnMobile
       />
 
-      {warning}
-
       <Col className="mt-3 w-full gap-3">
         <Row className="items-center justify-between text-sm">
           <div className="text-gray-500">
@@ -364,20 +352,20 @@ function BuyPanel(props: {
       <Spacer h={8} />
 
       {user && (
-        <button
+        <WarningConfirmationButton
-          className={clsx(
+          warning={warning}
+          onSubmit={submitBet}
+          isSubmitting={isSubmitting}
+          disabled={!!betDisabled}
+          openModalButtonClass={clsx(
             'btn mb-2 flex-1',
             betDisabled
               ? 'btn-disabled'
               : outcome === 'YES'
               ? 'btn-primary'
-              : 'border-none bg-red-400 hover:bg-red-500',
+              : 'border-none bg-red-400 hover:bg-red-500'
-            isSubmitting ? 'loading' : ''
           )}
-          onClick={betDisabled ? undefined : submitBet}
+        />
-        >
-          {isSubmitting ? 'Submitting...' : 'Submit'}
-        </button>
       )}
 
       {wasSubmitted && <div className="mt-4">Trade submitted!</div>}

web/components/confirmation-button.tsx

@@ -47,13 +47,13 @@ export function ConfirmationButton(props: {
           {children}
           <Row className="gap-4">
             <div
-              className={clsx('btn normal-case', cancelBtn?.className)}
+              className={clsx('btn', cancelBtn?.className)}
               onClick={() => updateOpen(false)}
             >
               {cancelBtn?.label ?? 'Cancel'}
             </div>
             <div
-              className={clsx('btn normal-case', submitBtn?.className)}
+              className={clsx('btn', submitBtn?.className)}
               onClick={
                 onSubmitWithSuccess
                   ? () =>
@@ -69,7 +69,7 @@ export function ConfirmationButton(props: {
         </Col>
       </Modal>
       <div
-        className={clsx('btn normal-case', openModalBtn.className)}
+        className={clsx('btn', openModalBtn.className)}
         onClick={() => updateOpen(true)}
       >
         {openModalBtn.icon}

web/components/warning-confirmation-button.tsx

@@ -0,0 +1,74 @@
+import clsx from 'clsx'
+import React from 'react'
+
+import { Row } from './layout/row'
+import { ConfirmationButton } from './confirmation-button'
+import { ExclamationIcon } from '@heroicons/react/solid'
+
+export function WarningConfirmationButton(props: {
+  warning?: string
+  onSubmit: () => void
+  disabled?: boolean
+  isSubmitting: boolean
+  openModalButtonClass?: string
+  submitButtonClassName?: string
+}) {
+  const {
+    onSubmit,
+    warning,
+    disabled,
+    isSubmitting,
+    openModalButtonClass,
+    submitButtonClassName,
+  } = props
+
+  if (!warning) {
+    return (
+      <button
+        className={clsx(
+          openModalButtonClass,
+          isSubmitting ? 'loading' : '',
+          disabled && 'btn-disabled'
+        )}
+        onClick={onSubmit}
+        disabled={disabled}
+      >
+        {isSubmitting ? 'Submitting...' : 'Submit'}
+      </button>
+    )
+  }
+
+  return (
+    <ConfirmationButton
+      openModalBtn={{
+        className: clsx(
+          openModalButtonClass,
+          isSubmitting && 'btn-disabled loading'
+        ),
+        label: 'Submit',
+      }}
+      cancelBtn={{
+        label: 'Cancel',
+        className: 'btn-warning',
+      }}
+      submitBtn={{
+        label: 'Submit',
+        className: clsx(
+          'border-none btn-sm btn-ghost self-center',
+          submitButtonClassName
+        ),
+      }}
+      onSubmit={onSubmit}
+    >
+      <Row className="items-center text-xl">
+        <ExclamationIcon
+          className="h-16 w-16 text-yellow-400"
+          aria-hidden="true"
+        />
+        Whoa, there!
+      </Row>
+
+      <p>{warning}</p>
+    </ConfirmationButton>
+  )
+}