slate/scenes/SceneSettings.js

282 lines
9.5 KiB
JavaScript
Raw Normal View History

import * as React from "react";
import * as Actions from "~/common/actions";
import * as System from "~/components/system";
2020-09-25 03:37:09 +03:00
import * as Strings from "~/common/strings";
import { css } from "@emotion/react";
2020-09-09 20:56:35 +03:00
import { LoaderSpinner } from "~/components/system/components/Loaders";
import ScenePage from "~/components/core/ScenePage";
2020-09-09 20:56:35 +03:00
import ScenePageHeader from "~/components/core/ScenePageHeader";
const STYLES_GROUP = css`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
overflow-wrap: break-word;
white-space: pre-wrap;
max-width: 768px;
`;
const STYLES_SUBGROUP = css`
width: 100%;
overflow-wrap: break-word;
white-space: pre-wrap;
`;
const STYLES_LEFT = css`
padding: 12px 0 0 0;
min-width: 10%;
overflow-wrap: break-word;
white-space: pre-wrap;
`;
const STYLES_RIGHT = css`
padding-left: 48px;
padding-top: 24px;
flex-shrink: 0;
`;
export const createState = (config) => {
2020-09-09 20:56:35 +03:00
return {
settings_hot_enabled: config.hot.enabled,
settings_hot_allow_unfreeze: config.hot.allowUnfreeze,
settings_hot_ipfs_add_timeout: config.hot.ipfs.addTimeout,
settings_cold_enabled: config.cold.enabled,
settings_cold_default_address: config.cold.filecoin.addr,
settings_cold_default_duration: config.cold.filecoin.dealMinDuration,
settings_cold_default_replication_factor: config.cold.filecoin.repFactor,
settings_cold_default_excluded_miners: config.cold.filecoin.excludedMinersList,
settings_cold_default_trusted_miners: config.cold.filecoin.trustedMinersList,
2020-09-09 20:56:35 +03:00
settings_cold_default_max_price: config.cold.filecoin.maxPrice,
settings_cold_default_auto_renew: config.cold.filecoin.renew.enabled,
settings_cold_default_auto_renew_max_price: config.cold.filecoin.renew.threshold,
2020-09-09 20:56:35 +03:00
};
};
2020-09-23 12:46:59 +03:00
let mounted = false;
export default class SceneSettings extends React.Component {
2020-09-09 20:56:35 +03:00
state = {};
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) {}
this.setState({
networkViewer,
...createState(networkViewer.powerInfo.defaultStorageConfig),
});
}
2020-09-23 12:46:59 +03:00
componentWillUnmount() {
mounted = false;
}
_deferredSave = null;
_handleSave = async () => {
2020-07-24 06:15:32 +03:00
this.setState({ loading: true });
2020-09-09 20:56:35 +03:00
return alert(`Changing settings is currently disabled.`);
await Actions.updateViewer({
type: "SET_DEFAULT_STORAGE_CONFIG",
config: {
hot: {
enabled: this.state.settings_hot_enabled,
allowUnfreeze: this.state.settings_hot_allow_unfreeze,
ipfs: {
addTimeout: this.state.settings_hot_ipfs_add_timeout,
},
},
cold: {
enabled: this.state.settings_cold_enabled,
filecoin: {
addr: this.state.settings_cold_default_address,
dealMinDuration: this.state.settings_cold_default_duration,
repFactor: this.state.settings_cold_default_replication_factor,
excludedMinersList: this.state.settings_cold_default_excluded_miners,
trustedMinersList: this.state.settings_cold_default_trusted_miners,
maxPrice: this.state.settings_cold_default_max_price,
renew: {
enabled: this.state.settings_cold_default_auto_renew,
threshold: this.state.settings_cold_default_auto_renew_max_price,
},
},
},
},
});
2020-07-24 06:15:32 +03:00
await this.props.onRehydrate();
this.setState({ loading: false });
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<ScenePage>
2020-09-27 20:01:38 +03:00
<ScenePageHeader title="Deal settings (read-only)">
We do not allow changes to your deal settings at the moment. This is to ensure that your
storage deals have the maximum chance of success.
2020-09-09 20:56:35 +03:00
</ScenePageHeader>
2020-09-09 20:56:35 +03:00
{this.state.networkViewer ? (
<React.Fragment>
2020-09-23 23:02:00 +03:00
{/*<div css={STYLES_GROUP} style={{ marginTop: 48 }}>
2020-09-09 20:56:35 +03:00
<div css={STYLES_LEFT}>
<System.DescriptionGroup
label="Enable cold storage"
tooltip="Placeholder"
description="By enabling cold storage, every time you make a deal your data will be stored on the Filecoin Network."
/>
</div>
<div css={STYLES_RIGHT}>
<System.Toggle
name="settings_cold_enabled"
onChange={this._handleChange}
active={this.state.settings_cold_enabled}
/>
</div>
2020-09-23 23:02:00 +03:00
</div>*/}
2020-09-09 20:56:35 +03:00
{this.state.settings_cold_enabled ? (
<div css={STYLES_SUBGROUP}>
<System.Input
2020-09-23 23:02:00 +03:00
containerStyle={{ marginTop: 48 }}
2020-09-09 20:56:35 +03:00
label="Default Filecoin address (Read only)"
name="settings_cold_default_duration"
readOnly
type="text"
value={this.state.settings_cold_default_address}
onChange={this._handleChange}
/>
2020-09-09 20:56:35 +03:00
<System.Input
containerStyle={{ marginTop: 24 }}
label="Default Filecoin deal duration"
2020-09-25 03:37:09 +03:00
description={`${Strings.getDaysFromEpoch(
this.state.settings_cold_default_duration
)}`}
2020-09-09 20:56:35 +03:00
name="settings_cold_default_duration"
type="number"
value={this.state.settings_cold_default_duration}
placeholder="Type in epochs (~25 seconds)"
onChange={this._handleChange}
/>
2020-09-09 20:56:35 +03:00
<System.Input
containerStyle={{ marginTop: 24 }}
label="Default Filecoin replication factor"
name="settings_cold_default_replication_factor"
value={this.state.settings_cold_default_replication_factor}
placeholder="Type in amount of miners"
onChange={this._handleChange}
/>
2020-09-09 20:56:35 +03:00
<System.Input
containerStyle={{ marginTop: 24 }}
label="Max Filecoin price."
description="Set the maximum Filecoin price you're willing to pay."
name="settings_cold_default_max_price"
value={this.state.settings_cold_default_max_price}
placeholder="Type in amount of Filecoin"
onChange={this._handleChange}
/>
2020-09-25 03:37:09 +03:00
{/* <System.CheckBox
2020-09-09 20:56:35 +03:00
style={{ marginTop: 48 }}
name="settings_cold_default_auto_renew"
value={this.state.settings_cold_default_auto_renew}
onChange={this._handleChange}
>
Enable auto renew for Filecoin Network deals.
2020-09-25 03:37:09 +03:00
</System.CheckBox> */}
2020-09-09 20:56:35 +03:00
<System.Input
containerStyle={{ marginTop: 24 }}
label="Max Filecoin deal auto renew price."
name="settings_cold_default_auto_renew_max_price"
value={this.state.settings_cold_default_auto_renew_max_price}
placeholder="Type in amount of Filecoin"
onChange={this._handleChange}
/>
</div>
) : null}
2020-09-22 03:59:34 +03:00
{/* <div style={{ marginTop: 32 }}>
2020-09-09 20:56:35 +03:00
<System.ButtonPrimary
loading={this.state.loading}
onClick={this._handleSave}
>
Save
</System.ButtonPrimary>
2020-09-22 03:59:34 +03:00
</div> */}
2020-09-23 23:02:00 +03:00
{/*<div css={STYLES_GROUP} style={{ marginTop: 32 }}>
2020-09-09 20:56:35 +03:00
<div css={STYLES_LEFT}>
<System.DescriptionGroup
label="Enable hot storage"
description="By enabling hot storage, every time you make a deal your data will be stored on IPFS."
/>
</div>
<div css={STYLES_RIGHT}>
<System.Toggle
name="settings_hot_enabled"
onChange={this._handleChange}
active={this.state.settings_hot_enabled}
/>
</div>
2020-09-23 23:02:00 +03:00
</div> */}
2020-09-09 20:56:35 +03:00
{this.state.settings_hot_enabled ? (
<div css={STYLES_SUBGROUP}>
2020-09-25 03:37:09 +03:00
{/* <System.CheckBox
2020-09-09 20:56:35 +03:00
style={{ marginTop: 48 }}
name="settings_hot_allow_unfreeze"
value={this.state.settings_hot_allow_unfreeze}
onChange={this._handleChange}
>
IPFS allow unfreeze setting description.
2020-09-25 03:37:09 +03:00
</System.CheckBox> */}
2020-09-09 20:56:35 +03:00
<System.Input
containerStyle={{ marginTop: 24 }}
label="Add timeout"
name="settings_hot_ipfs_add_timeout"
value={this.state.settings_hot_ipfs_add_timeout}
placeholder="Type in seconds"
onChange={this._handleChange}
/>
</div>
) : null}
2020-09-22 03:59:34 +03:00
{/* <div style={{ marginTop: 32 }}>
2020-09-09 20:56:35 +03:00
<System.ButtonPrimary
loading={this.state.loading}
onClick={this._handleSave}
>
Save
</System.ButtonPrimary>
2020-09-22 03:59:34 +03:00
</div> */}
2020-09-09 20:56:35 +03:00
</React.Fragment>
) : (
<LoaderSpinner style={{ marginTop: 48, height: 32, width: 32 }} />
)}
</ScenePage>
);
}
}