Arweave Wallet Kit

React Hooks and Components for better interaction with Arweave wallets. Modular, can support any Arweave-based wallet.

The Arweave Wallet Kit is in BETA. Please report bugs at the issues tab.

Supported wallets

• ArConnect
• Arweave.app
• Any extension-based Arweave wallet, that injects it's ArConnect-like API into window.arweaveWallet

Installation

yarn add arweave-wallet-kit

or

npm i arweave-wallet-kit

Setup

To use the library, you'll need to wrap your application with the Kit Provider.

const App = () => {
  return (
    <ArweaveWalletKit>
      <YourApp />
    </ArweaveWalletKit>
  );
};

Config

The Arweave Wallet Kit can be configured with information about your application and with a custom theme.

...
  <ArweaveWalletKit
    config={{
      permissions: ["ACCESS_ADDRESS"],
      ensurePermissions: true,
      ...
    }}
    theme={{
      accent: { r: 255, g: 0, b: 0 },
      ...
    }}
  >
    <YourApp />
  </ArweaveWalletKit>
...

App config

Using the config field of the <ArweaveWalletKit> provider component, you can define a name, a logo or the required permissions for your app.

Available options

| Prop | Type | Default | | | ------------------- | ------------------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------- | | permissions | PermissionType[] | [] | Permissions to connect with. | | ensurePermissions | boolean |  false | Ensure that all required permissions are present. If false, it only checks if the app has any permissions. | | appInfo | AppInfo | {} | Information about your app (name/logo). | | gatewayConfig | GatewayConfig | arweave.net gateway | Configuration for the Arweave gateway to use. |

Custom theme

With the theme field, you can define a custom theme configuration for the Arweave Wallet Kit modals and buttons.

Available options

| Prop | Type | | | ---------------- | ---------------------------------- | ---------------------------------------------------------------------- | | displayTheme | "dark", "light" | UI display theme to use | | accent | RGBObject | RGB accent color for the UI | | titleHighlight | RGBObject | RGB accent color for the subscreen titles (like the connection screen) | | radius | "default", "minimal", "none" | Border radius level used throughout the Kit UI | | font | Font | Including font family used throughout the Kit UI |

Font

The font field in the theme configuration allows you to specify the font family to be used throughout the Kit UI. It should be an object with a fontFamily property, which is a string representing the font family. If nothing is specified, the default font family is Manrope with a fallback to the next available sans-serif font in the system.

Here's an example of how to use it:

...
<ArweaveWalletKit
  theme={{
    font: {
      fontFamily: "Arial"
    },
    // other theme properties...
  }}
/>
...

Terminology of Arweave Wallet Kit

Arweave Wallet Kit supports several strategies. The word strategy means an implementation of an Arweave Wallet in the Kit. These strategies allow the user to communicate with all wallets the same way and with the same API.

Connect Button

To quickly integrate the Arweave Wallet Kit, you can use the <ConnectButton> component. It is a highly customizable button that supports the ANS protocol to display information about the connected wallet.

Usage

<ConnectButton
  accent="rgb(255, 0, 0)"
  profileModal={false}
  showBalance={true}
  ...
/>

Config

You can configure the Connect Button through it's props.

| Props | Type | | | -------------------- | --------- | --------------------------------------------------------------------------------------- | | accent | string |  A theme color for the button | | showBalance | boolean | Show user balance when connected | | showProfilePicture | boolean | Show user profile picture when connected | | useAns | boolean | Use ANS to grab profile information | | profileModal | boolean | Show profile modal on click (if disabled, clicking the button will disconnect the user) |

Hooks

Inside the <ArweaveWalletKit>, you can use all kinds of hooks that are reactive to the different strategies. Some of the hooks / api functions might not be supported by all wallets.

useConnection

The core hook for connecting / disconnecting a strategy.

Usage

const { connected, connect, disconnect } = useConnection();

// initiate connection
await connect();

// disconnect the connected strategy
await disconnect();

// is there a strategy connected?
connected ? "wallet connected" : "no connected wallet";

useApi

API hook. Returns the active strategy's API as an interactable object. Can be used to sign/encrypt, etc.

Some API functions might not be supported depending on the strategy the user chose. For example, Othent does not support the signature() function. Make sure to verify beforehand.

Usage

const api = useApi();

// sign
await api.sign(transaction);

// encrypt
await api.encrypt(...)

useProfileModal

Toggle / display a modal with profile information and a disconnect button.

const profileModal = useProfileModal();

profileModal.setOpen(true);

useActiveAddress

Active address hook. Requires the ACCESS_ADDRESS and the ACCESS_ALL_ADDRESSES permission.

Usage

const address = useActiveAddress();

usePublicKey

Active address hook. Requires the ACCESS_PUBLIC_KEY permission.

Usage

const publicKey = usePublicKey();

usePermissions

Permissions hook. Returns the permissions given to the app, known by Arweave Wallet Kit.

Usage

const permissions = usePermissions();

useAddresses

All addresses hook. Returns the addresses in the connected wallet, known by Arweave Wallet Kit. Requires the ACCESS_ALL_ADDRESSES permission.

Usage

const addresses = useAddresses();

useWalletNames

All addresses hook. Returns the addresses in the connected wallet, known by Arweave Wallet Kit. Requires the ACCESS_ALL_ADDRESSES permission.

Usage

const walletNames = useWalletNames();

useStrategy

Active strategy hook. Returns the currently used strategy's ID.

Usage

const strategy = useStrategy();