148 lines
4.5 KiB
JavaScript
148 lines
4.5 KiB
JavaScript
import React from 'react'
|
|
import {
|
|
Button, Flex, VStack, HStack, IconButton,
|
|
useColorModeValue, useDisclosure, Icon, Text,
|
|
useToast, Stack,
|
|
} from '@chakra-ui/react'
|
|
import { FiMenu, FiCircle } from 'react-icons/fi'
|
|
import { Logo } from './Logo'
|
|
import { ColorModeSwitcher } from './ColorModeSwitcher'
|
|
import { config } from '../config'
|
|
import { useApp } from '../AppContext'
|
|
import { AlertBox } from './alert'
|
|
import { Lang } from './Lang'
|
|
import { connectWallet, addEventListeners, fetchAccount } from '../lib'
|
|
import { get_register } from '../api'
|
|
import { useSearchParams } from 'react-router-dom'
|
|
import { supportedLangs } from '../i18'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
|
|
export const AppBar = ({ onOpenDrawer, ...rest }) => {
|
|
const app = useApp()
|
|
const toast = useToast()
|
|
const [searchParams, setSearchParams] = useSearchParams()
|
|
const { isOpen: isOpenConnectedWallet, onOpen: onOpenConnectedWallet, onClose: onCloseConnectedWallet } = useDisclosure()
|
|
const { t } = useTranslation()
|
|
|
|
const bg = useColorModeValue('white', 'gray.900')
|
|
const borderBottomColor = useColorModeValue('gray.200', 'gray.700')
|
|
// const bgMenu = useColorModeValue('white', 'gray.900')
|
|
// const colorMenuBorder = useColorModeValue('gray.200', 'gray.700')
|
|
|
|
const getUserWalletAddress = async () => {
|
|
const address = await fetchAccount()
|
|
if (address) {
|
|
app.setAddress(address)
|
|
toast({
|
|
title: 'Connected',
|
|
description: address,
|
|
status: 'info',
|
|
duration: 3000,
|
|
isClosable: false,
|
|
})
|
|
}
|
|
const referral = searchParams.get('referral') || ''
|
|
get_register(address, referral).then(res => {
|
|
// console.log(res.data)
|
|
}).catch(err => {
|
|
console.error('get_register() error:' + err.message)
|
|
})
|
|
}
|
|
|
|
const connect = async () => {
|
|
if (await connectWallet()) {
|
|
await addEventListeners(getUserWalletAddress)
|
|
await getUserWalletAddress()
|
|
}
|
|
}
|
|
|
|
const onBtnConnect = async () => {
|
|
if (!app.address) {
|
|
await connect()
|
|
} else {
|
|
onOpenConnectedWallet()
|
|
}
|
|
}
|
|
|
|
const onSelectedLang = (ev) => {
|
|
console.log(ev.target.value)
|
|
}
|
|
|
|
// auto connect
|
|
React.useEffect(() => {
|
|
if (config.AUTO_CONN_WALLET) {
|
|
setTimeout(async () => {
|
|
await connect()
|
|
}, 2000)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<Flex
|
|
ml={{ base: 0, md: 60 }}
|
|
px={{ base: 4, md: 4 }}
|
|
height="20"
|
|
alignItems="center"
|
|
bg={bg}
|
|
borderBottomWidth="1px"
|
|
borderBottomColor={borderBottomColor}
|
|
justifyContent={{ base: 'space-between', md: 'flex-end' }}
|
|
{...rest}>
|
|
|
|
<Logo display={{ base: 'flex', md: 'none' }} />
|
|
|
|
<HStack
|
|
spacing="4"
|
|
>
|
|
<Button
|
|
size="md"
|
|
border="2px"
|
|
borderColor='green.500'
|
|
onClick={onBtnConnect}
|
|
>
|
|
{
|
|
app.address ? t('connected') : t('connectWallet')
|
|
}
|
|
</Button>
|
|
|
|
<IconButton
|
|
display={{ base: 'flex', md: 'none' }}
|
|
onClick={onOpenDrawer}
|
|
variant="outline"
|
|
aria-label="open menu"
|
|
icon={<FiMenu />}
|
|
/>
|
|
|
|
<ColorModeSwitcher
|
|
display={{ base: 'none', md: 'flex' }}
|
|
/>
|
|
|
|
<Stack
|
|
display={{ base: 'none', md: 'flex' }}
|
|
>
|
|
<Lang config={supportedLangs} />
|
|
</Stack>
|
|
</HStack>
|
|
|
|
<AlertBox
|
|
isOpen={isOpenConnectedWallet}
|
|
onClose={onCloseConnectedWallet}
|
|
title="Wallet Address"
|
|
>
|
|
<VStack
|
|
w="full"
|
|
>
|
|
<HStack>
|
|
<Icon bg="green.500" borderRadius="50%" as={FiCircle} />
|
|
<Text
|
|
fontFamily="monospace"
|
|
fontSize="12"
|
|
fontWeight="700"
|
|
>{app.address}</Text>
|
|
</HStack>
|
|
</VStack>
|
|
</AlertBox>
|
|
</Flex>
|
|
)
|
|
} |