From 6706fe73501b42266378c9aa8b27689de85b46a7 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Thu, 1 Sep 2022 08:12:46 -0600
Subject: [PATCH] Show user balance on bet panels

---
 web/components/answers/answer-bet-panel.tsx    |  7 +++++--
 web/components/answers/create-answer-panel.tsx |  9 +++++++--
 web/components/bet-panel.tsx                   | 18 ++++++++++++++----
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
index f04d752f..c5897056 100644
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/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}
diff --git a/web/components/answers/create-answer-panel.tsx b/web/components/answers/create-answer-panel.tsx
index cef60138..38aeac0e 100644
--- a/web/components/answers/create-answer-panel.tsx
+++ b/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}
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index d596dd46..f958ed87 100644
--- a/web/components/bet-panel.tsx
+++ b/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">
-        Max amount<span className="ml-1 text-red-500">*</span>
-      </div>
+      <Row className="mt-1 mb-3 justify-between text-left text-sm text-gray-500">
+        <span>
+          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}