Show user balance on bet panels

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { XIcon } from '@heroicons/react/solid'
 
 import { Answer } from 'common/answer'
@@ -132,7 +132,10 @@ export function AnswerBetPanel(props: {
           </button>
         )}
       </Row>
-      <div className="my-3 text-left text-sm text-gray-500">Amount </div>
+      <Row className="my-3 justify-between text-left text-sm text-gray-500">
+        Amount
+        <span>(balance: {formatMoney(user?.balance ?? 0)})</span>
+      </Row>
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}

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

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import Textarea from 'react-expanding-textarea'
 import { findBestMatch } from 'string-similarity'
 
@@ -149,7 +149,12 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
           {text && (
             <>
               <Col className="mt-1 gap-2">
-                <div className="text-sm text-gray-500">Bet amount</div>
+                <Row className="my-3 justify-between text-left text-sm text-gray-500">
+                  Bet Amount
+                  <span className={'sm:hidden'}>
+                    (balance: {formatMoney(user?.balance ?? 0)})
+                  </span>
+                </Row>{' '}
                 <BuyAmountInput
                   amount={betAmount}
                   onChange={setBetAmount}

web/components/bet-panel.tsx

@@ -280,7 +280,12 @@ function BuyPanel(props: {
         isPseudoNumeric={isPseudoNumeric}
       />
 
-      <div className="my-3 text-left text-sm text-gray-500">Amount</div>
+      <Row className="my-3 justify-between text-left text-sm text-gray-500">
+        Amount
+        <span className={'xl:hidden'}>
+          (balance: {formatMoney(user?.balance ?? 0)})
+        </span>
+      </Row>
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}
@@ -598,9 +603,14 @@ function LimitOrderPanel(props: {
         </div>
       )}
 
-      <div className="mt-1 mb-3 text-left text-sm text-gray-500">
+      <Row className="mt-1 mb-3 justify-between text-left text-sm text-gray-500">
-        Max amount<span className="ml-1 text-red-500">*</span>
+        <span>
-      </div>
+          Max amount<span className="ml-1 text-red-500">*</span>
+        </span>
+        <span className={'xl:hidden'}>
+          (balance: {formatMoney(user?.balance ?? 0)})
+        </span>
+      </Row>
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}