feat: upload files with postage stamps (#126)

* 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

* feat: upload files with postage stamps

* style: tabs styles are defined in theme now, addressed other PR comments

* style: removed unused styles

* fix: enable encrypted hashes to download

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

src/components/PeerDetail.tsx

@@ -7,9 +7,10 @@ function truncStringPortion(str: string, firstCharCount = 10, endCharCount = 10)
 
 interface Props {
   peerId: string
+  characterLength?: number
 }
 
-export default function PeerDetail(props: Props): ReactElement {
+export default function PeerDetail({ peerId, characterLength }: Props): ReactElement {
   return (
     <Typography
       variant="button"
@@ -17,7 +18,7 @@ export default function PeerDetail(props: Props): ReactElement {
         fontFamily: 'monospace, monospace',
       }}
     >
-      {truncStringPortion(props.peerId)}
+      {truncStringPortion(peerId, characterLength, characterLength)}
     </Typography>
   )
 }

src/components/TabsContainer.tsx

@@ -0,0 +1,71 @@
+import React, { ReactElement, ReactNode } from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
+
+interface TabPanelProps {
+  children?: ReactNode
+  index: number
+  value: number
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  )
+}
+
+const useStyles = makeStyles(() => ({
+  root: {
+    flexGrow: 1,
+  },
+}))
+
+interface TabsValues {
+  component: ReactNode
+  label: string
+}
+
+interface Props {
+  values: TabsValues[]
+}
+
+export default function SimpleTabs({ values }: Props): ReactElement {
+  const classes = useStyles()
+  const [value, setValue] = React.useState<number>(0)
+
+  const handleChange = (event: React.ChangeEvent<Record<string, never>>, newValue: number) => {
+    setValue(newValue)
+  }
+
+  return (
+    <div className={classes.root}>
+      <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
+        {values.map(({ label }, index) => (
+          <Tab key={index} label={label} />
+        ))}
+      </Tabs>
+      {values.map(({ component }, index) => (
+        <TabPanel key={index} value={value} index={index}>
+          {component}
+        </TabPanel>
+      ))}
+    </div>
+  )
+}