Family

https://family.co/docs
Admin
Family is a simple Ethereum wallet and web3 onboarding platform that simplifies account creation and...
Tokens:22,422
Snippets:299
Trust Score:8.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### Web3Provider Setup with getDefaultConfig

Source: https://family.co/docs/connectkit/getting-started

Set up the Web3Provider component using wagmi's createConfig and ConnectKit's getDefaultConfig. This example configures chains, transports, and WalletConnect project ID.

```typescript
import { WagmiProvider, createConfig, http } from "wagmi";
import { mainnet } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ConnectKitProvider, getDefaultConfig } from "connectkit";


const config = createConfig(
  getDefaultConfig({
    // Your dApps chains
    chains: [mainnet],
    transports: {
      // RPC URL for each chain
      [mainnet.id]: http(
        `https://eth-mainnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_ID}`,
      ),
    },


    // Required API Keys
    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,


    // Required App Info
    appName: "Your App Name",


    // Optional App Info
    appDescription: "Your App Description",
    appUrl: "https://family.co", // your app's url
    appIcon: "https://family.co/logo.png", // your app's icon, no bigger than 1024x1024px (max. 1MB)
  }),
);


const queryClient = new QueryClient();


export const Web3Provider = ({ children }) => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>{children}</ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

```

--------------------------------

### SIWE Setup

Source: https://family.co/docs/connectkit/usesiwe-hook

Instructions for setting up Sign In With Ethereum, including options for Next.js and custom backend implementations.

```APIDOC
## Setup SIWE

To help streamline the process of adding SIWE to your project, we offer a small, easy-to-install package for Next.js apps. For all other frameworks see the custom backend setup.

### Next.js
Set up SIWE using ConnectKit's Next.js helper package.

### Custom Backend
Set up SIWE using your own custom backend implementation.
```

--------------------------------

### Install ConnectKit and Dependencies

Source: https://family.co/docs/connectkit/getting-started

Install ConnectKit and its peer dependencies using npm. Ensure you have wagmi, viem@2.x, and @tanstack/react-query installed.

```bash
npm install connectkit wagmi viem@2.x @tanstack/react-query

```

--------------------------------

### Install Sign In With Ethereum Package

Source: https://family.co/docs/connectkit/auth-with-custom-backend

Install the official Sign In With Ethereum package using npm. Ensure you have viem version 2.12.0 or higher.

```bash
npm install viem@">=2.12.0"
```

--------------------------------

### Install ConnectKit SIWE Package

Source: https://family.co/docs/connectkit/auth-with-nextjs

Install the necessary packages for Sign In With Ethereum integration in your Next.js project.

```bash
npm install connectkit-next-siwe viem@">=2.13.3"
```

--------------------------------

### Install Family SDK

Source: https://family.co/docs/family-account/getting-started/wagmi

Install the Family package using npm. This is the first step to integrating Family accounts.

```bash
npm i family
```

--------------------------------

### CustomSIWEButton Example

Source: https://family.co/docs/connectkit/usesiwe-hook

An example component demonstrating how to use the useSIWE hook for sign-in, sign-out, and displaying user session data.

```APIDOC
## Example Component: CustomSIWEButton

### Description
This component showcases a practical implementation of the `useSIWE` hook, managing the user's sign-in state, providing sign-in and sign-out buttons, and displaying relevant session information.

### Code
```typescript
import { useSIWE, useModal, SIWESession } from "connectkit";
import { useAccount } from "wagmi";


const CustomSIWEButton = () => {
  const { setOpen } = useModal();
  const { isConnected } = useAccount();


  const { data, isReady, isRejected, isLoading, isSignedIn, signOut, signIn } = useSIWE({
    onSignIn: (session?: SIWESession) => {
      // Do something with the data
    },
    onSignOut: () => {
      // Do something when signed out
    },
  });


  const handleSignIn = async () => {
    await signIn()?.then((session?: SIWESession) => {
      // Do something when signed in
    });
  };


  const handleSignOut = async () => {
    await signOut()?.then(() => {
      // Do something when signed out
    });
  };


  /** Wallet is connected and signed in */
  if (isSignedIn) {
    return (
      <>
        <div>Address: {data?.address}</div>
        <div>ChainId: {data?.chainId}</div>
        <button onClick={handleSignOut}>Sign Out</button>
      </>
    );
  }


  /** Wallet is connected, but not signed in */
  if (isConnected) {
    return (
      <>
        <button onClick={handleSignIn} disabled={isLoading}>
          {isRejected // User Rejected
            ? "Try Again"
            : isLoading // Waiting for signing request
            ? "Awaiting request..."
            : // Waiting for interaction
              "Sign In"}
        </button>
      </>
    );
  }


  /** A wallet needs to be connected first */
  return (
    <>
      <button onClick={() => setOpen(true)}>Connect Wallet</button>
    </>
  );
};


export default CustomSIWEButton;
```
```

--------------------------------

### Basic ConnectKitProvider Setup

Source: https://family.co/docs/connectkit/theming

Use the ConnectKitProvider to wrap your application and apply basic theming. The 'theme' and 'mode' props control the visual appearance.

```jsx
<ConnectKitProvider theme="auto" mode="light">
  /* Your App */
</ConnectKitProvider/>
```

--------------------------------

### Wrap App with Web3Provider

Source: https://family.co/docs/connectkit/getting-started

Wrap your main App component with the Web3Provider to enable ConnectKit functionality. This example also includes the ConnectKitButton.

```typescript
import { Web3Provider } from "./Web3Provider";
import { ConnectKitButton } from "connectkit";


const App = () => {
  return (
    <Web3Provider>
      <ConnectKitButton />
    </Web3Provider>
  );
};

