@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>
);

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 ployfill 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,
        }),
      ],
    },
  },

})