yll
/
cwfront
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

- fix `target='_blank'` rel=noreferral warning 

- support dark mode
- auto seperate DEV and PROD mode (server ENDPOINT is different)
This commit is contained in:
john 2022-05-10 17:24:44 +07:00
parent 7e85124c45
commit 0603bbb064
15 changed files with 103 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
package-lock.json generated
View File

@ -8726,6 +8726,14 @@
}
}
},
"html-parse-stringify": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
"integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
"requires": {
"void-elements": "3.1.0"
}
},
"html-webpack-plugin": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@ -8870,6 +8878,14 @@
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
"integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
},
"i18next": {
"version": "21.8.0",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-21.8.0.tgz",
"integrity": "sha512-opNd7cQj0PDlUX15hPjtzReRxy5/Rn405YvHTBEm1nf1YJhsqYFFFhHMwuU4NEHZNlrepHk5uK+CJbFtB+KO3w==",
"requires": {
"@babel/runtime": "^7.17.2"
}
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -13520,6 +13536,16 @@
"use-sidecar": "^1.0.5"
}
},
"react-i18next": {
"version": "11.16.9",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.16.9.tgz",
"integrity": "sha512-euXxWvcEAvsY7ZVkwx9ztCq4butqtsGHEkpkuo0RMj8Ru09IF9o2KxCyN+zyv51Nr0aBh/elaTIiR6fMb8YfVg==",
"requires": {
"@babel/runtime": "^7.14.5",
"html-escaper": "^2.0.2",
"html-parse-stringify": "^3.0.1"
}
},
"react-icons": {
"version": "3.11.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.11.0.tgz",
@ -15585,6 +15611,11 @@
}
}
},
"void-elements": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
"integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
},
"w3c-hr-time": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

2
package.json
View File

@ -14,8 +14,10 @@
"@walletconnect/web3-provider": "^1.7.8",
"axios": "^0.27.2",
"framer-motion": "^4.1.17",
"i18next": "^21.8.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-i18next": "^11.16.9",
"react-icons": "^3.11.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",

8
src/App.js
View File

@ -10,13 +10,13 @@ import { AppContextProvider } from './AppContext';
function App() {
return (
<AppContextProvider>
<ChakraProvider theme={theme}>
<ChakraProvider theme={theme}>
<AppContextProvider>
<Layout>
<Outlet />
</Layout>
</ChakraProvider>
</AppContextProvider>
</AppContextProvider>
</ChakraProvider >
);
}

11
src/components/AppBar.js
View File

