React Integration Guide

This guide will walk you through the process of integrating the Wallet SDK into your React application. By the end, you’ll have a basic setup that allows users to connect their Frak Wallet and perform simple interactions.

Prerequisites

Before you begin, ensure that:

1. You have a React project set up.
2. You have a merchant account on the Frak business dashboard with your storefront’s domain registered. The main domain is registered automatically at sign-up; for subdomains, add them under Allowed Domains on the dashboard.

If you haven’t completed these steps, please refer to the Getting Started guide.

Step 1: Install Dependencies

First, install the required packages:

npm

npm install @frak-labs/react-sdk @tanstack/react-query

yarn

yarn add @frak-labs/react-sdk @tanstack/react-query

pnpm

pnpm add @frak-labs/react-sdk @tanstack/react-query

bun

bun add @frak-labs/react-sdk @tanstack/react-query

Step 2: Set Up the Frak Client

Create a new component to set up the Frak client and iframe:

FrakProvider.tsx

import {
    FrakConfigProvider,
    FrakIFrameClientProvider,
} from "@frak-labs/react-sdk";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { PropsWithChildren } from "react";

const queryClient = new QueryClient();

const frakConfig = {
    metadata: {
        name: "Your App Name",
    },
    // The domain will be automatically set to window.location.host
};

export function FrakProvider({ children }: PropsWithChildren) {
    return (
        <QueryClientProvider client={queryClient}>
            <FrakConfigProvider config={frakConfig}>
                <FrakIFrameClientProvider>{children}</FrakIFrameClientProvider>
            </FrakConfigProvider>
        </QueryClientProvider>
    );
}

Wrap your main App component with this provider:

App.tsx

import { FrakProvider } from './FrakProvider';

function App() {
  return (
    <FrakProvider>
      {/* Your app content */}
    </FrakProvider>
  );
}

export default App;

For more detailed configuration options, see FrakWalletSdkConfig.

Step 3: Check Wallet Status

Create a component to check and display the wallet status using the useWalletStatus hook:

WalletStatus.tsx

/**
 * Simple wallet status component
 */
function WalletStatus() {
    const { data: walletStatus, isLoading, error } = useWalletStatus();

    if (isLoading) return <div>Loading wallet status...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div>
            Wallet status:{" "}
            {walletStatus?.key === "connected" ? "Connected" : "Not connected"}
        </div>
    );
}

Step 4: Implement Login Modal

Create a component for the login modal, using the useDisplayModal hook:

LoginButton.tsx

/**
 * Simple login with frak button
 */
function LoginButton() {
    const { mutate: displayModal, isPending } = useDisplayModal();

    const handleLogin = () => {
        displayModal({
            steps: {
                login: {},
            },
            metadata: {
                i18n: {
                    "sdk.modal.login.description":
                        "Login with Frak to receive up to {{ estimatedReward }}!",
                },
            },
        });
    };

    return (
        <button onClick={handleLogin} disabled={isPending} type={"button"}>
            {isPending ? "Logging in..." : "Login with Frak"}
        </button>
    );
}

Step 5: Put It All Together

Update your main App component to include the wallet status and login button:

App.tsx

function App() {
    return (
        <FrakProvider>
            <h1>My Frak Powered app</h1>
            <WalletStatus />
            <LoginButton />
        </FrakProvider>
    );
}
export default App;

App.tsx (complete)

import { useDisplayModal, useWalletStatus } from "@frak-labs/react-sdk";
import { FrakProvider } from "./FrakProvider";

function App() {
    return (
        <FrakProvider>
            <h1>My Frak Powered app</h1>
            <WalletStatus />
            <LoginButton />
        </FrakProvider>
    );
}
export default App;

/**
 * Simple wallet status component
 */
function WalletStatus() {
    const { data: walletStatus, isLoading, error } = useWalletStatus();

    if (isLoading) return <div>Loading wallet status...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div>
            Wallet status:{" "}
            {walletStatus?.key === "connected" ? "Connected" : "Not connected"}
        </div>
    );
}

/**
 * Simple login with frak button
 */
function LoginButton() {
    const { mutate: displayModal, isPending } = useDisplayModal();

    const handleLogin = () => {
        displayModal({
            steps: {
                login: {},
            },
            metadata: {
                i18n: {
                    "sdk.modal.login.description":
                        "Login with Frak to receive up to {{ estimatedReward }}!",
                },
            },
        });
    };

    return (
        <button onClick={handleLogin} disabled={isPending} type={"button"}>
            {isPending ? "Logging in..." : "Login with Frak"}
        </button>
    );
}

FrakProvider.tsx

import {
    FrakConfigProvider,
    FrakIFrameClientProvider,
} from "@frak-labs/react-sdk";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { PropsWithChildren } from "react";

const queryClient = new QueryClient();

const frakConfig = {
    metadata: {
        name: "Your App Name",
    },
    // The domain will be automatically set to window.location.host
};

export function FrakProvider({ children }: PropsWithChildren) {
    return (
        <QueryClientProvider client={queryClient}>
            <FrakConfigProvider config={frakConfig}>
                <FrakIFrameClientProvider>{children}</FrakIFrameClientProvider>
            </FrakConfigProvider>
        </QueryClientProvider>
    );
}

Next Steps

With this setup, you have a basic React application integrated with the Wallet SDK. Users can now connect their Frak Wallet and log in. From here, you can start implementing more advanced features such as:

• Sending interactions
• Implementing referral systems
• Creating reward campaigns

Refer to the specific action and hook documentation for details on implementing these features.