Get started
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 i @abstract-money/react @abstract-money/provider-cosmoskit
Using graz:
npm i @abstract-money/react @abstract-money/provider-graz
Using XION abstraxion:
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
- Install
@tanstack/react-query@^4
.
npm i @tanstack/react-query@^4
- Next, outside the
AbstractProvider
, wrap yourAbstractProvider
withQueryClientProvider
and pass a newQueryClient
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>
)
}
- 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>
)
}