From 82d7891e86ea55ea03a705ee3b6beb99150cf1e9 Mon Sep 17 00:00:00 2001 From: Martina Date: Wed, 22 Jul 2020 20:42:22 -0700 Subject: [PATCH] settings component and experience minus some polish --- components/system/SystemPage.js | 19 +- components/system/components/Input.js | 13 +- components/system/components/SelectMenus.js | 26 +- components/system/index.js | 13 +- components/system/modules/FilecoinSettings.js | 335 ++++++++++++++++++ pages/experiences/filecoin-settings.js | 128 +++++++ pages/experiences/generate-powergate-token.js | 2 +- pages/system/tabs.js | 1 + scenes/SceneSettings.js | 2 +- 9 files changed, 515 insertions(+), 24 deletions(-) create mode 100644 components/system/modules/FilecoinSettings.js create mode 100644 pages/experiences/filecoin-settings.js diff --git a/components/system/SystemPage.js b/components/system/SystemPage.js index 853cb758..344c68a3 100644 --- a/components/system/SystemPage.js +++ b/components/system/SystemPage.js @@ -28,7 +28,7 @@ const STYLES_ICON_ELEMENT = css` align-items: center; justify-content: center; background-color: ${Constants.system.brand}; - background-image: url('/static/social.png'); + background-image: url("/static/social.png"); border-radius: 88px; background-size: cover; color: ${Constants.system.white}; @@ -223,6 +223,11 @@ export default class SystemPage extends React.Component { href="/experiences/list-filecoin-deals" title="FilecoinDealsList" /> +
@@ -242,10 +247,18 @@ export default class SystemPage extends React.Component { - + - + diff --git a/components/system/components/Input.js b/components/system/components/Input.js index 1512c1a4..bd5a8290 100644 --- a/components/system/components/Input.js +++ b/components/system/components/Input.js @@ -33,6 +33,12 @@ const STYLES_INPUT_CONTAINER = css` min-width: 188px; `; +const STYLES_INPUT_CONTAINER_FULL = css` + box-sizing: border-box; + position: relative; + min-width: 188px; +`; + const STYLES_INPUT = css` ${INPUT_STYLES} padding: 0 24px 0 24px; @@ -128,7 +134,12 @@ export class Input extends React.Component { render() { return ( -
+
{ let presentationValue = map[props.value] ? map[props.value] : "Unselected"; return ( - +
{ style={props.containerStyle} /> -
+
- +
); }; diff --git a/components/system/index.js b/components/system/index.js index 8114d387..5cf73df9 100644 --- a/components/system/index.js +++ b/components/system/index.js @@ -14,6 +14,7 @@ import { FilecoinStorageDealsList, FilecoinRetrievalDealsList, } from "~/components/system/modules/FilecoinDealsList"; +import { FilecoinSettings } from "~/components/system/modules/FilecoinSettings"; // NOTE(jim): Components import { @@ -52,7 +53,16 @@ import { TabGroup } from "~/components/system/components/TabGroup"; import { Table } from "~/components/system/components/Table"; import { Textarea } from "~/components/system/components/Textarea"; import { Toggle } from "~/components/system/components/Toggle"; -import { H1, H2, H3, H4, P, UL, OL, LI } from "~/components/system/components/Typography"; +import { + H1, + H2, + H3, + H4, + P, + UL, + OL, + LI, +} from "~/components/system/components/Typography"; // NOTE(jim): Fragments import { Boundary } from "~/components/system/components/fragments/Boundary"; @@ -80,6 +90,7 @@ export { FilecoinBalancesList, FilecoinRetrievalDealsList, FilecoinStorageDealsList, + FilecoinSettings, // NOTE(jim): Components ButtonPrimary, ButtonPrimaryFull, diff --git a/components/system/modules/FilecoinSettings.js b/components/system/modules/FilecoinSettings.js new file mode 100644 index 00000000..ba4ee0c4 --- /dev/null +++ b/components/system/modules/FilecoinSettings.js @@ -0,0 +1,335 @@ +import * as React from "react"; +import * as Constants from "~/common/constants"; +import * as Strings from "~/common/strings"; + +import { css } from "@emotion/react"; +import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup"; +import { SelectMenu } from "~/components/system/components/SelectMenus"; +import { Toggle } from "~/components/system/components/Toggle"; +import { Input } from "~/components/system/components/Input"; +import { CheckBox } from "~/components/system/components/CheckBox"; +import { ButtonPrimary } from "~/components/system/components/Buttons"; +import { CardTabGroup } from "~/components/system/components/CardTabGroup"; + +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` + padding-left: 24px; + 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; +`; + +const TAB_GROUP = [ + { value: "general", label: "General" }, + { value: "cold", label: "Cold Storage" }, + { value: "hot", label: "Hot Storage" }, +]; + +export class FilecoinSettings extends React.Component { + static defaultProps = { + addrs: [], + settings_deals_auto_approve: false, + settings_hot_enabled: true, + //settings_hot_allow_unfreeze: this.props.allowUnfreeze, + settings_hot_ipfs_add_timeout: 60, + settings_cold_enabled: true, + //settings_cold_default_address: this.props.defaultAddr, + settings_cold_default_duration: 1000, + settings_cold_default_replication_factor: 1, + settings_cold_default_excluded_miners: [], + settings_cold_default_trusted_miners: [], + //settings_cold_default_max_price: this.props.maxPrice, + settings_cold_default_auto_renew: true, + //settings_cold_default_auto_renew_max_price: this.props.autoRenewMaxPrice, + //settings_repairable: + }; + + state = { + tabGroup: "general", + addrsList: this.props.addrsList.map((each) => { + return { + value: each.addr, + name: each.name, + }; + }), + settings_deals_auto_approve: this.props.autoApprove, //left off changing these to match teh shape of this.props.defaultStorageConfig + settings_hot_enabled: this.props.hotEnabled, //and incorporate info from aaron + settings_hot_allow_unfreeze: this.props.allowUnfreeze, //we can use miner api for the list editor component (and incorp reputation) + settings_hot_ipfs_add_timeout: this.props.addTimeout, + settings_cold_enabled: this.props.coldEnabled, + settings_cold_default_address: this.props.defaultAddr, + settings_cold_default_duration: this.props.dealMinDuration, + settings_cold_default_replication_factor: this.props.repFactor, + settings_cold_default_excluded_miners: this.props.excludedMinersList, + settings_cold_default_trusted_miners: this.props.trustedMinersList, + settings_cold_default_max_price: this.props.maxPrice, + settings_cold_default_auto_renew: this.props.autoRenew, + settings_cold_default_auto_renew_max_price: this.props.autoRenewMaxPrice, + settings_repairable: this.props.repairable, + }; + + _handleSave = async () => { + this.props.onSave({ + data: { + settings_deals_auto_approve: this.state.settings_deals_auto_approve, + }, + 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, + }, + }, + }, + repairable: this.state.settings_repairable, + }, + }); + }; + + _handleChange = (e) => { + this.setState({ [e.target.name]: e.target.value }); + }; + + render() { + return ( +
+ +
+ {this.state.tabGroup === "general" ? ( +
+
+
+ +
+
+ +
+
+
+ + + Repairable + +
+
+ ) : this.state.tabGroup === "cold" ? ( +
+
+
+ +
+
+ +
+
+ {this.state.settings_cold_enabled ? ( +
+ + + + + + + + + + + Enable auto renew + + + +
+ ) : null} +
+ ) : ( +
+
+
+ +
+
+ +
+
+ + {this.state.settings_hot_enabled ? ( +
+ + + IPFS allow unfreeze setting description. + + + +
+ ) : null} +
+ )} +
+ Save +
+
+
+ ); + } +} diff --git a/pages/experiences/filecoin-settings.js b/pages/experiences/filecoin-settings.js new file mode 100644 index 00000000..86f5f656 --- /dev/null +++ b/pages/experiences/filecoin-settings.js @@ -0,0 +1,128 @@ +import * as React from "react"; +import * as System from "~/components/system"; + +import SystemPage from "~/components/system/SystemPage"; +import ViewSourceLink from "~/components/system/ViewSourceLink"; +import CodeBlock from "~/components/system/CodeBlock"; + +const EXAMPLE_CODE = `import * as React from 'react'; +import { FilecoinSettings } from 'slate-react-system'; +import { createPow } from "@textile/powergate-client"; + +const PowerGate = createPow({ host: "http://pow.slate.textile.io:6002" }); + +class Example extends React.Component { + componentDidMount = async () => { + const FFS = await PowerGate.ffs.create(); + const token = FFS.token ? FFS.token : null; + PowerGate.setToken(token); + const { addrs } = await Powergate.ffs.addrs(); + const { defaultStorageConfig } = await PowerGate.ffs.defaultStorageConfig(); + this.setState({ token, defaultStorageConfig, addrsList }); + } + + _handleSave = async ({ data, config }) => { + const response = await Powergate.ffs.setDefaultStorageConfig(config); + this.setState({ data }); + } + + render() { + return ( + + ); + } +} +`; + +export default class SystemPageFilecoinWalletBalances extends React.Component { + _handleSave = (value) => { + console.log(value); + }; + + render() { + const addrsList = [ + { + addr: + "t3qwsglg755cwfaehqmsuzj2efebyyrqzlnhjogj2uwj44ce3anpowsdmaxdfnndukihmzrohqnpzakoq3tujq", + name: "Initial Address", + type: "bls", + }, + { + addr: + "t3ual5q5qo5wolfxsui4ciujfucqwf6gqso4lettcjwl2tyismgol7c4tngvoono5rmytuqotye7oosfjv6g7a", + name: "Secondary Address", + type: "bls", + }, + ]; + const defaultStorageConfig = { + defaultStorageConfig: { + cold: { + enabled: true, + filecoin: { + addr: + "t3whycszj43jeesnnagr3wbkyxoh6qv5ri6kqfmvk3u5x2nxcgiu4266dstutkdvi4pqbkz75odv7bxa6fjjkq", + countryCodesList: [], + dealMinDuration: 1000, + excludedMinersList: [], + maxPrice: 0, + renew: { + enabled: false, + threshold: 0, + }, + repFactor: 1, + trustedMinersList: [], + }, + }, + hot: { + allowUnfreeze: false, + enabled: true, + ipfs: { + addTimeout: 30, + }, + }, + repairable: false, + }, + }; + + return ( + + + Filecoin Settings{" "} + + +
+
+ + Here is an example of an experience for getting and setting Filecoin + Settings from{" "} + + Textile's Powergate + + . + +
+
+ +
+
+
+ Code +
+
+ {EXAMPLE_CODE} + + ); + } +} diff --git a/pages/experiences/generate-powergate-token.js b/pages/experiences/generate-powergate-token.js index 0aad60d0..2cf8d847 100644 --- a/pages/experiences/generate-powergate-token.js +++ b/pages/experiences/generate-powergate-token.js @@ -16,7 +16,7 @@ class Example extends React.Component { token: null } - _handleCreateToken = () => { + _handleCreateToken = async () => { const PowerGate = createPow({ host: "http://pow.slate.textile.io:6002" }); const FFS = await PowerGate.ffs.create(); const token = FFS.token ? FFS.token : null; diff --git a/pages/system/tabs.js b/pages/system/tabs.js index 973c29e8..29163713 100644 --- a/pages/system/tabs.js +++ b/pages/system/tabs.js @@ -139,6 +139,7 @@ class ExampleTwo extends React.Component { value={this.state.eight} onChange={this._handleChange} /> +