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: 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,
  },
};
OptionTypeDescription
solanaGasless.enabledbooleanSet to true to enable gasless Solana transactions
solanaGasless.relayerUrlstringYour 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: