filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-09-11 13:57:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into @martinalong/new-documentation-pages

Browse Source
This commit is contained in:
Jim 2020-07-07 23:49:51 -07:00 committed by GitHub
commit 6f4f05d9ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 837 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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.

52
components/core/ApplicationNavigation.js
View File

@ -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>
);
}

9
components/system/SystemPage.js
View File

@ -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 }} />

11
components/system/components/fragments/DescriptionGroup.js
View File

@ -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) => {

14
components/system/index.js
View File

@ -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
View 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
View 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
View 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
View 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
View File

File diff suppressed because one or more lines are too long

3
package.json
View File

@ -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",

62
pages/experiences/create-address.js
View File

@ -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
View 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>
);
}
}

66
pages/experiences/make-storage-deal.js
View File

@ -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>
);
}

54
pages/experiences/peers-list.js
View File

@ -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>
);
}

33
pages/system/globe.js
View File

@ -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>

194
pages/system/tables.js
View File

@ -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>
);
}

4
rollup.config.js
View File

@ -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(),

47
scenes/SceneSettings.js
View File

@ -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
View File

@ -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) => {