```

--------------------------------

### Update Packages for ConnectKit 1.7.0

Source: https://family.co/docs/connectkit/migration-guide

Install the latest peer dependencies for wagmi, viem, and @tanstack/react-query. Ensure wagmi is at version 2.x, viem is at 2.x, and @tanstack/react-query is at a minimum of ^5.

```bash
npm i wagmi@2.x viem@2.x @tanstack/react-query@^5
```

--------------------------------

### Web3Provider Component Setup

Source: https://family.co/docs/connectkit/getting-started

This component should be wrapped around your React.js app to provide state and data to various ConnectKit components.

```tsx
"use client"


... 


export const Web3Provider = ({ children }) => {
  return (
    ...
  );
};

```

--------------------------------

### Configure ConnectKit with Multiple Chains

Source: https://family.co/docs/connectkit/chains

Set up the ConnectKit configuration to include multiple chains. Provide RPC URLs for each chain to ensure proper network connectivity. This setup allows users to select from the specified networks.

```javascript
import { mainnet, base, zora } from "wagmi/chains";


import { WagmiProvider, createConfig, http } from "wagmi";
import { getDefaultConfig } from "connectkit";


// Choose which chains you'd like to show
const chains = [mainnet, base, zora];


const config = createConfig(
  getDefaultConfig({
    chains,
    transports: {
      [mainnet.id]: http(mainnet.rpcUrls.default.http[0]), // or your own RPC url
      [base.id]: http(base.rpcUrls.default.http[0]), // or your own RPC url
      [zora.id]: http(zora.rpcUrls.default.http[0]), // or your own RPC url
    },
    ...
  }),
);


<WagmiProvider config={config}>
  ...
</WagmiProvider>
```

--------------------------------

### Create a Custom Connect Button

Source: https://family.co/docs/connectkit/connect-button

Import `ConnectKitButton` and use the `.Custom` component with render props to build a custom connect button. This example shows how to display the user's address when connected or 'Custom Connect' otherwise.

```tsx
import { ConnectKitButton } from "connectkit";


export const ExampleButton = () => {
  return (
    <ConnectKitButton.Custom>
      {({ isConnected, isConnecting, show, hide, address, ensName, chain }) => {
        return (
          <button onClick={show} style={yourButtonStyle}>
            {isConnected ? address : "Custom Connect"}
          </button>
        );
      }}
    </ConnectKitButton.Custom>
  );
};

```

--------------------------------

### Style Custom Connect Button with Styled Components

Source: https://family.co/docs/connectkit/connect-button

This example demonstrates styling the custom connect button using styled-components. It utilizes render props to display the ENS name or truncated address when connected, and 'Connect Wallet' otherwise.

```tsx
import { ConnectKitButton } from "connectkit";


import styled from "styled-components";
const StyledButton = styled.button`
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: 14px 24px;
  color: #ffffff;
  background: #1a88f8;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10rem;
  box-shadow: 0 4px 24px -6px #1a88f8;


  transition: 200ms ease;
  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 40px -6px #1a88f8;
  }
  &:active {
    transform: translateY(-3px);
    box-shadow: 0 6px 32px -6px #1a88f8;
  }
`;


export const ExampleButton = () => {
  return (
    <ConnectKitButton.Custom>
      {({ isConnected, show, truncatedAddress, ensName }) => {
        return (
          <StyledButton onClick={show}>
            {isConnected ? ensName ?? truncatedAddress : "Connect Wallet"}
          </StyledButton>
        );
      }}
    </ConnectKitButton.Custom>
  );
};

```

--------------------------------

### Set Custom Font Family

Source: https://family.co/docs/connectkit/fonts

Provide a custom theme prop to `<ConnectKitProvider />` to set a specific font family. This example uses Comic Sans.

```javascript
<ConnectKitProvider
  customTheme={{
    "--ck-font-family": '"Comic Sans MS", "Comic Sans", cursive',
  }}
>
  {/* Your App */}
</ConnectKitProvider>
```

--------------------------------

### Get Default ConnectKit Configuration

Source: https://family.co/docs/connectkit/auth-with-nextjs

Retrieve the default configuration for ConnectKit, which includes chains and transports, to be used for the public client in SIWE server-side configuration.

```typescript
import { getDefaultConfig } from "connectkit";


export const ckConfig = getDefaultConfig({ ... });

```

--------------------------------

### Custom SIWE Button Component with useSIWE

Source: https://family.co/docs/connectkit/usesiwe-hook

Example of a custom React component that utilizes the useSIWE hook to manage user sign-in and sign-out states. It displays different UI elements based on the connection and authentication status.

```typescript
import { useSIWE, useModal, SIWESession } from "connectkit";
import { useAccount } from "wagmi";


const CustomSIWEButton = () => {
  const { setOpen } = useModal();
  const { isConnected } = useAccount();


  const { data, isReady, isRejected, isLoading, isSignedIn, signOut, signIn } = useSIWE({
    onSignIn: (session?: SIWESession) => {
      // Do something with the data
    },
    onSignOut: () => {
      // Do something when signed out
    },
  });


  const handleSignIn = async () => {
    await signIn()?.then((session?: SIWESession) => {
      // Do something when signed in
    });
  };


  const handleSignOut = async () => {
    await signOut()?.then(() => {
      // Do something when signed out
    });
  };


  /** Wallet is connected and signed in */
  if (isSignedIn) {
    return (
      <>
        <div>Address: {data?.address}</div>
        <div>ChainId: {data?.chainId}</div>
        <button onClick={handleSignOut}>Sign Out</button>
      </>
    );
  }


  /** Wallet is connected, but not signed in */
  if (isConnected) {
    return (
      <>
        <button onClick={handleSignIn} disabled={isLoading}>
          {isRejected // User Rejected
            ? "Try Again"
            : isLoading // Waiting for signing request
            ? "Awaiting request..."
            : // Waiting for interaction
              "Sign In"}
        </button>
      </>
    );
  }


  /** A wallet needs to be connected first */
  return (
    <>
      <button onClick={() => setOpen(true)}>Connect Wallet</button>
    </>
  );
};


