slate/scenes/SceneSettings.js

307 lines
11 KiB
JavaScript
Raw Normal View History

2020-06-17 21:05:13 +03:00
import * as React from "react";
import * as Actions from "~/common/actions";
import * as System from "~/components/system";
2020-06-17 21:05:13 +03:00
import { css } from "@emotion/react";
2020-06-17 21:05:13 +03:00
import ScenePage from "~/components/core/ScenePage";
const STYLES_GROUP = css`
display: flex;
align-items: center;
justify-content: space-between;
`;
const STYLES_SUBGROUP = css`
padding-left: 24px;
`;
const STYLES_LEFT = css`
flex-shrink: 0;
padding: 12px 0 0 0;
min-width: 480px;
`;
const STYLES_RIGHT = css`
min-width: 10%;
padding-left: 48px;
padding-top: 24px;
width: 100%;
`;
export default class SceneSettings extends React.Component {
_deferredSave = null;
_handleSave = async () => {
await Actions.setDefaultConfig({
config: {
hot: {
enabled: this.props.viewer.settings_cold_enabled,
allowUnfreeze: this.props.viewer.settings_hot_allow_unfreeze,
ipfs: {
addTimeout: this.props.viewer.settings_hot_ipfs_add_timeout,
},
},
cold: {
enabled: this.props.viewer.settings_cold_enabled,
filecoin: {
addr: this.props.viewer.settings_cold_default_address,
dealMinDuration: this.props.viewer.settings_cold_default_duration,
2020-06-17 21:05:13 +03:00
repFactor: this.props.viewer
.settings_cold_default_replication_factor,
excludedMinersList: this.props.viewer
.settings_cold_default_excluded_miners,
trustedMinersList: this.props.viewer
.settings_cold_default_trusted_miners,
maxPrice: this.props.viewer.settings_cold_default_max_price,
renew: {
enabled: this.props.viewer.settings_cold_default_auto_renew,
2020-06-17 21:05:13 +03:00
threshold: this.props.viewer
.settings_cold_default_auto_renew_max_price,
},
},
},
},
});
};
_handleChange = (e) => {
window.clearTimeout(this._deferredSave);
this._deferredSave = null;
this.props.onViewerChange(e);
this._deferredSave = window.setTimeout(async () => {
await this._handleSave();
}, 2000);
};
render() {
let addresses = {};
this.props.viewer.addresses.forEach((a) => {
addresses[a.address] = a;
});
2020-06-17 21:05:13 +03:00
const currentAddress =
addresses[this.props.viewer.settings_cold_default_address];
return (
<ScenePage>
<System.H1>Settings</System.H1>
<System.H2 style={{ marginTop: 48 }}>Storage defaults</System.H2>
<div css={STYLES_GROUP} style={{ marginTop: 32 }}>
<div css={STYLES_LEFT}>
<System.DescriptionGroup
label="Automatically approve deals"
tooltip="When this is enabled you will skip the confirmation step, but if you do not have enough Filecoin you will receive a warning."
description="Enable this if every storage deal should be automatically approved to skip confirmation."
/>
</div>
<div css={STYLES_RIGHT}>
<System.Toggle
name="settings_deals_auto_approve"
onChange={this._handleChange}
active={this.props.viewer.settings_deals_auto_approve}
/>
</div>
</div>
<div css={STYLES_GROUP} style={{ marginTop: 32 }}>
<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.props.viewer.settings_cold_enabled}
/>
</div>
</div>
{this.props.viewer.settings_cold_enabled ? (
<div css={STYLES_SUBGROUP}>
<System.SelectMenu
containerStyle={{ marginTop: 24 }}
label="Default Filecoin address"
description="Default Filecoin address settings description."
tooltip="Placeholder."
name="settings_cold_default_address"
value={this.props.viewer.settings_cold_default_address}
category="address"
onChange={this._handleChange}
2020-06-17 21:05:13 +03:00
options={this.props.viewer.addresses}
>
{currentAddress ? currentAddress.name : "None"}
</System.SelectMenu>
<System.Input
containerStyle={{ marginTop: 24 }}
label="Default Filecoin deal duration"
2020-06-17 21:05:13 +03:00
description="Default Filecoin deal duration settings description. Current deal duration is in epochs but should change to months/weeks/days."
tooltip="Placeholder."
name="settings_cold_default_duration"
type="number"
value={this.props.viewer.settings_cold_default_duration}
2020-06-17 21:05:13 +03:00
placeholder="Type in epochs (~25 seconds)"
onChange={this._handleChange}
/>
<System.Input
containerStyle={{ marginTop: 24 }}
label="Default Filecoin replication factor"
description="Default Filecoin replication factor settings description."
tooltip="Placeholder."
name="settings_cold_default_replication_factor"
value={this.props.viewer.settings_cold_default_replication_factor}
placeholder="Type in amount of miners"
onChange={this._handleChange}
/>
<System.Input
containerStyle={{ marginTop: 24 }}
label="Max Filecoin price."
description="Set the maximum Filecoin price you're willing to pay."
tooltip="Placeholder."
name="settings_cold_default_max_price"
value={this.props.viewer.settings_cold_default_max_price}
placeholder="Type in amount of Filecoin"
onChange={this._handleChange}
/>
<System.CheckBox
style={{ marginTop: 48 }}
name="settings_cold_default_auto_renew"
value={this.props.viewer.settings_cold_default_auto_renew}
2020-06-17 21:05:13 +03:00
onChange={this._handleChange}
>
Enable auto renew for Filecoin Network deals.
</System.CheckBox>
<System.Input
containerStyle={{ marginTop: 24 }}
label="Max Filecoin deal auto renew price."
description="Set the maximum Filecoin price you're willing to pay for auto renew."
tooltip="Placeholder."
name="settings_cold_default_auto_renew_max_price"
2020-06-17 21:05:13 +03:00
value={
this.props.viewer.settings_cold_default_auto_renew_max_price
}
placeholder="Type in amount of Filecoin"
onChange={this._handleChange}
/>
</div>
) : null}
<div css={STYLES_GROUP} style={{ marginTop: 32 }}>
<div css={STYLES_LEFT}>
<System.DescriptionGroup
label="Enable hot storage"
tooltip="Placeholder"
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.props.viewer.settings_hot_enabled}
/>
</div>
</div>
{this.props.viewer.settings_hot_enabled ? (
<div css={STYLES_SUBGROUP}>
<System.CheckBox
style={{ marginTop: 48 }}
name="settings_hot_allow_unfreeze"
value={this.props.viewer.settings_hot_allow_unfreeze}
2020-06-17 21:05:13 +03:00
onChange={this._handleChange}
>
IPFS allow unfreeze setting description.
</System.CheckBox>
<System.Input
containerStyle={{ marginTop: 24 }}
label="Add timeout"
description="Add IPFS timeout setting description."
tooltip="Placeholder."
name="settings_hot_ipfs_add_timeout"
value={this.props.viewer.settings_hot_ipfs_add_timeout}
placeholder="Type in seconds"
onChange={this._handleChange}
/>
</div>
) : null}
</ScenePage>
);
}
}
/*
<System.Input
containerStyle={{ marginTop: 24 }}
label="Default deal location"
description="Choose the amount of months you expect to keep files on the network for."
tooltip="This is a default value that makes sealing and storing data easier on the network. You can change this value at any time you like. Changing this value will not affect your current deals."
name="settings_deal_default_duration"
value={this.props.viewer.settings_deal_default_duration}
placeholder="Type in an amount of months"
onChange={this._handleChange}
/>
<System.Input
containerStyle={{ marginTop: 32 }}
label="Default maximum storage"
description="Choose the maximum Filecoin you are willing to pay for storage."
tooltip="Changing this value will not affect your current deals."
name="settings_deal_maximum_storage_payment"
value={this.props.viewer.settings_deal_maximum_storage_payment}
placeholder="Type in an amount of Filecoin"
onChange={this._handleChange}
/>
<System.Input
containerStyle={{ marginTop: 32 }}
label="Default replication factor"
description="Choose the default amount of times your files should replicate."
tooltip="Changing this value will not affect your current deals."
name="settings_deal_replication_factor"
value={this.props.viewer.settings_deal_replication_factor}
placeholder="Type a number"
onChange={this._handleChange}
/>
<System.DescriptionGroup
style={{ marginTop: 32 }}
label="Default miners by ID"
tooltip="Changing this value will not affect your current deals."
description="Enter the miner IDs separated by a comma for the miners you specifically want to use."
/>
<System.Textarea
value={this.props.viewer.settings_deal_default_miners}
name="settings_deal_default_miners"
onChange={this._handleChange}
/>
<System.SelectMenu
containerStyle={{ marginTop: 32 }}
label="Geographic preference"
description="Pick any location in the world you would like your files to be stored."
tooltip="Changing this value will not affect your current deals."
name="settings_deal_country"
value={this.props.viewer.settings_deal_country}
onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}>
{SELECT_MENU_MAP[this.props.viewer.settings_deal_country]}
</System.SelectMenu>
*/