import { PostageBatch } from '@ethersphere/bee-js' ; import { createContext , ReactChild , ReactElement , useContext , useEffect , useState } from 'react' ; import { Context as SettingsContext } from './Settings' ; export interface EnrichedPostageBatch extends PostageBatch { usage : number ; usageText : string ; } interface ContextInterface { stamps : EnrichedPostageBatch [ ] | null ; error : Error | null ; isLoading : boolean ; lastUpdate : number | null ; start : ( frequency ? : number ) => void ; stop : ( ) => void ; refresh : ( ) => Promise < void > ; } const initialValues = { stamps : null , error : null , isLoading : false , lastUpdate : null , start : ( ) => { } , stop : ( ) => { } , refresh : ( ) => Promise . reject ( ) , } ; export const Context = createContext < ContextInterface > ( initialValues ) ; export const Consumer = Context . Consumer ; interface Props { children : ReactChild ; } function enrichStamp ( postageBatch ) { const { depth , bucketDepth , utilization } = postageBatch ; const usage = utilization / Math . pow ( 2 , depth - bucketDepth ) ; const usageText = `${ Math . ceil ( usage * 100 ) }%` ; return { ... postageBatch , usage , usageText , } ; } export function Provider ( { children } ) { const { beeDebugApi } = useContext ( SettingsContext ) ; const [ stamps , setStamps ] = useState < EnrichedPostageBatch [ ] | null > ( initialValues . stamps ) ; const [ error , setError ] = useState < Error | null > ( initialValues . error ) ; const [ isLoading , setIsLoading ] = useState < boolean > ( initialValues . isLoading ) ; const [ lastUpdate , setLastUpdate ] = useState < number | null > ( initialValues . lastUpdate ) ; const [ frequency , setFrequency ] = useState < number | null > ( null ) ; const refresh = async ( ) => { if ( isLoading ) return ; if ( ! beeDebugApi ) return ; try { setIsLoading ( true ) ; const stamps = await beeDebugApi . getAllPostageBatch ( ) ; setStamps ( stamps . map ( enrichStamp ) ) ; setLastUpdate ( Date . now ( ) ) ; } catch ( e ) { setError ( e as Error ) ; } finally { setIsLoading ( false ) ; } } ; const start = ( freq = 30000 ) => setFrequency ( freq ) ; const stop = ( ) => setFrequency ( null ) ; useEffect ( ( ) => { refresh ( ) ; if ( frequency ) { const interval = setInterval ( refresh , frequency ) ; return ( ) => clearInterval ( interval ) ; } } , [ frequency ] ) ; return ( < Context . Provider value = { { stamps , error , isLoading , lastUpdate , start , stop , refresh } } > { children } < /Context.Provider>); }