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.

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

yarn add arweave-wallet-kit

or

npm i arweave-wallet-kit

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

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

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>
...

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

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

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.

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.

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

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

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.

The core hook for connecting / disconnecting a strategy.

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";

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.

const api = useApi();

// sign
await api.sign(transaction);

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

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

const profileModal = useProfileModal();

profileModal.setOpen(true);

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

const address = useActiveAddress();

Active address hook. Requires the ACCESS_PUBLIC_KEY permission.

const publicKey = usePublicKey();

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

const permissions = usePermissions();

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

const addresses = useAddresses();

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

const walletNames = useWalletNames();

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

const strategy = useStrategy();