Buffer Finance

Decentralized Trading Platform

To run this project locally

• Install Dependencies yarn install
• Configure App Either Create a file named .env.local with content: VITE_ENV = MAINNET VITE_MODE = developement BASE_PATH = public
  OR
  Rename .env.sample -> .env.local
  *You can set VITE_ENV to TESTNET also.
• Start Developement Server Run yarn dev from terminal

What we used for

1. Wallet Connection
For wallet connection we used RainbowKit. It provides a cleaner interface for connection while hiding the sheer complexities (different wallet providers, Network not present, Handling Connection states etc…) involved in wallet connection.
2. Contract Interaction
For this we used wagmi hooks.

• For executing Write-Calls We specifically used this hook to create a ethers.js like contract instance in this service For Read-Calls We have a specific requirement to use the user's wallets injected connector’s rpc for read calls if connected. We also used swr for caching and revalidating data. These 2 things are implemented inside this service,
• For executing Read-Calls. We have a specific requirement to use the user's wallets injected connector’s rpc for read calls if connected. So we implemented our own service using swr.
3. Trading View
How we integrated it:
1. Get access to their widget’s github repo by clicking on “Get Library” under Technical Analysis Charts section from here
2. Copy/Paste there static/charting_library folder into your project’s public directory.
3. Integrate there static files into you dynamic react component - They have one example with plain old React’s Class Based Components but we are heavily using Functional Components and custom hooks in our repo. So we converted there example into Functional Components. You can have a look at integration from here.
4. Write a JS-API which serves as a data-feed for your TradingView. This API should contain 5-6 mandatory methods which TradingView expects us to implement. We named that as a datafeed here
5. Visualise positions using their APIs - Code is in same file.
6. Implement an auto-save mechanism for drawings on TradingView.

Connect with us on