From 0d6b18877fdba0199f91cfb67777e31f5164b8f3 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Thu, 21 Jul 2022 14:24:31 -0600
Subject: [PATCH] Check balance before creation

---
 web/components/challenges/create-challenge-button.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/components/challenges/create-challenge-button.tsx b/web/components/challenges/create-challenge-button.tsx
index 740f502d..e406dabf 100644
--- a/web/components/challenges/create-challenge-button.tsx
+++ b/web/components/challenges/create-challenge-button.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
 import { Title } from '../title'
@@ -79,6 +79,7 @@ function CreateChallengeForm(props: {
   const [isCreating, setIsCreating] = useState(false)
   const [finishedCreating, setFinishedCreating] = useState(false)
   const [copyPressed, setCopyPressed] = useState(false)
+  const [error, setError] = useState<string>('')
   setTimeout(() => setCopyPressed(false), 300)
   const defaultExpire = 'week'
   const isBinary = contract.outcomeType === 'BINARY'
@@ -93,6 +94,9 @@ function CreateChallengeForm(props: {
     prob: Math.round(getOutcomeProbability(contract, 'YES') * 100),
     message: defaultMessage,
   })
+  useEffect(() => {
+    setError('')
+  }, [challengeInfo])
 
   return (
     <>
@@ -100,6 +104,10 @@ function CreateChallengeForm(props: {
         <form
           onSubmit={(e) => {
             e.preventDefault()
+            if (user.balance < challengeInfo.amount) {
+              setError('You do not have enough mana to create this challenge')
+              return
+            }
             setIsCreating(true)
             onCreate(challengeInfo).finally(() => setIsCreating(false))
             setFinishedCreating(true)
@@ -227,6 +235,7 @@ function CreateChallengeForm(props: {
               Create
             </Button>
           </Row>
+          <Row className={'text-error'}>{error} </Row>
         </form>
       )}
       {finishedCreating && (