diff --git a/README.md b/README.md index 2038f76a..dcba6a3f 100644 --- a/README.md +++ b/README.md @@ -52,11 +52,14 @@ 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 { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { GrazProvider } from "graz"; +const queryClient = new QueryClient(); + const cosmoshub: ChainInfo = { chainId: "cosmoshub-4", chainName: "Cosmos Hub", @@ -65,11 +68,13 @@ const cosmoshub: ChainInfo = { function App() { return ( - - - + + + + + ); } ``` diff --git a/docs/docs/index.md b/docs/docs/index.md index f08591ad..5df34cb3 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -52,11 +52,14 @@ 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 { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { GrazProvider } from "graz"; +const queryClient = new QueryClient(); + const cosmoshub: ChainInfo = { chainId: "cosmoshub-4", chainName: "Cosmos Hub", @@ -65,13 +68,15 @@ const cosmoshub: ChainInfo = { function App() { return ( - - - + + + + + ); } ``` diff --git a/docs/docs/migration-guide.md b/docs/docs/migration-guide.md index 2849af1c..81ce0677 100644 --- a/docs/docs/migration-guide.md +++ b/docs/docs/migration-guide.md @@ -4,6 +4,25 @@ sidebar_position: 3 # Migration Guide +## 0.2.0 Breaking Changes + +We updates the react-query version to 5.62.0 and removes QueryClientProvider initialisation from Graz Provider. As a results, dApps must now wrap Graz provider with QueryClientProvider on their end. Also note that react-query has been added as peer dependency now. + +```diff ++ import { QueryClient, QueryClientProvider } from 'react-query'; + import { GrazProvider } from 'graz'; + ++ const queryClient = new QueryClient(); + ++ + + // children + ++ +``` + ## 0.1.26 Breaking Changes ### WalletConnect diff --git a/docs/docs/provider/grazProvider.md b/docs/docs/provider/grazProvider.md index 44e5351e..03f1b9f2 100644 --- a/docs/docs/provider/grazProvider.md +++ b/docs/docs/provider/grazProvider.md @@ -1,54 +1,62 @@ # 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 ```tsx +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { GrazProvider, WalletType } from "graz"; +const queryClient = new QueryClient(); + 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/example/next/package.json b/example/next/package.json index 3a856d24..a09fe5d8 100644 --- a/example/next/package.json +++ b/example/next/package.json @@ -13,6 +13,7 @@ "@emotion/react": "11.11.1", "@emotion/styled": "11.11.0", "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.58", + "@tanstack/react-query": "5.62.0", "framer-motion": "^10.16.4", "graz": "workspace:*", "next": "^13.4.19", diff --git a/example/next/pages/_app.tsx b/example/next/pages/_app.tsx index 8c32f322..7d406847 100644 --- a/example/next/pages/_app.tsx +++ b/example/next/pages/_app.tsx @@ -1,37 +1,42 @@ import { ChakraProvider, extendTheme } from "@chakra-ui/react"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { GrazProvider } from "graz"; import type { NextPage } from "next"; import type { AppProps } from "next/app"; import { chains } from "utils/graz"; +const queryClient = new QueryClient(); + const theme = extendTheme(); const CustomApp: NextPage = ({ Component, pageProps }) => { return ( - { - console.log("reconnect failed"); - }, - autoReconnect: false, - walletConnect: { - options: { - projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID, + + { + console.log("reconnect failed"); + }, + autoReconnect: false, + walletConnect: { + options: { + projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID, + }, + }, + capsuleConfig: { + apiKey: process.env.NEXT_PUBLIC_CAPSULE_API_KEY, + env: process.env.NEXT_PUBLIC_CAPSULE_ENV, + }, + iframeOptions: { + allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone", "http://localhost:3000"], }, - }, - capsuleConfig: { - apiKey: process.env.NEXT_PUBLIC_CAPSULE_API_KEY, - env: process.env.NEXT_PUBLIC_CAPSULE_ENV, - }, - iframeOptions: { - allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone", "http://localhost:3000"], - }, - }} - > - - + }} + > + + + ); }; diff --git a/example/starter/package.json b/example/starter/package.json index 527fe620..62fee961 100644 --- a/example/starter/package.json +++ b/example/starter/package.json @@ -16,6 +16,7 @@ "@emotion/styled": "11.11.0", "@graz-sh/types": "^0.0.4", "@leapwallet/cosmos-social-login-capsule-provider-ui": "^0.0.58", + "@tanstack/react-query": "5.62.0", "bignumber.js": "^9.1.2", "framer-motion": "^10.16.4", "graz": "workspace:*", diff --git a/example/starter/src/pages/_app.tsx b/example/starter/src/pages/_app.tsx index 30c04588..a7634254 100644 --- a/example/starter/src/pages/_app.tsx +++ b/example/starter/src/pages/_app.tsx @@ -1,9 +1,12 @@ import { ChakraProvider, extendTheme } from "@chakra-ui/react"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { GrazProvider } from "graz"; import type { AppProps } from "next/app"; import { Layout } from "src/ui/layout"; import { mainnetChains } from "src/utils/graz"; +const queryClient = new QueryClient(); + const theme = extendTheme({ semanticTokens: { colors: { @@ -21,34 +24,36 @@ const theme = extendTheme({ const MyApp = ({ Component, pageProps }: AppProps) => { return ( - + - - - - - - + }} + > + + + + + + + ); }; diff --git a/example/vite/package.json b/example/vite/package.json index 19541b5d..f2e58cc3 100644 --- a/example/vite/package.json +++ b/example/vite/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "@tanstack/react-query": "5.62.0", "graz": "workspace:*", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/example/vite/src/main.tsx b/example/vite/src/main.tsx index 0203087c..15e2758a 100644 --- a/example/vite/src/main.tsx +++ b/example/vite/src/main.tsx @@ -1,5 +1,6 @@ import "./index.css"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { GrazProvider } from "graz"; import { cosmoshub } from "graz/chains"; import * as React from "react"; @@ -7,14 +8,23 @@ import * as ReactDOM from "react-dom/client"; import App from "./App"; +const queryClient = new QueryClient(); + ReactDOM.createRoot(document.getElementById("root")!).render( - - - + + + + + , ); diff --git a/packages/graz/package.json b/packages/graz/package.json index d141762a..5ccfd8fd 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.31", + "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": "4.35.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/hooks/account.ts b/packages/graz/src/hooks/account.ts index 10ac728c..9a3b7fd5 100644 --- a/packages/graz/src/hooks/account.ts +++ b/packages/graz/src/hooks/account.ts @@ -147,9 +147,9 @@ export const useBalances = ( [address, args?.chainId, chains, clients], ); - return useQuery( + return useQuery({ queryKey, - async ({ queryKey: [, _clients, _chains, _address] }) => { + queryFn: async ({ queryKey: [, _clients, _chains, _address] }) => { if (!_address) { throw new Error("address is not defined"); } @@ -166,18 +166,16 @@ export const useBalances = ( }); return res; }, - { - enabled: - Boolean(address) && - Boolean(chains) && - chains.length > 0 && - !isEmpty(clients) && - (args?.enabled === undefined ? true : args.enabled), - refetchOnMount: false, - refetchOnReconnect: true, - refetchOnWindowFocus: false, - }, - ); + enabled: + Boolean(address) && + Boolean(chains) && + chains.length > 0 && + !isEmpty(clients) && + (args?.enabled === undefined ? true : args.enabled), + refetchOnMount: false, + refetchOnReconnect: true, + refetchOnWindowFocus: false, + }); }; /** @@ -216,19 +214,17 @@ export const useBalance = ( const queryKey = ["USE_BALANCE", args.denom, balances, chains, address, args.chainId] as const; - const query = useQuery( + const query = useQuery({ queryKey, - ({ queryKey: [, _denom, _balances] }) => { + queryFn: ({ queryKey: [, _denom, _balances] }) => { return _balances?.find((x) => x.denom === _denom); }, - { - enabled: - Boolean(args.denom) && - Boolean(balances) && - Boolean(balances?.length) && - (args.enabled === undefined ? true : args.enabled), - }, - ); + enabled: + Boolean(args.denom) && + Boolean(balances) && + Boolean(balances?.length) && + (args.enabled === undefined ? true : args.enabled), + }); return { ...query, @@ -276,8 +272,10 @@ export type UseConnectChainArgs = MutationEventArgs; * @see {@link connect} */ export const useConnect = ({ onError, onLoading, onSuccess }: UseConnectChainArgs = {}) => { - const queryKey = ["USE_CONNECT", onError, onLoading, onSuccess]; - const mutation = useMutation(queryKey, connect, { + const mutationKey = ["USE_CONNECT", onError, onLoading, onSuccess]; + const mutation = useMutation({ + mutationKey, + mutationFn: connect, onError: (err, args) => onError?.(err, args), onMutate: onLoading, onSuccess: (connectResult) => Promise.resolve(onSuccess?.(connectResult)), @@ -287,7 +285,7 @@ export const useConnect = ({ onError, onLoading, onSuccess }: UseConnectChainArg connect: (args?: ConnectArgs) => mutation.mutate(args), connectAsync: (args?: ConnectArgs) => mutation.mutateAsync(args), error: mutation.error, - isLoading: mutation.isLoading, + isLoading: mutation.isPending, isSuccess: mutation.isSuccess, isSupported: Boolean(isSupported), status: mutation.status, @@ -319,8 +317,10 @@ export const useConnect = ({ onError, onLoading, onSuccess }: UseConnectChainArg * @see {@link disconnect} */ export const useDisconnect = ({ onError, onLoading, onSuccess }: MutationEventArgs = {}) => { - const queryKey = ["USE_DISCONNECT", onError, onLoading, onSuccess]; - const mutation = useMutation(queryKey, disconnect, { + const mutationKey = ["USE_DISCONNECT", onError, onLoading, onSuccess]; + const mutation = useMutation({ + mutationKey, + mutationFn: disconnect, onError: (err) => Promise.resolve(onError?.(err, undefined)), onMutate: onLoading, onSuccess: () => Promise.resolve(onSuccess?.(undefined)), @@ -330,7 +330,7 @@ export const useDisconnect = ({ onError, onLoading, onSuccess }: MutationEventAr disconnect: (args?: { chainId?: ChainId }) => mutation.mutate(args), disconnectAsync: (args?: { chainId?: ChainId }) => mutation.mutateAsync(args), error: mutation.error, - isLoading: mutation.isLoading, + isLoading: mutation.isPending, isSuccess: mutation.isSuccess, status: mutation.status, }; @@ -416,9 +416,9 @@ export const useBalanceStaked = ( const queryKey = useMemo(() => ["USE_BALANCE_STAKED", client, chains, address] as const, [chains, address, client]); - return useQuery( + return useQuery({ queryKey, - async ({ queryKey: [, _client, _chains, _address] }) => { + queryFn: async ({ queryKey: [, _client, _chains, _address] }) => { if (!_address) { throw new Error("address is not defined"); } @@ -432,11 +432,9 @@ export const useBalanceStaked = ( }); return res; }, - { - enabled: Boolean(address) && Boolean(chains) && chains.length > 0 && Boolean(client), - refetchOnMount: false, - refetchOnReconnect: true, - refetchOnWindowFocus: false, - }, - ); + enabled: Boolean(address) && Boolean(chains) && chains.length > 0 && Boolean(client), + refetchOnMount: false, + refetchOnReconnect: true, + refetchOnWindowFocus: false, + }); }; diff --git a/packages/graz/src/hooks/chains.ts b/packages/graz/src/hooks/chains.ts index 95af852d..dc3d770c 100644 --- a/packages/graz/src/hooks/chains.ts +++ b/packages/graz/src/hooks/chains.ts @@ -89,11 +89,11 @@ export const useChainInfos = ({ chainId }: { chainId?: string[] }) => { export const useActiveChainCurrency = ({ denom }: { denom: string }): UseQueryResult => { const chains = useActiveChains(); const queryKey = ["USE_ACTIVE_CHAIN_CURRENCY", denom] as const; - const query = useQuery( + const query = useQuery({ queryKey, - ({ queryKey: [, _denom] }) => + queryFn: ({ queryKey: [, _denom] }) => chains?.find((c) => c.currencies.find((x) => x.coinMinimalDenom === _denom))?.currencies.find((x) => x), - ); + }); return query; }; @@ -118,17 +118,15 @@ export const useQueryClientValidators = => { const status = args.status ?? "BOND_STATUS_BONDED"; const queryKey = ["USE_ACTIVE_CHAIN_VALIDATORS", args.queryClient, status] as const; - const query = useQuery( + const query = useQuery({ queryKey, - async ({ queryKey: [, _queryClient, _status] }) => { + queryFn: async ({ queryKey: [, _queryClient, _status] }) => { if (!_queryClient) throw new Error("Query client is not defined"); const res = await _queryClient.staking.validators(_status); return res; }, - { - enabled: typeof args.queryClient !== "undefined", - }, - ); + enabled: typeof args.queryClient !== "undefined", + }); return query; }; @@ -196,8 +194,10 @@ export type UseSuggestChainArgs = MutationEventArgs; * ``` */ export const useSuggestChain = ({ onError, onLoading, onSuccess }: UseSuggestChainArgs = {}) => { - const queryKey = ["USE_SUGGEST_CHAIN", onError, onLoading, onSuccess]; - const mutation = useMutation(queryKey, suggestChain, { + const mutationKey = ["USE_SUGGEST_CHAIN", onError, onLoading, onSuccess]; + const mutation = useMutation({ + mutationKey, + mutationFn: suggestChain, onError: (err, args) => Promise.resolve(onError?.(err, args.chainInfo)), onMutate: (data) => onLoading?.(data.chainInfo), onSuccess: (chainInfo) => Promise.resolve(onSuccess?.(chainInfo)), @@ -205,7 +205,7 @@ export const useSuggestChain = ({ onError, onLoading, onSuccess }: UseSuggestCha return { error: mutation.error, - isLoading: mutation.isLoading, + isLoading: mutation.isPending, isSuccess: mutation.isSuccess, suggest: mutation.mutate, suggestAsync: mutation.mutateAsync, @@ -246,8 +246,10 @@ export type UseSuggestChainAndConnectArgs = MutationEventArgs { - const queryKey = ["USE_SUGGEST_CHAIN_AND_CONNECT", onError, onLoading, onSuccess]; - const mutation = useMutation(queryKey, suggestChainAndConnect, { + const mutationKey = ["USE_SUGGEST_CHAIN_AND_CONNECT", onError, onLoading, onSuccess]; + const mutation = useMutation({ + mutationKey, + mutationFn: suggestChainAndConnect, onError: (err, args) => Promise.resolve(onError?.(err, args)), onMutate: (args) => onLoading?.(args), onSuccess: (res) => Promise.resolve(onSuccess?.(res)), @@ -255,7 +257,7 @@ export const useSuggestChainAndConnect = ({ onError, onLoading, onSuccess }: Use const { data: isSupported } = useCheckWallet(); return { error: mutation.error, - isLoading: mutation.isLoading, + isLoading: mutation.isPending, isSuccess: mutation.isSuccess, isSupported: Boolean(isSupported), status: mutation.status, diff --git a/packages/graz/src/hooks/methods.ts b/packages/graz/src/hooks/methods.ts index 526e2179..732f35c4 100644 --- a/packages/graz/src/hooks/methods.ts +++ b/packages/graz/src/hooks/methods.ts @@ -52,19 +52,17 @@ export const useSendTokens = ({ const { data: account } = useAccount(); const accountAddress = account?.bech32Address; - const mutation = useMutation( - ["USE_SEND_TOKENS", onError, onLoading, onSuccess, accountAddress], - (args: SendTokensArgs) => sendTokens({ senderAddress: accountAddress, ...args }), - { - onError: (err, data) => Promise.resolve(onError?.(err, data)), - onMutate: onLoading, - onSuccess: (txResponse) => Promise.resolve(onSuccess?.(txResponse)), - }, - ); + const mutation = useMutation({ + mutationKey: ["USE_SEND_TOKENS", onError, onLoading, onSuccess, accountAddress], + mutationFn: (args: SendTokensArgs) => sendTokens({ senderAddress: accountAddress, ...args }), + onError: (err, data) => Promise.resolve(onError?.(err, data)), + onMutate: onLoading, + onSuccess: (txResponse) => Promise.resolve(onSuccess?.(txResponse)), + }); return { error: mutation.error, - isLoading: mutation.isLoading, + isLoading: mutation.isPending, isSuccess: mutation.isSuccess, sendTokens: mutation.mutate, sendTokensAsync: mutation.mutateAsync, @@ -99,19 +97,17 @@ export const useSendIbcTokens = ({ const { data: account } = useAccount(); const accountAddress = account?.bech32Address; - const mutation = useMutation( - ["USE_SEND_IBC_TOKENS", onError, onLoading, onSuccess, accountAddress], - (args: SendIbcTokensArgs) => sendIbcTokens({ senderAddress: accountAddress, ...args }), - { - onError: (err, data) => Promise.resolve(onError?.(err, data)), - onMutate: onLoading, - onSuccess: (txResponse) => Promise.resolve(onSuccess?.(txResponse)), - }, - ); + const mutation = useMutation({ + mutationKey: ["USE_SEND_IBC_TOKENS", onError, onLoading, onSuccess, accountAddress], + mutationFn: (args: SendIbcTokensArgs) => sendIbcTokens({ senderAddress: accountAddress, ...args }), + onError: (err, data) => Promise.resolve(onError?.(err, data)), + onMutate: onLoading, + onSuccess: (txResponse) => Promise.resolve(onSuccess?.(txResponse)), + }); return { error: mutation.error, - isLoading: mutation.isLoading, + isLoading: mutation.isPending, isSuccess: mutation.isSuccess, sendIbcTokens: mutation.mutate, sendIbcTokensAsync: mutation.mutateAsync, @@ -165,19 +161,17 @@ export const useInstantiateContract = >( return instantiateContract(contractArgs); }; - const mutation = useMutation( - ["USE_INSTANTIATE_CONTRACT", onError, onLoading, onSuccess, codeId, accountAddress], + const mutation = useMutation({ + mutationKey: ["USE_INSTANTIATE_CONTRACT", onError, onLoading, onSuccess, codeId, accountAddress], mutationFn, - { - onError: (err, data) => Promise.resolve(onError?.(err, data)), - onMutate: onLoading, - onSuccess: (instantiateResult) => Promise.resolve(onSuccess?.(instantiateResult)), - }, - ); + onError: (err, data) => Promise.resolve(onError?.(err, data)), + onMutate: onLoading, + onSuccess: (instantiateResult) => Promise.resolve(onSuccess?.(instantiateResult)), + }); return { error: mutation.error, - isLoading: mutation.isLoading, + isLoading: mutation.isPending, isSuccess: mutation.isSuccess, instantiateContract: mutation.mutate, instantiateContractAsync: mutation.mutateAsync, @@ -242,19 +236,17 @@ export const useExecuteContract = >({ return executeContract(executeArgs); }; - const mutation = useMutation( - ["USE_EXECUTE_CONTRACT", onError, onLoading, onSuccess, contractAddress, accountAddress], + const mutation = useMutation({ + mutationKey: ["USE_EXECUTE_CONTRACT", onError, onLoading, onSuccess, contractAddress, accountAddress], mutationFn, - { - onError: (err, data) => Promise.resolve(onError?.(err, data)), - onMutate: onLoading, - onSuccess: (executeResult) => Promise.resolve(onSuccess?.(executeResult)), - }, - ); + onError: (err, data) => Promise.resolve(onError?.(err, data)), + onMutate: onLoading, + onSuccess: (executeResult) => Promise.resolve(onSuccess?.(executeResult)), + }); return { error: mutation.error, - isLoading: mutation.isLoading, + isLoading: mutation.isPending, isSuccess: mutation.isSuccess, executeContract: mutation.mutate, executeContractAsync: mutation.mutateAsync, @@ -275,16 +267,14 @@ export const useQuerySmart = (args?: { queryMsg?: Record; }): UseQueryResult => { const { data: client } = useCosmWasmClient(); - const query: UseQueryResult = useQuery( - ["USE_QUERY_SMART", args?.address, args?.queryMsg, client], - ({ queryKey: [, _address] }) => { + const query: UseQueryResult = useQuery({ + queryKey: ["USE_QUERY_SMART", args?.address, args?.queryMsg, client], + queryFn: ({ queryKey: [, _address] }) => { if (!args?.address || !args.queryMsg) throw new Error("address or queryMsg undefined"); return getQuerySmart(args.address, args.queryMsg, client); }, - { - enabled: Boolean(args?.address) && Boolean(args?.queryMsg) && Boolean(client), - }, - ); + enabled: Boolean(args?.address) && Boolean(args?.queryMsg) && Boolean(client), + }); return query; }; @@ -302,16 +292,14 @@ export const useQueryRaw = (args?: { }): UseQueryResult => { const { data: client } = useCosmWasmClient(); const queryKey = ["USE_QUERY_RAW", args?.key, args?.address, client] as const; - const query: UseQueryResult = useQuery( + const query: UseQueryResult = useQuery({ queryKey, - ({ queryKey: [, _address] }) => { + queryFn: ({ queryKey: [, _address] }) => { if (!args?.address || !args.key) throw new Error("address or key undefined"); return getQueryRaw(args.address, args.key, client); }, - { - enabled: Boolean(args?.address) && Boolean(args?.key) && Boolean(client), - }, - ); + enabled: Boolean(args?.address) && Boolean(args?.key) && Boolean(client), + }); return query; }; diff --git a/packages/graz/src/hooks/wallet.ts b/packages/graz/src/hooks/wallet.ts index 1ee43ae4..be82143b 100644 --- a/packages/graz/src/hooks/wallet.ts +++ b/packages/graz/src/hooks/wallet.ts @@ -51,7 +51,10 @@ export const useCheckWallet = (type?: WalletType): UseQueryResult => { const walletType = useGrazInternalStore((x) => type || x.walletType); const queryKey = ["USE_CHECK_WALLET", walletType] as const; - const query = useQuery(queryKey, ({ queryKey: [, _type] }) => checkWallet(_type)); + const query = useQuery({ + queryKey, + queryFn: ({ queryKey: [, _type] }) => checkWallet(_type), + }); return query; }; 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} + + ); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 23e04907..fdfd726d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,6 +78,9 @@ importers: '@leapwallet/cosmos-social-login-capsule-provider-ui': specifier: ^0.0.58 version: 0.0.58(@cosmjs/proto-signing@0.31.3)(@types/react-dom@18.2.7)(@types/react@18.2.21)(csstype@3.1.2)(osmojs@15.2.1(bufferutil@4.0.8)(utf-8-validate@5.0.10))(protobufjs@7.2.3)(react-dom@18.2.0(react@18.2.0))(stridejs@0.6.2(bufferutil@4.0.8)(utf-8-validate@5.0.10))(tailwindcss@3.3.3)(zod@3.23.8) + '@tanstack/react-query': + specifier: 5.62.0 + version: 5.62.0(react@18.2.0) framer-motion: specifier: ^10.16.4 version: 10.16.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -130,6 +133,9 @@ importers: '@leapwallet/cosmos-social-login-capsule-provider-ui': specifier: ^0.0.58 version: 0.0.58(@cosmjs/proto-signing@0.31.3)(@types/react-dom@18.2.7)(@types/react@18.2.21)(csstype@3.1.2)(osmojs@15.2.1(bufferutil@4.0.8)(utf-8-validate@5.0.10))(protobufjs@7.2.3)(react-dom@18.2.0(react@18.2.0))(stridejs@0.6.2(bufferutil@4.0.8)(utf-8-validate@5.0.10))(tailwindcss@3.3.3)(zod@3.23.8) + '@tanstack/react-query': + specifier: 5.62.0 + version: 5.62.0(react@18.2.0) bignumber.js: specifier: ^9.1.2 version: 9.1.2 @@ -173,6 +179,9 @@ importers: example/vite: dependencies: + '@tanstack/react-query': + specifier: 5.62.0 + version: 5.62.0(react@18.2.0) graz: specifier: workspace:* version: link:../../packages/graz @@ -250,8 +259,8 @@ importers: specifier: 12.0.0 version: 12.0.0 '@tanstack/react-query': - specifier: 4.35.0 - version: 4.35.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + specifier: '>=5.62.0' + version: 5.62.0(react@18.2.0) '@terra-money/station-connector': specifier: 1.1.0 version: 1.1.0(@cosmjs/amino@0.31.3)(@terra-money/feather.js@3.0.0-beta.2)(axios@1.6.8) @@ -3712,20 +3721,13 @@ packages: resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==} engines: {node: '>=6'} - '@tanstack/query-core@4.35.0': - resolution: {integrity: sha512-4GMcKQuLZQi6RFBiBZNsLhl+hQGYScRZ5ZoVq8QAzfqz9M7vcGin/2YdSESwl7WaV+Qzsb5CZOAbMBes4lNTnA==} + '@tanstack/query-core@5.62.0': + resolution: {integrity: sha512-sx38bGrqF9bop92AXOvzDr0L9fWDas5zXdPglxa9cuqeVSWS7lY6OnVyl/oodfXjgOGRk79IfCpgVmxrbHuFHg==} - '@tanstack/react-query@4.35.0': - resolution: {integrity: sha512-LLYDNnM9ewYHgjm2rzhk4KG/puN2rdoqCUD+N9+V7SwlsYwJk5ypX58rpkoZAhFyZ+KmFUJ7Iv2lIEOoUqydIg==} + '@tanstack/react-query@5.62.0': + resolution: {integrity: sha512-tj2ltjAn2a3fs+Dqonlvs6GyLQ/LKVJE2DVSYW+8pJ3P6/VCVGrfqv5UEchmlP7tLOvvtZcOuSyI2ooVlR5Yqw==} peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-native: '*' - peerDependenciesMeta: - react-dom: - optional: true - react-native: - optional: true + react: ^18 || ^19 '@terra-money/feather.js@3.0.0-beta.2': resolution: {integrity: sha512-H048FhtK8G3lIPoVC0rN8Z+jUcJS44twXI+r7k1LY1K49MVUMArP6e7XqLiJONzBZCkEQE/W05F9ogCPrqMaHQ==} @@ -14646,15 +14648,12 @@ snapshots: dependencies: defer-to-connect: 1.1.3 - '@tanstack/query-core@4.35.0': {} + '@tanstack/query-core@5.62.0': {} - '@tanstack/react-query@4.35.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': + '@tanstack/react-query@5.62.0(react@18.2.0)': dependencies: - '@tanstack/query-core': 4.35.0 + '@tanstack/query-core': 5.62.0 react: 18.2.0 - use-sync-external-store: 1.2.0(react@18.2.0) - optionalDependencies: - react-dom: 18.2.0(react@18.2.0) '@terra-money/feather.js@3.0.0-beta.2': dependencies: