Add default mining box style and config

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

@@ -40,7 +40,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/index.tsx

@@ -2,26 +2,34 @@ import Box from '../Box'
 import Tag from '../Tag'
 import Text from '../Text'
 
-import { BoxHeader, BoxContent } from './styles'
-import { NodeBoxProps } from './types'
+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 as a UI representation of the Node (aka. Docker container).
+ * Used for the UI representation of the Node (Docker container) as a Box component.
  *
  * @param {string} [title] - the box heading
- * @param {NodeBoxStatusType} [status = 'inactive'] - the status of the box/node
- *
- * @example
- * TODO
+ * @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, children }: NodeBoxProps) => {
+const NodeBox = ({
+  title,
+  tag,
+  style,
+  titleStyle,
+  contentStyle,
+  children,
+}: NodeBoxProps) => {
   return (
-    <Box testId='node-box-cmp'>
+    <Box testId='node-box-cmp' style={style}>
       <BoxHeader>
         {tag ? (
           <Tag type={tag.type} variant='large'>
@@ -30,13 +38,29 @@ const NodeBox = ({ title, tag, children }: NodeBoxProps) => {
         ) : null}
       </BoxHeader>
       {title ? (
-        <Text as='h2' type='header'>
+        <Text as='h2' type='header' style={titleStyle}>
           {title}
         </Text>
       ) : null}
-      <BoxContent>{children}</BoxContent>
+      <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

@@ -7,4 +7,14 @@ export const BoxHeader = styled.div`
 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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { CSSWithSpring } from '../../types/general'
 import { TagType } from '../Tag/types'
 
 export interface NodeBoxProps {
@@ -7,5 +8,12 @@ export interface NodeBoxProps {
     text: string
     type?: TagType
   }
+  style?: CSSWithSpring
+  titleStyle?: CSSWithSpring
+  contentStyle?: CSSWithSpring
   children?: ReactNode
 }
+
+export interface NodeBoxContentPlaceholderProps {
+  children: string | ReactNode
+}

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