Initialization

Build Abstraxn Smart Wallets in a new app

In this doc and the following ones, we will build a React application with Abstraxn Smart Wallets from scratch. This guide supports both Vite and Next.js setups.

Create a new React app

Choose your preferred framework:

Option 1: Vite + React (Recommended)

Start by initializing a new React application with Vite:

npm create vite@latest my-abstraxn-app -- --template react-ts
cd my-abstraxn-app

Or with other package managers:

pnpm

pnpm create vite my-abstraxn-app --template react-ts
cd my-abstraxn-app

yarn

yarn create vite my-abstraxn-app --template react-ts
cd my-abstraxn-app

Option 2: Next.js

Start by initializing a new Next.js app:

npx create-next-app@latest \
  --typescript \
  --tailwind \
  --app
cd my-abstraxn-app

This command passes in flags to use Typescript, Tailwind and the next app router.

Install Dependencies

You will need these core libraries:

@abstraxn/signer-react: Abstraxn Signer SDK React package for handling wallet interactions and transaction signing
@abstraxn/signer-core: Abstraxn Signer SDK core package (required dependency)
@tanstack/react-query: A required async state library for managing smart wallet state (learn more)

Install them with:

npm

npm install @abstraxn/signer-react @abstraxn/signer-core @tanstack/react-query

pnpm

pnpm add @abstraxn/signer-react @abstraxn/signer-core @tanstack/react-query

yarn

yarn add @abstraxn/signer-react @abstraxn/signer-core @tanstack/react-query

Setup AbstraxnProvider

The Abstraxn SDK requires wrapping your application with the AbstraxnProvider component. This provides the wallet context to all components in your app.

For Vite Projects

Update your src/main.tsx (or src/main.jsx) file:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import {
  AbstraxnProvider,
  type AbstraxnProviderConfig,
} from "@abstraxn/signer-react";

const providerConfig: AbstraxnProviderConfig = {
  apiKey: import.meta.env.VITE_ABSTRAXN_API_KEY || "YOUR_API_KEY",
  autoConnect: false,
  autoInit: true,
  enableLogging: true,
  ui: {
    authMethods: ["otp", "passkey", "google", "discord", "twitter"],
    theme: "light",
    logoName: "My App",
    welcomeMessage: "Welcome to My App",
    showFooter: true,
  },
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <AbstraxnProvider config={providerConfig}>
      <App />
    </AbstraxnProvider>
  </StrictMode>
);

For Next.js Projects

Update your app/layout.tsx (App Router) or pages/_app.tsx (Pages Router): app/layout.tsx (App Router):

import {
  AbstraxnProvider,
  type AbstraxnProviderConfig,
} from "@abstraxn/signer-react";

const providerConfig: AbstraxnProviderConfig = {
  apiKey: process.env.NEXT_PUBLIC_ABSTRAXN_API_KEY || "YOUR_API_KEY",
  autoConnect: false,
  autoInit: true,
  enableLogging: true,
  ui: {
    authMethods: ["otp", "passkey", "google", "discord", "twitter"],
    theme: "light",
    logoName: "My App",
    welcomeMessage: "Welcome to My App",
    showFooter: true,
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AbstraxnProvider config={providerConfig}>{children}</AbstraxnProvider>
      </body>
    </html>
  );
}

pages/_app.tsx (Pages Router):

import type { AppProps } from "next/app";
import {
  AbstraxnProvider,
  type AbstraxnProviderConfig,
} from "@abstraxn/signer-react";

const providerConfig: AbstraxnProviderConfig = {
  apiKey: process.env.NEXT_PUBLIC_ABSTRAXN_API_KEY || "YOUR_API_KEY",
  autoConnect: false,
  autoInit: true,
  enableLogging: true,
  ui: {
    authMethods: ["otp", "passkey", "google", "discord", "twitter"],
    theme: "light",
    logoName: "My App",
    welcomeMessage: "Welcome to My App",
    showFooter: true,
  },
};

export default function App({ Component, pageProps }: AppProps) {
  return (
    <AbstraxnProvider config={providerConfig}>
      <Component {...pageProps} />
    </AbstraxnProvider>
  );
}

Note: Replace YOUR_API_KEY with your actual Abstraxn API key. You can obtain one from your Abstraxn Dashboard.

Enable Solana Gasless Transactions (Optional)

If your app supports Solana, add the solanaGasless option to your provider config. This sponsors transaction fees from your paymaster gas pool so users never need SOL for gas.

const providerConfig: AbstraxnProviderConfig = {
  apiKey: import.meta.env.VITE_ABSTRAXN_API_KEY || "YOUR_API_KEY",
  autoConnect: false,
  autoInit: true,
  enableLogging: true,
  solanaGasless: {
    enabled: true,
    relayerUrl: import.meta.env.VITE_SOLANA_RELAYER_URL,
    // e.g. "https://solana-paymaster.abstraxn.com/api/v1/103/?apikey=your_api_key"
  },
  ui: {
    authMethods: ["otp", "passkey", "google", "discord", "twitter"],
    theme: "light",
    logoName: "My App",
    welcomeMessage: "Welcome to My App",
    showFooter: true,
  },
};

Option	Type	Description
`solanaGasless.enabled`	`boolean`	Set to `true` to enable gasless Solana transactions
`solanaGasless.relayerUrl`	`string`	Your Solana paymaster URL from the dashboard → Paymaster

To get your relayer URL, go to the dashboard → Paymaster. If your app has Solana selected as a chain, you will see the Solana paymaster link there.

Next Steps

Now that you have the basic setup complete, you can:

Configure your environment - Set up environment variables and configuration
Use the SDK hooks - Learn how to integrate wallet functionality in your app
Customize the UI - Customize the onboarding and wallet UI components

Get Started

Server Wallet

Create a new React app

Option 1: Vite + React (Recommended)

Option 2: Next.js

Install Dependencies

Setup AbstraxnProvider

For Vite Projects

For Next.js Projects

Enable Solana Gasless Transactions (Optional)

Next Steps

​Create a new React app

​Option 1: Vite + React (Recommended)

​Option 2: Next.js

​Install Dependencies

​Setup AbstraxnProvider

​For Vite Projects

​For Next.js Projects

​Enable Solana Gasless Transactions (Optional)

​Next Steps

Create a new React app

Option 1: Vite + React (Recommended)

Option 2: Next.js

Install Dependencies

Setup AbstraxnProvider

For Vite Projects

For Next.js Projects

Enable Solana Gasless Transactions (Optional)

Next Steps