Updates for the Node app

package.json

@@ -74,7 +74,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@glif/base-css": "^0.0.9",
+    "@glif/base-css": "^0.0.11",
     "@glif/filecoin-address": "^2.0.0-beta.0",
     "@glif/filecoin-number": "^2.0.0-beta.0",
     "@glif/filecoin-rpc-client": "^2.0.0-beta.0",

src/components/Button/V2.jsx

@@ -56,6 +56,16 @@ const ButtonV2 = styled.button`
       }
     `}
 
+  ${props =>
+    props.gray &&
+    css`
+      color: ${props.theme.colors.core.darkgray};
+      border-color: ${props.theme.colors.core.darkgray};
+      svg path {
+        stroke: ${props.theme.colors.core.darkgray};
+      }
+    `}
+
   ${props =>
     props.green &&
     css`
@@ -135,6 +145,7 @@ ButtonV2.propTypes = {
   white: PropTypes.bool,
   green: PropTypes.bool,
   red: PropTypes.bool,
+  gray: PropTypes.bool,
   disabled: PropTypes.bool
 }
 
@@ -143,6 +154,7 @@ ButtonV2.defaultProps = {
   white: false,
   green: false,
   red: false,
+  gray: false,
   disabled: false
 }
 

src/components/Icons/index.stories.jsx

@@ -14,7 +14,6 @@ import {
   IconViewAddress as IconViewAddressComp,
   IconEdit as IconEditComp,
   AppIconHeaderFooter as AppIconHeaderFooterComp,
-  IconCaution as IconCautionComp,
   IconMetaMaskFlask as IconMetaMaskComp,
   IconSearch as IconSearchComp
 } from '.'
@@ -94,8 +93,6 @@ IconEdit.args = {
 
 export const AppIconHeaderFooter = args => <AppIconHeaderFooterComp {...args} />
 
-export const IconCaution = args => <IconCautionComp {...args} />
-
 export const IconMetaMask = args => <IconMetaMaskComp {...args} />
 
 export const IconSearch = args => <IconSearchComp {...args} />

src/components/Icons/index.tsx

@@ -3,7 +3,7 @@ import PropTypes, { oneOf, string } from 'prop-types'
 import styled, { keyframes, css } from 'styled-components'
 import { space, color, layout, flexbox, border, position } from 'styled-system'
 
-import theme, { devices, baseColors } from '../theme'
+import theme, { devices } from '../theme'
 
 const IconBase = styled.svg`
   ${position}
@@ -628,36 +628,22 @@ export const WalletIconHeaderFooter = () => (
   </AppIconHeaderFooterSvg>
 )
 
-export const IconCaution = forwardRef<
-  HTMLOrSVGElement,
-  { stroke: string } & any
->((props, ref) => (
-  <IconBase
-    width='20'
-    height='20'
-    viewBox='0 0 20 20'
+export const NodeIconHeaderFooter = () => (
+  <AppIconHeaderFooterSvg
+    width='680'
+    height='960'
+    viewBox='0 0 680 960'
     fill='none'
     xmlns='http://www.w3.org/2000/svg'
-    ref={ref}
-    {...props}
   >
     <path
-      d='M9.93109 7.56671V9.75571M9.93109 14.1337H9.94109M3.00308 18.5117H16.8591C18.3991 18.5117 19.3611 16.6872 18.5911 15.2282L11.6631 2.09422C10.8931 0.635259 8.96909 0.635259 8.19909 2.09422L1.27108 15.2282C0.501076 16.6872 1.46308 18.5117 3.00308 18.5117Z'
-      stroke='#F7C103'
-      strokeWidth='2'
-      strokeLinecap='round'
-      strokeLinejoin='round'
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M0 10L5.55509e-06 390C5.6473e-06 395.523 4.47716 400 10 400H70C75.5229 400 80 395.523 80 390L80 105C80 91.1929 91.1929 80 105 80H575C588.807 80 600 91.1929 600 105V670C600 675.523 604.477 680 610 680H670C675.523 680 680 675.523 680 670V70V10C680 4.4772 675.523 4.61581e-05 670 4.61581e-05H70.0307L70 0L10 8.01111e-06C4.47715 8.01111e-06 0 4.47715 0 10ZM470 140L210 140H150C144.477 140 140 144.477 140 150V210V330V350V390C140 395.523 144.477 400 150 400H530C535.523 400 540 395.523 540 390V350V330V210V150C540 144.477 535.523 140 530 140L470 140ZM460 245C460 231.193 448.807 220 435 220H245C231.193 220 220 231.193 220 245V295C220 308.807 231.193 320 245 320H435C448.807 320 460 308.807 460 295V245ZM470 460L10 460C4.47716 460 5.72205e-06 464.477 5.72205e-06 470V530C5.72205e-06 535.523 4.47715 540 10 540H430C446.569 540 460 553.431 460 570C460 586.569 446.569 600 430 600H210.035L210 600H150L149.965 600H10C4.47716 600 5.72205e-06 604.477 5.72205e-06 610V670C5.72205e-06 675.523 4.47715 680 10 680H110C126.569 680 140 693.432 140 710C140 726.569 126.569 740 110 740H10C4.47716 740 5.72205e-06 744.477 5.72205e-06 750V810C5.72205e-06 815.523 4.47717 820 10 820H110C126.569 820 140 833.432 140 850C140 866.569 126.569 880 110 880H10C4.47717 880 5.72205e-06 884.477 5.72205e-06 890V950C5.72205e-06 955.523 4.47716 960 10 960H150H210H670C675.523 960 680 955.523 680 950V890C680 884.477 675.523 880 670 880H250C233.431 880 220 866.569 220 850C220 833.432 233.431 820 250 820H670C675.523 820 680 815.523 680 810V750C680 744.477 675.523 740 670 740H250C233.431 740 220 726.569 220 710C220 693.432 233.431 680 250 680H470H530C535.523 680 540 675.523 540 670V610V530V470C540 464.477 535.523 460 530 460L470 460Z'
+      fill='black'
     />
-  </IconBase>
-))
-
-IconCaution.propTypes = {
-  stroke: string
-}
-
-IconCaution.defaultProps = {
-  stroke: baseColors.yellow.mid
-}
+  </AppIconHeaderFooterSvg>
+)
 
 export const IconMetaMaskFlask = (props: { width: string; height: string }) => (
   <svg
@@ -1104,3 +1090,21 @@ export const IconSearch = forwardRef<HTMLOrSVGElement, any>((props, ref) => (
     />
   </IconBase>
 ))
+
+export const IconWarn = () => (
+  <svg
+    width='22px'
+    height='20px'
+    viewBox='0 0 22 20'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <path
+      d='M11 7.74982V9.99986M11 14.4999H11.0112M3.24282 19H18.7572C20.4815 19 21.5586 17.1246 20.6965 15.6249L12.9393 2.12474C12.0771 0.625088 9.92286 0.625088 9.0607 2.12474L1.30352 15.6249C0.441363 17.1246 1.5185 19 3.24282 19Z'
+      stroke='var(--yellow-dark)'
+      strokeWidth='2'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+)

src/components/Layout/Boxes.jsx

@@ -0,0 +1,63 @@
+import styled, { css } from 'styled-components'
+import PropTypes from 'prop-types'
+import { IconWarn } from '../Icons'
+
+/**
+ * Generic box styling
+ */
+export const GenericBox = styled.div`
+  padding: 1.5em;
+  border-radius: 8px;
+  text-align: center;
+  word-break: break-word;
+
+  > svg:first-child {
+    display: block;
+    margin: 0 auto 1em;
+  }
+
+  ${props =>
+    props.large &&
+    css`
+      font-size: 1.25em;
+    `}
+`
+
+GenericBox.propTypes = {
+  large: PropTypes.bool
+}
+
+GenericBox.defaultProps = {
+  large: false
+}
+
+/**
+ * Info box
+ */
+export const InfoBox = styled(GenericBox)`
+  background-color: var(--green-light);
+  color: var(--green-dark);
+`
+
+/**
+ * Warning box
+ */
+const WarningBoxEl = styled(GenericBox)`
+  background-color: var(--yellow-light);
+  color: var(--yellow-dark);
+`
+
+export const WarningBox = ({ children }) => (
+  <WarningBoxEl>
+    <IconWarn />
+    {children}
+  </WarningBoxEl>
+)
+
+/**
+ * Error box
+ */
+export const ErrorBox = styled(GenericBox)`
+  background-color: var(--red-light);
+  color: var(--red-dark);
+`

src/components/Layout/Buttons.jsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+import { space } from '../theme'
+
+export const FullWidthButtons = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${space()};
+  margin: 3em 0;
+
+  button {
+    white-space: normal;
+    word-break: break-word;
+  }
+`

src/components/Layout/Content.jsx → src/components/Layout/Columns.jsx

@@ -21,11 +21,11 @@ export const OneColumn = styled.div`
 export const TwoColumns = styled.div`
   display: flex;
   flex-direction: column;
+  gap: ${space()};
 
   @media (min-width: ${devices.tablet}) {
     display: grid;
     align-items: start;
-    gap: ${space()};
     grid-template-columns: 1fr 1fr;
   }
 `

src/components/Layout/LandingPage.jsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import { devices } from '../theme'
-import { OneColumn, TwoColumns } from './Content'
+import { OneColumn, TwoColumns } from './Columns'
 
 export const LandingPageColumns = styled(TwoColumns)`
   > *:first-child {

src/components/Layout/Page.tsx

@@ -5,7 +5,7 @@ import PhishingBanner from '../PhishingBanner'
 import { AppHeader, AppHeaderProps } from '../AppHeader'
 import Footer from '../Footer'
 
-import { space } from '../theme'
+import { devices, space } from '../theme'
 
 const PageOuter = styled.div`
   display: flex;
@@ -19,8 +19,12 @@ const PageOuter = styled.div`
 const PageInner = styled.div`
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - 2 * ${space()});
   gap: ${space()};
+
+  @media (min-width: ${devices.tablet}) {
+    min-height: calc(100vh - 2 * ${space()});
+  }
+
   > * {
     flex: 0 0 auto;
   }

src/components/Layout/index.js

@@ -1,3 +1,5 @@
-export * from './Content'
+export * from './Boxes'
+export * from './Buttons'
+export * from './Columns'
 export * from './LandingPage'
 export * from './Page'

src/constants.ts

@@ -17,61 +17,8 @@ export const IMPORT_MNEMONIC = 'IMPORT_MNEMONIC'
 export const CREATE_MNEMONIC = 'CREATE_MNEMONIC'
 export const IMPORT_SINGLE_KEY = 'IMPORT_SINGLE_KEY'
 
-/* API ENDPOINTS */
-export const FILSCAN = 'https://api.filscan.io:8700/v0/filscan'
-export const FILSCAN_JSONRPC = 'https://api.filscan.io:8700/rpc/v1'
-export const FILSCOUT = 'https://filscoutv3api.ipfsunion.cn'
-export const FILFOX = 'https://filfox.info/api'
-
 /* NETWORK VARS */
 export const MAINNET = 'f'
 export const TESTNET = 't'
-
 export const MAINNET_PATH_CODE = 461
 export const TESTNET_PATH_CODE = 1
-
-/* FILECOIN APP VERSION MIN */
-export const LEDGER_VERSION_MAJOR = 0
-export const LEDGER_VERSION_MINOR = 18
-export const LEDGER_VERSION_PATCH = 2
-
-/* STYLE CONSTANTS */
-export const SCREEN_MAX_WIDTH = 1440
-
-/* PAGES */
-/* eslint-disable no-unused-vars */
-export enum PAGE {
-  WALLET_HOME = '/home',
-  WALLET_SEND = '/send',
-  WALLET_CHOOSE_ACCOUNTS = '/home/accounts',
-  SPEED_UP = '/speed-up',
-  MSIG_LANDING = '/vault',
-  MSIG_HOME = '/vault/home',
-  MSIG_HISTORY = '/vault/history',
-  MSIG_ADMIN = '/vault/admin',
-  MSIG_WITHDRAW = '/vault/withdraw',
-  MSIG_CHANGE_SIGNER = '/vault/change-signer',
-  MSIG_REMOVE_SIGNER = '/vault/remove-signer',
-  MSIG_ADD_SIGNER = '/vault/add-signer',
-  MSIG_CREATE_CONFIRM = '/vault/create/confirm',
-  MSIG_CREATE = '/vault/create',
-  MSIG_CHOOSE = '/vault/choose',
-  MSIG_CHOOSE_ACCOUNTS = '/vault/accounts',
-  LANDING = '/'
-}
-
-export enum MSIG_METHOD {
-  CONSTRUCTOR = 1,
-  PROPOSE,
-  APPROVE,
-  CANCEL,
-  ADD_SIGNER,
-  REMOVE_SIGNER,
-  SWAP_SIGNER,
-  CHANGE_NUM_APPROVALS_THRESHOLD,
-  LOCK_BALANCE
-}
-/* eslint-enable */
-
-// todo #responsiveDesign: decide how to do responsive design
-export const RESPONSIVE_BREAKPOINT = 1024