implement translation and update logo

EveripediaNetwork · Jan 8, 2025 · cfdaebe · cfdaebe
1 parent 882bd7e
commit cfdaebe
Show file tree

Hide file tree

Showing 11 changed files with 177 additions and 46 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,7 @@
+const createNextIntlPlugin = require('next-intl/plugin')
+
+const withNextIntl = createNextIntlPlugin()
+
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
@@ -57,4 +61,4 @@ const nextConfig = {
   skipTrailingSlashRedirect: true,
 }
 
-module.exports = nextConfig
+module.exports = withNextIntl(nextConfig)
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.456.0",
     "next": "^13.2.3",
+    "next-intl": "^3.26.3",
     "next-redux-wrapper": "^7.0.5",
     "next-seo": "^5.5.0",
     "nextjs-progressbar": "^0.0.14",

diff --git a/public/svgs/iq-logo-dark.svg b/public/svgs/iq-logo-dark.svg
diff --git a/public/svgs/iq-logo-light.svg b/public/svgs/iq-logo-light.svg
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -1,16 +1,18 @@
 'use client'
+
 import React from 'react'
 import type { NextPage } from 'next'
 import { Flex, Heading, Stack, Text } from '@chakra-ui/react'
-
 import { BraindaoLogo3 } from '@/components/braindao-logo-3'
 import Link from '@/components/elements/LinkElements/Link'
 import TokenData from '@/components/dashboard/TokenData'
 import { DashboardGraphData } from '@/components/dashboard/GraphDetails'
 import { fetchMarketData } from '@/utils/fetch-market-data'
