chore: upgrade grommet

package.json

@@ -82,7 +82,7 @@
     "copy-to-clipboard": "3.3.1",
     "cross-env": "7.0.3",
     "fontfaceobserver": "2.1.0",
-    "grommet": "2.17.2",
+    "grommet": "2.17.4",
     "grommet-icons": "4.6.0",
     "husky": "7.0.1",
     "i18next": "20.4.0",

src/app/components/AddEscrowForm/__tests__/__snapshots__/index.test.tsx.snap

@@ -94,6 +94,26 @@ exports[`<AddEscrowForm /> should match snapshot 1`] = `
   border: 0;
 }
 
+.c5:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c5:focus:not(:focus-visible) > circle,
+.c5:focus:not(:focus-visible) > ellipse,
+.c5:focus:not(:focus-visible) > line,
+.c5:focus:not(:focus-visible) > path,
+.c5:focus:not(:focus-visible) > polygon,
+.c5:focus:not(:focus-visible) > polyline,
+.c5:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c5:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c3 {
   box-sizing: border-box;
   font-size: inherit;

src/app/components/FatalErrorHandler/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,3 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<FatalErrorHandler /> should be null without an error 1`] = `null`;
+exports[`<FatalErrorHandler /> should be null without an error 1`] = `
+.c0 {
+  font-family: Rubik;
+  font-size: 18px;
+  line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+<div
+  class="c0"
+  style="min-height: 100vh;"
+/>
+`;

src/app/components/FatalErrorHandler/__tests__/index.test.tsx

@@ -3,13 +3,16 @@ import { fatalErrorActions } from 'app/state/fatalerror'
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import { configureAppStore } from 'store/configureStore'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
 
 import { FatalErrorHandler } from '..'
 
 const renderComponent = store =>
   render(
     <Provider store={store}>
-      <FatalErrorHandler />
+      <ThemeProvider>
+        <FatalErrorHandler />
+      </ThemeProvider>
     </Provider>,
   )
 