export default CustomSIWEButton;
```

--------------------------------

### Include Google Fonts

Source: https://family.co/docs/connectkit/fonts

Include font assets from Google Fonts in your HTML's `<head>` section. This example adds IBM Plex Serif.

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@300&display=swap"
  rel="stylesheet"
/>
```

--------------------------------

### Use Google Font in ConnectKit

Source: https://family.co/docs/connectkit/fonts

After including a Google Font, provide a custom theme prop to `<ConnectKitProvider />` to set the font family. This example uses IBM Plex Serif.

```javascript
<ConnectKitProvider
  customTheme={{
    "--ck-font-family": "IBM Plex Serif",
  }}
>
  {/* Your App */}
</ConnectKitProvider>
```

--------------------------------

### Configure ConnectKitProvider for SIWE

Source: https://family.co/docs/connectkit/auth-with-nextjs

Set up the ConnectKitProvider with SIWE-specific options such as nonce and session refetch intervals, and callbacks for sign-in and sign-out events.

```typescript
import { ConnectKitProvider, SIWESession} from "connectkit";
import { siweClient } from "@/utils/siweClient";


<siweClient.Provider
  // Optional parameters
  enabled={true} // defaults true
  nonceRefetchInterval={300000} // in milliseconds, defaults to 5 minutes
  sessionRefetchInterval={300000}// in milliseconds, defaults to 5 minutes
  signOutOnDisconnect={true} // defaults true
  signOutOnAccountChange={true} // defaults true
  signOutOnNetworkChange={true} // defaults true
  onSignIn={(session?: SIWESession) => void}
  onSignOut={() => void}
/>
```

--------------------------------

### Client-Side SIWE Configuration

Source: https://family.co/docs/connectkit/auth-with-nextjs

Configuration options for initializing and managing SIWE on the client side using the `ConnectKitProvider`.

```APIDOC
## configureClientSIWE Props

`config`
**object**
Configuration object for client-side SIWE.

### Properties

*   `apiRoutePrefix` (string) - **Required**. The prefix for your SIWE API routes.
*   `statement` (string) - A human-readable assertion for the user to sign. Defaults to "Sign In With Ethereum.". Must not contain newline characters (`\n`).

### Example Usage

```javascript
configureClientSIWE({
  apiRoutePrefix: "/api/siwe", // Required: Your SIWE API route prefix
  statement: "Please sign this message to log in.", // Optional: Custom statement
});
```

## configureClientSIWE.Provider Props

`props`
**object**
Props for the `ConnectKitProvider` to enable SIWE functionality.

### Properties

*   `enabled` (boolean) - Whether SIWE is enabled. Defaults to `true`.
*   `nonceRefetchInterval` (number) - Interval in milliseconds to refetch the nonce. Defaults to 300000 (5 minutes).
*   `sessionRefetchInterval` (number) - Interval in milliseconds to refetch the SIWE session. Defaults to 300000 (5 minutes).
*   `signOutOnDisconnect` (boolean) - Whether to sign out SIWE when the wallet disconnects. Defaults to `true`.
*   `signOutOnAccountChange` (boolean) - Whether to sign out SIWE when the connected account changes. Defaults to `true`.
*   `signOutOnNetworkChange` (boolean) - Whether to sign out SIWE when the connected network changes. Defaults to `true`.
*   `onSignIn` (function) - Callback function executed when a user successfully signs in. Receives the `SIWESession` object.
*   `onSignOut` (function) - Callback function executed when a user signs out.

### Example Usage

```jsx
import { ConnectKitProvider, SIWESession } from "connectkit";
import { siweClient } from "@/utils/siweClient";

function App() {
  return (
    <ConnectKitProvider>
      <siweClient.Provider
        // Optional parameters
        enabled={true} // defaults true
        nonceRefetchInterval={300000} // in milliseconds, defaults to 5 minutes
        sessionRefetchInterval={300000} // in milliseconds, defaults to 5 minutes
        signOutOnDisconnect={true} // defaults true
        signOutOnAccountChange={true} // defaults true
        signOutOnNetworkChange={true} // defaults true
        onSignIn={(session?: SIWESession) => {
          console.log("User signed in:", session);
        }}
        onSignOut={() => {
          console.log("User signed out");
        }}
      >
        {/* Your application components */}
      </siweClient.Provider>
    </ConnectKitProvider>
  );
}
```
```

--------------------------------

### Configure SIWEProvider with ConnectKit

Source: https://family.co/docs/connectkit/auth-with-custom-backend

Import and configure SIWEProvider along with ConnectKitProvider. Define SIWEConfig to integrate with your backend and session management.

```typescript
import { SIWEProvider, SIWEConfig, ConnectKitProvider } from 'connectkit';
import { SiweMessage } from 'siwe';


const siweConfig: SIWEConfig = {
  ...
};


<SIWEProvider {...siweConfig}>
  <ConnectKitProvider>
    ...
  </ConnectKitProvider>
</SIWEProvider>
```

--------------------------------

### Initialize Family SDK

Source: https://family.co/docs/family-account/getting-started/standalone

Initialize the Family SDK with a single function call in your app's entry point. Ensure the 'family' package is imported.

```jsx
import { family } from "family";


family.connect();
```

--------------------------------

