fiunding componet

Signed-off-by: Deggen <[email protected]>
bitcoin-sv · Feb 21, 2025 · a570a5c · a570a5c
1 parent 83aab49
commit a570a5c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 86 deletions.
diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -18,22 +18,11 @@ import Upload from './Upload'
 import Download from './Download'
 import './App.css'
 import { QRCodeSVG } from 'qrcode.react'
+import Funding from './Funding'
 
 /** Base API URL with environment-specific configuration */
 const API_URL = import.meta.env?.VITE_API_URL || 'http://localhost:3030'
 
-/**
- * Treasury information interface
- * @interface FundingInfo
- * @property {string} address - Bitcoin address for funding the treasury
- * @property {number} balance - Current balance in satoshis
- * @property {number} tokens - Available write tokens
- */
-interface FundingInfo {
-    address: string
-    balance: number
-    tokens: number
-}
 
 /**
  * Main application component
@@ -59,62 +48,6 @@ interface FundingInfo {
  * )
  */
 function App() {
-    // State for treasury information and UI control
-    const [fundingInfo, setFundingInfo] = useState<FundingInfo>({ address: '', balance: 0, tokens: 0 })
-    const [loading, setLoading] = useState(true)
-    const [tokenNumber, setTokenNumber] = useState(1)
-
-    /**
-     * Create new write tokens in the treasury
-     * @param {number} tokens - Number of tokens to create
-     * @throws {Error} When token creation fails
-     */
-    async function createFunds(tokens: number) {
-        try {
-            setLoading(true)
-            const response = await (await fetch(API_URL + '/fund/' + String(tokens))).json()
-            console.log({ response })
-            await fetchFundingInfo()
-        } catch (error) {
-            console.error('Failed to create funds', error)
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    /**
-     * Fetch current treasury status
-     * Updates the fundingInfo state with latest treasury information
-     * @throws {Error} When API call fails
-     */
-    const fetchFundingInfo = async () => {
-        try {
-            setLoading(true)
-            const { address, balance, tokens } = await (await fetch(API_URL + '/checkTreasury')).json()
-            console.log({ address, balance, tokens })
-            setFundingInfo({ address, balance, tokens })
-        } catch (error) {
-            console.error('Failed to fetch funding info', error)
-        } finally {
-            setLoading(false)
-        }
-    }
-
-    // Initialize treasury information on component mount
-    useEffect(() => {
-        fetchFundingInfo()
-    }, [])
-
-    // Loading state UI
-    if (loading) {
-        return <div>Loading...</div>
-    }
-
-    // Error state UI
-    if (!fundingInfo) {
-        return <div>Error loading funding info.</div>
-    }
-
     /**
      * Main application UI
      * Organized in sections:
@@ -137,21 +70,7 @@ function App() {
                 {/* Treasury Management Section */}
                 <section>
                     <h3>Treasury</h3>
-                    <QRCodeSVG value={fundingInfo.address} marginSize={2} width={128} />
-                    <p>Balance: <big>{fundingInfo.balance.toLocaleString()}</big> satoshis</p>
-                    <p>Tokens Ready: <big>{fundingInfo.tokens.toLocaleString()}</big></p>
-                    <label>
-                        <input
-                            type='number'
-                            min='1'
-                            max='1000'
-                            className='token-input'
-                            value={tokenNumber}
-                            onChange={(e) => setTokenNumber(parseInt(e.target.value))}
-                        />{' '}
-                        tokens
-                    </label>
-                    <button onClick={() => createFunds(tokenNumber)}>Create Tokens</button>
+                    <Funding />
                 </section>
 
                 {/* File Upload Section */}

diff --git a/front/src/Funding.tsx b/front/src/Funding.tsx
@@ -3,11 +3,31 @@ import { QRCodeSVG } from "qrcode.react"
 
 const API_URL = import.meta.env?.API_URL || 'http://localhost:3030'
 
+
+/**
+ * Treasury information interface
+ * @interface FundingInfo
+ * @property {string} address - Bitcoin address for funding the treasury
+ * @property {number} balance - Current balance in satoshis
+ * @property {number} tokens - Available write tokens
+ */
+interface FundingInfo {
+    address: string
+    balance: number
+    tokens: number
+}
+
 export default function Funding() {
-    const [fundingInfo, setFundingInfo] = useState({ address: '', balance: 0, tokens: 0 })
-    const [_, setLoading] = useState<boolean>(true)
+    // State for treasury information and UI control
+    const [fundingInfo, setFundingInfo] = useState<FundingInfo>({ address: '', balance: 0, tokens: 0 })
+    const [loading, setLoading] = useState<boolean>(true)
     const [tokenNumber, setTokenNumber] = useState(1)
 
+    /**
+     * Create new write tokens in the treasury
+     * @param {number} tokens - Number of tokens to create
+     * @throws {Error} When token creation fails
+     */
     async function createFunds(tokens: number) {
         try {
             setLoading(true)
@@ -20,7 +40,12 @@ export default function Funding() {
             setLoading(false)
         }
     }
-
+
+    /**
+     * Fetch current treasury status
+     * Updates the fundingInfo state with latest treasury information
+     * @throws {Error} When API call fails
+     */
     const fetchFundingInfo = async () => {
         try {
             setLoading(true)
@@ -34,10 +59,14 @@ export default function Funding() {
         }
     }
 
+    // Initialize treasury information on component mount
     useEffect(() => {
         fetchFundingInfo()
     }, [])
 
+    if (loading) return <div>Loading...</div>
+    if (!fundingInfo) return <div>Error loading funding info.</div>
+
     return <>
         <QRCodeSVG value={fundingInfo.address} marginSize={2} width={128} />
         <p>Balance: <big>{fundingInfo.balance.toLocaleString()}</big> satoshis</p>