How to create a USDC wallet

Smart wallets are revolutionizing the Web3 user experience by enabling features like gas sponsorship, bundled transactions, and seamless recovery. In this guide, we'll walk through setting up a smart wallet capable of handling USDC transfers without the user ever needing to hold ETH for gas.

We will use a React Native example to demonstrate these powerful capabilities, but the core concepts apply equally to any React application using Openfort's SDKs.

What we're building

We'll create a "USDC Transfer" application that demonstrates:

• Embedded Wallet Creation: Using Openfort Shield for secure, non-custodial wallets.
• Gas Sponsorship: Users pay network fees in USDC or have them fully sponsored.
• USDC Transfers: Seamless token transfers on the Sepolia testnet.

Prerequisites

• Node.js 18+
• An Openfort account
• Basic knowledge of React / React Native

Step 1: Bootstrap the Project

We'll start by using gitpick to clone the pre-configured recipe. This gives us a solid foundation with the necessary project structure.

This sets up a project with:

• Expo Router for navigation.
• @openfort/react-native for wallet functionality.
• Pre-built UI components for onboarding and transfers.

Step 2: Secure Backend Setup

Smart wallets, especially those using Openfort Shield, require a secure backend to handle encryption shares. This ensures that the wallet remains non-custodial and secure.

Clone and run the quickstart backend:

This local server will handle the protected encryption sessions needed to create and restore the user's wallet.

Step 3: Configure Environment & Policies

To enable gas sponsorship, you need to configure a Policy in your Openfort Dashboard. This policy dictates how gas fees are paid (e.g., sponsored by the app).

1. Go to the Policies section in the Openfort Dashboard.
2. Create a new policy for Sepolia (or Base Sepolia).
3. Copy the Policy ID.

Now, configure your mobile app's environment variables in .env.local:

Step 4: Understanding the Flow

With the setup complete, here is how the Smart Wallet operates:

1. Authentication: The user logs in (e.g., via email or social).
2. Wallet Provisioning: The app requests the backend to create an encryption session. The OpenfortProvider then generates the Shield keys on the device.
3. Transfer: When the user initiates a USDC transfer, the app constructs a UserOperation.
4. Sponsorship: This operation is sent to Openfort's bundler, which checks the Policy ID. If valid, the gas fees are sponsored.
5. Execution: The transaction is executed on-chain, and the USDC is transferred.

Conclusion

By leveraging Openfort's infrastructure, you've set up a smart wallet that abstracts away the complexities of gas fees and seed phrases. This provides a Web2-like experience while maintaining the security and self-custody benefits of Web3.

Check out the full source code to dive deeper into the implementation details.