### Get Connected Wallet Address with wagmi

Source: https://family.co/docs/connectkit/libraries

Import and use the `useAccount` hook from wagmi to display the address of the connected wallet. If no address is available, it shows 'Loading address'.

```tsx
import { useAccount } from "wagmi";


const App = () => {
  const { address } = useAccount();
  return <div>{address ?? "Loading address"}</div>;
};

```

--------------------------------

### Applying a Specific Theme and Mode

Source: https://family.co/docs/connectkit/theming

Set a specific theme (e.g., 'default') and mode (e.g., 'dark') directly on the ConnectKitProvider. This ensures a consistent look across different user systems.

```jsx
<ConnectKitProvider theme="default" mode="dark">
  {/* Your App */}
</ConnectKitProvider>
```

--------------------------------

### Configure SIWE Client Utility

Source: https://family.co/docs/connectkit/auth-with-nextjs

Set up the client-side SIWE configuration, specifying the API route prefix and an optional statement for user interaction.

```typescript
import { configureClientSIWE } from "connectkit-next-siwe";


export const siweClient = configureClientSIWE({
  apiRoutePrefix: "/api/siwe", // Your API route directory
  statement: "Sign In With Ethereum to prove you control this wallet.", // optional
});

```

--------------------------------

### SIWEConfig Methods

Source: https://family.co/docs/connectkit/auth-with-custom-backend

This section details the core methods available in the SIWEConfig object for managing the Sign-In with Ethereum flow.

```APIDOC
## SIWEConfig Methods

### getNonce

#### Description
Fetches a new nonce for the Sign-In with Ethereum process.

### Method
`getNonce`

### Parameters
None

### Response
- **Promise<string>** - A promise that resolves with the nonce string.

### createMessage

#### Description
Creates a message string to be signed by the user's wallet.

### Method
`createMessage`

### Parameters
#### Request Body
- **nonce** (string) - Required - The nonce obtained from `getNonce`.
- **address** (string) - Required - The user's wallet address.
- **chainId** (number) - Required - The chain ID of the network.

### Method
`createMessage`

### verifyMessage

#### Description
Verifies the signature of the SIWE message.

### Method
`verifyMessage`

### Parameters
#### Request Body
- **message** (string) - Required - The message string created by `createMessage`.
- **signature** (string) - Required - The signature provided by the user's wallet.

### Response
- **Promise<boolean>** - A promise that resolves to `true` if the signature is valid, `false` otherwise.

### getSession

#### Description
Retrieves the current SIWE session information.

### Method
`getSession`

### Parameters
None

### Response
- **Promise<SIWESession | null>** - A promise that resolves with the session object or `null` if no session exists.

### signOut

#### Description
Ends the current SIWE session.

### Method
`signOut`

### Parameters
None

### Response
- **Promise<boolean>** - A promise that resolves to `true` if sign-out was successful, `false` otherwise.
```

--------------------------------

### Configure Client-Side SIWE with ConnectKit

Source: https://family.co/docs/connectkit/migration-guide

Use `configureClientSIWE` to set up the client-side SIWE provider. Specify the API route prefix and a custom statement for the SIWE message.

```typescript
import { configureClientSIWE } from "connectkit-next-siwe";


export const siweClient = configureClientSIWE({
  apiRoutePrefix: string,
  statement: string, // defaults to "Sign In With Ethereum"
});
```

--------------------------------

### Implement Sign In With Ethereum Button

Source: https://family.co/docs/connectkit/api-reference

Integrate the SIWEButton for a seamless Sign In With Ethereum experience. This component must be used within a SIWE context provider. It supports displaying a sign-out button and handling sign-in events.

```javascript
import { SIWEButton, useSIWE } from "connectkit";


// This component must be used within the SIWE context provider
const MyComponent = () => {
  const { isSignedIn, data } = useSIWE();
  return <>
    <SIWEButton showSignOutButton />
    {isSignedIn && <p>Signed in as {data.address}</p>
  </>;
};
```

--------------------------------

### Configure Server-Side SIWE with ConnectKit

Source: https://family.co/docs/connectkit/migration-guide

Use `configureServerSideSIWE` to set up server-side session management for SIWE. Customize cookie name, password, and options. Defaults are provided for convenience.

```typescript
import { configureServerSideSIWE } from 'connectkit-next-siwe';


export const siweServer = configureServerSideSIWE(
  session: {
    cookieName: string, // defaults to "connectkit-next-siwe"
    password: string, // defaults to `process.env.SESSION_SECRET`
    cookieOptions: {
      secure: boolean, // defaults to true if `process.env.NODE_ENV === 'production'`
      // see https://www.npmjs.com/package/cookie for other options
    },
  },
);
```

--------------------------------

### SIWEConfig Optional Parameters

Source: https://family.co/docs/connectkit/auth-with-custom-backend

These are optional configurations that can be provided to customize the SIWE behavior.

```APIDOC
## SIWEConfig Optional Parameters

### enabled

#### Description
Whether or not to enable SIWE. Defaults to `true`.

### nonceRefetchInterval

#### Description
How often to refetch the nonce, in milliseconds. Defaults to `300000` (5 minutes).

### sessionRefetchInterval

#### Description
How often to refetch the session, in milliseconds. Defaults to `300000` (5 minutes).

### signOutOnDisconnect

#### Description
Whether or not to sign out when the user disconnects their wallet. Defaults to `true`.

### signOutOnAccountChange

#### Description
Keeps SIWE session matching the connected account. Defaults to `true`.

### signOutOnNetworkChange

#### Description
Keeps the SIWE session and the connected account/network in sync. Defaults to `true`.

### onSignIn

#### Description
Callback function executed when a user successfully signs in.

### onSignOut

#### Description
Callback function executed when a user signs out.
```

