diff --git a/js-peer/src/components/booting.tsx b/js-peer/src/components/booting.tsx
new file mode 100644
index 00000000..358b967d
--- /dev/null
+++ b/js-peer/src/components/booting.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import Image from 'next/image'
+import Spinner from './spinner'
+
+interface Props {
+ error?: string
+}
+
+export function Booting({ error }: Props) {
+ return (
+
+
+
+
Initializing libp2p peer
+ {!error && (
+ <>
+
Connecting to bootstrap nodes...
+
+ >
+ )}
+ {error && error !== '' &&
{error}
}
+ {error && error === '' &&
Unknown error
}
+
+
+ )
+}
diff --git a/js-peer/src/context/ctx.tsx b/js-peer/src/context/ctx.tsx
index 1bb2ac57..44857510 100644
--- a/js-peer/src/context/ctx.tsx
+++ b/js-peer/src/context/ctx.tsx
@@ -5,6 +5,7 @@ import { startLibp2p } from '../lib/libp2p'
import { ChatProvider } from './chat-ctx'
import { PubSub } from '@libp2p/interface'
import { Identify } from '@libp2p/identify'
+import { Booting } from '@/components/booting'
type Libp2pType = Libp2p<{ pubsub: PubSub; identify: Identify }>
@@ -21,6 +22,7 @@ interface WrapperProps {
let loaded = false
export function AppWrapper({ children }: WrapperProps) {
const [libp2p, setLibp2p] = useState()
+ const [error, setError] = useState('')
useEffect(() => {
const init = async () => {
@@ -35,6 +37,7 @@ export function AppWrapper({ children }: WrapperProps) {
setLibp2p(libp2p)
} catch (e) {
console.error('failed to start libp2p', e)
+ setError(`failed to start libp2p ${e}`)
}
}
@@ -43,9 +46,7 @@ export function AppWrapper({ children }: WrapperProps) {
if (!libp2p) {
return (
-
-
Initializing libp2p peer...
-
+
)
}