A Guide to Building a USDC Transfer App on Sonic

·

This guide explains how to build a simple React application that allows users to connect their cryptocurrency wallet and transfer USDC, a popular digital dollar stablecoin, on the Sonic blockchain. Sonic is a high-performance, EVM-compatible Layer-1 blockchain, making it an ideal environment for developing decentralized applications (dApps).

Prerequisites for Development

Before you begin, ensure you have the necessary tools and resources set up.

Required Software

You will need a modern development environment, which includes:

Acquiring Testnet Assets

To test transactions on the Sonic Blaze testnet, your wallet will need two types of assets:

Setting Up Your Project

Follow these steps to initialize your React project and install all required dependencies.

Step 1: Create a new project directory and initialize it.
Open your terminal and run the following commands to create the project structure.

mkdir usdc-transfer-app
cd usdc-transfer-app
npm init -y

Step 2: Install the necessary packages.
This command installs React, Vite (a build tool), Viem (a library for blockchain interaction), and their associated type definitions.

npm install react@latest react-dom@latest \
 @types/react@latest @types/react-dom@latest \
 @vitejs/plugin-react@latest typescript@latest \
 vite@latest viem@latest

Step 3: Configure your project scripts.
Verify your package.json file includes a scripts section to run the development server.

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

Configuring the Blockchain Connection

To enable your application to read from and write to the Sonic blockchain, you need to configure clients. Create a new file src/clients.ts with the following code.

This code sets up two clients: a public client for reading blockchain data and a wallet client for initiating transactions signed by the user's wallet.

import { http, createPublicClient, createWalletClient, custom } from 'viem';
import { sonicBlazeTestnet } from 'viem/chains';

declare global {
  interface Window {
    ethereum: any;
  }
}

export const publicClient = createPublicClient({
  chain: sonicBlazeTestnet,
  transport: http(),
});

export const walletClient = createWalletClient({
  chain: sonicBlazeTestnet,
  transport: custom(window.ethereum),
});

Defining the USDC Contract

Smart contracts on the blockchain have a specific address and an ABI (Application Binary Interface) that defines their functions. Create src/constants.ts to store this information for the USDC contract.

This file defines the contract's address on the testnet and the ABI for the two functions we will use: checking a balance and transferring tokens.

export const USDC_CONTRACT_ADDRESS = '0xA4879Fed32Ecbef99399e5cbC247E533421C4eC6';

export const USDC_ABI = [
  {
    constant: false,
    inputs: [
      { name: '_to', type: 'address' },
      { name: '_value', type: 'uint256' },
    ],
    name: 'transfer',
    outputs: [{ name: '', type: 'bool' }],
    type: 'function',
  },
  {
    constant: true,
    inputs: [{ name: '_owner', type: 'address' }],
    name: 'balanceOf',
    outputs: [{ name: 'balance', type: 'uint256' }],
    type: 'function',
  },
];

Building the Application Logic

The main application component is built in src/App.tsx. This React component handles wallet connection, displays the user's USDC balance, and provides a form to execute transfers.

The core functions within this component are:

The component manages state for the user's account, balance, transaction status, and form inputs, providing a responsive user experience.

Finalizing the Setup

To render your application, you need an entry point. Create src/main.tsx to bootstrap the React app.

import React from 'react';
import ReactDOM from 'react-dom/client';
import USDCApp from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <USDCApp />
  </React.StrictMode>
);

Then, create an index.html file to serve as the base page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>USDC Transfer Sample App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Running Your USDC Transfer DApp

Once all the code is in place, you can start the development server by running the command npm run dev in your terminal. This will start the Vite server and typically make your application available at http://localhost:5173.

Open this URL in your browser with MetaMask installed. Connect your wallet, ensure it is connected to the Sonic Blaze testnet and has test tokens, and you can begin experimenting with USDC transfers. 👉 Explore more strategies for building on blockchain

Frequently Asked Questions

What is USDC?
USDC (USD Coin) is a fully-regulated, fully-reserved stablecoin issued by Circle. Each USDC token is backed by one U.S. dollar held in reserve, making it a reliable digital dollar for the crypto ecosystem. It is widely used for trading, payments, and transferring value on various blockchains.

Why use the Sonic testnet for development?
The Sonic Blaze testnet provides a risk-free environment that mimics the main Sonic network. Developers can test their smart contracts and dApp functionality without spending real money on gas fees, ensuring everything works correctly before deploying to the mainnet.

What if my transaction fails?
Transaction failures can occur for several reasons. The most common causes are insufficient S tokens for gas fees, inputting an invalid recipient address, or a network congestion issue. Check your wallet's gas token balance and verify all information before confirming the transaction.

How is this different from sending native cryptocurrency?
Sending native tokens (like S or ETH) is a simple value transfer built into the blockchain. Sending a token like USDC requires interacting with its smart contract. The contract's transfer function is called to deduct the amount from your balance and add it to the recipient's balance within the contract's state.

Can I use this code for other EVM blockchains?
Yes, the core logic is portable. This application uses the Viem library, which is chain-agnostic. To target a different Ethereum Virtual Machine (EVM) compatible network, you would need to change the chain configuration in the client setup and use the correct USDC contract address for that specific chain.

Where can I learn more about smart contract interactions?
A great next step is to explore the documentation for libraries like Viem or Ethers.js. These resources provide deep dives into reading from and writing to smart contracts, listening for blockchain events, and handling more complex transaction types. 👉 Get advanced methods for Web3 development