filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-22 08:31:41 +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 Strings from '~/common/strings';
import * as State from "~/common/state";
import * as Strings from "~/common/strings";
const REQUEST_HEADERS = {
Accept: 'application/json',
'Content-Type': 'application/json',
Accept: "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 () => {
const options = {
method: 'POST',
method: "POST",
headers: REQUEST_HEADERS,
credentials: 'include',
credentials: "include",
body: JSON.stringify({}),
};
@ -28,9 +30,9 @@ export const rehydrateViewer = async () => {
export const setDefaultConfig = async (data) => {
const options = {
method: 'POST',
method: "POST",
headers: REQUEST_HEADERS,
credentials: 'include',
credentials: "include",
body: JSON.stringify(data),
};
@ -46,9 +48,9 @@ export const createWalletAddress = async (data) => {
}
const options = {
method: 'POST',
method: "POST",
headers: REQUEST_HEADERS,
credentials: 'include',
credentials: "include",
body: JSON.stringify(data),
};
@ -72,9 +74,9 @@ export const sendWalletAddressFilecoin = async (data) => {
}
const options = {
method: 'POST',
method: "POST",
headers: REQUEST_HEADERS,
credentials: 'include',
credentials: "include",
body: JSON.stringify(data),
};

4
common/credentials.js
View File

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

12
common/middleware.js
View File

@ -1,15 +1,15 @@
export const CORS = async (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header("Access-Control-Allow-Origin", "*");
res.header(
'Access-Control-Allow-Methods',
'GET, POST, PATCH, PUT, DELETE, OPTIONS'
"Access-Control-Allow-Methods",
"GET, POST, PATCH, PUT, DELETE, OPTIONS"
);
res.header(
'Access-Control-Allow-Headers',
'Origin, Accept, Content-Type, Authorization'
"Access-Control-Allow-Headers",
"Origin, Accept, Content-Type, Authorization"
);
if (req.method === 'OPTIONS') {
if (req.method === "OPTIONS") {
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 balanceMap = {};
@ -24,8 +28,8 @@ const transformPeers = (peersList) => {
return peersList.map((each) => {
return {
id: each.addrInfo.id,
'peer-avatar': null,
'chain-head': null,
"peer-avatar": null,
"chain-head": null,
height: null,
location: null,
upload: null,
@ -53,8 +57,8 @@ export const getInitialState = (props) => {
return {
id: info.id,
name: 'New Node',
photoURL: '/static/system/avatar.png',
name: "New Node",
photoURL: "/static/system/avatar.png",
upload_bandwidth: 0,
download_bandwidth: 0,
@ -66,13 +70,19 @@ export const getInitialState = (props) => {
settings_cold_enabled: info.defaultConfig.cold.enabled,
settings_cold_default_address: info.defaultConfig.cold.filecoin.addr,
settings_cold_default_duration: info.defaultConfig.cold.filecoin.dealMinDuration,
settings_cold_default_replication_factor: 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_duration:
info.defaultConfig.cold.filecoin.dealMinDuration,
settings_cold_default_replication_factor:
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_auto_renew: info.defaultConfig.cold.filecoin.renew.enabled,
settings_cold_default_auto_renew_max_price: info.defaultConfig.cold.filecoin.renew.threshold,
settings_cold_default_auto_renew:
info.defaultConfig.cold.filecoin.renew.enabled,
settings_cold_default_auto_renew_max_price:
info.defaultConfig.cold.filecoin.renew.threshold,
notifications: [],
payment_channels_active: [],

55
common/strings.js
View File

@ -6,41 +6,50 @@ const MONTH = (DAY * 365) / 12;
const YEAR = DAY * 365;
export const copyText = (str) => {
const el = document.createElement('textarea');
const el = document.createElement("textarea");
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
el.setAttribute("readonly", "");
el.style.position = "absolute";
el.style.left = "-9999px";
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.execCommand("copy");
document.body.removeChild(el);
return true;
};
export const hexToRGBA = (hex, alpha = 1) => {
hex = hex.replace('#', '');
var r = parseInt(hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2), 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);
hex = hex.replace("#", "");
var r = parseInt(
hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2),
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) {
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return 'rgb(' + r + ', ' + g + ', ' + b + ')';
return "rgb(" + r + ", " + g + ", " + b + ")";
}
};
export const bytesToSize = (bytes, decimals = 2) => {
if (bytes === 0) return '0 Bytes';
if (bytes === 0) return "0 Bytes";
const k = 1024;
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));
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) => {
@ -48,18 +57,18 @@ export const getRemainingTime = (seconds) => {
let [value, unit] =
seconds < MINUTE
? [Math.round(seconds), 'second']
? [Math.round(seconds), "second"]
: seconds < HOUR
? [Math.round(seconds / MINUTE), 'minute']
? [Math.round(seconds / MINUTE), "minute"]
: seconds < DAY
? [Math.round(seconds / HOUR), 'hour']
? [Math.round(seconds / HOUR), "hour"]
: seconds < WEEK
? [Math.round(seconds / DAY), 'day']
? [Math.round(seconds / DAY), "day"]
: seconds < MONTH
? [Math.round(seconds / WEEK), 'week']
? [Math.round(seconds / WEEK), "week"]
: seconds < YEAR
? [Math.round(seconds / MONTH), 'month']
: [Math.round(seconds / YEAR), 'year'];
? [Math.round(seconds / MONTH), "month"]
: [Math.round(seconds / YEAR), "year"];
unit = pluralize(unit, value);
@ -78,7 +87,7 @@ export const pluralize = (text, count) => {
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)) {
return emptyState;
}
@ -96,5 +105,5 @@ export const toDate = (data) => {
};
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 => {
return userAgent ? userAgent : navigator.userAgent || navigator.vendor || window.opera;
const getNavigatorAgent = (userAgent) => {
return userAgent
? userAgent
: navigator.userAgent || navigator.vendor || window.opera;
};
export const delay = async waitMs => {
return await new Promise(resolve => setTimeout(resolve, waitMs));
export const delay = async (waitMs) => {
return await new Promise((resolve) => setTimeout(resolve, waitMs));
};
export const checkIfElementIsVisible = el => {
export const checkIfElementIsVisible = (el) => {
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 isVisible =
@ -48,20 +51,24 @@ export const isDescendant = (parent, child) => {
};
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);
return /Android/i.test(navigatorAgent);
};
export const isIOS = userAgent => {
export const isIOS = (userAgent) => {
const navigatorAgent = getNavigatorAgent(userAgent);
return /iPhone|iPad|iPod/i.test(navigatorAgent);
};
export const isMobileBrowser = userAgent => {
export const isMobileBrowser = (userAgent) => {
const navigatorAgent = getNavigatorAgent(userAgent);
return (

57
components/core/ApplicationHeader.js
View File

@ -1,11 +1,11 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as System from '~/components/system';
import * as SVG from '~/common/svg';
import * as React from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
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`
height: 32px;
@ -113,38 +113,57 @@ const STYLES_INPUT = css`
transition: 200ms ease all;
: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;
}
`;
export default class ApplicationHeader extends React.Component {
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 =
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 (
<header css={STYLES_APPLICATION_HEADER}>
<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" />
</span>
<span
css={STYLES_ICON_ELEMENT}
style={isBackDisabled ? { cursor: 'not-allowed', color: Constants.system.border } : null}
onClick={isBackDisabled ? () => {} : this.props.onBack}>
<SVG.NavigationArrow height="16px" style={{ transform: `rotate(180deg)` }} />
style={
isBackDisabled
? { cursor: "not-allowed", color: Constants.system.border }
: null
}
onClick={isBackDisabled ? () => {} : this.props.onBack}
>
<SVG.NavigationArrow
height="16px"
style={{ transform: `rotate(180deg)` }}
/>
</span>
<span
css={STYLES_ICON_ELEMENT}
style={isForwardDisabled ? { cursor: 'not-allowed', color: Constants.system.border } : null}
onClick={isForwardDisabled ? () => {} : this.props.onForward}>
style={
isForwardDisabled
? { cursor: "not-allowed", color: Constants.system.border }
: null
}
onClick={isForwardDisabled ? () => {} : this.props.onForward}
>
<SVG.NavigationArrow height="16px" />
</span>
</div>
<div css={STYLES_MIDDLE}></div>
<div css={STYLES_MIDDLE} />
<div css={STYLES_RIGHT}>
<Avatar
style={{ marginLeft: 12 }}
@ -153,12 +172,12 @@ export default class ApplicationHeader extends React.Component {
url={this.props.viewer.photoURL}
popover={
<System.PopoverNavigation
style={{ right: 0, top: '48px', cursor: 'pointer' }}
style={{ right: 0, top: "48px", cursor: "pointer" }}
onNavigateTo={this.props.onNavigateTo}
onAction={this.props.onAction}
navigation={[
{ text: 'Edit account', value: 13 },
{ text: 'Settings', value: 14 },
{ text: "Edit account", value: 13 },
{ text: "Settings", value: 14 },
]}
/>
}

13
components/core/Avatar.js
View File

@ -1,9 +1,9 @@
import * as React from 'react';
import * as Constants from '~/common/constants';
import * as React from "react";
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`
display: inline-flex;
@ -57,8 +57,9 @@ export default class AvatarEntity extends React.Component {
height: `${this.props.size}px`,
borderRadius: `${this.props.size}px`,
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.props.online ? <span css={STYLES_AVATAR_ONLINE} /> : null}
</Dismissible>

45
components/sidebars/SidebarCreateWalletAddress.js
View File

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

232
components/system/index.js
View File

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

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

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

8
index.js
View File

@ -1,6 +1,6 @@
require('@babel/register')({
presets: ['@babel/preset-env'],
ignore: ['node_modules', '.next'],
require("@babel/register")({
presets: ["@babel/preset-env"],
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 Fixtures from '~/common/fixtures';
import * as Actions from '~/common/actions';
import * as State from '~/common/state';
import * as React from "react";
import * as Fixtures from "~/common/fixtures";
import * as Actions from "~/common/actions";
import * as State from "~/common/state";
import SceneDataTransfer from '~/scenes/SceneDataTransfer';
import SceneDeals from '~/scenes/SceneDeals';
import SceneEditAccount from '~/scenes/SceneEditAccount';
import SceneFile from '~/scenes/SceneFile';
import SceneFilesFolder from '~/scenes/SceneFilesFolder';
import SceneHome from '~/scenes/SceneHome';
import SceneLogs from '~/scenes/SceneLogs';
import SceneMiners from '~/scenes/SceneMiners';
import ScenePaymentChannels from '~/scenes/ScenePaymentChannels';
import ScenePeers from '~/scenes/ScenePeers';
import SceneSettings from '~/scenes/SceneSettings';
import SceneStats from '~/scenes/SceneStats';
import SceneStatus from '~/scenes/SceneStatus';
import SceneStorageMarket from '~/scenes/SceneStorageMarket';
import SceneWallet from '~/scenes/SceneWallet';
import SceneDataTransfer from "~/scenes/SceneDataTransfer";
import SceneDeals from "~/scenes/SceneDeals";
import SceneEditAccount from "~/scenes/SceneEditAccount";
import SceneFile from "~/scenes/SceneFile";
import SceneFilesFolder from "~/scenes/SceneFilesFolder";
import SceneHome from "~/scenes/SceneHome";
import SceneLogs from "~/scenes/SceneLogs";
import SceneMiners from "~/scenes/SceneMiners";
import ScenePaymentChannels from "~/scenes/ScenePaymentChannels";
import ScenePeers from "~/scenes/ScenePeers";
import SceneSettings from "~/scenes/SceneSettings";
import SceneStats from "~/scenes/SceneStats";
import SceneStatus from "~/scenes/SceneStatus";
import SceneStorageMarket from "~/scenes/SceneStorageMarket";
import SceneWallet from "~/scenes/SceneWallet";
import SidebarCreateWalletAddress from '~/components/sidebars/SidebarCreateWalletAddress';
import SidebarDeleteWalletAddress from '~/components/sidebars/SidebarDeleteWalletAddress';
import SidebarWalletSendFunds from '~/components/sidebars/SidebarWalletSendFunds';
import SidebarFileStorageDeal from '~/components/sidebars/SidebarFileStorageDeal';
import SidebarFileRetrievalDeal from '~/components/sidebars/SidebarFileRetrievalDeal';
import SidebarCreatePaymentChannel from '~/components/sidebars/SidebarCreatePaymentChannel';
import SidebarAddMiner from '~/components/sidebars/SidebarAddMiner';
import SidebarAddPeer from '~/components/sidebars/SidebarAddPeer';
import SidebarNotifications from '~/components/sidebars/SidebarNotifications';
import SidebarRedeemPaymentChannel from '~/components/sidebars/SidebarRedeemPaymentChannel';
import SidebarCreateWalletAddress from "~/components/sidebars/SidebarCreateWalletAddress";
import SidebarDeleteWalletAddress from "~/components/sidebars/SidebarDeleteWalletAddress";
import SidebarWalletSendFunds from "~/components/sidebars/SidebarWalletSendFunds";
import SidebarFileStorageDeal from "~/components/sidebars/SidebarFileStorageDeal";
import SidebarFileRetrievalDeal from "~/components/sidebars/SidebarFileRetrievalDeal";
import SidebarCreatePaymentChannel from "~/components/sidebars/SidebarCreatePaymentChannel";
import SidebarAddMiner from "~/components/sidebars/SidebarAddMiner";
import SidebarAddPeer from "~/components/sidebars/SidebarAddPeer";
import SidebarNotifications from "~/components/sidebars/SidebarNotifications";
import SidebarRedeemPaymentChannel from "~/components/sidebars/SidebarRedeemPaymentChannel";
import ApplicationNavigation from '~/components/core/ApplicationNavigation';
import ApplicationHeader from '~/components/core/ApplicationHeader';
import ApplicationLayout from '~/components/core/ApplicationLayout';
import WebsitePrototypeWrapper from '~/components/core/WebsitePrototypeWrapper';
import ApplicationNavigation from "~/components/core/ApplicationNavigation";
import ApplicationHeader from "~/components/core/ApplicationHeader";
import ApplicationLayout from "~/components/core/ApplicationLayout";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
const getCurrentNavigationStateById = (navigation, targetId) => {
let target = null;
@ -82,7 +82,7 @@ export default class IndexPage extends React.Component {
currentIndex: 0,
data: null,
selected: {
address: '',
address: "",
},
viewer: State.getInitialState(this.props),
sidebar: null,
@ -92,10 +92,10 @@ export default class IndexPage extends React.Component {
this._socket = new WebSocket(`ws://localhost:${this.props.wsPort}`);
this._socket.onmessage = (m) => {
console.log(m);
if (m.type === 'message') {
if (m.type === "message") {
const parsed = JSON.parse(m.data);
if (parsed.action === 'UPDATE_VIEWER') {
if (parsed.action === "UPDATE_VIEWER") {
this.rehydrate({ data: parsed.data });
}
}
@ -108,11 +108,11 @@ export default class IndexPage extends React.Component {
_handleSubmit = async (data) => {
if (this.props.production) {
alert('TODO');
alert("TODO");
return this._handleDismissSidebar();
}
if (data.type === 'CREATE_WALLET_ADDRESS') {
if (data.type === "CREATE_WALLET_ADDRESS") {
const address = await Actions.createWalletAddress({
name: data.name,
type: data.wallet_type,
@ -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({
source: data.source,
target: data.target,
@ -152,19 +152,19 @@ export default class IndexPage extends React.Component {
};
_handleAction = (options) => {
if (options.type === 'NAVIGATE') {
if (options.type === "NAVIGATE") {
return this._handleNavigateTo({ id: options.value }, options.data);
}
if (options.type === 'ACTION') {
if (options.type === "ACTION") {
return alert(JSON.stringify(options));
}
if (options.type === 'DOWNLOAD') {
if (options.type === "DOWNLOAD") {
return alert(JSON.stringify(options));
}
if (options.type === 'SIDEBAR') {
if (options.type === "SIDEBAR") {
return this.setState({ sidebar: this.sidebars[options.value] });
}
@ -268,7 +268,9 @@ export default class IndexPage extends React.Component {
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 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 description = 'This is an early preview.';
const url = 'https://fps.onrender.com/v1';
const description = "This is an early preview.";
const url = "https://fps.onrender.com/v1";
return (
<React.Fragment>
<WebsitePrototypeWrapper title={title} description={description} url={url}>
<WebsitePrototypeWrapper
title={title}
description={description}
url={url}
>
<ApplicationLayout
navigation={navigationElement}
header={headerElement}
sidebar={sidebarElement}
onDismissSidebar={this._handleDismissSidebar}>
onDismissSidebar={this._handleDismissSidebar}
>
{scene}
</ApplicationLayout>
</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`
max-width: 928px;
@ -23,13 +23,13 @@ const STYLES_PARAGRAPH = css`
margin-bottom: 48px;
strong {
font-family: 'inter-semi-bold';
font-family: "inter-semi-bold";
font-weight: 400;
}
`;
const STYLES_NAME = css`
font-family: 'inter-semi-bold';
font-family: "inter-semi-bold";
font-size: 24px;
margin: 16px;
position: relative;
@ -88,66 +88,66 @@ const STYLES_CHOICE = css`
`;
const LOGOS = [
{ src: 'idea-logo-1.jpg', votes: 1 },
{ src: 'idea-logo-2.jpg', votes: 2 },
{ src: 'idea-logo-3.jpg', votes: 0 },
{ src: 'idea-logo-4.jpg', votes: 2 },
{ src: 'idea-logo-5.jpg', votes: 1 },
{ src: 'idea-logo-6.jpg', votes: 0 },
{ src: 'idea-logo-7.jpg', votes: 0 },
{ src: 'idea-logo-8.jpg', votes: 1 },
{ src: 'idea-logo-9.jpg', votes: 3 },
{ src: 'idea-logo-10.jpg', votes: 1 },
{ src: 'idea-logo-11.jpg', votes: 3 },
{ src: 'idea-logo-12.jpg', votes: 1 },
{ src: 'idea-logo-13.jpg', votes: 2 },
{ src: 'idea-logo-14.jpg', votes: 0 },
{ src: 'idea-logo-15.jpg', votes: 2 },
{ src: 'idea-logo-16.jpg', votes: 3 },
{ src: 'idea-logo-17.jpg', votes: 0 },
{ src: 'idea-logo-18.jpg', votes: 0 },
{ src: 'idea-logo-19.jpg', votes: 0 },
{ src: 'idea-logo-20.jpg', votes: 2 },
{ src: 'idea-logo-21.jpg', votes: 0 },
{ src: 'idea-logo-22.jpg', votes: 3 },
{ src: 'idea-logo-23.jpg', votes: 2 },
{ src: 'idea-logo-24.jpg', votes: 0 },
{ src: "idea-logo-1.jpg", votes: 1 },
{ src: "idea-logo-2.jpg", votes: 2 },
{ src: "idea-logo-3.jpg", votes: 0 },
{ src: "idea-logo-4.jpg", votes: 2 },
{ src: "idea-logo-5.jpg", votes: 1 },
{ src: "idea-logo-6.jpg", votes: 0 },
{ src: "idea-logo-7.jpg", votes: 0 },
{ src: "idea-logo-8.jpg", votes: 1 },
{ src: "idea-logo-9.jpg", votes: 3 },
{ src: "idea-logo-10.jpg", votes: 1 },
{ src: "idea-logo-11.jpg", votes: 3 },
{ src: "idea-logo-12.jpg", votes: 1 },
{ src: "idea-logo-13.jpg", votes: 2 },
{ src: "idea-logo-14.jpg", votes: 0 },
{ src: "idea-logo-15.jpg", votes: 2 },
{ src: "idea-logo-16.jpg", votes: 3 },
{ src: "idea-logo-17.jpg", votes: 0 },
{ src: "idea-logo-18.jpg", votes: 0 },
{ src: "idea-logo-19.jpg", votes: 0 },
{ src: "idea-logo-20.jpg", votes: 2 },
{ src: "idea-logo-21.jpg", votes: 0 },
{ src: "idea-logo-22.jpg", votes: 3 },
{ src: "idea-logo-23.jpg", votes: 2 },
{ src: "idea-logo-24.jpg", votes: 0 },
];
const NAMES = [
{ src: 'Petal', votes: 1 },
{ src: 'Petals', votes: 0 },
{ src: 'Pistil', votes: 0 },
{ src: 'Stamen', votes: 0 },
{ src: 'Pollen', votes: 0 },
{ src: 'Mission Control', votes: 0 },
{ src: 'Hex', votes: 2 },
{ src: 'Hive', votes: 2 },
{ src: 'Hexagons', votes: 0 },
{ src: 'Spheres', votes: 0 },
{ src: 'FileManager', votes: 0 },
{ src: 'FilePatron', votes: 0 },
{ src: 'Filecoin Client', votes: 0 },
{ src: 'Ponds', votes: 1 },
{ src: 'Outre', votes: 1 },
{ src: 'Slate', votes: 2 },
{ src: 'Case', votes: 2 },
{ src: 'Materials', votes: 0 },
{ src: 'SeedDrive', votes: 0 },
{ src: 'Monet', votes: 2 },
{ src: 'Lilypad', votes: 0 },
{ src: 'StoreBuddy', votes: 0 },
{ src: 'FileCabinet', votes: 0 },
{ src: 'Jacana', votes: 1 },
{ src: 'Argo', votes: 2 },
{ src: 'Octavius', votes: 0 },
{ src: 'Corgi', votes: 0 },
{ src: 'Filing Cabinet', votes: 0 },
{ src: 'FileCorgi', votes: 0 },
{ src: 'Max', votes: 0 },
{ src: 'Nominal', votes: 0 },
{ src: 'X AE', votes: 0 },
{ src: 'A 12', votes: 0 },
{ src: "Petal", votes: 1 },
{ src: "Petals", votes: 0 },
{ src: "Pistil", votes: 0 },
{ src: "Stamen", votes: 0 },
{ src: "Pollen", votes: 0 },
{ src: "Mission Control", votes: 0 },
{ src: "Hex", votes: 2 },
{ src: "Hive", votes: 2 },
{ src: "Hexagons", votes: 0 },
{ src: "Spheres", votes: 0 },
{ src: "FileManager", votes: 0 },
{ src: "FilePatron", votes: 0 },
{ src: "Filecoin Client", votes: 0 },
{ src: "Ponds", votes: 1 },
{ src: "Outre", votes: 1 },
{ src: "Slate", votes: 2 },
{ src: "Case", votes: 2 },
{ src: "Materials", votes: 0 },
{ src: "SeedDrive", votes: 0 },
{ src: "Monet", votes: 2 },
{ src: "Lilypad", votes: 0 },
{ src: "StoreBuddy", votes: 0 },
{ src: "FileCabinet", votes: 0 },
{ src: "Jacana", votes: 1 },
{ src: "Argo", votes: 2 },
{ src: "Octavius", votes: 0 },
{ src: "Corgi", votes: 0 },
{ src: "Filing Cabinet", votes: 0 },
{ src: "FileCorgi", votes: 0 },
{ src: "Max", votes: 0 },
{ src: "Nominal", votes: 0 },
{ src: "X AE", votes: 0 },
{ src: "A 12", votes: 0 },
];
export default class LogoNameTest extends React.Component {
@ -155,13 +155,17 @@ export default class LogoNameTest extends React.Component {
return (
<div css={STYLES_LAYOUT}>
<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
not correspond with each other.{' '}
<strong>Please let me know which ones you like through Slack direct message.</strong>
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 not correspond with each
other.{" "}
<strong>
Please let me know which ones you like through Slack direct message.
</strong>
<br />
<br />
All votes are anonymous. We will take the votes, consolidate the choices and then ask other designers to help
out with refining what the team prefers.
All votes are anonymous. We will take the votes, consolidate the
choices and then ask other designers to help out with refining what
the team prefers.
<br />
<br />
Key
@ -179,14 +183,18 @@ export default class LogoNameTest extends React.Component {
<span
css={STYLES_PILL}
style={{
backgroundColor: '#0047FF',
bottom: 'auto',
backgroundColor: "#0047FF",
bottom: "auto",
top: -16,
}}>
}}
>
{n.votes}
</span>
) : null}
<span css={STYLES_CHOICE} style={{ background: 'transparent', color: '#000' }}>
<span
css={STYLES_CHOICE}
style={{ background: "transparent", color: "#000" }}
>
Option #{index + 1}
</span>
</span>
@ -200,15 +208,20 @@ export default class LogoNameTest extends React.Component {
<div>
{LOGOS.map((l, index) => {
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 ? (
<span
css={STYLES_PILL}
style={{
backgroundColor: '#0047FF',
bottom: 'auto',
backgroundColor: "#0047FF",
bottom: "auto",
top: -16,
}}>
}}
>
{l.votes}
</span>
) : null}

40
scenes/SceneDataTransfer.js
View File

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

25
scenes/SceneDeals.js
View File

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

39
scenes/SceneEditAccount.js
View File

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

27
scenes/SceneFile.js
View File

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

48
scenes/SceneFilesFolder.js
View File

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

71
scenes/SceneHome.js
View File

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

230
scenes/SceneStats.js
View File

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

72
scenes/SceneWallet.js
View File

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

8
scripts/index.js
View File

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