--------------------------------

### useSIWE Options

Source: https://family.co/docs/connectkit/usesiwe-hook

Describes the optional callback functions that can be passed to the useSIWE hook.

```APIDOC
## Options

### `onSignIn`
A callback function that will be called when the user has successfully signed in.

```javascript
const { signIn } = useSIWE({
  onSignIn: (session?: SIWESession) => {
    // Do something with the data
  },
});
```

### `onSignOut`
A callback function that will be called when the user has successfully signed out.

```javascript
const { signOut } = useSIWE({
  onSignOut: () => {
    // Do something when signed out
  },
});
```
```

--------------------------------

### Configure Default RPC Providers with wagmi

Source: https://family.co/docs/connectkit/rpc-providers

Instantiate wagmi's createConfig with ConnectKit's getDefaultConfig, specifying chains and fallback transports for mainnet using Infura and Alchemy. Ensure environment variables for API keys are set.

```typescript
import { createConfig, http, fallback } from "wagmi";
import { getDefaultConfig } from "connectkit";
import { mainnet } from "wagmi/chains";


const config = createConfig(
  getDefaultConfig({
    chains: [mainnet],
    transports: {
      [mainnet.id]: fallback([
        http(`https://mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`),
        http(`https://eth-mainnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_ID}`),
      ]),
    },
  }),
);

```

--------------------------------

### Wrap App with WagmiProvider

Source: https://family.co/docs/family-account/getting-started/wagmi

Provide the Wagmi configuration to your application using the WagmiProvider. This makes Wagmi context available throughout your app.

```javascript
import { WagmiProvider } from "wagmi";
import { config } from "./config";


function App() {
  return <WagmiProvider config={config}>{/** ... */}</WagmiProvider>;
}
```

--------------------------------

### Wrap App with FamilyProvider

Source: https://family.co/docs/family-account/getting-started/react

Wrap your application with FamilyAccountsProvider in your app's entry point (e.g., index.js) to enable Family functionality.

```javascript
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";


import { FamilyAccountsProvider } from "family/react";


import App from "./App";


const rootElement = document.getElementById("root");
const root = createRoot(rootElement);


root.render(
  <StrictMode>
    <FamilyAccountsProvider>
      <App />
    </FamilyAccountsProvider>
  </StrictMode>,
);

```

--------------------------------

### Configure Multiple RPC Providers for Different Chains

Source: https://family.co/docs/connectkit/rpc-providers

Configure wagmi's createConfig with ConnectKit's getDefaultConfig to use different RPC providers for mainnet and Avalanche. Imports custom chain definitions and uses http transport for each.

```typescript
import { ConnectKitProvider } from "connectkit";
import { WagmiProvider, createConfig, http } from "wagmi";


import { mainnet } from "wagmi/chains";
import { avalanche } from "./customChains";


const config = createConfig(
  getDefaultConfig({
    chains: [mainnet, avalanche],
    transports: {
      [mainnet.id]: http(
        // or your custom rpc url
        `https://eth-mainnet.g.alchemy.com/v2/${process.env.NEXT_PUBLIC_ALCHEMY_ID}`,
      ),
      [avalanche.id]: http(
        // or your custom rpc url
        avalanche.rpcUrls.default,
      ),
    },
  }),
);


export const Web3Provider = () => {
  return <WagmiProvider config={config}>...</WagmiProvider>;
};

```

--------------------------------

### Upgrade Dependencies with npm

Source: https://family.co/docs/connectkit/migration-guide

Update ConnectKit and wagmi to their latest compatible versions using npm. This command ensures you have the necessary versions for recent features and bug fixes.

```bash
npm install connectkit@^1.1.0 wagmi@^0.8.0
```

--------------------------------

### Configure getSession Method

Source: https://family.co/docs/connectkit/auth-with-custom-backend

Set up the getSession method to retrieve the user's session details (address and chainId) from your backend. It should return null if no session is found.

```typescript
const siweConfig: SIWEConfig = {
  ...
  getSession: async () => fetch('/api/siwe/session').then((res) => res.ok ? res.json() : null),
  ...
};
```

--------------------------------

### ConnectKit Components and Hooks

Source: https://family.co/docs/connectkit/api-reference

A list of available React components and Hooks provided by the ConnectKit library for building wallet connection interfaces.

```APIDOC
## ConnectKit Components and Hooks

### Components

- **`<ConnectKitProvider />`**: Provides state and data to various ConnectKit components. Wrap ConnectKitProvider around your React.js app.
- **`<ConnectKitButton />`**: The ConnectKit button. Place this component where you’d like the Connect Wallet button to appear.
- **`<ConnectKitButton.Custom />`**: Design your own Connect button. Various wallet connection states are provided through render props.
- **`<Avatar />`**: Change the avatar used in ConnectKit to more closely match the look and feel of your app.
- **`<ChainIcon />`**: Access ConnectKit's chain icons from within your app for consistency.

### Hooks

- **`useModal()`**: Programmatically control some aspects of the modal.
- **`useSIWE()`**: Programmatically control some aspects of SIWE (Sign-In with Ethereum).
- **`useChains()`**: Access the configured chains via this convenient Hook.
```

--------------------------------

### Update Packages for ConnectKit 1.3.0

Source: https://family.co/docs/connectkit/migration-guide

Upgrade connectkit to version ^1.3.0 and wagmi to version ^0.12.0 to support WalletConnect v2.

```bash
npm install connectkit@^1.3.0 wagmi@^0.12.0
```

--------------------------------

### Next.js Build Tooling Configuration

Source: https://family.co/docs/connectkit/getting-started

Configure next.config.js to resolve Node.js dependencies for WalletConnect's SDK by adding fallbacks for 'fs', 'net', and 'tls'.

```javascript
module.exports = {
  webpack: (config) => {
    config.resolve.fallback = { fs: false, net: false, tls: false };
    return config;
  },
};