@@ -23,7 +26,7 @@ describe('<FatalErrorHandler />', () => {
   it('should be null without an error', () => {
     const component = renderComponent(store)
     expect(component.container.firstChild).toMatchSnapshot()
-    expect(component.container.firstChild).toBeNull()
+    expect(component.container.firstChild!.firstChild).toBeNull()
   })
 
   it('should display the error', async () => {

src/app/components/MnemonicValidation/__tests__/index.test.tsx

@@ -2,6 +2,7 @@ import { render } from '@testing-library/react'
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import { configureAppStore } from 'store/configureStore'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
 
 import { MnemonicValidation } from '..'
 
@@ -10,7 +11,11 @@ jest.mock('bip39', () => ({
 }))
 
 const renderComponent = (store, component: React.ReactNode) =>
-  render(<Provider store={store}>{component}</Provider>)
+  render(
+    <Provider store={store}>
+      <ThemeProvider>{component}</ThemeProvider>
+    </Provider>,
+  )
 
 describe('<MnemonicValidation  />', () => {
   let store: ReturnType<typeof configureAppStore>

src/app/components/ReclaimEscrowForm/__tests__/__snapshots__/index.test.tsx.snap

@@ -109,6 +109,26 @@ exports[`<ReclaimEscrowForm /> should match snapshot 1`] = `
   border: 0;
 }
 
+.c6:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c6:focus:not(:focus-visible) > circle,
+.c6:focus:not(:focus-visible) > ellipse,
+.c6:focus:not(:focus-visible) > line,
+.c6:focus:not(:focus-visible) > path,
+.c6:focus:not(:focus-visible) > polygon,
+.c6:focus:not(:focus-visible) > polyline,
+.c6:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c6:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c4 {
   box-sizing: border-box;
   font-size: inherit;

src/app/components/ResponsiveLayer/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Layer /> should match snapshot 1`] = `
+.c0 {
+  font-family: Rubik;
+  font-size: 18px;
+  line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+<div
+  class="c0"
+  style="min-height: 100vh;"
+/>
+`;

src/app/components/ResponsiveLayer/__tests__/index.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react'
+import { Layer } from 'grommet'
+import * as React from 'react'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
+import { Provider } from 'react-redux'
+import { configureAppStore } from 'store/configureStore'
+
+const renderComponent = store =>
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <Layer />
+      </ThemeProvider>
+    </Provider>,
+  )
+
+describe('<Layer />', () => {
+  let store: ReturnType<typeof configureAppStore>
+
+  beforeEach(() => {
+    store = configureAppStore()
+  })
+  it('should match snapshot', () => {
+    const component = renderComponent(store)
+    expect(component.container.firstChild).toMatchSnapshot()
+  })
+})

src/app/components/Sidebar/__tests__/__snapshots__/index.test.tsx.snap

@@ -317,6 +317,11 @@ exports[`<Navigation /> should match snapshot 1`] = `
   width: 24px;
 }
 
+.c4 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
 .c9 {
   display: inline-block;
   box-sizing: border-box;
@@ -338,6 +343,26 @@ exports[`<Navigation /> should match snapshot 1`] = `
   text-align: inherit;
 }
 
+.c9:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c9:focus:not(:focus-visible) > circle,
+.c9:focus:not(:focus-visible) > ellipse,
+.c9:focus:not(:focus-visible) > line,
+.c9:focus:not(:focus-visible) > path,
+.c9:focus:not(:focus-visible) > polygon,
+.c9:focus:not(:focus-visible) > polyline,
+.c9:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c9:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c16 {
   display: inline-block;
   box-sizing: border-box;
@@ -376,9 +401,24 @@ exports[`<Navigation /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c4 {
-  font-size: 18px;
-  line-height: 24px;
+.c16:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c16:focus:not(:focus-visible) > circle,
+.c16:focus:not(:focus-visible) > ellipse,
+.c16:focus:not(:focus-visible) > line,
+.c16:focus:not(:focus-visible) > path,
+.c16:focus:not(:focus-visible) > polygon,
+.c16:focus:not(:focus-visible) > polyline,
+.c16:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c16:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
 }
 
 @media only screen and (max-width:768px) {

src/app/components/Toolbar/Features/AccountSelector/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,3 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<AccountSelector  /> should match snapshot 1`] = `null`;
+exports[`<AccountSelector  /> should match snapshot 1`] = `
+.c0 {
+  font-family: Rubik;
+  font-size: 18px;
+  line-height: 24px;
+  background-color: #ffffff;
+  color: #444444;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+@media only screen and (max-width:768px) {
+
+}
+
+<div
+  class="c0"
+  style="min-height: 100vh;"
+/>
+`;

src/app/components/Toolbar/Features/AccountSelector/__tests__/index.test.tsx

@@ -3,13 +3,16 @@ import { WalletType } from 'app/state/wallet/types'
 import * as React from 'react'
 import { Provider } from 'react-redux'
 import { configureAppStore } from 'store/configureStore'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
 
 import { AccountSelector } from '..'
 
 const renderComponent = store =>
   render(
     <Provider store={store}>
-      <AccountSelector closeHandler={() => {}} />
+      <ThemeProvider>
+        <AccountSelector closeHandler={() => {}} />
+      </ThemeProvider>
     </Provider>,
   )
 

src/app/components/Toolbar/Features/NetworkSelector/__tests__/__snapshots__/index.test.tsx.snap

@@ -60,6 +60,11 @@ exports[`<NetworkSelector  /> should match snapshot 1`] = `
   width: 12px;
 }
 
+.c4 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
 .c0 {
   display: inline-block;
   box-sizing: border-box;
@@ -104,9 +109,24 @@ exports[`<NetworkSelector  /> should match snapshot 1`] = `
   border: 0;
 }
 
-.c4 {
-  font-size: 18px;
-  line-height: 24px;
+.c0:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c0:focus:not(:focus-visible) > circle,
+.c0:focus:not(:focus-visible) > ellipse,
+.c0:focus:not(:focus-visible) > line,
+.c0:focus:not(:focus-visible) > path,
+.c0:focus:not(:focus-visible) > polygon,
+.c0:focus:not(:focus-visible) > polyline,
+.c0:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c0:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
 }
 
 <button