Skip to main content

Balance Management

This guide covers querying and displaying token balances using the Privacy Boost React Native SDK.

Basic Usage

import { PrivacyBoost } from '@sunnyside-io/privacy-boost-react-native';

const balance = await sdk.getBalance('0x...token-address');
console.log('Shielded:', balance.shieldedBalance);
console.log('Wallet:', balance.walletBalance);

TokenBalance Type

interface TokenBalance {
  tokenAddress: string;
  shieldedBalance: string;  // Amount in wei
  walletBalance: string;    // Amount in wei
  symbol?: string;
  decimals: number;
}

Getting All Balances

const allBalances = await sdk.getAllBalances();
for (const balance of allBalances) {
  const formatted = sdk.formatAmount(balance.shieldedBalance, balance.decimals);
  console.log(`${balance.symbol}: ${formatted} (shielded)`);
}

Formatting Balances

const balance = await sdk.getBalance(tokenAddress);

// Format wei to human-readable
const shielded = sdk.formatAmount(balance.shieldedBalance, balance.decimals);
const wallet = sdk.formatAmount(balance.walletBalance, balance.decimals);

console.log(`Shielded: ${shielded} ${balance.symbol}`);
console.log(`Wallet: ${wallet} ${balance.symbol}`);

Complete Example

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList, Button, ActivityIndicator } from 'react-native';

function BalanceScreen({ sdk }: { sdk: PrivacyBoost }) {
  const [balances, setBalances] = useState<TokenBalance[]>([]);
  const [loading, setLoading] = useState(true);

  const loadBalances = async () => {
    try {
      const allBalances = await sdk.getAllBalances();
      setBalances(allBalances);
    } catch (error) {
      console.log('Failed to load balances:', error);
    }
    setLoading(false);
  };

  useEffect(() => {
    loadBalances();
  }, []);

  if (loading) return <ActivityIndicator />;

  return (
    <View style={{ padding: 16 }}>
      <FlatList
        data={balances}
        keyExtractor={(item) => item.tokenAddress}
        renderItem={({ item }) => (
          <View style={{ paddingVertical: 8 }}>
            <Text style={{ fontWeight: 'bold' }}>{item.symbol ?? item.tokenAddress}</Text>
            <Text>Shielded: {sdk.formatAmount(item.shieldedBalance, item.decimals)}</Text>
            <Text>Wallet: {sdk.formatAmount(item.walletBalance, item.decimals)}</Text>
          </View>
        )}
        ListEmptyComponent={<Text>No balances found</Text>}
      />
      <Button title="Refresh" onPress={loadBalances} />
    </View>
  );
}

Error Handling

import { SdkError } from '@sunnyside-io/privacy-boost-react-native';

try {
  const balance = await sdk.getBalance(tokenAddress);
} catch (error) {
  if (SdkError.NotAuthenticated.instanceOf(error)) {
    console.log('Please log in first');
  } else if (SdkError.NetworkError.instanceOf(error)) {
    console.log('Network error');
  } else {
    console.log('Balance error:', error);
  }
}

Best Practices

1. Format Balances for Display

Always use sdk.formatAmount() to convert wei strings to human-readable values.

2. Refresh After Operations

Refresh balances after deposits, withdrawals, or transfers to show the latest state.

3. Show Loading States

Balance fetching requires network calls. Always show a loading indicator while data loads.

Next Steps