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 vaultsForAssetsOwnedTokenAccounts.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.tsxLast modified 5mo ago