62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import WalletConnectStore from '@/store/WalletConnectStore'
|
|
import WalletStore from '@/store/WalletStore'
|
|
import { Card, Container, Divider, Loading } from '@nextui-org/react'
|
|
import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react'
|
|
|
|
/**
|
|
* Types
|
|
*/
|
|
interface Props {
|
|
children: ReactNode | ReactNode[]
|
|
}
|
|
|
|
/**
|
|
* Container
|
|
*/
|
|
export default function GlobalLayout({ children }: Props) {
|
|
const [initialized, setInitialized] = useState(false)
|
|
|
|
const onInitialize = useCallback(async () => {
|
|
WalletStore.createWallet()
|
|
await WalletConnectStore.createWalletConnectClient()
|
|
setInitialized(true)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!initialized) {
|
|
onInitialize()
|
|
}
|
|
}, [initialized, onInitialize])
|
|
|
|
return (
|
|
<Container
|
|
display="flex"
|
|
justify="center"
|
|
alignItems="center"
|
|
css={{ width: '100vw', height: '100vh' }}
|
|
>
|
|
<Card
|
|
bordered
|
|
borderWeight="light"
|
|
css={{
|
|
height: '92vh',
|
|
maxWidth: '500px',
|
|
width: '100%',
|
|
justifyContent: initialized ? 'normal' : 'center',
|
|
alignItems: initialized ? 'normal' : 'center'
|
|
}}
|
|
>
|
|
{initialized ? (
|
|
<Fragment>
|
|
<Card.Body css={{ overflow: 'scroll' }}>{children}</Card.Body>
|
|
<Divider />
|
|
<Card.Footer>Footer</Card.Footer>
|
|
</Fragment>
|
|
) : (
|
|
<Loading />
|
|
)}
|
|
</Card>
|
|
</Container>
|
|
)
|
|
}
|