Feat/nft payments withdraw

packages/chess-app/src/components/ChessBoard.tsx

@@ -588,7 +588,7 @@ export function ChessBoard() {
       />
 
       <NewGameModal />
-      <CreateUserModal setUser={setUser} />
+      <CreateUserModal setUser={setUser} currentBalance={balance} />
     </div>
   )
 }

packages/chess-app/src/components/CreateUser.tsx

@@ -1,7 +1,8 @@
-import { useContext, useState } from 'react'
-import { ComputerContext, Modal, UtilsContext } from '@bitcoin-computer/components'
+import { useContext, useEffect, useState } from 'react'
+import { bigIntToStr, ComputerContext, Modal, UtilsContext } from '@bitcoin-computer/components'
 import { Computer } from '@bitcoin-computer/lib'
 import { User, UserHelper } from '@bitcoin-computer/chess-contracts'
+import { HiRefresh } from 'react-icons/hi'
 import { VITE_CHESS_USER_MOD_SPEC } from '../constants/modSpecs'
 
 export const creaetUserModal = 'create-user-modal'
@@ -13,15 +14,21 @@ export function CreateUserModalContent({
   setUserName,
   userName,
   setUser,
+  setTitle,
+  currentBalance,
 }: {
   userTxId: string
   setUserTxId: React.Dispatch<React.SetStateAction<string>>
   computer: Computer
   userName: string
   setUserName: React.Dispatch<React.SetStateAction<string>>
   setUser: React.Dispatch<React.SetStateAction<User | null>>
+  setTitle: React.Dispatch<React.SetStateAction<string>>
+  currentBalance: bigint
 }) {
   const { showLoader, showSnackBar } = UtilsContext.useUtilsComponents()
+  const [balance, setBalance] = useState<bigint>(currentBalance)
+  const [address, setAddress] = useState<string>('')
 
   const onSubmit = async (e: React.SyntheticEvent) => {
     e.preventDefault()
@@ -30,10 +37,10 @@ export function CreateUserModalContent({
       const userHelper = new UserHelper({ computer, mod: VITE_CHESS_USER_MOD_SPEC })
       const txId = await userHelper.createUser(userName)
       const [rev] = await computer.query({ ids: [txId + ':0'] })
-      // Should there be delay here
       const user = (await computer.sync(rev)) as User
       setUser(user)
       setUserTxId(txId)
+      setTitle('Account created successfully!')
       showLoader(false)
     } catch (err) {
       if (err instanceof Error) {
@@ -45,66 +52,114 @@ export function CreateUserModalContent({
     }
   }
 
+  const fund = async () => {
+    await computer.faucet(1e8)
+    setBalance((await computer.getBalance()).balance)
+  }
+
+  const refreshBalance = async () => {
+    setBalance((await computer.getBalance()).balance)
+    setAddress(await computer.getAddress())
+  }
+
+  useEffect(() => {
+    refreshBalance()
+  }, [])
+
   return (
-    <>
+    <div className="p-6 bg-white dark:bg-gray-700 rounded-lg shadow-md max-w-md mx-auto">
       {userTxId ? (
-        <div className="flex flex-col items-start border rounded-lg shadow-md bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-700">
-          <div className="relative group w-full p-6 border-b border-gray-200 dark:border-gray-600">
-            <p className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200">
-              Account created.
-            </p>
-          </div>
+        <div className="flex flex-col items-start">
+          <span className="text-gray-800 dark:text-gray-200">
+            Click on "New Game" to start playing.
+          </span>
         </div>
       ) : (
-        <>
-          <form
-            onSubmit={onSubmit}
-            className="w-full mx-auto bg-white shadow-md rounded-lg dark:bg-gray-700"
-          >
-            <div className="grid gap-6 p-6 border-b border-gray-200 dark:border-gray-600">
-              <div>
-                <label
-                  htmlFor="userName"
-                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200"
-                >
-                  Name
-                </label>
-                <input
-                  type="text"
-                  id="userName"
-                  value={userName}
-                  onChange={(e) => setUserName(e.target.value)}
-                  className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block w-full p-3 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+        <div className="space-y-6">
+          {/* Balance Display */}
+          <div className="bg-gray-50 dark:bg-gray-700 rounded-lg py-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                  Balance: {bigIntToStr(balance)} {computer.getChain()}
+                </span>
+                <HiRefresh
+                  onClick={refreshBalance}
+                  className="w-4 h-4 cursor-pointer text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-colors"
                 />
               </div>
+              {computer.getNetwork() === 'regtest' && (
+                <button
+                  id="fund-wallet"
+                  type="button"
+                  onClick={fund}
+                  className="px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 border border-blue-600 dark:border-blue-400 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-500 dark:hover:text-white rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
+                >
+                  Fund Wallet
+                </button>
+              )}
             </div>
-            <div className="p-6">
-              <button
-                type="submit"
-                className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            {computer.getNetwork() !== 'regtest' && (
+              <div className="mt-4">
+                <label className="block mb-2 text-sm font-medium text-gray-500 dark:text-gray-400">
+                  Fund your address
+                </label>
+                <p className="text-sm text-gray-600 dark:text-gray-300 break-all">{address}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Form */}
+          <form onSubmit={onSubmit} className="space-y-6">
+            <div>
+              <label
+                htmlFor="userName"
+                className="block mb-2 text-sm font-medium text-gray-500 dark:text-gray-400"
               >
-                Create Account
-              </button>
+                Name
+              </label>
+              <input
+                type="text"
+                id="userName"
+                value={userName}
+                onChange={(e) => setUserName(e.target.value)}
+                className="w-full px-4 py-2 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white rounded-md focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 transition-colors"
+                placeholder="Enter your name"
+              />
             </div>
+            <button
+              type="submit"
+              disabled={balance === 0n}
+              className={`w-full px-4 py-2 text-sm font-medium text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors ${
+                balance === 0n
+                  ? 'bg-gray-400 cursor-not-allowed'
+                  : 'bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700'
+              }`}
+            >
+              Create Account
+            </button>
           </form>
-        </>
+        </div>
       )}
-    </>
+    </div>
   )
 }
 
 export function CreateUserModal({
   setUser,
+  currentBalance,
 }: {
   setUser: React.Dispatch<React.SetStateAction<User | null>>
+  currentBalance: bigint
 }) {
   const computer = useContext(ComputerContext)
   const [userTxId, setUserTxId] = useState('')
   const [userName, setUserName] = useState('')
+  const [title, setTitle] = useState<string>('Please create your account!')
 
   return (
     <Modal.Component
-      title={'Please create your account!'}
+      title={title}
       content={CreateUserModalContent}
       contentData={{
         computer,
@@ -113,6 +168,8 @@ export function CreateUserModal({
         userName,
         setUserName,
         setUser,
+        setTitle,
+        currentBalance,
       }}
       id={creaetUserModal}
     />