Get Started
GetStarted
Resources
You can get more detailed information about the SDK Documentation Details
Check out the online demos, and the corresponding github address repository
Get Started
Installing dependencies
yarn add @vinci-protocol/domains @reduxjs/toolkit react-redux
Now we have all the necessary SDKs installed automatically.
Install optional dependencies
This step is an optional operation, If you have API requirements, here is the documentation. Vinci NFT API
yarn add @vinci-protocol/api
Reference in React project
Introducing SDKProvider
import { VinciSDKProvider } from '@vinci-protocol/domains'
Passing configServiceProps to SDKProvider
const Provider: FC = ({ children }) => { const configServiceProps = { provider, // wallet provider web3Provider, market, ...more, // More information inquiry type details, You can view the online code. } return <VinciSDKProvider {...configServiceProps}>{children}</VinciSDKProvider> }
Then introduce the Provider into your app.tsx
Reference in React Redux
Introducing vinciSDKReducers
import { vinciSDKReducers } from '@vinci-protocol/store' const { contract: { erc20: { isApproved }, uiPool: { reservesDataFromAllPools, userReservesDataFromAllPools }, }, } = vinciSDKReducers const reducer = combineReducers({ erc20: combineReducers({ isApproved: isApproved.reducer, }), uiPool: combineReducers({ reservesDataFromAllPools: reservesDataFromAllPools.reducer, userReservesDataFromAllPools: userReservesDataFromAllPools.reducer, }), }) export function makeStore() { return configureStore({ reducer: { contract: reducer, }, }) } const store = makeStore()
This way we can manage all the data in Redux.
Then call the method anywhere under the Provider scope to get the data
Make sure you have introduced useVinciControllers before getting the data.
import { useVinciControllers } from '@vinci-protocol/domains' const { reservesData, userReservesData, lendingPool, erc721 } = useVinciControllers()
If the ChainID has changed, you need to reset the data and restart to get the data.
useChainIDChange({ controllers: [reservesData, userReservesData], }) const useChainIDChange = ({ controllers, ObjectControllers }: ChainIDChangeProps) => { const { chainId } = useWallet() useEffect(() => { controllers.forEach((controller) => { controller.clearData() controller.restart() }) ObjectControllers.forEach((obj) => { Object.keys(obj).forEach((key) => { const controller = obj[key] controller.clearData() controller.restart() }) }) }, [chainId]) }
Get data using useVinciContractData
import { useVinciContractData } from '@vinci-protocol/domains' const { generalAssets, nftAssets, dashboard } = useVinciContractData() console.log({ generalAssets, nftAssets, dashboard })
Interacting with Contracts, More Methods View Details
import { useVinciControllers } from '@vinci-protocol/domains' const { lendingPool, erc721 } = useVinciControllers() lendingPool.deposit.post(props) lendingPool.deposit.withdrawNFT(props)
Now you can create NFT lending DApp based on your own custom UI
Last updated