@vela-ventures/aosync-sdk-react 1.0.3 → 1.0.4

package/README.md

@@ -1,37 +1,107 @@
-# aosync-react-sdk
+# Wallet SDK for Arweave and AO
 
-A simple react implementation of the ao-sync protocol.
+A lightweight React hook and context provider for integrating the Beacon Wallet into your React applications.
 
-## Usage
+## Features
+
+- Easily manage wallet connections.
+- Send AR transactions.
+- Sign messages and transactions.
+- Retrieve wallet addresses.
+
+## Installation
 
-```js
-import { AOSyncProvider, useWallet } from "@vela-ventures/aosync-react-sdk";
+Install the package via npm:
 
-function WalletView() {
-  const wallet = useWallet();
-  const [address, setAddress] = useAddress<string>()
+```bash
+npm install @vela-ventures/ao-sync-sdk
+```
+
+## Usage
 
-  useEffect(() => {
-    setAddress(wallet.getAddress())
-  }, [wallet.isConnected])
+### 1: Wrap Your App with WalletProvider
 
-  if (wallet.isConnected) {
-    return(
-      <>
-       <h1>Connected to: {address}</h1>
-       <Button onClick={wallet.disconnect}>Disconnect Wallet</Button>
-      </>
-    )
-  }
+To enable wallet functionality across your app, wrap your application with the WalletProvider:
 
-  return <Button onClick={wallet.connect}>Connect Wallet</Button>
-}
+```javascript
+import React from "react";
+import { AOSyncProvider } from "@vela-ventures/ao-sync-sdk";
 
