Dive into our open-source frontend and learn how our UI interacts with Solana!
Objective: focus here is on Solana specific code and not so much on react or css
An important concept this UI uses is a waterfall style data flow. As many UI components have dependencies such as price of assets, user deposit info, and Volt specific data, we need a way to propagate this data based on dependency.
Fetches the mark price for all assets in the registry
Loads all subvolt data for all subvolts
subvoltData: Record<GlobalId, Subvolt1Data | null>
- MarkPrices10: If markPrices10 is loaded, will calculate and return the info in Subvolt1Data
Loads deposit information for all subvolts for the connected user
depositsForUser: Record<GlobalId, Subvolt1Data | null>
- SubvoltLoader10 (the dependency is due to voltVaultData being loaded)
↳ React components
registry10.tsx - Contains important metadata
AppProviders.tsx - View all the providers as well as see how we use @solana/wallet-adapter-wallets
EvilTwinSisterOfVFAC.tsx - UserDeposits10.tsx actually depends on this file for
OwnedTokenAccounts.tsx - Load connected wallet's tokens
transactionHandler.ts - Where the actual use of Friktion's SDK is to deposit/withdraw/etc
You will notice
goodiesobject which is what those functions in
transactionHandler.tsrequire to perform a transaction.
Sail is a React library for Solana account management and transaction handling. You can also see the use of sail when fetching Volt data in
We will constantly be updating this page as we get feedback and begin to understand where we need to elaborate, so questions are WANTED in the discord
**Note: If you already have a UI and/or are looking to integrate Friktion with your protocol, go here instead!