Initialize project and setup provider

Let's start by installing the SDK package and initializing the provider.

1. Create a react / next repo and install the SDK

Install the npm package in your React or Next JS / TS project.

npm i @enclavemoney/enclave-wallet-sdk

2. Initialise Provider

Import the provider from the installed package. Initialize the API key obtained from the dev portal. Make sure to place the API key in your environment variables. You can select the theme of the embedded wallet based on the theme of your application.

"use client";

import { WalletProvider } from "@enclavemoney/enclave-wallet-sdk/dist/components/WalletProvider";
import { useTheme } from "@/app/contexts/ThemeContext";
import { NoSSR } from "@/app/components/ui/NoSSR";
import { Dashboard } from "@/app/components/Dashboard";

const sdkKey = process.env.NEXT_PUBLIC_ENCLAVE_SDK_KEY || "";

function WalletWrapper() {
  const { isDarkMode } = useTheme();

  return (
    <WalletProvider sdkKey={sdkKey} theme={isDarkMode ? "dark" : "light"}>
      <NoSSR>
        <Dashboard />
      </NoSSR>
    </WalletProvider>
  );
}

export default function Home() {
  return <WalletWrapper />;
}