nested tabs for filecoin pages

common/navigation-data.js

@@ -88,14 +88,6 @@ export const generate = ({ library = [], slates = [] }) => [
     children: null,
     ignore: true,
   },
-  {
-    id: "V1_NAVIGATION_TARA",
-    decorator: "TARA",
-    name: "Tara",
-    pageTitle: "Tara Sandbox",
-    children: null,
-    ignore: true,
-  },
   ...constructSlatesTreeForNavigation(slates),
   constructFilesTreeForNavigation(library),
   /*
@@ -107,14 +99,6 @@ export const generate = ({ library = [], slates = [] }) => [
     children: [],
     ignore: false,
   },
-  {
-    id: "V1_NAVIGATION_WALLET",
-    decorator: "WALLET",
-    name: "Wallet",
-    pageTitle: "Your wallet and addresses",
-    children: [
-    ],
-  }, 
   {
     id: "V1_NAVIGATION_NETWORK",
     decorator: "NETWORK",
@@ -123,67 +107,20 @@ export const generate = ({ library = [], slates = [] }) => [
     children: null,
   },
   */
-  {
-    id: "V1_NAVIGATION_API",
-    decorator: "SETTINGS_DEVELOPER",
-    name: "API",
-    pageTitle: "Developer API",
-    children: [],
-  },
   {
     id: "V1_NAVIGATION_ARCHIVE",
     decorator: "FILECOIN",
     name: "Filecoin",
     pageTitle: "Archive on Filecoin",
     filecoin: true,
-    children: [
+    children: null,
-      {
-        id: "V1_NAVIGATION_NETWORK",
-        decorator: "NETWORK",
-        name: "Network API",
-        pageTitle: "The Filecoin Network",
-        children: null,
-        filecoin: true,
-      },
-      {
-        id: "V1_NAVIGATION_FILECOIN_SETTINGS",
-        decorator: "SETTINGS",
-        name: "Deal Settings",
-        pageTitle: "Deal Settings.",
-        filecoin: true,
-        children: null,
-      },
-      {
-        id: "V1_NAVIGATION_DEAL_HISTORY",
-        decorator: "DEALS",
-        name: "Deal History",
-        pageTitle: "Storage Deal History",
-        filecoin: true,
-      },
-      {
-        id: "V1_NAVIGATION_WALLET",
-        decorator: "WALLET",
-        name: "Wallet",
-        pageTitle: "Your wallet and addresses",
-        children: [],
-        filecoin: true,
-      },
-      {
-        id: "V1_NAVIGATION_MINERS",
-        decorator: "MINERS",
-        name: "Miners",
-        pageTitle: "Miners",
-        filecoin: true,
-        children: null,
-      },
-    ],
   },
   {
-    id: "V1_NAVIGATION_FILECOIN_STORAGE_DEAL",
+    id: "V1_NAVIGATION_API",
-    decorator: "MAKE_DEAL",
+    decorator: "SETTINGS_DEVELOPER",
-    name: "Storage Deal",
+    name: "API",
-    filecoin: true,
+    pageTitle: "Developer API",
-    pageTitle: "Make an one-off Filecoin storage deal",
+    children: null,
   },
   {
     id: "V1_NAVIGATION_PROFILE_EDIT",

common/svg.js

@@ -1632,16 +1632,14 @@ export const Menu = (props) => (
     strokeLinejoin="round"
     {...props}
   >
-    <g clip-path="url(#clip0)">
+    <path d="M13 2H11C10.4477 2 10 2.44772 10 3V5C10 5.55228 10.4477 6 11 6H13C13.5523 6 14 5.55228 14 5V3C14 2.44772 13.5523 2 13 2Z" />
-      <path d="M13 2H11C10.4477 2 10 2.44772 10 3V5C10 5.55228 10.4477 6 11 6H13C13.5523 6 14 5.55228 14 5V3C14 2.44772 13.5523 2 13 2Z" />
+    <path d="M5 2H3C2.44772 2 2 2.44772 2 3V5C2 5.55228 2.44772 6 3 6H5C5.55228 6 6 5.55228 6 5V3C6 2.44772 5.55228 2 5 2Z" />
-      <path d="M5 2H3C2.44772 2 2 2.44772 2 3V5C2 5.55228 2.44772 6 3 6H5C5.55228 6 6 5.55228 6 5V3C6 2.44772 5.55228 2 5 2Z" />
+    <path d="M21 2H19C18.4477 2 18 2.44772 18 3V5C18 5.55228 18.4477 6 19 6H21C21.5523 6 22 5.55228 22 5V3C22 2.44772 21.5523 2 21 2Z" />
-      <path d="M21 2H19C18.4477 2 18 2.44772 18 3V5C18 5.55228 18.4477 6 19 6H21C21.5523 6 22 5.55228 22 5V3C22 2.44772 21.5523 2 21 2Z" />
+    <path d="M13 10H11C10.4477 10 10 10.4477 10 11V13C10 13.5523 10.4477 14 11 14H13C13.5523 14 14 13.5523 14 13V11C14 10.4477 13.5523 10 13 10Z" />
-      <path d="M13 10H11C10.4477 10 10 10.4477 10 11V13C10 13.5523 10.4477 14 11 14H13C13.5523 14 14 13.5523 14 13V11C14 10.4477 13.5523 10 13 10Z" />
+    <path d="M5 10H3C2.44772 10 2 10.4477 2 11V13C2 13.5523 2.44772 14 3 14H5C5.55228 14 6 13.5523 6 13V11C6 10.4477 5.55228 10 5 10Z" />
-      <path d="M5 10H3C2.44772 10 2 10.4477 2 11V13C2 13.5523 2.44772 14 3 14H5C5.55228 14 6 13.5523 6 13V11C6 10.4477 5.55228 10 5 10Z" />
+    <path d="M21 10H19C18.4477 10 18 10.4477 18 11V13C18 13.5523 18.4477 14 19 14H21C21.5523 14 22 13.5523 22 13V11C22 10.4477 21.5523 10 21 10Z" />
-      <path d="M21 10H19C18.4477 10 18 10.4477 18 11V13C18 13.5523 18.4477 14 19 14H21C21.5523 14 22 13.5523 22 13V11C22 10.4477 21.5523 10 21 10Z" />
+    <path d="M13 18H11C10.4477 18 10 18.4477 10 19V21C10 21.5523 10.4477 22 11 22H13C13.5523 22 14 21.5523 14 21V19C14 18.4477 13.5523 18 13 18Z" />
-      <path d="M13 18H11C10.4477 18 10 18.4477 10 19V21C10 21.5523 10.4477 22 11 22H13C13.5523 22 14 21.5523 14 21V19C14 18.4477 13.5523 18 13 18Z" />
+    <path d="M5 18H3C2.44772 18 2 18.4477 2 19V21C2 21.5523 2.44772 22 3 22H5C5.55228 22 6 21.5523 6 21V19C6 18.4477 5.55228 18 5 18Z" />
-      <path d="M5 18H3C2.44772 18 2 18.4477 2 19V21C2 21.5523 2.44772 22 3 22H5C5.55228 22 6 21.5523 6 21V19C6 18.4477 5.55228 18 5 18Z" />
+    <path d="M21 18H19C18.4477 18 18 18.4477 18 19V21C18 21.5523 18.4477 22 19 22H21C21.5523 22 22 21.5523 22 21V19C22 18.4477 21.5523 18 21 18Z" />
-      <path d="M21 18H19C18.4477 18 18 18.4477 18 19V21C18 21.5523 18.4477 22 19 22H21C21.5523 22 22 21.5523 22 21V19C22 18.4477 21.5523 18 21 18Z" />
-    </g>
   </svg>
 );

components/core/Application.js

@@ -36,7 +36,6 @@ import SceneArchive from "~/scenes/SceneArchive";
 import SceneMakeFilecoinDeal from "~/scenes/SceneMakeFilecoinDeal";
 import SceneEncryptedData from "~/scenes/SceneEncryptedData";
 import SceneMiners from "~/scenes/SceneMiners";
-import SceneTara from "~/scenes/SceneTara";
 
 // NOTE(jim):
 // Sidebars each have a decorator and can be shown to with _handleAction
@@ -86,24 +85,16 @@ const SCENES = {
   DIRECTORY: <SceneDirectory />,
   PUBLIC_PROFILE: <ScenePublicProfile />,
   PROFILE: <SceneProfile />,
-  WALLET: <SceneWallet />,
   FOLDER: <SceneFilesFolder />,
   FILE: <SceneFile />,
   PUBLIC_SLATE: <ScenePublicSlate />,
   SLATE: <SceneSlate />,
-  DEALS: <SceneDeals />,
-  SETTINGS: <SceneSettings />,
   SETTINGS_DEVELOPER: <SceneSettingsDeveloper />,
   EDIT_ACCOUNT: <SceneEditAccount />,
   SLATES: <SceneSlates />,
   LOCAL_DATA: <SceneLocalData />,
-  NETWORK: <SceneSentinel />,
   DIRECTORY: <SceneDirectory />,
   FILECOIN: <SceneArchive />,
-  MAKE_DEAL: <SceneMakeFilecoinDeal />,
-  ENCRYPTED: <SceneEncryptedData />,
-  MINERS: <SceneMiners />,
-  TARA: <SceneTara />,
 };
 
 let mounted;

scenes/SceneArchive.js

@@ -6,20 +6,32 @@ import * as Strings from "~/common/strings";
 
 import { css } from "@emotion/core";
 import { LoaderSpinner } from "~/components/system/components/Loaders";
+import { TabGroup } from "~/components/core/TabGroup";
 
 import ScenePage from "~/components/core/ScenePage";
 import ScenePageHeader from "~/components/core/ScenePageHeader";
+import SceneSettings from "~/scenes/SceneSettings";
+import SceneDeals from "~/scenes/SceneDeals";
+import SceneWallet from "~/scenes/SceneWallet";
+import SceneMakeFilecoinDeal from "~/scenes/SceneMakeFilecoinDeal";
+import SceneSentinel from "~/scenes/SceneSentinel";
+import SceneMiners from "~/scenes/SceneMiners";
 
-const STYLES_LABEL = css`
+const STYLES_SPINNER_CONTAINER = css`
-  font-family: ${Constants.font.semiBold};
+  width: 100%;
-  font-size: 16px;
+  height: 40vh;
-  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 let mounted = false;
 
 export default class SceneArchive extends React.Component {
   state = {
+    deals: [],
+    dealsLoaded: false,
+    tab: 0,
     networkViewer: null,
     allow_filecoin_directory_listing: this.props.viewer.allow_filecoin_directory_listing,
     allow_automatic_data_storage: this.props.viewer.allow_automatic_data_storage,
@@ -39,9 +51,42 @@ export default class SceneArchive extends React.Component {
       networkViewer = json.data;
     } catch (e) {}
 
-    this.setState({
+    await this.setState({
       networkViewer,
     });
+
+    let deals = [];
+    try {
+      const response = await fetch("/api/network-deals");
+      const json = await response.json();
+      deals = json.data.deals;
+    } catch (e) {}
+
+    if (!deals || !deals.length) {
+      this.setState({ dealsLoaded: true });
+    }
+
+    await this.setState({ deals, dealsLoaded: true });
+
+    let routes;
+    try {
+      const response = await fetch("https://sentinel.slate.host/api");
+      const json = await response.json();
+      routes = json.data;
+    } catch (e) {}
+    await this.setState({ routes });
+
+    let miners = [];
+    try {
+      const response = await fetch("https://sentinel.slate.host/api/mapped-static-global-miners");
+      const json = await response.json();
+      const sources = json.data;
+
+      sources.forEach((group) => {
+        miners = [...group.minerAddresses, ...miners];
+      });
+    } catch (e) {}
+    this.setState({ miners });
   }
 
   _handleCheckboxChange = (e) => {
@@ -94,70 +139,134 @@ export default class SceneArchive extends React.Component {
     return (
       <ScenePage>
         <ScenePageHeader title="Filecoin">
-          Use this section to archive all of your data on to Filecoin through a storage deal. You
+          {/* Use this section to archive all of your data on to Filecoin through a storage deal. You
-          must have at last 100MB stored to make an archive storage deal. <br />
+          must have at last 100MB stored to make an archive storage deal. <br /> */}
         </ScenePageHeader>
 
+        <TabGroup
+          tabs={["Storage deal", "Wallet", "Settings", "API", "Miners"]}
+          value={this.state.tab}
+          onChange={(value) => this.setState({ tab: value })}
+        />
+
         {this.state.networkViewer ? (
           <React.Fragment>
-            <br />
+            {this.state.tab === 0 ? (
-            <System.ButtonPrimary
+              <React.Fragment>
-              onClick={() =>
+                <SceneMakeFilecoinDeal {...this.props} networkViewer={this.state.networkViewer} />
-                this.props.onAction({
+              </React.Fragment>
-                  type: "SIDEBAR",
+            ) : null}
-                  value: "SIDEBAR_FILECOIN_ARCHIVE",
-                })
-              }
-            >
-              Archive your data
-            </System.ButtonPrimary>
 
-            <System.DescriptionGroup
+            {this.state.tab === 1 ? (
-              style={{ marginTop: 64 }}
+              <React.Fragment>
-              label="Archive automation settings"
+                <SceneWallet {...this.props} networkViewer={this.state.networkViewer} />
-              description="Configure the automation settings for your archive storage deals."
+                <br />
-            />
+                <br />
+                {this.state.dealsLoaded ? (
+                  <SceneDeals deals={this.state.deals} dealsLoaded={this.state.dealsLoaded} />
+                ) : (
+                  <div css={STYLES_SPINNER_CONTAINER}>
+                    <LoaderSpinner style={{ height: 32, width: 32 }} />
+                  </div>
+                )}
+              </React.Fragment>
+            ) : null}
 
-            <System.CheckBox
+            {this.state.tab === 2 ? (
-              style={{ marginTop: 24 }}
+              <React.Fragment>
-              name="allow_filecoin_directory_listing"
+                <System.P style={{ marginTop: 24 }}>
-              value={this.state.allow_filecoin_directory_listing}
+                  Archive all of your data onto the Filecoin Network with a storage deal using your
-              onChange={this._handleCheckboxChange}
+                  default settings.
-            >
+                </System.P>
-              Show your successful deals on a directory page where others can retrieve them.
+                <br />
-            </System.CheckBox>
+                <System.ButtonPrimary
+                  onClick={() =>
+                    this.props.onAction({
+                      type: "SIDEBAR",
+                      value: "SIDEBAR_FILECOIN_ARCHIVE",
+                    })
+                  }
+                >
+                  Archive your data
+                </System.ButtonPrimary>
 
-            <System.CheckBox
+                <System.DescriptionGroup
-              style={{ marginTop: 24 }}
+                  style={{ marginTop: 64 }}
-              name="allow_automatic_data_storage"
+                  label="Archive automation settings"
-              value={this.state.allow_automatic_data_storage}
+                  description="Configure the automation settings for your archive storage deals."
-              onChange={this._handleCheckboxChange}
+                />
-            >
-              Allow Slate to make archive storage deals on your behalf to the Filecoin Network. You
-              will get a receipt in the Filecoin section.
-            </System.CheckBox>
 
-            <System.CheckBox
+                <System.CheckBox
-              style={{ marginTop: 24 }}
+                  style={{ marginTop: 24 }}
-              name="allow_encrypted_data_storage"
+                  name="allow_filecoin_directory_listing"
-              value={this.state.allow_encrypted_data_storage}
+                  value={this.state.allow_filecoin_directory_listing}
-              onChange={this._handleCheckboxChange}
+                  onChange={this._handleCheckboxChange}
-            >
+                >
-              Force encryption on archive storage deals (only you can see retrieved data from the
+                  Show your successful deals on a directory page where others can retrieve them.
-              Filecoin network).
+                </System.CheckBox>
-            </System.CheckBox>
 
-            <div style={{ marginTop: 24 }}>
+                <System.CheckBox
-              <System.ButtonSecondary
+                  style={{ marginTop: 24 }}
-                onClick={this._handleSaveFilecoin}
+                  name="allow_automatic_data_storage"
-                loading={this.state.changingFilecoin}
+                  value={this.state.allow_automatic_data_storage}
-              >
+                  onChange={this._handleCheckboxChange}
-                Save archiving settings
+                >
-              </System.ButtonSecondary>
+                  Allow Slate to make archive storage deals on your behalf to the Filecoin Network.
-            </div>
+                  You will get a receipt in the Filecoin section.
+                </System.CheckBox>
+
+                <System.CheckBox
+                  style={{ marginTop: 24 }}
+                  name="allow_encrypted_data_storage"
+                  value={this.state.allow_encrypted_data_storage}
+                  onChange={this._handleCheckboxChange}
+                >
+                  Force encryption on archive storage deals (only you can see retrieved data from
+                  the Filecoin network).
+                </System.CheckBox>
+
+                <div style={{ marginTop: 24 }}>
+                  <System.ButtonPrimary
+                    onClick={this._handleSaveFilecoin}
+                    loading={this.state.changingFilecoin}
+                  >
+                    Save archiving settings
+                  </System.ButtonPrimary>
+                </div>
+                <br />
+                <br />
+                <SceneSettings {...this.props} networkViewer={this.state.networkViewer} />
+              </React.Fragment>
+            ) : null}
+
+            {this.state.tab === 3 ? (
+              <React.Fragment>
+                {this.state.routes ? (
+                  <SceneSentinel routes={this.state.routes} />
+                ) : (
+                  <div css={STYLES_SPINNER_CONTAINER}>
+                    <LoaderSpinner style={{ height: 32, width: 32 }} />
+                  </div>
+                )}
+              </React.Fragment>
+            ) : null}
+
+            {this.state.tab === 4 ? (
+              <React.Fragment>
+                {this.state.miners ? (
+                  <SceneMiners miners={this.state.miners} />
+                ) : (
+                  <div css={STYLES_SPINNER_CONTAINER}>
+                    <LoaderSpinner style={{ height: 32, width: 32 }} />
+                  </div>
+                )}
+              </React.Fragment>
+            ) : null}
           </React.Fragment>
         ) : (
-          <LoaderSpinner style={{ marginTop: 48, height: 32, width: 32 }} />
+          <div css={STYLES_SPINNER_CONTAINER}>
+            <LoaderSpinner style={{ height: 32, width: 32 }} />
+          </div>
         )}
       </ScenePage>
     );

scenes/SceneDeals.js

@@ -7,46 +7,17 @@ import Section from "~/components/core/Section";
 import ScenePage from "~/components/core/ScenePage";
 import ScenePageHeader from "~/components/core/ScenePageHeader";
 
-let mounted = false;
-
 export default class SceneDeals extends React.Component {
-  state = { deals: [], loaded: false };
-
-  async componentDidMount() {
-    if (mounted) {
-      return null;
-    }
-
-    mounted = true;
-    let deals = [];
-    try {
-      const response = await fetch("/api/network-deals");
-      const json = await response.json();
-      deals = json.data.deals;
-    } catch (e) {}
-
-    if (!deals || !deals.length) {
-      this.setState({ loaded: true });
-      return null;
-    }
-
-    this.setState({ deals, loaded: true });
-  }
-
-  componentWillUnmount() {
-    mounted = false;
-  }
-
   render() {
     let addressSentence = "Your deals are made from your default address.";
 
     return (
-      <ScenePage>
+      <React.Fragment>
-        <ScenePageHeader title="Storage deal history">
+        <ScenePageHeader>
           View all of your storage deals that are in progress or successful. {addressSentence}
         </ScenePageHeader>
 
-        {this.state.loaded ? (
+        {this.props.dealsLoaded ? (
           <Section title={"History"} style={{ maxWidth: 960, minWidth: "auto" }}>
             <System.Table
               data={{
@@ -93,7 +64,7 @@ export default class SceneDeals extends React.Component {
                     type: "RETRIEVABLE",
                   },
                 ],
-                rows: this.state.deals,
+                rows: this.props.deals,
               }}
             />
           </Section>
@@ -102,7 +73,7 @@ export default class SceneDeals extends React.Component {
             <LoaderSpinner style={{ height: 32, width: 32 }} />
           </div>
         )}
-      </ScenePage>
+      </React.Fragment>
     );
   }
 }

scenes/SceneMakeFilecoinDeal.js

@@ -58,30 +58,13 @@ const STYLES_RIGHT = css`
 `;
 
 const DEFAULT_ERROR_MESSAGE = "We could not make your deal. Please try again later.";
-let mounted = false;
 
 export default class SceneMakeFilecoinDeal extends React.Component {
-  state = { encryption: false };
+  state = {
-
+    encryption: false,
-  async componentDidMount() {
+    networkViewer: this.props.networkViewer,
-    if (mounted) {
+    ...createState(this.props.networkViewer.settings),
-      return;
+  };
-    }
-
-    mounted = true;
-    let networkViewer;
-    try {
-      const response = await fetch("/api/network");
-      const json = await response.json();
-      networkViewer = json.data;
-    } catch (e) {}
-
-    this.setState({
-      networkViewer,
-      ...createState(networkViewer.settings),
-      encryption: false,
-    });
-  }
 
   _handleUpload = async (e) => {
     e.persist();
@@ -329,10 +312,6 @@ export default class SceneMakeFilecoinDeal extends React.Component {
     this.setState({ [e.target.name]: e.target.value });
   };
 
-  componentWillUnmount() {
-    mounted = false;
-  }
-
   render() {
     const { networkViewer } = this.state;
     const addressMap = {};
@@ -368,7 +347,7 @@ export default class SceneMakeFilecoinDeal extends React.Component {
     console.log(this.state);
 
     return (
-      <ScenePage>
+      <React.Fragment>
         <input
           css={STYLES_FILE_HIDDEN}
           multiple
@@ -377,9 +356,9 @@ export default class SceneMakeFilecoinDeal extends React.Component {
           onChange={this._handleUpload}
         />
 
-        <ScenePageHeader title="Make an one-off Filecoin Storage Deal">
+        <ScenePageHeader>
           Upload data and make one-off storage deals in the Filecoin network here. You must store at
-          least 100MB of data.
+          least 100MB of data to make a storage deal.
         </ScenePageHeader>
 
         {this.state.networkViewer ? (
@@ -585,7 +564,7 @@ export default class SceneMakeFilecoinDeal extends React.Component {
         ) : (
           <LoaderSpinner style={{ marginTop: 48, height: 32, width: 32 }} />
         )}
-      </ScenePage>
+      </React.Fragment>
     );
   }
 }

scenes/SceneMiners.js

@@ -5,40 +5,11 @@ import Section from "~/components/core/Section";
 import ScenePage from "~/components/core/ScenePage";
 import ScenePageHeader from "~/components/core/ScenePageHeader";
 
-let mounted = false;
-
 export default class SceneMiners extends React.Component {
-  state = { miners: [] };
-
-  async componentDidMount() {
-    if (mounted) {
-      return null;
-    }
-
-    mounted = true;
-
-    let miners = [];
-    try {
-      const response = await fetch("https://sentinel.slate.host/api/mapped-static-global-miners");
-      const json = await response.json();
-      const sources = json.data;
-
-      sources.forEach((group) => {
-        miners = [...group.minerAddresses, ...miners];
-      });
-    } catch (e) {}
-
-    this.setState({ miners });
-  }
-
-  componentWillUnmount() {
-    mounted = false;
-  }
-
   render() {
     return (
-      <ScenePage>
+      <React.Fragment>
-        <ScenePageHeader title="Miners">
+        <ScenePageHeader>
           Whenever you make a deal against the Filecoin Network, Slate works with Textile's
           infrastructure to find the best possible miner to make a storage deal with.
         </ScenePageHeader>
@@ -73,7 +44,7 @@ export default class SceneMiners extends React.Component {
                   width: "100%",
                 },
               ],
-              rows: this.state.miners.map((each) => {
+              rows: this.props.miners.map((each) => {
                 return {
                   ...each,
                   ...each.storageAsk,
@@ -82,7 +53,7 @@ export default class SceneMiners extends React.Component {
             }}
           />
         </Section>
-      </ScenePage>
+      </React.Fragment>
     );
   }
 }

scenes/SceneSentinel.js

@@ -5,36 +5,11 @@ import Section from "~/components/core/Section";
 import ScenePage from "~/components/core/ScenePage";
 import ScenePageHeader from "~/components/core/ScenePageHeader";
 
-let mounted = false;
-
 export default class SceneSentinel extends React.Component {
-  state = { routes: [] };
-
-  async componentDidMount() {
-    if (mounted) {
-      return null;
-    }
-
-    mounted = true;
-
-    let routes;
-    try {
-      const response = await fetch("https://sentinel.slate.host/api");
-      const json = await response.json();
-      routes = json.data;
-    } catch (e) {}
-
-    this.setState({ routes });
-  }
-
-  componentWillUnmount() {
-    mounted = false;
-  }
-
   render() {
     return (
-      <ScenePage>
+      <React.Fragment>
-        <ScenePageHeader title="Network API">
+        <ScenePageHeader>
           Slate provides access to recent data on the Filecoin Network through Sentinel. Each of
           these API endpoints can be used programatically.
         </ScenePageHeader>
@@ -51,7 +26,7 @@ export default class SceneSentinel extends React.Component {
                   type: "NEW_WINDOW",
                 },
               ],
-              rows: this.state.routes.map((r) => {
+              rows: this.props.routes.map((r) => {
                 const route = `https://sentinel.slate.host${r}?offset=0&limit=200`;
                 return {
                   route,
@@ -60,7 +35,7 @@ export default class SceneSentinel extends React.Component {
             }}
           />
         </Section>
-      </ScenePage>
+      </React.Fragment>
     );
   }
 }

scenes/SceneSettings.js

@@ -59,16 +59,9 @@ export default class SceneSettings extends React.Component {
     }
 
     mounted = true;
-    let networkViewer;
-    try {
-      const response = await fetch("/api/network");
-      const json = await response.json();
-      networkViewer = json.data;
-    } catch (e) {}
-
     this.setState({
-      networkViewer,
+      networkViewer: this.props.networkViewer,
-      ...createState(networkViewer.settings),
+      ...createState(this.props.networkViewer.settings),
     });
   }
 
@@ -201,11 +194,7 @@ export default class SceneSettings extends React.Component {
     }
 
     return (
-      <ScenePage>
+      <React.Fragment>
-        <ScenePageHeader title="Deal settings">
-          Modify your automated Filecoin storage deal settings.
-        </ScenePageHeader>
-
         {this.state.networkViewer ? (
           <React.Fragment>
             <System.DescriptionGroup
@@ -356,14 +345,14 @@ export default class SceneSettings extends React.Component {
 
             <div style={{ marginTop: 32 }}>
               <System.ButtonPrimary loading={this.state.loading} onClick={this._handleSave}>
-                Save
+                Save configuration
               </System.ButtonPrimary>
             </div>
           </React.Fragment>
         ) : (
           <LoaderSpinner style={{ marginTop: 48, height: 32, width: 32 }} />
         )}
-      </ScenePage>
+      </React.Fragment>
     );
   }
 }

scenes/SceneTara.js

@@ -1,53 +0,0 @@
-import * as React from "react";
-import * as Actions from "~/common/actions";
-import * as System from "~/components/system";
-import * as SVG from "~/common/svg";
-import * as Constants from "~/common/constants";
-
-import { css } from "@emotion/core";
-import { TabGroup } from "~/components/core/TabGroup";
-import { ButtonPrimary } from "~/components/system/components/Buttons";
-import { dispatchCustomEvent } from "~/common/custom-events";
-import { FileTypeGroup } from "~/components/core/FileTypeIcon";
-
-import ScenePage from "~/components/core/ScenePage";
-import DataView from "~/components/core/DataView";
-import ScenePageHeader from "~/components/core/ScenePageHeader";
-import EmptyState from "~/components/core/EmptyState";
-
-export default class SceneTara extends React.Component {
-  render() {
-    return (
-      <ScenePage>
-        <ScenePageHeader
-          title="Tara Sandbox"
-          actions={
-            <ButtonPrimary
-              onClick={() => {
-                this.props.onAction({
-                  type: "SIDEBAR",
-                  value: "SIDEBAR_ADD_FILE_TO_BUCKET",
-                });
-              }}
-            >
-              Upload data
-            </ButtonPrimary>
-          }
-        />
-
-        {this.props.viewer.library[0].children && this.props.viewer.library[0].children.length ? (
-          <DataView
-            onAction={this.props.onAction}
-            viewer={this.props.viewer}
-            items={this.props.viewer.library[0].children}
-          />
-        ) : (
-          <EmptyState>
-            <FileTypeGroup />
-            <div style={{ marginTop: 24 }}>Drag and drop files into Slate to upload</div>
-          </EmptyState>
-        )}
-      </ScenePage>
-    );
-  }
-}

scenes/SceneWallet.js

@@ -85,33 +85,7 @@ const STYLES_ITEM_GROUP = css`
   justify-content: flex-start;
 `;
 
-let mounted = false;
-
 export default class SceneWallet extends React.Component {
-  state = {};
-
-  async componentDidMount() {
-    if (mounted) {
-      return null;
-    }
-
-    mounted = true;
-    let networkViewer;
-    try {
-      const response = await fetch("/api/network");
-      const json = await response.json();
-      networkViewer = json.data;
-    } catch (e) {}
-
-    this.setState({
-      networkViewer,
-    });
-  }
-
-  componentWillUnmount() {
-    mounted = false;
-  }
-
   state = { table_transaction: null, visible: false };
 
   _handleChange = (e) => {
@@ -137,7 +111,7 @@ export default class SceneWallet extends React.Component {
 
   render() {
     // TODO(jim): Temporary because of read only Filecoin Addresses
-    const { networkViewer } = this.state;
+    const { networkViewer } = this.props;
 
     const addressMap = {};
     const addresses = [];
@@ -160,12 +134,10 @@ export default class SceneWallet extends React.Component {
     }
 
     return (
-      <ScenePage>
+      <React.Fragment>
-        <ScenePageHeader title="Wallet">
+        <ScenePageHeader>
           This is your receive only wallet address. You can deposit Filecoin to your address here.
-          You can not send Filecoin from this wallet to other people. <br />
+          You can not send Filecoin from this wallet to other people. Please read our{" "}
-          <br />
-          Please read our{" "}
           <a href="/terms" target="_blank">
             terms of service
           </a>{" "}
@@ -257,7 +229,7 @@ export default class SceneWallet extends React.Component {
         ) : (
           <LoaderSpinner style={{ marginTop: 48, height: 32, width: 32 }} />
         )}
-      </ScenePage>
+      </React.Fragment>
     );
   }
 }