refactor: useTranslation hooks (#162)

src/components/Containers/Footer/Footer.js

@@ -2,11 +2,11 @@ import React from 'react';
 import useBreakpoint from 'use-breakpoint';
 
 import {Breakpoint, isMobile} from '../../../enums';
-import {useTranslation} from '../../../hooks';
+import {useFooterTranslation} from '../../../hooks';
 import styles from './Footer.module.scss';
 
 export const Footer = () => {
-  const {rightsTxt} = useTranslation('containers.footer');
+  const {rightsTxt} = useFooterTranslation();
   const {breakpoint} = useBreakpoint(Breakpoint);
 
   return !isMobile(breakpoint) ? (

src/components/Containers/Header/Header.js

@@ -5,7 +5,7 @@ import useBreakpoint from 'use-breakpoint';
 import {TrackEvent} from '../../../analytics';
 import {ReactComponent as StarkGateLogo} from '../../../assets/img/starkgate.svg';
 import {Breakpoint} from '../../../enums';
-import {useColors, useConstants, useEnvs, useTracking, useTranslation} from '../../../hooks';
+import {useColors, useConstants, useEnvs, useTracking, useHeaderTranslation} from '../../../hooks';
 import {useLogin} from '../../../providers/AppProvider';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
@@ -18,7 +18,7 @@ export const Header = () => {
   const {DISCORD_LINK_URL} = useConstants();
   const [trackDiscordClick] = useTracking(TrackEvent.DISCORD_TAB_CLICK);
   const {env} = useEnvs();
-  const {tabDiscordTxt, tabFaqTxt, tabTermsTxt, chainTxt} = useTranslation('containers.header');
+  const {tabDiscordTxt, tabFaqTxt, tabTermsTxt, chainTxt} = useHeaderTranslation();
   const navigate = useNavigate();
   const {pathname} = useLocation();
   const {showAccountMenu, showTransferMenu} = useMenu();

src/components/Features/Account/Account.js

@@ -6,7 +6,7 @@ import {
   useCompleteTransferToL1,
   useConstants,
   useEnvs,
-  useTranslation
+  useAccountTranslation
 } from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useTransfer} from '../../../providers/TransferProvider';
@@ -25,7 +25,7 @@ import {LinkButton} from '../../UI/LinkButton/LinkButton';
 import {TransferLog} from '../TransferLog/TransferLog';
 
 export const Account = ({transferId}) => {
-  const {titleTxt} = useTranslation('menus.account');
+  const {titleTxt} = useAccountTranslation();
   const [
     trackTxLinkClick,
     trackAccountLinkClick,

src/components/Features/SelectToken/SelectToken.js

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
 
 import L1Logo from '../../../assets/svg/tokens/eth.svg';
 import L2Logo from '../../../assets/svg/tokens/starknet.svg';
-import {useColors, useTranslation, useSelectTokenTracking} from '../../../hooks';
+import {useColors, useSelectTokenTranslation, useSelectTokenTracking} from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useTokens} from '../../../providers/TokensProvider';
 import {useTransfer} from '../../../providers/TransferProvider';
@@ -11,7 +11,7 @@ import styles from './SelectToken.module.scss';
 
 export const SelectToken = () => {
   const [trackSelectToken] = useSelectTokenTracking();
-  const {titleTxt} = useTranslation('menus.selectToken');
+  const {titleTxt} = useSelectTokenTranslation();
   const {tokens, updateTokenBalance} = useTokens();
   const {colorBeta} = useColors();
   const {showTransferMenu} = useMenu();

src/components/Features/ToastProvider/ToastProvider.js

@@ -14,7 +14,7 @@ import {
   NetworkType,
   ToastType
 } from '../../../enums';
-import {useCompleteTransferToL1, usePrevious, useTranslation} from '../../../hooks';
+import {useCompleteTransferToL1, usePrevious, useToastsTranslation} from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useIsL1, useIsL2} from '../../../providers/TransferProvider';
 import {useTransfersLog} from '../../../providers/TransfersLogProvider';
@@ -26,7 +26,7 @@ const toastsMap = {};
 const toastsDismissed = {};
 
 export const ToastProvider = () => {
-  const {alphaDisclaimerMsg} = useTranslation('toasts');
+  const {alphaDisclaimerMsg} = useToastsTranslation();
   const {transfers} = useTransfersLog();
   const prevTransfers = usePrevious(transfers);
   const completeTransferToL1 = useCompleteTransferToL1();

src/components/Features/Transfer/Transfer.js

@@ -6,7 +6,7 @@ import {
   useTransferToL1,
   useTransferToL2,
   useTransferTracking,
-  useTranslation
+  useTransferTranslation
 } from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
 import {useL1Token, useL2Token, useTokens} from '../../../providers/TokensProvider';
@@ -30,7 +30,7 @@ export const Transfer = () => {
     maxDepositErrorMsg,
     tooManyDigitsErrorMsg,
     negativeValueErrorMsg
-  } = useTranslation('menus.transfer');
+  } = useTransferTranslation();
   const [trackMaxClick, trackSwapNetworks] = useTransferTracking();
   const [isL1, swapToL1] = useIsL1();
   const [isL2, swapToL2] = useIsL2();

src/components/Features/TransferLog/TransferLog.js

@@ -9,7 +9,7 @@ import {
   TransactionStatusFriendlyMessage,
   TransactionStatusStep
 } from '../../../enums';
-import {useColors, useEnvs, useTranslation} from '../../../hooks';
+import {useColors, useEnvs, useTransferLogTranslation} from '../../../hooks';
 import {useTransfer} from '../../../providers/TransferProvider';
 import utils from '../../../utils';
 import {Button, CryptoLogo, CryptoLogoSize} from '../../UI';
@@ -87,7 +87,7 @@ export const TransferLog = ({transfer, onCompleteTransferClick, onTxClick}) => {
 };
 
 const CompleteTransferButton = ({onClick}) => {
-  const {completeTransferBtnTxt} = useTranslation('menus.account.transferLogContainer.transferLog');
+  const {completeTransferBtnTxt} = useTransferLogTranslation();
   const {colorBeta} = useColors();
 
   return (

src/components/UI/AccountAddress/AccountAddress.js

@@ -2,14 +2,14 @@ import PropTypes from 'prop-types';
 import React, {useRef} from 'react';
 
 import {ReactComponent as CopyIcon} from '../../../assets/svg/icons/copy.svg';
-import {useAnimation, useTranslation} from '../../../hooks';
+import {useAccountTranslation, useAnimation} from '../../../hooks';
 import utils from '../../../utils';
 import styles from './AccountAddress.module.scss';
 
 const COPIED_ANIMATION_TIMEOUT_INTERVAL = 1000;
 
 export const AccountAddress = ({address, onClick}) => {
-  const {copiedMsgTxt} = useTranslation('menus.account');
+  const {copiedMsgTxt} = useAccountTranslation();
   const [isAnimate, startAnimation] = useAnimation(COPIED_ANIMATION_TIMEOUT_INTERVAL);
   const ref = useRef();
 

src/components/UI/LogoutButton/LogoutButton.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {useColors, useTranslation} from '../../../hooks';
+import {useAccountTranslation, useColors} from '../../../hooks';
 import {Button} from '../index';
 
 export const LogoutButton = ({onClick, isDisabled}) => {
-  const {logoutBtnTxt} = useTranslation('menus.account');
+  const {logoutBtnTxt} = useAccountTranslation();
   const {colorAlpha5, colorWhite} = useColors();
 
   return (

src/components/UI/MaxButton/MaxButton.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {useTranslation} from '../../../hooks';
+import {useTransferTranslation} from '../../../hooks';
 import styles from './MaxButton.module.scss';
 
 export const MaxButton = ({onClick}) => {
-  const {maxBtnTxt} = useTranslation('menus.transfer');
+  const {maxBtnTxt} = useTransferTranslation();
 
   return (
     <div className={styles.maxButton} onClick={onClick}>

src/components/UI/Modal/OnboardingModal/OnboardingModal.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import {useTranslation} from '../../../../hooks';
+import {useOnboardingModalTranslation} from '../../../../hooks';
 import {IncognitoMessage} from '../ModalMessage';
 import styles from './OnboardingModal.module.scss';
 
 const OnboardingModal = () => {
-  const {subtitleTxt, bulletsTxt} = useTranslation('modals.onboarding');
+  const {subtitleTxt, bulletsTxt} = useOnboardingModalTranslation();
 
   return (
     <div className={styles.onboardingModal}>

src/components/UI/Modal/TransactionSubmittedModal/TransactionSubmittedModal.js

@@ -4,7 +4,12 @@ import React from 'react';
 import {ReactComponent as EtherscanLogo} from '../../../../assets/svg/etherscan.svg';
 import {ReactComponent as StarkNetLogo} from '../../../../assets/svg/tokens/starknet.svg';
 import {ActionType} from '../../../../enums';
-import {useColors, useConstants, useEnvs, useTranslation} from '../../../../hooks';
+import {
+  useColors,
+  useConstants,
+  useEnvs,
+  useTransactionSubmittedModalTranslation
+} from '../../../../hooks';
 import utils from '../../../../utils';
 import {Button} from '../../Button/Button';
 import {Circle} from '../../Circle/Circle';
@@ -15,9 +20,8 @@ import styles from './TransactionSubmittedModal.module.scss';
 const TransactionSubmittedModal = ({transfer}) => {
   const {ETHERSCAN, VOYAGER} = useConstants();
   const {etherscanTxUrl, voyagerTxUrl} = useEnvs();
-  const {completeTransferToL1Txt, transferToL1Txt, transferToL2Txt} = useTranslation(
-    'modals.transactionSubmitted'
-  );
+  const {completeTransferToL1Txt, transferToL1Txt, transferToL2Txt} =
+    useTransactionSubmittedModalTranslation();
   const {type, l2hash, l1hash} = transfer;
   const isTransferCompleted = l1hash && l2hash;
   const explorerButtons = [];
@@ -77,7 +81,7 @@ const TransactionSubmittedModal = ({transfer}) => {
 
 const TransactionSubmittedModalButton = ({networkName, networkLogo, onClick}) => {
   const {colorAlpha3, colorWhite, colorWhite1} = useColors();
-  const {btnTxt} = useTranslation('modals.transactionSubmitted');
+  const {btnTxt} = useTransactionSubmittedModalTranslation();
 
   return (
     <Button

src/components/UI/NetworkMenu/NetworkMenu.js

@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {useTranslation} from '../../../hooks';
+import {useTransferTranslation} from '../../../hooks';
 import {NetworkTitle} from '../NetworkTitle/NetworkTitle';
 import {TokenBalance} from '../TokenBalance/TokenBalance';
 import {Badge} from '../index';
 import styles from './NetworkMenu.module.scss';
 
 export const NetworkMenu = ({networkData, tokenData, isTarget, onRefreshClick, children}) => {
-  const {toTxt, fromTxt} = useTranslation('menus.transfer');
+  const {toTxt, fromTxt} = useTransferTranslation();
 
   return (
     <div className={styles.networkMenu}>

src/components/UI/SearchToken/SearchToken.js

@@ -2,12 +2,12 @@ import PropTypes from 'prop-types';
 import React, {useEffect, useState} from 'react';
 
 import {ReactComponent as SearchIcon} from '../../../assets/svg/icons/search.svg';
-import {useTranslation} from '../../../hooks';
+import {useSelectTokenTranslation} from '../../../hooks';
 import {Input} from '../index';
 import styles from './SearchToken.module.scss';
 
 export const SearchToken = ({tokens, onSearchResults}) => {
-  const {searchPlaceholder} = useTranslation('menus.selectToken');
+  const {searchPlaceholder} = useSelectTokenTranslation();
   const [searchTerm, setSearchTerm] = useState('');
 
   const handleChange = event => {

src/components/UI/Toast/CompleteTransferToL1Toast/CompleteTransferToL1Toast.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import {ReactComponent as L1Logo} from '../../../../assets/svg/tokens/eth.svg';
-import {useColors, useTranslation} from '../../../../hooks';
+import {useColors, useCompleteTransferToastTranslation} from '../../../../hooks';
 import {TransferData} from '../../../Features';
 import {ToastBody} from '../ToastBody/ToastBody';
 import {ToastButton, ToastButtons} from '../ToastButton/ToastButton';
@@ -22,7 +22,7 @@ export const CompleteTransferToL1Toast = ({
 }) => {
   const {colorBeta, colorOmega1} = useColors();
   const {titleTxt, bodyTxt, dismissBtnTxt, completeTransferBtnTxt} =
-    useTranslation('toasts.completeTransfer');
+    useCompleteTransferToastTranslation();
 
   return (
     <Transition

src/components/UI/Toast/ToastFooter/ToastFooter.js

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {useTranslation} from '../../../../hooks';
+import {useToastsTranslation} from '../../../../hooks';
 import styles from './ToastFooter.module.scss';
 
 export const ToastFooter = ({children}) => {
   return <div className={styles.toastFooter}>{children}</div>;
 };
 
 export const TransferLogLink = ({onClick}) => {
-  const {transferLogLink} = useTranslation('toasts');
+  const {transferLogLink} = useToastsTranslation();
 
   return (
     <div className={styles.transferLogLink} onClick={onClick}>

src/components/UI/Toast/TransferToast/TransferToast.js

@@ -2,14 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import {isConsumed, isPending, isRejected} from '../../../../enums';
-import {useTranslation} from '../../../../hooks';
+import {usePendingTransferToastTranslation} from '../../../../hooks';
 import {TransferData} from '../../../Features';
 import {ToastFooter, TransferLogLink} from '../ToastFooter/ToastFooter';
 import {ToastHeader} from '../ToastHeader/ToastHeader';
 import {ToastSeparator} from '../ToastSeparator/ToastSeparator';
 
 export const TransferToast = ({transfer, isLoading, onTransferLogLinkClick, onClose}) => {
-  const {pendingTxt, consumedTxt, rejectedTxt} = useTranslation('toasts.pendingTransfer');
+  const {pendingTxt, consumedTxt, rejectedTxt} = usePendingTransferToastTranslation();
 
   const getTitle = () => {
     const {status} = transfer;

src/components/UI/TokenBalance/TokenBalance.js

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {useTranslation} from '../../../hooks';
+import {useTransferTranslation} from '../../../hooks';
 import utils from '../../../utils';
 import {toClasses} from '../../../utils/object';
 import {Loading, LoadingSize, RefreshIcon} from '../index';
 import styles from './TokenBalance.module.scss';
 
 export const TokenBalance = ({tokenData, onRefreshClick}) => {
   const {symbol, isLoading, balance} = tokenData;
-  const {balanceTitleTxt} = useTranslation('menus.transfer');
+  const {balanceTitleTxt} = useTransferTranslation();
 
   return (
     <div className={toClasses(styles.tokenBalance, isLoading && styles.loading)}>

src/components/UI/TokenInput/TokenInput.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {useTranslation} from '../../../hooks';
+import {useTransferTranslation} from '../../../hooks';
 import utils from '../../../utils';
 import {MaxButton} from '../MaxButton/MaxButton';
 import {TokenSelector} from '../TokenSelector/TokenSelector';
@@ -16,7 +16,7 @@ export const TokenInput = ({
   onTokenSelect,
   onInputChange
 }) => {
-  const {inputPlaceholderTxt} = useTranslation('menus.transfer');
+  const {inputPlaceholderTxt} = useTransferTranslation();
 
   return (
     <div className={utils.object.toClasses(styles.tokenInput, hasError && styles.hasError)}>

src/components/UI/TransferButton/TransferButton.js

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import {useColors, useTranslation} from '../../../hooks';
+import {useColors, useTransferTranslation} from '../../../hooks';
 import {Button} from '../index';
 
 export const TransferButton = props => {
   const {colorBeta, colorWhite} = useColors();
-  const {transferBtnTxt} = useTranslation('menus.transfer');
+  const {transferBtnTxt} = useTransferTranslation();
 
   return (
     <Button

src/components/UI/TransferLogContainer/TransferLogContainer.js

@@ -2,16 +2,14 @@ import PropTypes from 'prop-types';
 import React, {useState} from 'react';
 
 import {ReactComponent as CollapseIcon} from '../../../assets/svg/icons/collapse.svg';
-import {useTranslation} from '../../../hooks';
+import {useTransferLogContainerTranslation} from '../../../hooks';
 import {useMenu} from '../../../providers/MenuProvider';
 import utils from '../../../utils';
 import styles from './TransferLogContainer.module.scss';
 
 export const TransferLogContainer = ({transferIndex, children, onShowTransfers}) => {
   const {resetMenuProps} = useMenu();
-  const {titleTxt, overviewTxt, emptyMsgTxt, viewMoreTxt} = useTranslation(
-    'menus.account.transferLogContainer'
-  );
+  const {titleTxt, overviewTxt, emptyMsgTxt, viewMoreTxt} = useTransferLogContainerTranslation();
   const [showChildren, setShowChildren] = useState(false);
 
   const toggleShowChildren = () => {

src/components/UI/WalletButton/WalletButton.js

@@ -3,7 +3,7 @@ import React from 'react';
 import useBreakpoint from 'use-breakpoint';
 
 import {Breakpoint, isDesktop, isMobile, isMobileOrTablet} from '../../../enums';
-import {useColors, useTranslation} from '../../../hooks';
+import {useColors, useHeaderTranslation} from '../../../hooks';
 import utils from '../../../utils';
 import {toClasses} from '../../../utils/object';
 import {Button, DynamicIcon} from '../index';
@@ -14,7 +14,7 @@ const WALLET_LOGO_SIZE_MOBILE = 40;
 
 export const WalletButton = ({account, logoPath, onClick}) => {
   const {colorBeta, colorWhite, colorWhiteOp10, colorWhiteOp20} = useColors();
-  const {walletBtnTxt} = useTranslation('containers.header');
+  const {walletBtnTxt} = useHeaderTranslation();
   const {breakpoint} = useBreakpoint(Breakpoint);
 
   const getText = () => {