sell button warning

web/components/bet-panel.tsx

@@ -831,7 +831,7 @@ export function SellPanel(props: {
 
   const unfilledBets = useUnfilledBets(contract.id) ?? []
 
-  const betDisabled = isSubmitting || !amount || error
+  const betDisabled = isSubmitting || !amount || error !== undefined
 
   // Sell all shares if remaining shares would be < 1
   const isSellingAllShares = amount === Math.floor(shares)
@@ -884,6 +884,19 @@ export function SellPanel(props: {
   )
   const resultProb = getCpmmProbability(cpmmState.pool, cpmmState.p)
 
+  const getValue = getMappedValue(contract)
+  const rawDifference = Math.abs(getValue(resultProb) - getValue(initialProb))
+  const displayedDifference =
+    contract.outcomeType === 'PSEUDO_NUMERIC'
+      ? formatLargeNumber(rawDifference)
+      : formatPercent(rawDifference)
+  const probChange = Math.abs(resultProb - initialProb)
+
+  const warning =
+    probChange >= 0.3
+      ? `Are you sure you want to move the market by ${displayedDifference}?`
+      : undefined
+
   const openUserBets = userBets.filter((bet) => !bet.isSold && !bet.sale)
   const [yesBets, noBets] = partition(
     openUserBets,
@@ -923,7 +936,7 @@ export function SellPanel(props: {
         label="Qty"
         error={error}
         disabled={isSubmitting}
-        inputClassName="w-full"
+        inputClassName="w-full ml-1"
       />
 
       <Col className="mt-3 w-full gap-3 text-sm">
@@ -945,20 +958,17 @@ export function SellPanel(props: {
 
       <Spacer h={8} />
 
-      <button
+      <WarningConfirmationButton
-        className={clsx(
+        marketType="binary"
-          'btn flex-1',
+        amount={saleValue}
-          betDisabled
+        warning={warning}
-            ? 'btn-disabled'
+        isSubmitting={isSubmitting}
-            : sharesOutcome === 'YES'
+        onSubmit={betDisabled ? undefined : submitSell}
-            ? 'btn-primary'
+        disabled={!!betDisabled}
-            : 'border-none bg-red-400 hover:bg-red-500',
+        size="xl"
-          isSubmitting ? 'loading' : ''
+        color="blue"
-        )}
+        actionLabel="Sell"
-        onClick={betDisabled ? undefined : submitSell}
+      />
-      >
-        {isSubmitting ? 'Submitting...' : 'Submit sell'}
-      </button>
 
       {wasSubmitted && <div className="mt-4">Sell submitted!</div>}
     </>

web/components/warning-confirmation-button.tsx

@@ -6,17 +6,19 @@ import { ConfirmationButton } from './confirmation-button'
 import { ExclamationIcon } from '@heroicons/react/solid'
 import { formatMoney } from 'common/util/format'
 import { Button, ColorType, SizeType } from './button'
+import { capitalize } from 'lodash'
 
 export function WarningConfirmationButton(props: {
   amount: number | undefined
   marketType: 'freeResponse' | 'binary'
   warning?: string
-  onSubmit: () => void
+  onSubmit?: () => void
   disabled: boolean
   isSubmitting: boolean
   openModalButtonClass?: string
   color: ColorType
   size: SizeType
+  actionLabel?: string
 }) {
   const {
     amount,
@@ -27,8 +29,16 @@ export function WarningConfirmationButton(props: {
     openModalButtonClass,
     size,
     color,
+    actionLabel,
   } = props
 
+  const label = capitalize(actionLabel) ?? 'Wager'
+  const buttonText = isSubmitting
+    ? 'Submitting...'
+    : amount
+    ? `${label} ${formatMoney(amount)}`
+    : label
+
   if (!warning) {
     return (
       <Button
@@ -38,11 +48,7 @@ export function WarningConfirmationButton(props: {
         onClick={onSubmit}
         color={color}
       >
-        {isSubmitting
+        {buttonText}
-          ? 'Submitting...'
-          : amount
-          ? `Wager ${formatMoney(amount)}`
-          : 'Wager'}
       </Button>
     )
   }
@@ -50,10 +56,10 @@ export function WarningConfirmationButton(props: {
   return (
     <ConfirmationButton
       openModalBtn={{
-        label: amount ? `Wager ${formatMoney(amount)}` : 'Wager',
+        label: buttonText,
         size: size,
         color: 'yellow',
-        disabled: isSubmitting,
+        disabled: isSubmitting || disabled,
       }}
       cancelBtn={{
         label: 'Cancel',