mango-ui-v3/components/AccountIntro.tsx

53 lines
1.7 KiB
TypeScript

import React, { useCallback, useEffect, useState } from 'react'
import IntroTips, { SHOW_TOUR_KEY } from '../components/IntroTips'
import { useViewport } from '../hooks/useViewport'
import { breakpoints } from '../components/TradePageGrid'
import { mangoAccountSelector } from '../stores/selectors'
import { useWallet } from '@solana/wallet-adapter-react'
import AccountsModal from 'components/AccountsModal'
import useMangoStore from 'stores/useMangoStore'
import useLocalStorageState from '../hooks/useLocalStorageState'
const DISMISS_CREATE_ACCOUNT_KEY = 'show-create-account'
const AccountIntro = () => {
const mangoAccount = useMangoStore(mangoAccountSelector)
const [showTour] = useLocalStorageState(SHOW_TOUR_KEY, false)
const [showCreateAccount, setShowCreateAccount] = useState(false)
const { width } = useViewport()
const [dismissCreateAccount, setDismissCreateAccount] = useLocalStorageState(
DISMISS_CREATE_ACCOUNT_KEY,
false
)
const { connected } = useWallet()
const hideTips = width ? width < breakpoints.md : false
useEffect(() => {
if (connected && !mangoAccount && !dismissCreateAccount) {
setShowCreateAccount(true)
}
}, [connected, mangoAccount])
const handleCloseCreateAccount = useCallback(() => {
setShowCreateAccount(false)
setDismissCreateAccount(true)
}, [])
return (
<>
{showTour && !hideTips ? (
<IntroTips connected={connected} mangoAccount={mangoAccount} />
) : null}
{showCreateAccount ? (
<AccountsModal
isOpen={showCreateAccount}
onClose={() => handleCloseCreateAccount()}
/>
) : null}
</>
)
}
export default AccountIntro