# @funkit/react

> React interface for the Funkit Core SDK

Latest version **0.9.16** (published 2024-04-08) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @funkit/react
pnpm add @funkit/react
yarn add @funkit/react
bun add @funkit/react
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.9.16 |
| Published | 2024-04-08 |
| First published | 2023-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 23 |
| Unpacked size | 693.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Author | https://fun.xyz/ |
| Maintainers | funxyz |
| Keywords | Fun Wallet, Ethereum, Account Abstraction, SDK, React |

## Links

- npm: https://www.npmjs.com/package/@funkit/react
- Repository: https://github.com/fun-xyz/funkit
- Homepage: https://github.com/fun-xyz/funkit#readme
- Issues: https://github.com/fun-xyz/funkit-react/issues
- npm.io page: https://npm.io/package/@funkit/react

## Dependencies (23)

- [viem](https://npm.io/package/viem.md) ^2.9.2
- [zustand](https://npm.io/package/zustand.md) ^4.3.8
- [magic-sdk](https://npm.io/package/magic-sdk.md) 18.2.1
- [web3-core](https://npm.io/package/web3-core.md) ^4.0.1
- [@sentry/cli](https://npm.io/package/@sentry/cli.md) ^2.21.2
- [@funkit/core](https://npm.io/package/@funkit/core.md) 1.0.3
- [eventemitter3](https://npm.io/package/eventemitter3.md) ^5.0.1
- [@sentry/browser](https://npm.io/package/@sentry/browser.md) ^7.77.0
- [@magic-ext/oauth](https://npm.io/package/@magic-ext/oauth.md) 11.0.0
- [@web3-react/core](https://npm.io/package/@web3-react/core.md) ^8.2.0
- [@web3-react/types](https://npm.io/package/@web3-react/types.md) ^8.2.0
- [@magic-sdk/commons](https://npm.io/package/@magic-sdk/commons.md) ^14.2.1
- [@magic-sdk/provider](https://npm.io/package/@magic-sdk/provider.md) ^18.2.1
- [@web3-react/eip1193](https://npm.io/package/@web3-react/eip1193.md) ^8.2.0
- [@coinbase/wallet-sdk](https://npm.io/package/@coinbase/wallet-sdk.md) ^3.6.6
- [@privy-io/react-auth](https://npm.io/package/@privy-io/react-auth.md) ^1.43.3
- [@walletconnect/modal](https://npm.io/package/@walletconnect/modal.md) ^2.4.5
- [@web3-react/metamask](https://npm.io/package/@web3-react/metamask.md) ^8.2.1
- [@web3-react/coinbase-wallet](https://npm.io/package/@web3-react/coinbase-wallet.md) ^8.2.0
- [@web3-react/walletconnect-v2](https://npm.io/package/@web3-react/walletconnect-v2.md) ^8.3.2
- [@walletconnect/jsonrpc-provider](https://npm.io/package/@walletconnect/jsonrpc-provider.md) ^1.0.13
- [@walletconnect/ethereum-provider](https://npm.io/package/@walletconnect/ethereum-provider.md) ^2.10.4
- [@walletconnect/jsonrpc-http-connection](https://npm.io/package/@walletconnect/jsonrpc-http-connection.md) ^1.0.7

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.9.16 (latest) — 2024-04-08
- 0.9.2 — 2023-12-27
- 0.9.0 — 2023-11-07
- 0.8.7 — 2023-10-30
- 0.8.6 — 2023-09-27
- 0.8.5 — 2023-09-21
- 0.8.4 — 2023-09-21
- 0.8.2 — 2023-08-31
- 0.8.1 — 2023-08-31
- 0.8.0 — 2023-08-29

## README

![backdrop](./backdrop.png)

# **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](https://github.com/fun-xyz/funkit-core) if you want to use Fun wallets outside React, or need to access lower level APIs.

## **Table of Contents**

1. **[Installation](#installation)**
2. **[Quick Start](#quickstart)**
3. **[Testing](#testing)**
4. **[More Resources](#moreresources)**

## <a id="installation"></a> **Installation**

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

## <a id="quickstart"></a> **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](https://app.fun.xyz/onboarding).

### 1. Import

Import everything we need to start using Fun wallets.

```js
"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:

1. `chain` - Fun wallets can be used on a number of supported [EVM-compatible blockchains](https://ethereum.org/en/developers/docs/evm/).
2. `apiKey` - A FunKit API key. This can be retrieved from the [FunKit Dashboard](https://app.fun.xyz/onboarding).
3. `gasSponsor` (optional) - A [gas sponsor](https://docs.fun.xyz/api-reference/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.

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

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

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

```jsx
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();
};
```

## <a id="testing"></a> **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.

```jsx
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>
  );
}
```

## <a id="moreresources"></a> **More Resources**

- [Documentation](http://docs.fun.xyz) - Complete how-to guides and API reference docs.
- [Demo](https://demo.fun.xyz) - Try FunKit React in action.
- [Discord](https://discord.com/invite/KhJVrDy3) - Ask us a question, or just say hi!

---
_Source: https://npm.io/package/@funkit/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._