@xrpl-wallet-kit/react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import type { WalletAccount, WalletCapabilities, WalletManager, WalletMetadata, WalletSession } from "@xrpl-wallet-kit/core";
+import type { WalletButtonOptions, WalletModal, WalletUiConfig } from "@xrpl-wallet-kit/ui";
+export type WalletKitStatus = "disconnected" | "connecting" | "connected";
+export interface WalletKitContextValue {
+    manager: WalletManager;
+    account: WalletAccount | null;
+    session: WalletSession | null;
+    status: WalletKitStatus;
+    wallets: WalletMetadata[];
+    connect: (adapterId: string) => Promise<WalletSession>;
+    disconnect: () => Promise<void>;
+    openModal: () => void;
+    closeModal: () => void;
+    modal: WalletModal;
+}
+export interface WalletKitProviderProps {
+    manager: WalletManager;
+    children: React.ReactNode;
+    ui?: WalletUiConfig;
+}
+export type ReactWalletButtonProps = Partial<Omit<WalletButtonOptions, "manager" | "modal" | "target">>;
+export declare function WalletKitProvider(props: WalletKitProviderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function useWalletKit(): WalletKitContextValue;
+export declare function useWalletSession(): WalletSession | null;
+export declare function useWalletAccount(): WalletAccount | null;
+export declare function useWalletStatus(): WalletKitStatus;
+export declare function useWalletCapabilities(): WalletCapabilities | undefined;
+export declare function WalletButton(props: ReactWalletButtonProps): import("react/jsx-runtime").JSX.Element;
+export type XrplWalletContextValue = WalletKitContextValue;
+export type XrplWalletProviderProps = WalletKitProviderProps;
+export declare const XrplWalletProvider: typeof WalletKitProvider;
+export declare const useXrplWallet: typeof useWalletKit;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2F,MAAM,OAAO,CAAC;AAChH,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE7H,OAAO,KAAK,EAA0B,mBAAmB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEpH,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IACvD,UAAU,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,cAAc,CAAC;CACrB;AAED,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC;AAKxG,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,kDAmF9D;AAED,wBAAgB,YAAY,IAAI,qBAAqB,CAIpD;AAED,wBAAgB,gBAAgB,IAAI,aAAa,GAAG,IAAI,CAEvD;AAED,wBAAgB,gBAAgB,IAAI,aAAa,GAAG,IAAI,CAEvD;AAED,wBAAgB,eAAe,IAAI,eAAe,CAEjD;AAED,wBAAgB,qBAAqB,IAAI,kBAAkB,GAAG,SAAS,CAGtE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,sBAAsB,2CAwBzD;AAED,MAAM,MAAM,sBAAsB,GAAG,qBAAqB,CAAC;AAC3D,MAAM,MAAM,uBAAuB,GAAG,sBAAsB,CAAC;AAC7D,eAAO,MAAM,kBAAkB,0BAAoB,CAAC;AACpD,eAAO,MAAM,aAAa,qBAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createWalletButton, createWalletModal } from "@xrpl-wallet-kit/ui";
+const WalletKitContext = createContext(null);
+const useClientLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export function WalletKitProvider(props) {
+    const [session, setSession] = useState(props.manager.getSession());
+    const [status, setStatus] = useState(props.manager.getSession() ? "connected" : "disconnected");
+    const [modal, setModal] = useState(null);
+    const modalRef = useRef(null);
+    useClientLayoutEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const nextModal = createWalletModal({ manager: props.manager, ...props.ui });
+        modalRef.current = nextModal;
+        setModal(nextModal);
+        return () => {
+            nextModal.destroy();
+            if (modalRef.current === nextModal)
+                modalRef.current = null;
+            setModal(null);
+        };
+    }, [props.manager]);
+    useEffect(() => {
+        modalRef.current?.updateOptions(props.ui ?? {});
+    }, [props.ui]);
+    useEffect(() => {
+        const syncSession = () => setSession(props.manager.getSession());
+        const offConnecting = props.manager.on("connecting", () => setStatus("connecting"));
+        const offConnected = props.manager.on("connected", (event) => {
+            setSession(event.session ?? null);
+            setStatus("connected");
+        });
+        const offDisconnected = props.manager.on("disconnected", () => {
+            setSession(null);
+            setStatus("disconnected");
+        });
+        const offRestored = props.manager.on("session_restored", (event) => {
+            setSession(event.session);
+            setStatus("connected");
+        });
+        const offAccountChanged = props.manager.on("accountChanged", syncSession);
+        const offNetworkChanged = props.manager.on("networkChanged", syncSession);
+        const offStale = props.manager.on("session_stale", () => {
+            if (!props.manager.getSession())
+                setStatus("disconnected");
+            syncSession();
+        });
+        const offExpired = props.manager.on("session_expired", () => {
+            setSession(null);
+            setStatus("disconnected");
+        });
+        const offError = props.manager.on("error", () => {
+            if (!props.manager.getSession())
+                setStatus("disconnected");
+        });
+        void props.manager.autoReconnect();
+        return () => {
+            offConnecting();
+            offConnected();
+            offDisconnected();
+            offRestored();
+            offAccountChanged();
+            offNetworkChanged();
+            offStale();
+            offExpired();
+            offError();
+        };
+    }, [props.manager]);
+    const value = useMemo(() => {
+        if (!modal)
+            return null;
+        return {
+            manager: props.manager,
+            account: session?.account ?? null,
+            session,
+            status,
+            wallets: props.manager.getWallets(),
+            connect: (adapterId) => props.manager.connect(adapterId),
+            disconnect: () => props.manager.disconnect(),
+            openModal: () => modal.open(),
+            closeModal: () => modal.close(),
+            modal
+        };
+    }, [props.manager, session, status, modal]);
+    if (!value)
+        return null;
+    return _jsx(WalletKitContext.Provider, { value: value, children: props.children });
+}
+export function useWalletKit() {
+    const value = useContext(WalletKitContext);
+    if (!value)
+        throw new Error("useWalletKit must be used inside WalletKitProvider");
+    return value;
+}
+export function useWalletSession() {
+    return useWalletKit().session;
+}
+export function useWalletAccount() {
+    return useWalletKit().account;
+}
+export function useWalletStatus() {
+    return useWalletKit().status;
+}
+export function useWalletCapabilities() {
+    const { manager, session } = useWalletKit();
+    return session ? manager.getCapabilities(session.adapterId) : undefined;
+}
+export function WalletButton(props) {
+    const { manager, modal } = useWalletKit();
+    const targetRef = useRef(null);
+    const buttonRef = useRef(null);
+    useEffect(() => {
+        if (!targetRef.current)
+            return;
+        buttonRef.current = createWalletButton({
+            manager,
+            modal,
+            target: targetRef.current,
+            ...props
+        });
+        return () => {
+            buttonRef.current?.destroy();
+            buttonRef.current = null;
+        };
+    }, [manager, modal]);
+    useEffect(() => {
+        buttonRef.current?.updateOptions(props);
+    }, [props]);
+    return _jsx("span", { ref: targetRef });
+}
+export const XrplWalletProvider = WalletKitProvider;
+export const useXrplWallet = useWalletKit;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@xrpl-wallet-kit/react",
+  "version": "0.1.0",
+  "description": "React bindings and hooks for XRPL Wallet Kit.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@xrpl-wallet-kit/core": "0.1.0",
+    "@xrpl-wallet-kit/ui": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XRPDomains/xrpl-wallet-kit.git"
+  },
+  "homepage": "https://github.com/XRPDomains/xrpl-wallet-kit#readme",
+  "bugs": {
+    "url": "https://github.com/XRPDomains/xrpl-wallet-kit/issues"
+  },
+  "keywords": [
+    "xrpl",
+    "wallet",
+    "wallet-adapter",
+    "wallet-kit",
+    "xrp-ledger",
+    "web3"
+  ]
+}