MVP - Development Prototype
At its heart, this is a wagmi + Web3Modal + Vite project bootstrapped with create-wagmi
The amazing UI was designed by @jasu and developed by @titesan with inception and integration work by @links and additional development by @tomtranmer.
- USDC - implemented 4/17/2023 - tt
- ENS (completed: testing procedure)
- added in possibleAssets
- FUNCTIONS: label, logo, (+ image file SIZE/FORMAT std?), conversion(TEMP): pool price, emailData, sumTransactions (summary functions)
- DATA: generated data file (copy POOL), pulled annual data from CG (require user test and review for final confimration of implementation)
- USDT
- FF (forefront)
- UNITY
- MATIC
- WMATIC
- Get Info: data/possibleAssets.jsx - active token label array for possibilities - as output on chain record - e.g. "USDC" Note: Order of display on selection list is determined by the order of this data array.
- TOKEN NAME DISPLAY: functions/getTokenLabel.tsx - this will control the output of the NAME of the token in APP e.g. if(asset==="USDC"){ return "USDC Stablecoin" }
- TOKEN LOGO DISPLAY: functions/getTokenLogo.tsx - e.g. if(asset === "USDC"){ return "/img/token/usdc-logo.png" } && add file in public/img/token - prefer min. 400x400px min square or transparent image and will be displayed as round. Limit to ~100kB image.
- TOKEN DISPLAY AMOUNT (optional override): functions/displayTokenAmount.tsx - for tokens that require a more or fewer than 3 significant digits (i.e. ETH, WBTC) - e.g. if(asset === "WETH"){ return parseFloat(value).toFixed(6) + " " + asset }
- TOKEN CONVERT AMOUNT: functions/displayConvertAmount.tsx - e.g. if(asset === "WETH") { //a bit more heavy lifting with this one, requiring data , contact tom }
- (auto) TOKEN VISUAL CHECKBOX: components/AccountForm/FormSecondStep.jsx - updated in possible assets && activeAssets state variable to include new selectable token.
- DATA FILES UPDATE: data/XYZ_feed_2022.tsx - provide USD, CAD pricing objects in output bundle. Using https://www.coingecko.com/en/api/documentation. Import data file into functions/displayConvertAmount.tsx & set convertion specifications.
- OUTPUT LABELS: functions/exportData.jsx && functions/exportData.jsx - Labels for output - TBD automate import and formatting from possibleAssets data.
Run npm run dev in your terminal, and then open localhost:5173 in your browser.
Once the webpage has loaded, changes made to files inside the src/ directory (e.g. src/App.tsx) will automatically update the webpage.
To learn more about Vite or wagmi, check out the following resources:
- wagmi Documentation – learn about wagmi Hooks and API.
- wagmi Examples – a suite of simple examples using wagmi.
- Web3Modal Documentation – learn more about Web3Modal (configuration, theming, advanced usage, etc).
- Vite Documentation – learn about Vite features and API.