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 ( +
+
+ libp2p logo +

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...

-
+ ) }