@abstract-money/abstract.js-react

Abstract React

Getting Started

1. Install Abstract.js-react and React Query

pnpm install @abstract-money/abstract.js-react

1. Add the AbstractProvider to the root providers in your app.

const App = () => (
  <ChakraProvider theme={theme}>
+   <AbstractProvider>
      <Router>
        <Layout>
          <Routings />
        </Layout>
      </Router>
+   </AbstractProvider>
  </ChakraProvider>
);

Querying Abstract API

1. Install the necessary packages (see https://github.com/AbstractSDK/frontend/)

2. Create a query hook and connect your component to it:

import {
  AbstractAccountId,
  useApiQuery,
} from "@abstract-money/abstract.js-react";

import { gql } from "../__generated__/gql";

const accountInfoQuery = gql(/* GraphQL */ `
  query AccountsByIds($ids: [AccountIdWithChain!]!) {
    accountsByIds(ids: $ids) {
      info {
        name
        chainId
        governance {
          governanceType
          owner
        }
        description
        link
      }
    }
  }
`);

const useAccountInfoQuery = ({ accountId }: { accountId: string }) => {
  const accountIdDecoded = AbstractAccountId.fromStringId(accountId);

  return useApiQuery(
    {
      select: (data) => data.accountsByIds[0].info,
      queryKey: ["api", "accountInfo", accountIdDecoded],
    },

    accountInfoQuery,
    { ids: [accountIdDecoded.toApi()] }
  );
};

export const DashboardPage = () => {
  const { data, error, isError, isLoading } = useAccountInfoQuery({
    accountId: "kujiratestnet-20",
  });

  return data === undefined ? (
    <>
      {isLoading ? <div>Loading...</div> : null}
      {isError ? <div>{error.message}</div> : null}
    </>
  ) : (
    <div>
      <h1>{data.name}</h1>
      <p>{data.chainId}</p>
      <span>{data.governance.owner}</span>
      <p>{data.description}</p>
    </div>
  );
};

Integrating Wallets

1. Install cosmos-kit

pnpm install @cosmos-kit/react @cosmos-kit/keplr chain-registry

See the cosmos-kit getting started guide for further details:

Notes

1. We'd also recommend installing react-query for state management:

pnpm install @tanstack/react-query@v4 @tanstack/react-query-devtools

Using Vite

If you're using Vite, you'll have to polyfill the common modules.

pnpm install rollup-plugin-node-polyfills @esbuild-plugins/node-globals-polyfill

// vite.config.ts
import rollupNodePolyFill from "rollup-plugin-node-polyfills";

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        rollupNodePolyFill(),
      ],
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: "globalThis",
      },
      plugins: [
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        NodeGlobalsPolyfillPlugin({
          process: true,
          buffer: true,
        }),
      ],
    },
  },
});