User-Controlled Wallets
A frontend sample app demonstrating integration of Circle's Web3 Services user-controlled wallets with gasless transactions.
Overview
The Circle User-Controlled Wallets Sample App is a frontend user interface designed to showcase how to integrate Circle's Web3 Services products, including their Web SDK, Smart Contract Accounts (SCA), and gasless transaction capabilities. It serves as a practical example for developers looking to embed user-controlled wallets into existing web applications, enabling end users to manage wallets securely and seamlessly. The app demonstrates key flows such as user authentication, PIN management, and wallet interactions using Circle's APIs.
Built with Next.js and React, and styled with Joy UI components, the sample app emphasizes client-side integration with Circle's Web3 Services Web SDK. It handles sensitive user data like PINs and security answers securely, leveraging the SDK's authentication and encryption features. The app requires pairing with a backend sample server to provide a complete end-to-end experience, including token management and session validation.
To get started, developers must sign up for Circle's Developer Console to obtain an App ID, install necessary development tools (nvm, openssl, yarn), and configure environment variables. Running the app locally involves standard Node.js commands with hot reload support. The project is open source on GitHub, providing a clear code structure and examples of SDK usage, including handling authentication challenges and session management. This sample app is ideal for teams building programmable wallets with user control and gasless transaction features, offering a foundation to customize and extend for production use.
The Problem
Developers integrating user-controlled wallets into web applications face challenges in securely managing sensitive user data such as PINs and encryption keys, while providing seamless wallet interactions and gasless transactions. Additionally, implementing authentication flows and session management that comply with best practices can be complex without clear examples.
The Solution
Key Features
Next.js and React-based UI
Modern React framework with route grouping and component-based architecture for easy customization.
SDK integration with App ID and user tokens
Configures SDK instances with developer App ID and authenticates users with tokens and encryption keys.
PIN recovery and challenge execution
Supports PIN reset flows and challenge execution callbacks for secure user interactions.
Key Strengths
How Developers Use User-Controlled Wallets
Integrating user-controlled wallets into existing web apps
Developers can embed wallet management features into their applications using the sample app as a reference implementation.
Building gasless transaction experiences
Teams can leverage the sample app to implement gasless transactions that improve onboarding and reduce friction.
Customizing wallet UI with Circle Web3 Services SDK
Front-end developers can adapt the sample app's React components and SDK usage to fit their branding and UX requirements.
Works Well WithEthereumPolygon PoSAvalanche
Power your next build
Discover trusted tools and services in the QuickNode Marketplace. Everything you need to launch faster and scale smarter.
User-Controlled Wallets Alternatives
Explore web3 competitors and apps like User-Controlled Wallets.
Connext
Connext is a secure, fast modular interoperability protocol enabling cross-chain fund bridging and asynchronous Solidity development.
Coinbase
A comprehensive suite of APIs, SDKs, and developer tools from Coinbase to build onchain applications and integrate crypto services.
Non-Custodial WaaS
Fireblocks Non-Custodial Wallet-as-a-Service (WaaS) provides a comprehensive API platform to securely manage, transfer, and issue digital assets across vaults, wallets, exchanges, and fiat accounts.
Magic
Magic provides enterprise-grade, non-custodial wallet infrastructure and passwordless authentication APIs for seamless Web3 onboarding and wallet management.
Custodial NFT Wallet
Crossmint is an all-in-one platform that integrates wallets, stablecoins, tokenization, and payment primitives into apps and products with easy APIs and no blockchain complexity.
Synapse Protocol
Synapse is an interchain messaging protocol and cross-chain bridge enabling decentralized applications to operate across multiple blockchains.
Functions
Gelato provides infrastructure and SDKs to build smart wallets, gasless transactions, and custom rollups with ERC-4337 & 7702 support across 100+ chains.
Account Abstraction
Implementation of ERC-4337 enabling smart contract accounts as primary user accounts on Ethereum without protocol changes.
Immutable X
Immutable is a comprehensive blockchain platform offering a dedicated Layer 2 chain, wallet solutions, and growth tools tailored for Web3 gaming.
Pricing
Free | |
|---|---|
| Price (Monthly) | Free |
| Price (Annual) | Free |
| Messaging | N/A |
| Support | Community support via Discord and GitHub |
| Analytics |
Resources
The project provides comprehensive resources including a live demo, detailed documentation for the Circle Web3 Services Web SDK, and a backend sample server repository. Developers can access code examples, UI customization guides, and community support channels to facilitate integration and troubleshooting.