@peerbit/react 0.0.2

package/src/usePeer.tsx

@@ -0,0 +1,270 @@
+import React, { useContext } from "react";
+import { multiaddr, Multiaddr } from "@multiformats/multiaddr";
+import { Peerbit } from "peerbit";
+import { webSockets } from "@libp2p/websockets";
+import { mplex } from "@libp2p/mplex";
+import { getFreeKeypair, getTabId, inIframe } from "./utils.js";
+import { resolveBootstrapAddresses } from "@peerbit/network-utils";
+import { noise } from "@dao-xyz/libp2p-noise";
+import { v4 as uuid } from "uuid";
+import { Ed25519Keypair } from "@peerbit/crypto";
+import { FastMutex } from "./lockstorage.js";
+import { serialize, deserialize } from "@dao-xyz/borsh";
+import { waitFor } from "@peerbit/time";
+import sodium from "libsodium-wrappers";
+import * as filters from "@libp2p/websockets/filters";
+import { useMount } from "./useMount.js";
+export type ConnectionStatus =
+    | "disconnected"
+    | "connected"
+    | "connecting"
+    | "failed";
+interface IPeerContext {
+    peer: Peerbit | undefined;
+    promise: Promise<void> | undefined;
+    loading: boolean;
+    status: ConnectionStatus;
+}
+
+if (!window.name) {
+    window.name = uuid();
+}
+
+interface KeypairMessage {
+    type: "keypair";
+    bytes: Uint8Array;
+}
+export const subscribeToKeypairChange = (
+    onChange: (keypair: Ed25519Keypair) => any
+) => {
+    window.onmessage = (c: MessageEvent) => {
+        if ((c.data as KeypairMessage).type == "keypair") {
+            onChange(
+                deserialize((c.data as KeypairMessage).bytes, Ed25519Keypair)
+            );
+        }
+    };
+};
+
+export const submitKeypairChange = (
+    element: HTMLIFrameElement,
+    keypair: Ed25519Keypair,
+    origin: string
+) => {
+    element.contentWindow!.postMessage(
+        { type: "keypair", bytes: serialize(keypair) } as KeypairMessage,
+        origin
+    );
+};
+
+let keypairMessages: Ed25519Keypair[] = [];
+subscribeToKeypairChange((keypair) => {
+    console.log("got keypair!", keypair);
+    keypairMessages.push(keypair);
+});
+
+export const PeerContext = React.createContext<IPeerContext>({} as any);
+export const usePeer = () => useContext(PeerContext);
+export const PeerProvider = ({
+    network,
+    bootstrap,
+    children,
+    inMemory,
+    keypair,
+    waitForConnnected,
+    waitForKeypairInIFrame,
+}: {
+    network: "local" | "remote";
+    inMemory?: boolean;
+    waitForConnnected?: boolean;
+    keypair?: Ed25519Keypair;
+    waitForKeypairInIFrame?: boolean;
+    bootstrap?: (Multiaddr | string)[];
+    children: JSX.Element;
+}) => {
+    const [peer, setPeer] = React.useState<Peerbit | undefined>(undefined);
+    const [promise, setPromise] = React.useState<Promise<void> | undefined>(
+        undefined
+    );
+
+    const [loading, setLoading] = React.useState<boolean>(false);
+    const [connectionState, setConnectionState] =
+        React.useState<ConnectionStatus>("disconnected");
+    const memo = React.useMemo<IPeerContext>(
+        () => ({
+            peer,
+            promise,
+            loading,
+            connectionState,
+            status: connectionState,
+        }),
+        [
+            loading,
+            !!promise,
+            connectionState,
+            peer?.identity?.publicKey.toString(),
+        ]
+    );
+
+    useMount(() => {
+        setLoading(true);
+        const fn = async (
+            keypair: Ed25519Keypair = keypairMessages[
+                keypairMessages.length - 1
+            ]
+        ) => {
+            await sodium.ready;
+
+            if (!keypair && waitForKeypairInIFrame && inIframe()) {
+                await waitFor(
+                    () =>
+                        (keypair = keypairMessages[keypairMessages.length - 1])
+                );
+            }
+
+            if (
+                keypair &&
+                keypairMessages[keypairMessages.length - 1] &&
+                keypairMessages[keypairMessages.length - 1].equals(keypair)
+            ) {
+                console.log(
+                    "Creating client from identity sent from parent window: " +
+                        keypair.publicKey.hashcode()
+                );
+            } else {
+                if (!keypair) {
+                    console.log("Generating new keypair for client");
+                } else {
+                    console.log(
+                        "Keypair missmatch with latest keypair message",
+                        keypairMessages.map((x) => x.publicKey.hashcode()),
+                        keypair.publicKey.hashcode()
+                    );
+                }
+            }
+
+            if (peer) {
+                await peer.stop();
+                setPeer(undefined);
+            }
+
+            const nodeId =
+                keypair ||
+                (
+                    await getFreeKeypair(
+                        "",
+                        new FastMutex({ clientId: getTabId(), timeout: 1000 }),
+                        undefined,
+                        true // reuse keypairs from same tab, (force release)
+                    )
+                ).key;
+
+            // We create a new directrory to make tab to tab communication go smoothly
+            const newPeer = await Peerbit.create({
+                libp2p: {
+                    addresses: {
+                        listen: [
+                            /*    '/webrtc' */
+                        ],
+                    },
+                    connectionEncryption: [noise()],
+                    peerId: await nodeId.toPeerId(), //, having the same peer accross broswers does not work, only one tab will be recognized by other peers
+                    connectionManager: {
+                        maxConnections: 100,
+                        minConnections: 0,
+                    },
+                    streamMuxers: [mplex()],
+                    ...(network === "local"
+                        ? {
+                              connectionGater: {
+                                  denyDialMultiaddr: () => {
+                                      // by default we refuse to dial local addresses from the browser since they
+                                      // are usually sent by remote peers broadcasting undialable multiaddrs but
+                                      // here we are explicitly connecting to a local node so do not deny dialing
+                                      // any discovered address
+                                      return false;
+                                  },
+                              },
+                              transports: [
+                                  // Add websocket impl so we can connect to "unsafe" ws (production only allows wss)
+                                  webSockets({
+                                      filter: filters.all,
+                                  }),
+                                  /*            circuitRelayTransport({ discoverRelays: 1 }),
+                 webRTC(), */
+                              ],
+                          }
+                        : {
+                              connectionGater: {
+                                  denyDialMultiaddr: () => {
+                                      // by default we refuse to dial local addresses from the browser since they
+                                      // are usually sent by remote peers broadcasting undialable multiaddrs but
+                                      // here we are explicitly connecting to a local node so do not deny dialing
+                                      // any discovered address
+                                      return false;
+                                  },
+                              },
+                              transports: [
+                                  webSockets({ filter: filters.all }),
+                                  /*             circuitRelayTransport({ discoverRelays: 1 }),
+                  webRTC(), */
+                              ],
+                          }),
+                },
+                directory: !inMemory ? "./repo" : undefined,
+                limitSigning: true,
+            });
+
+            setConnectionState("connecting");
+
+            // Resolve bootstrap nodes async (we want to return before this is done)
+            const connectFn = async () => {
+                try {
+                    const addresses = await (bootstrap
+                        ? Promise.resolve(bootstrap)
+                        : resolveBootstrapAddresses(network));
+                    if (addresses && addresses?.length > 0) {
+                        try {
+                            await Promise.all(
+                                addresses
+                                    .map((a) =>
+                                        typeof a === "string" ? multiaddr(a) : a
+                                    )
+                                    .map((a) => newPeer.dial(a))
+                            );
+                            setConnectionState("connected");
+                        } catch (error) {
+                            console.error(
+                                "Failed to resolve relay node. Please come back later or start the demo locally"
+                            );
+                            setConnectionState("failed");
+                            throw error;
+                        }
+                    } else {
+                        console.error("No addresses to connect to");
+                        setConnectionState("failed");
+                    }
+                } catch (err: any) {
+                    console.error(
+                        "Failed to resolve relay addresses. " + err?.message
+                    );
+                    setConnectionState("failed");
+                }
+            };
+
+            const promise = connectFn();
+
+            // Make sure data flow as expected between tabs and windows locally (offline states)
+
+            if (waitForConnnected) {
+                await promise;
+            }
+
+            setPeer(newPeer);
+            setLoading(false);
+        };
+        setPromise(fn(keypair));
+    });
+
+    return <PeerContext.Provider value={memo}>{children}</PeerContext.Provider>;
+};

