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/providers/Bee.tsx

@@ -3,6 +3,7 @@ import type {
   Health,
   LastChequesResponse,
   NodeAddresses,
+  NodesInfo,
   Peer,
   Topology,
 } from '@ethersphere/bee-js'
@@ -35,6 +36,7 @@ interface ContextInterface {
   apiHealth: boolean
   debugApiHealth: Health | null
   nodeAddresses: NodeAddresses | null
+  nodeInfo: NodesInfo | null
   topology: Topology | null
   chequebookAddress: ChequebookAddressResponse | null
   peers: Peer[] | null
@@ -72,6 +74,7 @@ const initialValues: ContextInterface = {
   apiHealth: false,
   debugApiHealth: null,
   nodeAddresses: null,
+  nodeInfo: null,
   topology: null,
   chequebookAddress: null,
   peers: null,
@@ -98,6 +101,7 @@ interface Props {
 function getStatus(
   debugApiHealth: Health | null,
   nodeAddresses: NodeAddresses | null,
+  nodeInfo: NodesInfo | null,
   apiHealth: boolean,
   topology: Topology | null,
   chequebookAddress: ChequebookAddressResponse | null,
@@ -105,7 +109,7 @@ function getStatus(
   error: Error | null,
 ): Status {
   // FIXME: `devMode` is a temporary workaround to be able to develop with only one node
-  const devMode = startedInDevMode || Boolean(process.env.REACT_APP_DEV_MODE)
+  const devMode = startedInDevMode || Boolean(process.env.REACT_APP_DEV_MODE) || nodeInfo?.beeMode === 'dev'
   const status = {
     version: Boolean(
       debugApiHealth &&
@@ -132,6 +136,7 @@ export function Provider({ children }: Props): ReactElement {
   const [apiHealth, setApiHealth] = useState<boolean>(false)
   const [debugApiHealth, setDebugApiHealth] = useState<Health | null>(null)
   const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
+  const [nodeInfo, setNodeInfo] = useState<NodesInfo | null>(null)
   const [topology, setNodeTopology] = useState<Topology | null>(null)
   const [chequebookAddress, setChequebookAddress] = useState<ChequebookAddressResponse | null>(null)
   const [peers, setPeers] = useState<Peer[] | null>(null)
@@ -165,6 +170,7 @@ export function Provider({ children }: Props): ReactElement {
     setDebugApiHealth(null)
     setNodeAddresses(null)
     setNodeTopology(null)
+    setNodeInfo(null)
     setPeers(null)
     setChequebookAddress(null)
     setChequebookBalance(null)
@@ -241,6 +247,12 @@ export function Provider({ children }: Props): ReactElement {
           .then(setNodeAddresses)
           .catch(() => setNodeAddresses(null)),
 
+        // NodeInfo
+        beeDebugApi
+          .getNodeInfo()
+          .then(setNodeInfo)
+          .catch(() => setNodeInfo(null)),
+
         // Network Topology
         beeDebugApi
           .getTopology()
@@ -312,6 +324,7 @@ export function Provider({ children }: Props): ReactElement {
         status: getStatus(
           debugApiHealth,
           nodeAddresses,
+          nodeInfo,
           apiHealth,
           topology,
           chequebookAddress,
@@ -333,6 +346,7 @@ export function Provider({ children }: Props): ReactElement {
         apiHealth,
         debugApiHealth,
         nodeAddresses,
+        nodeInfo,
         topology,
         chequebookAddress,
         peers,

src/providers/Feeds.tsx

@@ -0,0 +1,43 @@
+import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react'
+
+export type IdentityType = 'V3' | 'PRIVATE_KEY'
+
+export interface Identity {
+  uuid: string
+  name: string
+  feedHash?: string
+  identity: string
+  address: string
+  type: IdentityType
+}
+
+interface ContextInterface {
+  identities: Identity[]
+  setIdentities: (identities: Identity[]) => void
+}
+
+const initialValues: ContextInterface = {
+  identities: [],
+  setIdentities: () => {}, // eslint-disable-line
+}
+
+export const Context = createContext<ContextInterface>(initialValues)
+export const Consumer = Context.Consumer
+
+interface Props {
+  children: ReactChild
+}
+
+export function Provider({ children }: Props): ReactElement {
+  const [identities, setIdentities] = useState<Identity[]>(initialValues.identities)
+
+  useEffect(() => {
+    try {
+      setIdentities(JSON.parse(localStorage.getItem('feeds') || '[]'))
+    } catch {
+      setIdentities([])
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  return <Context.Provider value={{ identities, setIdentities }}>{children}</Context.Provider>
+}

src/providers/File.tsx

@@ -1,14 +1,24 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+
 import { createContext, ReactChild, ReactElement, useState } from 'react'
 import { SwarmFile } from '../utils/SwarmFile'
 
+export type UploadOrigin = { origin: 'UPLOAD' | 'FEED'; uuid?: string }
+
+export const defaultUploadOrigin: UploadOrigin = { origin: 'UPLOAD' }
+
 interface ContextInterface {
   files: SwarmFile[]
   setFiles: (files: SwarmFile[]) => void
+  uploadOrigin: UploadOrigin
+  setUploadOrigin: (uploadOrigin: UploadOrigin) => void
 }
 
 const initialValues: ContextInterface = {
   files: [],
-  setFiles: () => {}, // eslint-disable-line
+  setFiles: () => {},
+  uploadOrigin: defaultUploadOrigin,
+  setUploadOrigin: () => {},
 }
 
 export const Context = createContext<ContextInterface>(initialValues)
@@ -20,6 +30,7 @@ interface Props {
 
 export function Provider({ children }: Props): ReactElement {
   const [files, setFiles] = useState<SwarmFile[]>(initialValues.files)
+  const [uploadOrigin, setUploadOrigin] = useState<UploadOrigin>(initialValues.uploadOrigin)
 
-  return <Context.Provider value={{ files, setFiles }}>{children}</Context.Provider>
+  return <Context.Provider value={{ files, setFiles, uploadOrigin, setUploadOrigin }}>{children}</Context.Provider>
 }