filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-22 16:41:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: renames fixtures to navigation data

Browse Source
This commit is contained in:
jimmylee 2020-07-02 03:54:33 -07:00
parent 1523444538
commit 9d9ac2b9fe
16 changed files with 176 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/fixtures.js → common/navigation-data.js
View File

@ -11,7 +11,7 @@ const constructFilesTreeForNavigation = (library) => {
return library;
};
export const generateNavigationState = (library) => [
export const generate = (library) => [
{
id: 1,
name: "Home",

124
pages/index.js
View File

@ -1,39 +1,39 @@
import * as React from 'react';
import * as Fixtures from '~/common/fixtures';
import * as Actions from '~/common/actions';
import * as State from '~/common/state';
import * as React from "react";
import * as NavigationData from "~/common/navigation-data";
import * as Actions from "~/common/actions";
import * as State from "~/common/state";
import SceneDataTransfer from '~/scenes/SceneDataTransfer';
import SceneDeals from '~/scenes/SceneDeals';
import SceneEditAccount from '~/scenes/SceneEditAccount';
import SceneFile from '~/scenes/SceneFile';
import SceneFilesFolder from '~/scenes/SceneFilesFolder';
import SceneHome from '~/scenes/SceneHome';
import SceneLogs from '~/scenes/SceneLogs';
import SceneMiners from '~/scenes/SceneMiners';
import ScenePaymentChannels from '~/scenes/ScenePaymentChannels';
import ScenePeers from '~/scenes/ScenePeers';
import SceneSettings from '~/scenes/SceneSettings';
import SceneStats from '~/scenes/SceneStats';
import SceneStatus from '~/scenes/SceneStatus';
import SceneStorageMarket from '~/scenes/SceneStorageMarket';
import SceneWallet from '~/scenes/SceneWallet';
import SceneDataTransfer from "~/scenes/SceneDataTransfer";
import SceneDeals from "~/scenes/SceneDeals";
import SceneEditAccount from "~/scenes/SceneEditAccount";
import SceneFile from "~/scenes/SceneFile";
import SceneFilesFolder from "~/scenes/SceneFilesFolder";
import SceneHome from "~/scenes/SceneHome";
import SceneLogs from "~/scenes/SceneLogs";
import SceneMiners from "~/scenes/SceneMiners";
import ScenePaymentChannels from "~/scenes/ScenePaymentChannels";
import ScenePeers from "~/scenes/ScenePeers";
import SceneSettings from "~/scenes/SceneSettings";
import SceneStats from "~/scenes/SceneStats";
import SceneStatus from "~/scenes/SceneStatus";
import SceneStorageMarket from "~/scenes/SceneStorageMarket";
import SceneWallet from "~/scenes/SceneWallet";
import SidebarCreateWalletAddress from '~/components/sidebars/SidebarCreateWalletAddress';
import SidebarDeleteWalletAddress from '~/components/sidebars/SidebarDeleteWalletAddress';
import SidebarWalletSendFunds from '~/components/sidebars/SidebarWalletSendFunds';
import SidebarFileStorageDeal from '~/components/sidebars/SidebarFileStorageDeal';
import SidebarFileRetrievalDeal from '~/components/sidebars/SidebarFileRetrievalDeal';
import SidebarCreatePaymentChannel from '~/components/sidebars/SidebarCreatePaymentChannel';
import SidebarAddMiner from '~/components/sidebars/SidebarAddMiner';
import SidebarAddPeer from '~/components/sidebars/SidebarAddPeer';
import SidebarNotifications from '~/components/sidebars/SidebarNotifications';
import SidebarRedeemPaymentChannel from '~/components/sidebars/SidebarRedeemPaymentChannel';
import SidebarCreateWalletAddress from "~/components/sidebars/SidebarCreateWalletAddress";
import SidebarDeleteWalletAddress from "~/components/sidebars/SidebarDeleteWalletAddress";
import SidebarWalletSendFunds from "~/components/sidebars/SidebarWalletSendFunds";
import SidebarFileStorageDeal from "~/components/sidebars/SidebarFileStorageDeal";
import SidebarFileRetrievalDeal from "~/components/sidebars/SidebarFileRetrievalDeal";
import SidebarCreatePaymentChannel from "~/components/sidebars/SidebarCreatePaymentChannel";
import SidebarAddMiner from "~/components/sidebars/SidebarAddMiner";
import SidebarAddPeer from "~/components/sidebars/SidebarAddPeer";
import SidebarNotifications from "~/components/sidebars/SidebarNotifications";
import SidebarRedeemPaymentChannel from "~/components/sidebars/SidebarRedeemPaymentChannel";
import ApplicationNavigation from '~/components/core/ApplicationNavigation';
import ApplicationHeader from '~/components/core/ApplicationHeader';
import ApplicationLayout from '~/components/core/ApplicationLayout';
import WebsitePrototypeWrapper from '~/components/core/WebsitePrototypeWrapper';
import ApplicationNavigation from "~/components/core/ApplicationNavigation";
import ApplicationHeader from "~/components/core/ApplicationHeader";
import ApplicationLayout from "~/components/core/ApplicationLayout";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
const getCurrentNavigationStateById = (navigation, targetId) => {
let target = null;
@ -82,7 +82,7 @@ export default class IndexPage extends React.Component {
currentIndex: 0,
data: null,
selected: {
address: '',
address: "",
},
viewer: State.getInitialState(this.props),
sidebar: null,
@ -93,36 +93,36 @@ export default class IndexPage extends React.Component {
this._socket = new WebSocket(`ws://localhost:${this.props.wsPort}`);
this._socket.onmessage = (m) => {
console.log(m);
if (m.type === 'message') {
if (m.type === "message") {
const parsed = JSON.parse(m.data);
if (parsed.action === 'UPDATE_VIEWER') {
if (parsed.action === "UPDATE_VIEWER") {
this.rehydrate({ data: parsed.data });
}
}
};
window.addEventListener('dragenter', this._handleDragEnter);
window.addEventListener('dragleave', this._handleDragLeave);
window.addEventListener('dragover', this._handleDragOver);
window.addEventListener('drop', this._handleDrop);
window.addEventListener("dragenter", this._handleDragEnter);
window.addEventListener("dragleave", this._handleDragLeave);
window.addEventListener("dragover", this._handleDragOver);
window.addEventListener("drop", this._handleDrop);
}
componentWillUnmount() {
window.removeEventListener('dragenter', this._handleDragEnter);
window.removeEventListener('dragleave', this._handleDragLeave);
window.removeEventListener('dragover', this._handleDragOver);
window.removeEventListener('drop', this._handleDrop);
window.removeEventListener("dragenter", this._handleDragEnter);
window.removeEventListener("dragleave", this._handleDragLeave);
window.removeEventListener("dragover", this._handleDragOver);
window.removeEventListener("drop", this._handleDrop);
}
_handleSetFile = async ({ file }) => {
let data = new FormData();
data.append('image', file);
data.append("image", file);
const options = {
method: 'POST',
method: "POST",
headers: {
Accept: 'application/json',
Accept: "application/json",
},
body: data,
};
@ -137,17 +137,17 @@ export default class IndexPage extends React.Component {
_handleDragEnter = (e) => {
// TODO(jim): Styles.
console.log('dragenter', e);
console.log("dragenter", e);
};
_handleDragLeave = (e) => {
// TODO(jim): Styles.
console.log('dragleave', e);
console.log("dragleave", e);
};
_handleDragOver = (e) => {
e.preventDefault();
console.log('dragover', e);
console.log("dragover", e);
};
_handleDrop = async (e) => {
@ -155,7 +155,7 @@ export default class IndexPage extends React.Component {
if (e.dataTransfer.items) {
for (var i = 0; i < e.dataTransfer.items.length; i++) {
if (e.dataTransfer.items[i].kind === 'file') {
if (e.dataTransfer.items[i].kind === "file") {
var file = e.dataTransfer.items[i].getAsFile();
console.log(file.name);
await this._handleSetFile({ file });
@ -164,7 +164,7 @@ export default class IndexPage extends React.Component {
}
}
this._handleAction({ type: 'SIDEBAR', value: 'SIDEBAR_FILE_STORAGE_DEAL' });
this._handleAction({ type: "SIDEBAR", value: "SIDEBAR_FILE_STORAGE_DEAL" });
};
rehydrate = async ({ data }) => {
@ -173,11 +173,11 @@ export default class IndexPage extends React.Component {
_handleSubmit = async (data) => {
if (this.props.production) {
alert('TODO');
alert("TODO");
return this._handleDismissSidebar();
}
if (data.type === 'CREATE_WALLET_ADDRESS') {
if (data.type === "CREATE_WALLET_ADDRESS") {
const address = await Actions.createWalletAddress({
name: data.name,
type: data.wallet_type,
@ -185,7 +185,7 @@ export default class IndexPage extends React.Component {
});
}
if (data.type === 'SEND_WALLET_ADDRESS_FILECOIN') {
if (data.type === "SEND_WALLET_ADDRESS_FILECOIN") {
const response = await Actions.sendWalletAddressFilecoin({
source: data.source,
target: data.target,
@ -217,19 +217,19 @@ export default class IndexPage extends React.Component {
};
_handleAction = (options) => {
if (options.type === 'NAVIGATE') {
if (options.type === "NAVIGATE") {
return this._handleNavigateTo({ id: options.value }, options.data);
}
if (options.type === 'ACTION') {
if (options.type === "ACTION") {
return alert(JSON.stringify(options));
}
if (options.type === 'DOWNLOAD') {
if (options.type === "DOWNLOAD") {
return alert(JSON.stringify(options));
}
if (options.type === 'SIDEBAR') {
if (options.type === "SIDEBAR") {
return this.setState({ sidebar: this.sidebars[options.value] });
}
@ -333,7 +333,7 @@ export default class IndexPage extends React.Component {
return null;
}
const navigation = Fixtures.generateNavigationState(this.state.viewer.library);
const navigation = NavigationData.generate(this.state.viewer.library);
const next = this.state.history[this.state.currentIndex];
const current = getCurrentNavigationStateById(navigation, next.id);
@ -388,8 +388,8 @@ export default class IndexPage extends React.Component {
}
const title = `Prototype 0.0.1 : ${current.target.pageTitle}`;
const description = 'This is an early preview.';
const url = 'https://fps.onrender.com/v1';
const description = "This is an early preview.";
const url = "https://fps.onrender.com/v1";
return (
<React.Fragment>

17
scenes/SceneDataTransfer.js
View File

@ -1,12 +1,7 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import * as SchemaTable from "~/common/schema-table";
import { css } from "@emotion/react";
import ScenePage from "~/components/core/ScenePage";
import Section from "~/components/core/Section";
@ -34,11 +29,7 @@ export default class SceneDataTransfer extends React.Component {
/>
{this.state.sub_navigation === "2" ? (
<Section
title="Past transfers"
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
>
<Section title="Past transfers" onAction={this.props.onAction} onNavigateTo={this.props.onNavigateTo}>
<System.Table
data={{
columns: SchemaTable.DataTransfer,
@ -54,11 +45,7 @@ export default class SceneDataTransfer extends React.Component {
) : null}
{this.state.sub_navigation === "1" ? (
<Section
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
title="Current transfers"
>
<Section onAction={this.props.onAction} onNavigateTo={this.props.onNavigateTo} title="Current transfers">
<System.P style={{ padding: 24 }}>There are no transfers</System.P>
</Section>
) : null}

8
scenes/SceneDeals.js
View File

@ -1,7 +1,6 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import * as SchemaTable from "~/common/schema-table";
@ -20,12 +19,7 @@ export default class SceneDeals extends React.Component {
render() {
return (
<ScenePage>
<Section
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
title="All deals"
buttons={[]}
>
<Section onAction={this.props.onAction} onNavigateTo={this.props.onNavigateTo} title="All deals" buttons={[]}>
<System.Table
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}

6
scenes/SceneFile.js
View File

@ -1,7 +1,6 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import * as SVG from "~/components/system/svg";
@ -128,10 +127,7 @@ export default class SceneFile extends React.Component {
<SVG.Dismiss height="24px" />
</div>
</div>
<div
css={STYLES_ASSET}
style={{ backgroundImage: `url('${fileURL}')` }}
/>
<div css={STYLES_ASSET} style={{ backgroundImage: `url('${fileURL}')` }} />
</div>
);
}

7
scenes/SceneFilesFolder.js
View File

@ -1,7 +1,6 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import { css } from "@emotion/react";
@ -31,8 +30,7 @@ export default class SceneFilesFolder extends React.Component {
key: "date",
name: "Date uploaded",
width: "160px",
tooltip:
"This date represents when the file was first uploaded to the network.",
tooltip: "This date represents when the file was first uploaded to the network.",
type: "FILE_DATE",
},
{
@ -56,8 +54,7 @@ export default class SceneFilesFolder extends React.Component {
type: "SIDEBAR",
value: "SIDEBAR_FILE_STORAGE_DEAL",
},
]}
>
]}>
<System.Table
key={this.props.data.folderId}
data={data}

7
scenes/SceneHome.js
View File

@ -1,7 +1,6 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import * as SchemaTable from "~/common/schema-table";
import * as Data from "~/common/data";
@ -70,8 +69,7 @@ export default class SceneHome extends React.Component {
type: "SIDEBAR",
value: "SIDEBAR_FILE_STORAGE_DEAL",
},
]}
>
]}>
<System.Table
data={{
columns: [
@ -116,8 +114,7 @@ export default class SceneHome extends React.Component {
type: "NAVIGATE",
value: 2,
},
]}
>
]}>
<System.Table
data={{
columns: [

37
scenes/SceneLogs.js
View File

@ -1,7 +1,6 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import { css } from "@emotion/react";
@ -22,8 +21,7 @@ const TAB_GROUP = [
color: Constants.system.white,
position: "relative",
marginLeft: 8,
}}
>
}}>
14
</Pill>
</React.Fragment>
@ -40,8 +38,7 @@ const TAB_GROUP = [
color: Constants.system.white,
position: "relative",
marginLeft: 8,
}}
>
}}>
14
</Pill>
</React.Fragment>
@ -58,8 +55,7 @@ const TAB_GROUP = [
color: Constants.system.white,
position: "relative",
marginLeft: 8,
}}
>
}}>
56
</Pill>
</React.Fragment>
@ -76,8 +72,7 @@ const TAB_GROUP = [
color: Constants.system.white,
position: "relative",
marginLeft: 8,
}}
>
}}>
56
</Pill>
</React.Fragment>
@ -134,8 +129,7 @@ export default class SceneLogs extends React.Component {
color: Constants.system.white,
position: "relative",
marginLeft: 8,
}}
>
}}>
14
</Pill>
</React.Fragment>
@ -151,8 +145,7 @@ export default class SceneLogs extends React.Component {
type: "DOWNLOAD",
value: "CSV_LOGS_ALL",
},
]}
>
]}>
<div css={STYLES_LOGS}>
message in mempool has too high of a nonce (5000 > 4686) <br />
message in mempool has too high of a nonce (5000 > 4686) <br />
@ -227,8 +220,7 @@ export default class SceneLogs extends React.Component {
color: Constants.system.white,
position: "relative",
marginLeft: 8,
}}
>
}}>
14
</Pill>
</React.Fragment>
@ -244,8 +236,7 @@ export default class SceneLogs extends React.Component {
type: "DOWNLOAD",
value: "CSV_LOGS_NODE",
},
]}
>
]}>
<div css={STYLES_LOGS}>
message in mempool has too high of a nonce (5000 > 4686) <br />
message in mempool has too high of a nonce (5000 > 4686) <br />
@ -320,8 +311,7 @@ export default class SceneLogs extends React.Component {
color: Constants.system.white,
position: "relative",
marginLeft: 8,
}}
>
}}>
56
</Pill>
</React.Fragment>
@ -337,8 +327,7 @@ export default class SceneLogs extends React.Component {
type: "DOWNLOAD",
value: "CSV_LOGS_SEALING",
},
]}
>
]}>
<div css={STYLES_LOGS}>
message in mempool has too high of a nonce (5000 > 4686) <br />
message in mempool has too high of a nonce (5000 > 4686) <br />
@ -413,8 +402,7 @@ export default class SceneLogs extends React.Component {
color: Constants.system.white,
position: "relative",
marginLeft: 8,
}}
>
}}>
56
</Pill>
</React.Fragment>
@ -430,8 +418,7 @@ export default class SceneLogs extends React.Component {
type: "DOWNLOAD",
value: "CSV_LOGS_MINING",
},
]}
>
]}>
<div css={STYLES_LOGS}>
message in mempool has too high of a nonce (5000 > 4686) <br />
message in mempool has too high of a nonce (5000 > 4686) <br />

