Skip to content

XION Provider

Using the XION Provider with React

To use XION, simply wrap the AbstractProvider with the AbstraxionProvider and pass in its config object.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AbstraxionProvider } from "@burnt-labs/abstraxion";
import { createConfig, AbstractProvider } from '@abstract-money/react'
import { xionProvider } from '@abstract-money/provider-xion'
 
const config = createConfig({ 
  apiUrl: 'https://xion.api.abstract.money/graphql', 
  provider: xionProvider 
}) 
 
const client = new QueryClient()
 
const YOUR_CONTRACT_ADDRESS = 'xion1...xyz'; 
 
const ABSTRAXION_CONFIG = { 
  contracts: [ 
    // Usually, you would have a list of different contracts here
    { 
      address: YOUR_CONTRACT_ADDRESS, 
      amounts: [{ denom: 'uxion', amount: "1000000" }], 
    }, 
  ], 
  bank: [ 
    { 
      denom: 'uxion', 
      amount: "1000000", 
    }, 
  ], 
}; 
 
export function App() {
  return (
    <AbstraxionProvider config={ABSTRAXION_CONFIG}>
      <QueryClientProvider client={client}>
        <AbstractProvider config={config}>
          {/*...*/}
        </AbstractProvider>
      </QueryClientProvider>
    </AbstraxionProvider> 
  )
}