0.19.20 • Published 5 months ago
@abstract-money/abstract.js-react v0.19.20
Abstract React
Getting Started
- Install Abstract.js-react and React Query
pnpm install @abstract-money/abstract.js-react
- 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
Install the necessary packages (see https://github.com/AbstractSDK/frontend/)
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
- Install cosmos-kit
pnpm install @cosmos-kit/react @cosmos-kit/keplr chain-registry
See the cosmos-kit getting started guide for further details:
Notes
- 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,
}),
],
},
},
});
0.19.20
5 months ago
0.19.15
6 months ago
0.19.16
6 months ago
0.19.17
5 months ago
0.19.18
5 months ago
0.19.19
5 months ago
0.19.11
6 months ago
0.19.12
6 months ago
0.19.13
6 months ago
0.19.10
6 months ago
0.19.9
7 months ago
0.19.0
7 months ago
0.19.1
7 months ago
0.17.3
10 months ago
0.17.4
10 months ago
0.17.5
10 months ago
0.17.6
10 months ago
0.17.7
9 months ago
0.19.6
7 months ago
0.17.8
9 months ago
0.19.7
7 months ago
0.17.9
9 months ago
0.17.0
10 months ago
0.17.1
10 months ago
0.15.4
11 months ago
0.15.5
11 months ago
0.15.6
11 months ago
0.15.2
11 months ago
0.15.3
11 months ago
0.15.0
12 months ago
0.14.2
1 year ago
0.14.1
1 year ago