4
scenes/SceneMiners.js
View File

@ -1,7 +1,6 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import { css } from "@emotion/react";
@ -35,8 +34,7 @@ export default class SceneMiners extends React.Component {
type: "DOWNLOAD",
value: "CSV_ALL_MINERS",
},
]}
>
]}>
<System.Table
data={{
columns: [

7
scenes/ScenePaymentChannels.js
View File

@ -1,7 +1,6 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import * as SchemaTable from "~/common/schema-table";
@ -49,8 +48,7 @@ export default class ScenePaymentChannels extends React.Component {
type: "DOWNLOAD",
value: "CSV_ACTIVE_PAYMENT_CHANNELS",
},
]}
>
]}>
<System.Table
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
@ -76,8 +74,7 @@ export default class ScenePaymentChannels extends React.Component {
type: "DOWNLOAD",
value: "CSV_REDEEMED_PAYMENT_CHANNELS",
},
]}
>
]}>
<System.Table
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}

3
scenes/ScenePeers.js
View File

@ -32,8 +32,7 @@ export default class ScenePeers extends React.Component {
type: "SIDEBAR",
value: "SIDEBAR_ADD_PEER",
},
]}
>
]}>
<System.Table
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}

45
scenes/SceneStats.js
View File

@ -1,7 +1,6 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import { css } from "@emotion/react";
@ -150,8 +149,7 @@ export default class SceneStats extends React.Component {
type: "DOWNLOAD",
value: "CSV_STATS_WALLET",
},
]}
>
]}>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Total FIL Balance</div>
<div css={STYLES_RIGHT}>Value (FIL/ATTOFIL)</div>
@ -175,10 +173,7 @@ export default class SceneStats extends React.Component {
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>
Total wallet addresses{" "}
<strong
css={STYLES_TEXT_CTA}
onClick={() => this.props.onNavigateTo({ id: 2 })}
>
<strong css={STYLES_TEXT_CTA} onClick={() => this.props.onNavigateTo({ id: 2 })}>
(view)
</strong>
</div>
@ -187,10 +182,7 @@ export default class SceneStats extends React.Component {
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>
Total payment channels{" "}
<strong
css={STYLES_TEXT_CTA}
onClick={() => this.props.onNavigateTo({ id: 3 })}
>
<strong css={STYLES_TEXT_CTA} onClick={() => this.props.onNavigateTo({ id: 3 })}>
(view)
</strong>
</div>
@ -199,10 +191,7 @@ export default class SceneStats extends React.Component {
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>
Total FIL in payment channels{" "}
<strong
css={STYLES_TEXT_CTA}
onClick={() => this.props.onNavigateTo({ id: 3 })}
>
<strong css={STYLES_TEXT_CTA} onClick={() => this.props.onNavigateTo({ id: 3 })}>
(view)
</strong>
</div>
@ -225,8 +214,7 @@ export default class SceneStats extends React.Component {
type: "DOWNLOAD",
value: "CSV_STATS_NODE",
},
]}
>
]}>
<div css={STYLES_GRAPH_ROW}>
<div css={STYLES_GRAPH_ROW_LEFT}>
<div css={STYLES_GRAPH_OBJECT}>
@ -344,10 +332,7 @@ export default class SceneStats extends React.Component {
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>
Favorite peers{" "}
<strong
css={STYLES_TEXT_CTA}
onClick={() => this.props.onNavigateTo({ id: 8 })}
>
<strong css={STYLES_TEXT_CTA} onClick={() => this.props.onNavigateTo({ id: 8 })}>
(view)
</strong>
</div>
@ -374,8 +359,7 @@ export default class SceneStats extends React.Component {
type: "DOWNLOAD",
value: "CSV_STATS_DATA",
},
]}
>
]}>
<div css={STYLES_GRAPH_ROW}>
<div css={STYLES_GRAPH_ROW_LEFT}>
<div css={STYLES_GRAPH_OBJECT}>
@ -520,8 +504,7 @@ export default class SceneStats extends React.Component {
type: "DOWNLOAD",
value: "CSV_MOST_COMMON_CIDS",
},
]}
>
]}>
<System.Table
data={{
columns: [
@ -585,8 +568,7 @@ export default class SceneStats extends React.Component {
type: "DOWNLOAD",
value: "CSV_TOP_STORAGE_DEALS_GB",
},
]}
>
]}>
<System.Table
data={{
columns: [
@ -597,8 +579,7 @@ export default class SceneStats extends React.Component {
key: "date",
name: "Date uploaded",
width: "168px",
tooltip:
"This date represents when the file was first uploaded to the network.",
tooltip: "This date represents when the file was first uploaded to the network.",
},
],
rows: [],
@ -620,8 +601,7 @@ export default class SceneStats extends React.Component {
type: "DOWNLOAD",
value: "CSV_TOP_STORAGE_DEALS_FIL",
},
]}
>
]}>
<System.Table
data={{
columns: [
@ -632,8 +612,7 @@ export default class SceneStats extends React.Component {
key: "date",
name: "Date uploaded",
width: "168px",
tooltip:
"This date represents when the file was first uploaded to the network.",
tooltip: "This date represents when the file was first uploaded to the network.",
},
],
rows: [],

30
scenes/SceneStatus.js
View File

@ -1,7 +1,6 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import { css } from "@emotion/react";
@ -58,26 +57,18 @@ export default class SceneStatus extends React.Component {
<ScenePage>
<System.H1>Status</System.H1>
<Section
title="Node"
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
>
<Section title="Node" onAction={this.props.onAction} onNavigateTo={this.props.onNavigateTo}>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Peer ID</div>
<div css={STYLES_RIGHT}>
Qma9T5YraSnpRDZqRR4krcSJabThc8nwZuJV3LercPHufi{" "}
<strong css={STYLES_TEXT_CTA}>(copy)</strong>
Qma9T5YraSnpRDZqRR4krcSJabThc8nwZuJV3LercPHufi <strong css={STYLES_TEXT_CTA}>(copy)</strong>
</div>
</div>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>
Peers{" "}
<strong
css={STYLES_TEXT_CTA}
onClick={() => this.props.onNavigateTo({ id: 8 })}
>
<strong css={STYLES_TEXT_CTA} onClick={() => this.props.onNavigateTo({ id: 8 })}>
(view)
</strong>
</div>
@ -92,10 +83,7 @@ export default class SceneStatus extends React.Component {
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>
Miners{" "}
<strong
css={STYLES_TEXT_CTA}
onClick={() => this.props.onNavigateTo({ id: 11 })}
>
<strong css={STYLES_TEXT_CTA} onClick={() => this.props.onNavigateTo({ id: 11 })}>
(view)
</strong>
</div>
@ -120,8 +108,7 @@ export default class SceneStatus extends React.Component {
type: "ACTION",
value: "ACTION_DISCONNECT",
},
]}
>
]}>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Network</div>
<div css={STYLES_RIGHT}>Mainnet</div>
@ -151,8 +138,7 @@ export default class SceneStatus extends React.Component {
type: "ACTION",
value: "ACTION_IMPORT_CHAIN_DATA",
},
]}
>
]}>
<div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Status</div>
<div css={STYLES_RIGHT}>Message Sync 30%</div>
@ -181,9 +167,7 @@ export default class SceneStatus extends React.Component {
description="Reset your usage data on this Filecoin Node."
/>
<System.ButtonSecondary style={{ marginTop: 16 }}>
Reset
</System.ButtonSecondary>
<System.ButtonSecondary style={{ marginTop: 16 }}>Reset</System.ButtonSecondary>
</ScenePage>
);
}

