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

1. Installing dependencies

   yarn add @vinci-protocol/domains @reduxjs/toolkit react-redux

   Now we have all the necessary SDKs installed automatically.

2. 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

3. 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

4. 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.

5. 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