Merge branch 'i18n'

# Conflicts: # src/components/cards/StakingOpportunitesCard/FilteredTags/FilteredTags.tsx
concero · Nov 19, 2023 · bd17918 · bd17918
2 parents 991bef5 + b163366
commit bd17918
Show file tree

Hide file tree

Showing 70 changed files with 2,271 additions and 799 deletions.
diff --git a/package.json b/package.json
@@ -28,11 +28,13 @@
     "bignumber": "^1.1.0",
     "dayjs": "^1.11.10",
     "ethers": "^5.7.2",
+    "i18next": "^23.6.0",
     "lightweight-charts": "^4.0.1",
     "posthog-js": "^1.79.1",
     "rango-sdk": "^0.1.40",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^13.3.1",
     "react-router-dom": "^6.16.0",
     "react-ts-tradingview-widgets": "^1.2.0",
     "recharts": "^2.8.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,7 @@ import { DataProvider } from './hooks/DataContext/DataContext'
 import { lazy, useEffect } from 'react'
 import { bigNumberSettings } from './utils/bigNumberSettings'
 import { initPosthog } from './utils/initPosthog'
+import { I18Provider } from './i18n/I18nextProvider'
 
 const WalletConnectModal = lazy(() => import('./web3/WalletConnectModal').then(module => ({ default: module.WalletConnectModal })))
 
@@ -22,19 +23,21 @@ function App() {
 
 	return (
 		<PostHogProvider>
-			<DataProvider>
-				<SelectionProvider>
-					<ThemeProvider>
-						<NotificationsProvider>
-							<Notifications />
-							<WagmiConfig config={wagmiConfig}>
-								<Navigator />
-								<WalletConnectModal />
-							</WagmiConfig>
-						</NotificationsProvider>
-					</ThemeProvider>
-				</SelectionProvider>
-			</DataProvider>
+			<I18Provider>
+				<DataProvider>
+					<SelectionProvider>
+						<ThemeProvider>
+							<NotificationsProvider>
+								<Notifications />
+								<WagmiConfig config={wagmiConfig}>
+									<Navigator />
+									<WalletConnectModal />
+								</WagmiConfig>
+							</NotificationsProvider>
+						</ThemeProvider>
+					</SelectionProvider>
+				</DataProvider>
+			</I18Provider>
 		</PostHogProvider>
 	)
 }

diff --git a/src/assets/icons/burgerMenuIcon.svg b/src/assets/icons/burgerMenuIcon.svg
diff --git a/src/components/buttons/SwapButton/SwapButton.tsx b/src/components/buttons/SwapButton/SwapButton.tsx
@@ -4,10 +4,12 @@ import { Button } from '../Button/Button'
 import { SwapButtonProps } from './types'
 import { buttonStyleClass, buttonText, iconComponent, isButtonDisabled } from './constants'
 import { getButtonType } from './getButtonType'
