Learn how to get started with Abstraxn Smart Wallets in React.
Create a new app with embedded wallets, social login, and gasless transactions. Abstraxn Smart Wallets React Quickstart preview
You can also follow the Quickstart in the Dashboard.

​
1. Clone template repo

git clone https://github.com/Abstraxn-Labs/wallets-quickstart.git my-abstraxn-wallets-app
cd my-abstraxn-wallets-app
npm install

​
2. Set up environment

Once you have your project cloned down and you are in the my-abstraxn-wallets-app level in your terminal, go to your project’s root, create a .env file and copy-paste the following into it: 
# Paste this in your .env file
VITE_ABSTRAXN_API_KEY=YOUR_ABSTRAXN_API_KEY
Note: This template uses Vite, so environment variables must be prefixed with VITE_ to be accessible in the browser. See env.example in the repository for reference.

​
Get Your API Key

  1. Visit https://dashboard.abstraxn.com/
  2. Log in or sign up
  3. Go to Apps -> click Create New App
  4. Navigate to Wallets -> click Add Wallet Service
  5. Click View Details -> copy your API Key

​
3. Run app

In your terminal, run: 
npm run dev
Your app will be available at http://localhost:5173 (or the port shown in the terminal). When you first open the app, you’ll see the initial screen with the connect wallet button: Initial app screen with connect wallet button

​
4. Connect your wallet

Click the Connect Wallet button to open the Abstraxn onboarding modal. You can use a service like Temp Mail to test logins with throwaway email accounts.
Note: Social login (Google, Twitter, Discord) is available once configured in your dashboard. Email OTP authentication works out of the box.

​
Email OTP Authentication

  1. Enter your email address in the onboarding modal
  2. You will receive a 6-digit authentication code via email
  3. Enter the code in the verification screen:
OTP verification code entry screen

​
Success! 🎉

Once you have successfully signed in and your wallet is connected, you’ll see the main app interface displaying your connection status and wallet information: Connected wallet interface showing status, address, and action buttons The connected wallet view shows:
  • Connection Status: Displays “Connected” in green, confirming your wallet is active
  • Wallet Address: Your wallet’s Ethereum address is displayed and can be copied
  • Open Wallet Button: Click to open the Abstraxn wallet modal with additional features like:
    • Chain/network selector
    • Send and receive functionality
    • Transaction history
    • Wallet management options
  • Disconnect Button: Disconnect your wallet when needed
Abstraxn wallet modal with full wallet management interface

​
5. Next steps

Congratulations! You’ve successfully set up the Abstraxn Smart Wallets quickstart. Now you can:

​
Manual Setup (Alternative)

If you prefer to set up from scratch instead of using the template, check out our From Scratch guide for step-by-step instructions.