[SLT-145] feat(synapse-interface): Adds internationalization (#3096)

* Adds next-intl * /messages folder to hold translations * getStaticProps across pages to fetch locales * Adds LanguageSelector * TranslatedText component for toast helper utils * Persists language in local storage --------- Co-authored-by: Moses <[email protected]>
synapsecns · Sep 10, 2024 · 0cce247 · 0cce247
1 parent c5ad9f9
commit 0cce247
Show file tree

Hide file tree

Showing 115 changed files with 4,220 additions and 2,187 deletions.
diff --git a/packages/synapse-interface/.eslintrc-i18n.js b/packages/synapse-interface/.eslintrc-i18n.js
@@ -0,0 +1,43 @@
+const { ignorePatterns } = require('./.eslintrc')
+
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['i18next'],
+  ignorePatterns: [
+    'pages/lifi/index.tsx',
+    'components/Maintenance/example/EcotoneForkUpgrade.tsx',
+    'pages/_app.tsx',
+  ],
+  rules: {
+    // Enable the i18next rule
+    'i18next/no-literal-string': 'error',
+
+    // Disable unrelated rules
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    'prefer-arrow/prefer-arrow-functions': 'off',
+    'import/order': 'off',
+    'prefer-const': 'off',
+    'jsdoc/newline-after-description': 'off',
+    'no-duplicate-imports': 'off',
+    eqeqeq: 'off',
+    'no-return-await': 'off',
+    'object-shorthand': 'off',
+    'prettier/prettier': 'off',
+    'no-redeclare': 'off',
+    radix: 'off',
+    'jsdoc/check-alignment': 'off',
+    'no-undef-init': 'off',
+  },
+  // Ignore all other plugins and extends
+  extends: [],
+}
diff --git a/packages/synapse-interface/README.md b/packages/synapse-interface/README.md
@@ -64,31 +64,31 @@ This guide explains how to use the Maintenance feature to pause a chain or bridg
 ## How it works
 
 There are a few maintenance components implemented around the Synapse Interface Webapp:
+
 1. Banner - located at the top of the page.
 2. Countdown Progress Bar - located at the top of Bridge / Swap cards.
 3. Warning Message - located below the input UI in Bridge / Swap cards.
 
 NOTE: Currently, the Synapse Widget implements the Countdown Progress Bar and Warning Message displayed in the Bridge Widget, but not the Banner.
 
 These components ingest data fetched from the following JSON files:
