feat: postage stamps support (#115)

* chore: release 0.3.0

* feat: added postage stamp table to list all stamps

* feat: postage stamp modal to purchase stamps

* feat: postage stamps provider

* chore: added formik

* chore: proper form state handling

* chore: revert accidental release inclusion

* chore: polishing identified when developing the upload functionality

Co-authored-by: bee-worker <70210089+bee-worker@users.noreply.github.com>

src/components/LastUpdate.tsx

@@ -0,0 +1,23 @@
+import { ReactElement, useEffect, useState } from 'react'
+
+interface Props {
+  date: number | null
+}
+
+export default function LastUpdate({ date }: Props): ReactElement {
+  const [duration, setDuration] = useState<string>('never')
+
+  const refresh = () => {
+    if (!date) setDuration('never')
+    else setDuration(`${((Date.now() - date) / 1000).toFixed()} seconds ago`)
+  }
+
+  useEffect(() => {
+    refresh()
+    const i = setInterval(refresh, 1000)
+
+    return () => clearInterval(i)
+  }, [date])
+
+  return <span>Last Update: {duration}</span>
+}

src/components/PeerDetail.tsx

@@ -0,0 +1,23 @@
+import type { ReactElement } from 'react'
+import { Typography } from '@material-ui/core'
+
+function truncStringPortion(str: string, firstCharCount = 10, endCharCount = 10) {
+  return `${str.substring(0, firstCharCount)}...${str.substring(str.length - endCharCount, str.length)}`
+}
+
+interface Props {
+  peerId: string
+}
+
+export default function PeerDetail(props: Props): ReactElement {
+  return (
+    <Typography
+      variant="button"
+      style={{
+        fontFamily: 'monospace, monospace',
+      }}
+    >
+      {truncStringPortion(props.peerId)}
+    </Typography>
+  )
+}

src/components/SideBar.tsx

@@ -4,7 +4,7 @@ import { Link, RouteComponentProps } from 'react-router-dom'
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink } from '@material-ui/core'
 import { OpenInNewSharp } from '@material-ui/icons'
-import { Activity, FileText, DollarSign, Share2, Settings } from 'react-feather'
+import { Activity, FileText, DollarSign, Share2, Settings, Layers } from 'react-feather'
 
 import SwarmLogoOrange from '../assets/swarm-logo-orange.svg'
 import { Health } from '@ethersphere/bee-js'
@@ -24,6 +24,12 @@ const navBarItems = [
     path: '/files/',
     icon: FileText,
   },
+  {
+    label: 'Stamps',
+    id: 'stamps',
+    path: '/stamps/',
+    icon: Layers,
+  },
   {
     label: 'Accounting',
     id: 'accounting',