Reduce bundle size (7.2MB -> 5.4MB) with consistent grommet imports

.eslintrc.js

@@ -20,18 +20,32 @@ const config = {
     'no-restricted-imports': [
       'error',
       {
-        name: 'redux-saga/effects',
-        message: "Use 'typed-redux-saga' instead (or matchers.select in tests).",
-      },
-      {
-        name: '@reduxjs/toolkit',
-        importNames: ['createSlice'],
-        message: "Use 'utils/@reduxjs/toolkit'",
-      },
-      {
-        name: 'react-data-table-component',
-        importNames: ['default', 'DataTable', 'IDataTableColumn', 'IDataTableProps'],
-        message: "Use 'TypeSafeDataTable'",
+        paths: [
+          {
+            name: 'redux-saga/effects',
+            message: "Import 'typed-redux-saga' instead, and use matchers.select in tests.",
+          },
+          {
+            name: '@reduxjs/toolkit',
+            importNames: ['createSlice'],
+            message: "Import 'utils/@reduxjs/toolkit' instead.",
+          },
+          {
+            name: 'react-data-table-component',
+            importNames: ['default', 'DataTable', 'IDataTableColumn', 'IDataTableProps'],
+            message: "Import 'TypeSafeDataTable' instead.",
+          },
+        ],
+        patterns: [
+          {
+            group: ['grommet/*', '!grommet/es6'],
+            message: "Import 'grommet' or 'grommet/es6/*' instead.",
+          },
+          {
+            group: ['grommet-icons/*', '!grommet-icons/es6'],
+            message: "Import 'grommet-icons' or 'grommet-icons/es6/*' instead.",
+          },
+        ],
       },
     ],
     'prefer-template': 'error',

internals/jest/jest.base-config.js

@@ -18,7 +18,7 @@ const config = {
   transform: {
     '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': '<rootDir>/internals/jest/babelTransform.js',
   },
-  transformIgnorePatterns: ['/node_modules/(?!(cborg)/)'],
+  transformIgnorePatterns: ['/node_modules/(?!(cborg|grommet/es6|grommet-icons/es6)/)'],
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
 }
 

src/app/components/AddressBox/index.tsx

@@ -5,7 +5,7 @@
  */
 import copy from 'copy-to-clipboard'
 import { Box, Button, Text } from 'grommet'
-import { Copy } from 'grommet-icons/icons'
+import { Copy } from 'grommet-icons'
 import React, { memo } from 'react'
 
 import { PrettyAddress } from '../PrettyAddress'

src/app/components/AnchorLink/index.tsx

@@ -1,4 +1,4 @@
-import { Anchor, AnchorExtendedProps } from 'grommet/components/Anchor'
+import { Anchor, AnchorExtendedProps } from 'grommet'
 import { Link, LinkProps } from 'react-router-dom'
 import React from 'react'
 

src/app/components/FatalErrorHandler/index.tsx

@@ -7,7 +7,7 @@ import { AlertBox } from 'app/components/AlertBox'
 import { selectFatalError } from 'app/state/fatalerror/selectors'
 import copy from 'copy-to-clipboard'
 import { Anchor, Box, Button, Heading, Text } from 'grommet'
-import { Copy, StatusWarning } from 'grommet-icons/icons'
+import { Copy, StatusWarning } from 'grommet-icons'
 import * as React from 'react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'

src/app/components/MobileFooterNavigation/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Box, Text } from 'grommet'
 import { LineChart, Money } from 'grommet-icons'
 import styled from 'styled-components'
-import { normalizeColor } from 'grommet/utils'
+import { normalizeColor } from 'grommet/es6/utils'
 import { NavLink } from 'react-router-dom'
 import { selectAddress } from 'app/state/wallet/selectors'
 

src/app/components/Modal/index.tsx

@@ -1,7 +1,7 @@
 import { createContext, useCallback, useContext, useState } from 'react'
 import { Box, Button, Layer, Heading, Paragraph } from 'grommet'
 import { useTranslation } from 'react-i18next'
