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} + + ); };