1 add whatsapp floating button

2 fix copyclipboard
This commit is contained in:
john 2022-05-19 17:19:14 +07:00
parent 3b17e2df70
commit 8886e3cba7
11 changed files with 86 additions and 40 deletions

BIN
public/imgs/whatsapp.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -75,13 +75,14 @@ export const AppContextProvider = ({ children }) => {
setBannerLink(s.pic_url)
SOCIALS[0].path = b.telegram
SOCIALS[1].path = b.twitter
SOCIALS[2].path = b.facebook
SOCIALS[3].path = b.whatsapp
let socl = [...SOCIALS]
socl[0].path = b.telegram
socl[1].path = b.twitter
socl[2].path = b.facebook
socl[3].path = b.whatsapp
setSocials(SOCIALS)
setKefuUrl(s.kefu_url)
setSocials(s)
setKefuUrl('whatsapp://send?phone=' + b.whatsapp)
setRewards(s.reward)
setAppAddress(s.app_address)
setAppKey(s.app_key)

View File

@ -0,0 +1,30 @@
import { Image, Flex, IconButton } from "@chakra-ui/react"
import { Images } from "../data"
export const FloatingBtn = ({ name, pic, url, ...rest }) => {
const onClick = () => {
window.location.href = url
}
return (
<Flex
w='14'
h='14'
position='fixed'
cursor='pointer'
zIndex='3'
{...rest}
>
<IconButton
w='13'
h='13'
variant='outline'
icon={
<Image src={pic} alt={name} />
}
onClick={onClick}
/>
</Flex>
)
}

View File

@ -19,7 +19,7 @@ export const Hero = ({ bg }) => {
<Logo p="4" />
{/* </HFStack> */}
<Placeholder h='16' />
<Placeholder h='20%' />
<VStack pl="4">
<Text
fontWeight='700'

View File

@ -11,15 +11,12 @@ import '../swiper.css'
import { Pagination, Autoplay, Navigation } from "swiper"
let format = [
{ address: '', quantity: 234234.05 }
]
export const LatestScreen = ({ data, ...rest }) => {
const TAddress = ({ text }) => (<Text color='blue.500'>{text}</Text>)
const TQuantity = ({ text }) => (<Text fontWeight='500'>{text}</Text>)
export const LatestScreen = ({ data, ...rest }) => {
return (
<VPanel {...rest}>
<PanelHeader header="Mining" subHeader="Liquidity mining income" />
@ -41,7 +38,7 @@ export const LatestScreen = ({ data, ...rest }) => {
slidesPerView={6}
spaceBetween={0}
// centeredSlides={true}
speed={5000}
speed={3500}
loop={true}
autoplay={{
delay: 1,

View File

@ -1,19 +1,20 @@
import {
Box, Drawer, DrawerContent,
useColorModeValue, useDisclosure, DrawerOverlay,
Box, useColorModeValue,
} from '@chakra-ui/react'
import React from 'react'
import { SideBar } from './SideBar'
import { AppBar } from './AppBar'
import { BottomNav } from './BottomNav'
import { Hero } from './Hero'
import { HFStack } from './base'
import { FloatingBtn } from './FloatingBtn'
import { Images } from '../data'
import { useApp } from '../AppContext'
/**
* This component was not composed for more widely using but just for this project.
*/
export const Layout = ({ children }) => {
const { isOpen: isOpenDrawer, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure()
const app = useApp()
const bg = useColorModeValue('gray.100', 'gray.900')
@ -36,6 +37,14 @@ export const Layout = ({ children }) => {
{children}
</Box>
<FloatingBtn
right='2'
bottom='40'
name='whatsapp'
pic={Images.whatsapp}
url={app.kefuUrl}
/>
<BottomNav zIndex="1" display={{ base: 'flex', md: 'none' }} />
</Box>

View File

@ -83,12 +83,12 @@ export const WalletButton = ({ ...rest }) => {
})
}
}).catch(err => {
console.error('get_ether() error:', err.message)
})
}
const onBtnThis = async () => {
if (!app.address) {
if (!authorized) {
await connect()
// checkAuth()
} else {

View File

@ -0,0 +1,5 @@
import React from "react"
export const FloatingButton = ({img}) => {
}

View File

@ -14,5 +14,6 @@ export * from './Hero'
export * from './LatestScreen'
export * from './PoolData'
export * from './WalletButton'
export * from './FloatingBtn'
export * from './alert'
export * from './base'

View File

@ -25,6 +25,7 @@ export const Images = {
config.ENDPOINT + 'static/media/codebank.db7917c8.svg',
],
whatsapp: process.env.PUBLIC_URL + '/imgs/whatsapp.png',
more: config.ENDPOINT + 'static/media/icon-more.c502d302.svg',
new: config.ENDPOINT + 'static/media/jiaobiao-eth.4b55fb16.svg',
stakingBanner: config.ENDPOINT + 'static/media/eth_mining.jpg',

View File

@ -9,18 +9,22 @@ import { FiCopy, FiCheck } from 'react-icons/fi'
import { get_page_team } from '../api'
let teamData = [
{ name: 'Level 1 Total Output', value: 234, emp: true, unit: 'USDT' },
{ name: 'Level 2 Total Output', value: 2344.34, emp: true, unit: 'USDT' },
{ name: 'Level 3 Total Output', value: 2342342.32, emp: true, unit: 'USDT' },
{ name: 'Participant', value: 234234.04, emp: true, unit: 'USDT' },
{ name: 'Team revenue', value: 234234.04, emp: false, unit: 'USDT' },
{ name: 'Level 1 Total Output', value: 0, emp: true, unit: 'USDT' },
{ name: 'Level 2 Total Output', value: 0, emp: true, unit: 'USDT' },
{ name: 'Level 3 Total Output', value: 0, emp: true, unit: 'USDT' },
{ name: 'Participant', value: 0, emp: true, unit: 'USDT' },
{ name: 'Team revenue', value: 0, emp: false, unit: 'USDT' },
]
export const Team = () => {
const app = useApp()
const [va, setVa] = React.useState(app.address)
const [vs, setVs] = React.useState(app.shareLink)
const [teamInfo, setTeamInfo] = React.useState(teamData)
const { hasCopiedAddress, doCopyAddress } = useClipboard('12345')
const { hasCopiedShareLink, doCopyShareLink } = useClipboard(app.shareLink)
const { hasCopied: hasCopiedAddress, onCopy: doCopyAddress } = useClipboard(va)
const { hasCopied: hasCopiedShareLink, onCopy: doCopyShareLink } = useClipboard(vs)
React.useEffect(() => {
get_page_team().then(res => {
@ -39,13 +43,10 @@ export const Team = () => {
})
}, [])
const onBtnCopyAddress = () => {
}
const onBtnCopyLink = () => {
}
React.useEffect(() => {
setVa(app.address)
setVs(app.shareLink)
}, [app.address, app.shareLink])
return (
@ -60,14 +61,15 @@ export const Team = () => {
</FormLabel>
<InputGroup>
<Input id='address' type='text'
value={app.address}
value={va}
disabled
// onChange={}
/>
<InputRightElement children={
<IconButton
variant='solid'
colorScheme='gray'
colorScheme={hasCopiedAddress ? 'green' : 'gray'}
icon={<Icon as={hasCopiedAddress ? FiCheck : FiCopy} />}
onClick={doCopyAddress}
/>
@ -81,12 +83,12 @@ export const Team = () => {
<FormControl>
<FormLabel>My share link</FormLabel>
<InputGroup>
<Input id='link' type='text' value={app.shareLink} disabled />
<Input id='link' type='text' value={vs} disabled />
<InputRightElement children={
<IconButton
zIndex='100'
variant='solid'
colorScheme='gray'
colorScheme={hasCopiedShareLink ? 'green' : 'gray'}
icon={<Icon as={hasCopiedShareLink ? FiCheck : FiCopy} />}
onClick={doCopyShareLink}
/>