Documentation | United Network

Dashboard Page ​

The Dashboard page is the central hub of the Application, providing users with a comprehensive view of their multi-chain assets. It displays total balances, individual token holdings across different blockchains, and provides quick access to core functionalities like Send, Receive, and Swap.

Key Features ​

  • Total Balance Display: Shows the aggregate value of all tokens in the selected blockchain network, converted to USD.
  • Token List: A detailed list of held tokens, including their symbols, names, balances, and current market prices.
  • Pull-to-Refresh: Allows users to manually trigger a balance update.
  • Token Search and Discovery: Users can search for existing tokens or add custom ones by address.
  • Network-Specific Features: specialized handling for chains like XRP (Infinite Approval) and COTI (Secure Token unlocking).

Token and Balance Management ​

1. Fetching the Token List ​

The list of tokens is managed through a BlockchainManager created via a factory pattern. When the Dashboard or its sub-components (like DashboardList) are initialized, they retrieve the supported tokens for the active RPC provider.

  • Source: BlockchainManager.getTokens()
  • Implementation: getTokensList() in ApiHandler.ts fetches this list.
  • Logic: The application initializes a manager for the current network (e.g., Solana, ETH, BSC) and retrieves the default tokens defined in the network manifest, along with any custom tokens added by the user.

2. Retrieving Balances ​

Balances are fetched asynchronously for each token.

  • Function: setTokenBalance(id, rpcProvider) in ApiHandler.ts.
  • Process:
    1. Retrieve the BlockchainManager for the specified provider.
    2. Get the wallet address associated with the user's public key.
    3. Call token.getAvailableBalance(walletAddress) on the specific token object.
    4. Update the Vuex store with the new balance.

Price Tracking (Tariffs) via CoinGecko ​

The application integrates with CoinGecko (via a client wrapper) to provide real-time pricing and 24-hour price changes for tokens.

PriceProvider Class ​

The PriceProvider class (src/api/pricing.ts) handles all CoinGecko interactions:

  • Registration: Tokens are "registered" with the provider when their price is requested.
  • Batching: To optimize API usage, the provider batches multiple price requests into a single call to CoinGecko's /simple/price endpoint.
  • Caching: Prices are cached for a short duration (e.g., 60 seconds) to prevent redundant network requests.

Fetching Logic ​

  1. Endpoint: api/v3/simple/price
  2. Parameters: ids (comma-separated CoinGecko IDs), vs_currencies=usd, include_24hr_change=true.
  3. Trigger: When setTokenBalance is called, it execution token.getPrice(), which uses the PriceProvider to fetch the latest USD value.

Implementation Description ​

Data Flow ​

  1. User enters Dashboard: Dashboard.vue mounts and loads initialized settings.
  2. DashboardList mounts: Triggers fetchTokenList, which populates the Vuex store with the list of tokens for the current network.
  3. DashboardListItem for each token mounts: Triggers setTokenBalance.
  4. ApiHandler updates Store: setTokenBalance fetches the balance and price, then dispatches user/setTokenBalanceItem.
  5. Reactive UI Update: The Vue components reactively update as the store data changes, showing local loading states until the data arrives.

Usage Example ​

Manually Refreshing Balances ​

If you need to programmatically trigger a full balance refresh for the current network:

javascript
import { setTokensBalances } from '@/api/ApiHandler';

// This will iterate through all tokens in the current manager
// and update their balances/prices in the store.
const refreshAllBalances = async () => {
  try {
    await setTokensBalances(true); // true to force reset existing data in store
    console.log('Balances updated successfully');
  } catch (error) {
    console.error('Failed to refresh balances:', error);
  }
};

Fetching a Specific Token Price ​

Example of how the system fetches a price internally:

javascript
import { PriceProvider } from '@/api/pricing';

const priceProvider = new PriceProvider({
    host: 'https://api.coingecko.com/',
    platform: 'ethereum'
});

async function updateTokenPrice(coingeckoId) {
    const priceInfo = await priceProvider.getPrice(coingeckoId);
    console.log(`USD Price: ${priceInfo.usdPrice}`);
    console.log(`24h Change: ${priceInfo.usd24hChange}%`);
}

Displaying Total Balance in Vue Component ​

javascript
// Inside a Vue component setup()
const tokensBalance = computed(() => { 
  return store.state.user.tokensData?.[store.state.settings.rpcProvider?.name]?.providerUSDBalance;
});