slate/scenes/SceneMakeFilecoinDeal.js

530 lines
15 KiB
JavaScript
Raw Normal View History

import * as React from "react";
import * as Strings from "~/common/strings";
2020-09-23 14:17:56 +03:00
import * as Actions from "~/common/actions";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
2020-09-23 14:17:56 +03:00
import * as SVG from "~/common/svg";
2020-09-23 22:46:56 +03:00
import * as Window from "~/common/window";
import * as Messages from "~/common/messages";
import * as FileUtilities from "~/common/file-utilities";
import * as Events from "~/common/custom-events";
2020-11-30 08:24:22 +03:00
import { css } from "@emotion/react";
import { createState } from "~/scenes/SceneSettings";
import { LoaderSpinner } from "~/components/system/components/Loaders";
import { FilecoinNumber } from "@glif/filecoin-number";
import Section from "~/components/core/Section";
import ScenePage from "~/components/core/ScenePage";
import ScenePageHeader from "~/components/core/ScenePageHeader";
const STAGING_DEAL_BUCKET = "stage-deal";
const STYLES_SPINNER_CONTAINER = css`
width: 100%;
height: 40vh;
display: flex;
align-items: center;
justify-content: center;
`;
2020-09-23 14:17:56 +03:00
const STYLES_FILE_HIDDEN = css`
height: 1px;
width: 1px;
opacity: 0;
visibility: hidden;
position: fixed;
top: -1px;
left: -1px;
`;
const STYLES_ROW = css`
display: flex;
2020-09-23 14:17:56 +03:00
align-items: flex-start;
justify-content: space-between;
`;
const STYLES_LEFT = css`
color: ${Constants.system.black};
transition: 200ms ease all;
min-width: 10%;
width: 100%;
:visited {
color: ${Constants.system.black};
}
`;
const STYLES_RIGHT = css`
flex-shrink: 0;
transition: 200ms ease all;
cursor: pointer;
:hover {
color: ${Constants.system.brand};
}
`;
const DEFAULT_ERROR_MESSAGE = "We could not make your deal. Please try again later.";
let mounted = false;
2020-09-23 12:46:59 +03:00
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) {}
2020-12-21 02:05:17 +03:00
if (networkViewer) {
this.setState({
networkViewer,
...createState(networkViewer.settings),
encryption: false,
});
}
}
2020-09-23 22:46:56 +03:00
2020-09-23 14:17:56 +03:00
_handleUpload = async (e) => {
e.persist();
if (!e.target.files) {
return null;
}
if (!e.target.files.length) {
return null;
}
2020-09-23 14:17:56 +03:00
this.setState({ loading: true });
for (let i = 0; i < e.target.files.length; i++) {
const file = e.target.files[i];
const response = await FileUtilities.upload({
bucketName: STAGING_DEAL_BUCKET,
routes: this.props.resources,
file,
});
}
2020-09-23 14:17:56 +03:00
let networkViewer;
try {
const response = await fetch("/api/network");
const json = await response.json();
networkViewer = json.data;
} catch (e) {}
this.setState({
networkViewer,
loading: false,
});
};
_handleArchive = async (e) => {
this.setState({ archiving: true });
const response = await Actions.archive({
bucketName: STAGING_DEAL_BUCKET,
forceEncryption: this.state.encryption,
settings: {
/**
* RepFactor indicates the desired amount of active deals
* with different miners to store the data. While making deals
* the other attributes of FilConfig are considered for miner selection.
*/
repFactor: Number(this.state.repFactor),
/**
* DealMinDuration indicates the duration to be used when making new deals.
*/
dealMinDuration: this.state.dealMinDuration,
/**
* ExcludedMiners is a set of miner addresses won't be ever be selected
*when making new deals, even if they comply to other filters.
*/
excludedMiners: this.state.excludedMiners,
/**
* TrustedMiners is a set of miner addresses which will be forcibly used
* when making new deals. An empty/nil list disables this feature.
*/
trustedMiners: this.state.trustedMiners,
/**
* Renew indicates deal-renewal configuration.
*/
renew: {
enabled: this.state.renewEnabled,
threshold: this.state.renewThreshold,
},
/**
* CountryCodes indicates that new deals should select miners on specific countries.
*/
countryCodes: [],
/**
* Addr is the wallet address used to store the data in filecoin
*/
addr: this.state.addr,
/**
* MaxPrice is the maximum price that will be spent to store the data, 0 is no max
*/
maxPrice: this.state.maxPrice,
/**
*
* FastRetrieval indicates that created deals should enable the
* fast retrieval feature.
*/
// fastRetrieval: boolean
/**
* DealStartOffset indicates how many epochs in the future impose a
* deadline to new deals being active on-chain. This value might influence
* if miners accept deals, since they should seal fast enough to satisfy
* this constraint.
*/
// dealStartOffset: number
},
});
2020-09-23 14:17:56 +03:00
if (Events.hasError(response)) {
2020-09-23 22:46:56 +03:00
this.setState({ archiving: false });
}
2020-09-23 14:17:56 +03:00
2020-09-23 22:46:56 +03:00
await Window.delay(5000);
2020-10-30 12:53:56 +03:00
alert(
"Your storage deal was put in the queue. This can take up to 36 hours, check back later."
);
2020-09-23 22:46:56 +03:00
2020-12-19 08:25:50 +03:00
this.props.onAction({ type: "NAVIGATE", value: "NAV_FILECOIN" });
2020-09-23 14:17:56 +03:00
};
_handleRemove = async (cid) => {
this.setState({ loading: true });
await Actions.removeFromBucket({ bucketName: STAGING_DEAL_BUCKET, cid });
2020-09-23 14:17:56 +03:00
let networkViewer;
try {
const response = await fetch("/api/network");
const json = await response.json();
networkViewer = json.data;
} catch (e) {}
this.setState({
networkViewer,
loading: false,
});
};
_handleAddTrustedMiner = () => {
const miner = prompt("Enter the Miner ID to trust.");
if (Strings.isEmpty(miner)) {
return Events.dispatchMessage({ message: "You must provide a miner ID." });
}
if (this.state.trustedMiners.includes(miner)) {
return Events.dispatchMessage({
message: `${miner} is already on your list of miners to try.`,
});
}
this.setState({
trustedMiners: [miner, ...this.state.trustedMiners],
});
};
_handleAddExcludedMiner = () => {
const miner = prompt("Enter the Miner ID to exclude.");
if (Strings.isEmpty(miner)) {
return Events.dispatchMessage({ message: "You must provide a miner ID." });
}
if (this.state.excludedMiners.includes(miner)) {
return Events.dispatchMessage({
message: `${miner} is already on your list of miners to exclude.`,
});
}
this.setState({
excludedMiners: [miner, ...this.state.excludedMiners],
});
};
_handleRemoveTrustedMiner = (minerId) => {
this.setState({
trustedMiners: this.state.trustedMiners.filter((m) => m !== minerId),
});
};
_handleRemoveExcludedMiner = (minerId) => {
this.setState({
excludedMiners: this.state.excludedMiners.filter((m) => m !== minerId),
});
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
componentWillUnmount() {
mounted = false;
}
render() {
2020-09-23 22:46:56 +03:00
const { networkViewer } = this.state;
const addressMap = {};
const addresses = [];
let selected = null;
let balance = 0;
if (networkViewer) {
// TODO(jim): restore this when the wallet function is back in Pow.
2020-09-23 22:46:56 +03:00
}
let inFil = 0;
2020-09-23 22:46:56 +03:00
if (networkViewer) {
const filecoinNumber = new FilecoinNumber(`${this.state.maxPrice}`, "attofil");
inFil = filecoinNumber.toFil();
}
console.log(this.state);
return (
<ScenePage>
2020-09-23 14:17:56 +03:00
<input
css={STYLES_FILE_HIDDEN}
multiple
type="file"
id="file"
onChange={this._handleUpload}
/>
2020-09-25 10:08:08 +03:00
2021-01-21 22:20:13 +03:00
<ScenePageHeader title="Make a one-off Filecoin Storage Deal">
Upload data and make one-off storage deals in the Filecoin network here. Files must be at
least 100MB in size.
</ScenePageHeader>
{this.state.networkViewer ? (
<React.Fragment>
<System.DescriptionGroup
style={{ marginTop: 48, maxWidth: 688 }}
label="Storage deal files"
description="You can add up to 4GB of files."
/>
2020-09-23 12:46:59 +03:00
<Section
style={{ marginTop: 24, maxWidth: 688, minWidth: "auto" }}
2020-09-23 12:46:59 +03:00
onAction={this.props.onAction}
buttons={[
{
name: "Add file",
2020-09-23 14:17:56 +03:00
multiple: true,
type: "file",
id: "file",
2020-09-23 12:46:59 +03:00
},
]}
>
2020-09-23 14:17:56 +03:00
{this.state.loading ? (
<div css={STYLES_SPINNER_CONTAINER}>
2020-09-23 14:17:56 +03:00
<LoaderSpinner style={{ height: 32, width: 32 }} />
</div>
) : (
<System.Table
data={{
columns: [
{
key: "cid",
name: "CID",
width: "100%",
},
],
rows: this.state.networkViewer.deal.map((file) => {
return {
cid: (
<div css={STYLES_ROW}>
<span css={STYLES_LEFT} target="_blank">
{file.cid}
</span>
<span css={STYLES_RIGHT} onClick={() => this._handleRemove(file.cid)}>
<SVG.Dismiss height="16px" />
</span>
</div>
),
};
}),
}}
/>
2020-09-23 14:17:56 +03:00
)}
2020-09-23 12:46:59 +03:00
</Section>
<System.DescriptionGroup
style={{ marginTop: 64, maxWidth: 688 }}
label="Miners"
description="Specify miners for our deal maker to try first, and specify miners for our deal maker to ignore."
/>
<Section
style={{ marginTop: 24, maxWidth: 688, minWidth: "auto" }}
buttons={[
{
name: "Add miner",
onClick: this._handleAddTrustedMiner,
},
]}
>
<System.Table
data={{
columns: [
{
key: "miner",
name: "Miner",
width: "100%",
},
],
rows: this.state.trustedMiners.map((miner) => {
return {
miner: (
<div css={STYLES_ROW} key={miner}>
<span css={STYLES_LEFT} target="_blank">
{miner}
</span>
<span
css={STYLES_RIGHT}
onClick={() => this._handleRemoveTrustedMiner(miner)}
>
<SVG.Dismiss height="16px" />
</span>
</div>
),
};
}),
}}
/>
</Section>
<Section
style={{ maxWidth: 688, minWidth: "auto" }}
buttons={[
{
name: "Exclude miner",
onClick: this._handleAddExcludedMiner,
},
]}
>
<System.Table
data={{
columns: [
{
key: "miner",
name: "Miner",
width: "100%",
},
],
rows: this.state.excludedMiners.map((miner) => {
return {
miner: (
<div css={STYLES_ROW} key={miner}>
<span css={STYLES_LEFT} target="_blank">
Excluding: {miner}
</span>
<span
css={STYLES_RIGHT}
onClick={() => this._handleRemoveExcludedMiner(miner)}
>
<SVG.Dismiss height="16px" />
</span>
</div>
),
};
}),
}}
/>
</Section>
<System.DescriptionGroup
style={{ marginTop: 64, maxWidth: 688 }}
label="Default Filecoin address"
description={`${this.state.addr}`}
/>
<System.Input
containerStyle={{ marginTop: 32, maxWidth: 688 }}
2020-09-23 12:46:59 +03:00
descriptionStyle={{ maxWidth: 688 }}
label="Default Filecoin replication and availability factor"
description="How many times should we replicate this deal across your selected miners?"
name="repFactor"
type="number"
value={this.state.repFactor}
placeholder="Type in amount of miners"
onChange={this._handleChange}
/>
<System.Input
2020-09-23 12:46:59 +03:00
containerStyle={{ marginTop: 24, maxWidth: 688 }}
descriptionStyle={{ maxWidth: 688 }}
label="Default Filecoin deal duration"
2020-09-25 03:37:09 +03:00
description={`Your deal is set for ${Strings.getDaysFromEpoch(
this.state.dealMinDuration
2020-09-25 03:37:09 +03:00
)}.`}
name="dealMinDuration"
type="number"
2020-09-23 12:46:59 +03:00
unit="epochs"
value={this.state.dealMinDuration}
2020-09-23 22:46:56 +03:00
placeholder="Type in epochs (1 epoch = ~30 seconds)"
onChange={this._handleChange}
/>
<System.Input
2020-09-23 12:46:59 +03:00
containerStyle={{ marginTop: 24, maxWidth: 688 }}
descriptionStyle={{ maxWidth: 688 }}
label="Max Filecoin price"
2020-09-23 12:46:59 +03:00
unit="attoFIL"
type="number"
description={`Set the maximum Filecoin price you're willing to pay. The current price you have set is equivalent to ${inFil} FIL`}
name="maxPrice"
value={this.state.maxPrice}
placeholder="Type in amount of Filecoin (attoFIL)"
onChange={this._handleChange}
/>
<System.CheckBox
style={{ marginTop: 48 }}
name="encryption"
value={this.state.encryption}
onChange={this._handleChange}
>
Encrypt this storage deal. Accessing the contents will require decryption.
</System.CheckBox>
2020-09-23 14:17:56 +03:00
<System.ButtonPrimary
style={{ marginTop: 48 }}
onClick={this._handleArchive}
loading={this.state.archiving}
>
Make storage deal
</System.ButtonPrimary>
</React.Fragment>
) : (
<div css={STYLES_SPINNER_CONTAINER}>
<LoaderSpinner style={{ height: 32, width: 32 }} />
</div>
)}
</ScenePage>
);
}
}