feat: add identity and feed management (#272)

* feat(wip): add basic feed operations

* ci: bump checks

* ci: bump checks

* feat: rework stamps and add feed functionalities

* refactor: polish and fixes

* feat(wip): add formulas

* feat: show bzz.link for websites

* feat: add stamp empty states and formatBzz

* feat: add feed download

* chore: update manifest-js version

* feat: dev mode support with bee-js 3.1.0 (#273)

* feat: dev mode support with bee-js 3.1.0

* fix: added missing package-lock.json file

* build: remove PR preview

* style: work on design

* feat: add TroubleshootConnectionCard

* build: remove depcheck

Co-authored-by: Attila Gazso <agazso@gmail.com>

src/pages/files/UploadActionBar.tsx

@@ -1,69 +1,88 @@
-import { Button, Typography } from '@material-ui/core'
-import { Clear } from '@material-ui/icons'
+import { Box, Grid } from '@material-ui/core'
 import { ReactElement } from 'react'
-import { Check, Layers, PlusSquare, RefreshCcw } from 'react-feather'
+import { ArrowLeft, Check, Layers, PlusSquare, X } from 'react-feather'
+import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import { SwarmButton } from '../../components/SwarmButton'
 
 interface Props {
-  canSelectStamp: boolean
-  hasSelectedStamp: boolean
+  step: number
   onUpload: () => void
-  onBuy: () => void
-  onSelect: () => void
   onCancel: () => void
-  onClearStamp: () => void
+  onGoBack: () => void
+  onProceed: () => void
   isUploading: boolean
+  hasStamp: boolean
+  uploadLabel: string
+  stampMode: 'BUY' | 'SELECT'
+  setStampMode: (mode: 'BUY' | 'SELECT') => void
 }
 
 export function UploadActionBar({
-  canSelectStamp,
-  hasSelectedStamp,
+  step,
   onUpload,
-  onBuy,
-  onSelect,
   onCancel,
-  onClearStamp,
+  onGoBack,
+  onProceed,
   isUploading,
+  hasStamp,
+  uploadLabel,
+  stampMode,
+  setStampMode,
 }: Props): ReactElement {
-  const showBuy = !hasSelectedStamp
-  const showSelect = canSelectStamp && !hasSelectedStamp
-  const showUpload = hasSelectedStamp
-  const showChange = canSelectStamp && hasSelectedStamp
+  if (step === 0) {
+    return (
+      <>
+        <Box mb={1}>
+          <ExpandableListItemActions>
+            <SwarmButton onClick={onProceed} iconType={Layers}>
+              Add Postage Stamp
+            </SwarmButton>
+            <SwarmButton onClick={onCancel} iconType={X} cancel>
+              Cancel
+            </SwarmButton>
+          </ExpandableListItemActions>
+        </Box>
+        <DocumentationText>You need a postage stamp to upload.</DocumentationText>
+      </>
+    )
+  }
 
-  return (
-    <>
+  if (step === 1) {
+    return (
+      <Grid container direction="row" justifyContent="space-between">
+        <ExpandableListItemActions>
+          {stampMode === 'SELECT' && (
+            <SwarmButton onClick={onProceed} iconType={Check} disabled={!hasStamp}>
+              Proceed With Selected Stamp
+            </SwarmButton>
+          )}
+          <SwarmButton onClick={onGoBack} iconType={ArrowLeft} cancel>
+            Back To Preview
+          </SwarmButton>
+        </ExpandableListItemActions>
+        <SwarmButton
+          onClick={() => setStampMode(stampMode === 'BUY' ? 'SELECT' : 'BUY')}
+          iconType={stampMode === 'BUY' ? Layers : PlusSquare}
+        >
+          {stampMode === 'BUY' ? 'Use Existing Stamp' : 'Buy New Stamp'}
+        </SwarmButton>
+      </Grid>
+    )
+  }
+
+  if (step === 2) {
+    return (
       <ExpandableListItemActions>
-        {showBuy ? (
-          <SwarmButton onClick={onBuy} iconType={PlusSquare}>
-            Buy New Postage Stamp
-          </SwarmButton>
-        ) : null}
-        {showSelect ? (
-          <SwarmButton onClick={onSelect} iconType={Layers}>
-            Use Existing Postage Stamp
-          </SwarmButton>
-        ) : null}
-        {showUpload ? (
-          <SwarmButton onClick={onUpload} iconType={Check} disabled={isUploading} loading={isUploading}>
-            Upload To Your Node
-          </SwarmButton>
-        ) : null}
-        {showChange ? (
-          <SwarmButton onClick={onClearStamp} iconType={RefreshCcw} disabled={isUploading}>
-            Change Postage Stamp
-          </SwarmButton>
-        ) : null}
-        <Button onClick={onCancel} variant="contained" startIcon={<Clear />}>
-          Cancel
-        </Button>
+        <SwarmButton onClick={onUpload} iconType={Check} disabled={isUploading} loading={isUploading}>
+          {uploadLabel}
+        </SwarmButton>
+        <SwarmButton onClick={onGoBack} iconType={ArrowLeft} disabled={isUploading} cancel>
+          Change Postage Stamp
+        </SwarmButton>
       </ExpandableListItemActions>
-      {showSelect ? (
-        <Typography>
-          You need a postage stamp to upload. Please refer to the official Bee documentation to understand how postage
-          stamps work.
-        </Typography>
-      ) : null}
-    </>
-  )
+    )
+  }
+
+  return <></>
 }