make getBalance global

tauri-wallet/src/components/NavigationCards.tsx

@@ -13,14 +13,12 @@ import { NymCard } from './NymCard'
 import { Alert } from '@material-ui/lab'
 import { handleCopy } from './CopyToClipboard'
 import { truncate } from '../utils'
-import { useGetBalance } from '../hooks/useGetBalance'
 
 export const BalanceCard = () => {
+  const { getBalance } = useContext(ClientContext)
   const theme = useTheme()
 
-  const { balance, isLoading, error, getBalance } = useGetBalance()
-
-  useEffect(getBalance, [])
+  useEffect(getBalance.fetchBalance, [])
 
   return (
     <div style={{ margin: theme.spacing(3) }}>
@@ -30,7 +28,7 @@ export const BalanceCard = () => {
         noPadding
         Action={
           <Tooltip title="Refresh balance">
-            <IconButton onClick={getBalance}>
+            <IconButton onClick={getBalance.fetchBalance}>
               <Refresh />
             </IconButton>
           </Tooltip>
@@ -38,14 +36,16 @@ export const BalanceCard = () => {
       >
         <CardContent>
           <div style={{ display: 'flex', justifyContent: 'center' }}>
-            {isLoading ? (
+            {getBalance.isLoading ? (
               <CircularProgress size={24} />
-            ) : error ? (
+            ) : getBalance.error ? (
               <Alert severity="error" style={{ width: '100%' }}>
-                {error}
+                {getBalance.error}
               </Alert>
             ) : (
-              <Typography variant="h6">{balance?.printable_balance}</Typography>
+              <Typography variant="h6">
+                {getBalance.balance?.printable_balance}
+              </Typography>
             )}
           </div>
         </CardContent>

tauri-wallet/src/context/main.tsx

@@ -2,10 +2,12 @@ import React, { createContext, useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { invoke } from '@tauri-apps/api'
 import { Coin, TClientDetails } from '../types'
+import { TUseGetBalance, useGetBalance } from '../hooks/useGetBalance'
 
 type TClientContext = {
   clientDetails?: TClientDetails
   gasPrice?: Coin
+  getBalance: TUseGetBalance
   logIn: (clientDetails: TClientDetails) => void
   logOut: () => void
 }
@@ -22,6 +24,8 @@ export const ClientContextProvider = ({
 
   const history = useHistory()
 
+  const getBalance = useGetBalance()
+
   useEffect(() => {
     !clientDetails ? history.push('/signin') : history.push('/balance')
   }, [clientDetails])
@@ -40,6 +44,7 @@ export const ClientContextProvider = ({
       value={{
         clientDetails,
         gasPrice,
+        getBalance,
         logIn,
         logOut,
       }}

tauri-wallet/src/hooks/useGetBalance.tsx

@@ -2,12 +2,19 @@ import { useState } from 'react'
 import { invoke } from '@tauri-apps/api'
 import { Balance } from '../types'
 
-export const useGetBalance = () => {
+export type TUseGetBalance = {
+  error?: string
+  balance?: Balance
+  isLoading: boolean
+  fetchBalance: () => void
+}
+
+export const useGetBalance = (): TUseGetBalance => {
   const [balance, setBalance] = useState<Balance>()
   const [error, setEror] = useState<string>()
   const [isLoading, setIsLoading] = useState(false)
 
-  const getBalance = () => {
+  const fetchBalance = () => {
     setIsLoading(true)
     setEror(undefined)
     invoke('get_balance')
@@ -24,6 +31,6 @@ export const useGetBalance = () => {
     error,
     isLoading,
     balance,
-    getBalance,
+    fetchBalance,
   }
 }

tauri-wallet/src/routes/balance.tsx

@@ -8,9 +8,9 @@ import { theme } from '../theme'
 import { useGetBalance } from '../hooks/useGetBalance'
 
 export const Balance = () => {
-  const { balance, isLoading, error, getBalance } = useGetBalance()
+  const { balance, isLoading, error, fetchBalance } = useGetBalance()
 
-  useEffect(getBalance, [])
+  useEffect(fetchBalance, [])
 
   const RefreshAction = () => (
     <Button
@@ -18,7 +18,7 @@ export const Balance = () => {
       size="small"
       color="primary"
       type="submit"
-      onClick={getBalance}
+      onClick={fetchBalance}
       disabled={isLoading}
       disableElevation
       startIcon={<Refresh />}

tauri-wallet/src/routes/send/SendWizard.tsx

@@ -30,6 +30,8 @@ export const SendWizard = () => {
   const [requestError, setRequestError] = useState<string>()
   const [confirmedData, setConfirmedData] = useState<TauriTxResult['details']>()
 
+  const { getBalance } = useContext(ClientContext)
+
   const steps = ['Enter address', 'Review and send', 'Await confirmation']
 
   const { clientDetails } = useContext(ClientContext)
@@ -68,8 +70,8 @@ export const SendWizard = () => {
         const { details } = res as TauriTxResult
         setActiveStep((s) => s + 1)
         setConfirmedData(details)
-
         setIsLoading(false)
+        getBalance.fetchBalance()
       })
       .catch((e) => {
         setRequestError(e)