LogoLogo
  • 🌊Superfluid
  • Protocol Overview
    • 💡What is Superfluid?
    • 📄In-Depth Overview
      • Super Tokens
      • Super Agreements
        • 🚰Money Streaming (CFA)
        • ✳️Distributions (IDA)
        • 🌊Streaming Distributions
      • Super Apps
      • Superfluid Host
    • 🧠Use Cases
      • Recurring Payments
      • DeFi
      • Social & Community
      • Gaming
    • 📔Glossary of Terms
  • Developers
    • 🏃Quickstart
    • 🪙Super Tokens
      • Super Tokens - Solidity
      • Super Tokens - SDK Core
      • Super Tokens - Frontend Examples
      • Types of Super Tokens
      • Deploy a Super Token
        • Deploying a Wrapper Super Token
        • Deploying a Self Governed Super Token
        • Deploying a Pure Super Token
      • In-Depth
        • Tracking Super Token Balances
        • ERC777 in Super Tokens
      • Test Super Token Faucet
    • 🌊Money Streaming (CFA)
      • Solidity
        • Read Methods
          • getFlowInfo
          • getFlowRate
          • getNetFlowRate
        • Write Methods
          • createFlow
          • updateFlow
          • deleteFlow
          • With User Data
          • With Context
      • SDK Core
        • Read Methods
          • getFlow
          • getNetFlow
          • getAccountFlowInfo
        • Write Methods
          • createFlow
          • updateFlow
          • deleteFlow
      • Access Control List (ACL)
        • Solidity
          • createFlowFrom
          • updateFlowFrom
          • deleteFlowFrom
          • setFlowPermissions
          • setMaxFlowPermissions
          • revokeFlowPermissions
          • increaseFlowRateAllowanceWithPermissions
          • decreaseFlowRateAllowanceWithPermissions
          • getFlowPermissions
        • SDK Core
          • createFlowByOperator
          • updateFlowByOperator
          • deleteFlowByOperator
          • updateFlowOperatorPermissions
          • revokeFlowOperatorPermissions
          • increaseFlowRateAllowanceWithPermissions
          • getFlowOperatorData
      • Frontend Examples
      • More...
        • Flow Rate Time Frames
        • Building Batched Streams in Safe
        • Flow NFTs
    • ✳️Distributions (IDA)
      • IDA - Solidity
      • IDA - SDK Core
      • IDA - Frontend Examples
    • 🤖Super Apps
      • Super Apps in Depth
      • Super App Callbacks
        • Calling Agreements In Super Apps
      • User Data
        • NFT Billboard Example
      • SuperAppBaseFlow
      • Super App Examples
      • Super App Deployment Guide
    • 🧺Batch Calls
      • Batch Calls - SDK Core
      • Batch Calls - Frontend Examples
    • ⚙️Automations
      • Auto-Wrap
        • Dev Guide
      • Stream Scheduler
        • Dev Guide
      • Vesting Scheduler
        • Dev Guide
      • Stream Accounting API
        • Dev Guide
      • Automation Subgraphs
        • Stream Scheduler Subgraph
        • Vesting Scheduler Subgraph
        • Auto Wrap Subgraph
    • 🏗️Integration Guides
      • For Your Integration: The Basics
        • Supporting Super Tokens
        • Supporting Money Streams
        • Supporting Instant Distributions
      • Gating with Superfluid Subscriptions & Guild.xyz
      • Displaying Token Balances
      • Useful Queries for Your Integration
        • Instant Distribution Events
        • Money Streaming Events
        • Super Token Events
        • Other Helpful Queries
      • Constructing Links to The Superfluid Dashboard
    • 🔁Superfluid Subscriptions
      • Superfluid Checkout Widget
      • Implementing Subscriptions in your App
    • SDK Core General
      • Initialization
      • Functionality
      • Getting Data
      • Resolver
      • Reference Docs
    • Solidity General
      • Calling Super Agreements
      • Libraries
      • Resolver
    • Testing Guide
      • Hardhat Testing
      • Foundry Testing
      • In-Depth
        • Hardhat Mainnet Fork Testing
        • Super App Testing on Mainnet Forks
    • Subgraph
    • Reference
      • Deploying The Framework
      • EVM Contracts
      • SDK Redux
      • Superfluid Console
      • Superfluid Protocol Addresses
    • Contract Addresses
  • Sentinels
    • 🥅Liquidations & TOGA
    • 🤖Running a Sentinel
    • 🗺️Solvency Dashboard
  • Resources
    • 🌊Superfluid Wave Pool
    • 📜Superfluid on Ethereum Mainnet
    • 💰Bounty Program
    • 🛡️Security & Bug Bounties
    • 💡Project Ideas
    • 🗳️Token Dashboard Submission
    • 🎥Videos
    • Superfluid Deployment Guide
    • Learn about Ethereum
    • Code of Conduct
Powered by GitBook
On this page
  • Getting Standard Account Balances
  • Displaying an Account’s Streaming Balance in Your Own App

Was this helpful?

  1. Developers
  2. Integration Guides

Displaying Token Balances

Getting Super Token Balances - Both Static and Dynamic

PreviousGating with Superfluid Subscriptions & Guild.xyzNextUseful Queries for Your Integration

Last updated 2 years ago

Was this helpful?

Getting Standard Account Balances

To get an account’s balance, you can call balanceOf() on each individual Super Token contract, and pass in the address of the account you’re looking to query as the lone param. This works just like an ERC20 balanceOf() call.

Displaying an Account’s Streaming Balance in Your Own App

Our guess is that you want to display something like this in your own app:

balanceOf()will give you the balance of the token holder as of the most recent block.timestamp value, but you won’t be able to call this function fast enough to render a truly by-the-second real time balance animation in your application. As such, we recommend using a combination of an animation which takes into consideration the static balance of the user, the netflow of the user for each token, and regular polling of the Superfluid subgraph to check for updates to a user’s net flow.

What we’ve seen other teams do is take into consideration the static balance & dynamic balance of each user by listening for flowUpdatedEvents, indexUpdatedEvents, transferEvents, and upgrade/downgrade events to generate the correct up to date token balance. From here, if a user is actively sending or receiving streams for a token, an animation helps to bring this to life & usually gets really positive reviews.

If you’re interested in seeing an example of how the streaming animation works via our console, you should take a look at this component:

🏗️
Logosuperfluid-console/FlowingBalance.tsx at master · superfluid-finance/superfluid-consoleGitHub
we love a good streaming balance