cleanup: formatting pass

2024-09-11 13:57:37 +03:00 · 2020-06-18 20:57:57 -07:00 · 2020-06-18 20:57:57 -07:00 · 68de6a402f
commit 68de6a402f
parent 6e9c28e529
24 changed files with 898 additions and 650 deletions
--- a/common/actions.js
+++ b/common/actions.js
@ -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),
  };

--- a/common/credentials.js
+++ b/common/credentials.js
@ -1,3 +1,3 @@
-if (process.env.NODE_ENV !== 'production') {
-  require('dotenv').config();
+if (process.env.NODE_ENV !== "production") {
+  require("dotenv").config();
 }
--- a/common/fixtures.js
+++ b/common/fixtures.js
@ -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,
  },
--- a/common/middleware.js
+++ b/common/middleware.js
@ -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();
  }

--- a/common/state.js
+++ b/common/state.js
@ -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: [],
--- a/common/strings.js
+++ b/common/strings.js
@ -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, ",");
 };
--- a/common/window.js
+++ b/common/window.js
@ -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 (
--- a/components/core/ApplicationHeader.js
+++ b/components/core/ApplicationHeader.js
@ -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 },
                ]}
              />
            }
--- a/components/core/Avatar.js
+++ b/components/core/Avatar.js
@ -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>
--- a/components/sidebars/SidebarCreateWalletAddress.js
+++ b/components/sidebars/SidebarCreateWalletAddress.js
@ -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>
--- a/components/system/index.js
+++ b/components/system/index.js
@ -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>
  );
 };
--- a/components/system/sub-system.js
+++ b/components/system/sub-system.js
@ -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>
      );
--- a/index.js
+++ b/index.js
@ -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");
--- a/pages/index.js
+++ b/pages/index.js
@ -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>
--- a/pages/logo-name-test.js
+++ b/pages/logo-name-test.js
@ -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}
--- a/scenes/SceneDataTransfer.js
+++ b/scenes/SceneDataTransfer.js
@ -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}
--- a/scenes/SceneDeals.js
+++ b/scenes/SceneDeals.js
@ -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}
--- a/scenes/SceneEditAccount.js
+++ b/scenes/SceneEditAccount.js
@ -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>
--- a/scenes/SceneFile.js
+++ b/scenes/SceneFile.js
@ -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>
    );
  }
--- a/scenes/SceneFilesFolder.js
+++ b/scenes/SceneFilesFolder.js
@ -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}
--- a/scenes/SceneHome.js
+++ b/scenes/SceneHome.js
@ -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,
              }}
--- a/scenes/SceneStats.js
+++ b/scenes/SceneStats.js
@ -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: [],
--- a/scenes/SceneWallet.js
+++ b/scenes/SceneWallet.js
@ -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>
--- a/scripts/index.js
+++ b/scripts/index.js
@ -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");