add useI18nContext shortcut hook (#8635)

ui/app/components/app/alerts/switch-to-connected-alert/switch-to-connected-alert.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import {
@@ -9,12 +9,12 @@ import {
   getAlertState,
 } from '../../../../ducks/alerts/switch-to-connected'
 import { getPermittedIdentitiesForCurrentTab } from '../../../../selectors'
-import { I18nContext } from '../../../../contexts/i18n'
 import Popover from '../../../ui/popover'
 import Button from '../../../ui/button'
 import Dropdown from '../../../ui/dropdown'
 import Checkbox from '../../../ui/check-box'
 import Tooltip from '../../../ui/tooltip-v2'
+import { useI18nContext } from '../../../../hooks/useI18nContext'
 
 const {
   ERROR,
@@ -22,7 +22,7 @@ const {
 } = ALERT_STATE
 
 const SwitchToUnconnectedAccountAlert = () => {
-  const t = useContext(I18nContext)
+  const t = useI18nContext()
   const dispatch = useDispatch()
   const alertState = useSelector(getAlertState)
   const connectedAccounts = useSelector(getPermittedIdentitiesForCurrentTab)

ui/app/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react'
+import React, { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import {
@@ -8,12 +8,12 @@ import {
   dismissAndDisableAlert,
   getAlertState,
 } from '../../../../ducks/alerts/unconnected-account'
-import { I18nContext } from '../../../../contexts/i18n'
 import Popover from '../../../ui/popover'
 import Button from '../../../ui/button'
 import Checkbox from '../../../ui/check-box'
 import Tooltip from '../../../ui/tooltip-v2'
 import { getSelectedIdentity, getOriginOfCurrentTab } from '../../../../selectors'
+import { useI18nContext } from '../../../../hooks/useI18nContext'
 
 const {
   ERROR,
@@ -21,7 +21,7 @@ const {
 } = ALERT_STATE
 
 const SwitchToUnconnectedAccountAlert = () => {
-  const t = useContext(I18nContext)
+  const t = useI18nContext()
   const dispatch = useDispatch()
   const alertState = useSelector(getAlertState)
   const origin = useSelector(getOriginOfCurrentTab)

ui/app/components/ui/popover/popover.component.js

@@ -1,8 +1,8 @@
-import React, { PureComponent, useContext } from 'react'
+import React, { PureComponent } from 'react'
 import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { I18nContext } from '../../../contexts/i18n'
+import { useI18nContext } from '../../../hooks/useI18nContext'
 
 const Popover = ({
   title,
@@ -17,7 +17,7 @@ const Popover = ({
   showArrow,
   CustomBackground,
 }) => {
-  const t = useContext(I18nContext)
+  const t = useI18nContext()
   return (
     <div className="popover-container">
       { CustomBackground

ui/app/hooks/useI18nContext.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react'
+import { I18nContext } from '../contexts/i18n'
+
+/**
+ * useI18ncContext
+ *
+ * A time saving shortcut to using useContext + I18ncontext in many
+ * different places.
+ * @return {Function} I18n function from contexts/I18n.js
+ */
+export function useI18nContext () {
+  return useContext(I18nContext)
+}

ui/app/pages/settings/alerts-tab/alerts-tab.js

@@ -1,16 +1,16 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { ALERT_TYPES } from '../../../../../app/scripts/controllers/alert'
-import { I18nContext } from '../../../contexts/i18n'
 import Tooltip from '../../../components/ui/tooltip-v2'
 import ToggleButton from '../../../components/ui/toggle-button'
 import { setAlertEnabledness } from '../../../store/actions'
 import { getAlertEnabledness } from '../../../ducks/metamask/metamask'
+import { useI18nContext } from '../../../hooks/useI18nContext'
 
 const AlertSettingsEntry = ({ alertId, description, title }) => {
-  const t = useContext(I18nContext)
+  const t = useI18nContext()
   const dispatch = useDispatch()
   const isEnabled = useSelector((state) => getAlertEnabledness(state)[alertId])
 
@@ -43,7 +43,7 @@ AlertSettingsEntry.propTypes = {
 }
 
 const AlertsTab = () => {
-  const t = useContext(I18nContext)
+  const t = useI18nContext()
 
   const alertConfig = {
     [ALERT_TYPES.switchToConnected]: {