feat: create /live page

src/core/api/index.js

@@ -15,5 +15,6 @@ export {
   getNetworkStats,
   getWeight,
   getWeightHistory,
-  getDaily
+  getDaily,
+  get_block_confirmed_summary
 } from './sagas'

src/core/api/sagas.js

@@ -26,6 +26,7 @@ import {
 } from '@core/accounts/actions'
 import { blockRequestActions } from '@core/blocks/actions'
 import { dailyRequestActions } from '@core/ledger/actions'
+import { block_confirmed_summary_request_actions } from '@core/nanodb/actions'
 
 function* fetchAPI(apiFunction, actions, opts = {}) {
   const { token } = yield select(getApp)
@@ -120,3 +121,9 @@ export const getWeightHistory = fetch.bind(
   weightHistoryRequestActions
 )
 export const getDaily = fetch.bind(null, api.getDaily, dailyRequestActions)
+
+export const get_block_confirmed_summary = fetch.bind(
+  null,
+  api.get_block_confirmed_summary,
+  block_confirmed_summary_request_actions
+)

src/core/api/service.js

@@ -81,6 +81,10 @@ export const api = {
   getWeightHistory() {
     const url = `${API_URL}/weight/history`
     return { url }
+  },
+  get_block_confirmed_summary({ period = '10m' }) {
+    const url = `${API_URL}/nanodb/blocks/confirmed/summary?period=${period}`
+    return { url }
   }
 }
 

src/core/nanodb/actions.js

@@ -0,0 +1,44 @@
+export const nanodb_actions = {
+  GET_BLOCK_CONFIRMED_SUMMARY: 'GET_BLOCK_CONFIRMED_SUMMARY',
+
+  GET_BLOCK_CONFIRMED_SUMMARY_FAILED: 'GET_BLOCK_CONFIRMED_SUMMARY_FAILED',
+  GET_BLOCK_CONFIRMED_SUMMARY_PENDING: 'GET_BLOCK_CONFIRMED_SUMMARY_PENDING',
+  GET_BLOCK_CONFIRMED_SUMMARY_FULFILLED:
+    'GET_BLOCK_CONFIRMED_SUMMARY_FULFILLED',
+
+  get_block_confirmed_summary: (period = '10m') => ({
+    type: nanodb_actions.GET_BLOCK_CONFIRMED_SUMMARY,
+    payload: {
+      period
+    }
+  }),
+
+  get_block_confirmed_summary_failed: (params, error) => ({
+    type: nanodb_actions.GET_BLOCK_CONFIRMED_SUMMARY_FAILED,
+    payload: {
+      params,
+      error
+    }
+  }),
+
+  get_block_confirmed_summary_pending: (params) => ({
+    type: nanodb_actions.GET_BLOCK_CONFIRMED_SUMMARY_PENDING,
+    payload: {
+      params
+    }
+  }),
+
+  get_block_confirmed_summary_fulfilled: (params, data) => ({
+    type: nanodb_actions.GET_BLOCK_CONFIRMED_SUMMARY_FULFILLED,
+    payload: {
+      params,
+      data
+    }
+  })
+}
+
+export const block_confirmed_summary_request_actions = {
+  failed: nanodb_actions.get_block_confirmed_summary_failed,
+  fulfilled: nanodb_actions.get_block_confirmed_summary_fulfilled,
+  pending: nanodb_actions.get_block_confirmed_summary_pending
+}

src/core/nanodb/index.js

@@ -0,0 +1,7 @@
+export {
+  nanodb_actions,
+  block_confirmed_summary_request_actions
+} from './actions'
+
+export { nanodb_reducer } from './reducer'
+export { nanodb_sagas } from './sagas'

src/core/nanodb/reducer.js

@@ -0,0 +1,16 @@
+import { Map } from 'immutable'
+
+import { nanodb_actions } from './actions'
+
+export function nanodb_reducer(state = Map(), action) {
+  switch (action.type) {
+    case nanodb_actions.GET_BLOCK_CONFIRMED_SUMMARY_FULFILLED:
+      return state.set(
+        `block_confirmed_summary_${action.payload.params.period}`,
+        action.payload.data
+      )
+
+    default:
+      return state
+  }
+}

src/core/nanodb/sagas.js

@@ -0,0 +1,25 @@
+import { takeEvery, fork, call } from 'redux-saga/effects'
+
+import { get_block_confirmed_summary } from '@core/api'
+import { nanodb_actions } from './actions'
+
+export function* load_block_confirmed_summary({ payload }) {
+  yield call(get_block_confirmed_summary, payload)
+}
+
+//= ====================================
+//  WATCHERS
+// -------------------------------------
+
+export function* watch_get_block_confirmed_summary() {
+  yield takeEvery(
+    nanodb_actions.GET_BLOCK_CONFIRMED_SUMMARY,
+    load_block_confirmed_summary
+  )
+}
+
+//= ====================================
+//  ROOT
+// -------------------------------------
+
+export const nanodb_sagas = [fork(watch_get_block_confirmed_summary)]

src/core/reducers.js

@@ -13,6 +13,7 @@ import { networkReducer } from './network'
 import { notificationReducer } from './notifications'
 import { postsReducer } from './posts'
 import { postlistsReducer } from './postlists'
+import { nanodb_reducer } from './nanodb'
 
 const rootReducer = (history) =>
   combineReducers({
@@ -28,7 +29,8 @@ const rootReducer = (history) =>
     network: networkReducer,
     notification: notificationReducer,
     posts: postsReducer,
-    postlists: postlistsReducer
+    postlists: postlistsReducer,
+    nanodb: nanodb_reducer
   })
 
 export default rootReducer

src/core/sagas.js

@@ -10,6 +10,7 @@ import { githubIssuesSagas } from './github-issues'
 import { ledgerSagas } from './ledger'
 import { networkSagas } from './network'
 import { postlistSagas } from './postlists'
+import { nanodb_sagas } from './nanodb'
 
 export default function* rootSage() {
   yield all([
@@ -22,6 +23,7 @@ export default function* rootSage() {
     ...githubIssuesSagas,
     ...ledgerSagas,
     ...networkSagas,
-    ...postlistSagas
+    ...postlistSagas,
+    ...nanodb_sagas
   ])
 }

src/styles/toggle-button-group.styl

@@ -0,0 +1,14 @@
+.toggle-button-group
+  flex 0 0 auto
+  border-radius 4px
+  border 1px solid $borderColor
+  background #ffffff
+
+  .MuiToggleButton-root
+    border none
+    margin 4px
+    font-size 10px
+    padding 3px 8px
+    &:not(:first-child)
+    &:first-child
+      border-radius 4px

src/styles/variables.styl

@@ -1,4 +1,5 @@
 $backgroundColor = #F0F0F0
+$textColor = #444444
 
 $borderColor = #D0D0D0
 

src/views/components/app/app.js

@@ -10,6 +10,7 @@ import '@styles/typography.styl'
 import '@styles/doc.styl'
 import '@styles/header.styl'
 import '@styles/markdown.styl'
+import '@styles/toggle-button-group.styl'
 
 export default class App extends React.Component {
   async componentDidMount() {

src/views/components/metric-card/metric-card.js

@@ -19,15 +19,16 @@ export default class MetricCard extends React.Component {
 
   render() {
     const {
-      metrics,
+      metrics = [],
       title,
       subtitle,
       max,
       unit,
       tooltip,
       field,
       selectedField,
-      selectedLabel
+      selectedLabel,
+      body
     } = this.props
     const isSelectedField = field === selectedField
     const rows = metrics.map((p, i) => {
@@ -66,7 +67,7 @@ export default class MetricCard extends React.Component {
             </Tooltip>
           )}
         </div>
-        <div className='metric__card-body'>{rows}</div>
+        <div className='metric__card-body'>{body || rows}</div>
       </div>
     )
   }
@@ -82,5 +83,6 @@ MetricCard.propTypes = {
   field: PropTypes.string,
   filter: PropTypes.func,
   selectedField: PropTypes.string,
-  selectedLabel: PropTypes.string
+  selectedLabel: PropTypes.string,
+  body: PropTypes.node
 }

src/views/components/metric-card/metric-card.styl

@@ -1,5 +1,6 @@
 .metric__card
   flex 1 0 200px
+  max-width 300px
   border-radius 8px
   padding 16px
   margin 8px

src/views/components/posts/posts.js

@@ -55,7 +55,7 @@ export default class Posts extends React.Component {
               exclusive
               onChange={this.handleChange}
               aria-label='age'
-              className='posts__age'>
+              className='toggle-button-group'>
               <ToggleButton value={72}>3D</ToggleButton>
               <ToggleButton value={168}>7D</ToggleButton>
               <ToggleButton value={720}>1M</ToggleButton>
@@ -67,7 +67,7 @@ export default class Posts extends React.Component {
               exclusive
               onChange={this.handleChange}
               aria-label='age'
-              className='posts__age'>
+              className='toggle-button-group'>
               <ToggleButton value={36}>3D</ToggleButton>
               <ToggleButton value={168}>7D</ToggleButton>
               <ToggleButton value={336}>14D</ToggleButton>

src/views/components/posts/posts.styl

@@ -21,21 +21,6 @@
     transform translate(-50%, -25px)
     position absolute
 
-.posts__age
-  flex 0 0 auto
-  border-radius 4px
-  border 1px solid $borderColor
-  background #ffffff
-
-  .MuiToggleButton-root
-    border none
-    margin 4px
-    font-size 10px
-    padding 3px 8px
-    &:not(:first-child)
-    &:first-child
-      border-radius 4px
-
 @media (min-width 750px)
   .posts__container
     border-radius 16px