slate/scenes/SceneArchive.js

244 lines
7.9 KiB
JavaScript
Raw Normal View History

import * as React from "react";
import * as System from "~/components/system";
2020-09-09 20:56:35 +03:00
import * as Constants from "~/common/constants";
2020-09-27 04:54:39 +03:00
import * as Actions from "~/common/actions";
2020-09-23 22:46:56 +03:00
import * as Strings from "~/common/strings";
import { css } from "@emotion/core";
2020-09-09 20:56:35 +03:00
import { LoaderSpinner } from "~/components/system/components/Loaders";
2020-11-16 00:54:14 +03:00
import { TabGroup } from "~/components/core/TabGroup";
import ScenePage from "~/components/core/ScenePage";
import ScenePageHeader from "~/components/core/ScenePageHeader";
2020-11-16 00:54:14 +03:00
import SceneSettings from "~/scenes/SceneSettings";
import SceneDeals from "~/scenes/SceneDeals";
import SceneWallet from "~/scenes/SceneWallet";
import SceneSentinel from "~/scenes/SceneSentinel";
import SceneMiners from "~/scenes/SceneMiners";
2020-11-16 00:54:14 +03:00
const STYLES_SPINNER_CONTAINER = css`
width: 100%;
height: 40vh;
display: flex;
align-items: center;
justify-content: center;
2020-09-09 20:56:35 +03:00
`;
2020-09-23 12:46:59 +03:00
let mounted = false;
export default class SceneArchive extends React.Component {
2020-09-27 04:54:39 +03:00
state = {
2020-11-16 00:54:14 +03:00
deals: [],
dealsLoaded: false,
tab: 0,
2020-09-27 04:54:39 +03:00
networkViewer: null,
allow_filecoin_directory_listing: this.props.viewer.allow_filecoin_directory_listing,
allow_automatic_data_storage: this.props.viewer.allow_automatic_data_storage,
allow_encrypted_data_storage: this.props.viewer.allow_encrypted_data_storage,
2020-09-27 04:54:39 +03:00
};
2020-09-09 20:56:35 +03:00
async componentDidMount() {
2020-09-23 12:46:59 +03:00
if (mounted) {
return null;
}
mounted = true;
2020-09-09 20:56:35 +03:00
let networkViewer;
try {
const response = await fetch("/api/network");
const json = await response.json();
networkViewer = json.data;
} catch (e) {}
2020-11-16 00:54:14 +03:00
await this.setState({
2020-09-09 20:56:35 +03:00
networkViewer,
});
2020-11-16 00:54:14 +03:00
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 });
2020-09-09 20:56:35 +03:00
}
2020-09-27 04:54:39 +03:00
_handleCheckboxChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
_handleSaveFilecoin = async (e) => {
this.setState({ changingFilecoin: true });
await Actions.updateViewer({
data: {
allow_filecoin_directory_listing: this.state.allow_filecoin_directory_listing,
2020-09-27 19:38:20 +03:00
allow_automatic_data_storage: this.state.allow_automatic_data_storage,
2020-09-27 04:54:39 +03:00
allow_encrypted_data_storage: this.state.allow_encrypted_data_storage,
},
});
this.setState({ changingFilecoin: false });
};
2020-09-23 12:46:59 +03:00
componentWillUnmount() {
mounted = false;
}
render() {
return (
<ScenePage>
2020-09-27 19:38:20 +03:00
<ScenePageHeader title="Filecoin">
2020-11-16 00:54:14 +03:00
{/* 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>
2020-11-16 00:54:14 +03:00
<TabGroup
tabs={["Archive Settings", "Wallet", "API", "Miners"]}
2020-11-16 00:54:14 +03:00
value={this.state.tab}
onChange={(value) => this.setState({ tab: value })}
/>
2020-09-09 20:56:35 +03:00
{this.state.networkViewer ? (
<React.Fragment>
2020-11-16 00:54:14 +03:00
{this.state.tab === 0 ? (
<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.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_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>
<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 === 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}
{this.state.tab === 2 ? (
2020-11-16 00:54:14 +03:00
<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 === 3 ? (
2020-11-16 00:54:14 +03:00
<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}
2020-09-09 20:56:35 +03:00
</React.Fragment>
) : (
2020-11-16 00:54:14 +03:00
<div css={STYLES_SPINNER_CONTAINER}>
<LoaderSpinner style={{ height: 32, width: 32 }} />
</div>
2020-09-09 20:56:35 +03:00
)}
</ScenePage>
);
}
}