20
scenes/SceneStorageMarket.js
View File

@ -1,7 +1,6 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import { css } from "@emotion/react";
@ -84,18 +83,12 @@ export default class SceneStorageMarket extends React.Component {
<System.H1>2,534 FIL</System.H1>
<System.P>
Last Storage Order / GB / Month{" "}
<strong style={{ color: Constants.system.green, fontWeight: 400 }}>
+143.24 (6.08)%
</strong>
<strong style={{ color: Constants.system.green, fontWeight: 400 }}>+143.24 (6.08)%</strong>
</System.P>
<div css={STYLES_CHART_SECTION}>
<div css={STYLES_LEFT}>
<Section
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
title="Storage market"
>
<Section onAction={this.props.onAction} onNavigateTo={this.props.onNavigateTo} title="Storage market">
<div css={STYLES_OPTIONS}>
<span css={STYLES_OPTION}>1 Day</span>
<span css={STYLES_OPTION}>1 Week</span>
@ -129,11 +122,7 @@ export default class SceneStorageMarket extends React.Component {
</Section>
</div>
<div css={STYLES_RIGHT}>
<Section
onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo}
title="Statistics"
>
<Section onAction={this.props.onAction} onNavigateTo={this.props.onNavigateTo} title="Statistics">
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>8,422 FIL/GB/Month</div>
<div css={STYLES_SUBTEXT}>Market Storage Price</div>
@ -187,8 +176,7 @@ export default class SceneStorageMarket extends React.Component {
type: "DOWNLOAD",
value: "CSV_STORAGE_DEALS",
},
]}
>
]}>
<System.Table
data={{
columns: [

35
scenes/SceneWallet.js
View File

@ -2,7 +2,6 @@ import * as React from "react";
import * as Strings from "~/common/strings";
import * as Constants from "~/common/constants";
import * as SVG from "~/components/system/svg";
import * as Fixtures from "~/common/fixtures";
import * as System from "~/components/system";
import * as SchemaTable from "~/common/schema-table";
@ -181,8 +180,7 @@ export default class SceneWallet extends React.Component {
type: "SIDEBAR",
value: "SIDEBAR_CREATE_WALLET_ADDRESS",
},
]}
>
]}>
<div css={STYLES_GROUP}>
<System.SelectMenu
label="Select your address"
@ -190,8 +188,7 @@ export default class SceneWallet extends React.Component {
value={this.props.selected.address}
category="address"
onChange={this._handleWalletChange}
options={this.props.viewer.addresses}
>
options={this.props.viewer.addresses}>
{currentAddress.name}
</System.SelectMenu>
</div>
@ -200,11 +197,7 @@ export default class SceneWallet extends React.Component {
<div css={STYLES_TEXT}>
<div>
<div css={STYLES_FOCUS}>
{this.state.visible ? (
currentAddress.address
) : (
<span css={STYLES_FOCUS_EMPAHSIS}>Hidden</span>
)}
{this.state.visible ? currentAddress.address : <span css={STYLES_FOCUS_EMPAHSIS}>Hidden</span>}
</div>
<div css={STYLES_SUBTEXT}>Filecoin address</div>
</div>
@ -212,8 +205,7 @@ export default class SceneWallet extends React.Component {
<div style={{ marginTop: 24 }}>
<div css={STYLES_FOCUS}>
{currentAddress.name}{" "}
{this.props.viewer.settings_cold_default_address ===
currentAddress.address ? (
{this.props.viewer.settings_cold_default_address === currentAddress.address ? (
<strong css={STYLES_FOCUS_EMPAHSIS}>(Primary)</strong>
) : null}
</div>
@ -222,9 +214,7 @@ export default class SceneWallet extends React.Component {
<div css={STYLES_ITEM_GROUP}>
<div css={STYLES_ITEM}>
<div css={STYLES_FOCUS}>
{Strings.formatNumber(currentAddress.balance)}
</div>
<div css={STYLES_FOCUS}>{Strings.formatNumber(currentAddress.balance)}</div>
<div css={STYLES_SUBTEXT}>Filecoin</div>
</div>
@ -242,8 +232,7 @@ export default class SceneWallet extends React.Component {
type: "SIDEBAR",
value: "SIDEBAR_WALLET_SEND_FUNDS",
})
}
>
}>
Send Filecoin
</System.ButtonPrimary>
</div>
@ -254,17 +243,11 @@ export default class SceneWallet extends React.Component {
onClick={this._handleMakeAddressVisible}
style={{
marginRight: 16,
backgroundColor: this.state.visible
? null
: Constants.system.brand,
}}
>
backgroundColor: this.state.visible ? null : Constants.system.brand,
}}>
<SVG.Privacy height="16px" />
</span>
<span
css={STYLES_CIRCLE_BUTTON}
onClick={() => this._handleCopy(currentAddress.address)}
>
<span css={STYLES_CIRCLE_BUTTON} onClick={() => this._handleCopy(currentAddress.address)}>
<SVG.CopyAndPaste height="16px" />
</span>
</div>

114
server.js
View File

@ -1,28 +1,28 @@
import * as Middleware from '~/common/middleware';
import * as Strings from '~/common/strings';
import * as Utilities from '~/node_common/utilities';
import * as Constants from '~/node_common/constants';
import * as Middleware from "~/common/middleware";
import * as Strings from "~/common/strings";
import * as Utilities from "~/node_common/utilities";
import * as Constants from "~/node_common/constants";
import { createPow, ffs } from '@textile/powergate-client';
import { createPow, ffs } from "@textile/powergate-client";
// NOTE(jim):
// https://github.com/textileio/js-powergate-client
const PowerGate = createPow({ host: Constants.POWERGATE_HOST });
import FS from 'fs-extra';
import WebSocketServer from 'ws';
import express from 'express';
import formidable from 'formidable';
import next from 'next';
import bodyParser from 'body-parser';
import compression from 'compression';
import { v4 as uuid } from 'uuid';
import FS from "fs-extra";
import WebSocketServer from "ws";
import express from "express";
import formidable from "formidable";
import next from "next";
import bodyParser from "body-parser";
import compression from "compression";
import { v4 as uuid } from "uuid";
// TODO(jim): Support multiple desktop applications.
let client = null;
let state = null;
const production = process.env.NODE_ENV === 'production';
const production = process.env.NODE_ENV === "production";
const port = process.env.PORT || 1337;
const wsPort = process.env.WS_PORT || 2448;
const app = next({ dev: !production, quiet: false });
@ -31,14 +31,14 @@ const nextRequestHandler = app.getRequestHandler();
const setIntervalViewerUpdatesUnsafe = async () => {
if (client) {
try {
console.log('[ prototype ] polling: new viewer state.');
console.log("[ prototype ] polling: new viewer state.");
state = await Utilities.emitState({
state,
client,
PG: PowerGate,
});
console.log('[ prototype ] polling: new library state.');
console.log("[ prototype ] polling: new library state.");
state = await Utilities.refreshLibrary({
state,
PG: PowerGate,
@ -53,7 +53,7 @@ const setIntervalViewerUpdatesUnsafe = async () => {
};
app.prepare().then(async () => {
console.log('[ prototype ] initializing ');
console.log("[ prototype ] initializing ");
state = {
production,
@ -77,7 +77,7 @@ app.prepare().then(async () => {
const updates = await Utilities.refresh({ PG: PowerGate });
state = await Utilities.updateStateData(state, updates);
console.log('[ prototype ] updated without token');
console.log("[ prototype ] updated without token");
// NOTE(jim): This is a configuration folder with all of the client tokens.
// TODO(jim): Unnecessary if we use a local and remote postgres.
@ -87,20 +87,20 @@ app.prepare().then(async () => {
// NOTE(jim): This will create a token for authentication with powergate.
// TODO(jim): Roll this up into Postgres instead.
if (!FS.existsSync('./.data/powergate-token')) {
if (!FS.existsSync("./.data/powergate-token")) {
const FFS = await PowerGate.ffs.create();
state.token = FFS.token ? FFS.token : null;
// NOTE(jim): Write a new token file.
if (state.token) {
FS.writeFileSync('./.data/powergate-token', state.token);
FS.writeFileSync("./.data/powergate-token", state.token);
}
} else {
state.token = FS.readFileSync('./.data/powergate-token', 'utf8');
state.token = FS.readFileSync("./.data/powergate-token", "utf8");
}
if (state.token) {
console.log('[ prototype ] powergate token:', state.token);
console.log("[ prototype ] powergate token:", state.token);
PowerGate.setToken(state.token);
}
@ -108,63 +108,63 @@ app.prepare().then(async () => {
PG: PowerGate,
});
state = await Utilities.updateStateData(state, tokenUpdates);
console.log('[ prototype ] updated with token');
console.log("[ prototype ] updated with token");
// NOTE(jim): Local library retrieval or creation
// TODO(jim): Needs to support nested folders in the future.
// TODO(jim): May consider a move to buckets.
if (!FS.existsSync('./.data/library.json')) {
if (!FS.existsSync("./.data/library.json")) {
const librarySchema = {
library: [
{
...Utilities.createFolder({ id: Constants.FILE_STORAGE_URL }),
file: 'Files',
name: 'Files',
file: "Files",
name: "Files",
},
],
};
FS.writeFileSync('./.data/library.json', JSON.stringify(librarySchema));
FS.writeFileSync("./.data/library.json", JSON.stringify(librarySchema));
state.library = librarySchema.library;
} else {
const parsedLibrary = FS.readFileSync('./.data/library.json', 'utf8');
const parsedLibrary = FS.readFileSync("./.data/library.json", "utf8");
state.library = JSON.parse(parsedLibrary).library;
}
// NOTE(jim): Local settings retrieval or creation
// TODO(jim): Move this to postgres later.
if (!FS.existsSync('./.data/local-settings.json')) {
if (!FS.existsSync("./.data/local-settings.json")) {
const localSettingsSchema = {
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 ] PROPERLY CONFIGURED POWERGATE AND ');
console.log('[ prototype ] CONNECTED TO THE FILECOIN NETWORK (DEVNET/TESTNET) ');
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) ");
}
}
const server = express();
const WSS = new WebSocketServer.Server({ port: wsPort });
WSS.on('connection', (s) => {
WSS.on("connection", (s) => {
// TODO(jim): Suppport more than one client.
client = s;
s.on('close', function () {
s.send(JSON.stringify({ action: null, data: 'closed' }));
s.on("close", function () {
s.send(JSON.stringify({ action: null, data: "closed" }));
});
s.send(JSON.stringify({ action: null, data: 'connected' }));
s.send(JSON.stringify({ action: null, data: "connected" }));
});
if (production) {
@ -172,7 +172,7 @@ app.prepare().then(async () => {
}
server.use(Middleware.CORS);
server.use('/public', express.static('public'));
server.use("/public", express.static("public"));
server.use(bodyParser.json());
server.use(
bodyParser.urlencoded({
@ -180,7 +180,7 @@ app.prepare().then(async () => {
})
);
server.post('/_/viewer', async (req, res) => {
server.post("/_/viewer", async (req, res) => {
let data = state;
if (!production) {
@ -197,7 +197,7 @@ app.prepare().then(async () => {
return res.status(200).send({ success: true, data });
});
server.post('/_/deals/storage', async (req, res) => {
server.post("/_/deals/storage", async (req, res) => {
if (Strings.isEmpty(req.body.src)) {
return res.status(500).send({ success: false });
}
@ -222,14 +222,14 @@ 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 });
return res.status(200).send({ success: true, cid, jobId });
});
server.post('/_/storage/:file', async (req, res) => {
server.post("/_/storage/:file", async (req, res) => {
const form = formidable({
multiples: true,
uploadDir: Constants.FILE_STORAGE_URL,
@ -241,8 +241,8 @@ app.prepare().then(async () => {
} else {
// 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 });
console.error("[ prototype ] File type unspported", files);
return res.status(500).send({ error: "File type unsupported", files });
}
const newPath = form.uploadDir + req.params.file;
@ -265,7 +265,7 @@ 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({
@ -279,7 +279,7 @@ app.prepare().then(async () => {
});
});
server.post('/_/upload/avatar', async (req, res) => {
server.post("/_/upload/avatar", async (req, res) => {
const form = formidable({
multiples: true,
uploadDir: Constants.AVATAR_STORAGE_URL,
@ -295,7 +295,7 @@ 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,
@ -308,7 +308,7 @@ app.prepare().then(async () => {
});
});
server.post('/_/settings', async (req, res) => {
server.post("/_/settings", async (req, res) => {
let data;
try {
data = await PowerGate.ffs.setDefaultConfig(req.body.config);
@ -320,15 +320,15 @@ app.prepare().then(async () => {
return res.status(200).send({ success: true, data });
});
server.post('/_/local-settings', async (req, res) => {
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 });
});
server.post('/_/wallet/create', async (req, res) => {
server.post("/_/wallet/create", async (req, res) => {
let data;
try {
data = await PowerGate.ffs.newAddr(req.body.name, req.body.type, req.body.makeDefault);
@ -340,7 +340,7 @@ app.prepare().then(async () => {
return res.status(200).send({ success: true, data });
});
server.post('/_/wallet/send', async (req, res) => {
server.post("/_/wallet/send", async (req, res) => {
let data;
try {
data = await PowerGate.ffs.sendFil(req.body.source, req.body.target, req.body.amount);
@ -352,18 +352,18 @@ app.prepare().then(async () => {
return res.status(200).send({ success: true, data: { ...data, ...req.body } });
});
server.get('/', async (req, res) => {
server.get("/", async (req, res) => {
if (!state.token) {
return res.redirect('/system');
return res.redirect("/system");
}
return app.render(req, res, '/', {
return app.render(req, res, "/", {
production,
wsPort,
});
});
server.get('*', async (req, res) => {
server.get("*", async (req, res) => {
return nextRequestHandler(req, res, req.url);
});