Cleanup context

This commit is contained in:
Ilja 2022-02-04 12:01:08 +02:00
parent 1f71001175
commit 81bddf0c5d
4 changed files with 34 additions and 20 deletions

View File

@ -1,9 +1,15 @@
import { Text } from '@nextui-org/react'
/**
* Types
*/
interface Props {
children: string
}
/**
* Component
*/
export default function PageHeader({ children }: Props) {
return (
<Text

View File

@ -2,27 +2,31 @@ import { WalletContext } from '@/contexts/WalletContext'
import { Card, Container, Divider, Loading } from '@nextui-org/react'
import { Fragment, ReactNode, useCallback, useContext, useEffect } from 'react'
/**
* Types
*/
interface Props {
children: ReactNode | ReactNode[]
}
/**
* Container
*/
export default function GlobalLayout({ children }: Props) {
const {
state: { initialized },
actions
} = useContext(WalletContext)
const { walletState, walletActions } = useContext(WalletContext)
const waletReady = walletState.ready
const onInitialize = useCallback(async () => {
actions.createWallet()
await actions.createWalletConnectClient()
actions.setInitialized()
}, [actions])
walletActions.createWallet()
await walletActions.createWalletConnectClient()
walletActions.setInitialized()
}, [walletActions])
useEffect(() => {
if (!initialized) {
if (!waletReady) {
onInitialize()
}
}, [initialized, onInitialize])
}, [waletReady, onInitialize])
return (
<Container
@ -38,11 +42,11 @@ export default function GlobalLayout({ children }: Props) {
height: '92vh',
maxWidth: '600px',
width: '100%',
justifyContent: initialized ? 'normal' : 'center',
alignItems: initialized ? 'normal' : 'center'
justifyContent: waletReady ? 'normal' : 'center',
alignItems: waletReady ? 'normal' : 'center'
}}
>
{initialized ? (
{waletReady ? (
<Fragment>
<Card.Header>Header</Card.Header>
<Divider />

View File

@ -7,7 +7,7 @@ import { createContext, ReactNode, useMemo, useState } from 'react'
* Types
*/
interface State {
initialized: boolean
ready: boolean
wallet: Wallet
walletConnectClient: WalletConnectClient
}
@ -19,8 +19,8 @@ interface Actions {
}
interface Context {
state: State
actions: Actions
walletState: State
walletActions: Actions
}
interface Props {
@ -33,13 +33,13 @@ interface Props {
export const WalletContext = createContext<Context>({} as Context)
export function WalletContextProvider({ children }: Props) {
const [state, setState] = useState<State>({
initialized: false,
const [walletState, setState] = useState<State>({
ready: false,
wallet: undefined,
walletConnectClient: undefined
})
const actions = useMemo(
const walletActions = useMemo(
() => ({
setInitialized() {
setState(s => ({ ...s, initialized: true }))
@ -70,5 +70,9 @@ export function WalletContextProvider({ children }: Props) {
[]
)
return <WalletContext.Provider value={{ state, actions }}>{children}</WalletContext.Provider>
return (
<WalletContext.Provider value={{ walletState, walletActions }}>
{children}
</WalletContext.Provider>
)
}