hiCity-nft/src/components/Menu/index.tsx

93 lines
3.1 KiB
TypeScript

import React, { useEffect, useState, useMemo } from 'react'
import { Menu as UikitMenu, ConnectorNames } from '@pancakeswap/uikit'
import { useDispatch } from 'react-redux'
import { uccnDetail, indexInfo, getProjectDoc } from 'services/user'
import { useWeb3React } from '@web3-react/core'
import { languageList } from 'config/localization/languages'
import { useTranslation } from 'contexts/Localization'
import useTheme from 'hooks/useTheme'
import useAuth from 'hooks/useAuth'
import { usePriceHccUsdt, useProfile } from 'state/hooks'
import { useUnactiveAccount, useSignLogin, useAccount, useUserInfo } from 'state/userInfo/hooks'
import useWeb3Provider from 'hooks/useActiveWeb3React'
import { clearUserInfo } from 'state/actions'
import config from './config'
const Menu = (props) => {
const account = useAccount()
const { login, logout } = useAuth()
const [hasWalletLogin, setHasWalletLogin] = useState(false)
const [documentAddress, setDocumentAddress] = useState('')
const { isDark, toggleTheme } = useTheme()
const hccPriceUsdt = usePriceHccUsdt()
const { library } = useWeb3Provider()
const unActiveAccount = useUnactiveAccount()
const dispatch = useDispatch()
const { profile } = useProfile()
const userInfo = useUserInfo()
const { currentLanguage, setLanguage, t } = useTranslation()
const inviteUrl = useMemo(() => {
return userInfo?.inviteCode ? `${window.location.origin}?inviteCode=${userInfo.inviteCode}` : window.location.origin
}, [userInfo])
const sign = useSignLogin()
const handleLogin = async (connectorID: ConnectorNames) => {
await login(connectorID)
setHasWalletLogin(true)
}
const handleLogout = () => {
dispatch(clearUserInfo())
logout()
}
const [socialLink, setSocialLink] = useState([])
const getDetails = async () => {
const result = await indexInfo()
const { data } = result.data
const list = data.externalLinkList.map((item, index) => {
const links = Object.keys(item.linkMap).map((key) => {
return { name: key, link: item.linkMap[key], icon: item.iconResource.url }
})
return { icon: item.iconResource.url, list: links, key: index + item.name, name: item.name }
})
setSocialLink(list)
}
const getDoc = async () => {
const result = await getProjectDoc()
console.log(result)
const { data } = result.data
setDocumentAddress(data)
console.log(data)
}
// 钱包登录后
useEffect(() => {
if (unActiveAccount && library.provider && hasWalletLogin) {
setHasWalletLogin(false)
sign()
}
}, [unActiveAccount, hasWalletLogin, library])
useEffect(() => {
getDetails()
getDoc()
}, [])
return (
<UikitMenu
account={account}
login={handleLogin}
inviteUrl={inviteUrl}
logout={handleLogout}
isDark={isDark}
toggleTheme={toggleTheme}
currentLang={currentLanguage.code}
langs={languageList}
setLang={setLanguage}
cakePriceUsd={hccPriceUsdt}
links={config(t)}
socialLink={socialLink}
documentAddress={documentAddress}
{...props}
/>
)
}
export default Menu