feat: mining dashboard (#108)

* Set up the Mining dashboard layout

* Add handling mining node states

* Add default mining box style and config

* Fix typo and mining header styling

applications/launchpad_v2/src/components/Box/index.tsx

@@ -15,7 +15,13 @@ import { BoxProps } from './types'
  * @prop {string} end - color on gradient end
  * @prop {number} rotation - gradient rotation in degress (45 by default)
  */
-const Box = ({ children, gradient, border, style: inlineStyle }: BoxProps) => {
+const Box = ({
+  children,
+  gradient,
+  border,
+  style: inlineStyle,
+  testId = 'box-cmp',
+}: BoxProps) => {
   const style = {
     border: border === false ? 'none' : undefined,
     background:
@@ -29,7 +35,11 @@ const Box = ({ children, gradient, border, style: inlineStyle }: BoxProps) => {
     ...inlineStyle,
   }
 
-  return <StyledBox style={style}>{children}</StyledBox>
+  return (
+    <StyledBox style={style} data-testid={testId}>
+      {children}
+    </StyledBox>
+  )
 }
 
 export default Box

applications/launchpad_v2/src/components/Box/types.ts

@@ -11,4 +11,5 @@ export type BoxProps = {
   border?: boolean
   style?: CSSProperties
   gradient?: Gradient
+  testId?: string
 }

applications/launchpad_v2/src/components/Button/styles.ts

@@ -45,7 +45,7 @@ export const StyledButton = styled.button<
     return `1px solid ${theme.accent}`
   }};
   box-shadow: none;
-  padding: ${({ theme }) => theme.spacingVertical()}
+  padding: ${({ theme }) => theme.spacingVertical(0.6)}
     ${({ theme }) => theme.spacingHorizontal()};
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   background: ${getButtonBackgroundColor};

applications/launchpad_v2/src/components/CoinsList/index.tsx

@@ -0,0 +1,49 @@
+import Loading from '../Loading'
+import Text from '../Text'
+
+import { CoinsListItem, StyledCoinsList } from './styles'
+import { CoinsListProps } from './types'
+
+/**
+ * Render the list of coins with amount.
+ * @param {CoinProps[]} coins - the list of coins
+ * @param {string} [color = 'inherit'] - the text color
+ *
+ * @typedef {CoinProps}
+ * @param {string} amount - the amount
+ * @param {string} unit - the unit, ie. xtr
+ * @param {string} [suffixText] - the latter text after the amount and unit
+ * @param {boolean} [loading] - is value being loaded
+ */
+const CoinsList = ({ coins, color }: CoinsListProps) => {
+  return (
+    <StyledCoinsList color={color}>
+      {coins.map((c, idx) => (
+        <CoinsListItem key={`coin-${idx}`} loading={c.loading}>
+          {c.loading ? (
+            <Loading loading={true} style={{ marginRight: 12 }} />
+          ) : null}
+          <Text type='subheader'>{c.amount}</Text>
+          <Text
+            as='span'
+            type='smallMedium'
+            style={{
+              paddingLeft: 4,
+              paddingRight: 4,
+              textTransform: 'uppercase',
+            }}
+          >
+            {c.unit}
+          </Text>
+          {c.suffixText ? (
+            <Text as='span' type='smallMedium'>
+              {c.suffixText}
+            </Text>
+          ) : null}
+        </CoinsListItem>
+      ))}
+    </StyledCoinsList>
+  )
+}
+
+export default CoinsList

applications/launchpad_v2/src/components/CoinsList/styles.ts

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+export const StyledCoinsList = styled.ul<{ color?: string }>`
+  color: ${({ color }) => (color ? color : 'inherit')};
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+`
+
+export const CoinsListItem = styled.li<{ loading?: boolean }>`
+  opacity: ${({ loading }) => (loading ? 0.64 : 1)};
+  display: flex;
+  align-items: center;
+`

applications/launchpad_v2/src/components/CoinsList/types.ts

@@ -0,0 +1,11 @@
+export interface CoinProps {
+  amount: string
+  unit: string
+  suffixText?: string
+  loading?: boolean
+}
+
+export interface CoinsListProps {
+  coins: CoinProps[]
+  color?: string
+}

applications/launchpad_v2/src/components/NodeBox/NodeBox.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components'
+
+import themes from '../../styles/themes'
+
+import NodeBox from '.'
+
+describe('NodeBox', () => {
+  it('should render without crashing', async () => {
+    render(
+      <ThemeProvider theme={themes.light}>
+        <NodeBox />
+      </ThemeProvider>,
+    )
+
+    const el = screen.getByTestId('node-box-cmp')
+    expect(el).toBeInTheDocument()
+  })
+})

applications/launchpad_v2/src/components/NodeBox/index.tsx

@@ -0,0 +1,66 @@
+import Box from '../Box'
+import Tag from '../Tag'
+import Text from '../Text'
+
+import { BoxHeader, BoxContent, NodeBoxPlacholder } from './styles'
+import { NodeBoxContentPlaceholderProps, NodeBoxProps } from './types'
+
+/**
+ * The advanced Box component handling:
+ * - custom title
+ * - header tag
+ * - background depending on the status prop
+ *
+ * Used for the UI representation of the Node (Docker container) as a Box component.
+ *
+ * @param {string} [title] - the box heading
+ * @param {{ text: string; type?: TagType }} [tag = 'inactive'] - the status of the box/node
+ * @param {CSSWithSpring} [style] - the box style
+ * @param {CSSWithSpring} [titleStyle] - the title style
+ * @param {CSSWithSpring} [contentStyle] - the content style
+ * @param {ReactNode} [children] - the box heading
+ */
+const NodeBox = ({
+  title,
+  tag,
+  style,
+  titleStyle,
+  contentStyle,
+  children,
+}: NodeBoxProps) => {
+  return (
+    <Box testId='node-box-cmp' style={style}>
+      <BoxHeader>
+        {tag ? (
+          <Tag type={tag.type} variant='large'>
+            {tag.text}
+          </Tag>
+        ) : null}
+      </BoxHeader>
+      {title ? (
+        <Text as='h2' type='header' style={titleStyle}>
+          {title}
+        </Text>
+      ) : null}
+      <BoxContent style={contentStyle}>{children}</BoxContent>
+    </Box>
+  )
+}
+
+/**
+ * Simple placholder container for the node box that provides default spacing and layout.
+ * @param {string | ReactNode} children - the content
+ */
+export const NodeBoxContentPlaceholder = ({
+  children,
+}: NodeBoxContentPlaceholderProps) => {
+  let content = children
+
+  if (typeof children === 'string') {
+    content = <Text color='inherit'>{children}</Text>
+  }
+
+  return <NodeBoxPlacholder>{content}</NodeBoxPlacholder>
+}
+
+export default NodeBox

applications/launchpad_v2/src/components/NodeBox/styles.ts

@@ -0,0 +1,20 @@
+import styled from 'styled-components'
+
+export const BoxHeader = styled.div`
+  height: 36px;
+`
+
+export const BoxContent = styled.div`
+  padding-top: ${({ theme }) => theme.spacingVertical(1)};
+  padding-bottom: ${({ theme }) => theme.spacingVertical(1)};
+  min-height: 136px;
+  display: flex;
+  flex-direction: column;
+`
+
+export const NodeBoxPlacholder = styled.div`
+  display: flex;
+  flex: 1;
+  padding-top: ${({ theme }) => theme.spacingVertical(1)};
+  padding-bottom: ${({ theme }) => theme.spacingVertical(1)};
+`

applications/launchpad_v2/src/components/NodeBox/types.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react'
+import { CSSWithSpring } from '../../types/general'
+import { TagType } from '../Tag/types'
+
+export interface NodeBoxProps {
+  title?: string
+  tag?: {
+    text: string
+    type?: TagType
+  }
+  style?: CSSWithSpring
+  titleStyle?: CSSWithSpring
+  contentStyle?: CSSWithSpring
+  children?: ReactNode
+}
+
+export interface NodeBoxContentPlaceholderProps {
+  children: string | ReactNode
+}

applications/launchpad_v2/src/components/Switch/styles.ts

@@ -11,12 +11,15 @@ export const SwitchContainer = styled.label`
 export const SwitchController = styled(animated.div)`
   height: 14px;
   width: 24px;
-  border: 1.5px solid ${colors.dark.primary};
+  border: 1px solid ${colors.dark.primary};
   border-radius: 6px;
   position: relative;
   box-sizing: border-box;
   box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08);
   cursor: pointer;
