Open-Sourced UI
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.
Context: MarkPrices10
Fetches the mark price for all assets in the registry
Dependencies: none
Context: SubvoltLoader10
Loads all subvolt data for all subvolts
Returns {
allLoaded: boolean,
subvoltData: Record<GlobalId, Subvolt1Data | null>
}
Soft dependencies:
- MarkPrices10: If markPrices10 is loaded, will calculate and return the info in Subvolt1Data
Context: UserDeposits10
Loads deposit information for all subvolts for the connected user
Returns {
allLoaded: boolean,
depositsForUser: Record<GlobalId, Subvolt1Data | null>
}
Dependencies:
- SubvoltLoader10 (the dependency is due to voltVaultData being loaded)
- useConnectedWallet
MarkPrices10
↳ SubvoltLoader10
↳ UserDeposits10
↳ useCards
↳ 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
depositedForAssets
and vaultsForAssets
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
AsyncButton09
includes goodies
object which is what those functions in transactionHandler.ts
require 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
SubvoltLoader10.tsx
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!
Last modified 5mo ago