```

--------------------------------

### Configure Client-Side SIWE

Source: https://family.co/docs/connectkit/auth-with-nextjs

Configure the client-side SIWE instance with API route prefix and custom statement for user authentication.

```typescript
configureClientSIWE({
  apiRoutePrefix: string,
  statement: string, // defaults to "Sign In With Ethereum."
});
```

--------------------------------

### Server-Side SIWE Configuration

Source: https://family.co/docs/connectkit/auth-with-nextjs

Configuration options for `getServerSideProps` to handle SIWE sessions and token-gated access.

```APIDOC
## configureServerSideSIWE Props

`config`
**object**
Configuration object for server-side SIWE.

### Properties

*   `session` (object) - Configuration for the SIWE session.
    *   `cookieName` (string) - The name of the session cookie. Defaults to "connectkit-next-siwe".
    *   `password` (string) - The secret password for session encryption. Defaults to `process.env.SESSION_SECRET`.
    *   `cookieOptions` (object) - Options for setting the session cookie.
        *   `secure` (boolean) - Whether the cookie should be secure. Defaults to `true` in production, `false` otherwise.
        *   (Other options available as per npmjs.com/package/cookie)
*   `options` (object) - Callbacks for various SIWE lifecycle events.
    *   `afterLogout` (Promise<void>) - Callback after a user logs out.
    *   `afterNonce` (Promise<void>) - Callback after a nonce is generated.
    *   `afterSession` (Promise<void>) - Callback after a session is established.
    *   `afterVerify` (Promise<void>) - Callback after a SIWE signature is verified.

### Example Usage

```javascript
configureServerSideSIWE({
  session: {
    cookieName: "my-siwe-cookie", // Optional: defaults to "connectkit-next-siwe"
    password: "my-super-secret-password", // Optional: defaults to `process.env.SESSION_SECRET`
    cookieOptions: {
      secure: true, // Optional: defaults to true if `process.env.NODE_ENV === 'production'`
      // Other cookie options can be passed here
    },
  },
  options: {
    afterLogout: async () => { console.log('User logged out'); },
    afterNonce: async () => { console.log('Nonce generated'); },
    afterSession: async () => { console.log('Session established'); },
    afterVerify: async () => { console.log('SIWE verified'); },
  },
});
```
```

--------------------------------

### SIWE onSignIn Callback Configuration

Source: https://family.co/docs/connectkit/usesiwe-hook

Configure the onSignIn callback for the useSIWE hook to execute custom logic when a user successfully signs in. This callback receives the SIWESession data.

```javascript
const { signIn } = useSIWE({
  onSignIn: (session?: SIWESession) => {
    // Do something with the data
  },
});
```

--------------------------------

### SIWEButton Component

Source: https://family.co/docs/connectkit/api-reference

The SIWEButton component provides a simple way to implement the Sign In With Ethereum (SIWE) flow.

```APIDOC
## SIWE Button

### Description
ConnectKit exports an easy to use Sign In With Ethereum button for you to use within your app. Just import `<SIWEButton>` and `useSIWE` to check if the user has successfully signed in.

### Props
#### `showSignOutButton`
- **boolean** - Optional - Displays a sign out button after signing in
#### `onSignIn`
- **() => void** - Optional - Event handler on a successful sign in

### Request Example
```javascript
import { SIWEButton, useSIWE } from "connectkit";


// This component must be used within the SIWE context provider
const MyComponent = () => {
  const { isSignedIn, data } = useSIWE();
  return <>
    <SIWEButton showSignOutButton />
    {isSignedIn && <p>Signed in as {data.address}</p>}
  </>;
};
```
```

--------------------------------

### Configure Server-Side SIWE

Source: https://family.co/docs/connectkit/auth-with-nextjs

Configure the server-side SIWE instance with session details, cookie options, and callbacks for various authentication events.

```typescript
configureServerSideSIWE({
  session: {
    cookieName: string, // defaults to "connectkit-next-siwe"
    password: string, // defaults to `process.env.SESSION_SECRET`
    cookieOptions: {
      secure: boolean, // defaults to true if `process.env.NODE_ENV === 'production'`
      // see https://www.npmjs.com/package/cookie for other options
    },
  },
  options: {
    afterLogout: Promise<void>,
    afterNonce: Promise<void>,
    afterSession: Promise<void>,
    afterVerify: Promise<void>,
  },
});
```

--------------------------------

### Import Chains from Wagmi

Source: https://family.co/docs/connectkit/chains

Import the desired blockchain networks from the wagmi library. Ensure these chains are compatible with your project.

```javascript
import { mainnet, base, zora } from "wagmi/chains";
```

--------------------------------

### Update Packages for ConnectKit 1.4.0

Source: https://family.co/docs/connectkit/migration-guide

Update wagmi to version 1.x.x and uninstall the ethers peer dependency, as viem is now used instead.

```bash
npm uninstall ethers
npm i wagmi@1.x viem@1.x
```

--------------------------------

### Adding a Custom Disclaimer

Source: https://family.co/docs/connectkit/theming

Include a custom disclaimer message before wallet connection by providing a 'disclaimer' element within the 'options' prop of ConnectKitProvider. This is useful for displaying terms of service or privacy policies.

```jsx
<ConnectKitProvider
  options={{
    disclaimer: (
      <>
        By connecting your wallet you agree to the{" "}
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://en.wikipedia.org/wiki/Terms_of_service"
        >
          Terms of Service
        </a>{" "}
        and{" "}
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://en.wikipedia.org/wiki/Privacy_policy"
        >
          Privacy Policy
        </a>
      </>
    ),
  }}
