large bet warning

web/components/alert-box.tsx

@@ -1,24 +1,26 @@
 import { ExclamationIcon } from '@heroicons/react/solid'
+import { Col } from './layout/col'
+import { Row } from './layout/row'
 import { Linkify } from './linkify'
 
 export function AlertBox(props: { title: string; text: string }) {
   const { title, text } = props
   return (
-    <div className="rounded-md bg-yellow-50 p-4">
-      <div className="flex">
-        <div className="flex-shrink-0">
+    <Col className="rounded-md bg-yellow-50 p-4">
+      <Row className="mb-2 flex-shrink-0">
         <ExclamationIcon
           className="h-5 w-5 text-yellow-400"
           aria-hidden="true"
         />
-        </div>
+
         <div className="ml-3">
           <h3 className="text-sm font-medium text-yellow-800">{title}</h3>
-          <div className="mt-2 text-sm text-yellow-700">
+        </div>
+      </Row>
+
+      <div className="mt-2 whitespace-pre-line text-sm text-yellow-700">
         <Linkify text={text} />
       </div>
-        </div>
-      </div>
-    </div>
+    </Col>
   )
 }

web/components/bet-panel.tsx

@@ -43,6 +43,7 @@ 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'
 
 export function BetPanel(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
@@ -264,6 +265,8 @@ function BuyPanel(props: {
 
   const format = getFormattedMappedValue(contract)
 
+  const bankrollFraction = (betAmount ?? 0) / (user?.balance ?? 1e9)
+
   return (
     <Col className={hidden ? 'hidden' : ''}>
       <div className="my-3 text-left text-sm text-gray-500">
@@ -287,6 +290,22 @@ function BuyPanel(props: {
         disabled={isSubmitting}
         inputRef={inputRef}
       />
+
+      {(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">