design system: cleanup, adds license

LICENSE-MIT

@@ -0,0 +1,19 @@
+The MIT License (MIT)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

components/core/ApplicationHeader.js

@@ -49,12 +49,12 @@ const STYLES_ICON_ELEMENT = css`
 `;
 
 const STYLES_ICON_ELEMENT_CUSTOM = css`
+  background-color: ${Constants.system.brand};
   height: 48px;
   width: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background-color: ${Constants.system.black};
   user-select: none;
   cursor: pointer;
 `;

components/system/SystemPage.js

@@ -24,16 +24,12 @@ const STYLES_BODY = css`
 const STYLES_ICON_ELEMENT = css`
   height: 88px;
   width: 88px;
-  border-radius: 88px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background-color: ${Constants.system.brand};
   color: ${Constants.system.white};
   user-select: none;
-  background-image: url("/public/static/cube_f7f7f7.jpg");
-  background-size: cover;
-  background-position: 50% 50%;
 `;
 
 const STYLES_SIDEBAR = css`
@@ -189,35 +185,35 @@ export default class SystemPage extends React.Component {
           <br />
 
           <span css={STYLES_LABEL}>Experiences</span>
-          <SidebarLink
-            url={url}
-            href="/experiences/peers-list"
-            title="Peers List"
-          />
           <SidebarLink
             url={url}
             href="/experiences/create-address"
-            title="Create Filecoin Address"
+            title="CreateFilecoinAddress"
           />
           <SidebarLink
             url={url}
             href="/experiences/make-storage-deal"
-            title="Make a Storage Deal"
+            title="CreateFilecoinStorageDeal"
           />
           <SidebarLink
             url={url}
             href="/experiences/generate-powergate-token"
-            title="Generate Powergate token"
+            title="CreateToken"
-          />
-          <SidebarLink
-            url={url}
-            href="/experiences/send-address-filecoin"
-            title="Send an Address Filecoin"
           />
           <SidebarLink
             url={url}
             href="/experiences/filecoin-wallet-balances"
-            title="Filecoin Wallet Balances"
+            title="FilecoinBalancesList"
+          />
+          <SidebarLink
+            url={url}
+            href="/experiences/peers-list"
+            title="PeersList"
+          />
+          <SidebarLink
+            url={url}
+            href="/experiences/send-address-filecoin"
+            title="SendAddressFilecoin"
           />
 
           <span css={STYLES_LABEL}>
@@ -254,16 +250,7 @@ export default class SystemPage extends React.Component {
 
           <div
             css={STYLES_SMALL_LINK}
-            onClick={() => {
-              window.open("https://filscan.io/");
-            }}
             style={{ marginTop: 48 }}
-          >
-            <SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
-            Block Explorer
-          </div>
-          <div
-            css={STYLES_SMALL_LINK}
             onClick={() => {
               window.open("https://github.com/filecoin-project/slate");
             }}

pages/system/index.js

@@ -76,6 +76,40 @@ export default class SystemPageRoot extends React.Component {
             {`import { ButtonPrimary } from 'slate-react-system'
 
 const Component = () => <ButtonPrimary>Hello World</ButtonPrimary>`}
+          </System.CodeBlock>
+          <br />
+          <br />
+          And easily integrate Powergate <br />
+          <br />
+          <System.CodeBlock>
+            {`import * as React from 'react';
+import * as System from 'slate-react-system';
+import { createPow } from "@textile/powergate-client";
+
+class Example extends React.Component {
+  _PG = null;
+
+  state = {
+    token: null
+  }
+
+  _handleCreateToken = () => {
+    this._PG = createPow({ host: 'http://0.0.0.0:6002' });
+    const FFS = await this._PG.ffs.create();
+    const token = FFS.token ? FFS.token : null;
+    PowerGate.setToken(token);
+    this.setState({ token });
+  }
+
+  render() {
+    return (
+      <System.CreateToken 
+        token={this.state.token} 
+        onClick={this._handleCreateToken} />
+    );
+  }
+}
+`}
           </System.CodeBlock>
           <br />
           <br />
@@ -106,48 +140,7 @@ const Component = () => <ButtonPrimary>Hello World</ButtonPrimary>`}
             .
           </System.LI>
         </System.UL>
-        <br /> <br /> <br />
+        <br /> <br />
-        <System.H2>How do I use Slate?</System.H2>
-        <br />
-        <System.P>
-          If you are running this{" "}
-          <a href="https://github.com/filecoin-project/slate" target="_blank">
-            repository locally
-          </a>
-          , visit https://localhost:1337 in your browser. If you are redirected
-          here, that means you have not followed all of the instructions or
-          something went wrong on our end.
-        </System.P>
-        <br />
-        <br />
-        <br />
-        <System.H2>License</System.H2>
-        <br />
-        <System.P>
-          Copyright &copy; 2020 Protocol Labs
-          <br />
-          <br />
-          Permission is hereby granted, free of charge, to any person obtaining
-          a copy of this software and associated documentation files (the
-          "Software"), to deal in the Software without restriction, including
-          without limitation the rights to use, copy, modify, merge, publish,
-          distribute, sublicense, and/or sell copies of the Software, and to
-          permit persons to whom the Software is furnished to do so, subject to
-          the following conditions:
-          <br />
-          <br />
-          The above copyright notice and this permission notice shall be
-          included in all copies or substantial portions of the Software.
-          <br />
-          <br />
-          THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-          EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-          MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-          IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-          CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-          TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-          SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-        </System.P>
       </SystemPage>
     );
   }