+  -webkit-box-shadow: 0px 0px 2px -1px ${colors.dark.primary};
+  -moz-box-shadow: 0px 0px 2px -1px ${colors.dark.primary};
+  box-shadow: 0px 0px 2px -1px ${colors.dark.primary};
 `
 
 export const SwitchCircle = styled(animated.div)`
@@ -28,7 +31,10 @@ export const SwitchCircle = styled(animated.div)`
   border-radius: 6px;
   box-sizing: border-box;
   background: #fff;
-  border: 1.5px solid ${colors.dark.primary};
+  border: 1px solid ${colors.dark.primary};
+  -webkit-box-shadow: 0px 0px 2px -1px ${colors.dark.primary};
+  -moz-box-shadow: 0px 0px 2px -1px ${colors.dark.primary};
+  box-shadow: 0px 0px 2px -1px ${colors.dark.primary};
 `
 
 export const LabelText = styled(animated.span)`

applications/launchpad_v2/src/components/Tag/index.tsx

@@ -12,7 +12,7 @@ import { TagContainer, IconWrapper } from './styles'
  *
  * @prop {ReactNode} [children] - text content to display
  * @prop {CSSProperties} [style] - optional component styles
- * @prop {'info' | 'running' | 'warning' | 'expert'} [type] - tag types to determine color settings
+ * @prop {'info' | 'running' | 'warning' | 'expert' | 'light'} [type] - tag types to determine color settings
  * @prop {ReactNode} [icon] - optional SVG icon
  * @prop {ReactNode} [subText] - optional additional tag text
  *
@@ -62,6 +62,14 @@ const Tag = ({
         color: 'transparent',
       }
       break
+    case 'light':
+      baseStyle = {
+        backgroundColor: theme.lightTag,
+      }
+      textStyle = {
+        color: theme.lightTagText,
+      }
+      break
     // info tag type is default
     default:
       baseStyle = {

applications/launchpad_v2/src/components/Tag/types.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 import { CSSProperties } from 'styled-components'
 
 export type TagVariantType = 'small' | 'large'
-export type TagType = 'info' | 'running' | 'warning' | 'expert'
+export type TagType = 'info' | 'running' | 'warning' | 'expert' | 'light'
 
 /**
  * @typedef TagProps