From 193ed837b4db3fc90fb27e1cd07a61b2120fc745 Mon Sep 17 00:00:00 2001 From: john Date: Tue, 10 May 2022 20:33:42 +0700 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=A4=9A=E8=AA=9E=E8=A8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.sample | 3 +- src/App.js | 5 +-- src/AppContext.js | 9 ++--- src/components/AppBar.js | 19 +++++++++-- src/components/Auditors.js | 4 ++- src/components/FarmCoinCard.js | 17 ++++++---- src/components/Lang.js | 33 ++++++++++++++++++ src/components/MiningListCard.js | 13 ++++++-- src/components/Panel.js | 15 ++++++--- src/components/SideBar.js | 48 ++++++++++++++++++--------- src/hooks/index.js | 1 + src/hooks/useLocalStorage.js | 2 +- src/i18.js | 57 ++++++++++++-------------------- src/index.js | 2 -- src/lang/en.js | 33 ++++++++++++++++++ src/lang/fr.js | 33 ++++++++++++++++++ src/lang/index.js | 3 ++ src/lang/tw.js | 33 ++++++++++++++++++ src/theme.js | 8 +++++ 19 files changed, 258 insertions(+), 80 deletions(-) create mode 100644 src/components/Lang.js create mode 100644 src/hooks/index.js create mode 100644 src/lang/index.js create mode 100644 src/theme.js diff --git a/.env.sample b/.env.sample index be06177..54f610c 100644 --- a/.env.sample +++ b/.env.sample @@ -1 +1,2 @@ -DOMAIN='good' \ No newline at end of file +REACT_APP_NAME = CoinWind +REACT_APP_I18N_ENABLED = true \ No newline at end of file diff --git a/src/App.js b/src/App.js index c2873d1..1692c89 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,8 @@ import React from 'react'; import { - ChakraProvider, - theme, + ChakraProvider, ColorModeScript, } from '@chakra-ui/react'; +import { theme } from './theme' import { Layout } from './components'; import { Outlet } from 'react-router-dom' import { AppContextProvider } from './AppContext'; @@ -12,6 +12,7 @@ function App() { return ( + diff --git a/src/AppContext.js b/src/AppContext.js index 4022215..c5651f5 100644 --- a/src/AppContext.js +++ b/src/AppContext.js @@ -1,7 +1,7 @@ import React from "react" import { config } from "./config" import { get_settings } from './api' -import { ImTwitter, ImTelegram, ImFacebook } from "react-icons/im"; +import { ImTwitter, ImTelegram, ImFacebook, ImWhatsapp } from "react-icons/im"; const AppContext = React.createContext(null) @@ -10,9 +10,10 @@ export const useApp = () => { } let SOCIALS = [ - { name: 'telegram', icon: ImTelegram, path: 'https://telegram.org' }, - { name: 'twitter', icon: ImTwitter, path: 'https://twitter.com' }, - { name: 'facebook', icon: ImFacebook, path: 'https://facebook.com' }, + { name: 'telegram', icon: ImTelegram, path: 'https://telegram.org', enabled: false }, + { name: 'twitter', icon: ImTwitter, path: 'https://twitter.com', enabled: false }, + { name: 'facebook', icon: ImFacebook, path: 'https://facebook.com', enabled: false }, + { name: 'whatsapp', icon: ImWhatsapp, path: 'https://whatsapp.com', enabled: true }, ] export const AppContextProvider = ({ children }) => { diff --git a/src/components/AppBar.js b/src/components/AppBar.js index 89de272..bbee0c2 100644 --- a/src/components/AppBar.js +++ b/src/components/AppBar.js @@ -2,7 +2,8 @@ import React from 'react' import { Button, Flex, VStack, HStack, IconButton, useColorModeValue, useDisclosure, Icon, Text, - useToast, + useToast, Stack, + Select, } from '@chakra-ui/react' import { FiMenu, FiCircle } from 'react-icons/fi' import { Logo } from './Logo' @@ -10,9 +11,12 @@ import { ColorModeSwitcher } from './ColorModeSwitcher' import { config } from '../config' import { useApp } from '../AppContext' import { AlertBox } from './alert' +import { Lang } from './Lang' import { connectWallet, addEventListeners, fetchAccount } from '../lib' import { get_register } from '../api' import { useSearchParams } from 'react-router-dom' +import { supportedLangs } from '../i18' +import { useTranslation } from 'react-i18next' export const AppBar = ({ onOpenDrawer, ...rest }) => { @@ -20,6 +24,7 @@ export const AppBar = ({ onOpenDrawer, ...rest }) => { const toast = useToast() const [searchParams, setSearchParams] = useSearchParams() const { isOpen: isOpenConnectedWallet, onOpen: onOpenConnectedWallet, onClose: onCloseConnectedWallet } = useDisclosure() + const { t } = useTranslation() const bg = useColorModeValue('white', 'gray.900') const borderBottomColor = useColorModeValue('gray.200', 'gray.700') @@ -61,6 +66,10 @@ export const AppBar = ({ onOpenDrawer, ...rest }) => { } } + const onSelectedLang = (ev) => { + console.log(ev.target.value) + } + // auto connect React.useEffect(() => { if (config.AUTO_CONN_WALLET) { @@ -94,7 +103,7 @@ export const AppBar = ({ onOpenDrawer, ...rest }) => { onClick={onBtnConnect} > { - app.address ? 'Connected' : 'Connect Wallet' + app.address ? t('connected') : t('connectWallet') } @@ -109,6 +118,12 @@ export const AppBar = ({ onOpenDrawer, ...rest }) => { + + + + { const bg = useColorModeValue('white', 'gray.900') + const { t } = useTranslation() return ( { borderBottom="1px" borderColor='gray.200' > - Auditors + {t('auditors')} { return ( @@ -50,6 +51,7 @@ 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 { t } = useTranslation() const bg = useColorModeValue('white', 'gray.900') return ( @@ -84,7 +86,7 @@ export const FarmCoinCard = ({ index, icon, symbol, apy, deposited, vl, Harvest {symbol} + >{t('harvest') + ' ' + symbol} { isNew && - - - - + + + + @@ -120,13 +123,13 @@ export const FarmCoinCard = ({ index, icon, symbol, apy, deposited, vl, diff --git a/src/components/Lang.js b/src/components/Lang.js new file mode 100644 index 0000000..8aa7017 --- /dev/null +++ b/src/components/Lang.js @@ -0,0 +1,33 @@ +import React from "react" +import { Select } from '@chakra-ui/react' +import { useTranslation } from "react-i18next" +import { useLocalStorage } from "../hooks" + +/** + * + * @param {array} config: language config. eg [{lang:'en', name:'English'}, {lang:'fr', name:'French'} ] + */ +export const Lang = ({ config }) => { + const [sel, setSel] = useLocalStorage('lang', 'en') + const { i18n } = useTranslation() + + const onSelectedLang = (ev) => { + i18n.changeLanguage(ev.target.value) + + setSel(ev.target.value) + } + + React.useEffect(() => { + i18n.changeLanguage(sel) + }, []) + + return ( + + ) +} \ No newline at end of file diff --git a/src/components/MiningListCard.js b/src/components/MiningListCard.js index 94e1b74..ca7edde 100644 --- a/src/components/MiningListCard.js +++ b/src/components/MiningListCard.js @@ -6,10 +6,13 @@ import { import { ImArrowRight2 } from 'react-icons/im' import { config } from '../config' import { Link, useNavigate } from 'react-router-dom' +import { useTranslation } from 'react-i18next' const FarmListItem = ({ id, img, symbol, percentage, ...rest }) => { const navigateTo = useNavigate() + const { t } = useTranslation() + const onBtnMining = () => { navigateTo('/farm') } @@ -33,7 +36,9 @@ const FarmListItem = ({ id, img, symbol, percentage, ...rest }) => { + > + {t('mining')} + ) } @@ -41,6 +46,7 @@ const FarmListItem = ({ id, img, symbol, percentage, ...rest }) => { export const MiningListCard = ({ coins, ...rest }) => { const bg = useColorModeValue('white', 'gray.900') + const { t } = useTranslation() return ( @@ -63,7 +69,7 @@ export const MiningListCard = ({ coins, ...rest }) => { alignItems="center" > - Defi Farm + {t('defiFarm')} @@ -75,7 +81,8 @@ export const MiningListCard = ({ coins, ...rest }) => { alignItems="center" > - More + {t('more')} + diff --git a/src/components/Panel.js b/src/components/Panel.js index a01855a..eb48c9f 100644 --- a/src/components/Panel.js +++ b/src/components/Panel.js @@ -1,11 +1,16 @@ -import { Box } from "@chakra-ui/react" +import { Box, Stack } from "@chakra-ui/react" -export const Panel = ({...props}) => { +export const Panel = ({ children, ...rest }) => { return ( - - - + + {children} + ) } \ No newline at end of file diff --git a/src/components/SideBar.js b/src/components/SideBar.js index d45f667..bdc6046 100644 --- a/src/components/SideBar.js +++ b/src/components/SideBar.js @@ -1,22 +1,16 @@ import { - Box, CloseButton, Flex, Icon, useColorModeValue, + Text, Box, CloseButton, Flex, Icon, useColorModeValue, + Stack, Select, } from '@chakra-ui/react' 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 = [ - { name: 'Home', icon: FiHome, path: '/home' }, - { name: 'Farm', icon: FiTrendingUp, path: '/farm' }, -] - -const docItems = [ - { name: 'Announcement', icon: '', path: '' }, - { name: 'FAQ', icon: '', path: '' }, - { name: 'Tutorial', icon: '', path: '' }, -] +import { useTranslation } from 'react-i18next' +import { useLocalStorage } from '../hooks' +import { Lang } from './Lang' +import { supportedLangs } from '../i18' const NavItem = ({ icon, path, onClick, children, ...rest }) => { return ( @@ -78,8 +72,20 @@ export const SideBar = ({ onClose, ...rest }) => { const app = useApp() const bg = useColorModeValue('white', 'gray.900') + const { t, i18n } = useTranslation() // const colorBorderRight = useColorModeValue('gray.200', 'gray.700') + const menuItems = [ + { name: t('home'), icon: FiHome, path: '/home', enabled: true }, + { name: t('farm'), icon: FiTrendingUp, path: '/farm', enabled: true }, + ] + + const docItems = [ + { name: t('announcement'), icon: '', path: '', enabled: true }, + { name: t('faq'), icon: '', path: '', enabled: true }, + { name: t('tutorial'), icon: '', path: '', enabled: true }, + ] + return ( { + justifyContent="space-between" + > { + + + + {/* nav links */} { menuItems.map((item) => ( - + item.enabled && {item.name} )) @@ -120,7 +136,7 @@ export const SideBar = ({ onClose, ...rest }) => { {/* document links */} { docItems.map((item) => ( - + item.enabled && {item.name} )) @@ -136,7 +152,7 @@ export const SideBar = ({ onClose, ...rest }) => { > { app.socials.map((item) => ( - + item.enabled && )) } diff --git a/src/hooks/index.js b/src/hooks/index.js new file mode 100644 index 0000000..8b63a21 --- /dev/null +++ b/src/hooks/index.js @@ -0,0 +1 @@ +export * from './useLocalStorage' \ No newline at end of file diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.js index 13f7c44..e9909d4 100644 --- a/src/hooks/useLocalStorage.js +++ b/src/hooks/useLocalStorage.js @@ -27,7 +27,7 @@ function getStorageJson(name, default_value) { * const [state, setState] = useLocalStorage('mystate', 0) * } */ -export default useLocalStorage = (name, default_value) => { +export const useLocalStorage = (name, default_value) => { const [value, setValue] = React.useState(() => getStorageJson(name, default_value)) React.useEffect(() => { diff --git a/src/i18.js b/src/i18.js index f11f3a5..5a86841 100644 --- a/src/i18.js +++ b/src/i18.js @@ -1,48 +1,20 @@ import i18n from 'i18next' import { initReactI18next } from 'react-i18next' +import { en, fr, tw } from './lang' + const resources = { en: { - translation: { - home: 'Home', - farm: 'farm', - announcement: 'Announcement', - faq: 'FAQ', - tutorial: 'tutorial', - connectWallet: 'Connect Wallet', - tvl: 'TVL', - totalUsersEarned: 'Total Users Earned', - personalTvl: 'Personal TVL', - totalPersonalEarned: 'Total Personal Earned', - harvest: 'Harvest', - apy: 'APY', - compoundInterest: 'Compound Interest', - deposite: 'Deposite', - vl: 'VL', - remaining: 'Remaining', - withdrawal: 'Withdrawal', - mining: 'Mining', - defiFarm: 'Defi Farm', - multiChainLockupValue: 'Multi-chain Lock-up Value', - multiChainUserRevenue: 'Multi-chain User Revenue', - miningOutput: 'Mining Output', - miningOutputValue: 'Mining Output Value', - multiChainReward: 'Multi-chain Reward', - multiChainBurned: 'Multi-chain Burned', - more: 'More', - partners: 'Partners', - auditors: 'Auditors', - } + translation: en, + name: 'English', }, fr: { - translation: { - - } + translation: fr, + name: 'Français', }, tw: { - translation: { - - } + translation: tw, + name: '中文繁體', }, } @@ -56,4 +28,17 @@ i18n.use(initReactI18next).init({ } }) +const parseResources = () => { + let supported = [] + for (const key in resources) { + supported.push({ + 'lang': `${key}`, + 'name': `${resources[key]['name']}`, + }) + } + return supported +} + +export const supportedLangs = parseResources() + export default i18n; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 8931b42..9ca3c06 100644 --- a/src/index.js +++ b/src/index.js @@ -14,7 +14,6 @@ const root = createRoot(element) root.render( - }> } /> @@ -23,7 +22,6 @@ root.render( Not Found} /> - ) diff --git a/src/lang/en.js b/src/lang/en.js index e69de29..0945950 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -0,0 +1,33 @@ + +export const en = { + home: 'Home', + farm: 'Farm', + announcement: 'Announcement', + faq: 'FAQ', + tutorial: 'tutorial', + connectWallet: 'Connect Wallet', + connected: 'Connected', + tvl: 'TVL', + totalUsersEarned: 'Total Users Earned', + personalTvl: 'Personal TVL', + totalPersonalEarned: 'Total Personal Earned', + harvest: 'Harvest', + apy: 'APY', + compoundInterest: 'Compound Interest', + deposite: 'Deposite', + deposited: 'Deposited', + vl: 'VL', + remaining: 'Remaining', + withdrawal: 'Withdrawal', + mining: 'Mining', + defiFarm: 'DeFi Farm', + multiChainLockupValue: 'Multi-chain Lock-up Value', + multiChainUserRevenue: 'Multi-chain User Revenue', + miningOutput: 'Mining Output', + miningOutputValue: 'Mining Output Value', + multiChainReward: 'Multi-chain Reward', + multiChainBurned: 'Multi-chain Burned', + more: 'More', + partners: 'Partners', + auditors: 'Auditors', +} \ No newline at end of file diff --git a/src/lang/fr.js b/src/lang/fr.js index e69de29..105ec94 100644 --- a/src/lang/fr.js +++ b/src/lang/fr.js @@ -0,0 +1,33 @@ + +export const fr = { + home: 'Domicile', + farm: 'Ferme', + announcement: 'Annonce', + faq: 'FAQ', + tutorial: 'Didacticiel', + connectWallet: 'Connecter le portefeuille', + connected: 'Connecté', + tvl: 'TVL', + totalUsersEarned: 'Total Users Earned', + personalTvl: 'Personal TVL', + totalPersonalEarned: 'Total Personal Earned', + harvest: 'Harvest', + apy: 'APY', + compoundInterest: 'Compound Interest', + deposite: 'Deposite', + deposited: 'Deposited', + vl: 'VL', + remaining: 'Remaining', + withdrawal: 'Withdrawal', + mining: 'Mining', + defiFarm: 'DeFi Farm', + multiChainLockupValue: 'Multi-chain Lock-up Value', + multiChainUserRevenue: 'Multi-chain User Revenue', + miningOutput: 'Mining Output', + miningOutputValue: 'Mining Output Value', + multiChainReward: 'Multi-chain Reward', + multiChainBurned: 'Multi-chain Burned', + more: 'More', + partners: 'Partners', + auditors: 'Auditors', +} \ No newline at end of file diff --git a/src/lang/index.js b/src/lang/index.js new file mode 100644 index 0000000..7809159 --- /dev/null +++ b/src/lang/index.js @@ -0,0 +1,3 @@ +export * from './en' +export * from './fr' +export * from './tw' diff --git a/src/lang/tw.js b/src/lang/tw.js index e69de29..19f61cf 100644 --- a/src/lang/tw.js +++ b/src/lang/tw.js @@ -0,0 +1,33 @@ + +export const tw = { + home: '首頁', + farm: '農場', + announcement: '公告', + faq: 'FAQ', + tutorial: '教案', + connectWallet: '連接錢包', + connected: '已連接', + tvl: '總鎖倉價值', + totalUsersEarned: 'Total Users Earned', + personalTvl: 'Personal TVL', + totalPersonalEarned: 'Total Personal Earned', + harvest: 'Harvest', + apy: '年度百分收益率', + compoundInterest: 'Compound Interest', + deposite: '存入', + deposited: '已存入', + vl: 'VL', + remaining: 'Remaining', + withdrawal: '取出', + mining: '挖礦', + defiFarm: 'DeFi 農場', + multiChainLockupValue: 'Multi-chain Lock-up Value', + multiChainUserRevenue: 'Multi-chain User Revenue', + miningOutput: 'Mining Output', + miningOutputValue: 'Mining Output Value', + multiChainReward: 'Multi-chain Reward', + multiChainBurned: 'Multi-chain Burned', + more: '更多', + partners: 'Partners', + auditors: 'Auditors', +} \ No newline at end of file diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000..1d903e0 --- /dev/null +++ b/src/theme.js @@ -0,0 +1,8 @@ +import { extendTheme } from "@chakra-ui/react" + +const config = { + initialColorMode: 'light', + useSystemColorMode: false, +} + +export const theme = extendTheme({config})