Skip to content

Get started

Get started with Abstract SDK with just a few lines of code.

Overview

abstract.js is a TypeScript interface for Abstract apps that provides low-level stateless primitives for interacting with Abstract. abstract.js is focused on developer experience, bundle size, and performance:

  • Developer experience Automatic type safety and inference, comprehensive documentation, composable APIs.
  • Bundle size Tree-shakable lightweight modules.
  • Performance Optimized encoding/parsing, async tasks only when necessary. You can learn more about the rationale behind the project in the Why abstract.js section.

Installation

Using CosmosKit:

npm
npm i @abstract-money/react @abstract-money/provider-cosmoskit

Using graz:

npm
npm i @abstract-money/react @abstract-money/provider-graz

Using XION abstraxion:

npm
npm i @abstract-money/react @abstract-money/provider-xion

Quick Start

1. Set up your Abstract Config & Client Provider

Firstly, set up your Abstract config with a desired provider.

import { createConfig } from '@abstract-money/react'
import { grazProvider } from '@abstract-money/provider-graz'
 
const config = createConfig({ 
  apiUrl: 'https://api.abstract.money/graphql', 
  provider: grazProvider 
}) 

2. Provide the Abstract Config to Abstract Provider

Wrap your app in the AbstractProvider React Context Provider and pass the config you created earlier to the config property.

import { createConfig, AbstractProvider } from '@abstract-money/react'
import { grazProvider } from '@abstract-money/provider-graz'
 
const config = createConfig({
  apiUrl: 'https://testnet.api.abstract.money/graphql',
  provider: grazProvider
})
 
export function App() { 
  return (
    <AbstractProvider config={config}>
      {/*...*/}
    </AbstractProvider> 
  ) 
} 

3. Setup Tanstack Query

  1. Install @tanstack/react-query@^4.
npm
npm i @tanstack/react-query@^4
  1. Next, outside the AbstractProvider, wrap your AbstractProvider with QueryClientProvider and pass a new QueryClient instance to the client property.
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { createConfig, AbstractProvider } from '@abstract-money/react'
import { cosmosKitProvider } from '@abstract-money/provider-cosmoskit'
 
const config = createConfig({
  apiUrl: 'https://testnet.api.abstract.money/graphql',
  provider: cosmosKitProvider
})
 
const client = new QueryClient() 
 
export function App() {
  return (
    <QueryClientProvider client={client}>
      <AbstractProvider config={config}>
        {/*...*/}
      </AbstractProvider>
    </QueryClientProvider> 
  )
}
  1. Check out the TanStack Query docs to learn about the library, APIs, and more.

4. Wrap with your provider's context

Next, you should wrap these contexts with your provider-specific context. For example, if you are using cosmos-kit, you should wrap the AbstractProvider with the ChainProvider.

Other examples:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ChainProvider, defaultModalViews } from "@cosmos-kit/react";
import { wallets as keplrWallets } from "@cosmos-kit/keplr";
import { createConfig, AbstractProvider } from '@abstract-money/react'
import { cosmosKitProvider } from '@abstract-money/provider-cosmoskit'
 
const config = createConfig({
  apiUrl: 'https://testnet.api.abstract.money/graphql',
  provider: cosmosKitProvider
})
 
const client = new QueryClient() 
 
export function App() {
  return (
    <ChainProvider
      chains={["cosmoshub"]}
      wallets={[  
        ...keplrWallets,  
        /*...*/
      ]}
    >
      <QueryClientProvider client={client}>
        <AbstractProvider config={config}>
          {/*...*/}
        </AbstractProvider>
      </QueryClientProvider>
    </ChainProvider> 
  )
}

5. Use Abstract JS hooks

Now that everything is set up, every component inside the Abstract and TanStack Query Providers can use Abstract React Hooks.

import { accountIdToString } from '@abstract-money/core'
import { useAccounts } from '@abstract-money/react'
 
const owner = `...`
 
export default function Page() {
  const accountsQuery = useAccounts({ 
    args: { 
      chains: ['osmosis'], 
      owner, 
    } 
  }) 
 
  if (accountsQuery.isLoading) return <>Loading</>
  if (accountsQuery.isError) return <>Error =(</>
  return accountsQuery.data.map(
    (account, i) => <p key={i}>{accountIdToString(account)}</p>
  )
}