USDC Transfer

Overview

React Native Expo application demonstrating wallet provisioning, faucet funding, and gas-sponsored ERC-20 transfers

Complete source code for the USDC Transfer Demo with setup instructions and implementation details.

View Sample Code

GitHub Repository

Project Structure

usdc/
├── app/
│   ├── index.tsx           # Entry point
│   └── _layout.tsx         # Root layout with OpenfortProvider
├── assets/
│   ├── fonts/              # Custom fonts
│   └── images/             # App images and icons
├── components/
│   └── onboarding/         # Wallet creation and onboarding flow
├── constants/              # App constants (ERC-20, networks, etc.)
├── services/               # Backend services and API calls
├── types/                  # TypeScript type definitions
├── utils/                  # Utility functions (config, formatting, etc.)
├── entrypoint.ts           # App entry point
├── .env.example            # Environment template
├── package.json            # Dependencies and scripts
└── README.md               # Project documentation

Key Features

Embedded wallet authentication via Openfort Shield
Dual-wallet management with gas-sponsored USDC transfers
Faucet integration for Sepolia USDC
Real-time balance polling across networks

Component	Technology
Frontend	React Native + Expo
Blockchain	Ethereum Sepolia & Base Sepolia
Key Libraries	`@openfort/react-native`, `expo-router`
Tooling	Expo CLI

Quick Start

Clone the repository using gitpick:

pnpx gitpick openfort-xyz/recipes-hub/tree/main/usdc openfort-usdc
cd openfort-usdc

Prerequisites

Node.js 18+
XCode for iOS with iOS Simulator
Android Studio for Android with Android Emulator (if targeting Android)
Openfort account with Shield configuration and provider policy

Backend Setup

Set up the backend server required for Openfort Shield authentication:

git clone https://github.com/openfort-xyz/openfort-backend-quickstart.git
cd openfort-backend-quickstart
cp .env.example .env
# Add your Openfort credentials to .env
pnpm install
pnpm dev

The backend runs on http://localhost:3000 and provides the /api/protected-create-encryption-session endpoint. See the Openfort Backend Quickstart for details.

Configure Environment

cp .env.example .env.local

Add your Openfort credentials to .env.local:

OPENFORT_PROJECT_PUBLISHABLE_KEY=pk_test_your_publishable_key
OPENFORT_SHIELD_PUBLISHABLE_KEY=pk_test_your_shield_key
OPENFORT_SHIELD_RECOVERY_BASE_URL=http://localhost:3000
OPENFORT_ETHEREUM_PROVIDER_POLICY_ID=pol_your_policy_id

Install & Run

pnpm install
pnpm run ios     # Launch on iOS simulator
pnpm run android # Launch on Android emulator

Usage

Authenticate and create two embedded wallets
Fund wallets with Sepolia USDC from Circle's faucet
Transfer USDC between wallets with gas sponsorship