Merge pull request #69 from FormidableLabs/chore/update-docs

chore: update docs

README.md

@@ -1,41 +1,47 @@
 <div align="center">
   <img alt="logo" src="https://raw.githubusercontent.com/FormidableLabs/urql-devtools/master/src/assets/icon.svg?sanitize=true" />
-  <h1>Urql Devtools</h1>
-
+  <h1>urql devtools</h1>
+  <em>A chrome devtools extension for urql</em>
+  <br />
+  <br />
   <a href="https://spectrum.chat/urql">
     <img alt="Spectrum badge" src="https://withspectrum.github.io/badge/badge.svg" />
   </a>
-
-  <br />
-  <br />
 </div>
 
-A chrome devtools extension for Urql.
-
-Features:
+### Features:
 
+- Inspect responses and cache outcomes
 - See operations and responses in real time
 - Easily trigger requests via the client
 - Test your exchanges in a browser environment
 
-### Requirements
+<br/>
 
-- [Urql](https://github.com/FormidableLabs/urql) _v1.2.0_ (or later)
-- [Chrome extension](https://chrome.google.com/webstore/detail/urql-devtools/mcfphkbpmkbeofnkjehahlmidmceblmm)
+  <center>
+    <img width="840" alt="Screenshot 2019-09-27 at 13 55 35" src="https://user-images.githubusercontent.com/17658189/65774151-62058500-e146-11e9-8cda-c59bbd8c52ae.png">
+    <img width="840" alt="Screenshot 2019-09-27 at 16 44 29" src="https://user-images.githubusercontent.com/17658189/65774077-3a162180-e146-11e9-939d-c04546612067.png">
+    <img width="840" alt="Screenshot 2019-09-27 at 16 45 09" src="https://user-images.githubusercontent.com/17658189/65774083-3bdfe500-e146-11e9-9c09-265b2db6cfda.png">
+  </center>
 
-### Usage
+### Requirements
 
-Install the devtools exchange
+Install the [`urql-devtools-exchange`](https://github.com/FormidableLabs/urql-devtools-exchange)
 
 ```sh
-# Yarn
+# yarn
 yarn add -D @urql/devtools
 
-# Npm
+# npm
 npm i -D @urql/devtools
 ```
 
-Add the devtools exchange to your Urql client
+- [urql](https://github.com/FormidableLabs/urql) _v1.2.0_ (or later)
+- [Chrome extension](https://chrome.google.com/webstore/detail/urql-devtools/mcfphkbpmkbeofnkjehahlmidmceblmm)
+
+### Usage
+
+Add the devtools exchange to your urql client
 
 ```tsx
 // ...
@@ -45,6 +51,7 @@ import {
   dedupExchange,
   fetchExchange
 } from "urql";
+
 import { devtoolsExchange } from "@urql/devtools";
 
 // ...

src/panel/App.tsx

@@ -26,10 +26,10 @@ export const App = () => {
           <RequestProvider>
             <Route path="/request" component={Request} />
           </RequestProvider>
-          <Route path="/" exact component={() => <Redirect to="/events" />} />
           <ExplorerContextProvider>
             <Route path="/explorer" exact component={Explorer} />
           </ExplorerContextProvider>
+          <Route path="/" exact component={() => <Redirect to="/explorer" />} />
           <Navigation />
         </HashRouter>
       </ThemeProvider>