Skip to content

Commit

Permalink
feat: Add multilingual CN / EN support
Browse files Browse the repository at this point in the history
  • Loading branch information
@willpan1102
willpan1102 committed Jul 2, 2024
1 parent 5da48a1 commit 7ee4883
Show file tree
Hide file tree
Showing 22 changed files with 3,675 additions and 5,068 deletions.
7,210 changes: 2,758 additions & 4,452 deletions power-voting/package-lock.json
View file

Large diffs are not rendered by default.

13 changes: 6 additions & 7 deletions power-voting/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@ant-design/icons": "^5.0.1",
"@headlessui/react": "latest",
"@iktakahiro/markdown-it-katex": "3.0.4",
"@rainbow-me/rainbowkit": "2.0.8",
"@rainbow-me/rainbowkit": "^2.0.7",
"@tailwindcss/forms": "latest",
"@tanstack/react-query": "^5.35.1",
"@web3-storage/w3up-client": "^13.0.1",
Expand All @@ -26,6 +26,7 @@
"dayjs": "^1.11.9",
"dotenv": "^16.4.5",
"html-webpack-plugin": "^5.5.0",
"i18next": "^23.11.5",
"katex": "^0.16.8",
"markdown-it": "^14.1.0",
"markdown-it-abbr": "^1.0.4",
Expand All @@ -43,12 +44,13 @@
"react-countdown": "^2.3.5",
"react-dom": "^18.3.0",
"react-hook-form": "^7.45.0",
"react-i18next": "^14.1.2",
"react-markdown-editor-lite": "^1.3.4",
"react-router-dom": "^6.10.0",
"react-select": "^5.7.4",
"tlock-js": "0.9.0",
"viem": "2.16.3",
"wagmi": "2.10.8"
"viem": "^2.10.1",
"wagmi": "^2.8.1"
},
"devDependencies": {
"@types/react": "^18.3.0",
Expand All @@ -60,7 +62,7 @@
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"eslint": "^8.57.0",
"ethers": "6.13.1",
"ethers": "5.7.2",
"file-loader": "^6.2.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
Expand All @@ -76,8 +78,5 @@
"webpack": "5.90.3",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.2"
},
"resolutions": {
"ws": "8.17.1"
}
}
82 changes: 60 additions & 22 deletions power-voting/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,25 +12,30 @@
// See the License for the specific language governing permissions and
// limitations under the License.

import React, { useState, useEffect, useRef } from "react";
import { useRoutes, useNavigate, Link, useLocation } from "react-router-dom";
import axios from "axios";
import {
ConnectButton,
useConnectModal
} from "@rainbow-me/rainbowkit";
import { ConfigProvider, theme, Modal, Dropdown, FloatButton } from 'antd';
import { useAccount } from "wagmi";
import { ConfigProvider, Dropdown, FloatButton, Modal, theme } from 'antd';
import enUS from 'antd/locale/en_US';
import zhCN from 'antd/locale/zh_CN';
import axios from "axios";
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import React, { useEffect, useRef, useState } from "react";
import Countdown from 'react-countdown';
import timezones from '../public/json/timezons.json';
import routes from "./router";
import Footer from './components/Footer';
import "./common/styles/reset.less";
import { useTranslation } from 'react-i18next';
import { Link, useLocation, useNavigate, useRoutes } from "react-router-dom";
import "tailwindcss/tailwind.css";
import { useAccount } from "wagmi";
import timezones from '../public/json/timezons.json';
import { STORING_DATA_MSG } from "./common/consts";
import { useVoterInfo, useCurrentTimezone } from "./common/store";
import { useCheckFipEditorAddress, useVoterInfoSet } from "./common/hooks";

