React hooks for Arweave wallets (with support for ArConnect and arweave.app)
Add it to your project:
yarn add react-arconnect
//App.js | index.js
import React from 'react';
import { ArconnectProvider, ArconnectContext } from 'react-arconnect';
//wrap the root component with <ArconnectProvider />
export default function Home() {
const permissions = ["ACCESS_ADDRESS"]
return (
<ArconnectProvider permissions={permissions}>
<Name />
</ArconnectProvider>
)
}
This is the provider component. It should be placed above all components using useArconnect()
.
This is the hook to be used throughout the app. It returns an object containing:
- walletPermissions
- walletConnected
- address
- ANS
- arconnectConnect
- arconnectDisconnect
- getPublicKey
- createSignature
- decrypt
- encrypt
-
PermissionType[]
: Array of permissions granted to the site by the connected Arconnect wallet.
-
boolean
: ArConnect wallet connection state.
-
string
: Wallet address of the currently connected Arconnect wallet.
Learn more about ANS (Arweave Name service)
Returns:
-
address_color
: The ANS profile color. -
currentLabel
: The current ANS label in use. -
avatar
: The TXID for the ANS Avatar Image.
- Function used to request connecting site to ArConnect.
- Function used to request disconnecting site from ArConnect.
- Function to get the public key of the connected wallet.
- Function to create a signature for a given message. Useful for verifying user authentication.
Usage:
const data = new TextEncoder().encode('test message');
const signature = await createSignature(data);
// fQYlCxQSkgGMQdWnUZqAr3bu78GE2f9fa6i35+PzTg...S+fNDCjt0O/w9tOzHn45+UqmeWZ9kLzn2LyE=
- Function to decrypt a message. Not recommended for production use.
- Function to encrypt a message. Not recommended for production use.
- Function to shorten the wallet address with ellipsis Ex:
lIg5..._3Qg
-
string
: Permission type for the ArConnect wallet permissions.
-
PermissionType[]
: All permissions available for the Arweave-based wallets.
-
object
: Default signature params for thecreateSignature
function.
-
string
: API route for ANS (Arweave Name service) that returns all domains belonging to the wallet address.
Usage: https://ans-resolver.herokuapp.com/resolve-as-arpage/kaYP9bJtpqON8Kyy3RbqnqdtDBDUsPTQTNUCvZtKiFI
(deprecation notice: The URL will be swapped out in coming updates)
To run the examples, switch to the respective directories. Run npm install
or yarn install
, Then run npm start dev
or yarn dev
.
Check out our example app and components to see how to use react-arconnect
in your app.
This project is licensed under the MIT license