CuberiumLibrary

Installation

To install the dependencies for this library, use the following command:

npm install @apollo/client@3 @tanstack/react-query@4 axios@1 buffer@6 ethers@5 graphql@16 wagmi@0.12

How to Use In order to use CuberiumLibrary, you need to include the following setup in your root tag of the React application.

import React from 'react'
import { WagmiConfig, configureChains, createClient } from 'wagmi'
import { polygonMumbai } from '@wagmi/chains'
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'
import { publicProvider } from 'wagmi/providers/public'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'

const apolloClient = new ApolloClient({
  uri: 'https://api.studio.thegraph.com/query/49091/cuberium/version/latest',
  cache: new InMemoryCache(),
})

const { chains, provider, webSocketProvider } = configureChains(
  [polygonMumbai],
  [publicProvider()],
)

const connector = new MetaMaskConnector({
  chains: [polygonMumbai],
})

const client = createClient({
  connectors: [connector],
  autoConnect: true,
  provider,
  webSocketProvider,
})

const queryClient = new QueryClient()

export const TestProvider = ({ children }) => (
  <QueryClientProvider client={queryClient}>
    <ApolloProvider client={apolloClient}>
      <WagmiConfig client={client}>
        <CuberiumProvider apiUrl="https://cuberium-backend-production.up.railway.app/api">
          {children}
        </CuberiumProvider>
      </WagmiConfig>
    </ApolloProvider>
  </QueryClientProvider>
)

If you want to wait until very end of trunsaction you need to add useWaitForTransaction

Like this

import {usePurchaseRegion, useDebounce} from 'cuberium-library'
import { useWaitForTransaction } from 'wagmi'

export const YourComponent() {
  const [regions, setRegions] = React.useState([{x: 5, y: 5}])

  const {data} = usePurchaseRegion(regions)

  const { isLoading, isSuccess } = useWaitForTransaction({
    hash: data?.hash,
  })

  return (
    <div onClick={() => [{x: 8, y: 8}]}}>Update coords</div>
  )
}

Hooks

Feature region contains all hooks that could be accessed by user without role admin or minter Feature Admin contains hooks that could be accessed by the user of backend and admin roles

If your component have dynamyc params that changes all the time you need to use useDebounce hook fot not to spam requests for example

import {usePurchaseRegion, useDebounce} from 'cuberium-library'

export const YourComponent() {
  const [regions, setRegions] = React.useState([{x: 5, y: 5}])
  const debouncedRegions = useDebounce(regions, 500)

  const {data} = usePurchaseRegion(regions)

  return (
    <div onClick={() => [{x: 8, y: 8}]}}>Update coords</div>
  )
}

Testing locally

In order to test locally you can run sh npm run storybook