+
 - [Pause Chains JSON](https://github.com/synapsecns/sanguine/blob/master/packages/synapse-interface/public/pauses/v1/paused-chains.json)
 - [Pause Bridge Modules JSON](https://github.com/synapsecns/sanguine/blob/master/packages/synapse-interface/public/pauses/v1/paused-bridge-modules.json)
 
-
 To control when the Banner, Countdown Progress Bar, and Warning Message components are displayed, update the [Pause Chains JSON](https://github.com/synapsecns/sanguine/blob/master/packages/synapse-interface/public/pauses/v1/paused-chains.json).
 
 To specify which bridge modules (SynapseRFQ, SynapseBridge, or SynapseCCTP) are paused, update the [Pause Bridge Modules JSON](https://github.com/synapsecns/sanguine/blob/master/packages/synapse-interface/public/pauses/v1/paused-bridge-modules.json).
 
-
 After updating the proper JSON files, the following steps must be taken to ensure the production webapp reflects the changes made:
+
 1. Merge the new branch into `master`
 2. Merge `master` branch into `fe-release` branch
 
 After Step 1 is completed, the [Github Pages](https://github.com/synapsecns/sanguine/deployments/github-pages) must finish building for the respective branch to take effect on the production webapp.
 
 Although completing Step 1 will already reflect changes in the webapp, Step 2 is required in the slim chance that the github API is down, so that the production webapp can use the local JSON files as a reliable backup data source.
 
-
 ## Chain Pause
 
 You can pause the Bridge and Swap functionalities on specific chains using their chainIds. Pauses can be applied independently to Bridge or Swap functions, or to both simultaneously.
@@ -97,7 +97,6 @@ For Bridge functionality, you can specify the origin and destination chainIds to
 
 Additionally, you can control which components are displayed during the pause event.
 
-
 ### Chain Pause Props
 
 `id`
@@ -145,77 +144,76 @@ Boolean indicating whether to hide Warning Message in Bridge or Swap card.
 `disableCountdown`
 Boolean indicating whether to hide Countdown Progress Bar.
 
-
 ### Example
 
 `paused-chains.json`
-```tsx
-  [
-    // Bridge Pause
-    {
-      "id": "base-chain-pause",
-      "pausedFromChains": [8453],
-      "pausedToChains": [8453],
-      "pauseBridge": true,
-      "pauseSwap": false,
-      "startTimePauseChain": "2024-04-12T17:41:00Z",
-      "endTimePauseChain": null,
-      "startTimeBanner": "2024-04-12T04:40:00Z",
-      "endTimeBanner": null,
-      "inputWarningMessage": "Base bridging is paused until maintenance is complete.",
-      "bannerMessage": "Base bridging is paused until maintenance is complete.",
-      "progressBarMessage": "Base maintenance in progress",
-      "disableBanner": false,
-      "disableWarning": false,
-      "disableCountdown": false
-    },
-    {
-      "id": "ecotone-fork-pause",
-      "pausedFromChains": [10, 8453],
-      "pausedToChains": [10, 8453],
-      "pauseBridge": true,
-      "pauseSwap": false,
-      "startTimePauseChain": "2024-03-13T23:35:00Z",
-      "endTimePauseChain": "2024-03-14T00:25:00Z",
-      "startTimeBanner": "2024-03-13T23:20:00Z",
-      "endTimeBanner": "2024-03-14T00:25:00Z",
-      "inputWarningMessage": "",
-      "bannerMessage": "Optimism + Base Bridging will be paused 10 minutes ahead of Ecotone (March 14 00:00 UTC, 20:00 EST). Will be back online shortly following the network upgrade.",
-      "progressBarMessage": "Ecotone Fork maintenance in progress",
-      "disableBanner": false,
-      "disableWarning": true,
-      "disableCountdown": false
-    },
-    // Swap Pause
-    {
-      "id": "arbitrum-swap-pause",
-      "pausedFromChains": [42161],
-      "pausedToChains": [42161],
-      "pauseBridge": false,
-      "pauseSwap": true,
-      "startTimePauseChain": "2024-03-13T23:35:00Z",
-      "endTimePauseChain": "2024-03-14T00:25:00Z",
-      "startTimeBanner": "2024-03-13T23:20:00Z",
-      "endTimeBanner": "2024-03-14T00:25:00Z",
-      "inputWarningMessage": "Swapping on Arbitrum is paused until maintenance is complete.",
-      "bannerMessage": "Swapping on Arbitrum is paused until maintenance is complete.",
-      "progressBarMessage": "Arbitrum maintenance in progress",
-      "disableBanner": false,
-      "disableWarning": false,
-      "disableCountdown": false
-    }
-  ]
-```
 
+```json
+[
+  // Bridge Pause
+  {
+    "id": "base-chain-pause",
+    "pausedFromChains": [8453],
+    "pausedToChains": [8453],
+    "pauseBridge": true,
+    "pauseSwap": false,
+    "startTimePauseChain": "2024-04-12T17:41:00Z",
+    "endTimePauseChain": null,
+    "startTimeBanner": "2024-04-12T04:40:00Z",
+    "endTimeBanner": null,
+    "inputWarningMessage": "Base bridging is paused until maintenance is complete.",
+    "bannerMessage": "Base bridging is paused until maintenance is complete.",
+    "progressBarMessage": "Base maintenance in progress",
+    "disableBanner": false,
+    "disableWarning": false,
+    "disableCountdown": false
+  },
+  {
+    "id": "ecotone-fork-pause",
+    "pausedFromChains": [10, 8453],
+    "pausedToChains": [10, 8453],
+    "pauseBridge": true,
+    "pauseSwap": false,
+    "startTimePauseChain": "2024-03-13T23:35:00Z",
+    "endTimePauseChain": "2024-03-14T00:25:00Z",
+    "startTimeBanner": "2024-03-13T23:20:00Z",
+    "endTimeBanner": "2024-03-14T00:25:00Z",
+    "inputWarningMessage": "",
+    "bannerMessage": "Optimism + Base Bridging will be paused 10 minutes ahead of Ecotone (March 14 00:00 UTC, 20:00 EST). Will be back online shortly following the network upgrade.",
+    "progressBarMessage": "Ecotone Fork maintenance in progress",
+    "disableBanner": false,
+    "disableWarning": true,
+    "disableCountdown": false
+  },
+  // Swap Pause
+  {
+    "id": "arbitrum-swap-pause",
+    "pausedFromChains": [42161],
+    "pausedToChains": [42161],
+    "pauseBridge": false,
+    "pauseSwap": true,
+    "startTimePauseChain": "2024-03-13T23:35:00Z",
+    "endTimePauseChain": "2024-03-14T00:25:00Z",
+    "startTimeBanner": "2024-03-13T23:20:00Z",
+    "endTimeBanner": "2024-03-14T00:25:00Z",
+    "inputWarningMessage": "Swapping on Arbitrum is paused until maintenance is complete.",
+    "bannerMessage": "Swapping on Arbitrum is paused until maintenance is complete.",
+    "progressBarMessage": "Arbitrum maintenance in progress",
+    "disableBanner": false,
+    "disableWarning": false,
+    "disableCountdown": false
+  }
+]
+```
 
 ## Bridge Module Pause
 
 You can pause a specific bridge module on a given chain. Currently, there are the following bridge modules:
+
 - SynapseRFQ
 - SynapseCCTP
 - SynapseBridge
 
-
 ### Bridge Module Pause Props
 
 `chainId`
@@ -224,27 +222,33 @@ Chain ID of Chain to pause specific bridge module.
 `bridgeModuleName`
 Accepts 'SynapseRFQ', 'SynapseBridge', 'SynapseCCTP', or 'ALL'. If selecting 'ALL', all bridge modules will be paused for respective chainId.
 
-
 ### Example
 
 `paused-bridge-modules.json`
-```tsx
-  [
-    {
-      "chainId": 42161,
-      "bridgeModuleName": "ALL"
-    },
-    {
-      "chainId": 10,
-      "bridgeModuleName": "SynapseRFQ"
-    },
-    {
-      "chainId": 10,
-      "bridgeModuleName": "SynapseCCTP"
-    },
-    {
-      "chainId": 8453,
-      "bridgeModuleName": "SynapseBridge"
-    }
-  ]
+
+```json
+[
+  {
+    "chainId": 42161,
+    "bridgeModuleName": "ALL"
+  },
+  {
+    "chainId": 10,
+    "bridgeModuleName": "SynapseRFQ"
+  },
+  {
+    "chainId": 10,
+    "bridgeModuleName": "SynapseCCTP"
+  },
+  {
+    "chainId": 8453,
+    "bridgeModuleName": "SynapseBridge"
+  }
+]
 ```
+
+## Adding a New Language
+
+1. Add the new locale code to `next.config.js`.
+2. Include the new locale in the `LanguageSelector`.
+3. Populate `/messages/{locale.json}` translations for the new locale. The keys in this should match `en-US.json`. See some of the other language files for reference.
diff --git a/packages/synapse-interface/components/Activity/Activity.tsx b/packages/synapse-interface/components/Activity/Activity.tsx
@@ -3,6 +3,8 @@ import _ from 'lodash'
 import Fuse from 'fuse.js'
 import { useAccount } from 'wagmi'
 import { type Address } from 'viem'
+import { useTranslations } from 'next-intl'
+
 import { type Chain } from '@/utils/types'
 import { useTransactionsState } from '@/slices/transactions/hooks'
 import { usePortfolioState } from '@/slices/portfolio/hooks'
@@ -50,30 +52,32 @@ export const Activity = ({ visibility }: { visibility: boolean }) => {
     } else return null
   }, [isMasqueradeActive, masqueradeAddress, address])
 
+  const t = useTranslations('Activity')
+
   return (
     <div
       data-test-id="activity"
       className={`${visibility ? 'block' : 'hidden'}`}
     >
       {!viewingAddress && (
         <div className="text-secondary">
-          Your pending and recent transactions will appear here.
+          {t('Your pending and recent transactions will appear here')}
         </div>
       )}
 
       {viewingAddress && isLoading && (
-        <div className="text-secondary">Loading activity...</div>
+        <div className="text-secondary">{t('Loading activity')}...</div>
       )}
 
       {viewingAddress && !isLoading && !hasHistoricalTransactions && (
         <div className="text-secondary">
-          No transactions in last 30 days.
+          {t('No transactions in last 30 days.')}
           <UserExplorerLink connectedAddress={viewingAddress} />
         </div>
       )}
 
       {viewingAddress && !isLoading && hasHistoricalTransactions && (
-        <ActivitySection title="Recent">
+        <ActivitySection title={t('Recent')}>
           {userHistoricalTransactions &&
             filteredHistoricalTransactions
               .slice(0, isSearchInputActive ? 100 : 6)

diff --git a/packages/synapse-interface/components/Activity/Transaction/components/Completed.tsx b/packages/synapse-interface/components/Activity/Transaction/components/Completed.tsx
@@ -1,4 +1,6 @@
 import { Address } from 'viem'
+import { useTranslations } from 'next-intl'
+
 import { shortenAddress } from '@/utils/shortenAddress'
 import { convertUnixTimestampToMonthAndDate } from '@/utils/time'
 import { isTimestampToday } from '@/utils/time'
@@ -26,6 +28,8 @@ export const Completed = ({
 
   const isDestinationValid: boolean = isValidAddress(destinationAddress)
 
+  const t = useTranslations('Completed')
+
   return (
     <div
       data-test-id="completed"
@@ -40,12 +44,14 @@ export const Completed = ({
         `}
     >
       {isDestinationValid && !isDestinationSender && (
-        <div>to {shortenAddress(destinationAddress)} </div>
+        <div>
+          {t('to')} {shortenAddress(destinationAddress)}{' '}
+        </div>
       )}
       {isToday ? (
-        <div>Today</div>
+        <div>{t('Today')}</div>
       ) : (
-        <div>{formattedTime ? formattedTime : 'Completed'}</div>
+        <div>{formattedTime ? formattedTime : t('Completed')}</div>
       )}
     </div>
   )

diff --git a/packages/synapse-interface/components/Activity/Transaction/components/EstimatedDuration.tsx b/packages/synapse-interface/components/Activity/Transaction/components/EstimatedDuration.tsx
@@ -1,4 +1,6 @@
 import React from 'react'
+import { useTranslations } from 'next-intl'
+
 import { TransactionStatus } from '../Transaction'
 import ProcessingIcon from '@/components/icons/ProcessingIcon'
 
@@ -9,6 +11,8 @@ export const EstimatedDuration = ({
   timeRemaining: number
   transactionStatus: TransactionStatus
 }) => {
+  const t = useTranslations('Time')
+
   return (
     <div
       data-test-id="estimated-duration"
@@ -17,15 +21,15 @@ export const EstimatedDuration = ({
       {timeRemaining >= 0 ? (
         <React.Fragment>
           <div>
-            {timeRemaining} - {timeRemaining + 1} min
+            {timeRemaining} - {timeRemaining + 1} {t('min')}
           </div>
           {transactionStatus !== TransactionStatus.PENDING_WALLET_ACTION && (
             <ProcessingIcon className="fill-[#343036] mt-0.5" />
           )}
         </React.Fragment>
       ) : (
         <React.Fragment>
-          <div>Waiting... </div>
+          <div>{t('Waiting')}... </div>
           <ProcessingIcon className="fill-[#343036] mt-0.5" />
         </React.Fragment>
       )}