mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 13:57:37 +03:00
Merge branch 'main' into @martinalong/new-documentation-pages
This commit is contained in:
commit
6f4f05d9ca
@ -59,7 +59,7 @@ npm run dev
|
||||
|
||||
- Visit `localhost:1337` in the browser.
|
||||
- If you see the design system page instead, that means a token was not properly generated in the `.data` folder. Run `npm run dev` again.
|
||||
- **Note** — If you restart the server, it clears all your local files. You can disable this by modifying the code in `server.js`.
|
||||
- **Note** — If you want to clear all your local files, run `npm run dev --reset-data`.
|
||||
- **Note** — There will be new commands in the future for different contexts, like `electron`.
|
||||
|
||||
# Get involved.
|
||||
|
@ -150,20 +150,6 @@ const Item = ({
|
||||
);
|
||||
};
|
||||
|
||||
const STYLES_SMALL_LINK = css`
|
||||
padding: 0 16px 0 16px;
|
||||
font-size: 14px;
|
||||
font-family: ${Constants.font.semiBold};
|
||||
margin-top: 11px;
|
||||
color: #666;
|
||||
transition: 200ms ease all;
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.brand};
|
||||
}
|
||||
`;
|
||||
|
||||
class NodeReference extends React.Component {
|
||||
state = {
|
||||
showTreeChildren: false,
|
||||
@ -271,44 +257,6 @@ export default class ApplicationNavigation extends React.Component {
|
||||
</NodeReference>
|
||||
);
|
||||
})}
|
||||
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open("https://filscan.io/");
|
||||
}}
|
||||
style={{ marginTop: 48 }}
|
||||
>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 14 }} />
|
||||
Block Explorer
|
||||
</div>
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open("/system");
|
||||
}}
|
||||
>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 14 }} />
|
||||
Design System
|
||||
</div>
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open("https://docs.filecoin.io/");
|
||||
}}
|
||||
>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 14 }} />
|
||||
Documentation
|
||||
</div>
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open("https://filecoin.io/#community");
|
||||
}}
|
||||
>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 14 }} />
|
||||
Community
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
@ -203,6 +203,11 @@ export default class SystemPage extends React.Component {
|
||||
href="/experiences/make-storage-deal"
|
||||
title="Make a Storage Deal"
|
||||
/>
|
||||
<SidebarLink
|
||||
url={url}
|
||||
href="/experiences/generate-powergate-token"
|
||||
title="Generate Powergate token"
|
||||
/>
|
||||
|
||||
<span css={STYLES_LABEL}>
|
||||
<br />
|
||||
@ -240,9 +245,7 @@ export default class SystemPage extends React.Component {
|
||||
<div
|
||||
css={STYLES_SMALL_LINK}
|
||||
onClick={() => {
|
||||
window.open(
|
||||
"https://github.com/filecoin-project/filecoin-client"
|
||||
);
|
||||
window.open("https://github.com/filecoin-project/slate");
|
||||
}}
|
||||
>
|
||||
<SVG.ExpandBox height="12px" style={{ marginRight: 10 }} />
|
||||
|
@ -9,14 +9,23 @@ import { TooltipAnchor } from "~/components/system/components/fragments/TooltipA
|
||||
const STYLES_DESCRIPTION_GROUP_LABEL = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-size: 14px;
|
||||
padding: 0 0 0 0;
|
||||
padding: 0;
|
||||
margin-bottom: 8px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
`;
|
||||
|
||||
const STYLES_DESCRIPTION_GROUP_DESCRIPTION = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.3;
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
`;
|
||||
|
||||
export const DescriptionGroup = (props) => {
|
||||
|
@ -1,5 +1,11 @@
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
// NOTE(jim): Modules
|
||||
import { CreateToken } from "~/components/system/modules/CreateToken";
|
||||
import { PeersList } from "~/components/system/modules/PeersList";
|
||||
import { CreateFilecoinAddress } from "~/components/system/modules/CreateFilecoinAddress";
|
||||
import { CreateFilecoinStorageDeal } from "~/components/system/modules/CreateFilecoinStorageDeal";
|
||||
|
||||
// NOTE(jim): Components
|
||||
import {
|
||||
ButtonPrimary,
|
||||
@ -44,6 +50,12 @@ import * as OldSVG from "~/common/svg";
|
||||
|
||||
// NOTE(jim): Export everything.
|
||||
export {
|
||||
// NOTE(jim): Modules
|
||||
CreateToken,
|
||||
PeersList,
|
||||
CreateFilecoinAddress,
|
||||
CreateFilecoinStorageDeal,
|
||||
// NOTE(jim): Components
|
||||
ButtonPrimary,
|
||||
ButtonPrimaryFull,
|
||||
ButtonSecondary,
|
||||
@ -74,10 +86,12 @@ export {
|
||||
P,
|
||||
UL,
|
||||
LI,
|
||||
// NOTE(jim): Fragments, not meant to be used.
|
||||
TooltipAnchor,
|
||||
DescriptionGroup,
|
||||
TableContent,
|
||||
TableColumn,
|
||||
// NOTE(jim): System values
|
||||
Constants,
|
||||
SVG,
|
||||
OldSVG,
|
||||
|
90
components/system/modules/CreateFilecoinAddress.js
Normal file
90
components/system/modules/CreateFilecoinAddress.js
Normal file
@ -0,0 +1,90 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const SELECT_MENU_OPTIONS = [
|
||||
{ value: "1", name: "BLS" },
|
||||
{ value: "2", name: "SECP256K1" },
|
||||
// { value: '3', name: 'MULTISIG' },
|
||||
];
|
||||
|
||||
const SELECT_MENU_MAP = {
|
||||
"1": "BLS",
|
||||
"2": "SECP256K1",
|
||||
// '3': 'MULTISIG',
|
||||
};
|
||||
|
||||
const SELECT_MENU_SAVE_STRINGS = {
|
||||
"1": "bls",
|
||||
"2": "secp256k1",
|
||||
};
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
padding: 24px;
|
||||
border-radius: 4px;
|
||||
background-color: ${Constants.system.white};
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid ${Constants.system.border};
|
||||
max-width: 320px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export class CreateFilecoinAddress extends React.Component {
|
||||
state = { name: "", type: "1", makeDefault: false };
|
||||
|
||||
_handleChange = (e) => {
|
||||
this.setState({ [e.target.name]: e.target.value });
|
||||
};
|
||||
|
||||
_handleSubmit = () => {
|
||||
this.props.onSubmit({
|
||||
name: this.state.name,
|
||||
type: SELECT_MENU_SAVE_STRINGS[this.state.type],
|
||||
makeDefault: this.state.makeDefault,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<System.Input
|
||||
label="Address name"
|
||||
name="name"
|
||||
value={this.state.name}
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
|
||||
<System.SelectMenu
|
||||
full
|
||||
containerStyle={{ marginTop: 24 }}
|
||||
name="type"
|
||||
label="Address type"
|
||||
value={this.state.type}
|
||||
category="type adresss"
|
||||
onChange={this._handleChange}
|
||||
options={SELECT_MENU_OPTIONS}
|
||||
>
|
||||
{SELECT_MENU_MAP[this.state.type]}
|
||||
</System.SelectMenu>
|
||||
|
||||
<System.CheckBox
|
||||
style={{ marginTop: 24 }}
|
||||
name="default"
|
||||
value={this.state.default}
|
||||
onChange={this._handleChange}
|
||||
>
|
||||
Make this wallet the default
|
||||
</System.CheckBox>
|
||||
|
||||
<System.ButtonPrimaryFull
|
||||
style={{ marginTop: 48 }}
|
||||
onClick={this._handleSubmit}
|
||||
>
|
||||
Create address
|
||||
</System.ButtonPrimaryFull>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
107
components/system/modules/CreateFilecoinStorageDeal.js
Normal file
107
components/system/modules/CreateFilecoinStorageDeal.js
Normal file
@ -0,0 +1,107 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
padding: 24px;
|
||||
border-radius: 4px;
|
||||
background-color: ${Constants.system.white};
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid ${Constants.system.border};
|
||||
max-width: 320px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const STYLES_FILE_HIDDEN = css`
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
`;
|
||||
|
||||
const STYLES_FOCUS = css`
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
font-family: ${Constants.font.medium};
|
||||
overflow-wrap: break-word;
|
||||
width: 100%;
|
||||
|
||||
strong {
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-weight: 400;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SUBTEXT = css`
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
`;
|
||||
|
||||
const STYLES_ITEM = css`
|
||||
margin-top: 16px;
|
||||
`;
|
||||
|
||||
export class CreateFilecoinStorageDeal extends React.Component {
|
||||
static defaultProps = {
|
||||
onSubmit: () => alert("onSubmit"),
|
||||
};
|
||||
|
||||
state = { file: null };
|
||||
|
||||
_handleUpload = (e) => {
|
||||
e.persist();
|
||||
let file = e.target.files[0];
|
||||
|
||||
if (!file) {
|
||||
alert("Something went wrong");
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ file });
|
||||
};
|
||||
|
||||
_handleSubmit = (e) => {
|
||||
this.props.onSubmit({ file });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<input
|
||||
css={STYLES_FILE_HIDDEN}
|
||||
type="file"
|
||||
id="file"
|
||||
onChange={this._handleUpload}
|
||||
/>
|
||||
{this.state.file ? (
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<div css={STYLES_ITEM}>
|
||||
<div css={STYLES_FOCUS}>{this.state.file.name}</div>
|
||||
<div css={STYLES_SUBTEXT}>Name</div>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_ITEM}>
|
||||
<div css={STYLES_FOCUS}>{this.state.file.size}</div>
|
||||
<div css={STYLES_SUBTEXT}>File size</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<System.ButtonSecondaryFull type="label" htmlFor="file">
|
||||
Add file
|
||||
</System.ButtonSecondaryFull>
|
||||
{this.state.file ? (
|
||||
<System.ButtonPrimaryFull
|
||||
style={{ marginTop: 24 }}
|
||||
onClick={this._handleSubmit}
|
||||
>
|
||||
Make storage deal
|
||||
</System.ButtonPrimaryFull>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
58
components/system/modules/CreateToken.js
Normal file
58
components/system/modules/CreateToken.js
Normal file
@ -0,0 +1,58 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { ButtonPrimaryFull } from "~/components/system/components/Buttons";
|
||||
|
||||
const STYLES_CREATE_TOKEN = css`
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
|
||||
display: block;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const STYLES_CREATE_TOKEN_TOP = css`
|
||||
background: ${Constants.system.black};
|
||||
color: ${Constants.system.white};
|
||||
font-family: "mono";
|
||||
font-size: 12px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
min-height: 88px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const STYLES_CREATE_TOKEN_BOTTOM = css`
|
||||
background: ${Constants.system.white};
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 16px;
|
||||
`;
|
||||
|
||||
// TODO(jim): Lets do a cool odometer effect instead.
|
||||
export const CreateToken = (props) => {
|
||||
return (
|
||||
<div css={STYLES_CREATE_TOKEN}>
|
||||
<div css={STYLES_CREATE_TOKEN_TOP}>
|
||||
{props.token ? (
|
||||
props.token
|
||||
) : (
|
||||
<marquee
|
||||
style={{
|
||||
color: Constants.system.pitchBlack,
|
||||
width: "100%",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX{" "}
|
||||
</marquee>
|
||||
)}
|
||||
</div>
|
||||
<div css={STYLES_CREATE_TOKEN_BOTTOM}>
|
||||
<ButtonPrimaryFull onClick={props.onClick}>
|
||||
Generate new Powergate token
|
||||
</ButtonPrimaryFull>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
37
components/system/modules/PeersList.js
Normal file
37
components/system/modules/PeersList.js
Normal file
@ -0,0 +1,37 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
border-radius: 4px;
|
||||
background-color: ${Constants.system.white};
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid ${Constants.system.border};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export const PeersList = (props) => {
|
||||
return (
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{
|
||||
key: "id",
|
||||
width: "144px",
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
},
|
||||
],
|
||||
rows: props.data,
|
||||
}}
|
||||
selectedRowId={props.selectedRowId}
|
||||
onChange={props.onChange}
|
||||
name={props.name}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
10
dist/index.js
vendored
10
dist/index.js
vendored
File diff suppressed because one or more lines are too long
@ -19,7 +19,7 @@
|
||||
"@emotion/css": "11.0.0-next.12",
|
||||
"@emotion/react": "11.0.0-next.12",
|
||||
"@emotion/server": "11.0.0-next.12",
|
||||
"@textile/powergate-client": "0.1.0-beta.12",
|
||||
"@textile/powergate-client": "0.1.0-beta.13",
|
||||
"babel-plugin-module-resolver": "^4.0.0",
|
||||
"body-parser": "^1.19.0",
|
||||
"chart.js": "^2.9.3",
|
||||
@ -41,6 +41,7 @@
|
||||
"ws": "^7.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-json": "^4.1.0",
|
||||
"@rollup/plugin-node-resolve": "^8.1.0",
|
||||
"rollup": "^2.18.1",
|
||||
"rollup-plugin-babel": "^4.4.0",
|
||||
|
@ -1,22 +1,70 @@
|
||||
import * as React from 'react';
|
||||
import * as System from '~/components/system';
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import SystemPage from '~/components/system/SystemPage';
|
||||
import ViewSourceLink from '~/components/system/ViewSourceLink';
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
import { createPow } from "@textile/powergate-client";
|
||||
|
||||
const EXAMPLE_CODE = `import * as React from 'react';
|
||||
import { CreateFilecoinAddress } from 'slate-react-system';
|
||||
import { createPow } from "@textile/powergate-client";
|
||||
|
||||
const PowerGate = createPow({ host: 'http://0.0.0.0:6002' });
|
||||
const FFS = await PowerGate.ffs.create();
|
||||
const token = FFS.token ? FFS.token : null;
|
||||
|
||||
class Example extends React.Component {
|
||||
_handleCreateAddress = async ({ name, type, makeDefault }) => {
|
||||
const response = await PowerGate.ffs.newAddr(
|
||||
name,
|
||||
type,
|
||||
makeDefault
|
||||
);
|
||||
console.log(response);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CreateFilecoinAddress onSubmit={this._handleCreateAddress} />
|
||||
);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default class SystemPageCreateAddress extends React.Component {
|
||||
_handleSubmit = ({ name, type, makeDefault }) => {
|
||||
alert(JSON.stringify({ name, type, makeDefault }));
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SystemPage
|
||||
title="SDS: Create Address"
|
||||
description="..."
|
||||
url="https://fps.onrender.com/experiences/create-address">
|
||||
url="https://fps.onrender.com/experiences/create-address"
|
||||
>
|
||||
<System.H1>
|
||||
Create a Filecoin Address <ViewSourceLink file="experiences/create-address.js" />
|
||||
Create a Filecoin Address{" "}
|
||||
<ViewSourceLink file="experiences/create-address.js" />
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>...</System.P>
|
||||
<System.P>
|
||||
Here is an example of an experience for generating a filecoin address
|
||||
using{" "}
|
||||
<a target="_blank" href="https://github.com/textileio/powergate/">
|
||||
Textile's Powergate
|
||||
</a>
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.CreateFilecoinAddress onSubmit={this._handleSubmit} />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Code</System.H2>
|
||||
<br /> <br />
|
||||
<System.CodeBlock>{EXAMPLE_CODE}</System.CodeBlock>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
89
pages/experiences/generate-powergate-token.js
Normal file
89
pages/experiences/generate-powergate-token.js
Normal file
@ -0,0 +1,89 @@
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
import { createPow } from "@textile/powergate-client";
|
||||
|
||||
const EXAMPLE_CODE = `import * as React from 'react';
|
||||
import { CreateToken } from 'slate-react-system';
|
||||
import { createPow } from "@textile/powergate-client";
|
||||
|
||||
class Example extends React.Component {
|
||||
state = {
|
||||
token: null
|
||||
}
|
||||
|
||||
_handleCreateToken = () => {
|
||||
// NOTE
|
||||
// Requires PowerGate to be running locally.
|
||||
const PowerGate = createPow({ host: 'http://0.0.0.0:6002' });
|
||||
const FFS = await PowerGate.ffs.create();
|
||||
return FFS.token ? FFS.token : null;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CreateToken
|
||||
token={this.state.token}
|
||||
onClick={this._handleCreateToken} />
|
||||
);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default class GeneratePowergateToken extends React.Component {
|
||||
state = {
|
||||
token: null,
|
||||
};
|
||||
|
||||
_handleCreateToken = () => {
|
||||
let token;
|
||||
|
||||
/* TODO(jim): Stub hosted Powergate.
|
||||
const PowerGate = createPow({ host: 'http://0.0.0.0:6002' });
|
||||
const FFS = await PowerGate.ffs.create();
|
||||
token = FFS.token ? FFS.token : null;
|
||||
*/
|
||||
|
||||
// NOTE(jim): Demo purposes.
|
||||
token = "82324ce3-3fb4-4eea-ac75-f7797d96a403";
|
||||
this.setState({ token });
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SystemPage
|
||||
title="SDS: Generate Powergate Token"
|
||||
description="..."
|
||||
url="https://fps.onrender.com/experiences/generate-powergate-token"
|
||||
>
|
||||
<System.H1>
|
||||
Generate Powergate token{" "}
|
||||
<ViewSourceLink file="experiences/generate-powergate-token.js" />
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>
|
||||
Here is an example of an experience for generating a{" "}
|
||||
<a target="_blank" href="https://github.com/textileio/powergate/">
|
||||
powergate token
|
||||
</a>{" "}
|
||||
in the client.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.CreateToken
|
||||
onClick={this._handleCreateToken}
|
||||
token={this.state.token}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Code</System.H2>
|
||||
<br /> <br />
|
||||
<System.CodeBlock>{EXAMPLE_CODE}</System.CodeBlock>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,22 +1,74 @@
|
||||
import * as React from 'react';
|
||||
import * as System from '~/components/system';
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import SystemPage from '~/components/system/SystemPage';
|
||||
import ViewSourceLink from '~/components/system/ViewSourceLink';
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
const EXAMPLE_CODE = `import * as React from 'react';
|
||||
import { CreateFilecoinStorageDeal } from 'slate-react-system';
|
||||
|
||||
class Example extends React.Component {
|
||||
_handleSubmit = async ({ file }) => {
|
||||
let data = new FormData();
|
||||
data.append("image", file);
|
||||
|
||||
const options = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: data,
|
||||
};
|
||||
|
||||
const response = await fetch('/your-storage-end-point', options);
|
||||
const json = await response.json();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CreateFilecoinStorageDeal onSubmit={this._handleSubmit} />
|
||||
);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default class SystemPageMakeStorageDeal extends React.Component {
|
||||
_handleSubmit = async ({ file }) => {
|
||||
// TODO(jim): Send file data to server.
|
||||
alert(file);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SystemPage
|
||||
title="SDS: Make a Storage Deal"
|
||||
description="..."
|
||||
url="https://fps.onrender.com/experiences/make-storage-deal">
|
||||
url="https://fps.onrender.com/experiences/make-storage-deal"
|
||||
>
|
||||
<System.H1>
|
||||
Make a Storage Deal <ViewSourceLink file="experiences/make-storage-deal.js" />
|
||||
Make a Storage Deal{" "}
|
||||
<ViewSourceLink file="experiences/make-storage-deal.js" />
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>...</System.P>
|
||||
<System.P>
|
||||
Here is a partial example of using{" "}
|
||||
<a target="_blank" href="https://github.com/textileio/powergate/">
|
||||
Textile's Powergate
|
||||
</a>{" "}
|
||||
to make a data storage deal. This example only provides an example for
|
||||
how to send your file to a server. <br />
|
||||
<br />
|
||||
There will be an example of how to make a storage deal coming soon.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.CreateFilecoinStorageDeal onSubmit={this._handleSubmit} />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Code</System.H2>
|
||||
<br /> <br />
|
||||
<System.CodeBlock>{EXAMPLE_CODE}</System.CodeBlock>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
@ -1,19 +1,61 @@
|
||||
import * as React from 'react';
|
||||
import * as System from '~/components/system';
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import SystemPage from '~/components/system/SystemPage';
|
||||
import ViewSourceLink from '~/components/system/ViewSourceLink';
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
const EXAMPLE_CODE = `import * as React from 'react';
|
||||
import { PeersList } from 'slate-react-system';
|
||||
import { createPow } from "@textile/powergate-client";
|
||||
|
||||
const PowerGate = createPow({ host: 'http://0.0.0.0:6002' });
|
||||
const { peersList } = await PowerGate.net.peers();
|
||||
|
||||
class Example extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<PeersList data={peersList} />
|
||||
);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default class SystemPagePeersList extends React.Component {
|
||||
render() {
|
||||
const peersList = [
|
||||
{
|
||||
id: "example-peer-id-1",
|
||||
name: "node-de23500d-5d37-438e-9868-f0c100906128",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<SystemPage title="SDS: Peers List" description="..." url="https://fps.onrender.com/experiences/peers-list">
|
||||
<SystemPage
|
||||
title="SDS: Peers List"
|
||||
description="..."
|
||||
url="https://fps.onrender.com/experiences/peers-list"
|
||||
>
|
||||
<System.H1>
|
||||
Peers List <ViewSourceLink file="experiences/peers-list.js" />
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>...</System.P>
|
||||
<System.P>
|
||||
Here is an example of an experience for getting peers from{" "}
|
||||
<a target="_blank" href="https://github.com/textileio/powergate/">
|
||||
Textile's Powergate
|
||||
</a>
|
||||
. This component will be expanded upon when there is more data from
|
||||
the endpoint.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.PeersList data={peersList} />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Code</System.H2>
|
||||
<br /> <br />
|
||||
<System.CodeBlock>{EXAMPLE_CODE}</System.CodeBlock>
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
@ -1,20 +1,27 @@
|
||||
import * as React from 'react';
|
||||
import * as System from '~/components/system';
|
||||
import * as React from "react";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import GLRenderer from '~/components/three/GLRenderer';
|
||||
import SystemPage from '~/components/system/SystemPage';
|
||||
import ViewSourceLink from '~/components/system/ViewSourceLink';
|
||||
import GLRenderer from "~/components/three/GLRenderer";
|
||||
import SystemPage from "~/components/system/SystemPage";
|
||||
import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
export default class SystemPageGlobe extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<SystemPage title="SDS: Globe" description="..." url="https://fps.onrender.com/system/globe">
|
||||
<SystemPage
|
||||
title="SDS: Globe"
|
||||
description="..."
|
||||
url="https://fps.onrender.com/system/globe"
|
||||
>
|
||||
<System.H1>
|
||||
Globe <ViewSourceLink file="system/globe.js" />
|
||||
</System.H1>
|
||||
<br />
|
||||
<br />
|
||||
<System.P>The Globe component is used to show peers and file transfers on the Filecoin network.</System.P>
|
||||
<System.P>
|
||||
The Globe component is used to show peers and file transfers on the
|
||||
Filecoin network.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
@ -22,13 +29,14 @@ export default class SystemPageGlobe extends React.Component {
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>
|
||||
Import React and the GLRenderer Components.
|
||||
Import React and the GLRenderer Components. Unfortunately the
|
||||
GLRenderer is not usable outside of this application.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`import * as React from 'react';
|
||||
import { GLRenderer } from 'slate-react-system';`}
|
||||
{`import * as React from 'react';
|
||||
import GLRenderer from '~/components/three/GLRenderer';`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
@ -38,13 +46,14 @@ import { GLRenderer } from 'slate-react-system';`}
|
||||
<System.P>Declare the Globe component.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`class ExampleOne extends React.Component {
|
||||
{`class ExampleOne extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<GLRenderer width={768} height={480} />
|
||||
)
|
||||
}
|
||||
}`}</System.CodeBlock>
|
||||
}`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
|
@ -7,9 +7,16 @@ import ViewSourceLink from "~/components/system/ViewSourceLink";
|
||||
|
||||
export default class SystemPageTables extends React.Component {
|
||||
state = {
|
||||
table_data: null,
|
||||
exampleOneOutput: null,
|
||||
exampleOneProps: null,
|
||||
exampleTwoOutput: null,
|
||||
exampleTwoProps: null
|
||||
};
|
||||
|
||||
_handleChange = e => this.setState(
|
||||
{ [e.target.name]: e.target.value }
|
||||
);
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SystemPage
|
||||
@ -91,56 +98,25 @@ import { TableContent, TableColumn } from 'slate-react-system';`}
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title="Table example">
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: "a", name: "Link", type: "FILE_LINK" },
|
||||
{ key: "b", name: "Value", width: "88px" },
|
||||
{
|
||||
key: "c",
|
||||
name: "Tooltip",
|
||||
tooltip: "A tooltip.",
|
||||
width: "128px",
|
||||
},
|
||||
{ key: "d", name: "Copyable", copyable: true, width: "88px" },
|
||||
],
|
||||
rows: [
|
||||
{
|
||||
id: 1,
|
||||
a: "col 1 row 1",
|
||||
b: "col 1 row 2",
|
||||
c: "col 1 row 3",
|
||||
d: "col 1 row 4",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
a: "col 2 row 1",
|
||||
b: "col 2 row 2",
|
||||
c: "col 2 row 3",
|
||||
d: "col 2 row 4",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
a: "col 3 row 1",
|
||||
b: "col 3 row 2",
|
||||
c: "col 3 row 3",
|
||||
d: "col 3 row 4",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
a: "col 4 row 1",
|
||||
b: "col 4 row 2",
|
||||
c: "col 4 row 3",
|
||||
d: "col 4 row 4",
|
||||
},
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.table_data}
|
||||
onChange={this._handleChange}
|
||||
name="table_data"
|
||||
/>
|
||||
</Group>
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Link', type: 'FILE_LINK' },
|
||||
{ key: 'b', name: 'Value', width: '88px' },
|
||||
{ key: 'c', name: 'Tooltip', tooltip: 'A tooltip.', width: '128px' },
|
||||
{ key: 'd', name: 'Copyable', copyable: true, width: '88px' },
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 'col 1 row 1', b: 'col 1 row 2', c: 'col 1 row 3', d: 'col 1 row 4' },
|
||||
{ id: 2, a: 'col 2 row 1', b: 'col 2 row 2', c: 'col 2 row 3', d: 'col 2 row 4' },
|
||||
{ id: 3, a: 'col 3 row 1', b: 'col 3 row 2', c: 'col 3 row 3', d: 'col 3 row 4' },
|
||||
{ id: 3, a: 'col 4 row 1', b: 'col 4 row 2', c: 'col 4 row 3', d: 'col 4 row 4' },
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.exampleOneOutput}
|
||||
onChange={this._handleChange}
|
||||
name="exampleOneOutput"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Accepted React Properties</System.H2>
|
||||
@ -270,11 +246,123 @@ import { TableContent, TableColumn } from 'slate-react-system';`}
|
||||
},
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.table_data}
|
||||
selectedRowId={this.state.exampleOneProps}
|
||||
onChange={this._handleChange}
|
||||
name="table_data"
|
||||
name="exampleOneProps"
|
||||
/>
|
||||
</Group>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>TableContents</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.P>The Table Component has many TableContent properties that can be added to alter the column using the <i>type</i> props.</System.P>
|
||||
<br />
|
||||
<System.CodeBlock>
|
||||
{`class ExampleTwo extends React.Component {
|
||||
state = { exampleTwo: null }
|
||||
|
||||
_handleChange = e => this.setState(
|
||||
{ [e.target.name]: e.target.value }
|
||||
);
|
||||
|
||||
render() {
|
||||
return(
|
||||
<Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Upload', width: '112px',
|
||||
type: 'BANDWIDTH_UPLOAD' },
|
||||
{ key: 'b', name: 'Download', width: '112px',
|
||||
type: 'BANDWIDTH_DOWNLOAD' },
|
||||
{ key: 'c', name: 'Tranaction Status', width: '128px',
|
||||
type: "TRANSACTION_STATUS" },
|
||||
{ key: 'd', name: 'Deal Status', width:'184px',
|
||||
type: "DEAL_STATUS" },
|
||||
{ key: 'e', name: 'Icon', width: '88px', type: "ICON" },
|
||||
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: '500', b: '200', c: '2', d: '1', e: 'PNG' },
|
||||
{ id: 2, a: '20', b: '10', c: '1', d: '2', e: 'FOLDER' },
|
||||
{ id: 3, a: '100', b: '250', c: '2', d: '3', e: 'PNG' },
|
||||
{ id: 3, a: '4', b: '135', c: '1', d: '4', e: 'FOLDER' },
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.exampleTwo}
|
||||
onChange={this._handleChange}
|
||||
name="exampleTwo"
|
||||
/>
|
||||
)
|
||||
}
|
||||
}`}
|
||||
</System.CodeBlock>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Output</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Upload', width: '112px', type: 'BANDWIDTH_UPLOAD' },
|
||||
{ key: 'b', name: 'Download', width: '112px', type: 'BANDWIDTH_DOWNLOAD' },
|
||||
{ key: 'c', name: 'Tranaction Status', width: '128px', type: "TRANSACTION_STATUS" },
|
||||
{ key: 'd', name: 'Deal Status', width:'168px', type: "DEAL_STATUS" },
|
||||
{ key: 'e', name: 'Icon', width: '88px', type: "ICON" },
|
||||
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: '500', b: '200', c: '2', d: '1', e: 'PNG' },
|
||||
{ id: 2, a: '20', b: '10', c: '1', d: '2', e: 'FOLDER' },
|
||||
{ id: 3, a: '100', b: '250', c: '2', d: '3', e: 'PNG' },
|
||||
{ id: 3, a: '4', b: '135', c: '1', d: '4', e: 'FOLDER' },
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.exampleTwoOutput}
|
||||
onChange={this._handleChange}
|
||||
name="exampleTwoOutput"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<System.H2>Accepted <i>Type</i> Properties</System.H2>
|
||||
<hr />
|
||||
<br />
|
||||
<Group title="TableContent">
|
||||
<System.Table
|
||||
data={{
|
||||
columns: [
|
||||
{ key: 'a', name: 'Name', width: '184px' },
|
||||
{ key: 'b', name: 'Type', width: '88px' },
|
||||
{ key: 'c', name: 'Description', width: '100%' },
|
||||
],
|
||||
rows: [
|
||||
{ id: 1, a: 'DEAL_CATEGORY', b: 'number', c: '"1": "Storage", else: "Retrieval"' },
|
||||
{ id: 2, a: 'LOCATION', b: 'string', c: 'String for location' },
|
||||
{ id: 3, a: 'BUTTON', b: 'string', c: 'String for button text' },
|
||||
{ id: 4, a: 'TRANSACTION_DIRECTION', b: 'number', c: '"1": incoming badge, "2": outgoing badge' },
|
||||
{ id: 5, a: 'TRANSACTION_STATUS', b: 'number', c: '"1": complete badge, "2": pending badge' },
|
||||
{ id: 6, a: 'ICON', b: 'string', c: '"PNG": image icon, "FOLDER": folder icon' },
|
||||
{ id: 7, a: 'AVATAR', b: 'null', c: 'Adds the users avatar and online status' },
|
||||
{ id: 8, a: 'DEAL_STATUS_RETRIEVAL', b: 'number', c: '"0": "Local file", "1": "Available on network", "2": "Retrieval deal proposed.", "3": "Retrieval deal accepted.", "4": "Data transfer in progress.", "5": "Data transfer completed.", "6": "Retrieved from network.",' },
|
||||
{ id: 9, a: 'DEAL_STATUS', b: 'number', c: '"0": "Local file", "1": "Available on network", "2": "Retrieval deal proposed.", "3": "Retrieval deal accepted.", "4": "Data transfer in progress.", "5": "Data transfer completed.", "6": "Retrieved from network.",' },
|
||||
{ id: 10, a: 'BANDWIDTH_UPLOAD', b: 'number', c: 'Outputs an upload icon with the {number} of bytes' },
|
||||
{ id: 11, a: 'BANDWIDTH_DOWNLOAD', b: 'number', c: 'Outputs a download icon with the {number} of bytes' },
|
||||
{ id: 12, a: 'MINER_AVAILABILITY', b: 'number', c: '"1": "true", "2": null' },
|
||||
{ id: 13, a: 'DEAL_AUTO_RENEW', b: 'number', c: '"1": "true", else: "false"' },
|
||||
{ id: 14, a: 'NOTIFICATION_ERROR', b: 'string', c: 'String with error notification badge' },
|
||||
{ id: 15, a: 'FILE_DATE', b: 'string', c: 'String to date' },
|
||||
{ id: 16, a: 'FILE_SIZE', b: 'number', c: 'Outputs "{number} Bytes"' },
|
||||
{ id: 17, a: 'FILE_LINK', b: 'string', c: 'String of file link' }
|
||||
],
|
||||
}}
|
||||
selectedRowId={this.state.exampleTwoProps}
|
||||
onChange={this._handleChange}
|
||||
name="exampleTwoProps"
|
||||
/>
|
||||
</Group>
|
||||
|
||||
</SystemPage>
|
||||
);
|
||||
}
|
||||
|
@ -2,6 +2,7 @@ import babel from "rollup-plugin-babel";
|
||||
import commonjs from "rollup-plugin-commonjs";
|
||||
import resolve from "@rollup/plugin-node-resolve";
|
||||
import { terser } from "rollup-plugin-terser";
|
||||
import json from "@rollup/plugin-json";
|
||||
|
||||
const input = "./components/system/index.js";
|
||||
|
||||
@ -14,8 +15,9 @@ const generateOutput = (outputPath) => {
|
||||
},
|
||||
external: ["@emotion/react", "react", "react-dom"],
|
||||
plugins: [
|
||||
json({ exclude: ["node_modules/**"], compact: true }),
|
||||
babel({
|
||||
exclude: "node_modules/**",
|
||||
exclude: ["node_modules/**", "**/*.json"],
|
||||
runtimeHelpers: true,
|
||||
}),
|
||||
resolve(),
|
||||
|
@ -1,32 +1,39 @@
|
||||
import * as React from 'react';
|
||||
import * as Actions from '~/common/actions';
|
||||
import * as System from '~/components/system';
|
||||
import * as React from "react";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from '@emotion/react';
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import ScenePage from '~/components/core/ScenePage';
|
||||
import ScenePage from "~/components/core/ScenePage";
|
||||
|
||||
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`
|
||||
flex-shrink: 0;
|
||||
padding: 12px 0 0 0;
|
||||
min-width: 480px;
|
||||
min-width: 10%;
|
||||
overflow-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
`;
|
||||
|
||||
const STYLES_RIGHT = css`
|
||||
min-width: 10%;
|
||||
padding-left: 48px;
|
||||
padding-top: 24px;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
export default class SceneSettings extends React.Component {
|
||||
@ -50,7 +57,8 @@ export default class SceneSettings extends React.Component {
|
||||
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,
|
||||
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: {
|
||||
@ -127,8 +135,9 @@ export default class SceneSettings extends React.Component {
|
||||
value={this.state.settings_cold_default_address}
|
||||
category="address"
|
||||
onChange={this._handleChange}
|
||||
options={this.state.addresses}>
|
||||
{currentAddress ? currentAddress.name : 'None'}
|
||||
options={this.state.addresses}
|
||||
>
|
||||
{currentAddress ? currentAddress.name : "None"}
|
||||
</System.SelectMenu>
|
||||
|
||||
<System.Input
|
||||
@ -169,7 +178,8 @@ export default class SceneSettings extends React.Component {
|
||||
style={{ marginTop: 48 }}
|
||||
name="settings_cold_default_auto_renew"
|
||||
value={this.state.settings_cold_default_auto_renew}
|
||||
onChange={this._handleChange}>
|
||||
onChange={this._handleChange}
|
||||
>
|
||||
Enable auto renew for Filecoin Network deals.
|
||||
</System.CheckBox>
|
||||
|
||||
@ -184,7 +194,9 @@ export default class SceneSettings extends React.Component {
|
||||
onChange={this._handleChange}
|
||||
/>
|
||||
<div style={{ marginTop: 32 }}>
|
||||
<System.ButtonPrimary onClick={this._handleSave}>Save</System.ButtonPrimary>
|
||||
<System.ButtonPrimary onClick={this._handleSave}>
|
||||
Save
|
||||
</System.ButtonPrimary>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
@ -212,7 +224,8 @@ export default class SceneSettings extends React.Component {
|
||||
style={{ marginTop: 48 }}
|
||||
name="settings_hot_allow_unfreeze"
|
||||
value={this.state.settings_hot_allow_unfreeze}
|
||||
onChange={this._handleChange}>
|
||||
onChange={this._handleChange}
|
||||
>
|
||||
IPFS allow unfreeze setting description.
|
||||
</System.CheckBox>
|
||||
|
||||
@ -228,7 +241,9 @@ export default class SceneSettings extends React.Component {
|
||||
/>
|
||||
|
||||
<div style={{ marginTop: 32 }}>
|
||||
<System.ButtonPrimary onClick={this._handleSave}>Save</System.ButtonPrimary>
|
||||
<System.ButtonPrimary onClick={this._handleSave}>
|
||||
Save
|
||||
</System.ButtonPrimary>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
72
server.js
72
server.js
@ -25,6 +25,7 @@ let state = null;
|
||||
const production = process.env.NODE_ENV === "production";
|
||||
const port = process.env.PORT || 1337;
|
||||
const wsPort = process.env.WS_PORT || 2448;
|
||||
const resetData = process.env.npm_config_reset_data;
|
||||
const app = next({ dev: !production, quiet: false });
|
||||
const nextRequestHandler = app.getRequestHandler();
|
||||
|
||||
@ -71,9 +72,10 @@ app.prepare().then(async () => {
|
||||
|
||||
if (!production) {
|
||||
try {
|
||||
// TODO(jim): Remove later.
|
||||
// We wipe all of the local data each time you run the application.
|
||||
await Utilities.resetFileSystem();
|
||||
// NOTE(daniel): Wipe all of the local data when --reset-data flag is added to npm run dev.
|
||||
if (resetData) {
|
||||
await Utilities.resetFileSystem();
|
||||
}
|
||||
|
||||
const updates = await Utilities.refresh({ PG: PowerGate });
|
||||
state = await Utilities.updateStateData(state, updates);
|
||||
@ -135,21 +137,35 @@ app.prepare().then(async () => {
|
||||
// TODO(jim): Move this to postgres later.
|
||||
if (!FS.existsSync("./.data/local-settings.json")) {
|
||||
const localSettingsSchema = {
|
||||
local: { photo: null, name: `node-${uuid()}`, settings_deals_auto_approve: false },
|
||||
local: {
|
||||
photo: null,
|
||||
name: `node-${uuid()}`,
|
||||
settings_deals_auto_approve: false,
|
||||
},
|
||||
};
|
||||
|
||||
FS.writeFileSync("./.data/local-settings.json", JSON.stringify(localSettingsSchema));
|
||||
FS.writeFileSync(
|
||||
"./.data/local-settings.json",
|
||||
JSON.stringify(localSettingsSchema)
|
||||
);
|
||||
state.local = localSettingsSchema.local;
|
||||
} else {
|
||||
const parsedLocal = FS.readFileSync("./data/local-settings.json", "utf8");
|
||||
const parsedLocal = FS.readFileSync(
|
||||
"./.data/local-settings.json",
|
||||
"utf8"
|
||||
);
|
||||
state.local = JSON.parse(parsedLocal).local;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
console.log('[ prototype ] "/" -- WILL REDIRECT TO /SYSTEM ');
|
||||
console.log("[ prototype ] SLATE WILL NOT RUN LOCALLY UNTIL YOU HAVE ");
|
||||
console.log(
|
||||
"[ prototype ] SLATE WILL NOT RUN LOCALLY UNTIL YOU HAVE "
|
||||
);
|
||||
console.log("[ prototype ] PROPERLY CONFIGURED POWERGATE AND ");
|
||||
console.log("[ prototype ] CONNECTED TO THE FILECOIN NETWORK (DEVNET/TESTNET) ");
|
||||
console.log(
|
||||
"[ prototype ] CONNECTED TO THE FILECOIN NETWORK (DEVNET/TESTNET) "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -222,7 +238,10 @@ app.prepare().then(async () => {
|
||||
|
||||
// NOTE(jim): Writes the updated deal state.
|
||||
if (write) {
|
||||
FS.writeFileSync("./.data/library.json", JSON.stringify({ library: state.library }));
|
||||
FS.writeFileSync(
|
||||
"./.data/library.json",
|
||||
JSON.stringify({ library: state.library })
|
||||
);
|
||||
}
|
||||
|
||||
state = await Utilities.emitState({ state, client, PG: PowerGate });
|
||||
@ -242,7 +261,9 @@ app.prepare().then(async () => {
|
||||
// TODO(jim): Need to support other file types.
|
||||
if (!files.image) {
|
||||
console.error("[ prototype ] File type unspported", files);
|
||||
return res.status(500).send({ error: "File type unsupported", files });
|
||||
return res
|
||||
.status(500)
|
||||
.send({ error: "File type unsupported", files });
|
||||
}
|
||||
|
||||
const newPath = form.uploadDir + req.params.file;
|
||||
@ -265,7 +286,10 @@ app.prepare().then(async () => {
|
||||
|
||||
// NOTE(jim): Writes the added file.
|
||||
if (pushed) {
|
||||
FS.writeFileSync("./.data/library.json", JSON.stringify({ library: state.library }));
|
||||
FS.writeFileSync(
|
||||
"./.data/library.json",
|
||||
JSON.stringify({ library: state.library })
|
||||
);
|
||||
}
|
||||
|
||||
state = await Utilities.emitState({
|
||||
@ -295,7 +319,10 @@ app.prepare().then(async () => {
|
||||
|
||||
// NOTE(jim): updates avatar photo.
|
||||
state.local.photo = `/static/system/${newName}`;
|
||||
FS.writeFileSync("./.data/local-settings.json", JSON.stringify({ local: { ...state.local } }));
|
||||
FS.writeFileSync(
|
||||
"./.data/local-settings.json",
|
||||
JSON.stringify({ local: { ...state.local } })
|
||||
);
|
||||
|
||||
state = await Utilities.emitState({
|
||||
state,
|
||||
@ -323,7 +350,10 @@ app.prepare().then(async () => {
|
||||
server.post("/_/local-settings", async (req, res) => {
|
||||
state.local = { ...state.local, ...req.body.local };
|
||||
|
||||
FS.writeFileSync("./.data/local-settings.json", JSON.stringify({ local: { ...state.local } }));
|
||||
FS.writeFileSync(
|
||||
"./.data/local-settings.json",
|
||||
JSON.stringify({ local: { ...state.local } })
|
||||
);
|
||||
state = await Utilities.emitState({ state, client, PG: PowerGate });
|
||||
return res.status(200).send({ success: true });
|
||||
});
|
||||
@ -331,7 +361,11 @@ app.prepare().then(async () => {
|
||||
server.post("/_/wallet/create", async (req, res) => {
|
||||
let data;
|
||||
try {
|
||||
data = await PowerGate.ffs.newAddr(req.body.name, req.body.type, req.body.makeDefault);
|
||||
data = await PowerGate.ffs.newAddr(
|
||||
req.body.name,
|
||||
req.body.type,
|
||||
req.body.makeDefault
|
||||
);
|
||||
} catch (e) {
|
||||
return res.status(500).send({ error: e.message });
|
||||
}
|
||||
@ -343,13 +377,19 @@ app.prepare().then(async () => {
|
||||
server.post("/_/wallet/send", async (req, res) => {
|
||||
let data;
|
||||
try {
|
||||
data = await PowerGate.ffs.sendFil(req.body.source, req.body.target, req.body.amount);
|
||||
data = await PowerGate.ffs.sendFil(
|
||||
req.body.source,
|
||||
req.body.target,
|
||||
req.body.amount
|
||||
);
|
||||
} catch (e) {
|
||||
return res.status(500).send({ error: e.message });
|
||||
}
|
||||
|
||||
state = await Utilities.emitState({ state, client, PG: PowerGate });
|
||||
return res.status(200).send({ success: true, data: { ...data, ...req.body } });
|
||||
return res
|
||||
.status(200)
|
||||
.send({ success: true, data: { ...data, ...req.body } });
|
||||
});
|
||||
|
||||
server.get("/", async (req, res) => {
|
||||
|
Loading…
Reference in New Issue
Block a user