chore: refactor I18nContext usage

rainbow-me · Dec 5, 2023 · b9f4536 · b9f4536
1 parent 8a4d0ef
commit b9f4536
Show file tree

Hide file tree

Showing 12 changed files with 16 additions and 49 deletions.
diff --git a/packages/rainbowkit/src/components/ChainModal/ChainModal.tsx b/packages/rainbowkit/src/components/ChainModal/ChainModal.tsx
@@ -1,5 +1,6 @@
 import React, { Fragment, useContext } from 'react';
 import { useDisconnect, useNetwork, useSwitchNetwork } from 'wagmi';
+import { i18n } from '../../locales';
 import { isMobile } from '../../utils/isMobile';
 import { AsyncImage } from '../AsyncImage/AsyncImage';
 import { Box } from '../Box/Box';
@@ -9,7 +10,6 @@ import { DialogContent } from '../Dialog/DialogContent';
 import { DisconnectSqIcon } from '../Icons/DisconnectSq';
 import { MenuButton } from '../MenuButton/MenuButton';
 import { AppContext } from '../RainbowKitProvider/AppContext';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { useRainbowKitChains } from '../RainbowKitProvider/RainbowKitChainContext';
 import { Text } from '../Text/Text';
 import {
@@ -31,8 +31,6 @@ export function ChainModal({ onClose, open }: ChainModalProps) {
     },
   });
 
-  const i18n = useContext(I18nContext);
-
   const { disconnect } = useDisconnect();
   const titleId = 'rk_chain_modal_title';
   const mobile = isMobile();

diff --git a/packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx b/packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx
@@ -1,17 +1,17 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {
   ResponsiveValue,
   mapResponsiveValue,
   normalizeResponsiveValue,
 } from '../../css/sprinkles.css';
 import { touchableStyles } from '../../css/touchableStyles';
 import { useConnectionStatus } from '../../hooks/useConnectionStatus';
+import { i18n } from '../../locales';
 import { isMobile } from '../../utils/isMobile';
 import { AsyncImage } from '../AsyncImage/AsyncImage';
 import { Avatar } from '../Avatar/Avatar';
 import { Box } from '../Box/Box';
 import { DropdownIcon } from '../Icons/Dropdown';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { useRainbowKitChains } from '../RainbowKitProvider/RainbowKitChainContext';
 import { ConnectButtonRenderer } from './ConnectButtonRenderer';
 
