chore: remove all translations code (#907)

* chore: remove all translations * chore: remove more things * chore: remove i18 * change yarn lock
lkim227 · May 1, 2023 · 60f77a6 · 60f77a6
1 parent b2b4b4b
commit 60f77a6
Show file tree

Hide file tree

Showing 36 changed files with 4,058 additions and 4,460 deletions.
diff --git a/package.json b/package.json
@@ -64,14 +64,12 @@
 		"eslint-config-react-app": "6",
 		"ethers": "^5.5.4",
 		"graphql": "^16.3.0",
-		"i18next": "^21.3.2",
 		"javascript-time-ago": "^2.3.11",
 		"ramda": "^0.27.1",
 		"react": "^17.0.2",
 		"react-cookie": "^4.1.1",
 		"react-dom": "^17.0.2",
 		"react-flow-renderer": "^10.3.1",
-		"react-i18next": "^11.18.1",
 		"react-loading-skeleton": "^3.1.0",
 		"react-modal": "3.12.1",
 		"react-popper": "^2.3.0",

diff --git a/src/components/banks/ApproveToken/index.tsx b/src/components/banks/ApproveToken/index.tsx
@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { Button } from 'components/common/Button';
 import { LoadingWrapper } from 'components/common/LoadingWrapper';
-import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 
 type Props = {
@@ -10,12 +9,10 @@ type Props = {
 };
 
 export const ApproveToken: FC<Props> = ({ isLoadingApprove, onApproveClick }) => {
-	const { t } = useTranslation();
-
 	return (
 		<div className={styles.approveToken}>
 			<LoadingWrapper isLoading={isLoadingApprove} classNameLoader={styles.loader} loadingType="spinner">
-				<Button className={styles.button} onClick={onApproveClick} label={t('give allowance')} />
+				<Button className={styles.button} onClick={onApproveClick} label={'give allowance'} />
 			</LoadingWrapper>
 		</div>
 	);

diff --git a/src/components/banks/Deposit/index.tsx b/src/components/banks/Deposit/index.tsx
@@ -5,7 +5,6 @@ import { ApproveToken } from 'components/banks/ApproveToken';
 import { LoadingWrapper } from 'components/common/LoadingWrapper';
 import { EtherscanLink } from 'components/banks/EtherScanLink';
 import { Button } from 'components/common/Button';
-import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 
 type Props = {
@@ -34,17 +33,14 @@ export const Deposit: FC<Props> = ({
 	error,
 }) => {
 	const needsUnlock = +vaultData.depositAmount > +bank.collateralToken.unlockedAmount && !localApproved;
-	const { t } = useTranslation();
 
 	return (
 		<>
 			<LoadingWrapper loadingType="spinner" isLoading={isLoadingSubmit} classNameLoader={styles.loader}>
 				<div className={styles.createVault_steps}>
 					<div className={styles.createVault_step}>
 						<p className={styles.text}>
-							{`${t('How much')} ${vaultData.collateralToken} ${t(
-								'do you want to lock up as collateral?',
-							)}`}
+							{`${'How much'} ${vaultData.collateralToken} ${'do you want to lock up as collateral?'}`}
 						</p>
 						<TextInput
 							name="depositAmount"
@@ -57,21 +53,16 @@ export const Deposit: FC<Props> = ({
 						{needsUnlock ? (
 							<>
 								<p className={styles.smalltxt}>
-									{t('Please give allowance for your collateral to continue.')}
+									{'Please give allowance for your collateral to continue.'}
 								</p>
 								<ApproveToken onApproveClick={onApproveClick} isLoadingApprove={isLoadingApprove} />
 							</>
 						) : null}
 					</div>
 					<div className={styles.createVault_submitter}>
-						<Button
-							className={styles.button}
-							disabled={needsUnlock}
-							onClick={onSubmit}
-							label={t('Submit')}
-						/>
+						<Button className={styles.button} disabled={needsUnlock} onClick={onSubmit} label={'Submit'} />
 						<p className={cx(styles.smalltxt, needsUnlock && styles.disabled)}>
-							{t('Upon submitting, 1 transactions will be initiated.')}
+							{'Upon submitting, 1 transactions will be initiated.'}
 						</p>
 					</div>
 				</div>

diff --git a/src/components/banks/EtherScanLink/index.tsx b/src/components/banks/EtherScanLink/index.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import cx from 'classnames';
-import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 
 type Props = {
@@ -26,12 +25,11 @@ export const EtherscanLink: FC<Props> = ({ path, hash, className }) => {
 			}
 		}
 	};
-	const { t } = useTranslation();
 
 	return (
 		<div className={cx(styles.etherscanLink, className)}>
 			<a href={`${uri()}${hash}`} target="_blank" rel="noopener noreferrer">
-				{t('view on Polygonscan')}
+				{'view on Polygonscan'}
 			</a>
 		</div>
 	);

diff --git a/src/components/banks/SignInButton/index.tsx b/src/components/banks/SignInButton/index.tsx
@@ -2,7 +2,6 @@ import React, { FC } from 'react';
 import cx from 'classnames';
 import { Button } from 'components/common/Button';
 import { FontIcon, FontIconName } from 'components/common/FontIcon';
-import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 
 type Props = {
@@ -11,12 +10,10 @@ type Props = {
 };
 
 export const SignInButton: FC<Props> = ({ className, onClick }) => {
-	const { t } = useTranslation();
-
 	return (
 		<Button className={cx(styles.button, className)} onClick={onClick} label="">
 			<FontIcon name={FontIconName.Login} size={16} />
-			{t('Sign in with Web3')}
+			{'Sign in with Web3'}
 		</Button>
 	);
 };
diff --git a/src/components/common/LoadingPopUp/index.tsx b/src/components/common/LoadingPopUp/index.tsx
@@ -1,22 +1,19 @@
 import React from 'react';
 import { FontIcon, FontIconName } from 'components/common/FontIcon';
-import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 
 export const LoadingPopUp = () => {
-	const { t } = useTranslation();
-
 	return (
 		<div className={styles.loading_wrap}>
 			<FontIcon className={styles.bankIcon} name={FontIconName.Bank} size={26} />
 
-			<h2 className={styles.header}>{t('Please hold on while we load your information.')}</h2>
+			<h2 className={styles.header}>{'Please hold on while we load your information.'}</h2>
 
 			<div className={styles.progress}>
 				<div className={styles.color} />
 			</div>
 
-			<h4 className={styles.header_second}>{t('This will only take a few moments')}</h4>
+			<h4 className={styles.header_second}>{'This will only take a few moments'}</h4>
 		</div>
 	);
 };
diff --git a/src/components/common/TextInput/index.tsx b/src/components/common/TextInput/index.tsx
@@ -1,6 +1,5 @@
 import React, { FC, HTMLProps } from 'react';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 import { TextInputWrap } from '../TextInputWrap';
 import ButtonNew from '../ButtonNew';
@@ -42,7 +41,6 @@ const TextInput: FC<TextInputProps> = ({
 	dontBlockChar = false,
 	...props
 }) => {
-	const { t } = useTranslation();
 	const blockInvalidChar = (e: any) => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault();
 	return (
 		<TextInputWrap error={hasError} className={containerClassName}>
@@ -68,7 +66,7 @@ const TextInput: FC<TextInputProps> = ({
 						onClick={onClickMax}
 						className={styles.max}
 					>
-						{t('Max')}
+						{'Max'}
 					</ButtonNew>
 				</div>
 			)}

diff --git a/src/components/common/WalletButton/index.tsx b/src/components/common/WalletButton/index.tsx
@@ -5,7 +5,6 @@ import { numFormatter } from 'utils/balances';
 import { useDispatch } from 'react-redux';
 import { connectWeb3Modal } from 'store/main/actionCreators';
 import useENS from 'hooks/useENS';
-import { useTranslation } from 'react-i18next';
 import styles from './styles.module.scss';
 
 interface IProps {
@@ -16,8 +15,7 @@ interface IProps {
 
 export const WalletButton: FC<IProps> = ({ ricBalance = '', account, mobile }) => {
 	const dispatch = useDispatch();
-	const { t } = useTranslation();
-	const preConnect = account === t('Connect Wallet');
+	const preConnect = account === 'Connect Wallet';
 	const [connecting, setConnecting] = useState(false);
 	const { ensName, ensAvatar } = useENS(account);
 	//this solution doesn't work properly, examples: if user has pop ups disabled

diff --git a/src/components/layout/CoinBalance/index.tsx b/src/components/layout/CoinBalance/index.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import ButtonNew from 'components/common/ButtonNew';
-import { useTranslation } from 'i18n';
 import { Coin, iconsCoin } from '../../../constants/coins';
 import styles from './styles.module.scss';
 
@@ -12,8 +11,6 @@ interface IProps {
 }
 
 export const CoinBalance: FC<IProps> = ({ nameCoin, balance, className, onClickMax }) => {
-	const { t } = useTranslation();
-
 	return (
 		<ButtonNew className={className}>
 			<div className={styles.container_balance}>
@@ -25,7 +22,7 @@ export const CoinBalance: FC<IProps> = ({ nameCoin, balance, className, onClickM
 						<div className={styles.name}>{nameCoin}</div>
 					</div>
 					<div className={styles.balance} onClick={onClickMax} aria-hidden="true">
-						<div className={styles.balance_name}>{t('Balance')}:</div>
+						<div className={styles.balance_name}>{'Balance'}:</div>
 						<div className={styles.balance_value_container}>
 							<div className={styles.balance_value}>{balance?.toFixed(2)}</div>
 						</div>

diff --git a/src/components/layout/CoinRateForm/index.tsx b/src/components/layout/CoinRateForm/index.tsx
@@ -1,6 +1,5 @@
 import { TextInput } from 'components/common/TextInput';
 import React, { ChangeEvent, FC } from 'react';
-import { useTranslation } from 'i18n';
 import ReactTooltip from 'react-tooltip';
 import ButtonNew from '../../common/ButtonNew';
 import { Coin } from '../../../constants/coins';
@@ -35,7 +34,6 @@ export const CoinRateForm: FC<IProps> = ({
 	indexVal,
 	coinBalanceA,
 }) => {
-	const { t } = useTranslation();
 	// Security Deposit is 4 hours worth of stream, so (4*60*60)/(30*24*60*60) = 1/180
 	return (
 		<div className={styles.input_container}>
@@ -61,7 +59,7 @@ export const CoinRateForm: FC<IProps> = ({
 							disabled={isReadOnly || isLoading}
 							isLoading={isLoading}
 						>
-							{t('Start')}/{t('Edit')}
+							{'Start'}/{'Edit'}
 						</ButtonNew>
 					</span>
 				</div>
@@ -75,7 +73,7 @@ export const CoinRateForm: FC<IProps> = ({
 							disabled={isReadOnly || isLoading}
 							isLoading={isLoading}
 						>
-							{t('Stop')}
+							{'Stop'}
 						</ButtonNew>
 					)}
 				</div>

diff --git a/src/components/layout/InvestNav/index.tsx b/src/components/layout/InvestNav/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { FontIcon, FontIconName } from 'components/common/FontIcon';
 import { NavLink } from 'react-router-dom';
 import { Routes } from 'constants/routes';
-import { useTranslation } from 'react-i18next';
+import currency from 'assets/images/coins/currency.svg';
 import { useShallowSelector } from 'hooks/useShallowSelector';
 import { selectUserStreams } from 'store/main/selectors';
 import gift from 'assets/images/gift.svg';
@@ -11,7 +11,6 @@ import { RICOCHET_LEGACY_LINK, SUPPORT, TUTORIAL_LINK } from 'utils/helpers';
 
 export const InvestNav = () => {
 	const userStreams = useShallowSelector(selectUserStreams);
-	const { t } = useTranslation();
 
 	return (
 		<div className={styles.nav_container}>
@@ -24,23 +23,23 @@ export const InvestNav = () => {
 						to={Routes.InvestStreams}
 					>
 						<FontIcon name={FontIconName.RicoUser} size={16} />
-						<div className={styles.nav_text}>{`${t('Active Streams')} (${userStreams.length})`} </div>
+						<div className={styles.nav_text}>{`${'Active Streams'} (${userStreams.length})`} </div>
 					</NavLink>
 				) : null}
 
 				<NavLink to={Routes.Wallet} className={styles.nav_link} activeClassName={styles.nav_link_active}>
 					<FontIcon name={FontIconName.Wallet} size={16} />
-					<div className={styles.nav_text}>{t('Wallet')}</div>
+					<div className={styles.nav_text}>{'Wallet'}</div>
 				</NavLink>
 
 				<NavLink className={styles.nav_link} exact activeClassName={styles.nav_link_active} to={Routes.Invest}>
 					<FontIcon name={FontIconName.Swap} size={16} />
-					<div className={styles.nav_text}>{t('Market')}</div>
+					<div className={styles.nav_text}>{'Market'}</div>
 				</NavLink>
 
 				<NavLink to={Routes.Swap} className={styles.nav_link} activeClassName={styles.nav_link_active}>
 					<FontIcon name={FontIconName.Loop} size={16} />
-					<div className={styles.nav_text}>{t('Swap')}</div>
+					<div className={styles.nav_text}>{'Swap'}</div>
 				</NavLink>
 
 				<NavLink to={Routes.Claim} className={styles.nav_link} activeClassName={styles.nav_link_active}>
@@ -51,16 +50,20 @@ export const InvestNav = () => {
 						height="16"
 						style={{ filter: 'invert(1)', marginRight: '3px' }}
 					/>
-					<div className={styles.nav_text}>{t('Gifts')}</div>
+					<div className={styles.nav_text}>{'Gifts'}</div>
 				</NavLink>
 
+				<NavLink className={styles.nav_link} activeClassName={styles.nav_link_active} to={Routes.Payments}>
+					<img src={currency} alt="currency" width="16" height="16" style={{ filter: 'invert(1)' }} />
+					<div className={styles.nav_text}>{'Payments'}</div>
+				</NavLink>
 				<NavLink
 					className={styles.nav_link}
 					activeClassName={styles.nav_link_active}
 					to={Routes.InvestLaunchpads}
 				>
 					<FontIcon name={FontIconName.Shuttle} size={16} />
-					<div className={styles.nav_text}>{t('Launchpad')}</div>
+					<div className={styles.nav_text}>{'Launchpad'}</div>
 				</NavLink>
 
 				<NavLink
@@ -70,25 +73,26 @@ export const InvestNav = () => {
 					activeClassName={styles.nav_link_active}
 				>
 					<FontIcon name={FontIconName.Activity} size={16} />
-					<div className={styles.nav_text}>{t('Activity')}</div>
+					<div className={styles.nav_text}>{'Activity'}</div>
 				</NavLink>
 
 				<NavLink to={Routes.Refer} className={styles.nav_link} activeClassName={styles.nav_link_active}>
 					<FontIcon name={FontIconName.Refer} size={16} />
-					<div className={styles.nav_text}>{t('Refer')}</div>
+					<div className={styles.nav_text}>{'Refer'}</div>
 				</NavLink>
 
 				<a href={SUPPORT} className={styles.nav_link} target="_blank" rel={'noreferrer'}>
-					<div className={styles.nav_text_tutorial}>{t('Support')}</div>
+					<div className={styles.nav_text_tutorial}>{'Support'}</div>
 					<FontIcon name={FontIconName.External} size={16} />
 				</a>
 
 				<a className={styles.nav_link} href={TUTORIAL_LINK} target="_blank" rel="noreferrer">
-					<div className={styles.nav_text_tutorial}>{t('Tutorial')}</div>
+					<div className={styles.nav_text_tutorial}>{'Tutorial'}</div>
 					<FontIcon name={FontIconName.External} size={16} />
 				</a>
+
 				<a href={RICOCHET_LEGACY_LINK} className={styles.nav_link} target="_blank" rel={'noreferrer'}>
-					<div className={styles.nav_text_tutorial}>{t('Ricochet V2')}</div>
+					<div className={styles.nav_text_tutorial}>{'Ricochet V2'}</div>
 					<FontIcon name={FontIconName.External} size={16} />
 				</a>
 			</div>