@dropfi/xrpl-react 0.1.0

package/README.md

@@ -0,0 +1,100 @@
+# @dropfi/xrpl-react
+
+> React context + hook to access DropFi Wallet via `window.xrpl`
+
+## 🚀 Features
+
+-   ✅ Auto-initializes the injected `window.xrpl` provider (extension or mobile)
+-   ✅ Provides `connect`, `disconnect`, `sendTransaction`, and `signMessage`
+-   ✅ React hook with `address`, `network`, `connectedAccounts`, and more
+-   ✅ Compatible with both browser extension and mobile webview injection
+
+---
+
+## 📦 Installation
+
+```bash
+pnpm add @dropfi/xrpl-react
+```
+
+> Requires the DropFi wallet to be injected as `window.xrpl` — via Chrome extension or React Native WebView.
+
+---
+
+## 🧪 Usage
+
+```tsx
+import { XrplProvider, useXrplReact } from '@dropfi/xrpl-react';
+
+export default function App() {
+    return (
+        <XrplProvider>
+            <SomeComponent />
+        </XrplProvider>
+    );
+}
+
+function SomeComponent() {
+    const { address, connect, disconnect } = useXrplReact();
+
+    return (
+        <div>
+            <p>Address: {address ?? 'Not connected'}</p>
+            <button onClick={connect}>Connect Wallet</button>
+            <button onClick={disconnect}>Disconnect</button>
+        </div>
+    );
+}
+```
+
+---
+
+## 🔌 API
+
+### `useXrplReact()`
+
+Returns:
+
+```ts
+{
+  address: string | undefined;
+  wallet: string | undefined;
+  isConnected: boolean;
+  connect: () => Promise<string>;
+  disconnect: () => Promise<void>;
+  sendTransaction: (tx: any) => Promise<any>;
+  signMessage: (message: string) => Promise<{ signature: string }>;
+  changeNetwork: (network: string) => Promise<any>;
+  connectedAccounts: string[];
+  network: string;
+  isConnecting: boolean;
+  error: string | null;
+  initialized: boolean;
+}
+```
+
+---
+
+## 🎧 Events
+
+These are internally emitted and listened to:
+
+-   `xrpl_selectedAddress`
+-   `xrpl_connectedAccounts`
+-   `xrpl_selectedNetwork`
+-   `xrpl_disconnect`
+
+---
+
+## 🔒 Requirements
+
+Make sure your app runs in an environment where `window.xrpl` is available. This is injected by the DropFi wallet:
+
+-   Chrome extension
+-   React Native mobile app via WebView
+
+---
+
+## 📄 License
+
+MIT © [Travis Delly](https://github.com/dellybro)

package/dist/index.cjs

@@ -0,0 +1,124 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  XrplProvider: () => XrplProvider,
+  useXrplReact: () => useXrplReact
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var XrplContext = (0, import_react.createContext)(null);
+var XrplProvider = ({ config, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XrplContext.Provider, { value: { config }, children });
+};
+
+// src/useXrplReact.tsx
+var import_react2 = require("react");
+function useXrplReact() {
+  const context = (0, import_react2.useContext)(XrplContext);
+  if (!context) {
+    throw new Error("useXrplReact must be used within a XrplProvider");
+  }
+  const [address, setAddress] = (0, import_react2.useState)();
+  const [connectedAccounts, setConnectedAccounts] = (0, import_react2.useState)([]);
+  const [network, setNetwork] = (0, import_react2.useState)("mainnet");
+  const [initialized, setInitialized] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [isConnecting, setIsConnecting] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined" || !window.xrpl) return;
+    window.xrpl?.initialize?.();
+    setInitialized(true);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined" || !window.xrpl) return;
+    const handleSelectedNetwork = (val) => setNetwork(val);
+    const handleSelectedAddress = (val) => setAddress(val);
+    const handleConnectedAccounts = (val) => setConnectedAccounts(val);
+    window.xrpl?.on?.("xrpl_selectedNetwork", handleSelectedNetwork);
+    window.xrpl?.on?.("xrpl_selectedAddress", handleSelectedAddress);
+    window.xrpl?.on?.("xrpl_connectedAccounts", handleConnectedAccounts);
+    return () => {
+      window.xrpl?.off?.("xrpl_selectedNetwork", handleSelectedNetwork);
+      window.xrpl?.off?.("xrpl_selectedAddress", handleSelectedAddress);
+      window.xrpl?.off?.("xrpl_connectedAccounts", handleConnectedAccounts);
+    };
+  }, []);
+  const connect = async () => {
+    setIsConnecting(true);
+    try {
+      if (!window.xrpl) throw new Error("No window.xrpl found");
+      const response = await window.xrpl.connect();
+      setAddress(response);
+      return response;
+    } catch (err) {
+      setError(err.message);
+      throw err;
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+  const disconnect = async () => {
+    if (!window.xrpl) throw new Error("No window.xrpl found");
+    await window.xrpl.disconnect(address);
+    setAddress(void 0);
+  };
+  const sendTransaction = async (tx) => {
+    if (!window.xrpl) throw new Error("No window.xrpl found");
+    return await window.xrpl.sendTransaction(tx);
+  };
+  const changeNetwork = async (network2) => {
+    if (!window.xrpl) throw new Error("No window.xrpl found");
+    return await window.xrpl.changeNetwork(network2);
+  };
+  const signMessage = async (message) => {
+    if (!window.xrpl) throw new Error("No window.xrpl found");
+    const res = await window.xrpl.signMessage(message);
+    if (res.error) throw new Error(res.error);
+    return res;
+  };
+  return (0, import_react2.useMemo)(
+    () => ({
+      address,
+      wallet: address,
+      isConnected: connectedAccounts.includes(address || ""),
+      connect,
+      disconnect,
+      sendTransaction,
+      changeNetwork,
+      connectedAccounts,
+      network,
+      error,
+      isConnecting,
+      signMessage,
+      initialized
+    }),
+    [address, connectedAccounts, network, error, isConnecting, initialized]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  XrplProvider,
+  useXrplReact
+});

package/dist/index.d.mts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface XrplProviderConfig {
+}
+interface XrplProviderProps {
+    config?: XrplProviderConfig;
+    children: React.ReactNode;
+}
+declare const XrplProvider: React.FC<XrplProviderProps>;
+
+declare function useXrplReact(): {
+    address: string | undefined;
+    wallet: string | undefined;
+    isConnected: boolean;
+    connect: () => Promise<string>;
+    disconnect: () => Promise<void>;
+    sendTransaction: (tx: any) => Promise<any>;
+    changeNetwork: (network: string) => Promise<any>;
+    connectedAccounts: string[];
+    network: string;
+    error: string | null;
+    isConnecting: boolean;
+    signMessage: (message: string) => Promise<{
+        signature: string;
+        error?: string;
+    }>;
+    initialized: boolean;
+};
+
+export { XrplProvider, useXrplReact };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface XrplProviderConfig {
+}
+interface XrplProviderProps {
+    config?: XrplProviderConfig;
+    children: React.ReactNode;
+}
+declare const XrplProvider: React.FC<XrplProviderProps>;
+
+declare function useXrplReact(): {
+    address: string | undefined;
+    wallet: string | undefined;
+    isConnected: boolean;
+    connect: () => Promise<string>;
+    disconnect: () => Promise<void>;
+    sendTransaction: (tx: any) => Promise<any>;
+    changeNetwork: (network: string) => Promise<any>;
+    connectedAccounts: string[];
+    network: string;
+    error: string | null;
+    isConnecting: boolean;
+    signMessage: (message: string) => Promise<{
+        signature: string;
+        error?: string;
+    }>;
+    initialized: boolean;
+};
+
+export { XrplProvider, useXrplReact };

package/dist/index.js

@@ -0,0 +1,132 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  XrplProvider: () => XrplProvider,
+  useXrplReact: () => useXrplReact
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var XrplContext = (0, import_react.createContext)(null);
+var XrplProvider = ({ config, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XrplContext.Provider, { value: { config }, children });
+};
+
+// src/useXrplReact.tsx
+var import_react2 = require("react");
+function useXrplReact() {
+  const context = (0, import_react2.useContext)(XrplContext);
+  if (!context) {
+    throw new Error("useXrplReact must be used within a XrplProvider");
+  }
+  const [address, setAddress] = (0, import_react2.useState)();
+  const [connectedAccounts, setConnectedAccounts] = (0, import_react2.useState)([]);
+  const [network, setNetwork] = (0, import_react2.useState)("mainnet");
+  const [initialized, setInitialized] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const [isConnecting, setIsConnecting] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined" || !window.xrpl)
+      return;
+    window.xrpl?.initialize?.();
+    setInitialized(true);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined" || !window.xrpl)
+      return;
+    const handleSelectedNetwork = (val) => setNetwork(val);
+    const handleSelectedAddress = (val) => setAddress(val);
+    const handleConnectedAccounts = (val) => setConnectedAccounts(val);
+    window.xrpl?.on?.("xrpl_selectedNetwork", handleSelectedNetwork);
+    window.xrpl?.on?.("xrpl_selectedAddress", handleSelectedAddress);
+    window.xrpl?.on?.("xrpl_connectedAccounts", handleConnectedAccounts);
+    return () => {
+      window.xrpl?.off?.("xrpl_selectedNetwork", handleSelectedNetwork);
+      window.xrpl?.off?.("xrpl_selectedAddress", handleSelectedAddress);
+      window.xrpl?.off?.("xrpl_connectedAccounts", handleConnectedAccounts);
+    };
+  }, []);
+  const connect = async () => {
+    setIsConnecting(true);
+    try {
+      if (!window.xrpl)
+        throw new Error("No window.xrpl found");
+      const response = await window.xrpl.connect();
+      setAddress(response);
+      return response;
+    } catch (err) {
+      setError(err.message);
+      throw err;
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+  const disconnect = async () => {
+    if (!window.xrpl)
+      throw new Error("No window.xrpl found");
+    await window.xrpl.disconnect(address);
+    setAddress(void 0);
+  };
+  const sendTransaction = async (tx) => {
+    if (!window.xrpl)
+      throw new Error("No window.xrpl found");
+    return await window.xrpl.sendTransaction(tx);
+  };
+  const changeNetwork = async (network2) => {
+    if (!window.xrpl)
+      throw new Error("No window.xrpl found");
+    return await window.xrpl.changeNetwork(network2);
+  };
+  const signMessage = async (message) => {
+    if (!window.xrpl)
+      throw new Error("No window.xrpl found");
+    const res = await window.xrpl.signMessage(message);
+    if (res.error)
+      throw new Error(res.error);
+    return res;
+  };
+  return (0, import_react2.useMemo)(
+    () => ({
+      address,
+      wallet: address,
+      isConnected: connectedAccounts.includes(address || ""),
+      connect,
+      disconnect,
+      sendTransaction,
+      changeNetwork,
+      connectedAccounts,
+      network,
+      error,
+      isConnecting,
+      signMessage,
+      initialized
+    }),
+    [address, connectedAccounts, network, error, isConnecting, initialized]
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  XrplProvider,
+  useXrplReact
+});

package/dist/index.mjs

@@ -0,0 +1,96 @@
+// src/provider.tsx
+import { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var XrplContext = createContext(null);
+var XrplProvider = ({ config, children }) => {
+  return /* @__PURE__ */ jsx(XrplContext.Provider, { value: { config }, children });
+};
+
+// src/useXrplReact.tsx
+import { useContext as useContext2, useEffect, useMemo, useState } from "react";
+function useXrplReact() {
+  const context = useContext2(XrplContext);
+  if (!context) {
+    throw new Error("useXrplReact must be used within a XrplProvider");
+  }
+  const [address, setAddress] = useState();
+  const [connectedAccounts, setConnectedAccounts] = useState([]);
+  const [network, setNetwork] = useState("mainnet");
+  const [initialized, setInitialized] = useState(false);
+  const [error, setError] = useState(null);
+  const [isConnecting, setIsConnecting] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.xrpl) return;
+    window.xrpl?.initialize?.();
+    setInitialized(true);
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.xrpl) return;
+    const handleSelectedNetwork = (val) => setNetwork(val);
+    const handleSelectedAddress = (val) => setAddress(val);
+    const handleConnectedAccounts = (val) => setConnectedAccounts(val);
+    window.xrpl?.on?.("xrpl_selectedNetwork", handleSelectedNetwork);
+    window.xrpl?.on?.("xrpl_selectedAddress", handleSelectedAddress);
+    window.xrpl?.on?.("xrpl_connectedAccounts", handleConnectedAccounts);
+    return () => {
+      window.xrpl?.off?.("xrpl_selectedNetwork", handleSelectedNetwork);
+      window.xrpl?.off?.("xrpl_selectedAddress", handleSelectedAddress);
+      window.xrpl?.off?.("xrpl_connectedAccounts", handleConnectedAccounts);
+    };
+  }, []);
+  const connect = async () => {
+    setIsConnecting(true);
+    try {
+      if (!window.xrpl) throw new Error("No window.xrpl found");
+      const response = await window.xrpl.connect();
+      setAddress(response);
+      return response;
+    } catch (err) {
+      setError(err.message);
+      throw err;
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+  const disconnect = async () => {
+    if (!window.xrpl) throw new Error("No window.xrpl found");
+    await window.xrpl.disconnect(address);
+    setAddress(void 0);
+  };
+  const sendTransaction = async (tx) => {
+    if (!window.xrpl) throw new Error("No window.xrpl found");
+    return await window.xrpl.sendTransaction(tx);
+  };
+  const changeNetwork = async (network2) => {
+    if (!window.xrpl) throw new Error("No window.xrpl found");
+    return await window.xrpl.changeNetwork(network2);
+  };
+  const signMessage = async (message) => {
+    if (!window.xrpl) throw new Error("No window.xrpl found");
+    const res = await window.xrpl.signMessage(message);
+    if (res.error) throw new Error(res.error);
+    return res;
+  };
+  return useMemo(
+    () => ({
+      address,
+      wallet: address,
+      isConnected: connectedAccounts.includes(address || ""),
+      connect,
+      disconnect,
+      sendTransaction,
+      changeNetwork,
+      connectedAccounts,
+      network,
+      error,
+      isConnecting,
+      signMessage,
+      initialized
+    }),
+    [address, connectedAccounts, network, error, isConnecting, initialized]
+  );
+}
+export {
+  XrplProvider,
+  useXrplReact
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+    "name": "@dropfi/xrpl-react",
+    "version": "0.1.0",
+    "description": "React hooks + provider for DropFi XRPL wallet (extension & mobile)",
+    "main": "dist/index.cjs",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.cjs"
+        }
+    },
+    "keywords": [
+        "xrpl",
+        "react",
+        "wallet",
+        "dropfi",
+        "provider",
+        "hook"
+    ],
+    "author": "Travis Delly",
+    "license": "MIT",
+    "scripts": {
+        "build": "tsup"
+    },
+    "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.23",
+        "tsup": "^8.5.0",
+        "typescript": "^5.8.3"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}