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

cleanup: formatting pass

Browse Source
This commit is contained in:
@wwwjim 2020-06-18 20:57:57 -07:00
parent 6e9c28e529
commit 68de6a402f
24 changed files with 898 additions and 650 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
common/actions.js
View File

@ -1,22 +1,24 @@
import 'isomorphic-fetch'; import "isomorphic-fetch";
import * as State from '~/common/state'; import * as State from "~/common/state";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
const REQUEST_HEADERS = { const REQUEST_HEADERS = {
Accept: 'application/json', Accept: "application/json",
'Content-Type': 'application/json', "Content-Type": "application/json",
}; };
const dev = process.env.NODE_ENV !== 'production'; const dev = process.env.NODE_ENV !== "production";
const SERVER_PATH = dev ? 'http://localhost:1337' : 'https://filecoin.onrender.com'; const SERVER_PATH = dev
? "http://localhost:1337"
: "https://filecoin.onrender.com";
export const rehydrateViewer = async () => { export const rehydrateViewer = async () => {
const options = { const options = {
method: 'POST', method: "POST",
headers: REQUEST_HEADERS, headers: REQUEST_HEADERS,
credentials: 'include', credentials: "include",
body: JSON.stringify({}), body: JSON.stringify({}),
}; };
@ -28,9 +30,9 @@ export const rehydrateViewer = async () => {
export const setDefaultConfig = async (data) => { export const setDefaultConfig = async (data) => {
const options = { const options = {
method: 'POST', method: "POST",
headers: REQUEST_HEADERS, headers: REQUEST_HEADERS,
credentials: 'include', credentials: "include",
body: JSON.stringify(data), body: JSON.stringify(data),
}; };
@ -46,9 +48,9 @@ export const createWalletAddress = async (data) => {
} }
const options = { const options = {
method: 'POST', method: "POST",
headers: REQUEST_HEADERS, headers: REQUEST_HEADERS,
credentials: 'include', credentials: "include",
body: JSON.stringify(data), body: JSON.stringify(data),
}; };
@ -72,9 +74,9 @@ export const sendWalletAddressFilecoin = async (data) => {
} }
const options = { const options = {
method: 'POST', method: "POST",
headers: REQUEST_HEADERS, headers: REQUEST_HEADERS,
credentials: 'include', credentials: "include",
body: JSON.stringify(data), body: JSON.stringify(data),
}; };

4
common/credentials.js
View File

@ -1,3 +1,3 @@
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== "production") {
require('dotenv').config(); require("dotenv").config();
} }

30
common/fixtures.js
View File

@ -2,7 +2,7 @@ const constructFilesTreeForNavigation = (library) => {
for (let i = 0; i < library.length; i++) { for (let i = 0; i < library.length; i++) {
for (let j = 0; j < library[i].children.length; j++) { for (let j = 0; j < library[i].children.length; j++) {
let e = library[i].children[j]; let e = library[i].children[j];
if (e.decorator === 'FILE') { if (e.decorator === "FILE") {
library[i].children[j].ignore = true; library[i].children[j].ignore = true;
} }
} }
@ -14,39 +14,39 @@ const constructFilesTreeForNavigation = (library) => {
export const generateNavigationState = (library) => [ export const generateNavigationState = (library) => [
{ {
id: 1, id: 1,
name: 'Home', name: "Home",
pageTitle: 'home', pageTitle: "home",
decorator: 'HOME', decorator: "HOME",
children: null, children: null,
}, },
{ {
id: 2, id: 2,
name: 'Wallet', name: "Wallet",
pageTitle: 'your wallet and addresses', pageTitle: "your wallet and addresses",
decorator: 'WALLET', decorator: "WALLET",
}, },
...constructFilesTreeForNavigation(library), ...constructFilesTreeForNavigation(library),
{ {
id: 13, id: 13,
name: 'Edit account', name: "Edit account",
pageTitle: 'your account', pageTitle: "your account",
decorator: 'EDIT_ACCOUNT', decorator: "EDIT_ACCOUNT",
children: null, children: null,
ignore: true, ignore: true,
}, },
{ {
id: 14, id: 14,
name: 'Settings', name: "Settings",
pageTitle: 'your settings', pageTitle: "your settings",
decorator: 'SETTINGS', decorator: "SETTINGS",
children: null, children: null,
ignore: true, ignore: true,
}, },
{ {
id: 15, id: 15,
name: null, name: null,
pageTitle: 'files', pageTitle: "files",
decorator: 'FILE', decorator: "FILE",
children: null, children: null,
ignore: true, ignore: true,
}, },

12
common/middleware.js
View File

@ -1,15 +1,15 @@
export const CORS = async (req, res, next) => { export const CORS = async (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); res.header("Access-Control-Allow-Origin", "*");
res.header( res.header(
'Access-Control-Allow-Methods', "Access-Control-Allow-Methods",
'GET, POST, PATCH, PUT, DELETE, OPTIONS' "GET, POST, PATCH, PUT, DELETE, OPTIONS"
); );
res.header( res.header(
'Access-Control-Allow-Headers', "Access-Control-Allow-Headers",
'Origin, Accept, Content-Type, Authorization' "Origin, Accept, Content-Type, Authorization"
); );
if (req.method === 'OPTIONS') { if (req.method === "OPTIONS") {
return res.status(200).end(); return res.status(200).end();
} }

32
common/state.js
View File

@ -1,4 +1,8 @@
const STATIC_ADDRESS_TYPE_MAP = { bls: 'BLS', secp256k1: 'SECP256K1', multisig: 'MULTISIG' }; const STATIC_ADDRESS_TYPE_MAP = {
bls: "BLS",
secp256k1: "SECP256K1",
multisig: "MULTISIG",
};
const transformAddresses = (addrsList, info) => { const transformAddresses = (addrsList, info) => {
const balanceMap = {}; const balanceMap = {};
@ -24,8 +28,8 @@ const transformPeers = (peersList) => {
return peersList.map((each) => { return peersList.map((each) => {
return { return {
id: each.addrInfo.id, id: each.addrInfo.id,
'peer-avatar': null, "peer-avatar": null,
'chain-head': null, "chain-head": null,
height: null, height: null,
location: null, location: null,
upload: null, upload: null,
@ -53,8 +57,8 @@ export const getInitialState = (props) => {
return { return {
id: info.id, id: info.id,
name: 'New Node', name: "New Node",
photoURL: '/static/system/avatar.png', photoURL: "/static/system/avatar.png",
upload_bandwidth: 0, upload_bandwidth: 0,
download_bandwidth: 0, download_bandwidth: 0,
@ -66,13 +70,19 @@ export const getInitialState = (props) => {
settings_cold_enabled: info.defaultConfig.cold.enabled, settings_cold_enabled: info.defaultConfig.cold.enabled,
settings_cold_default_address: info.defaultConfig.cold.filecoin.addr, settings_cold_default_address: info.defaultConfig.cold.filecoin.addr,
settings_cold_default_duration: info.defaultConfig.cold.filecoin.dealMinDuration, settings_cold_default_duration:
settings_cold_default_replication_factor: info.defaultConfig.cold.filecoin.repFactor, info.defaultConfig.cold.filecoin.dealMinDuration,
settings_cold_default_excluded_miners: info.defaultConfig.cold.filecoin.excludedMinersList, settings_cold_default_replication_factor:
settings_cold_default_trusted_miners: info.defaultConfig.cold.filecoin.trustedMinersList, info.defaultConfig.cold.filecoin.repFactor,
settings_cold_default_excluded_miners:
info.defaultConfig.cold.filecoin.excludedMinersList,
settings_cold_default_trusted_miners:
info.defaultConfig.cold.filecoin.trustedMinersList,
settings_cold_default_max_price: info.defaultConfig.cold.filecoin.maxPrice, settings_cold_default_max_price: info.defaultConfig.cold.filecoin.maxPrice,
settings_cold_default_auto_renew: info.defaultConfig.cold.filecoin.renew.enabled, settings_cold_default_auto_renew:
settings_cold_default_auto_renew_max_price: info.defaultConfig.cold.filecoin.renew.threshold, info.defaultConfig.cold.filecoin.renew.enabled,
settings_cold_default_auto_renew_max_price:
info.defaultConfig.cold.filecoin.renew.threshold,
notifications: [], notifications: [],
payment_channels_active: [], payment_channels_active: [],

55
common/strings.js
View File

@ -6,41 +6,50 @@ const MONTH = (DAY * 365) / 12;
const YEAR = DAY * 365; const YEAR = DAY * 365;
export const copyText = (str) => { export const copyText = (str) => {
const el = document.createElement('textarea'); const el = document.createElement("textarea");
el.value = str; el.value = str;
el.setAttribute('readonly', ''); el.setAttribute("readonly", "");
el.style.position = 'absolute'; el.style.position = "absolute";
el.style.left = '-9999px'; el.style.left = "-9999px";
document.body.appendChild(el); document.body.appendChild(el);
el.select(); el.select();
document.execCommand('copy'); document.execCommand("copy");
document.body.removeChild(el); document.body.removeChild(el);
return true; return true;
}; };
export const hexToRGBA = (hex, alpha = 1) => { export const hexToRGBA = (hex, alpha = 1) => {
hex = hex.replace('#', ''); hex = hex.replace("#", "");
var r = parseInt(hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2), 16); var r = parseInt(
var g = parseInt(hex.length == 3 ? hex.slice(1, 2).repeat(2) : hex.slice(2, 4), 16); hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2),
var b = parseInt(hex.length == 3 ? hex.slice(2, 3).repeat(2) : hex.slice(4, 6), 16); 16
);
var g = parseInt(
hex.length == 3 ? hex.slice(1, 2).repeat(2) : hex.slice(2, 4),
16
);
var b = parseInt(
hex.length == 3 ? hex.slice(2, 3).repeat(2) : hex.slice(4, 6),
16
);
if (alpha) { if (alpha) {
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')'; return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else { } else {
return 'rgb(' + r + ', ' + g + ', ' + b + ')'; return "rgb(" + r + ", " + g + ", " + b + ")";
} }
}; };
export const bytesToSize = (bytes, decimals = 2) => { export const bytesToSize = (bytes, decimals = 2) => {
if (bytes === 0) return '0 Bytes'; if (bytes === 0) return "0 Bytes";
const k = 1024; const k = 1024;
const dm = decimals < 0 ? 0 : decimals; const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
const i = Math.floor(Math.log(bytes) / Math.log(k)); const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
}; };
export const getRemainingTime = (seconds) => { export const getRemainingTime = (seconds) => {
@ -48,18 +57,18 @@ export const getRemainingTime = (seconds) => {
let [value, unit] = let [value, unit] =
seconds < MINUTE seconds < MINUTE
? [Math.round(seconds), 'second'] ? [Math.round(seconds), "second"]
: seconds < HOUR : seconds < HOUR
? [Math.round(seconds / MINUTE), 'minute'] ? [Math.round(seconds / MINUTE), "minute"]
: seconds < DAY : seconds < DAY
? [Math.round(seconds / HOUR), 'hour'] ? [Math.round(seconds / HOUR), "hour"]
: seconds < WEEK : seconds < WEEK
? [Math.round(seconds / DAY), 'day'] ? [Math.round(seconds / DAY), "day"]
: seconds < MONTH : seconds < MONTH
? [Math.round(seconds / WEEK), 'week'] ? [Math.round(seconds / WEEK), "week"]
: seconds < YEAR : seconds < YEAR
? [Math.round(seconds / MONTH), 'month'] ? [Math.round(seconds / MONTH), "month"]
: [Math.round(seconds / YEAR), 'year']; : [Math.round(seconds / YEAR), "year"];
unit = pluralize(unit, value); unit = pluralize(unit, value);
@ -78,7 +87,7 @@ export const pluralize = (text, count) => {
return count > 1 || count === 0 ? `${text}s` : text; return count > 1 || count === 0 ? `${text}s` : text;
}; };
export const elide = (string, length = 140, emptyState = '...') => { export const elide = (string, length = 140, emptyState = "...") => {
if (isEmpty(string)) { if (isEmpty(string)) {
return emptyState; return emptyState;
} }
@ -96,5 +105,5 @@ export const toDate = (data) => {
}; };
export const formatNumber = (x) => { export const formatNumber = (x) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}; };

27
common/window.js
View File

@ -1,14 +1,17 @@
const getNavigatorAgent = userAgent => { const getNavigatorAgent = (userAgent) => {
return userAgent ? userAgent : navigator.userAgent || navigator.vendor || window.opera; return userAgent
? userAgent
: navigator.userAgent || navigator.vendor || window.opera;
}; };
export const delay = async waitMs => { export const delay = async (waitMs) => {
return await new Promise(resolve => setTimeout(resolve, waitMs)); return await new Promise((resolve) => setTimeout(resolve, waitMs));
}; };
export const checkIfElementIsVisible = el => { export const checkIfElementIsVisible = (el) => {
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const windowHeight = window.innerHeight || document.documentElement.clientHeight; const windowHeight =
window.innerHeight || document.documentElement.clientHeight;
const windowWidth = window.innerWidth || document.documentElement.clientWidth; const windowWidth = window.innerWidth || document.documentElement.clientWidth;
const isVisible = const isVisible =
@ -48,20 +51,24 @@ export const isDescendant = (parent, child) => {
}; };
export const getScrollDistance = () => { export const getScrollDistance = () => {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; return (
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
);
}; };
export const isAndroid = userAgent => { export const isAndroid = (userAgent) => {
const navigatorAgent = getNavigatorAgent(userAgent); const navigatorAgent = getNavigatorAgent(userAgent);
return /Android/i.test(navigatorAgent); return /Android/i.test(navigatorAgent);
}; };
export const isIOS = userAgent => { export const isIOS = (userAgent) => {
const navigatorAgent = getNavigatorAgent(userAgent); const navigatorAgent = getNavigatorAgent(userAgent);
return /iPhone|iPad|iPod/i.test(navigatorAgent); return /iPhone|iPad|iPod/i.test(navigatorAgent);
}; };
export const isMobileBrowser = userAgent => { export const isMobileBrowser = (userAgent) => {
const navigatorAgent = getNavigatorAgent(userAgent); const navigatorAgent = getNavigatorAgent(userAgent);
return ( return (

57
components/core/ApplicationHeader.js
View File

@ -1,11 +1,11 @@
import * as React from 'react'; import * as React from "react";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as System from '~/components/system'; import * as System from "~/components/system";
import * as SVG from '~/common/svg'; import * as SVG from "~/common/svg";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import Avatar from '~/components/core/Avatar'; import Avatar from "~/components/core/Avatar";
const STYLES_CIRCLE = css` const STYLES_CIRCLE = css`
height: 32px; height: 32px;
@ -113,38 +113,57 @@ const STYLES_INPUT = css`
transition: 200ms ease all; transition: 200ms ease all;
:focus { :focus {
box-shadow: 0 1px 4px rgba(0, 71, 255, 0.3), inset 0 0 0 1px ${Constants.system.brand}; box-shadow: 0 1px 4px rgba(0, 71, 255, 0.3),
inset 0 0 0 1px ${Constants.system.brand};
outline: 0; outline: 0;
} }
`; `;
export default class ApplicationHeader extends React.Component { export default class ApplicationHeader extends React.Component {
render() { render() {
const isBackDisabled = this.props.currentIndex === 0 || this.props.history.length < 2; const isBackDisabled =
this.props.currentIndex === 0 || this.props.history.length < 2;
const isForwardDisabled = const isForwardDisabled =
this.props.currentIndex === this.props.history.length - 1 || this.props.history.length < 2; this.props.currentIndex === this.props.history.length - 1 ||
this.props.history.length < 2;
return ( return (
<header css={STYLES_APPLICATION_HEADER}> <header css={STYLES_APPLICATION_HEADER}>
<div css={STYLES_LEFT}> <div css={STYLES_LEFT}>
<span css={STYLES_ICON_ELEMENT_CUSTOM} style={{ marginRight: 16, marginLeft: 12 }}> <span
css={STYLES_ICON_ELEMENT_CUSTOM}
style={{ marginRight: 16, marginLeft: 12 }}
>
<SVG.Logo height="32px" /> <SVG.Logo height="32px" />
</span> </span>
<span <span
css={STYLES_ICON_ELEMENT} css={STYLES_ICON_ELEMENT}
style={isBackDisabled ? { cursor: 'not-allowed', color: Constants.system.border } : null} style={
onClick={isBackDisabled ? () => {} : this.props.onBack}> isBackDisabled
<SVG.NavigationArrow height="16px" style={{ transform: `rotate(180deg)` }} /> ? { cursor: "not-allowed", color: Constants.system.border }
: null
}
onClick={isBackDisabled ? () => {} : this.props.onBack}
>
<SVG.NavigationArrow
height="16px"
style={{ transform: `rotate(180deg)` }}
/>
</span> </span>
<span <span
css={STYLES_ICON_ELEMENT} css={STYLES_ICON_ELEMENT}
style={isForwardDisabled ? { cursor: 'not-allowed', color: Constants.system.border } : null} style={
onClick={isForwardDisabled ? () => {} : this.props.onForward}> isForwardDisabled
? { cursor: "not-allowed", color: Constants.system.border }
: null
}
onClick={isForwardDisabled ? () => {} : this.props.onForward}
>
<SVG.NavigationArrow height="16px" /> <SVG.NavigationArrow height="16px" />
</span> </span>
</div> </div>
<div css={STYLES_MIDDLE}></div> <div css={STYLES_MIDDLE} />
<div css={STYLES_RIGHT}> <div css={STYLES_RIGHT}>
<Avatar <Avatar
style={{ marginLeft: 12 }} style={{ marginLeft: 12 }}
@ -153,12 +172,12 @@ export default class ApplicationHeader extends React.Component {
url={this.props.viewer.photoURL} url={this.props.viewer.photoURL}
popover={ popover={
<System.PopoverNavigation <System.PopoverNavigation
style={{ right: 0, top: '48px', cursor: 'pointer' }} style={{ right: 0, top: "48px", cursor: "pointer" }}
onNavigateTo={this.props.onNavigateTo} onNavigateTo={this.props.onNavigateTo}
onAction={this.props.onAction} onAction={this.props.onAction}
navigation={[ navigation={[
{ text: 'Edit account', value: 13 }, { text: "Edit account", value: 13 },
{ text: 'Settings', value: 14 }, { text: "Settings", value: 14 },
]} ]}
/> />
} }

13
components/core/Avatar.js
View File

@ -1,9 +1,9 @@
import * as React from 'react'; import * as React from "react";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import Dismissible from '~/components/core/Dismissible'; import Dismissible from "~/components/core/Dismissible";
const STYLES_AVATAR = css` const STYLES_AVATAR = css`
display: inline-flex; display: inline-flex;
@ -57,8 +57,9 @@ export default class AvatarEntity extends React.Component {
height: `${this.props.size}px`, height: `${this.props.size}px`,
borderRadius: `${this.props.size}px`, borderRadius: `${this.props.size}px`,
backgroundImage: `url('${this.props.url}')`, backgroundImage: `url('${this.props.url}')`,
cursor: this.props.onClick ? 'pointer' : this.props.style, cursor: this.props.onClick ? "pointer" : this.props.style,
}}> }}
>
{this.state.visible ? this.props.popover : null} {this.state.visible ? this.props.popover : null}
{this.props.online ? <span css={STYLES_AVATAR_ONLINE} /> : null} {this.props.online ? <span css={STYLES_AVATAR_ONLINE} /> : null}
</Dismissible> </Dismissible>

45
components/sidebars/SidebarCreateWalletAddress.js
View File

@ -1,32 +1,32 @@
import * as React from 'react'; import * as React from "react";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as SVG from '~/components/system/svg'; import * as SVG from "~/components/system/svg";
import * as System from '~/components/system'; import * as System from "~/components/system";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
const SELECT_MENU_OPTIONS = [ const SELECT_MENU_OPTIONS = [
{ value: '1', name: 'BLS' }, { value: "1", name: "BLS" },
{ value: '2', name: 'SECP256K1' }, { value: "2", name: "SECP256K1" },
// { value: '3', name: 'MULTISIG' }, // { value: '3', name: 'MULTISIG' },
]; ];
const SELECT_MENU_MAP = { const SELECT_MENU_MAP = {
'1': 'BLS', "1": "BLS",
'2': 'SECP256K1', "2": "SECP256K1",
// '3': 'MULTISIG', // '3': 'MULTISIG',
}; };
const SELECT_MENU_SAVE_STRINGS = { const SELECT_MENU_SAVE_STRINGS = {
'1': 'bls', "1": "bls",
'2': 'secp256k1', "2": "secp256k1",
}; };
export default class SidebarCreateWalletAddress extends React.Component { export default class SidebarCreateWalletAddress extends React.Component {
state = { state = {
name: '', name: "",
type: '1', type: "1",
default: false, default: false,
}; };
@ -35,7 +35,7 @@ export default class SidebarCreateWalletAddress extends React.Component {
name: this.state.name, name: this.state.name,
wallet_type: SELECT_MENU_SAVE_STRINGS[this.state.type], wallet_type: SELECT_MENU_SAVE_STRINGS[this.state.type],
makeDefault: this.state.default, makeDefault: this.state.default,
type: 'CREATE_WALLET_ADDRESS', type: "CREATE_WALLET_ADDRESS",
}; };
this.props.onSubmit(data); this.props.onSubmit(data);
@ -52,7 +52,9 @@ export default class SidebarCreateWalletAddress extends React.Component {
render() { render() {
return ( return (
<div> <div>
<System.P style={{ fontFamily: 'inter-semi-bold' }}>Create a new address</System.P> <System.P style={{ fontFamily: "inter-semi-bold" }}>
Create a new address
</System.P>
<System.Input <System.Input
containerStyle={{ marginTop: 24 }} containerStyle={{ marginTop: 24 }}
@ -69,7 +71,8 @@ export default class SidebarCreateWalletAddress extends React.Component {
value={this.state.type} value={this.state.type}
category="type" category="type"
onChange={this._handleChange} onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}> options={SELECT_MENU_OPTIONS}
>
{SELECT_MENU_MAP[this.state.type]} {SELECT_MENU_MAP[this.state.type]}
</System.SelectMenuFull> </System.SelectMenuFull>
@ -77,11 +80,15 @@ export default class SidebarCreateWalletAddress extends React.Component {
style={{ marginTop: 24 }} style={{ marginTop: 24 }}
name="default" name="default"
value={this.state.default} value={this.state.default}
onChange={this._handleChange}> onChange={this._handleChange}
>
Make this wallet the default Make this wallet the default
</System.CheckBox> </System.CheckBox>
<System.ButtonPrimaryFull style={{ marginTop: 48 }} onClick={this._handleSubmit}> <System.ButtonPrimaryFull
style={{ marginTop: 48 }}
onClick={this._handleSubmit}
>
Create {this.state.name} Create {this.state.name}
</System.ButtonPrimaryFull> </System.ButtonPrimaryFull>
</div> </div>

232
components/system/index.js
View File

@ -1,11 +1,11 @@
import * as React from 'react'; import * as React from "react";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as SVG from '~/components/system/svg'; import * as SVG from "~/components/system/svg";
import * as OldSVG from '~/common/svg'; import * as OldSVG from "~/common/svg";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import * as SubSystem from '~/components/system/sub-system'; import * as SubSystem from "~/components/system/sub-system";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
// //
// //
@ -30,7 +30,7 @@ import { css } from '@emotion/react';
// UTILITY COMPONENTS // UTILITY COMPONENTS
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
import TextareaAutoSize from '~/vendor/react-textarea-autosize'; import TextareaAutoSize from "~/vendor/react-textarea-autosize";
// //
// //
@ -55,9 +55,9 @@ import TextareaAutoSize from '~/vendor/react-textarea-autosize';
// VENDOR // VENDOR
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
import { Tooltip } from 'react-tippy'; import { Tooltip } from "react-tippy";
import { LineChart } from '~/vendor/react-chartkick'; import { LineChart } from "~/vendor/react-chartkick";
import 'chart.js'; import "chart.js";
// //
// //
@ -83,7 +83,7 @@ import 'chart.js';
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
const STYLES_CODE_TEXTAREA = css` const STYLES_CODE_TEXTAREA = css`
font-family: 'mono'; font-family: "mono";
display: block; display: block;
max-width: 480px; max-width: 480px;
border-radius: 4px; border-radius: 4px;
@ -160,7 +160,9 @@ export class TooltipAnchor extends React.Component {
{this.props.children ? ( {this.props.children ? (
this.props.children this.props.children
) : ( ) : (
<SVG.Information height={this.props.height ? this.props.height : '24px'} /> <SVG.Information
height={this.props.height ? this.props.height : "24px"}
/>
)} )}
</span> </span>
</Tooltip> </Tooltip>
@ -196,7 +198,8 @@ const STYLES_POPOVER = css`
width: 288px; width: 288px;
border-radius: 4px; border-radius: 4px;
background-color: ${Constants.system.white}; background-color: ${Constants.system.white};
box-shadow: inset 0 0 0 1px ${Constants.system.border}, 0 1px 4px rgba(0, 0, 0, 0.07); box-shadow: inset 0 0 0 1px ${Constants.system.border},
0 1px 4px rgba(0, 0, 0, 0.07);
`; `;
const STYLES_POPOVER_ITEM = css` const STYLES_POPOVER_ITEM = css`
@ -220,7 +223,7 @@ const STYLES_POPOVER_ITEM = css`
export class PopoverNavigation extends React.Component { export class PopoverNavigation extends React.Component {
static defaultProps = { static defaultProps = {
onNavigateTo: () => { onNavigateTo: () => {
console.error('requires onNavigateTo'); console.error("requires onNavigateTo");
}, },
}; };
@ -229,7 +232,11 @@ export class PopoverNavigation extends React.Component {
<div css={STYLES_POPOVER} style={this.props.style}> <div css={STYLES_POPOVER} style={this.props.style}>
{this.props.navigation.map((each) => { {this.props.navigation.map((each) => {
return ( return (
<div key={each.value} css={STYLES_POPOVER_ITEM} onClick={() => this.props.onNavigateTo({ id: each.value })}> <div
key={each.value}
css={STYLES_POPOVER_ITEM}
onClick={() => this.props.onNavigateTo({ id: each.value })}
>
{each.text} {each.text}
</div> </div>
); );
@ -291,7 +298,7 @@ const STYLES_STAT_CARD_VALUE_GROUP = css`
`; `;
const STYLES_STAT_CARD_VALUE = css` const STYLES_STAT_CARD_VALUE = css`
font-family: 'inter-medium'; font-family: "inter-medium";
font-size: ${Constants.typescale.lvl3}; font-size: ${Constants.typescale.lvl3};
color: ${Constants.system.brand}; color: ${Constants.system.brand};
display: block; display: block;
@ -299,7 +306,7 @@ const STYLES_STAT_CARD_VALUE = css`
const STYLES_STAT_CARD_DENOMINATION = css` const STYLES_STAT_CARD_DENOMINATION = css`
display: block; display: block;
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-size: 10px; font-size: 10px;
letter-spacing: 0.1px; letter-spacing: 0.1px;
margin: 4px 0 16px 0; margin: 4px 0 16px 0;
@ -312,12 +319,14 @@ export const StatCard = (props) => {
<div css={STYLES_STAT_CARD}> <div css={STYLES_STAT_CARD}>
<div css={STYLES_STAT_CARD_TOP}> <div css={STYLES_STAT_CARD_TOP}>
<div css={STYLES_STAT_CARD_VALUE_GROUP}> <div css={STYLES_STAT_CARD_VALUE_GROUP}>
<span css={STYLES_STAT_CARD_VALUE}>{Strings.formatNumber(props.value)}</span>{' '} <span css={STYLES_STAT_CARD_VALUE}>
{Strings.formatNumber(props.value)}
</span>{" "}
<span css={STYLES_STAT_CARD_DENOMINATION}>{props.denomination}</span> <span css={STYLES_STAT_CARD_DENOMINATION}>{props.denomination}</span>
<LineChart <LineChart
data={props.data} data={props.data}
library={{ library={{
backgroundColor: 'transparent', backgroundColor: "transparent",
scales: { scales: {
yAxes: [ yAxes: [
{ {
@ -363,14 +372,14 @@ export const StatCard = (props) => {
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
const TABLE_COLUMN_WIDTH_DEFAULTS = { const TABLE_COLUMN_WIDTH_DEFAULTS = {
1: '100%', 1: "100%",
2: '50%', 2: "50%",
3: '33.333%', 3: "33.333%",
4: '25%', 4: "25%",
5: '20%', 5: "20%",
6: '16.666%', 6: "16.666%",
7: '14.28%', 7: "14.28%",
8: '12.5%', 8: "12.5%",
}; };
const STYLES_TABLE_PLACEHOLDER = css` const STYLES_TABLE_PLACEHOLDER = css`
@ -417,7 +426,7 @@ const STYLES_TABLE_SELECTED_ROW = css`
`; `;
const STYLES_TABLE_TOP_ROW = css` const STYLES_TABLE_TOP_ROW = css`
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
width: 100%; width: 100%;
padding: 0 8px 0 8px; padding: 0 8px 0 8px;
border-bottom: 1px solid ${Constants.system.gray}; border-bottom: 1px solid ${Constants.system.gray};
@ -427,8 +436,8 @@ const STYLES_TABLE_TOP_ROW = css`
export class Table extends React.Component { export class Table extends React.Component {
static defaultProps = { static defaultProps = {
onNavigateTo: () => console.log('No navigation function set'), onNavigateTo: () => console.log("No navigation function set"),
onAction: () => console.log('No action function set'), onAction: () => console.log("No action function set"),
}; };
_handleChange = (value) => { _handleChange = (value) => {
@ -453,7 +462,7 @@ export class Table extends React.Component {
ac[data.columns[x].key] = { ac[data.columns[x].key] = {
...data.columns[x], ...data.columns[x],
index: x, index: x,
color: x % 2 !== 0 ? 'rgba(0, 0, 0, 0.01)' : null, color: x % 2 !== 0 ? "rgba(0, 0, 0, 0.01)" : null,
}; };
} }
@ -463,11 +472,15 @@ export class Table extends React.Component {
<React.Fragment> <React.Fragment>
<div css={STYLES_TABLE_TOP_ROW}> <div css={STYLES_TABLE_TOP_ROW}>
{data.columns.map((c, cIndex) => { {data.columns.map((c, cIndex) => {
const text = c.hideLabel ? '' : Strings.isEmpty(c.name) ? c.key : c.name; const text = c.hideLabel
? ""
: Strings.isEmpty(c.name)
? c.key
: c.name;
let localWidth = c.width ? c.width : width; let localWidth = c.width ? c.width : width;
let flexShrink = c.width && c.width !== '100%' ? '0' : null; let flexShrink = c.width && c.width !== "100%" ? "0" : null;
if (cIndex === 0 && !c.width) { if (cIndex === 0 && !c.width) {
localWidth = '100%'; localWidth = "100%";
} }
return ( return (
@ -479,7 +492,8 @@ export class Table extends React.Component {
backgroundColor: ac[c.key].color, backgroundColor: ac[c.key].color,
flexShrink, flexShrink,
}} }}
tooltip={c.tooltip}> tooltip={c.tooltip}
>
{text} {text}
</SubSystem.TableColumn> </SubSystem.TableColumn>
); );
@ -497,9 +511,10 @@ export class Table extends React.Component {
const text = r[each]; const text = r[each];
let localWidth = field.width ? field.width : width; let localWidth = field.width ? field.width : width;
let flexShrink = field.width && field.width !== '100%' ? '0' : null; let flexShrink =
field.width && field.width !== "100%" ? "0" : null;
if (cIndex === 0 && !field.width) { if (cIndex === 0 && !field.width) {
localWidth = '100%'; localWidth = "100%";
} }
return ( return (
@ -510,7 +525,8 @@ export class Table extends React.Component {
backgroundColor: field.color, backgroundColor: field.color,
flexShrink, flexShrink,
}} }}
copyable={field.copyable}> copyable={field.copyable}
>
<SubSystem.TableContent <SubSystem.TableContent
data={r} data={r}
text={text} text={text}
@ -610,7 +626,7 @@ const STYLES_BUTTON_PRIMARY = css`
`; `;
export const ButtonPrimary = (props) => { export const ButtonPrimary = (props) => {
if (props.type === 'label') { if (props.type === "label") {
return <label css={STYLES_BUTTON_PRIMARY} {...props} />; return <label css={STYLES_BUTTON_PRIMARY} {...props} />;
} }
@ -637,7 +653,7 @@ const STYLES_BUTTON_PRIMARY_FULL = css`
`; `;
export const ButtonPrimaryFull = (props) => { export const ButtonPrimaryFull = (props) => {
if (props.type === 'label') { if (props.type === "label") {
return <label css={STYLES_BUTTON_PRIMARY_FULL} {...props} />; return <label css={STYLES_BUTTON_PRIMARY_FULL} {...props} />;
} }
@ -664,7 +680,7 @@ const STYLES_BUTTON_SECONDARY = css`
`; `;
export const ButtonSecondary = (props) => { export const ButtonSecondary = (props) => {
if (props.type === 'label') { if (props.type === "label") {
return <label css={STYLES_BUTTON_SECONDARY} {...props} />; return <label css={STYLES_BUTTON_SECONDARY} {...props} />;
} }
@ -691,7 +707,7 @@ const STYLES_BUTTON_SECONDARY_FULL = css`
`; `;
export const ButtonSecondaryFull = (props) => { export const ButtonSecondaryFull = (props) => {
if (props.type === 'label') { if (props.type === "label") {
return <label css={STYLES_BUTTON_SECONDARY_FULL} {...props} />; return <label css={STYLES_BUTTON_SECONDARY_FULL} {...props} />;
} }
@ -790,8 +806,12 @@ export class Toggle extends React.Component {
onClick={this._handleChange} onClick={this._handleChange}
style={{ style={{
backgroundColor: this.props.active ? Constants.system.brand : null, backgroundColor: this.props.active ? Constants.system.brand : null,
}}> }}
<figure css={STYLES_DIAL} style={{ transform: this.props.active ? `translateX(40px)` : null }} /> >
<figure
css={STYLES_DIAL}
style={{ transform: this.props.active ? `translateX(40px)` : null }}
/>
</div> </div>
); );
} }
@ -881,7 +901,7 @@ const STYLES_RADIO_LABEL = css`
overflow-wrap: break-word; overflow-wrap: break-word;
strong { strong {
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-weight: 400; font-weight: 400;
} }
`; `;
@ -902,7 +922,10 @@ export class RadioGroup extends React.Component {
return ( return (
<label css={STYLES_RADIO} key={`radio-${radio.value}`}> <label css={STYLES_RADIO} key={`radio-${radio.value}`}>
<span css={STYLES_RADIO_CUSTOM}> <span css={STYLES_RADIO_CUSTOM}>
<span css={STYLES_RADIO_CUSTOM_SELECTED} style={{ opacity: checked ? 1 : 0 }} /> <span
css={STYLES_RADIO_CUSTOM_SELECTED}
style={{ opacity: checked ? 1 : 0 }}
/>
</span> </span>
<input <input
css={STYLES_RADIO_INPUT} css={STYLES_RADIO_INPUT}
@ -910,7 +933,7 @@ export class RadioGroup extends React.Component {
value={radio.value} value={radio.value}
checked={checked} checked={checked}
onChange={() => this._handleChange(radio.value)} onChange={() => this._handleChange(radio.value)}
/>{' '} />{" "}
<span css={STYLES_RADIO_LABEL}>{radio.label}</span> <span css={STYLES_RADIO_LABEL}>{radio.label}</span>
</label> </label>
); );
@ -983,7 +1006,7 @@ const STYLES_CHECKBOX_LABEL = css`
overflow-wrap: break-word; overflow-wrap: break-word;
strong { strong {
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-weight: 400; font-weight: 400;
} }
`; `;
@ -998,7 +1021,9 @@ export class CheckBox extends React.Component {
render() { render() {
return ( return (
<label css={STYLES_CHECKBOX} style={this.props.style}> <label css={STYLES_CHECKBOX} style={this.props.style}>
<figure css={STYLES_CHECKBOX_FIGURE}>{this.props.value ? <SVG.CheckBox height="20px" /> : null}</figure> <figure css={STYLES_CHECKBOX_FIGURE}>
{this.props.value ? <SVG.CheckBox height="20px" /> : null}
</figure>
<input <input
css={STYLES_CHECKBOX_INPUT} css={STYLES_CHECKBOX_INPUT}
name={this.props.name} name={this.props.name}
@ -1039,14 +1064,15 @@ const STYLES_CARD_TAB_GROUP = css`
width: 100%; width: 100%;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
box-shadow: 0 -1px 0 0 ${Constants.system.border}, 0 1px 0 0 ${Constants.system.border}; box-shadow: 0 -1px 0 0 ${Constants.system.border},
0 1px 0 0 ${Constants.system.border};
`; `;
const STYLES_CARD_TAB_GROUP_TAB = css` const STYLES_CARD_TAB_GROUP_TAB = css`
background: #fdfdfd; background: #fdfdfd;
color: rgba(0, 0, 0, 0.4); color: rgba(0, 0, 0, 0.4);
font-size: 14px; font-size: 14px;
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
height: 48px; height: 48px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -1084,11 +1110,14 @@ export class CardTabGroup extends React.Component {
style={{ style={{
color: selected ? Constants.system.brand : null, color: selected ? Constants.system.brand : null,
backgroundColor: selected ? Constants.system.white : null, backgroundColor: selected ? Constants.system.white : null,
borderBottom: selected ? `2px solid ${Constants.system.brand}` : null, borderBottom: selected
? `2px solid ${Constants.system.brand}`
: null,
width: TAB_GROUP_SIZE_MAP[this.props.options.length], width: TAB_GROUP_SIZE_MAP[this.props.options.length],
cursor: !selected ? 'pointer' : null, cursor: !selected ? "pointer" : null,
}} }}
onClick={() => this._handleChange(tab.value)}> onClick={() => this._handleChange(tab.value)}
>
{tab.label} {tab.label}
</div> </div>
); );
@ -1136,7 +1165,7 @@ const STYLES_TAB_GROUP_TAB = css`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 14px; font-size: 14px;
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
transition: 200ms ease all; transition: 200ms ease all;
user-select: none; user-select: none;
@ -1146,10 +1175,10 @@ const STYLES_TAB_GROUP_TAB = css`
`; `;
const TAB_GROUP_SIZE_MAP = { const TAB_GROUP_SIZE_MAP = {
1: '100%', 1: "100%",
2: '50%', 2: "50%",
3: '33.33%', 3: "33.33%",
4: '25%', 4: "25%",
}; };
export class TabGroup extends React.Component { export class TabGroup extends React.Component {
@ -1172,10 +1201,11 @@ export class TabGroup extends React.Component {
style={{ style={{
backgroundColor: selected ? Constants.system.white : null, backgroundColor: selected ? Constants.system.white : null,
width: TAB_GROUP_SIZE_MAP[this.props.options.length], width: TAB_GROUP_SIZE_MAP[this.props.options.length],
cursor: !selected ? 'pointer' : null, cursor: !selected ? "pointer" : null,
borderBottom: !selected ? `1px solid #D7D7D7` : null, borderBottom: !selected ? `1px solid #D7D7D7` : null,
}} }}
onClick={() => this._handleChange(tab.value)}> onClick={() => this._handleChange(tab.value)}
>
{tab.label} {tab.label}
</div> </div>
); );
@ -1209,7 +1239,7 @@ export class TabGroup extends React.Component {
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
const STYLES_DESCRIPTION_GROUP_LABEL = css` const STYLES_DESCRIPTION_GROUP_LABEL = css`
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-size: 14px; font-size: 14px;
padding: 0 0 0 0; padding: 0 0 0 0;
margin-bottom: 8px; margin-bottom: 8px;
@ -1226,12 +1256,20 @@ export const DescriptionGroup = (props) => {
<div style={props.style}> <div style={props.style}>
{!Strings.isEmpty(props.label) ? ( {!Strings.isEmpty(props.label) ? (
<div css={STYLES_DESCRIPTION_GROUP_LABEL}> <div css={STYLES_DESCRIPTION_GROUP_LABEL}>
{props.label}{' '} {props.label}{" "}
{props.tooltip ? <TooltipAnchor tooltip={props.tooltip} height="14px" style={{ paddingTop: 16 }} /> : null} {props.tooltip ? (
<TooltipAnchor
tooltip={props.tooltip}
height="14px"
style={{ paddingTop: 16 }}
/>
) : null}
</div> </div>
) : null} ) : null}
{!Strings.isEmpty(props.description) ? ( {!Strings.isEmpty(props.description) ? (
<div css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}>{props.description}</div> <div css={STYLES_DESCRIPTION_GROUP_DESCRIPTION}>
{props.description}
</div>
) : null} ) : null}
</div> </div>
); );
@ -1286,12 +1324,14 @@ const INPUT_STYLES = css`
const STYLES_INPUT = css` const STYLES_INPUT = css`
${INPUT_STYLES} ${INPUT_STYLES}
padding: 0 24px 0 24px; padding: 0 24px 0 24px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 0 0 1px ${Constants.system.darkGray}; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
inset 0 0 0 1px ${Constants.system.darkGray};
:focus { :focus {
outline: 0; outline: 0;
border: 0; border: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${Constants.system.brand}; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07),
inset 0 0 0 2px ${Constants.system.brand};
} }
::placeholder { ::placeholder {
@ -1335,7 +1375,7 @@ export class Input extends React.Component {
_handleCopy = (e) => { _handleCopy = (e) => {
this._input.select(); this._input.select();
document.execCommand('copy'); document.execCommand("copy");
}; };
_handleKeyUp = (e) => { _handleKeyUp = (e) => {
@ -1348,7 +1388,10 @@ export class Input extends React.Component {
}; };
_handleChange = (e) => { _handleChange = (e) => {
if (!Strings.isEmpty(this.props.pattern) && !Strings.isEmpty(e.target.value)) { if (
!Strings.isEmpty(this.props.pattern) &&
!Strings.isEmpty(e.target.value)
) {
const TestRegex = new RegExp(this.props.pattern); const TestRegex = new RegExp(this.props.pattern);
if (!TestRegex.test(e.target.value)) { if (!TestRegex.test(e.target.value)) {
e.preventDefault(); e.preventDefault();
@ -1369,7 +1412,11 @@ export class Input extends React.Component {
render() { render() {
return ( return (
<div css={STYLES_INPUT_CONTAINER} style={this.props.containerStyle}> <div css={STYLES_INPUT_CONTAINER} style={this.props.containerStyle}>
<DescriptionGroup tooltip={this.props.tooltip} label={this.props.label} description={this.props.description} /> <DescriptionGroup
tooltip={this.props.tooltip}
label={this.props.label}
description={this.props.description}
/>
<input <input
ref={(c) => { ref={(c) => {
this._input = c; this._input = c;
@ -1386,12 +1433,18 @@ export class Input extends React.Component {
style={{ style={{
...this.props.style, ...this.props.style,
boxShadow: this.props.validation boxShadow: this.props.validation
? `0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${INPUT_COLOR_MAP[this.props.validation]}` ? `0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${
INPUT_COLOR_MAP[this.props.validation]
}`
: null, : null,
}} }}
/> />
{this.props.copyable ? ( {this.props.copyable ? (
<SVG.CopyAndPaste height="16px" css={STYLES_COPY_AND_PASTE} onClick={this._handleCopy} /> <SVG.CopyAndPaste
height="16px"
css={STYLES_COPY_AND_PASTE}
onClick={this._handleCopy}
/>
) : null} ) : null}
</div> </div>
); );
@ -1439,7 +1492,8 @@ const STYLES_TEXTAREA = css`
box-sizing: border-box; box-sizing: border-box;
transition: 200ms ease all; transition: 200ms ease all;
padding: 16px 24px 16px 24px; padding: 16px 24px 16px 24px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 0 0 1px ${Constants.system.darkGray}; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
inset 0 0 0 1px ${Constants.system.darkGray};
`; `;
export class Textarea extends React.Component { export class Textarea extends React.Component {
@ -1535,7 +1589,10 @@ export const SelectMenu = (props) => {
<div css={props.className ? props.className : STYLES_SELECT_MENU}> <div css={props.className ? props.className : STYLES_SELECT_MENU}>
<label css={STYLES_SELECT_MENU_LABEL} htmlFor={`id-${props.name}`}> <label css={STYLES_SELECT_MENU_LABEL} htmlFor={`id-${props.name}`}>
{props.children} {props.category ? <span css={STYLES_SELECT_MENU_CATEGORY}>{props.category}</span> : null} {props.children}{" "}
{props.category ? (
<span css={STYLES_SELECT_MENU_CATEGORY}>{props.category}</span>
) : null}
<SVG.ChevronDown height="16px" css={STYLES_SELECT_MENU_CHEVRON} /> <SVG.ChevronDown height="16px" css={STYLES_SELECT_MENU_CHEVRON} />
</label> </label>
<select <select
@ -1543,7 +1600,8 @@ export const SelectMenu = (props) => {
value={props.value} value={props.value}
onChange={props.onChange} onChange={props.onChange}
name={props.name} name={props.name}
id={`id-${props.name}`}> id={`id-${props.name}`}
>
{props.options.map((each) => { {props.options.map((each) => {
return ( return (
<option value={each.value} key={each.value}> <option value={each.value} key={each.value}>
@ -1557,7 +1615,9 @@ export const SelectMenu = (props) => {
); );
}; };
export const SelectMenuFull = (props) => <SelectMenu {...props} css={STYLES_SELECT_MENU_FULL} />; export const SelectMenuFull = (props) => (
<SelectMenu {...props} css={STYLES_SELECT_MENU_FULL} />
);
// //
// //
@ -1585,11 +1645,11 @@ export const SelectMenuFull = (props) => <SelectMenu {...props} css={STYLES_SELE
const STYLES_H1 = css` const STYLES_H1 = css`
font-size: ${Constants.typescale.lvl4}; font-size: ${Constants.typescale.lvl4};
line-height: 1.1; line-height: 1.1;
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-weight: 400; font-weight: 400;
strong { strong {
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-weight: 400; font-weight: 400;
} }
`; `;
@ -1601,11 +1661,11 @@ export const H1 = (props) => {
const STYLES_H2 = css` const STYLES_H2 = css`
font-size: ${Constants.typescale.lvl3}; font-size: ${Constants.typescale.lvl3};
line-height: 1.1; line-height: 1.1;
font-family: 'inter-medium'; font-family: "inter-medium";
font-weight: 400; font-weight: 400;
strong { strong {
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-weight: 400; font-weight: 400;
} }
`; `;
@ -1619,7 +1679,7 @@ const STYLES_P = css`
line-height: 1.5; line-height: 1.5;
strong { strong {
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-weight: 400; font-weight: 400;
} }
`; `;
@ -1654,7 +1714,7 @@ export const P = (props) => {
const STYLES_BANDWIDTH = css` const STYLES_BANDWIDTH = css`
padding: 8px 8px 8px 8px; padding: 8px 8px 8px 8px;
display: inline-flex; display: inline-flex;
font-family: 'mono'; font-family: "mono";
font-size: 12px; font-size: 12px;
letter-spacing: 0.2px; letter-spacing: 0.2px;
align-items: center; align-items: center;
@ -1664,7 +1724,8 @@ const STYLES_BANDWIDTH = css`
export const StatUpload = (props) => { export const StatUpload = (props) => {
return ( return (
<div css={STYLES_BANDWIDTH} style={props.style}> <div css={STYLES_BANDWIDTH} style={props.style}>
<SVG.BandwidthUp height="16px" style={{ marginRight: 8 }} /> {props.children} <SVG.BandwidthUp height="16px" style={{ marginRight: 8 }} />{" "}
{props.children}
</div> </div>
); );
}; };
@ -1672,7 +1733,8 @@ export const StatUpload = (props) => {
export const StatDownload = (props) => { export const StatDownload = (props) => {
return ( return (
<div css={STYLES_BANDWIDTH} style={props.style}> <div css={STYLES_BANDWIDTH} style={props.style}>
<SVG.BandwidthDown height="16px" style={{ marginRight: 8 }} /> {props.children} <SVG.BandwidthDown height="16px" style={{ marginRight: 8 }} />{" "}
{props.children}
</div> </div>
); );
}; };

177
components/system/sub-system.js
View File

@ -1,32 +1,32 @@
import * as React from 'react'; import * as React from "react";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as SVG from '~/components/system/svg'; import * as SVG from "~/components/system/svg";
import * as OldSVG from '~/common/svg'; import * as OldSVG from "~/common/svg";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import { Tooltip } from 'react-tippy'; import { Tooltip } from "react-tippy";
import Avatar from '~/components/core/Avatar'; import Avatar from "~/components/core/Avatar";
const STORAGE_DEAL_STATES = { const STORAGE_DEAL_STATES = {
'0': 'Local file only.', "0": "Local file only.",
'1': 'Searching for miners.', "1": "Searching for miners.",
'2': 'Proposing storage deal.', "2": "Proposing storage deal.",
'3': 'Accepted by miners.', "3": "Accepted by miners.",
'4': 'Data transfer in progress.', "4": "Data transfer in progress.",
'5': 'Data transfer complete.', "5": "Data transfer complete.",
'6': 'Stored on network.', "6": "Stored on network.",
}; };
const RETRIEVAL_DEAL_STATES = { const RETRIEVAL_DEAL_STATES = {
'0': 'Local file', "0": "Local file",
'1': 'Available on network', "1": "Available on network",
'2': 'Retrieval deal proposed.', "2": "Retrieval deal proposed.",
'3': 'Retrieval deal accepted.', "3": "Retrieval deal accepted.",
'4': 'Data transfer in progress.', "4": "Data transfer in progress.",
'5': 'Data transfer completed.', "5": "Data transfer completed.",
'6': 'Retrieved from network.', "6": "Retrieved from network.",
}; };
const COMPONENTS_ICON = { const COMPONENTS_ICON = {
@ -36,7 +36,7 @@ const COMPONENTS_ICON = {
const STYLES_TABLE_TAG = css` const STYLES_TABLE_TAG = css`
font-weight: 400; font-weight: 400;
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
letter-spacing: 0.2px; letter-spacing: 0.2px;
padding: 4px 6px 4px 6px; padding: 4px 6px 4px 6px;
font-size: 10px; font-size: 10px;
@ -48,18 +48,21 @@ const STYLES_TABLE_TAG = css`
`; `;
const COMPONENTS_TRANSACTION_DIRECTION = { const COMPONENTS_TRANSACTION_DIRECTION = {
'1': ( "1": (
<span css={STYLES_TABLE_TAG} style={{ background: Constants.system.green }}> <span css={STYLES_TABLE_TAG} style={{ background: Constants.system.green }}>
+ incoming + incoming
</span> </span>
), ),
'2': <span css={STYLES_TABLE_TAG}>- outgoing</span>, "2": <span css={STYLES_TABLE_TAG}>- outgoing</span>,
}; };
const COMPONENTS_TRANSACTION_STATUS = { const COMPONENTS_TRANSACTION_STATUS = {
'1': <span css={STYLES_TABLE_TAG}>complete</span>, "1": <span css={STYLES_TABLE_TAG}>complete</span>,
'2': ( "2": (
<span css={STYLES_TABLE_TAG} style={{ background: Constants.system.yellow }}> <span
css={STYLES_TABLE_TAG}
style={{ background: Constants.system.yellow }}
>
pending pending
</span> </span>
), ),
@ -114,7 +117,7 @@ const STYLES_CONTENT_BUTTON = css`
`; `;
const STYLES_TABLE_CONTENT_LINK = css` const STYLES_TABLE_CONTENT_LINK = css`
font-family: 'inter-medium'; font-family: "inter-medium";
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
@ -139,7 +142,10 @@ export const TableColumn = (props) => {
) : null; ) : null;
return ( return (
<span css={props.top ? STYLES_TOP_COLUMN : STYLES_COLUMN} style={props.style}> <span
css={props.top ? STYLES_TOP_COLUMN : STYLES_COLUMN}
style={props.style}
>
<span css={STYLES_CONTENT}>{props.children}</span> <span css={STYLES_CONTENT}>{props.children}</span>
{tooltipElement} {tooltipElement}
{copyableElement} {copyableElement}
@ -147,7 +153,14 @@ export const TableColumn = (props) => {
); );
}; };
export const TableContent = ({ type, text, action, data = {}, onNavigateTo, onAction }) => { export const TableContent = ({
type,
text,
action,
data = {},
onNavigateTo,
onAction,
}) => {
const { status, online } = data; const { status, online } = data;
if (text === null || text === undefined) { if (text === null || text === undefined) {
@ -155,67 +168,83 @@ export const TableContent = ({ type, text, action, data = {}, onNavigateTo, onAc
} }
switch (type) { switch (type) {
case 'DEAL_CATEGORY': case "DEAL_CATEGORY":
return <React.Fragment>{text == 1 ? 'Storage' : 'Retrieval'}</React.Fragment>;
case 'LOCATION':
return 'United States';
case 'BUTTON':
return ( return (
<span css={STYLES_TABLE_CONTENT_LINK} onClick={() => onAction({ type: 'SIDEBAR', value: action })}> <React.Fragment>{text == 1 ? "Storage" : "Retrieval"}</React.Fragment>
);
case "LOCATION":
return "United States";
case "BUTTON":
return (
<span
css={STYLES_TABLE_CONTENT_LINK}
onClick={() => onAction({ type: "SIDEBAR", value: action })}
>
{text} {text}
</span> </span>
); );
case 'TRANSACTION_DIRECTION': case "TRANSACTION_DIRECTION":
return COMPONENTS_TRANSACTION_DIRECTION[text]; return COMPONENTS_TRANSACTION_DIRECTION[text];
case 'TRANSACTION_STATUS': case "TRANSACTION_STATUS":
return COMPONENTS_TRANSACTION_STATUS[text]; return COMPONENTS_TRANSACTION_STATUS[text];
case 'ICON': case "ICON":
return COMPONENTS_ICON[text]; return COMPONENTS_ICON[text];
case 'AVATAR': case "AVATAR":
return <Avatar url={text} size={40} online={online} />; return <Avatar url={text} size={40} online={online} />;
case 'DEAL_STATUS_RETRIEVAL': case "DEAL_STATUS_RETRIEVAL":
return RETRIEVAL_DEAL_STATES[`${text}`]; return RETRIEVAL_DEAL_STATES[`${text}`];
case 'DEAL_STATUS': case "DEAL_STATUS":
return data['deal_category'] === 1 ? STORAGE_DEAL_STATES[`${text}`] : RETRIEVAL_DEAL_STATES[`${text}`]; return data["deal_category"] === 1
case 'BANDWIDTH_UPLOAD': ? STORAGE_DEAL_STATES[`${text}`]
: RETRIEVAL_DEAL_STATES[`${text}`];
case "BANDWIDTH_UPLOAD":
return ( return (
<React.Fragment> <React.Fragment>
<SVG.BandwidthUp height="16px" style={{ marginRight: 8 }} /> <SVG.BandwidthUp height="16px" style={{ marginRight: 8 }} />
{Strings.bytesToSize(text)} {Strings.bytesToSize(text)}
</React.Fragment> </React.Fragment>
); );
case 'BANDWIDTH_DOWNLOAD': case "BANDWIDTH_DOWNLOAD":
return ( return (
<React.Fragment> <React.Fragment>
<SVG.BandwidthDown height="16px" style={{ marginRight: 8 }} /> <SVG.BandwidthDown height="16px" style={{ marginRight: 8 }} />
{Strings.bytesToSize(text)} {Strings.bytesToSize(text)}
</React.Fragment> </React.Fragment>
); );
case 'MINER_AVAILABILITY': case "MINER_AVAILABILITY":
return text == 1 ? ( return text == 1 ? (
<span css={STYLES_TABLE_TAG} style={{ background: Constants.system.green }}> <span
css={STYLES_TABLE_TAG}
style={{ background: Constants.system.green }}
>
Online Online
</span> </span>
) : null; ) : null;
case 'DEAL_AUTO_RENEW': case "DEAL_AUTO_RENEW":
return text == 1 ? ( return text == 1 ? (
<span css={STYLES_TABLE_TAG} style={{ background: Constants.system.brand }}> <span
css={STYLES_TABLE_TAG}
style={{ background: Constants.system.brand }}
>
true true
</span> </span>
) : ( ) : (
<span css={STYLES_TABLE_TAG}>false</span> <span css={STYLES_TABLE_TAG}>false</span>
); );
case 'NOTIFICATION_ERROR': case "NOTIFICATION_ERROR":
return ( return (
<span css={STYLES_TABLE_TAG} style={{ background: Constants.system.red }}> <span
{text} {Strings.pluralize('error', text)} css={STYLES_TABLE_TAG}
style={{ background: Constants.system.red }}
>
{text} {Strings.pluralize("error", text)}
</span> </span>
); );
case 'FILE_DATE': case "FILE_DATE":
return Strings.toDate(text); return Strings.toDate(text);
case 'FILE_SIZE': case "FILE_SIZE":
return Strings.bytesToSize(text, 2); return Strings.bytesToSize(text, 2);
case 'FILE_LINK': case "FILE_LINK":
// NOTE(jim): Special case to prevent navigation. // NOTE(jim): Special case to prevent navigation.
if (!data) { if (!data) {
return text; return text;
@ -226,23 +255,27 @@ export const TableContent = ({ type, text, action, data = {}, onNavigateTo, onAc
return ( return (
<span <span
css={STYLES_TABLE_CONTENT_LINK} css={STYLES_TABLE_CONTENT_LINK}
onClick={() => onAction({ type: 'NAVIGATE', value: data.folderId, data })}> onClick={() =>
onAction({ type: "NAVIGATE", value: data.folderId, data })
}
>
{text} {text}
</span> </span>
); );
} }
// NOTE(jim): Special case for navigating to a sidebar. // NOTE(jim): Special case for navigating to a sidebar.
if (data && data['retrieval_status'] === 1) { if (data && data["retrieval_status"] === 1) {
return ( return (
<span <span
css={STYLES_TABLE_CONTENT_LINK} css={STYLES_TABLE_CONTENT_LINK}
onClick={() => onClick={() =>
onAction({ onAction({
type: 'SIDEBAR', type: "SIDEBAR",
value: 'SIDEBAR_FILE_STORAGE_DEAL', value: "SIDEBAR_FILE_STORAGE_DEAL",
}) })
}> }
>
{text} {text}
</span> </span>
); );
@ -251,20 +284,21 @@ export const TableContent = ({ type, text, action, data = {}, onNavigateTo, onAc
// NOTE(jim): Special case to prevent navigation. // NOTE(jim): Special case to prevent navigation.
if ( if (
data && data &&
(data['retrieval_status'] === 5 || (data["retrieval_status"] === 5 ||
data['retrieval_status'] === 4 || data["retrieval_status"] === 4 ||
data['retrieval_status'] === 3 || data["retrieval_status"] === 3 ||
data['retrieval_status'] === 2) data["retrieval_status"] === 2)
) { ) {
return ( return (
<span <span
onClick={() => onClick={() =>
onAction({ onAction({
name: 'File does not exist', name: "File does not exist",
type: 'ACTION', type: "ACTION",
value: 'ACTION_FILE_MISSING', value: "ACTION_FILE_MISSING",
}) })
}> }
>
{text} {text}
</span> </span>
); );
@ -272,7 +306,10 @@ export const TableContent = ({ type, text, action, data = {}, onNavigateTo, onAc
// NOTE(jim): Navigates to file. // NOTE(jim): Navigates to file.
return ( return (
<span css={STYLES_TABLE_CONTENT_LINK} onClick={() => onNavigateTo({ id: 15 }, data)}> <span
css={STYLES_TABLE_CONTENT_LINK}
onClick={() => onNavigateTo({ id: 15 }, data)}
>
{text} {text}
</span> </span>
); );

8
index.js
View File

@ -1,6 +1,6 @@
require('@babel/register')({ require("@babel/register")({
presets: ['@babel/preset-env'], presets: ["@babel/preset-env"],
ignore: ['node_modules', '.next'], ignore: ["node_modules", ".next"],
}); });
module.exports = require('./server.js'); module.exports = require("./server.js");

103
pages/index.js
View File

@ -1,39 +1,39 @@
import * as React from 'react'; import * as React from "react";
import * as Fixtures from '~/common/fixtures'; import * as Fixtures from "~/common/fixtures";
import * as Actions from '~/common/actions'; import * as Actions from "~/common/actions";
import * as State from '~/common/state'; import * as State from "~/common/state";
import SceneDataTransfer from '~/scenes/SceneDataTransfer'; import SceneDataTransfer from "~/scenes/SceneDataTransfer";
import SceneDeals from '~/scenes/SceneDeals'; import SceneDeals from "~/scenes/SceneDeals";
import SceneEditAccount from '~/scenes/SceneEditAccount'; import SceneEditAccount from "~/scenes/SceneEditAccount";
import SceneFile from '~/scenes/SceneFile'; import SceneFile from "~/scenes/SceneFile";
import SceneFilesFolder from '~/scenes/SceneFilesFolder'; import SceneFilesFolder from "~/scenes/SceneFilesFolder";
import SceneHome from '~/scenes/SceneHome'; import SceneHome from "~/scenes/SceneHome";
import SceneLogs from '~/scenes/SceneLogs'; import SceneLogs from "~/scenes/SceneLogs";
import SceneMiners from '~/scenes/SceneMiners'; import SceneMiners from "~/scenes/SceneMiners";
import ScenePaymentChannels from '~/scenes/ScenePaymentChannels'; import ScenePaymentChannels from "~/scenes/ScenePaymentChannels";
import ScenePeers from '~/scenes/ScenePeers'; import ScenePeers from "~/scenes/ScenePeers";
import SceneSettings from '~/scenes/SceneSettings'; import SceneSettings from "~/scenes/SceneSettings";
import SceneStats from '~/scenes/SceneStats'; import SceneStats from "~/scenes/SceneStats";
import SceneStatus from '~/scenes/SceneStatus'; import SceneStatus from "~/scenes/SceneStatus";
import SceneStorageMarket from '~/scenes/SceneStorageMarket'; import SceneStorageMarket from "~/scenes/SceneStorageMarket";
import SceneWallet from '~/scenes/SceneWallet'; import SceneWallet from "~/scenes/SceneWallet";
import SidebarCreateWalletAddress from '~/components/sidebars/SidebarCreateWalletAddress'; import SidebarCreateWalletAddress from "~/components/sidebars/SidebarCreateWalletAddress";
import SidebarDeleteWalletAddress from '~/components/sidebars/SidebarDeleteWalletAddress'; import SidebarDeleteWalletAddress from "~/components/sidebars/SidebarDeleteWalletAddress";
import SidebarWalletSendFunds from '~/components/sidebars/SidebarWalletSendFunds'; import SidebarWalletSendFunds from "~/components/sidebars/SidebarWalletSendFunds";
import SidebarFileStorageDeal from '~/components/sidebars/SidebarFileStorageDeal'; import SidebarFileStorageDeal from "~/components/sidebars/SidebarFileStorageDeal";
import SidebarFileRetrievalDeal from '~/components/sidebars/SidebarFileRetrievalDeal'; import SidebarFileRetrievalDeal from "~/components/sidebars/SidebarFileRetrievalDeal";
import SidebarCreatePaymentChannel from '~/components/sidebars/SidebarCreatePaymentChannel'; import SidebarCreatePaymentChannel from "~/components/sidebars/SidebarCreatePaymentChannel";
import SidebarAddMiner from '~/components/sidebars/SidebarAddMiner'; import SidebarAddMiner from "~/components/sidebars/SidebarAddMiner";
import SidebarAddPeer from '~/components/sidebars/SidebarAddPeer'; import SidebarAddPeer from "~/components/sidebars/SidebarAddPeer";
import SidebarNotifications from '~/components/sidebars/SidebarNotifications'; import SidebarNotifications from "~/components/sidebars/SidebarNotifications";
import SidebarRedeemPaymentChannel from '~/components/sidebars/SidebarRedeemPaymentChannel'; import SidebarRedeemPaymentChannel from "~/components/sidebars/SidebarRedeemPaymentChannel";
import ApplicationNavigation from '~/components/core/ApplicationNavigation'; import ApplicationNavigation from "~/components/core/ApplicationNavigation";
import ApplicationHeader from '~/components/core/ApplicationHeader'; import ApplicationHeader from "~/components/core/ApplicationHeader";
import ApplicationLayout from '~/components/core/ApplicationLayout'; import ApplicationLayout from "~/components/core/ApplicationLayout";
import WebsitePrototypeWrapper from '~/components/core/WebsitePrototypeWrapper'; import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
const getCurrentNavigationStateById = (navigation, targetId) => { const getCurrentNavigationStateById = (navigation, targetId) => {
let target = null; let target = null;
@ -82,7 +82,7 @@ export default class IndexPage extends React.Component {
currentIndex: 0, currentIndex: 0,
data: null, data: null,
selected: { selected: {
address: '', address: "",
}, },
viewer: State.getInitialState(this.props), viewer: State.getInitialState(this.props),
sidebar: null, sidebar: null,
@ -92,10 +92,10 @@ export default class IndexPage extends React.Component {
this._socket = new WebSocket(`ws://localhost:${this.props.wsPort}`); this._socket = new WebSocket(`ws://localhost:${this.props.wsPort}`);
this._socket.onmessage = (m) => { this._socket.onmessage = (m) => {
console.log(m); console.log(m);
if (m.type === 'message') { if (m.type === "message") {
const parsed = JSON.parse(m.data); const parsed = JSON.parse(m.data);
if (parsed.action === 'UPDATE_VIEWER') { if (parsed.action === "UPDATE_VIEWER") {
this.rehydrate({ data: parsed.data }); this.rehydrate({ data: parsed.data });
} }
} }
@ -108,11 +108,11 @@ export default class IndexPage extends React.Component {
_handleSubmit = async (data) => { _handleSubmit = async (data) => {
if (this.props.production) { if (this.props.production) {
alert('TODO'); alert("TODO");
return this._handleDismissSidebar(); return this._handleDismissSidebar();
} }
if (data.type === 'CREATE_WALLET_ADDRESS') { if (data.type === "CREATE_WALLET_ADDRESS") {
const address = await Actions.createWalletAddress({ const address = await Actions.createWalletAddress({
name: data.name, name: data.name,
type: data.wallet_type, type: data.wallet_type,
@ -120,7 +120,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({ const response = await Actions.sendWalletAddressFilecoin({
source: data.source, source: data.source,
target: data.target, target: data.target,
@ -152,19 +152,19 @@ export default class IndexPage extends React.Component {
}; };
_handleAction = (options) => { _handleAction = (options) => {
if (options.type === 'NAVIGATE') { if (options.type === "NAVIGATE") {
return this._handleNavigateTo({ id: options.value }, options.data); return this._handleNavigateTo({ id: options.value }, options.data);
} }
if (options.type === 'ACTION') { if (options.type === "ACTION") {
return alert(JSON.stringify(options)); return alert(JSON.stringify(options));
} }
if (options.type === 'DOWNLOAD') { if (options.type === "DOWNLOAD") {
return alert(JSON.stringify(options)); return alert(JSON.stringify(options));
} }
if (options.type === 'SIDEBAR') { if (options.type === "SIDEBAR") {
return this.setState({ sidebar: this.sidebars[options.value] }); return this.setState({ sidebar: this.sidebars[options.value] });
} }
@ -268,7 +268,9 @@ export default class IndexPage extends React.Component {
return null; return null;
} }
const navigation = Fixtures.generateNavigationState(this.state.viewer.library); const navigation = Fixtures.generateNavigationState(
this.state.viewer.library
);
const next = this.state.history[this.state.currentIndex]; const next = this.state.history[this.state.currentIndex];
const current = getCurrentNavigationStateById(navigation, next.id); const current = getCurrentNavigationStateById(navigation, next.id);
@ -321,17 +323,22 @@ export default class IndexPage extends React.Component {
} }
const title = `Prototype 0.0.1 : ${current.target.pageTitle}`; const title = `Prototype 0.0.1 : ${current.target.pageTitle}`;
const description = 'This is an early preview.'; const description = "This is an early preview.";
const url = 'https://fps.onrender.com/v1'; const url = "https://fps.onrender.com/v1";
return ( return (
<React.Fragment> <React.Fragment>
<WebsitePrototypeWrapper title={title} description={description} url={url}> <WebsitePrototypeWrapper
title={title}
description={description}
url={url}
>
<ApplicationLayout <ApplicationLayout
navigation={navigationElement} navigation={navigationElement}
header={headerElement} header={headerElement}
sidebar={sidebarElement} sidebar={sidebarElement}
onDismissSidebar={this._handleDismissSidebar}> onDismissSidebar={this._handleDismissSidebar}
>
{scene} {scene}
</ApplicationLayout> </ApplicationLayout>
</WebsitePrototypeWrapper> </WebsitePrototypeWrapper>

161
pages/logo-name-test.js
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from "react";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
const STYLES_LAYOUT = css` const STYLES_LAYOUT = css`
max-width: 928px; max-width: 928px;
@ -23,13 +23,13 @@ const STYLES_PARAGRAPH = css`
margin-bottom: 48px; margin-bottom: 48px;
strong { strong {
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-weight: 400; font-weight: 400;
} }
`; `;
const STYLES_NAME = css` const STYLES_NAME = css`
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-size: 24px; font-size: 24px;
margin: 16px; margin: 16px;
position: relative; position: relative;
@ -88,66 +88,66 @@ const STYLES_CHOICE = css`
`; `;
const LOGOS = [ const LOGOS = [
{ src: 'idea-logo-1.jpg', votes: 1 }, { src: "idea-logo-1.jpg", votes: 1 },
{ src: 'idea-logo-2.jpg', votes: 2 }, { src: "idea-logo-2.jpg", votes: 2 },
{ src: 'idea-logo-3.jpg', votes: 0 }, { src: "idea-logo-3.jpg", votes: 0 },
{ src: 'idea-logo-4.jpg', votes: 2 }, { src: "idea-logo-4.jpg", votes: 2 },
{ src: 'idea-logo-5.jpg', votes: 1 }, { src: "idea-logo-5.jpg", votes: 1 },
{ src: 'idea-logo-6.jpg', votes: 0 }, { src: "idea-logo-6.jpg", votes: 0 },
{ src: 'idea-logo-7.jpg', votes: 0 }, { src: "idea-logo-7.jpg", votes: 0 },
{ src: 'idea-logo-8.jpg', votes: 1 }, { src: "idea-logo-8.jpg", votes: 1 },
{ src: 'idea-logo-9.jpg', votes: 3 }, { src: "idea-logo-9.jpg", votes: 3 },
{ src: 'idea-logo-10.jpg', votes: 1 }, { src: "idea-logo-10.jpg", votes: 1 },
{ src: 'idea-logo-11.jpg', votes: 3 }, { src: "idea-logo-11.jpg", votes: 3 },
{ src: 'idea-logo-12.jpg', votes: 1 }, { src: "idea-logo-12.jpg", votes: 1 },
{ src: 'idea-logo-13.jpg', votes: 2 }, { src: "idea-logo-13.jpg", votes: 2 },
{ src: 'idea-logo-14.jpg', votes: 0 }, { src: "idea-logo-14.jpg", votes: 0 },
{ src: 'idea-logo-15.jpg', votes: 2 }, { src: "idea-logo-15.jpg", votes: 2 },
{ src: 'idea-logo-16.jpg', votes: 3 }, { src: "idea-logo-16.jpg", votes: 3 },
{ src: 'idea-logo-17.jpg', votes: 0 }, { src: "idea-logo-17.jpg", votes: 0 },
{ src: 'idea-logo-18.jpg', votes: 0 }, { src: "idea-logo-18.jpg", votes: 0 },
{ src: 'idea-logo-19.jpg', votes: 0 }, { src: "idea-logo-19.jpg", votes: 0 },
{ src: 'idea-logo-20.jpg', votes: 2 }, { src: "idea-logo-20.jpg", votes: 2 },
{ src: 'idea-logo-21.jpg', votes: 0 }, { src: "idea-logo-21.jpg", votes: 0 },
{ src: 'idea-logo-22.jpg', votes: 3 }, { src: "idea-logo-22.jpg", votes: 3 },
{ src: 'idea-logo-23.jpg', votes: 2 }, { src: "idea-logo-23.jpg", votes: 2 },
{ src: 'idea-logo-24.jpg', votes: 0 }, { src: "idea-logo-24.jpg", votes: 0 },
]; ];
const NAMES = [ const NAMES = [
{ src: 'Petal', votes: 1 }, { src: "Petal", votes: 1 },
{ src: 'Petals', votes: 0 }, { src: "Petals", votes: 0 },
{ src: 'Pistil', votes: 0 }, { src: "Pistil", votes: 0 },
{ src: 'Stamen', votes: 0 }, { src: "Stamen", votes: 0 },
{ src: 'Pollen', votes: 0 }, { src: "Pollen", votes: 0 },
{ src: 'Mission Control', votes: 0 }, { src: "Mission Control", votes: 0 },
{ src: 'Hex', votes: 2 }, { src: "Hex", votes: 2 },
{ src: 'Hive', votes: 2 }, { src: "Hive", votes: 2 },
{ src: 'Hexagons', votes: 0 }, { src: "Hexagons", votes: 0 },
{ src: 'Spheres', votes: 0 }, { src: "Spheres", votes: 0 },
{ src: 'FileManager', votes: 0 }, { src: "FileManager", votes: 0 },
{ src: 'FilePatron', votes: 0 }, { src: "FilePatron", votes: 0 },
{ src: 'Filecoin Client', votes: 0 }, { src: "Filecoin Client", votes: 0 },
{ src: 'Ponds', votes: 1 }, { src: "Ponds", votes: 1 },
{ src: 'Outre', votes: 1 }, { src: "Outre", votes: 1 },
{ src: 'Slate', votes: 2 }, { src: "Slate", votes: 2 },
{ src: 'Case', votes: 2 }, { src: "Case", votes: 2 },
{ src: 'Materials', votes: 0 }, { src: "Materials", votes: 0 },
{ src: 'SeedDrive', votes: 0 }, { src: "SeedDrive", votes: 0 },
{ src: 'Monet', votes: 2 }, { src: "Monet", votes: 2 },
{ src: 'Lilypad', votes: 0 }, { src: "Lilypad", votes: 0 },
{ src: 'StoreBuddy', votes: 0 }, { src: "StoreBuddy", votes: 0 },
{ src: 'FileCabinet', votes: 0 }, { src: "FileCabinet", votes: 0 },
{ src: 'Jacana', votes: 1 }, { src: "Jacana", votes: 1 },
{ src: 'Argo', votes: 2 }, { src: "Argo", votes: 2 },
{ src: 'Octavius', votes: 0 }, { src: "Octavius", votes: 0 },
{ src: 'Corgi', votes: 0 }, { src: "Corgi", votes: 0 },
{ src: 'Filing Cabinet', votes: 0 }, { src: "Filing Cabinet", votes: 0 },
{ src: 'FileCorgi', votes: 0 }, { src: "FileCorgi", votes: 0 },
{ src: 'Max', votes: 0 }, { src: "Max", votes: 0 },
{ src: 'Nominal', votes: 0 }, { src: "Nominal", votes: 0 },
{ src: 'X AE', votes: 0 }, { src: "X AE", votes: 0 },
{ src: 'A 12', votes: 0 }, { src: "A 12", votes: 0 },
]; ];
export default class LogoNameTest extends React.Component { export default class LogoNameTest extends React.Component {
@ -155,13 +155,17 @@ export default class LogoNameTest extends React.Component {
return ( return (
<div css={STYLES_LAYOUT}> <div css={STYLES_LAYOUT}>
<p css={STYLES_PARAGRAPH}> <p css={STYLES_PARAGRAPH}>
If you are looking at this page, it is a list of name and logo ideas (I did not make them). Names and logos do If you are looking at this page, it is a list of name and logo ideas
not correspond with each other.{' '} (I did not make them). Names and logos do not correspond with each
<strong>Please let me know which ones you like through Slack direct message.</strong> other.{" "}
<strong>
Please let me know which ones you like through Slack direct message.
</strong>
<br /> <br />
<br /> <br />
All votes are anonymous. We will take the votes, consolidate the choices and then ask other designers to help All votes are anonymous. We will take the votes, consolidate the
out with refining what the team prefers. choices and then ask other designers to help out with refining what
the team prefers.
<br /> <br />
<br /> <br />
Key Key
@ -179,14 +183,18 @@ export default class LogoNameTest extends React.Component {
<span <span
css={STYLES_PILL} css={STYLES_PILL}
style={{ style={{
backgroundColor: '#0047FF', backgroundColor: "#0047FF",
bottom: 'auto', bottom: "auto",
top: -16, top: -16,
}}> }}
>
{n.votes} {n.votes}
</span> </span>
) : null} ) : null}
<span css={STYLES_CHOICE} style={{ background: 'transparent', color: '#000' }}> <span
css={STYLES_CHOICE}
style={{ background: "transparent", color: "#000" }}
>
Option #{index + 1} Option #{index + 1}
</span> </span>
</span> </span>
@ -200,15 +208,20 @@ export default class LogoNameTest extends React.Component {
<div> <div>
{LOGOS.map((l, index) => { {LOGOS.map((l, index) => {
return ( return (
<span key={l.src} css={STYLES_LOGO} style={{ backgroundImage: `url('/static/temp/${l.src}')` }}> <span
key={l.src}
css={STYLES_LOGO}
style={{ backgroundImage: `url('/static/temp/${l.src}')` }}
>
{l.votes > 0 ? ( {l.votes > 0 ? (
<span <span
css={STYLES_PILL} css={STYLES_PILL}
style={{ style={{
backgroundColor: '#0047FF', backgroundColor: "#0047FF",
bottom: 'auto', bottom: "auto",
top: -16, top: -16,
}}> }}
>
{l.votes} {l.votes}
</span> </span>
) : null} ) : null}

40
scenes/SceneDataTransfer.js
View File

@ -1,17 +1,17 @@
import * as React from 'react'; import * as React from "react";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as Fixtures from '~/common/fixtures'; import * as Fixtures from "~/common/fixtures";
import * as System from '~/components/system'; import * as System from "~/components/system";
import * as SchemaTable from '~/common/schema-table'; import * as SchemaTable from "~/common/schema-table";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import ScenePage from '~/components/core/ScenePage'; import ScenePage from "~/components/core/ScenePage";
import Section from '~/components/core/Section'; import Section from "~/components/core/Section";
export default class SceneDataTransfer extends React.Component { export default class SceneDataTransfer extends React.Component {
state = { sub_navigation: '1' }; state = { sub_navigation: "1" };
_handleChange = (e) => { _handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value }); this.setState({ [e.target.name]: e.target.value });
@ -26,15 +26,19 @@ export default class SceneDataTransfer extends React.Component {
style={{ marginTop: 24 }} style={{ marginTop: 24 }}
name="sub_navigation" name="sub_navigation"
options={[ options={[
{ value: '1', label: 'Current transfers' }, { value: "1", label: "Current transfers" },
{ value: '2', label: 'Past transfers' }, { value: "2", label: "Past transfers" },
]} ]}
value={this.state.sub_navigation} value={this.state.sub_navigation}
onChange={this._handleChange} onChange={this._handleChange}
/> />
{this.state.sub_navigation === '2' ? ( {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 <System.Table
data={{ data={{
columns: SchemaTable.DataTransfer, columns: SchemaTable.DataTransfer,
@ -49,8 +53,12 @@ export default class SceneDataTransfer extends React.Component {
</Section> </Section>
) : null} ) : null}
{this.state.sub_navigation === '1' ? ( {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> <System.P style={{ padding: 24 }}>There are no transfers</System.P>
</Section> </Section>
) : null} ) : null}

25
scenes/SceneDeals.js
View File

@ -1,14 +1,14 @@
import * as React from 'react'; import * as React from "react";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as Fixtures from '~/common/fixtures'; import * as Fixtures from "~/common/fixtures";
import * as System from '~/components/system'; import * as System from "~/components/system";
import * as SchemaTable from '~/common/schema-table'; import * as SchemaTable from "~/common/schema-table";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import Section from '~/components/core/Section'; import Section from "~/components/core/Section";
import ScenePage from '~/components/core/ScenePage'; import ScenePage from "~/components/core/ScenePage";
export default class SceneDeals extends React.Component { export default class SceneDeals extends React.Component {
state = {}; state = {};
@ -20,7 +20,12 @@ export default class SceneDeals extends React.Component {
render() { render() {
return ( return (
<ScenePage> <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 <System.Table
onAction={this.props.onAction} onAction={this.props.onAction}
onNavigateTo={this.props.onNavigateTo} onNavigateTo={this.props.onNavigateTo}

39
scenes/SceneEditAccount.js
View File

@ -1,11 +1,11 @@
import * as React from 'react'; import * as React from "react";
import * as System from '~/components/system'; import * as System from "~/components/system";
import * as Actions from '~/common/actions'; import * as Actions from "~/common/actions";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import ScenePage from '~/components/core/ScenePage'; import ScenePage from "~/components/core/ScenePage";
import Avatar from '~/components/core/Avatar'; import Avatar from "~/components/core/Avatar";
const STYLES_FILE_HIDDEN = css` const STYLES_FILE_HIDDEN = css`
height: 1px; height: 1px;
@ -23,16 +23,16 @@ export default class SceneEditAccount extends React.Component {
let file = e.target.files[0]; let file = e.target.files[0];
if (!file) { if (!file) {
alert('Something went wrong'); alert("Something went wrong");
} }
let data = new FormData(); let data = new FormData();
data.append('image', file); data.append("image", file);
const options = { const options = {
method: 'POST', method: "POST",
headers: { headers: {
Accept: 'application/json', Accept: "application/json",
}, },
body: data, body: data,
}; };
@ -55,11 +55,24 @@ export default class SceneEditAccount extends React.Component {
description="This image will appear in various lists." description="This image will appear in various lists."
/> />
<Avatar style={{ marginTop: 24 }} size={256} url={this.props.viewer.photoURL} /> <Avatar
style={{ marginTop: 24 }}
size={256}
url={this.props.viewer.photoURL}
/>
<div style={{ marginTop: 24 }}> <div style={{ marginTop: 24 }}>
<input css={STYLES_FILE_HIDDEN} type="file" id="file" onChange={this._handleUpload} /> <input
<System.ButtonPrimary style={{ margin: '0 16px 16px 0' }} type="label" htmlFor="file"> css={STYLES_FILE_HIDDEN}
type="file"
id="file"
onChange={this._handleUpload}
/>
<System.ButtonPrimary
style={{ margin: "0 16px 16px 0" }}
type="label"
htmlFor="file"
>
Upload Upload
</System.ButtonPrimary> </System.ButtonPrimary>
</div> </div>

27
scenes/SceneFile.js
View File

@ -1,14 +1,14 @@
import * as React from 'react'; import * as React from "react";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as Fixtures from '~/common/fixtures'; import * as Fixtures from "~/common/fixtures";
import * as System from '~/components/system'; import * as System from "~/components/system";
import * as SVG from '~/components/system/svg'; import * as SVG from "~/components/system/svg";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import Section from '~/components/core/Section'; import Section from "~/components/core/Section";
import ScenePage from '~/components/core/ScenePage'; import ScenePage from "~/components/core/ScenePage";
const STYLES_FLEX = css` const STYLES_FLEX = css`
display: flex; display: flex;
@ -72,7 +72,7 @@ const STYLES_BOTTOM = css`
`; `;
const STYLES_PATH = css` const STYLES_PATH = css`
font-family: 'mono'; font-family: "mono";
color: ${Constants.system.white}; color: ${Constants.system.white};
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
@ -90,7 +90,7 @@ const STYLES_ITEM = css`
justify-content: center; justify-content: center;
font-size: 12px; font-size: 12px;
letter-spacing: 0.2px; letter-spacing: 0.2px;
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
transition: 200ms ease all; transition: 200ms ease all;
cursor: pointer; cursor: pointer;
background-color: ${Constants.system.brand}; background-color: ${Constants.system.brand};
@ -128,7 +128,10 @@ export default class SceneFile extends React.Component {
<SVG.Dismiss height="24px" /> <SVG.Dismiss height="24px" />
</div> </div>
</div> </div>
<div css={STYLES_ASSET} style={{ backgroundImage: `url('${fileURL}')` }} /> <div
css={STYLES_ASSET}
style={{ backgroundImage: `url('${fileURL}')` }}
/>
</div> </div>
); );
} }

48
scenes/SceneFilesFolder.js
View File

@ -1,13 +1,13 @@
import * as React from 'react'; import * as React from "react";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as Fixtures from '~/common/fixtures'; import * as Fixtures from "~/common/fixtures";
import * as System from '~/components/system'; import * as System from "~/components/system";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import Section from '~/components/core/Section'; import Section from "~/components/core/Section";
import ScenePage from '~/components/core/ScenePage'; import ScenePage from "~/components/core/ScenePage";
export default class SceneFilesFolder extends React.Component { export default class SceneFilesFolder extends React.Component {
state = {}; state = {};
@ -24,20 +24,21 @@ export default class SceneFilesFolder extends React.Component {
const data = { const data = {
columns: [ columns: [
{ key: 'icon', hideLabel: true, width: '32px', type: 'ICON' }, { key: "icon", hideLabel: true, width: "32px", type: "ICON" },
{ key: 'file', name: 'File', width: '100%', type: 'FILE_LINK' }, { key: "file", name: "File", width: "100%", type: "FILE_LINK" },
{ key: 'size', name: 'Size', width: '140px', type: 'FILE_SIZE' }, { key: "size", name: "Size", width: "140px", type: "FILE_SIZE" },
{ {
key: 'date', key: "date",
name: 'Date uploaded', name: "Date uploaded",
width: '160px', width: "160px",
tooltip: 'This date represents when the file was first uploaded to the network.', tooltip:
type: 'FILE_DATE', "This date represents when the file was first uploaded to the network.",
type: "FILE_DATE",
}, },
{ {
key: 'storage_status', key: "storage_status",
name: 'Status', name: "Status",
type: 'DEAL_STATUS', type: "DEAL_STATUS",
}, },
], ],
rows, rows,
@ -51,11 +52,12 @@ export default class SceneFilesFolder extends React.Component {
title={this.props.data.name} title={this.props.data.name}
buttons={[ buttons={[
{ {
name: 'Store file on network', name: "Store file on network",
type: 'SIDEBAR', type: "SIDEBAR",
value: 'SIDEBAR_FILE_STORAGE_DEAL', value: "SIDEBAR_FILE_STORAGE_DEAL",
}, },
]}> ]}
>
<System.Table <System.Table
key={this.props.data.folderId} key={this.props.data.folderId}
data={data} data={data}

71
scenes/SceneHome.js
View File

@ -1,16 +1,16 @@
import * as React from 'react'; import * as React from "react";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as Fixtures from '~/common/fixtures'; import * as Fixtures from "~/common/fixtures";
import * as System from '~/components/system'; import * as System from "~/components/system";
import * as SchemaTable from '~/common/schema-table'; import * as SchemaTable from "~/common/schema-table";
import * as Data from '~/common/data'; import * as Data from "~/common/data";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import GLRenderer from '~/components/three/GLRenderer'; import GLRenderer from "~/components/three/GLRenderer";
import Section from '~/components/core/Section'; import Section from "~/components/core/Section";
import ScenePage from '~/components/core/ScenePage'; import ScenePage from "~/components/core/ScenePage";
const STYLES_ROW = css` const STYLES_ROW = css`
display: flex; display: flex;
@ -61,31 +61,37 @@ export default class SceneHome extends React.Component {
title="Recent data" title="Recent data"
buttons={[ buttons={[
{ {
name: 'View files', name: "View files",
type: 'NAVIGATE', type: "NAVIGATE",
value: this.props.viewer.library[0].folderId, value: this.props.viewer.library[0].folderId,
}, },
{ {
name: 'Store file on network', name: "Store file on network",
type: 'SIDEBAR', type: "SIDEBAR",
value: 'SIDEBAR_FILE_STORAGE_DEAL', value: "SIDEBAR_FILE_STORAGE_DEAL",
}, },
]}> ]}
>
<System.Table <System.Table
data={{ data={{
columns: [ columns: [
{ key: 'file', name: 'File', type: 'FILE_LINK' }, { key: "file", name: "File", type: "FILE_LINK" },
{ key: 'size', name: 'Size', width: '140px', type: 'FILE_SIZE' },
{ {
key: 'date', key: "size",
name: 'Date uploaded', name: "Size",
width: '160px', width: "140px",
type: 'FILE_DATE', type: "FILE_SIZE",
}, },
{ {
key: 'storage_status', key: "date",
name: 'Status', name: "Date uploaded",
type: 'DEAL_STATUS', width: "160px",
type: "FILE_DATE",
},
{
key: "storage_status",
name: "Status",
type: "DEAL_STATUS",
}, },
], ],
rows: this.props.viewer.library[0].children, rows: this.props.viewer.library[0].children,
@ -106,17 +112,18 @@ export default class SceneHome extends React.Component {
title="Wallet addresses" title="Wallet addresses"
buttons={[ buttons={[
{ {
name: 'View all', name: "View all",
type: 'NAVIGATE', type: "NAVIGATE",
value: 2, value: 2,
}, },
]}> ]}
>
<System.Table <System.Table
data={{ data={{
columns: [ columns: [
{ key: 'address', name: 'Address' }, { key: "address", name: "Address" },
{ key: 'balance', name: 'Filecoin', width: '228px' }, { key: "balance", name: "Filecoin", width: "228px" },
{ key: 'type', name: 'Type' }, { key: "type", name: "Type" },
], ],
rows: this.props.viewer.addresses, rows: this.props.viewer.addresses,
}} }}

230
scenes/SceneStats.js
View File

@ -1,14 +1,14 @@
import * as React from 'react'; import * as React from "react";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as Fixtures from '~/common/fixtures'; import * as Fixtures from "~/common/fixtures";
import * as System from '~/components/system'; import * as System from "~/components/system";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import { LineChart } from '~/vendor/react-chartkick'; import { LineChart } from "~/vendor/react-chartkick";
import Section from '~/components/core/Section'; import Section from "~/components/core/Section";
import ScenePage from '~/components/core/ScenePage'; import ScenePage from "~/components/core/ScenePage";
const STYLES_ROW = css` const STYLES_ROW = css`
padding: 24px; padding: 24px;
@ -24,7 +24,7 @@ const STYLES_LEFT = css`
`; `;
const STYLES_RIGHT = css` const STYLES_RIGHT = css`
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-size: ${Constants.typescale.lvl2}; font-size: ${Constants.typescale.lvl2};
color: ${Constants.system.brand}; color: ${Constants.system.brand};
min-width: 10%; min-width: 10%;
@ -71,7 +71,7 @@ const STYLES_GRAPH_ROW_RIGHT = css`
const STYLES_OPTION = css` const STYLES_OPTION = css`
color: ${Constants.system.white}; color: ${Constants.system.white};
margin-left: 24px; margin-left: 24px;
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-size: 12px; font-size: 12px;
line-height: 0.2px; line-height: 0.2px;
text-transform: uppercase; text-transform: uppercase;
@ -108,12 +108,12 @@ const STYLES_ITEM = css`
const STYLES_FOCUS = css` const STYLES_FOCUS = css`
font-size: ${Constants.typescale.lvl1}; font-size: ${Constants.typescale.lvl1};
font-family: 'inter-medium'; font-family: "inter-medium";
overflow-wrap: break-word; overflow-wrap: break-word;
width: 100%; width: 100%;
strong { strong {
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-weight: 400; font-weight: 400;
} }
`; `;
@ -141,16 +141,17 @@ export default class SceneStats extends React.Component {
title="Wallet" title="Wallet"
buttons={[ buttons={[
{ {
name: 'Reset', name: "Reset",
type: 'ACTION', type: "ACTION",
value: 'ACTION_RESET_STATS_WALLET', value: "ACTION_RESET_STATS_WALLET",
}, },
{ {
name: 'Export', name: "Export",
type: 'DOWNLOAD', type: "DOWNLOAD",
value: 'CSV_STATS_WALLET', value: "CSV_STATS_WALLET",
}, },
]}> ]}
>
<div css={STYLES_ROW}> <div css={STYLES_ROW}>
<div css={STYLES_LEFT}>Total FIL Balance</div> <div css={STYLES_LEFT}>Total FIL Balance</div>
<div css={STYLES_RIGHT}>Value (FIL/ATTOFIL)</div> <div css={STYLES_RIGHT}>Value (FIL/ATTOFIL)</div>
@ -173,8 +174,11 @@ export default class SceneStats extends React.Component {
</div> </div>
<div css={STYLES_ROW}> <div css={STYLES_ROW}>
<div css={STYLES_LEFT}> <div css={STYLES_LEFT}>
Total wallet addresses{' '} 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) (view)
</strong> </strong>
</div> </div>
@ -182,8 +186,11 @@ export default class SceneStats extends React.Component {
</div> </div>
<div css={STYLES_ROW}> <div css={STYLES_ROW}>
<div css={STYLES_LEFT}> <div css={STYLES_LEFT}>
Total payment channels{' '} 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) (view)
</strong> </strong>
</div> </div>
@ -191,8 +198,11 @@ export default class SceneStats extends React.Component {
</div> </div>
<div css={STYLES_ROW}> <div css={STYLES_ROW}>
<div css={STYLES_LEFT}> <div css={STYLES_LEFT}>
Total FIL in payment channels{' '} 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) (view)
</strong> </strong>
</div> </div>
@ -206,16 +216,17 @@ export default class SceneStats extends React.Component {
title="Node" title="Node"
buttons={[ buttons={[
{ {
name: 'Reset', name: "Reset",
type: 'ACTION', type: "ACTION",
value: 'ACTION_RESET_STATS_NODE', value: "ACTION_RESET_STATS_NODE",
}, },
{ {
name: 'Export', name: "Export",
type: 'DOWNLOAD', type: "DOWNLOAD",
value: 'CSV_STATS_NODE', value: "CSV_STATS_NODE",
}, },
]}> ]}
>
<div css={STYLES_GRAPH_ROW}> <div css={STYLES_GRAPH_ROW}>
<div css={STYLES_GRAPH_ROW_LEFT}> <div css={STYLES_GRAPH_ROW_LEFT}>
<div css={STYLES_GRAPH_OBJECT}> <div css={STYLES_GRAPH_OBJECT}>
@ -228,10 +239,10 @@ export default class SceneStats extends React.Component {
</div> </div>
<LineChart <LineChart
data={[ data={[
['2017-01-01 00:00:00 UTC', 1], ["2017-01-01 00:00:00 UTC", 1],
['2018-01-01 00:00:00 UTC', 5], ["2018-01-01 00:00:00 UTC", 5],
['2019-01-01 00:00:00 UTC', 25], ["2019-01-01 00:00:00 UTC", 25],
['2020-01-01 00:00:00 UTC', 200], ["2020-01-01 00:00:00 UTC", 200],
[new Date(), 400], [new Date(), 400],
]} ]}
library={{ library={{
@ -282,10 +293,10 @@ export default class SceneStats extends React.Component {
</div> </div>
<LineChart <LineChart
data={[ data={[
['2017-01-01 00:00:00 UTC', 1], ["2017-01-01 00:00:00 UTC", 1],
['2018-01-01 00:00:00 UTC', 2], ["2018-01-01 00:00:00 UTC", 2],
['2019-01-01 00:00:00 UTC', 4], ["2019-01-01 00:00:00 UTC", 4],
['2020-01-01 00:00:00 UTC', 5], ["2020-01-01 00:00:00 UTC", 5],
[new Date(), 4], [new Date(), 4],
]} ]}
library={{ library={{
@ -332,8 +343,11 @@ export default class SceneStats extends React.Component {
</div> </div>
<div css={STYLES_ROW}> <div css={STYLES_ROW}>
<div css={STYLES_LEFT}> <div css={STYLES_LEFT}>
Favorite peers{' '} 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) (view)
</strong> </strong>
</div> </div>
@ -351,16 +365,17 @@ export default class SceneStats extends React.Component {
title="Data" title="Data"
buttons={[ buttons={[
{ {
name: 'Reset', name: "Reset",
type: 'ACTION', type: "ACTION",
value: 'ACTION_RESET_STATS_DATA', value: "ACTION_RESET_STATS_DATA",
}, },
{ {
name: 'Export', name: "Export",
type: 'DOWNLOAD', type: "DOWNLOAD",
value: 'CSV_STATS_DATA', value: "CSV_STATS_DATA",
}, },
]}> ]}
>
<div css={STYLES_GRAPH_ROW}> <div css={STYLES_GRAPH_ROW}>
<div css={STYLES_GRAPH_ROW_LEFT}> <div css={STYLES_GRAPH_ROW_LEFT}>
<div css={STYLES_GRAPH_OBJECT}> <div css={STYLES_GRAPH_OBJECT}>
@ -373,10 +388,10 @@ export default class SceneStats extends React.Component {
</div> </div>
<LineChart <LineChart
data={[ data={[
['2017-01-01 00:00:00 UTC', 1], ["2017-01-01 00:00:00 UTC", 1],
['2018-01-01 00:00:00 UTC', 5], ["2018-01-01 00:00:00 UTC", 5],
['2019-01-01 00:00:00 UTC', 25], ["2019-01-01 00:00:00 UTC", 25],
['2020-01-01 00:00:00 UTC', 200], ["2020-01-01 00:00:00 UTC", 200],
[new Date(), 400], [new Date(), 400],
]} ]}
library={{ library={{
@ -430,10 +445,10 @@ export default class SceneStats extends React.Component {
</div> </div>
<LineChart <LineChart
data={[ data={[
['2017-01-01 00:00:00 UTC', 1], ["2017-01-01 00:00:00 UTC", 1],
['2018-01-01 00:00:00 UTC', 5], ["2018-01-01 00:00:00 UTC", 5],
['2019-01-01 00:00:00 UTC', 25], ["2019-01-01 00:00:00 UTC", 25],
['2020-01-01 00:00:00 UTC', 200], ["2020-01-01 00:00:00 UTC", 200],
[new Date(), 400], [new Date(), 400],
]} ]}
library={{ library={{
@ -501,54 +516,55 @@ export default class SceneStats extends React.Component {
title="Most commonly retrieved CIDs" title="Most commonly retrieved CIDs"
buttons={[ buttons={[
{ {
name: 'Export', name: "Export",
type: 'DOWNLOAD', type: "DOWNLOAD",
value: 'CSV_MOST_COMMON_CIDS', value: "CSV_MOST_COMMON_CIDS",
}, },
]}> ]}
>
<System.Table <System.Table
data={{ data={{
columns: [ columns: [
{ {
key: 'deal-cid', key: "deal-cid",
name: 'Deal CID', name: "Deal CID",
copyable: true, copyable: true,
tooltip: 'Deal CID explainer', tooltip: "Deal CID explainer",
width: '100%', width: "100%",
}, },
{ {
key: 'data-cid', key: "data-cid",
name: 'Data CID', name: "Data CID",
copyable: true, copyable: true,
tooltip: 'Data CID explainer', tooltip: "Data CID explainer",
width: '296px', width: "296px",
}, },
{ key: 'miner', name: 'Miner', width: '228px' }, { key: "miner", name: "Miner", width: "228px" },
], ],
rows: [ rows: [
{ {
id: 1, id: 1,
'data-cid': '44Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU', "data-cid": "44Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
'deal-cid': '55Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU', "deal-cid": "55Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
miner: 'Example Miner A', miner: "Example Miner A",
}, },
{ {
id: 2, id: 2,
'data-cid': '14Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU', "data-cid": "14Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
'deal-cid': '23Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU', "deal-cid": "23Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
miner: 'Example Miner B', miner: "Example Miner B",
}, },
{ {
id: 3, id: 3,
'data-cid': '88Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU', "data-cid": "88Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
'deal-cid': '89Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU', "deal-cid": "89Y7Yh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
miner: 'Example Miner C', miner: "Example Miner C",
}, },
{ {
id: 4, id: 4,
'data-cid': 'AAAAYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU', "data-cid": "AAAAYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
'deal-cid': 'BBBBYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU', "deal-cid": "BBBBYh4UquoXHLPFo2XbhXkhBvFoPwmQUSa92pxnxjQuPU",
miner: 'Example Miner D', miner: "Example Miner D",
}, },
], ],
}} }}
@ -565,22 +581,24 @@ export default class SceneStats extends React.Component {
title="Top storage deals by GB" title="Top storage deals by GB"
buttons={[ buttons={[
{ {
name: 'Export', name: "Export",
type: 'DOWNLOAD', type: "DOWNLOAD",
value: 'CSV_TOP_STORAGE_DEALS_GB', value: "CSV_TOP_STORAGE_DEALS_GB",
}, },
]}> ]}
>
<System.Table <System.Table
data={{ data={{
columns: [ columns: [
{ key: 'file', name: 'File', type: 'FILE_LINK' }, { key: "file", name: "File", type: "FILE_LINK" },
{ key: 'miner', name: 'Miner', width: '228px' }, { key: "miner", name: "Miner", width: "228px" },
{ key: 'size', name: 'Size' }, { key: "size", name: "Size" },
{ {
key: 'date', key: "date",
name: 'Date uploaded', name: "Date uploaded",
width: '168px', 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: [], rows: [],
@ -598,22 +616,24 @@ export default class SceneStats extends React.Component {
title="Top storage deals by FIL" title="Top storage deals by FIL"
buttons={[ buttons={[
{ {
name: 'Export', name: "Export",
type: 'DOWNLOAD', type: "DOWNLOAD",
value: 'CSV_TOP_STORAGE_DEALS_FIL', value: "CSV_TOP_STORAGE_DEALS_FIL",
}, },
]}> ]}
>
<System.Table <System.Table
data={{ data={{
columns: [ columns: [
{ key: 'file', name: 'File', type: 'FILE_LINK' }, { key: "file", name: "File", type: "FILE_LINK" },
{ key: 'miner', name: 'Miner', width: '228px' }, { key: "miner", name: "Miner", width: "228px" },
{ key: 'amount', name: 'Amount' }, { key: "amount", name: "Amount" },
{ {
key: 'date', key: "date",
name: 'Date uploaded', name: "Date uploaded",
width: '168px', 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: [], rows: [],

72
scenes/SceneWallet.js
View File

@ -1,15 +1,15 @@
import * as React from 'react'; import * as React from "react";
import * as Strings from '~/common/strings'; import * as Strings from "~/common/strings";
import * as Constants from '~/common/constants'; import * as Constants from "~/common/constants";
import * as SVG from '~/components/system/svg'; import * as SVG from "~/components/system/svg";
import * as Fixtures from '~/common/fixtures'; import * as Fixtures from "~/common/fixtures";
import * as System from '~/components/system'; import * as System from "~/components/system";
import * as SchemaTable from '~/common/schema-table'; import * as SchemaTable from "~/common/schema-table";
import { css } from '@emotion/react'; import { css } from "@emotion/react";
import Section from '~/components/core/Section'; import Section from "~/components/core/Section";
import ScenePage from '~/components/core/ScenePage'; import ScenePage from "~/components/core/ScenePage";
const STYLES_GROUP = css` const STYLES_GROUP = css`
padding: 24px; padding: 24px;
@ -70,12 +70,12 @@ const STYLES_TEXT = css`
const STYLES_FOCUS = css` const STYLES_FOCUS = css`
font-size: ${Constants.typescale.lvl1}; font-size: ${Constants.typescale.lvl1};
font-family: 'inter-medium'; font-family: "inter-medium";
overflow-wrap: break-word; overflow-wrap: break-word;
width: 100%; width: 100%;
strong { strong {
font-family: 'inter-semi-bold'; font-family: "inter-semi-bold";
font-weight: 400; font-weight: 400;
} }
`; `;
@ -177,11 +177,12 @@ export default class SceneWallet extends React.Component {
title="Addresses" title="Addresses"
buttons={[ buttons={[
{ {
name: 'Create a new address', name: "Create a new address",
type: 'SIDEBAR', type: "SIDEBAR",
value: 'SIDEBAR_CREATE_WALLET_ADDRESS', value: "SIDEBAR_CREATE_WALLET_ADDRESS",
}, },
]}> ]}
>
<div css={STYLES_GROUP}> <div css={STYLES_GROUP}>
<System.SelectMenu <System.SelectMenu
label="Select your address" label="Select your address"
@ -189,7 +190,8 @@ export default class SceneWallet extends React.Component {
value={this.props.selected.address} value={this.props.selected.address}
category="address" category="address"
onChange={this._handleWalletChange} onChange={this._handleWalletChange}
options={this.props.viewer.addresses}> options={this.props.viewer.addresses}
>
{currentAddress.name} {currentAddress.name}
</System.SelectMenu> </System.SelectMenu>
</div> </div>
@ -198,15 +200,20 @@ export default class SceneWallet extends React.Component {
<div css={STYLES_TEXT}> <div css={STYLES_TEXT}>
<div> <div>
<div css={STYLES_FOCUS}> <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>
<div css={STYLES_SUBTEXT}>Filecoin address</div> <div css={STYLES_SUBTEXT}>Filecoin address</div>
</div> </div>
<div style={{ marginTop: 24 }}> <div style={{ marginTop: 24 }}>
<div css={STYLES_FOCUS}> <div css={STYLES_FOCUS}>
{currentAddress.name}{' '} {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> <strong css={STYLES_FOCUS_EMPAHSIS}>(Primary)</strong>
) : null} ) : null}
</div> </div>
@ -215,7 +222,9 @@ export default class SceneWallet extends React.Component {
<div css={STYLES_ITEM_GROUP}> <div css={STYLES_ITEM_GROUP}>
<div css={STYLES_ITEM}> <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 css={STYLES_SUBTEXT}>Filecoin</div>
</div> </div>
@ -229,11 +238,12 @@ export default class SceneWallet extends React.Component {
<System.ButtonPrimary <System.ButtonPrimary
onClick={() => onClick={() =>
this.props.onAction({ this.props.onAction({
name: 'Send Filecoin', name: "Send Filecoin",
type: 'SIDEBAR', type: "SIDEBAR",
value: 'SIDEBAR_WALLET_SEND_FUNDS', value: "SIDEBAR_WALLET_SEND_FUNDS",
}) })
}> }
>
Send Filecoin Send Filecoin
</System.ButtonPrimary> </System.ButtonPrimary>
</div> </div>
@ -244,11 +254,17 @@ export default class SceneWallet extends React.Component {
onClick={this._handleMakeAddressVisible} onClick={this._handleMakeAddressVisible}
style={{ style={{
marginRight: 16, marginRight: 16,
backgroundColor: this.state.visible ? null : Constants.system.brand, backgroundColor: this.state.visible
}}> ? null
: Constants.system.brand,
}}
>
<SVG.Privacy height="16px" /> <SVG.Privacy height="16px" />
</span> </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" /> <SVG.CopyAndPaste height="16px" />
</span> </span>
</div> </div>

8
scripts/index.js
View File

@ -1,6 +1,6 @@
require('@babel/register')({ require("@babel/register")({
presets: ['@babel/preset-env'], presets: ["@babel/preset-env"],
ignore: ['node_modules', '.next'], ignore: ["node_modules", ".next"],
}); });
module.exports = require('./' + process.argv[2] + '.js'); module.exports = require("./" + process.argv[2] + ".js");