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
Introduction
Resources
Last modified 3mo ago