package/src/utils.ts

@@ -0,0 +1,116 @@
+import { serialize, deserialize } from "@dao-xyz/borsh";
+import { Ed25519Keypair, toBase64, fromBase64 } from "@peerbit/crypto";
+import { FastMutex } from "./lockstorage";
+import { v4 as uuid } from "uuid";
+import sodium from "libsodium-wrappers";
+
+export const getTabId = () => {
+    const idFromStorage = sessionStorage.getItem("TAB_ID");
+    if (idFromStorage) {
+        return idFromStorage;
+    } else {
+        const id = uuid(); // generate unique UUID
+        sessionStorage.setItem("TAB_ID", id);
+        return id;
+    }
+};
+
+const ID_COUNTER_KEY = "idc/";
+
+const getKeyId = (prefix: string, id: number) => prefix + "/" + id;
+
+export const releaseKey = (
+    path: string,
+    lock: FastMutex = new FastMutex({ clientId: getTabId() })
+) => {
+    lock.release(path);
+};
+
+export const getFreeKeypair = async (
+    id: string = "",
+    lock: FastMutex = new FastMutex({ clientId: getTabId() }),
+    lockCondition: () => boolean = () => true,
+    releaseLockIfSameId?: boolean
+) => {
+    await sodium.ready;
+    const idCounterKey = ID_COUNTER_KEY + id;
+    await lock.lock(idCounterKey, () => true);
+    let idCounter = JSON.parse(localStorage.getItem(idCounterKey) || "0");
+    for (let i = 0; i < 10000; i++) {
+        const key = getKeyId(id, i);
+        let lockedInfo = lock.getLockedInfo(key);
+        if (lockedInfo) {
+            if (lockedInfo === lock.clientId && releaseLockIfSameId) {
+                await lock.release(key); // Release lock
+            } else {
+                continue;
+            }
+        }
+        console.log("aquire id at", i);
+        await lock.lock(key, lockCondition);
+
+        localStorage.setItem(
+            idCounterKey,
+            JSON.stringify(Math.max(idCounter, i + 1))
+        );
+        await lock.release(idCounterKey);
+        return {
+            path: key,
+            key: await getKeypair(key),
+        };
+    }
+    throw new Error("Failed to resolve key");
+};
+
+export const getAllKeyPairs = async (id: string = "") => {
+    const idCounterKey = ID_COUNTER_KEY + id;
+    const counter = JSON.parse(localStorage.getItem(idCounterKey) || "0");
+    let ret: Ed25519Keypair[] = [];
+    for (let i = 0; i < counter; i++) {
+        const key = getKeyId(id, i);
+        const kp = loadKeypair(key);
+        if (kp) {
+            ret.push(kp);
+        }
+    }
+    return ret;
+};
+
+let _getKeypair: Promise<any>;
+
+export const getKeypair = async (keyName: string): Promise<Ed25519Keypair> => {
+    await _getKeypair;
+    const fn = async () => {
+        let keypair: Ed25519Keypair | undefined = loadKeypair(keyName);
+        if (keypair) {
+            return keypair;
+        }
+
+        keypair = await Ed25519Keypair.create();
+        saveKeypair(keyName, keypair);
+        return keypair;
+    };
+    _getKeypair = fn();
+    return _getKeypair;
+};
+
+const saveKeypair = (path: string, key: Ed25519Keypair) => {
+    const str = toBase64(serialize(key));
+    localStorage.setItem("_keys/" + path, str);
+};
+
+const loadKeypair = (path: string) => {
+    let item = localStorage.getItem("_keys/" + path);
+    if (!item) {
+        return;
+    }
+    return deserialize(fromBase64(item), Ed25519Keypair);
+};
+
+export const inIframe = () => {
+    try {
+        return window.self !== window.top;
+    } catch (e) {
+        return true;
+    }
+};