Skip to content

Getting Started on Radius

Build your first gasless application on Radius 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 (testnet)
npx create-sbc-app my-radius-app --chain radiusTestnet
 
# Or target Radius mainnet
npx create-sbc-app my-radius-app --chain radius
 
# 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 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 RUSD (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 is available at https://testnet.radiustech.xyz/wallet. 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 Radius fixed gas pricing (ensures maxPriorityFeePerGas equals maxFeePerGas)
  • Handles receipt polling via bundler status (avoids getLogs block range limits)

Troubleshooting

"Invalid EntryPoint" Error

Make sure you're using the Radius custom EntryPoint:

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

"Insufficient Balance" Error

Gas fees on Radius are extremely low, but 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: RUSD

Next Steps

Live Examples