feat: add wallet status, fix types

fedimint · Oct 21, 2024 · a358ac4 · a358ac4
1 parent 32edd8e
commit a358ac4
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 36 deletions.
diff --git a/packages/react/lib/hooks/useBalance.ts b/packages/react/lib/hooks/useBalance.ts
@@ -2,12 +2,12 @@ import { useEffect, useState } from 'react'
 import { useFedimintWallet, useOpenWallet } from '.'
 
 export const useBalance = () => {
-  const { wallet } = useFedimintWallet()
-  const isOpen = useOpenWallet()
-  const [balance, setBalance] = useState<number>(0)
+  const wallet = useFedimintWallet()
+  const { walletStatus } = useOpenWallet()
+  const [balance, setBalance] = useState<number>()
 
   useEffect(() => {
-    if (!isOpen) return
+    if (walletStatus !== 'open') return
 
     const unsubscribe = wallet.balance.subscribeBalance((balance) => {
       setBalance(balance)
@@ -16,7 +16,7 @@ export const useBalance = () => {
     return () => {
       unsubscribe()
     }
-  }, [isOpen])
+  }, [walletStatus])
 
   return balance
 }
diff --git a/packages/react/lib/hooks/useFedimintWallet.ts b/packages/react/lib/hooks/useFedimintWallet.ts
@@ -2,11 +2,11 @@ import { useContext } from 'react'
 import { FedimintWalletContext } from '../contexts'
 
 export const useFedimintWallet = () => {
-  const wallet = useContext(FedimintWalletContext)
-  if (!wallet) {
+  const value = useContext(FedimintWalletContext)
+  if (!value?.wallet) {
     throw new Error(
       'useFedimintWallet must be used within a FedimintWalletProvider',
     )
   }
-  return wallet
+  return value.wallet
 }
diff --git a/packages/react/lib/hooks/useLightningInvoice.ts b/packages/react/lib/hooks/useLightningInvoice.ts
@@ -3,25 +3,25 @@ import { useFedimintWallet, useOpenWallet } from '.'
 import { LnReceiveState, type CreateBolt11Response } from '@fedimint/core-web'
 
 export const useLightningInvoice = () => {
-  const { wallet } = useFedimintWallet()
-  const isOpen = useOpenWallet()
+  const wallet = useFedimintWallet()
+  const { walletStatus } = useOpenWallet()
   const [invoice, setInvoice] = useState<CreateBolt11Response>()
   const [isPaid, setIsPaid] = useState<boolean>()
   const [invoiceStatus, setInvoiceStatus] = useState<LnReceiveState>()
   const [error, setError] = useState<string>()
 
   const generateInvoice = useCallback(
     async (amount: number, description: string) => {
-      if (!isOpen) throw new Error('Wallet is not open')
+      if (walletStatus !== 'open') throw new Error('Wallet is not open')
       const response = await wallet.lightning.createInvoice(amount, description)
       setInvoice(response)
       return response.invoice
     },
-    [wallet, isOpen],
+    [wallet, walletStatus],
   )
 
   useEffect(() => {
-    if (!isOpen || !invoice) return
+    if (walletStatus !== 'open' || !invoice) return
     const unsubscribe = wallet.lightning.subscribeLnReceive(
       invoice.operation_id,
       (state) => {
@@ -35,7 +35,7 @@ export const useLightningInvoice = () => {
     return () => {
       unsubscribe()
     }
-  }, [isOpen, invoice])
+  }, [walletStatus, invoice])
 
   return {
     generateInvoice,

diff --git a/packages/react/lib/hooks/useOpenWallet.ts b/packages/react/lib/hooks/useOpenWallet.ts
@@ -1,29 +1,40 @@
 import { useCallback, useEffect, useState } from 'react'
 import { useFedimintWallet } from '.'
 
+type WalletStatus = 'open' | 'closed' | 'opening'
+
 export const useOpenWallet = () => {
-  const { wallet } = useFedimintWallet()
-  const [isOpen, setIsOpen] = useState<boolean>()
-  const [isOpening, setIsOpening] = useState<boolean>()
+  const wallet = useFedimintWallet()
+  const [walletStatus, setWalletStatus] = useState<WalletStatus>()
 
   const openWallet = useCallback(() => {
-    if (isOpen) return
-    setIsOpening(true)
+    if (walletStatus === 'open') return
+
+    setWalletStatus('opening')
     wallet.open().then((res) => {
-      setIsOpen(res)
-      setIsOpening(false)
+      setWalletStatus(res ? 'open' : 'closed')
     })
   }, [wallet])
 
+  const joinFederation = useCallback(
+    (invite: string) => {
+      if (walletStatus === 'open') return
+
+      setWalletStatus('opening')
+      wallet.joinFederation(invite)
+    },
+    [wallet],
+  )
+
   useEffect(() => {
     wallet.waitForOpen().then(() => {
-      setIsOpen(true)
+      setWalletStatus('open')
     })
 
     return () => {
-      setIsOpen(false)
+      setWalletStatus('closed')
     }
   }, [wallet])
 
-  return { isOpen, openWallet, isOpening }
+  return { walletStatus, openWallet, joinFederation }
 }
diff --git a/packages/react/src/App.css b/packages/react/src/App.css
@@ -27,6 +27,7 @@
   justify-content: center;
   width: 100%;
   border-bottom: 1px solid #ccc;
+  gap: 0.5rem;
 }
 
 .row {

diff --git a/packages/react/src/components/HooksDemo.tsx b/packages/react/src/components/HooksDemo.tsx
@@ -1,9 +1,19 @@
-import React from 'react'
-import { useBalance, useLightningInvoice, useOpenWallet } from '../../lib'
+import React, { useEffect } from 'react'
+import {
+  useBalance,
+  useLightningInvoice,
+  useOpenWallet,
+  useFedimintWallet,
+} from '../../lib'
 
 function HooksDemo() {
   const balance = useBalance()
-  const { isOpen, openWallet, isOpening } = useOpenWallet()
+  const { walletStatus, openWallet, joinFederation } = useOpenWallet()
+  const wallet = useFedimintWallet()
+  useEffect(() => {
+    wallet.setLogLevel('debug')
+  }, [])
+  const isOpen = walletStatus === 'open'
   const { generateInvoice, bolt11, invoiceStatus, isPaid, error } =
     useLightningInvoice()
 
@@ -13,34 +23,44 @@ function HooksDemo() {
         <h2>Hooks</h2>
         <div className="section">
           <b>useOpenWallet()</b>
+          <div className="row">
+            <b>walletStatus:</b>
+            <p>{walletStatus}</p>
+          </div>
           <div className="row">
             <b>openWallet()</b>
             <button disabled={isOpen} onClick={openWallet}>
               Open Wallet
             </button>
           </div>
           <div className="row">
-            <b>isOpening:</b>
-            <p>{isOpening ? 'true' : 'false'}</p>
-          </div>
-          <div className="row">
-            <b>isOpen:</b>
-            <p>{isOpen ? 'true' : 'false'}</p>
+            <b>joinFederation(invite)</b>
+            <button
+              disabled={isOpen}
+              onClick={() =>
+                joinFederation(
+                  'fed11qgqzc2nhwden5te0vejkg6tdd9h8gepwvejkg6tdd9h8garhduhx6at5d9h8jmn9wshxxmmd9uqqzgxg6s3evnr6m9zdxr6hxkdkukexpcs3mn7mj3g5pc5dfh63l4tj6g9zk4er',
+                )
+              }
+            >
+              Join Federation
+            </button>
           </div>
         </div>
         <div className="section">
           <div className="row">
             <b>useBalance:</b>
-            <p>{balance}</p>
+            <p>{balance ? `${balance / 1000} sats` : 'no balance'}</p>
           </div>
         </div>
         <div className="section">
           <b>useLightningInvoice()</b>
           <div className="row">
-            <b>generateInvoice(amount, description)</b>
+            <b>generateInvoice(1000, '1000 msats')</b>
             <button
+              disabled={!isOpen}
               onClick={() =>
-                generateInvoice(1000, 'invoice from fedimint web sdk')
+                generateInvoice(1_000, 'invoice from fedimint web sdk')
               }
             >
               Generate Invoice