From d31c02ca82f8374e69ce62ea5f6d28342b265716 Mon Sep 17 00:00:00 2001 From: karancoder Date: Mon, 2 Dec 2024 22:19:02 +0530 Subject: [PATCH 1/6] update react-query v5.62.0 --- packages/graz/package.json | 2 +- packages/graz/src/hooks/account.ts | 76 ++++++++++++------------- packages/graz/src/hooks/chains.ts | 32 ++++++----- packages/graz/src/hooks/methods.ts | 90 +++++++++++++----------------- packages/graz/src/hooks/wallet.ts | 5 +- pnpm-lock.yaml | 40 +++++-------- 6 files changed, 113 insertions(+), 132 deletions(-) diff --git a/packages/graz/package.json b/packages/graz/package.json index 859d5ef6..d1680319 100644 --- a/packages/graz/package.json +++ b/packages/graz/package.json @@ -57,7 +57,7 @@ "@dao-dao/cosmiframe": "0.1.0", "@keplr-wallet/cosmos": "0.12.156", "@metamask/providers": "12.0.0", - "@tanstack/react-query": "4.35.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/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/pnpm-lock.yaml b/pnpm-lock.yaml index 23e04907..d70010b7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -250,8 +250,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 +3712,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==} @@ -13057,7 +13050,7 @@ snapshots: '@typescript-eslint/parser': 6.6.0(eslint@8.49.0)(typescript@5.2.2) eslint: 8.49.0 eslint-config-prettier: 9.0.0(eslint@8.49.0) - eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.28.1) + eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)) eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-plugin-import@2.28.1)(eslint@8.49.0) eslint-plugin-eslint-comments: 3.2.0(eslint@8.49.0) eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0) @@ -14646,15 +14639,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: @@ -17066,7 +17056,7 @@ snapshots: dependencies: eslint: 8.49.0 - eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.28.1): + eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)): dependencies: eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0) @@ -17083,7 +17073,7 @@ snapshots: debug: 4.3.4 enhanced-resolve: 5.15.0 eslint: 8.49.0 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-plugin-import@2.28.1)(eslint@8.49.0))(eslint@8.49.0) eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0) fast-glob: 3.3.1 get-tsconfig: 4.7.0 @@ -17095,7 +17085,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0): + eslint-module-utils@2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-plugin-import@2.28.1)(eslint@8.49.0))(eslint@8.49.0): dependencies: debug: 3.2.7 optionalDependencies: @@ -17122,7 +17112,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.49.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-plugin-import@2.28.1)(eslint@8.49.0))(eslint@8.49.0) has: 1.0.3 is-core-module: 2.13.0 is-glob: 4.0.3 From 5619f52deb02591ca655ecc81f47ac78938fa468 Mon Sep 17 00:00:00 2001 From: karancoder Date: Tue, 3 Dec 2024 10:41:06 +0530 Subject: [PATCH 2/6] remove QueryClientProvider initialization from graz --- README.md | 14 ++++--- docs/docs/index.md | 18 ++++---- docs/docs/provider/grazProvider.md | 63 +++++++++++++++------------- packages/graz/package.json | 4 +- packages/graz/src/provider/index.tsx | 38 +++++++---------- 5 files changed, 70 insertions(+), 67 deletions(-) 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} + + ); }; From f19689a5fb2e89d9738ab0b5770cc5f1a72c0382 Mon Sep 17 00:00:00 2001 From: karancoder Date: Tue, 3 Dec 2024 11:07:44 +0530 Subject: [PATCH 3/6] update examples --- example/next/package.json | 1 + example/next/pages/_app.tsx | 49 +++++++++++++------------ example/starter/package.json | 1 + example/starter/src/pages/_app.tsx | 57 ++++++++++++++++-------------- example/vite/package.json | 1 + example/vite/src/main.tsx | 24 +++++++++---- pnpm-lock.yaml | 9 +++++ 7 files changed, 87 insertions(+), 55 deletions(-) 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/pnpm-lock.yaml b/pnpm-lock.yaml index d70010b7..40856180 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 From 81d774cdbcec9cc8ed33c27cab939ab8e2b87e4b Mon Sep 17 00:00:00 2001 From: karancoder Date: Tue, 3 Dec 2024 12:30:48 +0530 Subject: [PATCH 4/6] chore: show QueryClientProvider import and queryclient instantiation --- README.md | 3 +++ docs/docs/index.md | 3 +++ docs/docs/provider/grazProvider.md | 3 +++ 3 files changed, 9 insertions(+) diff --git a/README.md b/README.md index 6a2ab416..dcba6a3f 100644 --- a/README.md +++ b/README.md @@ -55,8 +55,11 @@ pnpm add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosm 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", diff --git a/docs/docs/index.md b/docs/docs/index.md index 14b52400..5df34cb3 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -55,8 +55,11 @@ pnpm add @cosmjs/cosmwasm-stargate @cosmjs/launchpad @cosmjs/proto-signing @cosm 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", diff --git a/docs/docs/provider/grazProvider.md b/docs/docs/provider/grazProvider.md index afe6e490..03f1b9f2 100644 --- a/docs/docs/provider/grazProvider.md +++ b/docs/docs/provider/grazProvider.md @@ -6,8 +6,11 @@ Graz uses `@tanstack/react-query`'s features under the hood, hence you need to w #### 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", From fad676205fdcdc1811389a58f32d005f6228b2ae Mon Sep 17 00:00:00 2001 From: karancoder Date: Tue, 10 Dec 2024 13:11:31 +0530 Subject: [PATCH 5/6] update peer dependency to range --- packages/graz/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/graz/package.json b/packages/graz/package.json index 99afc38a..5ccfd8fd 100644 --- a/packages/graz/package.json +++ b/packages/graz/package.json @@ -49,7 +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", + "@tanstack/react-query": ">=5.62.0", "react": ">=17" }, "dependencies": { From 3453cecf390ed3896a34d5d9a357ac98854d876d Mon Sep 17 00:00:00 2001 From: Nur Fikri Date: Tue, 10 Dec 2024 15:27:07 +0700 Subject: [PATCH 6/6] add migration guide --- docs/docs/migration-guide.md | 19 +++++++++++++++++++ pnpm-lock.yaml | 12 ++++++------ 2 files changed, 25 insertions(+), 6 deletions(-) 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/pnpm-lock.yaml b/pnpm-lock.yaml index 40856180..fdfd726d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -259,7 +259,7 @@ importers: specifier: 12.0.0 version: 12.0.0 '@tanstack/react-query': - specifier: 5.62.0 + specifier: '>=5.62.0' version: 5.62.0(react@18.2.0) '@terra-money/station-connector': specifier: 1.1.0 @@ -13059,7 +13059,7 @@ snapshots: '@typescript-eslint/parser': 6.6.0(eslint@8.49.0)(typescript@5.2.2) eslint: 8.49.0 eslint-config-prettier: 9.0.0(eslint@8.49.0) - eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)) + eslint-import-resolver-alias: 1.1.2(eslint-plugin-import@2.28.1) eslint-import-resolver-typescript: 3.6.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-plugin-import@2.28.1)(eslint@8.49.0) eslint-plugin-eslint-comments: 3.2.0(eslint@8.49.0) eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0) @@ -17065,7 +17065,7 @@ snapshots: dependencies: eslint: 8.49.0 - eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.28.1(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0)): + eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.28.1): dependencies: eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0) @@ -17082,7 +17082,7 @@ snapshots: debug: 4.3.4 enhanced-resolve: 5.15.0 eslint: 8.49.0 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-plugin-import@2.28.1)(eslint@8.49.0))(eslint@8.49.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0) eslint-plugin-import: 2.28.1(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0) fast-glob: 3.3.1 get-tsconfig: 4.7.0 @@ -17094,7 +17094,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-plugin-import@2.28.1)(eslint@8.49.0))(eslint@8.49.0): + eslint-module-utils@2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0): dependencies: debug: 3.2.7 optionalDependencies: @@ -17121,7 +17121,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.49.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-plugin-import@2.28.1)(eslint@8.49.0))(eslint@8.49.0) + eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.6.0(eslint@8.49.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.0)(eslint@8.49.0) has: 1.0.3 is-core-module: 2.13.0 is-glob: 4.0.3