-import { Alert, Checkmark, Close } from 'grommet-icons/icons'
+import { Alert, Checkmark, Close } from 'grommet-icons'
 
 interface Modal {
   title: string

src/app/components/PasswordField/index.tsx

@@ -1,5 +1,5 @@
 import { Box, FormField, Button, TextInput, Tip } from 'grommet'
-import { View, Hide } from 'grommet-icons/icons'
+import { View, Hide } from 'grommet-icons'
 import * as React from 'react'
 
 interface Props {

src/app/components/Sidebar/index.tsx

@@ -12,7 +12,7 @@ import {
   Text,
   Tip,
 } from 'grommet'
-import { Github, FormDown, Home, LineChart, Logout, Menu as MenuIcon, Money } from 'grommet-icons/icons'
+import { Github, FormDown, Home, LineChart, Logout, Menu as MenuIcon, Money } from 'grommet-icons'
 import * as React from 'react'
 import { useContext } from 'react'
 import { useTranslation } from 'react-i18next'

src/app/components/ThemeSwitcher/index.tsx

@@ -3,7 +3,7 @@
  * ThemeSwitcher
  *
  */
-import { Moon, Sun } from 'grommet-icons/icons'
+import { Moon, Sun } from 'grommet-icons'
 import React, { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'

src/app/components/Toolbar/Features/NetworkSelector/index.tsx

@@ -7,7 +7,7 @@ import { networkActions } from 'app/state/network'
 import { selectSelectedNetwork } from 'app/state/network/selectors'
 import { NetworkType } from 'app/state/network/types'
 import { Menu, Box, Text, ResponsiveContext } from 'grommet'
-import { Network } from 'grommet-icons/icons'
+import { Network } from 'grommet-icons'
 import React, { memo, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'

src/app/components/Transaction/InfoBox.tsx

@@ -1,6 +1,6 @@
 import { Box, Text } from 'grommet'
 import * as React from 'react'
-import type { Icon } from 'grommet-icons/icons'
+import type { Icon } from 'grommet-icons'
 import copy from 'copy-to-clipboard'
 import { trimLongString } from '../ShortAddress'
 

src/app/components/Transaction/index.tsx

@@ -18,8 +18,8 @@ import {
   LinkNext,
   Atm,
   Alert,
-} from 'grommet-icons/icons'
-import type { Icon } from 'grommet-icons/icons'
+} from 'grommet-icons'
+import type { Icon } from 'grommet-icons'
 import * as React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import styled from 'styled-components'

src/app/components/TransactionModal/index.tsx

@@ -5,7 +5,7 @@ import { selectTransaction } from 'app/state/transaction/selectors'
 import { TransactionStep } from 'app/state/transaction/types'
 import { selectAddress, selectBalance } from 'app/state/wallet/selectors'
 import { Box, Button, Heading, Spinner, Text } from 'grommet'
-import { Checkmark, Close } from 'grommet-icons/icons'
+import { Checkmark, Close } from 'grommet-icons'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'

src/app/pages/AccountPage/Features/AccountSummary/index.tsx

@@ -8,7 +8,7 @@ import { QRCodeCanvas } from 'qrcode.react'
 import * as React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
-import { normalizeColor } from 'grommet/utils'
+import { normalizeColor } from 'grommet/es6/utils'
 import { selectTheme } from 'styles/theme/slice/selectors'
 
 import { BalanceDetails } from '../../../../state/account/types'

src/app/pages/AccountPage/index.tsx

@@ -18,7 +18,7 @@ import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import { NavLink, Route, Routes, useParams } from 'react-router-dom'
 import styled from 'styled-components'
-import { normalizeColor } from 'grommet/utils'
+import { normalizeColor } from 'grommet/es6/utils'
 
 import { accountActions } from '../../state/account'
 import { selectAccount } from '../../state/account/selectors'

src/app/pages/CreateWalletPage/index.tsx

@@ -10,7 +10,7 @@ import { NoTranslate } from 'app/components/NoTranslate'
 import { ResponsiveLayer } from 'app/components/ResponsiveLayer'
 import { importAccountsActions } from 'app/state/importaccounts'
 import { Box, Button, CheckBox, Grid, Heading, Layer, ResponsiveContext, Text } from 'grommet'
-import { Refresh } from 'grommet-icons/icons'
+import { Refresh } from 'grommet-icons'
 import * as React from 'react'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'

src/app/pages/HomePage/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, Grid, Heading, Paragraph, ResponsiveContext } from 'grommet'
-import { Add, Unlock } from 'grommet-icons/icons'
+import { Add, Unlock } from 'grommet-icons'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { NavLink } from 'react-router-dom'

src/app/pages/StakingPage/Features/DelegationList/index.tsx

@@ -13,7 +13,7 @@ import { stakingActions } from 'app/state/staking'
 import { selectSelectedAddress, selectValidatorDetails } from 'app/state/staking/selectors'
 import { DebondingDelegation, Delegation } from 'app/state/staking/types'
 import { Text } from 'grommet'
-import { Down } from 'grommet-icons/icons'
+import { Down } from 'grommet-icons'
 import React, { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'

src/app/pages/StakingPage/Features/ValidatorList/ValidatorStatus.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Box, Text } from 'grommet'
-import { StatusCritical, StatusGood, StatusUnknown } from 'grommet-icons/icons'
+import { StatusCritical, StatusGood, StatusUnknown } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
 import { Validator } from 'app/state/staking/types'
 

src/app/pages/StakingPage/Features/ValidatorList/index.tsx

@@ -18,7 +18,7 @@ import {
 import { Validator } from 'app/state/staking/types'
 import { selectIsAddressInWallet } from 'app/state/selectIsAddressInWallet'
 import { Box, Text } from 'grommet'
-import { Down } from 'grommet-icons/icons'
+import { Down } from 'grommet-icons'
 import React, { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'

src/app/pages/StakingPage/Features/ValidatorMediaInfo/index.tsx

@@ -5,7 +5,7 @@
  */
 import { ValidatorMediaInfo as MediaInfo } from 'app/state/staking/types'
 import { Box, Button, Image, ResponsiveContext } from 'grommet'
-import { Home, MailOption, Twitter } from 'grommet-icons/icons'
+import { Home, MailOption, Twitter } from 'grommet-icons'
 import React, { memo, useContext } from 'react'
 import { isWebUri } from 'valid-url'
 

src/styles/theme/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import { grommet, Grommet, ThemeType } from 'grommet'
-import { deepMerge } from 'grommet/utils'
+import { deepMerge } from 'grommet/es6/utils'
 import * as React from 'react'
 import { createTheme as dataTableCreateTheme, IDataTableStyles, ITheme } from 'react-data-table-component'
 import { useSelector } from 'react-redux'