c4f8f4eab0
* MP-1757: implemented the WalletProvider and connect buttons * tidy: tidy up the search * MP-1691: moved modals outside of the DOM * MP-1691: changed CreditManager into AccountDetails * fix: fixed the naming * MP-1691: UX approvements * MP-1691: global confirm and delete modal added * fix: merged the credit-account and wallet branch * MP-1757: added the status store * fix: updated the store interaction * MP-1757: major cleanup of stores * tidy: format
46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import classNames from 'classnames'
|
|
import React, { useEffect } from 'react'
|
|
import { useWallet, WalletConnectionStatus } from '@marsprotocol/wallet-connector'
|
|
|
|
import AccountManager from 'components/Account/AccountDetails'
|
|
import DesktopNavigation from 'components/Navigation/DesktopNavigation'
|
|
import useCreditAccounts from 'hooks/useCreditAccounts'
|
|
import { useWalletStore } from 'stores'
|
|
|
|
const filter = {
|
|
day: 'brightness-100 hue-rotate-0',
|
|
night: '-hue-rotate-82 brightness-30',
|
|
}
|
|
|
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
|
const { data: creditAccountsList, isLoading: isLoadingCreditAccounts } = useCreditAccounts()
|
|
const hasCreditAccounts = creditAccountsList && creditAccountsList.length > 0
|
|
|
|
const { status, signingCosmWasmClient, chainInfo, address, name } = useWallet()
|
|
const initialize = useWalletStore((s) => s.actions.initialize)
|
|
|
|
useEffect(() => {
|
|
initialize(status, signingCosmWasmClient, address, name, chainInfo)
|
|
}, [status, signingCosmWasmClient, chainInfo, address, name, initialize])
|
|
|
|
const isConnected = status === WalletConnectionStatus.Connected
|
|
|
|
const backgroundClasses = classNames(
|
|
isConnected ? filter.day : filter.night,
|
|
'top-0 left-0 absolute block h-full w-full flex-col bg-body bg-mars bg-desktop bg-top bg-no-repeat filter transition-background duration-3000 ease-linear',
|
|
)
|
|
|
|
return (
|
|
<div className='relative min-h-screen w-full'>
|
|
<div className={backgroundClasses} />
|
|
<DesktopNavigation />
|
|
<main className='relative flex lg:h-[calc(100vh-120px)]'>
|
|
<div className='flex flex-grow flex-wrap p-6'>{children}</div>
|
|
{hasCreditAccounts && <AccountManager />}
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Layout
|