>
  {/* Your App */}
</ConnectKitProvider>
```

--------------------------------

### General Theme Variables

Source: https://family.co/docs/connectkit/theme-builder

Set base styles for font, body color, and border radius. These variables establish the overall look and feel of the application.

```css
/* General */

--ck-font-family: ;
--ck-body-color: ;
--ck-border-radius: ;
--ck-overlay-background: ;
--ck-overlay-backdrop-filter: ;
```

--------------------------------

### Configure SIWE Server-Side

Source: https://family.co/docs/connectkit/auth-with-nextjs

Configure the server-side SIWE handler, including chain and transport details from your ConnectKit configuration and session management settings.

```typescript
import { configureServerSideSIWE } from "connectkit-next-siwe";
import { ckConfig } from "@/components/Web3Provider";


export const siweServer = configureServerSideSIWE({
  config: {
    chains: ckConfig.chains,
    transports: ckConfig.transports,
  },
  session: {
    cookieName: "connectkit-next-siwe",
    password: process.env.SESSION_SECRET,
    cookieOptions: {
      secure: process.env.NODE_ENV === "production",
    },
  },
});

```

--------------------------------

### Configure Wagmi with Family Connector

Source: https://family.co/docs/family-account/getting-started/wagmi

Import and add the familyAccountsConnector to your Wagmi configuration. Ensure this is done before creating the config.

```javascript
import { createConfig } from "wagmi";
import { familyAccountsConnector } from "family";


export const config = createConfig({
  connectors: [familyAccountsConnector()],
  // ... other wagmi config
});
```

--------------------------------

### General Theme Variables

Source: https://family.co/docs/connectkit/theme-builder?edit=auto

Set base styles for the application, including font, body color, and border radius. These variables provide a foundation for consistent theming across components.

```css
/* General */

--ck-font-family: ;
--ck-body-color: ;
--ck-border-radius: ;
--ck-overlay-background: ;
--ck-overlay-backdrop-filter: ;

/* Primary Button */

--ck-primary-button-color: ;
--ck-primary-button-background: ;
--ck-primary-button-box-shadow: ;
--ck-primary-button-border-radius: ;
--ck-primary-button-font-weight: ;
--ck-primary-button-hover-color: ;
--ck-primary-button-hover-background: ;
--ck-primary-button-hover-box-shadow: ;
--ck-primary-button-active-background: ;
--ck-primary-button-active-box-shadow: ;

/* Secondary Button */

--ck-secondary-button-color: ;
--ck-secondary-button-background: ;
--ck-secondary-button-box-shadow: ;
--ck-secondary-button-border-radius: ;
--ck-secondary-button-font-weight: ;
--ck-secondary-button-hover-color: ;
--ck-secondary-button-hover-background: ;
--ck-secondary-button-hover-box-shadow: ;
--ck-secondary-button-active-background: ;
--ck-secondary-button-active-box-shadow: ;

/* Tertiary Button */

--ck-tertiary-button-color: ;
--ck-tertiary-button-background: ;
--ck-tertiary-button-box-shadow: ;
--ck-tertiary-button-border-radius: ;
--ck-tertiary-button-font-weight: ;
--ck-tertiary-button-hover-color: ;
--ck-tertiary-button-hover-background: ;
--ck-tertiary-button-hover-box-shadow: ;

/* Modal */

--ck-modal-box-shadow: ;
--ck-border-radius: ;
--ck-body-background: ;
--ck-body-background-secondary: ;
--ck-body-background-tertiary: ;

/* Modal Backdrop */

--ck-overlay-background: ;
--ck-overlay-backdrop-filter: ;

/* Text */

--ck-font-family: ;
--ck-body-color: ;
--ck-body-color-muted: ;
--ck-body-color-muted-hover: ;
--ck-body-color-danger: ;
--ck-body-color-valid: ;
--ck-modal-heading-font-weight: ;

/* Miscellaneous */

--ck-focus-color: ;
--ck-body-action-color: ;
--ck-body-divider: ;
--ck-qr-dot-color: ;
--ck-qr-background: ;
--ck-qr-border-color: ;
--ck-qr-border-radius: ;
--ck-tooltip-color: ;
--ck-tooltip-background: ;
--ck-tooltip-background-secondary: ;
--ck-tooltip-shadow: ;
--ck-spinner-color: ;
--ck-recent-badge-color: ;
--ck-recent-badge-background: ;
--ck-recent-badge-border-radius: ;
--ck-body-disclaimer-color: ;
--ck-body-disclaimer-link-color: ;
--ck-body-disclaimer-link-hover-color: ;
--ck-body-disclaimer-background: ;

/* Connect Wallet Button */

--ck-connectbutton-font-size: ;
--ck-connectbutton-border-radius: ;
--ck-connectbutton-color: ;
--ck-connectbutton-background: ;
--ck-connectbutton-box-shadow: ;
--ck-connectbutton-hover-color: ;
--ck-connectbutton-hover-background: ;
--ck-connectbutton-hover-box-shadow: ;
--ck-connectbutton-active-color: ;
--ck-connectbutton-active-background: ;
--ck-connectbutton-active-box-shadow: ;

```

--------------------------------

### useSIWE Hook

Source: https://family.co/docs/connectkit/api-reference

A convenience hook to access SIWE (Sign In With Ethereum) state. Must be used with Sign In With Ethereum.

```APIDOC
## useSIWE Hook

Manages the state and actions for Sign In With Ethereum.

### Properties