@@ -41,8 +41,6 @@ export function ConnectButton({
   const chains = useRainbowKitChains();
   const connectionStatus = useConnectionStatus();
 
-  const i18n = useContext(I18nContext);
-
   return (
     <ConnectButtonRenderer>
       {({

diff --git a/packages/rainbowkit/src/components/ConnectModal/ConnectModalIntro.tsx b/packages/rainbowkit/src/components/ConnectModal/ConnectModalIntro.tsx
@@ -1,13 +1,13 @@
 import React, { useContext } from 'react';
 import { touchableStyles } from '../../css/touchableStyles';
+import { i18n } from '../../locales';
 import { Box } from '../Box/Box';
 import { ActionButton } from '../Button/ActionButton';
 import { DisclaimerLink } from '../Disclaimer/DisclaimerLink';
 import { DisclaimerText } from '../Disclaimer/DisclaimerText';
 import { AssetsIcon } from '../Icons/Assets';
 import { LoginIcon } from '../Icons/Login';
 import { AppContext } from '../RainbowKitProvider/AppContext';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { Text } from '../Text/Text';
 
 export function ConnectModalIntro({
@@ -18,7 +18,6 @@ export function ConnectModalIntro({
   getWallet: () => void;
 }) {
   const { disclaimer: Disclaimer, learnMoreUrl } = useContext(AppContext);
-  const i18n = useContext(I18nContext);
 
   return (
     <>

diff --git a/packages/rainbowkit/src/components/ConnectOptions/ConnectDetails.tsx b/packages/rainbowkit/src/components/ConnectOptions/ConnectDetails.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode, useContext, useEffect } from 'react';
 import { touchableStyles } from '../../css/touchableStyles';
 import { useWindowSize } from '../../hooks/useWindowSize';
+import { i18n } from '../../locales';
 import { BrowserType, getBrowser, isSafari } from '../../utils/browsers';
 import { getGradientRGBAs } from '../../utils/colors';
 import { PlatformType, getPlatform } from '../../utils/platforms';
@@ -19,7 +20,6 @@ import { RefreshIcon, preloadRefreshIcon } from '../Icons/Refresh';
 import { ScanIcon, preloadScanIcon } from '../Icons/Scan';
 import { SpinnerIcon } from '../Icons/Spinner';
 import { QRCode } from '../QRCode/QRCode';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { ModalSizeContext } from '../RainbowKitProvider/ModalSizeContext';
 import { Text } from '../Text/Text';
 import { WalletStep } from './DesktopOptions';
@@ -74,8 +74,6 @@ export function GetDetail({
   const wallets = useWalletConnectors();
   const shownWallets = wallets.splice(0, 5);
 
-  const i18n = useContext(I18nContext);
-
   return (
     <Box
       alignItems="center"
@@ -214,8 +212,6 @@ export function ConnectDetail({
   const getDesktopDeepLink = wallet.desktop?.getUri;
   const safari = isSafari();
 
-  const i18n = useContext(I18nContext);
-
   const hasExtension = !!wallet.extensionDownloadUrl;
   const hasQrCodeAndExtension = downloadUrls?.qrCode && hasExtension;
   const hasQrCodeAndDesktop =
@@ -625,8 +621,6 @@ export function DownloadOptionsDetail({
     mobileDownloadUrl,
   } = wallet;
 
-  const i18n = useContext(I18nContext);
-
   useEffect(() => {
     // Preload icons used on next screen
     preloadCreateIcon();
@@ -732,8 +726,6 @@ export function DownloadDetail({
 }) {
   const { downloadUrls, qrCode } = wallet;
 
-  const i18n = useContext(I18nContext);
-
   useEffect(() => {
     // Preload icons used on next screen
     preloadCreateIcon();
@@ -813,8 +805,6 @@ export function InstructionMobileDetail({
   connectWallet: (wallet: WalletConnector) => void;
   wallet: WalletConnector;
 }) {
-  const i18n = useContext(I18nContext);
-
   return (
     <Box
       alignItems="center"
@@ -900,8 +890,6 @@ export function InstructionExtensionDetail({
 }: {
   wallet: WalletConnector;
 }) {
-  const i18n = useContext(I18nContext);
-
   return (
     <Box
       alignItems="center"
@@ -989,8 +977,6 @@ export function InstructionDesktopDetail({
   connectWallet: (wallet: WalletConnector) => void;
   wallet: WalletConnector;
 }) {
-  const i18n = useContext(I18nContext);
-
   return (
     <Box
       alignItems="center"

diff --git a/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx b/packages/rainbowkit/src/components/ConnectOptions/DesktopOptions.tsx
@@ -6,6 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { touchableStyles } from '../../css/touchableStyles';
+import { i18n } from '../../locales';
 import { isSafari } from '../../utils/browsers';
 import { groupBy } from '../../utils/groupBy';
 import { addLatestWalletId } from '../../wallets/latestWalletId';
@@ -22,7 +23,6 @@ import { BackIcon } from '../Icons/Back';
 import { InfoButton } from '../InfoButton/InfoButton';
 import { ModalSelection } from '../ModalSelection/ModalSelection';
 import { AppContext } from '../RainbowKitProvider/AppContext';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import {
   ModalSizeContext,
   ModalSizeOptions,
@@ -69,7 +69,6 @@ export function DesktopOptions({ onClose }: { onClose: () => void }) {
   const modalSize = useContext(ModalSizeContext);
   const compactModeEnabled = modalSize === ModalSizeOptions.COMPACT;
   const { disclaimer: Disclaimer } = useContext(AppContext);
-  const i18n = useContext(I18nContext);
 
   const initialized = useRef(false);
 

diff --git a/packages/rainbowkit/src/components/ConnectOptions/MobileOptions.tsx b/packages/rainbowkit/src/components/ConnectOptions/MobileOptions.tsx
@@ -6,6 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { touchableStyles } from '../../css/touchableStyles';
+import { i18n } from '../../locales';
 import { isIOS } from '../../utils/isMobile';
 import {
   WalletConnector,
@@ -19,7 +20,6 @@ import { DisclaimerLink } from '../Disclaimer/DisclaimerLink';
 import { DisclaimerText } from '../Disclaimer/DisclaimerText';
 import { BackIcon } from '../Icons/Back';
 import { AppContext } from '../RainbowKitProvider/AppContext';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { useCoolMode } from '../RainbowKitProvider/useCoolMode';
 import { setWalletConnectDeepLink } from '../RainbowKitProvider/walletConnectDeepLink';
 import { Text } from '../Text/Text';
@@ -80,8 +80,6 @@ export function WalletButton({
   const coolModeRef = useCoolMode(iconUrl);
   const initialized = useRef(false);
 
-  const i18n = useContext(I18nContext);
-
   const onConnect = useCallback(async () => {
     if (id === 'walletConnect') onClose?.();
     connect?.()?.catch(() => {});
@@ -226,8 +224,6 @@ export function MobileOptions({ onClose }: { onClose: () => void }) {
     MobileWalletStep.Connect,
   );
 
-  const i18n = useContext(I18nContext);
-
   const ios = isIOS();
 
   switch (walletStep) {

diff --git a/packages/rainbowkit/src/components/ConnectOptions/MobileStatus.tsx b/packages/rainbowkit/src/components/ConnectOptions/MobileStatus.tsx
@@ -1,14 +1,13 @@
 import React, { useContext } from 'react';
+import { i18n } from '../../locales';
 import { Box } from '../Box/Box';
 import { CloseButton } from '../CloseButton/CloseButton';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { WalletButtonContext } from '../RainbowKitProvider/WalletButtonContext';
 import { Text } from '../Text/Text';
 import { WalletButton } from './MobileOptions';
 
 export const MobileStatus = ({ onClose }: { onClose: () => void }) => {
   const { connector } = useContext(WalletButtonContext);
-  const i18n = useContext(I18nContext);
   const connectorName = connector?.name || '';
 
   return (

diff --git a/packages/rainbowkit/src/components/ModalSelection/ModalSelection.tsx b/packages/rainbowkit/src/components/ModalSelection/ModalSelection.tsx
@@ -1,8 +1,8 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { touchableStyles } from '../../css/touchableStyles';
+import { i18n } from '../../locales';
 import { AsyncImage } from '../AsyncImage/AsyncImage';
 import { Box } from '../Box/Box';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { useCoolMode } from '../RainbowKitProvider/useCoolMode';
 import { Text } from '../Text/Text';
 import * as styles from './ModalSelection.css';
@@ -34,8 +34,6 @@ export const ModalSelection = ({
   const coolModeRef = useCoolMode(iconUrl);
   const [isMouseOver, setIsMouseOver] = useState<boolean>(false);
 
-  const i18n = useContext(I18nContext);
-
   return (
     <Box
       display="flex"

diff --git a/packages/rainbowkit/src/components/ProfileDetails/ProfileDetails.tsx b/packages/rainbowkit/src/components/ProfileDetails/ProfileDetails.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { useAccount, useBalance, useEnsAvatar, useEnsName } from 'wagmi';
+import { i18n } from '../../locales';
 import { isMobile } from '../../utils/isMobile';
 import { Avatar } from '../Avatar/Avatar';
 import { Box } from '../Box/Box';
@@ -10,7 +11,6 @@ import { formatENS } from '../ConnectButton/formatENS';
 import { CopiedIcon } from '../Icons/Copied';
 import { CopyIcon } from '../Icons/Copy';
 import { DisconnectIcon } from '../Icons/Disconnect';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { ShowRecentTransactionsContext } from '../RainbowKitProvider/ShowRecentTransactionsContext';
 import { Text } from '../Text/Text';
 import { TxList } from '../Txs/TxList';
@@ -36,8 +36,6 @@ export function ProfileDetails({
   const showRecentTransactions = useContext(ShowRecentTransactionsContext);
   const [copiedAddress, setCopiedAddress] = useState(false);
 
-  const i18n = useContext(I18nContext);
-
   const copyAddressAction = useCallback(() => {
     if (address) {
       navigator.clipboard.writeText(address);

diff --git a/packages/rainbowkit/src/components/SignIn/SignIn.tsx b/packages/rainbowkit/src/components/SignIn/SignIn.tsx
@@ -1,20 +1,19 @@
-import React, { useCallback, useContext, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { UserRejectedRequestError } from 'viem';
 import { useAccount, useNetwork, useSignMessage } from 'wagmi';
 import { touchableStyles } from '../../css/touchableStyles';
+import { i18n } from '../../locales';
 import { isMobile } from '../../utils/isMobile';
 import { AsyncImage } from '../AsyncImage/AsyncImage';
 import { Box } from '../Box/Box';
 import { ActionButton } from '../Button/ActionButton';
 import { CloseButton } from '../CloseButton/CloseButton';
 import { useAuthenticationAdapter } from '../RainbowKitProvider/AuthenticationContext';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { Text } from '../Text/Text';
 
 export const signInIcon = async () => (await import('./sign.png')).default;
 
 export function SignIn({ onClose }: { onClose: () => void }) {
-  const i18n = useContext(I18nContext);
   const [{ status, ...state }, setState] = React.useState<{
     status: 'idle' | 'signing' | 'verifying';
     errorMessage?: string;

diff --git a/packages/rainbowkit/src/components/Txs/TxList.tsx b/packages/rainbowkit/src/components/Txs/TxList.tsx
@@ -9,7 +9,7 @@ import { Box } from '../Box/Box';
 import { ExternalLinkIcon } from '../Icons/ExternalLink';
 import { AppContext } from '../RainbowKitProvider/AppContext';
 
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
+import { i18n } from '../../locales';
 import { Text } from '../Text/Text';
 import { TxItem } from './TxItem';
 
@@ -29,8 +29,6 @@ export function TxList({ address }: TxListProps) {
   const mobile = isMobile();
   const { appName } = useContext(AppContext);
 
-  const i18n = useContext(I18nContext);
-
   return (
     <>
       <Box

diff --git a/packages/rainbowkit/src/components/WalletButton/WalletButton.tsx b/packages/rainbowkit/src/components/WalletButton/WalletButton.tsx
@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { touchableStyles } from '../../css/touchableStyles';
+import { i18n } from '../../locales';
 import { AsyncImage } from '../AsyncImage/AsyncImage';
 import { Box } from '../Box/Box';
 import { SpinnerIcon } from '../Icons/Spinner';
-import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import * as styles from './WalletButton.css';
 import { WalletButtonRenderer } from './WalletButtonRenderer';
 
@@ -12,7 +12,6 @@ export const WalletButton = ({ wallet }: { wallet?: string }) => {
     <WalletButtonRenderer wallet={wallet}>
       {({ ready, connect, connected, mounted, connector, loading }) => {
         const isDisabled = !ready || loading;
-        const i18n = useContext(I18nContext);
         const connectorName = connector?.name || '';
 
         // SSR mismatch issue in next.js: