@dropfi/xrpl-react 0.1.5 → 0.1.7

package/README.md

@@ -4,10 +4,10 @@
 
 ## 🚀 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
+- ✅ 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
 
 ---
 
@@ -27,23 +27,23 @@ pnpm add @dropfi/xrpl-react
 import { XrplProvider, useXrplReact } from '@dropfi/xrpl-react';
 
 export default function App() {
-    return (
-        <XrplProvider>
-            <SomeComponent />
-        </XrplProvider>
-    );
+  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>
-    );
+  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>
+  );
 }
 ```
 
@@ -79,10 +79,10 @@ Returns:
 
 These are internally emitted and listened to:
 
--   `xrpl_selectedAddress`
--   `xrpl_connectedAccounts`
--   `xrpl_selectedNetwork`
--   `xrpl_disconnect`
+- `xrpl_selectedAddress`
+- `xrpl_connectedAccounts`
+- `xrpl_selectedNetwork`
+- `xrpl_disconnect`
 
 ---
 
@@ -90,11 +90,106 @@ These are internally emitted and listened to:
 
 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
+- Chrome extension
+- React Native mobile app via WebView
 
 ---
 
+---
+
+title: XRPL Transactions
+description: How to use `sendTransaction` and supported XRPL transaction types in @dropfi/xrpl-react.
+
+---
+
+import { Highlight } from '@theme-ui/components'
+
+# 📤 Sending XRPL Transactions
+
+The `useXrpl` hook provided by `@dropfi/xrpl-react` includes a powerful `sendTransaction` function that allows you to send XRPL transactions directly from your React app using the connected wallet.
+
+```tsx
+const { sendTransaction } = useXrpl();
+```
+
+---
+
+## ⚙️ Supported Transaction Types
+
+You can send any valid XRPL transaction using `sendTransaction`. Common supported types include:
+
+- `Payment`
+- `TrustSet`
+- `AccountSet`
+- `OfferCreate`
+- `OfferCancel`
+- `NFTokenMint`
+- `NFTokenBurn`
+- `NFTokenCreateOffer`
+- `NFTokenCancelOffer`
+- `NFTokenAcceptOffer`
+- `SetRegularKey`
+- `SignerListSet`
+- `EscrowCreate`
+- `EscrowCancel`
+- `EscrowFinish`
+- `DepositPreauth`
+- `CheckCreate`
+- `CheckCash`
+- `CheckCancel`
+- `TicketCreate`
+- `AccountDelete`
+- `PaymentChannelCreate`
+- `PaymentChannelFund`
+- `PaymentChannelClaim`
+- `AMMCreate`
+- `AMMDeposit`
+- `AMMWithdraw`
+- `AMMVote`
+
+_For full documentation, see the [XRPL Transaction Types](https://xrpl.org/transaction-types.html)._
+
+---
+
+## 💸 Example: Sending a Payment
+
+```ts
+const tx: Payment = {
+  TransactionType: 'Payment',
+  Account: wallet.address,
+  Destination: 'rDestinationAddressHere',
+  Amount: '1000000', // 1 XRP in drops
+};
+
+await sendTransaction(tx);
+```
+
+---
+
+## 🧾 Example: NFTokenCreateOffer
+
+```ts
+const tx: NFTokenCreateOffer = {
+  TransactionType: 'NFTokenCreateOffer',
+  Account: nft.owner,
+  NFTokenID: nft.NftId,
+  Destination: 'rBrokerAccountHere',
+  Flags: 0x00000001, // 1 = sell offer
+};
+
+await sendTransaction(tx);
+```
+
+---
+
+## 🛠 Notes
+
+- Every transaction must include the `TransactionType` and `Account` fields.
+- Amounts must be specified in **drops** for XRP or as `{ currency, issuer, value }` for tokens.
+- You must be connected with a valid XRPL-compatible wallet like **DropFi** to sign and submit.
+
+> Need more examples? Check the [xrpl.org transaction explorer](https://xrpl.org/transaction-types.html) or open an issue.
+
 ## 📄 License
 
 MIT © [Travis Delly](https://github.com/dellybro)

package/package.json

@@ -1,58 +1,59 @@
 {
-    "name": "@dropfi/xrpl-react",
-    "version": "0.1.5",
-    "description": "React provider and hook for XRPL dApps using DropFi wallet",
-    "main": "dist/index.cjs",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts",
-    "type": "module",
-    "exports": {
-        ".": {
-            "require": "./dist/index.cjs",
-            "import": "./dist/index.mjs"
-        }
-    },
-    "files": [
-        "dist"
-    ],
-    "scripts": {
-        "build": "rollup -c",
-        "clean": "rm -rf dist",
-        "prepublishOnly": "pnpm run clean && pnpm run build"
-    },
-    "peerDependencies": {
-        "react": "^18.0.0",
-        "react-dom": "^18.0.0"
-    },
-    "devDependencies": {
-        "@rollup/plugin-commonjs": "^25.0.0",
-        "@rollup/plugin-node-resolve": "^15.0.0",
-        "@rollup/plugin-typescript": "^11.1.2",
-        "@types/react": "^19.1.8",
-        "@types/react-dom": "^19.1.6",
-        "rollup": "^4.0.0",
-        "rollup-plugin-peer-deps-external": "^2.2.4",
-        "typescript": "^5.0.0"
-    },
-    "author": "DropFi",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/Dellybro/XrplReact"
-    },
-    "homepage": "https://github.com/DropFi/xrpl-react#readme",
-    "bugs": {
-        "url": "https://github.com/Dellybro/XrplReact/issues"
-    },
-    "keywords": [
-        "xrpl",
-        "dropfi",
-        "react",
-        "wallet",
-        "provider",
-        "hook"
-    ],
-    "dependencies": {
-        "tslib": "^2.8.1"
+  "name": "@dropfi/xrpl-react",
+  "version": "0.1.7",
+  "description": "React provider and hook for XRPL dApps using DropFi wallet",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
     }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm run clean && pnpm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "rollup": "^4.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^5.0.0"
+  },
+  "author": "DropFi",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dropfi-xrpl/xrpl-react"
+  },
+  "homepage": "https://dropfi.app",
+  "bugs": {
+    "url": "https://github.com/dropfi-xrpl/xrpl-react/issues"
+  },
+  "keywords": [
+    "xrpl",
+    "dropfi",
+    "react",
+    "wallet",
+    "provider",
+    "hook"
+  ],
+  "dependencies": {
+    "tslib": "^2.8.1"
+  }
 }