-function App() {
+const App = () => {
   return (
-    <AOSyncProvider arweaveHost='arweave.net' muUrl='https://mu.ao-testnet.xyz'>
-      <WalletView />
+    <AOSyncProvider
+      gatewayConfig={{
+        host: "arweave.net",
+        port: 443,
+        protocol: "https",
+      }}
+      muUrl="https://mu.ao-testnet.xyz"
+    >
+      <YourApp />
     </AOSyncProvider>
   );
-}
+};
 ```
+
+### 2. Use the useWallet Hook
+
+Access wallet functionality in any component with the useWallet hook:
+
+```javascript
+import React from "react";
+import { useWallet } from "@vela-ventures/ao-sync-sdk";
+
+const WalletComponent = () => {
+  const { isConnected, connect, disconnect, getAddress, sendAR } = useWallet();
+
+  const handleConnect = async () => {
+    await connect();
+    const address = await getAddress();
+    console.log("Connected wallet address:", address);
+  };
+
+  const handleSendAR = async () => {
+    try {
+      await sendAR("recipient-address", "1000000"); // 1 AR (in winstons)
+      console.log("AR sent successfully!");
+    } catch (error) {
+      console.error("Error sending AR:", error);
+    }
+  };
+
+  return (
+    <div>
+      <h1>Wallet Status: {isConnected ? "Connected" : "Disconnected"}</h1>
+      {!isConnected ? (
+        <button onClick={handleConnect}>Connect Wallet</button>
+      ) : (
+        <button onClick={disconnect}>Disconnect Wallet</button>
+      )}
+      {isConnected && <button onClick={handleSendAR}>Send AR</button>}
+    </div>
+  );
+};
+
+export default WalletComponent;
+```
+
+## API
+
+### `useWallet`
+
+The `useWallet` hook provides the following methods and properties:
+
+| Method/Property                              | Description                                    |
+| -------------------------------------------- | ---------------------------------------------- |
+| `isConnected`                                | Boolean indicating if the wallet is connected. |
+| `connect()`                                  | Connects to the wallet.                        |
+| `disconnect()`                               | Disconnects from the wallet.                   |
+| `getAddress()`                               | Returns the currently active wallet address.   |
+| `getAllAddresses()`                          | Returns all wallet addresses.                  |
+| `sendAR(recipient, quantity)`                | Sends AR to the specified address.             |
+| `sign(transaction)`                          | Signs a transaction using the wallet.          |
+| `signAOMessage(target, recipient, quantity)` | Signs a custom AO message.                     |
+
+## License
+
+MIT License © 2025 Vela Ventures

package/dist/index.d.ts

@@ -1 +1,3 @@
-export { WalletProvider, useWallet } from "./walletProvider";
+import { useWallet } from "./walletContext";
+import { AOSyncProvider } from "./walletContext";
+export { AOSyncProvider, useWallet };

package/dist/index.js

@@ -1 +1,3 @@
-export { WalletProvider, useWallet } from "./walletProvider";
+import { useWallet } from "./walletContext";
+import { AOSyncProvider } from "./walletContext";
+export { AOSyncProvider, useWallet };

package/dist/{walletProvider.d.ts → types.d.ts}

@@ -1,6 +1,5 @@
-import React from "react";
 import Transaction from "arweave/web/lib/transaction";
-interface WalletContextValue {
+export interface AOSyncSDKContext {
     isConnected: boolean;
     connect: () => Promise<void>;
     disconnect: () => Promise<void>;
@@ -10,8 +9,3 @@ interface WalletContextValue {
     signAOMessage: (target: string, recipient: string, quantity: string) => Promise<any>;
     sign: (transaction: Transaction) => Promise<Transaction>;
 }
-export declare const WalletProvider: ({ children, }: {
-    children: any;
-}) => React.JSX.Element;
-export declare const useWallet: () => WalletContextValue;
-export {};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/useWallet.d.ts

@@ -0,0 +1 @@
+export declare function useWallet(): import("./types").AOSyncSDKContext;

package/dist/useWallet.js

@@ -1 +1,9 @@
-"use strict";
+import { useContext } from "react";
+import { AOSyncContext } from "./walletContext";
+export function useWallet() {
+    const context = useContext(AOSyncContext);
+    if (!context) {
+        throw new Error("useWallet must be used within AoSyncProvider");
+    }
+    return context;
+}

package/dist/walletContext.d.ts

@@ -0,0 +1,10 @@
+export { useWallet } from "./useWallet";
+import React, { PropsWithChildren } from "react";
+import { GatewayConfig } from "arconnect";
+import { AOSyncSDKContext } from "./types";
+export declare const AOSyncContext: React.Context<AOSyncSDKContext | undefined>;
+interface Props extends PropsWithChildren {
+    gatewayConfig: GatewayConfig;
+    muUrl: string;
+}
+export declare function AOSyncProvider({ gatewayConfig, muUrl, children, }: Props): React.JSX.Element;

package/dist/{walletProvider.js → walletContext.js}

@@ -7,11 +7,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { createContext, useContext, useEffect, useRef, useState } from "react";
-import WalletClient from "@vela-ventures/ao-sync-sdk";
+export { useWallet } from "./useWallet";
+import React, { useEffect, useRef, useState, createContext, } from "react";
 import Arweave from "arweave";
-const WalletContext = createContext(null);
-export const WalletProvider = ({ children, }) => {
+import WalletClient from "@vela-ventures/ao-sync-sdk";
+export const AOSyncContext = createContext(undefined);
+export function AOSyncProvider({ gatewayConfig = { host: "arweave.net", port: 443, protocol: "https" }, muUrl = "https://mu.ao-testnet.xyz", children, }) {
     const [isConnected, setIsConnected] = useState(false);
     const walletRef = useRef(new WalletClient());
     useEffect(() => {
@@ -26,16 +27,18 @@ export const WalletProvider = ({ children, }) => {
             wallet.off("connected", handleConnect);
         };
     }, []);
-    const connect = () => __awaiter(void 0, void 0, void 0, function* () {
+    const connect = () => __awaiter(this, void 0, void 0, function* () {
         try {
-            yield walletRef.current.connect({});
+            yield walletRef.current.connect({
+                gateway: gatewayConfig,
+            });
         }
         catch (error) {
             console.error("Error connecting wallet:", error);
             throw error;
         }
     });
-    const disconnect = () => __awaiter(void 0, void 0, void 0, function* () {
+    const disconnect = () => __awaiter(this, void 0, void 0, function* () {
         try {
             yield walletRef.current.disconnect();
             setIsConnected(false);
@@ -45,7 +48,7 @@ export const WalletProvider = ({ children, }) => {
             throw error;
         }
     });
-    const getAddress = () => __awaiter(void 0, void 0, void 0, function* () {
+    const getAddress = () => __awaiter(this, void 0, void 0, function* () {
         try {
             return yield walletRef.current.getActiveAddress();
         }
@@ -54,22 +57,18 @@ export const WalletProvider = ({ children, }) => {
             throw error;
         }
     });
-    const getAllAddresses = () => __awaiter(void 0, void 0, void 0, function* () {
+    const getAllAddresses = () => __awaiter(this, void 0, void 0, function* () {
         try {
             return yield walletRef.current.getAllAddresses();
         }
         catch (error) {
-            console.error("Error getting addresses:", error);
+            console.error("Error getting address:", error);
             throw error;
         }
     });
-    const sendAR = (recipient, quantity) => __awaiter(void 0, void 0, void 0, function* () {
+    const sendAR = (recipient, quantity) => __awaiter(this, void 0, void 0, function* () {
         try {
-            const arweave = Arweave.init({
-                host: "arweave.net",
-                port: 443,
-                protocol: "https",
-            });
+            const arweave = Arweave.init(gatewayConfig);
             const tx = yield arweave.createTransaction({
                 target: recipient,
                 quantity: quantity,
@@ -82,7 +81,7 @@ export const WalletProvider = ({ children, }) => {
             throw error;
         }
     });
-    const signAOMessage = (target, recipient, quantity) => __awaiter(void 0, void 0, void 0, function* () {
+    const signAOMessage = (target, recipient, quantity) => __awaiter(this, void 0, void 0, function* () {
         try {
             const dataItem = {
                 data: "",
@@ -98,7 +97,7 @@ export const WalletProvider = ({ children, }) => {
                 ],
             };
             const signedDataItem = yield walletRef.current.signDataItem(dataItem);
-            const response = yield fetch("https://mu.ao-testnet.xyz", {
+            const response = yield fetch(muUrl, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/octet-stream",
@@ -115,7 +114,7 @@ export const WalletProvider = ({ children, }) => {
             throw error;
         }
     });
-    const sign = (transaction) => __awaiter(void 0, void 0, void 0, function* () {
+    const sign = (transaction) => __awaiter(this, void 0, void 0, function* () {
         try {
             return yield walletRef.current.sign(transaction);
         }
@@ -124,21 +123,14 @@ export const WalletProvider = ({ children, }) => {
             throw error;
         }
     });
-    return (React.createElement(WalletContext.Provider, { value: {
+    return (React.createElement(AOSyncContext.Provider, { value: {
             isConnected,
             connect,
             disconnect,
-            getAllAddresses,
             getAddress,
+            getAllAddresses,
             sendAR,
             signAOMessage,
             sign,
         } }, children));
-};
-export const useWallet = () => {
-    const context = useContext(WalletContext);
-    if (!context) {
-        throw new Error("useWallet must be used within a WalletProvider");
-    }
-    return context;
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vela-ventures/aosync-sdk-react",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -33,6 +33,30 @@
     "react-dom": "^19.0.0",
     "typescript": "^5.7.3"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vela-ventures/aosync-sdk-react.git"
+  },
+  "homepage": "https://github.com/vela-ventures/aosync-sdk-react",
+  "keywords": [
+    "arweave",
+    "arweave-js",
+    "arweave-sdk",
+    "ao",
+    "ao-sync",
+    "ao-sync-react",
+    "aosync-react",
+    "ao-sync-sdk",
+    "becon",
+    "beacon-wallet",
+    "react",
+    "web3",
+    "wallet",
+    "sdk",
+    "vela-ventures",
+    "wallet-sdk",
+    "@vela-ventures"
+  ],
   "license": "MIT",
   "contributors": [
     "Artem Purundzhian <artempa1607@gmail.com>"
@@ -41,6 +65,6 @@
     "react": "^18.2.0"
   },
   "dependencies": {
-    "@vela-ventures/ao-sync-sdk": "^1.1.9"
+    "@vela-ventures/ao-sync-sdk": "^1.1.10"
   }
 }

package/dist/component.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-export declare const MyComponent: ({ label }: {
-    label: string;
-}) => React.JSX.Element;

package/dist/component.js

@@ -1,5 +0,0 @@
-import React from "react";
-export const MyComponent = ({ label }) => {
-    return (React.createElement("div", null,
-        React.createElement("button", null, label)));
-};

package/dist/component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,MAAM,WAAW,GAAC,CAAC,KAAK,EAAC,EAAE;IACzB,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC;IACtB,OAAO,CACL;QACE,oCAAS,KAAK,CAAU,CACpB,CACP,CAAC;AACJ,CAAC,CAAA;AACD,eAAe,WAAW,CAAC"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC5B,OAAO,cAAc,CAAA;AACzB,CAAC,CAAA"}