react-arconnect

@decentldotland/react-arconnect

React hooks for Arweave wallets (with support for ArConnect and arweave.app)

Usage:

Add it to your project:

yarn add react-arconnect

How to use react-arconnect in your React app:

//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>
  )
}

API

<ArconnectProvider />

This is the provider component. It should be placed above all components using useArconnect().

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

walletPermissions

• PermissionType[]: Array of permissions granted to the site by the connected Arconnect wallet.

walletConnected

• boolean: ArConnect wallet connection state.

address

• string: Wallet address of the currently connected Arconnect wallet.

ANS

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.

arconnectConnect

• Function used to request connecting site to ArConnect.

arconnectDisconnect

• Function used to request disconnecting site from ArConnect.

getPublicKey

• Function to get the public key of the connected wallet.

createSignature

• 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=

decrypt

• Function to decrypt a message. Not recommended for production use.

encrypt

• Function to encrypt a message. Not recommended for production use.

Other exports

shortenAddress

• Function to shorten the wallet address with ellipsis Ex: lIg5..._3Qg

PermissionType

• string: Permission type for the ArConnect wallet permissions.

ArweavePermissions

• PermissionType[]: All permissions available for the Arweave-based wallets.

defaultSignatureParams

• object: Default signature params for the createSignature function.

ANS_URL

• 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)

Examples

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.

License

This project is licensed under the MIT license