@ -6,6 +6,7 @@ import {
} from '@chakra-ui/react'
import { FiMenu, FiCircle } from 'react-icons/fi'
import { Logo } from './Logo'
import { ColorModeSwitcher } from './ColorModeSwitcher'
import { config } from '../config'
import { useApp } from '../AppContext'
import { AlertBox } from './alert'
@ -17,7 +18,7 @@ import { useSearchParams } from 'react-router-dom'
export const AppBar = ({ onOpenDrawer, ...rest }) => {
const app = useApp()
const toast = useToast()
const [searchParams, _] = useSearchParams()
const [searchParams, setSearchParams] = useSearchParams()
const { isOpen: isOpenConnectedWallet, onOpen: onOpenConnectedWallet, onClose: onCloseConnectedWallet } = useDisclosure()
const bg = useColorModeValue('white', 'gray.900')
@ -83,7 +84,9 @@ export const AppBar = ({ onOpenDrawer, ...rest }) => {
<Logo display={{ base: 'flex', md: 'none' }} />
<HStack>
<HStack
spacing="4"
>
<Button
size="md"
border="2px"
@ -102,6 +105,10 @@ export const AppBar = ({ onOpenDrawer, ...rest }) => {
aria-label="open menu"
icon={<FiMenu />}
/>
<ColorModeSwitcher
display={{ base: 'none', md: 'flex' }}
/>
</HStack>
<AlertBox

6
src/components/Auditors.js
View File

@ -1,4 +1,4 @@
import { Box, Center, HStack, VStack, Text, Image } from "@chakra-ui/react"
import { Box, Center, HStack, VStack, Text, Image, useColorModeValue } from "@chakra-ui/react"
import { Images } from '../data'
import React from "react"
@ -9,12 +9,14 @@ import React from "react"
*/
export const Auditors = ({ ...rest }) => {
const bg = useColorModeValue('white', 'gray.900')
return (
<VStack
borderWidth="1px"
borderRadius="lg"
w="full"
bg="white"
bg={bg}
boxShadow="lg"
p="2"
{...rest}

14
src/components/Carousel.js
View File

@ -1,10 +1,8 @@
import {
Box,
IconButton,
useBreakpointValue,
useColorModeValue,
Stack,
Heading,
Text,
Container,
AspectRatio,
} from '@chakra-ui/react';
@ -36,14 +34,16 @@ const settings = {
export const Carousel = ({ url, cards, ...rest }) => {
const [slider, setSlider] = React.useState(null)
const top = useBreakpointValue({ base: '90%', md: '50%' })
const side = useBreakpointValue({ base: '30%', md: '40px' })
const bg = useColorModeValue('white', 'gray.900')
// const top = useBreakpointValue({ base: '90%', md: '50%' })
// const side = useBreakpointValue({ base: '30%', md: '40px' })
return (
<Box
borderWidth="1px"
borderRadius="lg"
bg="white"
bg={bg}
boxShadow="lg"
p="0"
position="relative"
@ -55,7 +55,7 @@ export const Carousel = ({ url, cards, ...rest }) => {
<Slider {...settings} ref={(slider) => setSlider(slider)}>
{
cards.length > 0 && cards.map((card, index) => (
<a key={index} href={url} target="_blank" >
<a key={index} href={url} target="_blank" rel="noreferrer">
<AspectRatio maxW='full' ratio={4/1} >
<Box
w="full"

0
src/ColorModeSwitcher.js → src/components/ColorModeSwitcher.js
View File

8
src/components/FarmCoinCard.js
View File

@ -2,7 +2,8 @@ import React from 'react'
import {
VStack, Image, Text, HStack,
Button, Flex, Slider,
SliderTrack, SliderFilledTrack
SliderTrack, SliderFilledTrack,
useColorModeValue,
} from "@chakra-ui/react"
import { Images } from '../data'
@ -48,6 +49,9 @@ const CardRow = ({ title, value, compond = false }) => {
export const FarmCoinCard = ({ index, icon, symbol, apy, deposited, vl,
remaining, loading = false, isNew = false, authorized = false, onWithdrawal = null, onMining = null }) => {
const bg = useColorModeValue('white', 'gray.900')
return (
<VStack
position="relative"
@ -55,7 +59,7 @@ export const FarmCoinCard = ({ index, icon, symbol, apy, deposited, vl,
py="4"
px="8"
my="4"
bg="white"
bg={bg}
borderWidth="1px"
borderRadius="16"
align="center"

9
src/components/MiningListCard.js
View File

@ -1,5 +1,8 @@
import React from 'react'
import { HStack, Stack, Flex, Box, Slider, Image, Text, Button, VStack, Icon, AspectRatio, useCallbackRef } from '@chakra-ui/react'
import {
HStack, Stack, Flex, Box, Image,
Text, Button, VStack, Icon, useColorModeValue,
} from '@chakra-ui/react'
import { ImArrowRight2 } from 'react-icons/im'
import { config } from '../config'
import { Link, useNavigate } from 'react-router-dom'
@ -37,13 +40,15 @@ const FarmListItem = ({ id, img, symbol, percentage, ...rest }) => {
export const MiningListCard = ({ coins, ...rest }) => {
const bg = useColorModeValue('white', 'gray.900')
return (
<Box>
<VStack
borderWidth="1px"
borderRadius="lg"
w="full"
bg="white"
bg={bg}
boxShadow="lg"
p="6"
justify="start"

11
src/components/Partners.js
View File

@ -1,4 +1,7 @@
import { Box, Center, HStack, Image, VStack, SimpleGrid, Text, Stack } from "@chakra-ui/react"
import {
Center, HStack, Image, VStack,
useColorModeValue, Text, Stack,
} from "@chakra-ui/react"
import React from "react"
import { Images } from '../data'
@ -31,14 +34,16 @@ const PartnerRow = ({ left, right }) => {
)
}
export const Partners = ({...rest}) => {
export const Partners = ({ ...rest }) => {
const bg = useColorModeValue('white', 'gray.900')
return (
<VStack
borderWidth="1px"
borderRadius="lg"
w="full"
bg="white"
bg={bg}
boxShadow="lg"
p="2"
{...rest}

7
src/components/SideBar.js
View File

@ -4,6 +4,7 @@ import {
import { FiArrowRight, FiHome, FiTrendingUp } from 'react-icons/fi'
import { useApp } from '../AppContext'
import { Logo } from './Logo'
import { ColorModeSwitcher } from './ColorModeSwitcher'
import { Link } from 'react-router-dom';
const menuItems = [
@ -67,7 +68,7 @@ const DocItem = ({ path, children, ...rest }) => {
const SocialItem = ({ icon, path, ...rest }) => {
return (
<a href={path} target="_blank">
<a href={path} target="_blank" rel="noreferrer">
<Icon _hover={{ color: 'gray.900' }} as={icon} />
</a>
)
@ -96,6 +97,10 @@ export const SideBar = ({ onClose, ...rest }) => {
justifyContent="space-between">
<Logo />
<ColorModeSwitcher
display={{ base: 'flex', md: 'none' }}
/>
<CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
</Flex>

1
src/components/index.js
View File

@ -6,4 +6,5 @@ export * from './MiningListCard'
export * from './Partners'
export * from './Auditors'
export * from './FarmCoinCard'
export * from './ColorModeSwitcher'
export * from './alert'

8
src/config.js
View File

@ -1,18 +1,18 @@
const items = {
development: {
ENDPOINT: 'http://coinwind.test/'
},
production: {
ENDPOINT: 'https://gdb.01a01.com/'
}
}
export const config = {
APP_NAME: 'CoinWind',
APP_NAME: process.env.REACT_APP_NAME || 'CoinWind',
ENABLE_WALLETCONNECT: false,
ENABLE_COINBASE: true,
AUTO_CONN_WALLET: false,
INFURAL_ID: 'a4a92ab2377d4bb9a693d96c27c6523e',
ENDPOINT: 'https://gdb.01a01.com/',
ENDPOINT: process.env.NODE_ENV === 'production' ? items.production.ENDPOINT : items.development.ENDPOINT,
}

6
src/pages/Farm.js
View File

@ -3,7 +3,8 @@ import {
Stack, Image, HStack,
AspectRatio, Input,
FormControl, Box,
useDisclosure, useToast
useDisclosure, useToast,
useColorModeValue,
} from "@chakra-ui/react"
import { StateCard, FarmCoinCard } from "../components"
@ -29,6 +30,7 @@ export const Farm = () => {
const [depositeIndex, setDepositeIndex] = React.useState(-1)
const app = useApp()
const toast = useToast()
const bg = useColorModeValue('white', 'gray.900')
const { isOpen: isWithdrawalOpen, onOpen: onWithdrawalOpen, onClose: onWithdrawalClose } = useDisclosure()
const { isOpen: isDepositeOpen, onOpen: onDepositeOpen, onClose: onDepositeClose } = useDisclosure()
@ -189,7 +191,7 @@ export const Farm = () => {
<Stack
my="4"
bg="white"
bg={bg}
w="full"
borderRadius="lg"
direction={{ base: 'column', md: 'row' }}

14
src/pages/Home.js
View File

@ -1,5 +1,8 @@
import React from "react";
import { Box, Stack, VStack, Image, Text, Flex, HStack } from "@chakra-ui/react";
import {
Box, Stack, VStack, Image, Text,
Flex, HStack, useColorModeValue
} from "@chakra-ui/react";
import { Auditors, Partners, Carousel, MultiChainCard, StateCard, MiningListCard } from "../components";
import { useApp } from '../AppContext'
import { get_coins_platform } from '../api'
@ -19,7 +22,7 @@ const HomeFooter = () => {
>
<Image src={app.logo} filter="grayscale(100%)" opacity="0.5" alt='logo' />
<a href="https://www.fairyproof.com/" target="_blank">
<a href="https://www.fairyproof.com/" target="_blank" rel="noreferrer">
<Text
fontFamily="monospace"
fontSize="14"
@ -34,6 +37,9 @@ export const Home = () => {
const app = useApp()
const bg = useColorModeValue('white', 'gray.900')
const stateCardBg = useColorModeValue('gray.100', 'gray.900')
React.useEffect(() => {
get_coins_platform().then((res) => {
setCoins(res.data)
@ -52,7 +58,7 @@ export const Home = () => {
borderWidth="1px"
borderRadius="lg"
w="full"
bg="white"
bg={bg}
boxShadow="lg"
p="6"
my="4"
@ -66,7 +72,7 @@ export const Home = () => {
</Stack>
<Stack
bg="gray.100"
bg={stateCardBg}
w="full"
borderRadius="lg"
direction={{ base: 'column', md: 'row' }}