@funkit/react NPM

backdrop

FunKit React

FunKit empowers you to create feature-rich and extensible smart wallets built on account abstraction. Leveraging FunKit, you can customize gas behavior, implement multi-sig and other authentication schemes, monetize your application, execute any transactions from smart wallets, and much more.

Our React SDK offers a highly abstracted and streamlined developer experience for creating and interacting with Fun wallets using React hooks. Check out the FunKit Core SDK if you want to use Fun wallets outside React, or need to access lower level APIs.

Installation

npm i @funkit/react --save
# or
yarn add @funkit/react

Quick Start

The FunKit React SDK needs to be configured with an API key. Get an API key by signing up or logging in to the FunKit Dashboard.

1. Import

Import everything we need to start using Fun wallets.

"use client"; // All React hooks need to be used in a client context
import {
  FunContextProvider,
  Goerli,
  useMetamaskAuth,
  useFunWallet,
} from "@funkit/react";

2. SDK Configuration

During the initial setup for the SDK, you will need to provide a few configuration parameters. Once these are set initially they can be viewed or updated using the useConfig hook.

The following parameters are used to configure the behavior of the SDK in your app:

chain - Fun wallets can be used on a number of supported EVM-compatible blockchains.
apiKey - A FunKit API key. This can be retrieved from the FunKit Dashboard.
gasSponsor (optional) - A gas sponsor, used to configure the payment of transaction fees for user operations.

Add your privy AppId as well to get full access to web2 sign in methods.

const FUN_APP_ID = "clnatprpv00sfmi0fv3qc185b";
const DEFAULT_FUN_WALLET_CONFIG = {
  apiKey: "<YOUR_API_KEY>",
  chain: Goerli,
};

export default function AppWrapper() {
  return (
    <FunContextProvider options={DEFAULT_FUN_WALLET_CONFIG} privyAppId={FUN_APP_ID}>
      <App />
    </FunContextProvider>
  );
}

3. User login through Metamask

Next, users need to login through an auth hook to provide a way for fun account abstraction to sign transactions. Here we add a button to activate/deactivate a Auth upon click.

const AuthButton = ({ index }) => {
  const { auth, active, authAddr, login, logout } = useMetamaskAuth();

  return (
    <button
      onClick={() => {
        if (active) {
          logout();
          return;
        }
        login();
      }}
    >
      {active ? "Unconnected" : "Connect"} {"Metamask "}
    </button>
  );
};

4. Initialize the FunWallet

With the Auth instance that you just created, you can now initialize your FunWallet. The useFunWallet hook returns functions used to create or initialize existing FunWallets.

const { auth, active, authAddr, login, logout } = useMetamaskAuth();

const { wallet, address, createFunWallet } = useFunWallet();

async function createNewWallet() {
  if (!active || !auth) return;
  createFunWallet(auth).catch();
}

5. Initiate a Transfer

Now we have the wallet object, we will show how to transfer some basic ethers to other addresses. Note that the smart wallet will only be created on the blockchain after executeOperation is finished.

const {
  executeOperation: executeTransferOperation,
  ready: actionTransferReady,
} = useAction({
  action: ActionType.Transfer,
  params: {
    token: "eth",
    to: authAddr,
    amount: 0.001,
  },
});

const transferEth = async () => {
  if (!wallet || !actionTransferReady) return;
  await executeTransferOperation();
};

Testing

Testing on Goerli

You can test FunKit on Ethereum goerli testnet with the following configuration. We have a gas sponsor that will cover your gas cost for the first 200 operations so you don’t have to worry about pre-funding the wallet or setting up the gas sponsor to start.

const FUN_APP_ID = "clnatprpv00sfmi0fv3qc185b";
const DEFAULT_FUN_WALLET_CONFIG = {
  apiKey: "<YOUR_API_KEY>",
  chain: Goerli,
};
export default function AppWrapper() {
  return (
    <FunContextProvider options={DEFAULT_FUN_WALLET_CONFIG} privyAppId={FUN_APP_ID}>
      <App />
    </FunContextProvider>
  );
}