Show error after modal

- Show balance if insufficient funds
- Clear error from amount input if amount deleted entirely

web/components/amount-input.tsx

@@ -113,6 +113,8 @@ export function BuyAmountInput(props: {
       } else {
         setError(undefined)
       }
+    } else {
+      setError(undefined)
     }
   }
 

web/components/bet-inline.tsx

@@ -14,14 +14,18 @@ import { useUnfilledBets } from 'web/hooks/use-bets'
 import { useUser } from 'web/hooks/use-user'
 import { SignUpPrompt } from './sign-up-prompt'
 import { getCpmmProbability } from 'common/calculate-cpmm'
+import { Col } from './layout/col'
+import { XIcon } from '@heroicons/react/solid'
+import { formatMoney } from 'common/util/format'
 
 // adapted from bet-panel.ts
 export function BetInline(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
   className?: string
   setProbAfter: (probAfter: number) => void
+  onClose: () => void
 }) {
-  const { contract, className, setProbAfter: setResult } = props
+  const { contract, className, setProbAfter, onClose } = props
 
   const user = useUser()
 
@@ -40,7 +44,7 @@ export function BetInline(props: {
     unfilledBets
   )
   const resultProb = getCpmmProbability(newPool, newP)
-  useEffect(() => setResult(resultProb), [resultProb])
+  useEffect(() => setProbAfter(resultProb), [resultProb])
 
   const submitBet = useMutation(
     () => placeBet({ outcome, amount, contractId: contract.id }),
@@ -64,7 +68,8 @@ export function BetInline(props: {
   const betDisabled = submitBet.isLoading || submitBet.isError || !amount
 
   return (
-    <Row className={clsx('h-8 items-stretch justify-center gap-3', className)}>
+    <Col className={clsx('items-center', className)}>
+      <Row className="h-12 items-stretch gap-3 rounded bg-indigo-200 py-2 px-3">
         <div className="text-xl">Bet</div>
         <YesNoSelector
           className="space-x-0"
@@ -99,6 +104,17 @@ export function BetInline(props: {
           </Button>
         )}
         <SignUpPrompt size="xs" />
+        <button onClick={onClose}>
+          <XIcon className="ml-1 h-6 w-6" />
+        </button>
       </Row>
+      {error && (
+        <div className="text-error my-1 text-sm">
+          {error}{' '}
+          {error === 'Insufficient balance' &&
+            `(${formatMoney(user?.balance ?? 0)})`}
+        </div>
+      )}
+    </Col>
   )
 }

web/pages/embed/[username]/[contractSlug].tsx

@@ -149,12 +149,12 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
       </div>
 
       {(isBinary || isPseudoNumeric) && betPanelOpen && (
-        <Row className="mb-2 items-center justify-center gap-4 self-center rounded bg-indigo-200 py-2 px-3">
+        <BetInline
-          <BetInline contract={contract as any} setProbAfter={setProbAfter}/>
+          contract={contract as any}
-          <button onClick={() => setBetPanelOpen(false)}>
+          setProbAfter={setProbAfter}
-            <XIcon className="h-6 w-6" />
+          onClose={() => setBetPanelOpen(false)}
-          </button>
+          className="self-center"
-        </Row>
+        />
       )}
 
       <div className="mx-1 mb-2 min-h-0 flex-1" ref={setElem}>