Skip to content

Getting Started on Radius Testnet

Build your first gasless application on Radius testnet in under 5 minutes.

Prerequisites

  • Node.js 18+ installed
  • A wallet (MetaMask, Coinbase Wallet, or WalletConnect)
  • An SBC API key from dashboard.stablecoin.xyz

Quick Start: Create Your App

The fastest way to start is using create-sbc-app:

# Create a new Radius app
npx create-sbc-app my-radius-app --chain radiusTestnet
 
# Navigate to your project
cd my-radius-app
 
# Install dependencies
pnpm install
 
# Start development server
pnpm dev

Your app is now running at http://localhost:5173 with:

  • Smart account management
  • Gasless transactions
  • Radius testnet pre-configured

Manual Setup

1. Install Dependencies

npm install @stablecoin.xyz/react @stablecoin.xyz/core viem

2. Configure Radius Chain

Create a file src/config/radius.ts with the chain configuration. See Configuration Reference for the complete setup.

3. Wrap Your App with SBC Provider

// src/App.tsx
import { SbcProvider, WalletButton } from '@stablecoin.xyz/react'
import { radiusTestnet } from './config/radius'
 
const config = {
  apiKey: import.meta.env.VITE_SBC_API_KEY,
  chain: radiusTestnet,
  wallet: 'auto', // Auto-detect available wallets
  debug: true
}
 
function App() {
  return (
    <SbcProvider config={config}>
      <YourApp />
    </SbcProvider>
  )
}
 
function YourApp() {
  const { account } = useSbcApp()
 
  return (
    <div>
      <WalletButton>Connect Wallet</WalletButton>
      {account && (
        <p>Smart Account: {account.address}</p>
      )}
    </div>
  )
}

4. Send a Gasless Transaction

// src/components/SendTransaction.tsx
import { useUserOperation } from '@stablecoin.xyz/react'
 
function SendTransaction() {
  const { sendUserOperation, isLoading, isSuccess, error } = useUserOperation()
 
  const handleSend = async () => {
    await sendUserOperation({
      to: '0x742d35Cc6641C4532B4d4c7B4C0D1C3d4e5f6789',
      value: '1000000000000000000', // 1 USD (native)
      data: '0x'
    })
  }
 
  return (
    <div>
      <button onClick={handleSend} disabled={isLoading}>
        {isLoading ? 'Sending...' : 'Send 1 USD'}
      </button>
      {isSuccess && <p>Transaction sent!</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  )
}

5. Environment Variables

Create a .env file:

VITE_SBC_API_KEY=your_api_key_here

Get Test Tokens

The Radius faucet will be available at XXX (coming soon). You'll need test tokens to interact with contracts on Radius.

Common Patterns

Batch Transactions

Execute multiple operations in a single gasless transaction:

await sendUserOperation({
  calls: [
    {
      to: '0xTokenAddress...',
      data: '0xa9059cbb...', // transfer(address,uint256)
      value: 0n
    },
    {
      to: '0xNftAddress...',
      data: '0x...', // mint function
      value: 0n
    },
    {
      to: '0xRecipient...',
      data: '0x',
      value: 1000000000000000000n
    }
  ]
})

Contract Interaction

import { encodeFunctionData, parseAbi } from 'viem'
 
const usdcAbi = parseAbi([
  'function transfer(address to, uint256 amount) returns (bool)'
])
 
await sendUserOperation({
  to: '0xUsdcContractAddress...',
  data: encodeFunctionData({
    abi: usdcAbi,
    functionName: 'transfer',
    args: ['0xRecipient...', 1000000n] // 1 USDC (6 decimals)
  }),
  value: 0n
})

Estimate Gas

Preview gas costs before sending:

import { useSbcApp } from '@stablecoin.xyz/react'
 
function GasEstimate() {
  const { sbcAppKit } = useSbcApp()
 
  const estimate = async () => {
    const estimate = await sbcAppKit.estimateUserOperationGas({
      to: '0x...',
      value: '1000000000000000000',
      data: '0x'
    })
    console.log('Gas estimate:', estimate)
  }
 
  return <button onClick={estimate}>Estimate Gas</button>
}

Switching from Base to Radius

The SBC AppKit handles chain differences automatically. To switch:

// Before (Base Sepolia)
import { baseSepolia } from 'viem/chains'
const config = { apiKey, chain: baseSepolia }
 
// After (Radius)
import { radiusTestnet } from './config/radius'
const config = { apiKey, chain: radiusTestnet }

That's it! The SDK automatically:

  • Uses the correct EntryPoint address
  • Switches to SimpleAccount (from Kernel)
  • Adjusts for free gas (0 gwei)

Troubleshooting

"Invalid EntryPoint" Error

Make sure you're using the Radius custom EntryPoint:

// Correct: 0xfA15FF1e8e3a66737fb161e4f9Fa8935daD7B04F
// Wrong: 0x0000000071727De22E5E9d8BAf0edAc6f37da032 (canonical)

"Insufficient Balance" Error

Even though gas is free, you may need test tokens for contract interactions. Use the faucet.

"Chain Not Configured" Error

Add Radius to MetaMask manually:

Network Name: Radius Testnet
RPC URL: https://rpc.testnet.radiustech.xyz
Chain ID: 72344
Currency Symbol: USD

Next Steps

Live Examples