Skip to main content

Quick Start Guide: Create a React Wallet Application with the Keyban SDK

This guide shows you how to quickly create a React wallet application using the Keyban SDK. You'll allow users to log in, generate a wallet, display the public key, and check the ETHER balance on the Ethereum Sepolia testnet.

Prerequisites​

Before starting, make sure you have installed:

  • Node.js (version 14 or later)
  • npm (Node Package Manager)

Simple Steps to Get Started​

1. Create Your Application​

Open a terminal and run the following command:

npm init @keyban/keyban-app

This command will:

  • Install the necessary packages
  • Set up a React application integrated with the Keyban SDK
  • Automatically launch the application using the Vite development server

2. Access Your Application​

Once the setup is complete, open your web browser and go to:

http://localhost:5173/

You should see the wallet app with the following features:

  • Login: Click the login button to access the app.
  • Wallet Display: After login, your public key and ETHER balance on the Sepolia testnet will appear.
  • Refresh Balance: Use the "Refresh" button to update your balance.

Note: For this demo, you don't need to set up an Auth0 account. The app uses a pre-configured Auth0 account by default.

That's it!​

You now have a fully functional React wallet app using the Keyban SDK, without any additional setup.

Customization (Optional)​

If you want to customize the app with your own Auth0 and Keyban credentials, you can do so by editing the config.ts file located in the src/ folder.

How to Get Your Keyban App ID​

To get your own Keyban App ID, contact Keyban support. This ID is needed to connect your app to the Keyban platform under your account.

Restarting the App (Optional)​

If you've closed the app or want to restart it later, run:

npm run dev

Then, open http://localhost:5173/ in your browser again.

Conclusion​

Congratulations! You've created a React wallet application using the Keyban SDK in just two simple steps.

Next Steps​

  • Explore the Keyban SDK: Check out the Keyban SDK documentation for advanced features like transaction management.
  • Try Sending Transactions: You can send test ETHER tokens using the KeybanAccount class. To do this, get some tokens from a faucet here.
  • Deepen Your Integration: Ready to add more advanced functionality to your app? Learn how to integrate the Keyban SDK into an existing React application with custom configurations in the next guide: Integrate Keyban SDK into an Existing React Application.

For further support, feel free to join our Discord community.