Get Started
GetStarted
- 1.Installing dependenciesyarn add @vinci-protocol/domains @reduxjs/toolkit react-reduxNow we have all the necessary SDKs installed automatically.
- 2.Install optional dependenciesThis step is an optional operation, If you have API requirements, here is the documentation. Vinci NFT APIyarn add @vinci-protocol/api
- 3.Reference in React projectIntroducing SDKProviderimport { VinciSDKProvider } from '@vinci-protocol/domains'Passing configServiceProps to SDKProviderconst Provider: FC = ({ children }) => {const configServiceProps = {provider, // wallet providerweb3Provider,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
- 4.Reference in React ReduxIntroducing vinciSDKReducersimport { vinciSDKReducers } from '@vinci-protocol/store'const {contract: {erc20: { isApproved },uiPool: { reservesDataFromAllPools, userReservesDataFromAllPools },},} = vinciSDKReducersconst 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.
- 5.Then call the method anywhere under the Provider scope to get the dataMake 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 useVinciContractDataimport { useVinciContractData } from '@vinci-protocol/domains'const { generalAssets, nftAssets, dashboard } = useVinciContractData()console.log({ generalAssets, nftAssets, dashboard })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 modified 10mo ago