import { useCurrentTimezone, useVoterInfo } from "./common/store";
import "./common/styles/reset.less";
import Footer from './components/Footer';
import './lang/config';
import routes from "./router";
const App: React.FC = () => {
// Destructure values from custom hooks
const { chain, address, isConnected } = useAccount();
Expand All @@ -46,7 +51,7 @@ const App: React.FC = () => {
// State variables
const [expirationTime, setExpirationTime] = useState(0);
const [modalOpen, setModalOpen] = useState(false);

const [language, setLanguage] = useState<any>({ meaning: 'en', value: enUS });
// Get the user's timezone
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const text = timezones.find((item: any) => item.value === timezone)?.text;
Expand All @@ -67,6 +72,7 @@ const App: React.FC = () => {
const setTimezone = useCurrentTimezone((state: any) => state.setTimezone);

const { pathname } = useLocation();
const { t, i18n } = useTranslation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
Expand Down Expand Up @@ -150,7 +156,8 @@ const App: React.FC = () => {
const decodeString = atob(data.split('.')[1]);
const payload = JSON.parse(decodeString);
const { aud, prf } = payload;
navigate('/ucanDelegate/delete', { state: {
navigate('/ucanDelegate/delete', {
state: {
params: {
isGithubType,
aud,
Expand Down Expand Up @@ -180,7 +187,7 @@ const App: React.FC = () => {
<a
onClick={handleDelegate}
>
UCAN Delegates
{t('content.UCANDelegates')}
</a>
),
},
Expand All @@ -190,7 +197,7 @@ const App: React.FC = () => {
<a
onClick={() => { handleJump('/minerid') }}
>
Miner IDs Management
{t('content.minerIDsManagement')}
</a>
),
},
Expand All @@ -207,7 +214,7 @@ const App: React.FC = () => {
<a
onClick={() => { handleJump('/fip-editor/propose') }}
>
Propose
{t('content.propose')}
</a>
),
},
Expand All @@ -217,7 +224,7 @@ const App: React.FC = () => {
<a
onClick={() => { handleJump('/fip-editor/approve') }}
>
Approve
{t('content.approve')}
</a>
),
},
Expand All @@ -227,16 +234,37 @@ const App: React.FC = () => {
<a
onClick={() => { handleJump('/fip-editor/revoke') }}
>
Revoke
{t('content.revoke')}
</a>
),
},
],
})
}

const languageOptions = [
{ label: 'EN', value: 'en' },
{ label: '中文', value: 'zh' },
];
const changeLanguage = (value: string) => {
i18n.changeLanguage(value)
if (value === 'en') {
setLanguage({ meaning: 'en', value: enUS });
dayjs.locale('en');
} else if (value === 'zh') {
setLanguage({ meaning: 'zh', value: zhCN });
dayjs.locale('zh-cn');
}
};
return (
<ConfigProvider theme={{ algorithm: theme.defaultAlgorithm }}>
<ConfigProvider theme={{
algorithm: theme.defaultAlgorithm,
components: {
Radio: {
buttonSolidCheckedBg: ''
}
}
}} locale={language.value}>
<div className="layout font-body">
{!isLanding && <header className='h-[96px] bg-[#ffffff] border-b border-solid border-[#DFDFDF]'>
<div className='w-[1000px] h-[88px] mx-auto flex items-center justify-between'>
Expand All @@ -251,7 +279,7 @@ const App: React.FC = () => {
to='/'
className='text-black text-2xl font-semibold hover:opacity-80'
>
Power Voting
{t('content.powerVoting')}
</Link>
</div>
</div>
Expand All @@ -266,11 +294,21 @@ const App: React.FC = () => {
<button
className="h-[40px] bg-sky-500 hover:bg-sky-700 text-white font-bold py-2 px-4 rounded-xl mr-4"
>
Tools
{t('content.tools')}
</button>
</Dropdown>
<div className="connect flex items-center">
<ConnectButton showBalance={false} />
<div className='px-4 py-2 h-full flex flex-nowrap text-sm'>
{languageOptions.map((item) => {
return (
<div className={`h-full mr-1.5 cursor-pointer text-black font-semibold ${item.value === language.meaning ? 'border-solid border-b-2 border-current' : 'border-none'}`} onClick={() => changeLanguage(item.value)}>
<div className='h-5 leading-6 text-center my-*'>{item.label}</div>
</div>
)
})
}
</div>
</div>
</div>
<Modal
Expand All @@ -283,7 +321,7 @@ const App: React.FC = () => {
footer={false}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
>
<p>{STORING_DATA_MSG} Please wait:&nbsp;
<p>{t(STORING_DATA_MSG)} {t('content.pleaseWait')}:&nbsp;
<Countdown
date={expirationTime}
renderer={({ minutes, seconds, completed }) => {
Expand Down
Loading

0 comments on commit 7ee4883

Please sign in to comment.