diff --git a/README.md b/README.md
index 2038f76a..6a2ab416 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ pnpm add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosm
## Quick start
-Wrap your React app with `` and use available `graz` hooks anywhere:
+Wrap your React app with `` and ``, and use available `graz` hooks anywhere:
```jsx
import { GrazProvider } from "graz";
@@ -65,11 +65,13 @@ const cosmoshub: ChainInfo = {
function App() {
return (
-
-
-
+
+
+
+
+
);
}
```
diff --git a/docs/docs/index.md b/docs/docs/index.md
index f08591ad..14b52400 100644
--- a/docs/docs/index.md
+++ b/docs/docs/index.md
@@ -52,7 +52,7 @@ pnpm add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosm
## Quick start
-Wrap your React app with `` and use available `graz` hooks anywhere:
+Wrap your React app with `` and ``, and use available `graz` hooks anywhere:
```tsx
import { GrazProvider } from "graz";
@@ -65,13 +65,15 @@ const cosmoshub: ChainInfo = {
function App() {
return (
-
-
-
+
+
+
+
+
);
}
```
diff --git a/docs/docs/provider/grazProvider.md b/docs/docs/provider/grazProvider.md
index 44e5351e..afe6e490 100644
--- a/docs/docs/provider/grazProvider.md
+++ b/docs/docs/provider/grazProvider.md
@@ -1,6 +1,7 @@
# GrazProvider
-Provider component which wraps @tanstack/react-query's `QueryClientProvider` and various graz side effects
+Provider component which configures various graz side effects.
+Graz uses `@tanstack/react-query`'s features under the hood, hence you need to wrap `GrazProvider` with `QueryClientProvider`.
#### Usage
@@ -11,44 +12,48 @@ const cosmoshub = {
chainId: "cosmoshub-4",
chainName: "Cosmos Hub",
// ... rest of cosmoshub ChainInfo
-}
+};
const sommelier = {
chainId: "sommelier-1",
chainName: "Sommelier",
// ... rest of sommelier ChainInfo
-}
+};
// example next.js application in _app.tsx
export default function CustomApp({ Component, pageProps }: AppProps) {
+ const onNotFound = () => {
+ console.log("not found");
+ };
+
return (
-
+ {
- console.log("not found")
- },
- multiChainFetchConcurrency: 6
- // ...
- }}
- >
-
-
+ defaultWallet: WalletType.LEAP,
+ onNotFound,
+ multiChainFetchConcurrency: 6,
+ // ...
+ }}
+ >
+
+
+
);
}
```
diff --git a/packages/graz/package.json b/packages/graz/package.json
index d1680319..99afc38a 100644
--- a/packages/graz/package.json
+++ b/packages/graz/package.json
@@ -1,7 +1,7 @@
{
"name": "graz",
"description": "React hooks for Cosmos",
- "version": "0.1.29",
+ "version": "0.2.0",
"author": "Griko Nibras ",
"repository": "https://github.com/graz-sh/graz.git",
"homepage": "https://github.com/graz-sh/graz",
@@ -49,6 +49,7 @@
"@cosmjs/stargate": "<=0.31.3",
"@cosmjs/tendermint-rpc": "<=0.31.3",
"@leapwallet/cosmos-social-login-capsule-provider": "^0.0.41",
+ "@tanstack/react-query": "5.62.0",
"react": ">=17"
},
"dependencies": {
@@ -57,7 +58,6 @@
"@dao-dao/cosmiframe": "0.1.0",
"@keplr-wallet/cosmos": "0.12.156",
"@metamask/providers": "12.0.0",
- "@tanstack/react-query": "5.62.0",
"@terra-money/station-connector": "1.1.0",
"@vectis/extension-client": "^0.7.2",
"@walletconnect/sign-client": "2.17.2",
diff --git a/packages/graz/src/provider/index.tsx b/packages/graz/src/provider/index.tsx
index 6e9eb003..3067216d 100644
--- a/packages/graz/src/provider/index.tsx
+++ b/packages/graz/src/provider/index.tsx
@@ -1,49 +1,43 @@
-import type { QueryClientProviderProps } from "@tanstack/react-query";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { type FC, useEffect } from "react";
+import { type FC, type ReactNode, useEffect } from "react";
import type { ConfigureGrazArgs } from "../actions/configure";
import { configureGraz } from "../actions/configure";
import { ClientOnly } from "./client-only";
import { GrazEvents } from "./events";
-const queryClient = new QueryClient({
- //
-});
-
-export type GrazProviderProps = Partial & {
+export interface GrazProviderProps {
grazOptions: ConfigureGrazArgs;
-};
+ children: ReactNode;
+}
/**
- * Provider component which extends `@tanstack/react-query`'s {@link QueryClientProvider} with built-in query client
- * and various `graz` side effects
- *
+ * Provider component configures various `graz` side effects.
+ * Graz uses `@tanstack/react-query`'s features under the hood, hence you need to wrap `GrazProvider` with `QueryClientProvider`.
* @example
* ```tsx
* // example next.js application in _app.tsx
* export default function CustomApp({ Component, pageProps }: AppProps) {
* return (
- *
- *
- *
+ *
+ *
+ *
+ *
+ *
* );
* }
* ```
*
* @see https://tanstack.com/query
*/
-export const GrazProvider: FC = ({ children, grazOptions, ...props }) => {
+export const GrazProvider: FC = ({ children, grazOptions }) => {
useEffect(() => {
configureGraz(grazOptions);
}, [grazOptions]);
return (
-
-
- {children}
-
-
-
+
+ {children}
+
+
);
};