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

- support dark mode
- auto seperate DEV and PROD mode (server ENDPOINT is different)

package-lock.json

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

package.json

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

src/App.js

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

src/components/AppBar.js

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

src/components/Auditors.js

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

src/components/Carousel.js

@@ -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 bg = useColorModeValue('white', 'gray.900')
-    const side = useBreakpointValue({ base: '30%', md: '40px' })
+
+    // 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"

src/components/FarmCoinCard.js

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

src/components/MiningListCard.js

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

src/components/Partners.js

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

src/components/SideBar.js

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

src/components/index.js

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

src/config.js

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

src/pages/Farm.js

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

src/pages/Home.js

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