more dynamic intro text

client/src/routes/Faucet/index.module.scss

@@ -3,5 +3,5 @@
 .actions {
     display: grid;
     gap: $spacer / 2;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 }

client/src/routes/Faucet/index.test.tsx

@@ -3,7 +3,7 @@ import { render, fireEvent } from '@testing-library/react'
 import { MemoryRouter } from 'react-router'
 import { createMemoryHistory, createLocation } from 'history'
 import Faucet from '.'
-import { User } from '../../context'
+import { User, Market } from '../../context'
 import { userMockConnected } from '../../../__mocks__/user-mock'
 
 const history = createMemoryHistory()
@@ -12,6 +12,14 @@ const location = createLocation('/faucet')
 const setup = () => {
     const utils = render(
         <User.Provider value={userMockConnected}>
+            <Market.Provider
+                value={{
+                    network: 'pacific',
+                    totalAssets: 100,
+                    categories: [''],
+                    networkMatch: true
+                }}
+            >
                 <MemoryRouter>
                     <Faucet
                         history={history}
@@ -19,6 +27,7 @@ const setup = () => {
                         match={{ params: '', path: '', url: '', isExact: true }}
                     />
                 </MemoryRouter>
+            </Market.Provider>
         </User.Provider>
     )
     const button = utils.getByText('Request ETH')
@@ -49,6 +58,6 @@ describe('Faucet', () => {
         fireEvent.click(button)
         expect(userMockConnected.requestFromFaucet).toHaveBeenCalledTimes(1)
         // check for spinner
-        expect(getByText('Getting Ether...')).toBeInTheDocument()
+        expect(getByText('Getting ETH...')).toBeInTheDocument()
     })
 })

client/src/routes/Faucet/index.tsx

@@ -14,7 +14,9 @@ function Faucet() {
     return (
         <Route
             title="Faucet"
-            description={`Shower yourself with some Ether for Ocean's ${network} network.`}
+            description={`Shower yourself with some ETH ${
+                showRequestTokens ? 'or OCEAN' : ''
+            } for Ocean's ${network} network.`}
         >
             <Content>
                 <Web3message />