1 add whatsapp floating button

2 fix copyclipboard

src/AppContext.js

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

src/components/FloatingBtn.js

@@ -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>
+    )
+}

src/components/Hero.js

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

src/components/LatestScreen.js

@@ -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,

src/components/Layout.js

@@ -1,19 +1,20 @@
 import {
-    Box, Drawer, DrawerContent,
+    Box, useColorModeValue,
-    useColorModeValue, useDisclosure, DrawerOverlay,
 } 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>

src/components/WalletButton.js

@@ -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 {

src/components/base/FloatingButton.js

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

src/components/index.js

@@ -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'

src/data.js

@@ -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',

src/pages/Team.js

@@ -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 1 Total Output', value: 0, emp: true, unit: 'USDT' },
-    { name: 'Level 2 Total Output', value: 2344.34, emp: true, unit: 'USDT' },
+    { name: 'Level 2 Total Output', value: 0, emp: true, unit: 'USDT' },
-    { name: 'Level 3 Total Output', value: 2342342.32, emp: true, unit: 'USDT' },
+    { name: 'Level 3 Total Output', value: 0, emp: true, unit: 'USDT' },
-    { name: 'Participant', value: 234234.04, emp: true, unit: 'USDT' },
+    { name: 'Participant', value: 0, emp: true, unit: 'USDT' },
-    { name: 'Team revenue', value: 234234.04, emp: false, 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 { hasCopied: hasCopiedAddress, onCopy: doCopyAddress } = useClipboard(va)
-    const { hasCopiedShareLink, doCopyShareLink } = useClipboard(app.shareLink)
+    const { hasCopied: hasCopiedShareLink, onCopy: doCopyShareLink } = useClipboard(vs)
 
     React.useEffect(() => {
         get_page_team().then(res => {
@@ -39,13 +43,10 @@ export const Team = () => {
         })
     }, [])
 
-    const onBtnCopyAddress = () => {
+    React.useEffect(() => {
-
+        setVa(app.address)
-    }
+        setVs(app.shareLink)
-
+    }, [app.address, app.shareLink])
-    const onBtnCopyLink = () => {
-
-    }
 
     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}
                             />