+import { useTranslations } from 'next-intl'
 
 const Home: NextPage = () => {
   const { marketData } = fetchMarketData()
+  const t = useTranslations('dashboard')
 
   return (
     <Stack
@@ -35,20 +37,20 @@ const Home: NextPage = () => {
             textAlign={{ base: 'center', lg: 'left' }}
             fontSize={{ base: 'xl', lg: '2xl' }}
           >
-            Welcome to the IQ Dashboard
+            {t('welcomeTitle')}
           </Heading>
           <Text
             textAlign={{ base: 'center', lg: 'left' }}
             fontSize={{ base: 'sm', lg: 'md' }}
             fontWeight="medium"
           >
-            The{' '}
-            <Link href="https://iq.wiki/wiki/iq" isExternal>
-              IQ token
-            </Link>{' '}
-            is a multichain token that powers the IQ ecosystem of dapps. You can
-            stake your tokens, bridge them across blockchains, vote on
-            governance proposals, and more all through the IQ Dashboard.
+            {t.rich('welcomeDescription', {
+              iqTokenLink: (chunks) => (
+                <Link href="https://iq.wiki/wiki/iq" isExternal>
+                  {chunks}
+                </Link>
+              ),
+            })}
           </Text>
         </Stack>
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,8 @@ import { Metadata } from 'next'
 import AppProviders from '@/components/client/AppProviders'
 import ColorMode from '@/components/chakra/ColorMode'
 import './global.css'
+import { getLocale, getMessages } from 'next-intl/server'
+import { NextIntlClientProvider } from 'next-intl'
 
 export const metadata: Metadata = {
   title: {
@@ -33,9 +35,13 @@ export const metadata: Metadata = {
   },
 }
 
-const RootLayout = ({ children }: { children: React.ReactNode }) => {
+const RootLayout = async ({ children }: { children: React.ReactNode }) => {
+  const locale = await getLocale()
+
+  const messages = await getMessages()
+
   return (
-    <html lang="en">
+    <html lang={locale}>
       <head>
         <meta charSet="UTF-8" />
         <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
@@ -65,8 +71,10 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
         />
       </head>
       <body>
-        <ColorMode />
-        <AppProviders>{children}</AppProviders>
+        <NextIntlClientProvider messages={messages}>
+          <ColorMode />
+          <AppProviders>{children}</AppProviders>
+        </NextIntlClientProvider>
       </body>
     </html>
   )

diff --git a/src/i18n/request.ts b/src/i18n/request.ts
@@ -0,0 +1,12 @@
+import { getRequestConfig } from 'next-intl/server'
+
+export default getRequestConfig(async () => {
+  // Provide a static locale, fetch a user setting,
+  // read from `cookies()`, `headers()`, etc.
+  const locale = 'en'
+
+  return {
+    locale,
+    messages: (await import(`../messages/${locale}.json`)).default,
+  }
+})
diff --git a/src/messages/en.json b/src/messages/en.json
@@ -0,0 +1,7 @@
+{
+  "dashboard": {
+    "welcomeTitle": "Welcome to the IQ Dashboard",
+    "welcomeDescription": "The <iqTokenLink>IQ token</iqTokenLink> is a multichain token that powers the IQ ecosystem of dapps. You can stake your tokens, bridge them across blockchains, vote on governance proposals, and more all through the IQ Dashboard.",
+    "iqTokenText": "IQ token"
+  }
+}
diff --git a/src/messages/kr.json b/src/messages/kr.json
@@ -0,0 +1,7 @@
+{
+  "dashboard": {
+    "welcomeTitle": "IQ 대시보드에 오신 것을 환영합니다",
+    "welcomeDescription": "{iqTokenLink}은 IQ 디앱 생태계를 구동하는 멀티체인 토큰입니다. IQ 대시보드를 통해 토큰을 스테이킹하고, 블록체인 간 브리지를 구축하며, 거버넌스 제안에 투표하는 등 다양한 활동을 할 수 있습니다.",
+    "iqTokenText": "IQ 토큰"
+  }
+}
diff --git a/src/messages/zh.json b/src/messages/zh.json
@@ -0,0 +1,7 @@
+{
+  "dashboard": {
+    "welcomeTitle": "欢迎来到IQ仪表板",
+    "welcomeDescription": "{iqTokenLink}是支持IQ生态系统dapps的多链代币。通过IQ仪表板，您可以质押代币、跨区块链桥接、对治理提案进行投票等等。",
+    "iqTokenText": "IQ代币"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2169,6 +2169,47 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
   integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
+"@formatjs/[email protected]":
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.2.tgz#0ee291effe7ee2c340742a6c95d92eacb5e6c00a"
+  integrity sha512-6sE5nyvDloULiyOMbOTJEEgWL32w+VHkZQs8S02Lnn8Y/O5aQhjOEXwWzvR7SsBE/exxlSpY2EsWZgqHbtLatg==
+  dependencies:
+    "@formatjs/fast-memoize" "2.2.6"
+    "@formatjs/intl-localematcher" "0.5.10"
+    decimal.js "10"
+    tslib "2"
+
+"@formatjs/[email protected]", "@formatjs/fast-memoize@^2.2.0":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-2.2.6.tgz#fac0a84207a1396be1f1aa4ee2805b179e9343d1"
+  integrity sha512-luIXeE2LJbQnnzotY1f2U2m7xuQNj2DA8Vq4ce1BY9ebRZaoPB1+8eZ6nXpLzsxuW5spQxr7LdCg+CApZwkqkw==
+  dependencies:
+    tslib "2"
+
+"@formatjs/[email protected]":
+  version "2.9.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.9.8.tgz#118e7156f8a8db6b27b650f09334db21456c681f"
+  integrity sha512-hZlLNI3+Lev8IAXuwehLoN7QTKqbx3XXwFW1jh0AdIA9XJdzn9Uzr+2LLBspPm/PX0+NLIfykj/8IKxQqHUcUQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "2.3.2"
+    "@formatjs/icu-skeleton-parser" "1.8.12"
+    tslib "2"
+
+"@formatjs/[email protected]":
+  version "1.8.12"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.12.tgz#43076747cdbe0f23bfac2b2a956bd8219716680d"
+  integrity sha512-QRAY2jC1BomFQHYDMcZtClqHR55EEnB96V7Xbk/UiBodsuFc5kujybzt87+qj1KqmJozFhk6n4KiT1HKwAkcfg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "2.3.2"
+    tslib "2"
+
+"@formatjs/[email protected]", "@formatjs/intl-localematcher@^0.5.4":
+  version "0.5.10"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz#1e0bd3fc1332c1fe4540cfa28f07e9227b659a58"
+  integrity sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==
+  dependencies:
+    tslib "2"
+
 "@graphql-typed-document-node/core@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
@@ -4824,6 +4865,11 @@ decimal.js-light@^2.4.1:
   resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
   integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
 
+decimal.js@10:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
+  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
+
 decode-uri-component@^0.2.0, decode-uri-component@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
@@ -6104,6 +6150,16 @@ internmap@^1.0.0:
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
   integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
 
+intl-messageformat@^10.5.14:
+  version "10.7.11"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.7.11.tgz#f24893b2a64e7b5ec29f9eceb4f1a58bde1346e0"
+  integrity sha512-IB2N1tmI24k2EFH3PWjU7ivJsnWyLwOWOva0jnXFa29WzB6fb0JZ5EMQGu+XN5lDtjHYFo0/UooP67zBwUg7rQ==
+  dependencies:
+    "@formatjs/ecma402-abstract" "2.3.2"
+    "@formatjs/fast-memoize" "2.2.6"
+    "@formatjs/icu-messageformat-parser" "2.9.8"
+    tslib "2"
+
 invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -6905,6 +6961,20 @@ nanoid@^3.3.7:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
+negotiator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-1.0.0.tgz#b6c91bb47172d69f93cfd7c357bbb529019b5f6a"
+  integrity sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==
+
+next-intl@^3.26.3:
+  version "3.26.3"
+  resolved "https://registry.yarnpkg.com/next-intl/-/next-intl-3.26.3.tgz#4991ba09de7d09d8a3e1a75b2cdf28a9648a4b70"
+  integrity sha512-6Y97ODrDsEE1J8cXKMHwg1laLdtkN66QMIqG8BzH4zennJRUNTtM8UMtBDyhfmF6uiZ+xsbWLXmHUgmUymUsfQ==
+  dependencies:
+    "@formatjs/intl-localematcher" "^0.5.4"
+    negotiator "^1.0.0"
+    use-intl "^3.26.3"
+
 next-redux-wrapper@^7.0.5:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/next-redux-wrapper/-/next-redux-wrapper-7.0.5.tgz#109cd3fe02183b18fbd094924cfcbd21262039dc"
@@ -8679,6 +8749,11 @@ [email protected], tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@2:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 [email protected]:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
@@ -8870,6 +8945,14 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
+use-intl@^3.26.3:
+  version "3.26.3"
+  resolved "https://registry.yarnpkg.com/use-intl/-/use-intl-3.26.3.tgz#948c37388c1bfc894504f040930a32791b0158cf"
+  integrity sha512-yY0a2YseO17cKwHA9M6fcpiEJ2Uo81DEU0NOUxNTp6lJVNOuI6nULANPVVht6IFdrYFtlsMmMoc97+Eq9/Tnng==
+  dependencies:
+    "@formatjs/fast-memoize" "^2.2.0"
+    intl-messageformat "^10.5.14"
+
 use-sidecar@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"