diff --git a/be/config.yaml b/be/config.yaml index 1e2b515..9418879 100644 --- a/be/config.yaml +++ b/be/config.yaml @@ -2,7 +2,7 @@ libp2p: listenMultiaddrs: - - /ip4/127.0.0.1/tcp/8080/ws + - /ip4/0.0.0.0/tcp/8080/ws announceMultiaddrs: - /ip4/127.0.0.1/tcp/8080/ws # - /dns4/example.com/tcp/443/wss Example of multiaddr with Secure WebSockets diff --git a/be/src/start-libp2p-relay.ts b/be/src/start-libp2p-relay.ts index 7a71a34..2d453c2 100644 --- a/be/src/start-libp2p-relay.ts +++ b/be/src/start-libp2p-relay.ts @@ -83,7 +83,7 @@ export async function startLibp2pRelay({ const peerMessageExchange = new PeerMessageExchangeProtocol({ protocolId: "/icod2/relay-peer-message-exchange/1.0.0", }); - peerMessageExchange.initialize(libp2p); + peerMessageExchange.initialize(libp2p, { skipHandleInitialization: false }); logger.info( { peerId, shortPeerId: shortenPeerId(peerId) }, diff --git a/fe/index.html b/fe/index.html index da9e8e7..fec9267 100644 --- a/fe/index.html +++ b/fe/index.html @@ -26,11 +26,63 @@ body { margin: 0; } + + #root { + min-height: 100vh; + } + + .preload { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100vh; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif; + color: #c089ff; + background: transparent; + opacity: 0; + animation: preload-fade 1500ms ease forwards; + animation-delay: 750ms; + } + + .preload__spinner { + width: 48px; + height: 48px; + border: 4px solid rgba(192, 137, 255, 0.25); + border-top-color: #c089ff; + border-radius: 50%; + animation: preload-spin 1s linear infinite; + margin-bottom: 12px; + } + + @keyframes preload-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + @keyframes preload-fade { + from { + opacity: 0; + } + to { + opacity: 1; + } + } Stashcrate -
+
+
+ +

Loading Stashcrate...

+
+
diff --git a/fe/src/App.tsx b/fe/src/App.tsx index b264f16..955e6aa 100644 --- a/fe/src/App.tsx +++ b/fe/src/App.tsx @@ -1,5 +1,5 @@ import { Theme } from "@radix-ui/themes"; -import { type FC, lazy, useEffect, useState } from "react"; +import { type FC, useEffect, useState } from "react"; import { createBrowserRouter, Link, @@ -9,22 +9,6 @@ import { import Welcome from "./components/Box/sub-pages/Welcome"; import { MainLayout } from "./components/layout/MainLayout"; -const LazyUnlockBox = lazy( - () => import("./components/Box/sub-pages/RestoreBoxes/LockedBox"), -); -const LazyLockBox = lazy(() => - import("./components/Box/sub-pages/CreationBoxes").then((mod) => ({ - default: mod.RootLockBox, - })), -); -const LazyComponentsDemo = lazy(() => import("./components/ComponentsDemo")); -const LazyCryptoPlayground = lazy( - () => import("./components/CryptoPlayground"), -); -const LazyDecodePlayground = lazy( - () => import("./components/DecodePlayground"), -); - function useSystemTheme() { const [theme, setTheme] = useState<"light" | "dark">("light"); @@ -83,23 +67,40 @@ const router = createBrowserRouter([ children: [ { path: "/crypto-poc", - Component: LazyCryptoPlayground, + async lazy() { + const mod = await import("./components/CryptoPlayground"); + return { Component: mod.default }; + }, }, { path: "/components-demo", - Component: LazyComponentsDemo, + async lazy() { + const mod = await import("./components/ComponentsDemo"); + return { Component: mod.default }; + }, }, { path: "/decode-poc", - Component: LazyDecodePlayground, + async lazy() { + const mod = await import("./components/DecodePlayground"); + return { Component: mod.default }; + }, }, { path: "/unlock-box/:roomToken?", - Component: LazyUnlockBox, + async lazy() { + const mod = await import( + "./components/Box/sub-pages/RestoreBoxes/LockedBox" + ); + return { Component: mod.default }; + }, }, { path: "/lock-box/:roomToken?", - Component: LazyLockBox, + async lazy() { + const mod = await import("./components/Box/sub-pages/CreationBoxes"); + return { Component: mod.RootLockBox }; + }, }, { path: "/", diff --git a/fe/src/components/Box/sub-pages/Welcome.tsx b/fe/src/components/Box/sub-pages/Welcome.tsx index 01f8a98..59b6036 100644 --- a/fe/src/components/Box/sub-pages/Welcome.tsx +++ b/fe/src/components/Box/sub-pages/Welcome.tsx @@ -1,6 +1,6 @@ import type React from "react"; import type { ReactNode } from "react"; -import { Link } from "react-router-dom"; +import { NavLink } from "react-router-dom"; import { Button } from "@/ui/Button"; import { Typography } from "@/ui/Typography"; @@ -16,31 +16,37 @@ const Welcome: React.FC = () => { <>

Start by creating a box. You’ll:

} buttonSlot={ - - - + + {({ isPending, isTransitioning }) => ( + + )} + } /> {

} buttonSlot={ - - - + + {({ isPending, isTransitioning }) => ( + + )} + } /> diff --git a/libs/protocols/src/peers-message-exchange-protocol.ts b/libs/protocols/src/peers-message-exchange-protocol.ts index 2b62432..6c44a65 100644 --- a/libs/protocols/src/peers-message-exchange-protocol.ts +++ b/libs/protocols/src/peers-message-exchange-protocol.ts @@ -60,7 +60,7 @@ export class PeerMessageExchangeProtocol< this.libp2p = libp2p; - if (skipHandleInitialization) { + if (skipHandleInitialization === false) { registerProtoHandle(this.protocolId, libp2p, (message, peerId) => { const jsonMessage = parseJsonSafely(message); if (!jsonMessage) return;