- **isSignedIn** (boolean) - Whether or not the wallet has signed in.
- **data** (SIWESession) - Returned data when a wallet has signed in.
  - **address** (string) - Wallet address.
  - **chainId** (number) - Connected Chain ID.
  - **error** (Error) - Error thrown if there was an error signing the message.
  - **isRejected** (boolean) - If the user has rejected the signing message.
  - **isError** (boolean) - If there was an error signing the message.
  - **isLoading** (boolean) - If the app is waiting for the user to sign the message.
  - **isSuccess** (boolean) - If the user has successfully signed in.
  - **isReady** (boolean) - If the app is ready for the user to sign in.
- **signIn** (() => Promise<boolean>) - Prompt the user to sign in.
- **signOut** (() => Promise<boolean>) - Sign out the user.
- **reset** (() => void) - Reset the hook to a fresh state.
```

--------------------------------

### useChains Hook

Source: https://family.co/docs/connectkit/api-reference

Allows convenient access to the dApp's configured chains, useful with the ChainIcon component.

```APIDOC
## useChains Hook

Provides access to the configured chains for the dApp.

### Usage Example

```javascript
import { useChains, ChainIcon } from "connectkit";

const MyComponent = () => {
  const chains = useChains();
  return (
    <>
      <p>This dApp is supported on the following chains:</p>
      {chains.map((chain) => (
        <div key={chain.id}>
          <ChainIcon id={chain.id} />
          <span>{chain.name}</span>
        </div>
      ))}
    </>
  );
};
```
```

--------------------------------

### Connect Wallet Button Theme Variables

Source: https://family.co/docs/connectkit/theme-builder

Customize the appearance of the 'Connect Wallet' button, including font size, border radius, colors, box shadow, and states for hover and active.

```css
/* Connect Wallet Button */

--ck-connectbutton-font-size: ;
--ck-connectbutton-border-radius: ;
--ck-connectbutton-color: ;
--ck-connectbutton-background: ;
--ck-connectbutton-box-shadow: ;
--ck-connectbutton-hover-color: ;
--ck-connectbutton-hover-background: ;
--ck-connectbutton-hover-box-shadow: ;
--ck-connectbutton-active-color: ;
--ck-connectbutton-active-background: ;
--ck-connectbutton-active-box-shadow: ;
```

--------------------------------

### Integrate SIWE Provider in Next.js App

Source: https://family.co/docs/connectkit/auth-with-nextjs

Wrap your Next.js application with the siweClient.Provider and ConnectKitProvider to enable SIWE functionality and ConnectKit features.

```typescript
import { ConnectKitProvider, SIWESession} from "connectkit";
import { siweClient } from "@/utils/siweClient";


<siweClient.Provider
  // Optional parameters
  enabled={true} // defaults true
  nonceRefetchInterval={300000} // in milliseconds, defaults to 5 minutes
  sessionRefetchInterval={300000}// in milliseconds, defaults to 5 minutes
  signOutOnDisconnect={true} // defaults true
  signOutOnAccountChange={true} // defaults true
  signOutOnNetworkChange={true} // defaults true
  onSignIn={(session?: SIWESession) => void}
  onSignOut={() => void}
  >
  <ConnectKitProvider>
    /* Your App */
  </ConnectKitProvider>
</siweClient.Provider>

```

--------------------------------

### SIWE API Route Handler

Source: https://family.co/docs/connectkit/auth-with-nextjs

Set up the catch-all API route handler for SIWE in Next.js, ensuring it uses dynamic routing and is correctly named to handle SIWE requests.

```typescript
import { siweServer } from "@/utils/siweServer"; // Your path to siweServer.ts


export default siweServer.apiRouteHandler;

```

--------------------------------

### Configure createMessage Method

Source: https://family.co/docs/connectkit/auth-with-custom-backend

Define the createMessage method to generate an EIP-4361-compatible SIWE message. It uses the nonce from your backend and the connected wallet's address and chainId.

```typescript
const siweConfig: SIWEConfig = {
  ...
  createMessage: ({ nonce, address, chainId }) => new SiweMessage({
    version: '1',
    domain: window.location.host,
    uri: window.location.origin,
    address,
    chainId,
    nonce,
    // Human-readable ASCII assertion that the user will sign, and it must not contain `\n`.
    statement: 'Sign in With Ethereum.',
  }).prepareMessage(),
  ...
};
```

--------------------------------

### Update _app.tsx for ConnectKit 1.4.0 Client Configuration

Source: https://family.co/docs/connectkit/migration-guide

Replace createClient with createConfig and getDefaultClient with getDefaultConfig in your application's _app.tsx file. This aligns the ConnectKit API with the wagmi ecosystem.

```typescript
-import { createClient } from "wagmi";
+import { createConfig } from "wagmi";


-import { getDefaultClient } from "connectkit";
+import { getDefaultConfig } from "connectkit";

```

--------------------------------

### Replace SIWE Import in Application Root

Source: https://family.co/docs/connectkit/migration-guide

Modify your `_app.tsx` file to use `siweClient.Provider` for client-side SIWE functionality, wrapping your application.

```typescript
- import { siwe } from '../siwe';
- <siwe.Provider>
...
- </siwe.Provider>


+ import { siweClient } from '../siweClient';
+ <siweClient.Provider>
...
+ </siweClient.Provider>
```

--------------------------------

### Access SIWE State with useSIWE Hook

Source: https://family.co/docs/connectkit/usesiwe-hook

Use the useSIWE hook to access SIWE state, including sign-in and sign-out functions, and to read the current request state. This hook must be used in conjunction with Sign In With Ethereum.

```javascript
const { data, isSignedIn, signOut, signIn } = useSIWE();
```
Tokens:
Raw