+import { useTranslation } from 'react-i18next'
 
 export const SwapButton: FC<SwapButtonProps> = ({ swapState, isConnected, onClick }) => {
 	const { isLoading } = swapState
 	const buttonType = getButtonType(swapState, isConnected)
+	const { t } = useTranslation()
 
 	return (
 		<Button
@@ -18,7 +20,7 @@ export const SwapButton: FC<SwapButtonProps> = ({ swapState, isConnected, onClic
 			onClick={onClick}
 			className={`${classNames.swapButton} ${classNames[buttonStyleClass[buttonType]]}`}
 		>
-			{buttonText[buttonType]}
+			{t(buttonText[buttonType])}
 		</Button>
 	)
 }
diff --git a/src/components/buttons/SwapButton/constants.tsx b/src/components/buttons/SwapButton/constants.tsx
@@ -14,13 +14,13 @@ export enum ButtonType {
 
 export const buttonText: { [key in ButtonType]: string } = {
 	[ButtonType.LOADING]: '',
-	[ButtonType.SWAP]: 'Swap',
-	[ButtonType.ENTER_AMOUNT]: 'Enter amount to swap',
-	[ButtonType.LOW_BALANCE]: 'Insufficient balance',
-	[ButtonType.LOW_GAS]: 'Insufficient gas',
-	[ButtonType.LOW_FEES]: 'Insufficient fees',
-	[ButtonType.CONNECT_WALLET]: 'Connect wallet to swap',
-	[ButtonType.NO_ROUTES]: 'No routes found',
+	[ButtonType.SWAP]: 'button.swap',
+	[ButtonType.ENTER_AMOUNT]: 'button.enterAmountToSwap',
+	[ButtonType.LOW_BALANCE]: 'button.insufficientBalance',
+	[ButtonType.LOW_GAS]: 'button.insufficientGas',
+	[ButtonType.LOW_FEES]: 'button.insufficientFees',
+	[ButtonType.CONNECT_WALLET]: 'button.connectWalletToSwap',
+	[ButtonType.NO_ROUTES]: 'button.noRoutesFound',
 }
 
 export const isButtonDisabled: { [key in ButtonType]: boolean } = {

diff --git a/src/components/cards/Card/ErrorCard.tsx b/src/components/cards/Card/ErrorCard.tsx
@@ -2,13 +2,16 @@ import { Reload } from '@tabler/icons-react'
 import classNames from './ErrorCard.module.pcss'
 import { Button } from '../../buttons/Button/Button'
 import { colors } from '../../../constants/colors'
+import {useTranslation} from "react-i18next";
 
 export function ErrorCard({ setIsOk }) {
+  const  {t} = useTranslation()
+}
   return (
     <div className={classNames.container} >
-      <h4 className={classNames.headerTitle}>Couldn’t load data.</h4>
+      <h4 className={classNames.headerTitle}>{t('utils.couldNotLoadData')}</h4>
       <Button variant='black' size='sm' leftIcon={<Reload size={16} color={'var(--color-text-secondary)'} />} onClick={() => setIsOk(true)}>
-        <p className="body1">Retry<p>
+        <p className="body1">{t('utils.retry')}<p>
       </Button>
     </div>
   )}
diff --git a/src/components/cards/ChartCard/ChartCard.tsx b/src/components/cards/ChartCard/ChartCard.tsx
@@ -17,6 +17,7 @@ import { Card } from '../Card/Card'
 import { DataContext } from '../../../hooks/DataContext/DataContext'
 import { ListModal } from '../../modals/ListModal/ListModal'
 import { ListEntityButton } from '../../buttons/ListEntityButton/ListEntityButton'
+import { useTranslation } from 'react-i18next'
 import { useTracking } from '../../../hooks/useTracking'
 
 export interface ChartCardProps {}
@@ -31,13 +32,14 @@ export const ChartCard: FC<ChartCardProps> = () => {
 	const { trackEvent } = useTracking()
 	const [{ chartType, token, interval, chartData }, dispatch] = useChartReducer(selection.swapCard)
 	const { addNotification } = useContext(NotificationsContext)
-
 	const isMobile = useMediaQuery('mobile')
+	const { t } = useTranslation()
 
 	const setData = (data: any[]) => dispatch({ type: 'SET_CHART_DATA', payload: data })
 
 	useEffect(() => {
 		fetchChartData(setData, addNotification, token.base.coinGeckoId, interval)
+
 		const intervalId = setInterval(() => {
 			fetchChartData(setData, addNotification, token.base.coinGeckoId, interval)
 		}, 15000)
@@ -81,20 +83,14 @@ export const ChartCard: FC<ChartCardProps> = () => {
 		<Card className={classNames.container}>
 			<div className={classNames.headerContainer}>
 				<div className={classNames.selectChainContainer}>
-					<h5 className="cardHeaderTitle">Chart</h5>
+					<h5 className="cardHeaderTitle">{t('chartCard.title')}</h5>
 					<Button variant="black" size="sm" onClick={() => dispatch({ type: 'TOGGLE_MODAL_VISIBLE', tokenType: 'base' })}>
 						<CryptoSymbol src={token.base.logoURI} symbol={token.base.symbol} />
 					</Button>
 					{!isMobile ? (
-						<Button
-							variant="black"
-							size="sm"
-							onClick={() => {
-								dispatch({ type: 'TOGGLE_CHART_TYPE' })
-							}}
-						>
+						<Button variant="black" size="sm" onClick={() => dispatch({ type: 'TOGGLE_CHART_TYPE' })}>
 							<Beacon isOn={chartType === 'tradingView'} />
-							<p className="body1">TradingView</p>
+							<p className="body1">{t('chartCard.tradingView')}</p>
 						</Button>
 					) : null}
 				</div>
@@ -119,7 +115,7 @@ export const ChartCard: FC<ChartCardProps> = () => {
 				)}
 			</div>
 			<ListModal
-				title="Select token"
+				title={t('modal.selectToken')}
 				isOpen={token.base.modalVisible}
 				setIsOpen={setIsOpenCallback}
 				onSelect={handleSelectCallback}

diff --git a/src/components/cards/NewsCard/NewsCard.tsx b/src/components/cards/NewsCard/NewsCard.tsx
@@ -13,6 +13,7 @@ import { DataContextValue } from '../../../hooks/DataContext/types'
 import { Button } from '../../buttons/Button/Button'
 import { CardHeader } from '../CardHeader/CardHeader'
 import { CryptoSymbol } from '../../tags/CryptoSymbol/CryptoSymbol'
+import { useTranslation } from 'react-i18next'
 import { action, category } from '../../../constants/tracking'
 import { useTracking } from '../../../hooks/useTracking'
 
@@ -23,6 +24,8 @@ export const NewsCard: FC<NewsCardProps> = () => {
 	const { getTokens } = useContext<DataContextValue>(DataContext)
 	const { addNotification } = useContext(NotificationsContext)
 	const [{ data, isLoading, timestamp, isModalVisible, selectedToken }, dispatch] = useNewsReducer(selection)
+	const { t } = useTranslation()
+
 	const { trackEvent } = useTracking()
 	useEffect(() => {
 		if (!selectedToken) return
@@ -48,7 +51,7 @@ export const NewsCard: FC<NewsCardProps> = () => {
 	return (
 		<>
 			<div className={classNames.container}>
-				<CardHeader title="News">
+				<CardHeader title={t('newsCard.title')}>
 					<Button variant="black" size="sm" onClick={handleShowModal}>
 						<CryptoSymbol src={selectedToken.logoURI} symbol={selectedToken.symbol} />
 					</Button>
@@ -65,7 +68,7 @@ export const NewsCard: FC<NewsCardProps> = () => {
 				/>
 			</div>
 			<ListModal
-				title="Select token"
+				title={t('modal.selectToken')}
 				isOpen={isModalVisible}
 				setIsOpen={value => dispatch({ type: 'SET_MODAL_VISIBILITY', payload: value })}
 				onSelect={token => handleSelectToken(token)}

diff --git a/src/components/cards/ProtocolCard/ProtocolCard.tsx b/src/components/cards/ProtocolCard/ProtocolCard.tsx
@@ -8,6 +8,7 @@ import { StakingState } from '../../screens/StakingScreen/stakingReducer/types'
 import { ProtocolModal } from './ProtocolModal/ProtocolModal'
 import { getProtocolData } from './getProtocolData'
 import { Protocol } from './types'
+import { useTranslation } from 'react-i18next'
 import { trackEvent } from '../../../hooks/useTracking'
 import { action, category } from '../../../constants/tracking'
 
@@ -19,6 +20,7 @@ export function ProtocolCard({ stakingState }: ProtocolCardProps) {
 	const [isOpened, setIsOpened] = useState(false)
 	const [protocolData, setProtocolData] = useState<Protocol | null>(null)
 	const { selectedVault } = stakingState
+	const { t } = useTranslation()
 
 	function handleOpenProtocolModal() {
 		setIsOpened(true)
@@ -35,8 +37,8 @@ export function ProtocolCard({ stakingState }: ProtocolCardProps) {
 
 	return (
 		<div>
-			<CardHeader title="Protocol" />
-			<Button variant="subtle" onClick={handleOpenProtocolModal}>
+			<CardHeader title={t('stakingDetailsCard.protocol')} />
+			<Button variant="subtle" onClick={() => setIsOpened(true)}>
 				<div className={classNames.cardContainer}>
 					<div className={classNames.avatarContainer}>
 						<Avatar src={selectedVault?.project?.logoURI ?? null} />

diff --git a/src/components/cards/ProtocolCard/ProtocolModal/ProtocolModal.tsx b/src/components/cards/ProtocolCard/ProtocolModal/ProtocolModal.tsx
@@ -8,6 +8,7 @@ import { Tag } from '../../../tags/Tag/Tag'
 import { colors } from '../../../../constants/colors'
 import { formatNumber } from '../../../../utils/formatting'
 import { copyToClipboard } from '../../../../utils/copyToClipboard'
+import { useTranslation } from 'react-i18next'
 
 interface ProtocolModalProps {
 	show: boolean
@@ -30,64 +31,28 @@ function ChangeTag({ change, period }: { change: number; period: string }) {
 	)
 }
 
-export function ProtocolModal({ show, setShow, protocol }: ProtocolModalProps) {
-	if (!protocol) return null
-	const { name, symbol, address, category, description, url, dailyFees, totalAllTime, dailySupplySideRevenue, audit_links, logoURI } = protocol
-
-	return (
-		<Modal show={show} setShow={setShow} title="Protocol">
-			<div className={classNames.container}>
-				<div className={classNames.headerContainer}>
-					<Avatar src={logoURI ?? null} size="lg" />
-					<div>
-						<div className={classNames.titleContainer}>
-							<h4>{name}</h4>
-							<p className="body1">{symbol}</p>
-						</div>
-						<p className="body1">{description}</p>
-					</div>
-				</div>
-				<div className={classNames.tagsContainer}>
-					{category && <CategoryTag category={category} />}
-					{address && (
-						<Tag color="grey" leftIcon={<IconCopy color={'var(--color-text-secondary)'} size={16} />} onClick={() => copyToClipboard(address)}>
-							<p className="body1">Contract address</p>
-						</Tag>
-					)}
-					{url && (
-						<Tag color="grey" leftIcon={<IconExternalLink color={'var(--color-text-secondary)'} size={16} />} onClick={() => window.open(url, '_blank')}>
-							<p className="body1">Website</p>
-						</Tag>
-					)}
-				</div>
-				{totalAllTime && <TransactionTotal protocol={protocol} />}
-				{dailySupplySideRevenue && dailyFees && <DailyInfo protocol={protocol} />}
-				{audit_links.length > 0 && <AuditLinks auditLinks={audit_links} />}
-			</div>
-		</Modal>
-	)
-}
-
 function TransactionTotal({ protocol }: { protocol: Protocol }) {
+	const { t } = useTranslation()
 	return (
 		<div className={`card ${classNames.totalContainer} ${classNames.cardContainer}`}>
 			<div className={classNames.priceContainer}>
-				<h4 className="body1">Transactions total</h4>
+				<h4 className="body1">{t('protocolModal.transactionsTotal')}</h4>
 				<h3>${formatNumber(protocol.totalAllTime)}</h3>
 			</div>
 			<div className={classNames.rowContainer}>
-				<ChangeTag change={protocol.change_7d} period="This week" />
-				<ChangeTag change={protocol.change_1m} period="This month" />
+				<ChangeTag change={protocol.change_7d} period={t('protocolModal.thisWeek')} />
+				<ChangeTag change={protocol.change_1m} period={t('protocolModal.thisMonth')} />
 			</div>
 		</div>
 	)
 }
 
 function DailyInfo({ protocol }: { protocol: Protocol }) {
+	const { t } = useTranslation()
 	return (
 		<div className={classNames.dailyContainer}>
-			<InfoCard title="Daily fees" value={formatNumber(protocol.dailyFees)} />
-			<InfoCard title="Daily supply revenue" value={formatNumber(protocol.dailySupplySideRevenue)} />
+			<InfoCard title={t('protocolModal.dailyFees')} value={formatNumber(protocol.dailyFees)} />
+			<InfoCard title={t('protocolModal.dailySupplyRevenue')} value={formatNumber(protocol.dailySupplySideRevenue)} />
 		</div>
 	)
 }
@@ -102,9 +67,11 @@ function InfoCard({ title, value }: { title: string; value: string }) {
 }
 
 function AuditLinks({ auditLinks }: { auditLinks: string[] }) {
+	const { t } = useTranslation()
+
 	return (
 		<div className={`card ${classNames.cardContainer}`}>
-			<p className="body1">Audits</p>
+			<p className="body1">{t('protocolModal.audits')}</p>
 			<div className={classNames.tagsContainer}>
 				{auditLinks.map((link, index) => (
 					<Tag key={index} color="grey" leftIcon={<IconExternalLink color={'var(--color-text-secondary)'} size={16} />} onClick={() => window.open(link, '_blank')}>
@@ -115,3 +82,42 @@ function AuditLinks({ auditLinks }: { auditLinks: string[] }) {
 		</div>
 	)
 }
+
+export function ProtocolModal({ show, setShow, protocol }: ProtocolModalProps) {
+	if (!protocol) return null
+	const { name, symbol, address, category, description, url, dailyFees, totalAllTime, dailySupplySideRevenue, audit_links, logoURI } = protocol
+	const { t } = useTranslation()
+
+	return (
+		<Modal show={show} setShow={setShow} title={t('protocolModal.title')}>
+			<div className={classNames.container}>
+				<div className={classNames.headerContainer}>
+					<Avatar src={logoURI ?? null} size="lg" />
+					<div>
+						<div className={classNames.titleContainer}>
+							<h4>{name}</h4>
+							<p className="body1">{symbol}</p>
+						</div>
+						<p className="body1">{description}</p>
+					</div>
+				</div>
+				<div className={classNames.tagsContainer}>
+					{category && <CategoryTag category={category} />}
+					{address && (
+						<Tag color="grey" leftIcon={<IconCopy color={'var(--color-text-secondary)'} size={16} />} onClick={() => copyToClipboard(address)}>
+							<p className="body1">{t('protocolModal.contractAddress')}</p>
+						</Tag>
+					)}
+					{url && (
+						<Tag color="grey" leftIcon={<IconExternalLink color={'var(--color-text-secondary)'} size={16} />} onClick={() => window.open(url, '_blank')}>
+							<p className="body1">{t('protocolModal.website')}</p>
+						</Tag>
+					)}
+				</div>
+				{totalAllTime && <TransactionTotal protocol={protocol} />}
+				{dailySupplySideRevenue && dailyFees && <DailyInfo protocol={protocol} />}
+				{audit_links.length > 0 && <AuditLinks auditLinks={audit_links} />}
+			</div>
+		</Modal>
+	)
+}