Welcome overview (#49)

* Welcome overview

* Lint fixes

packages/extension-ui/src/Popup/Authorize/Request.tsx

@@ -37,7 +37,8 @@ function Request ({ authId, className, isFirst, onAction, request: { origin }, u
         <Icon
           icon='X'
           onClick={onReject}
-        />}
+        />
+      }
       intro={
         <div>An application, identified as <div className='tab-name'>{origin}</div> is requesting access from <div className='tab-url'>{url}</div>.</div>
       }

packages/extension-ui/src/Popup/Welcome.tsx

@@ -0,0 +1,41 @@
+// Copyright 2019 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { OnActionFromCtx } from '../components/types';
+
+import React from 'react';
+
+import { Box, Button, Header, withOnAction } from '../components';
+
+type Props = {
+  onAction: OnActionFromCtx
+};
+
+function Welcome ({ onAction }: Props) {
+  const onClick = (): void => {
+    window.localStorage.setItem('welcome_read', 'ok');
+    onAction();
+  };
+
+  return (
+    <div>
+      <Header label='welcome' />
+      <Box>
+        Before we start, just a couple of notes regarding use -
+        <ul>
+          <li>We do not send any clicks, pageviews or events to a central server</li>
+          <li>We do not use any trackers or analytics</li>
+          <li>We don't collect keys, addresses or any information - your information never leaves this machine</li>
+        </ul>
+        ... we are not in the information collection business (even anonymized).
+        <Button
+          label='Understood, let me continue'
+          onClick={onClick}
+        />
+      </Box>
+    </div>
+  );
+}
+
+export default withOnAction(Welcome);

packages/extension-ui/src/Popup/index.tsx

@@ -17,6 +17,7 @@ import Create from './Create';
 import Forget from './Forget';
 import Import from './Import';
 import Signing from './Signing';
+import Welcome from './Welcome';
 
 type Props = {};
 
@@ -24,8 +25,11 @@ export default function Popup (props: Props) {
   const [accounts, setAccounts] = useState<null | Array<KeyringJson>>(null);
   const [authRequests, setAuthRequests] = useState<null | Array<AuthorizeRequest>>(null);
   const [signRequests, setSignRequests] = useState<null | Array<SigningRequest>>(null);
+  const [isWelcomeDone, setWelcomeDone] = useState(false);
 
   const onAction = (to?: string): void => {
+    setWelcomeDone(window.localStorage.getItem('welcome_read') === 'ok');
+
     // loads all accounts & requests (this is passed through to children to trigger changes)
     Promise
       .all([getAccounts(), getAuthRequests(), getSignRequests()])
@@ -46,11 +50,13 @@ export default function Popup (props: Props) {
     onAction();
   }, []);
 
-  const Root = authRequests && authRequests.length
-    ? Authorize
-    : signRequests && signRequests.length
-      ? Signing
-      : Accounts;
+  const Root = isWelcomeDone
+    ? authRequests && authRequests.length
+      ? Authorize
+      : signRequests && signRequests.length
+        ? Signing
+        : Accounts
+    : Welcome;
 
   return (
     <Loading>{accounts && authRequests && signRequests && (