filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 12:24:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

nested tabs for filecoin pages

Browse Source
This commit is contained in:
Martina 2020-11-15 13:54:14 -08:00
parent b2a798b084
commit 23174033ac
11 changed files with 214 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
common/navigation-data.js
View File

@ -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: [
{
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,
},
],
children: null,
},
{
id: "V1_NAVIGATION_FILECOIN_STORAGE_DEAL",
decorator: "MAKE_DEAL",
name: "Storage Deal",
filecoin: true,
pageTitle: "Make an one-off Filecoin storage deal",
id: "V1_NAVIGATION_API",
decorator: "SETTINGS_DEVELOPER",
name: "API",
pageTitle: "Developer API",
children: null,
},
{
id: "V1_NAVIGATION_PROFILE_EDIT",

20
common/svg.js
View File

@ -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="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="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="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="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" />
</g>
<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="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="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="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="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" />
</svg>
);

9
components/core/Application.js
View File

@ -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;

225
scenes/SceneArchive.js
View File

@ -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`
font-family: ${Constants.font.semiBold};
font-size: 16px;
margin-bottom: 16px;
const STYLES_SPINNER_CONTAINER = css`
width: 100%;
height: 40vh;
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
must have at last 100MB stored to make an archive storage deal. <br />
{/* 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 /> */}
</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 />
<System.ButtonPrimary
onClick={() =>
this.props.onAction({
type: "SIDEBAR",
value: "SIDEBAR_FILECOIN_ARCHIVE",
})
}
>
Archive your data
</System.ButtonPrimary>
{this.state.tab === 0 ? (
<React.Fragment>
<SceneMakeFilecoinDeal {...this.props} networkViewer={this.state.networkViewer} />
</React.Fragment>
) : null}
<System.DescriptionGroup
style={{ marginTop: 64 }}
label="Archive automation settings"
description="Configure the automation settings for your archive storage deals."
/>
{this.state.tab === 1 ? (
<React.Fragment>
<SceneWallet {...this.props} networkViewer={this.state.networkViewer} />
<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
style={{ marginTop: 24 }}
name="allow_filecoin_directory_listing"
value={this.state.allow_filecoin_directory_listing}
onChange={this._handleCheckboxChange}
>
Show your successful deals on a directory page where others can retrieve them.
</System.CheckBox>
{this.state.tab === 2 ? (
<React.Fragment>
<System.P style={{ marginTop: 24 }}>
Archive all of your data onto the Filecoin Network with a storage deal using your
default settings.
</System.P>
<br />
<System.ButtonPrimary
onClick={() =>
this.props.onAction({
type: "SIDEBAR",
value: "SIDEBAR_FILECOIN_ARCHIVE",
})
}
>
Archive your data
</System.ButtonPrimary>
<System.CheckBox
style={{ marginTop: 24 }}
name="allow_automatic_data_storage"
value={this.state.allow_automatic_data_storage}
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.DescriptionGroup
style={{ marginTop: 64 }}
label="Archive automation settings"
description="Configure the automation settings for your archive storage deals."
/>
<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>
<System.CheckBox
style={{ marginTop: 24 }}
name="allow_filecoin_directory_listing"
value={this.state.allow_filecoin_directory_listing}
onChange={this._handleCheckboxChange}
>
Show your successful deals on a directory page where others can retrieve them.
</System.CheckBox>
<div style={{ marginTop: 24 }}>
<System.ButtonSecondary
onClick={this._handleSaveFilecoin}
loading={this.state.changingFilecoin}
>
Save archiving settings
</System.ButtonSecondary>
</div>
<System.CheckBox
style={{ marginTop: 24 }}
name="allow_automatic_data_storage"
value={this.state.allow_automatic_data_storage}
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
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>
);

39
scenes/SceneDeals.js
View File

@ -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>
<ScenePageHeader title="Storage deal history">
<React.Fragment>
<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>
);
}
}

39
scenes/SceneMakeFilecoinDeal.js
View File

@ -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 };
async componentDidMount() {
if (mounted) {
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,
});
}
state = {
encryption: false,
networkViewer: this.props.networkViewer,
...createState(this.props.networkViewer.settings),
};
_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>
);
}
}

37
scenes/SceneMiners.js
View File

@ -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>
<ScenePageHeader title="Miners">
<React.Fragment>
<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>
);
}
}

33
scenes/SceneSentinel.js
View File

@ -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>
<ScenePageHeader title="Network API">
<React.Fragment>
<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>
);
}
}

21
scenes/SceneSettings.js
View File

@ -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,
...createState(networkViewer.settings),
networkViewer: this.props.networkViewer,
...createState(this.props.networkViewer.settings),
});
}
@ -201,11 +194,7 @@ export default class SceneSettings extends React.Component {
}
return (
<ScenePage>
<ScenePageHeader title="Deal settings">
Modify your automated Filecoin storage deal settings.
</ScenePageHeader>
<React.Fragment>
{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>
);
}
}

53
scenes/SceneTara.js
View File

@ -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>
);
}
}

38
scenes/SceneWallet.js
View File

@ -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>
<ScenePageHeader title="Wallet">
<React.Fragment>
<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 />
<br />
Please read our{" "}
You can not send Filecoin from this wallet to other people. 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>
);
}
}