feat: move query-client out

AbstractSDK · Mar 25, 2024 · a3f19b4 · a3f19b4
1 parent 2cb3f6a
commit a3f19b4
Show file tree

Hide file tree

Showing 13 changed files with 428 additions and 130 deletions.
diff --git a/.changeset/tame-walls-warn.md b/.changeset/tame-walls-warn.md
@@ -0,0 +1,9 @@
+---
+"wagemos-cosmoskit-nextjs": patch
+"wagemos-graz-nextjs": patch
+"@abstract-money/provider-cosmoskit": patch
+"@abstract-money/provider-graz": patch
+"@abstract-money/react": patch
+---
+
+Moved query client to be defined outside of the abstract provider. Now you either need to declare one in your app in case you're using cosmos-kit, or the sdk will use graz provider's query client.
diff --git a/examples/wagemos-cosmoskit-nextjs/package.json b/examples/wagemos-cosmoskit-nextjs/package.json
@@ -14,7 +14,6 @@
     "@abstract-money/provider-cosmoskit": "workspace:*",
     "@abstract-money/react": "workspace:*",
     "@chain-registry/types": "^0.13.1",
-    "@cosmjs/stargate": "^0.32.2",
     "@cosmos-kit/keplr": "^2.4.15",
     "@cosmos-kit/react": "^2.6.0",
     "@hookform/resolvers": "^3.3.2",
@@ -23,6 +22,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@tanstack/react-query": "^4",
     "chain-registry": "^1.18.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",

diff --git a/examples/wagemos-cosmoskit-nextjs/src/app/layout.tsx b/examples/wagemos-cosmoskit-nextjs/src/app/layout.tsx
@@ -1,9 +1,9 @@
 'use client'
 
-import { stringToAccountId } from '@abstract-money/core'
 import { cosmosKitProvider } from '@abstract-money/provider-cosmoskit'
 import { AbstractProvider, createConfig } from '@abstract-money/react'
 import '@interchain-ui/react/styles'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { Inter, Poppins } from 'next/font/google'
 import { Toaster } from '../components/ui/toaster'
 import { cn } from '../utils'
@@ -18,6 +18,20 @@ const poppins = Poppins({
 })
 const abstractConfig = createConfig({ provider: cosmosKitProvider })
 
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      cacheTime: 1_000 * 60 * 60 * 24, // 24 hours
+      networkMode: 'offlineFirst',
+      refetchOnWindowFocus: false,
+      retry: 0,
+    },
+    mutations: {
+      networkMode: 'offlineFirst',
+    },
+  },
+})
+
 export default function RootLayout({
   children,
 }: {
@@ -27,13 +41,15 @@ export default function RootLayout({
     <html lang="en">
       <CosmosKitProvider>
         <body className={cn(inter.variable, poppins.variable)}>
-          <AbstractProvider config={abstractConfig}>
-            <main className="flex flex-col items-center p-24 min-h-screen">
-              <section className="mt-10">
-                <div className="mt-10">{children}</div>
-              </section>
-            </main>
-          </AbstractProvider>
+          <QueryClientProvider client={client}>
+            <AbstractProvider config={abstractConfig}>
+              <main className="flex flex-col items-center p-24 min-h-screen">
+                <section className="mt-10">
+                  <div className="mt-10">{children}</div>
+                </section>
+              </main>
+            </AbstractProvider>
+          </QueryClientProvider>
           <Toaster />
         </body>
       </CosmosKitProvider>

diff --git a/examples/wagemos-graz-nextjs/package.json b/examples/wagemos-graz-nextjs/package.json
@@ -15,7 +15,6 @@
     "@abstract-money/core": "workspace:*",
     "@abstract-money/provider-graz": "workspace:*",
     "@abstract-money/react": "workspace:*",
-    "@cosmjs/stargate": "^0.32.2",
     "@hookform/resolvers": "^3.3.2",
     "@osmosis-labs/math": "^5.1.0",
     "@osmosis-labs/proto-codecs": "^5.1.0",
@@ -24,6 +23,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@tanstack/react-query": "^4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cosmjs-types": "^0.8.0",

diff --git a/examples/wagemos-graz-nextjs/src/app/_components/place-bet-dialog.tsx b/examples/wagemos-graz-nextjs/src/app/_components/place-bet-dialog.tsx
@@ -61,11 +61,14 @@ export function PlaceBetDialog({ round }: { round: RoundResponse }) {
 
   const { toast } = useToast()
 
-  const { mutateAsync: placeBetAsync, isLoading } =
-    betting.mutations.usePlaceBet({
-      accountId: stringToAccountId('neutron-18'),
-      chainName: 'neutron',
-    })
+  const {
+    mutateAsync: placeBetAsync,
+    isLoading,
+    ...rest
+  } = betting.mutations.usePlaceBet({
+    accountId: stringToAccountId('neutron-18'),
+    chainName: 'neutron',
+  })
 
   const onSubmit: SubmitHandler<z.infer<typeof placeBetSchema>> = useCallback(
     async ({ amount, accountSeq }) => {

diff --git a/examples/wagemos-graz-nextjs/src/app/_components/wallet-button.tsx b/examples/wagemos-graz-nextjs/src/app/_components/wallet-button.tsx
@@ -73,7 +73,7 @@ function ConnectButton() {
   const { connect } = useConnect()
 
   const handleConnect = (wallet: WalletType) => {
-    connect({ walletType: wallet, chainId: 'osmosis-1' })
+    connect({ walletType: wallet, chainId: ['osmosis-1', 'neutron-1'] })
     setIsOpen(false)
   }
   return (

diff --git a/examples/wagemos-graz-nextjs/src/app/_providers/graz.tsx b/examples/wagemos-graz-nextjs/src/app/_providers/graz.tsx
@@ -2,11 +2,14 @@
 
 import { GrazProvider as Provider } from 'graz'
 import { mainnetChains } from 'graz/chains'
-import { PropsWithChildren } from 'react'
+import { ComponentProps } from 'react'
 
-export function GrazProvider(props: PropsWithChildren) {
+export function GrazProvider(
+  props: Pick<ComponentProps<typeof Provider>, 'children' | 'client'>,
+) {
   return (
     <Provider
+      client={props.client}
       grazOptions={{
         chains: [mainnetChains.neutron, mainnetChains.osmosis],
         chainsConfig: {

diff --git a/examples/wagemos-graz-nextjs/src/app/layout.tsx b/examples/wagemos-graz-nextjs/src/app/layout.tsx
@@ -2,12 +2,27 @@
 
 import { grazProvider } from '@abstract-money/provider-graz'
 import { AbstractProvider, createConfig } from '@abstract-money/react'
+import { QueryClient } from '@tanstack/react-query'
 import { Inter, Poppins } from 'next/font/google'
 import { Toaster } from '../components/ui/toaster'
 import { cn } from '../utils'
 import { GrazProvider } from './_providers/graz'
 import './globals.css'
 
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      cacheTime: 1_000 * 60 * 60 * 24, // 24 hours
+      networkMode: 'offlineFirst',
+      refetchOnWindowFocus: false,
+      retry: 0,
+    },
+    mutations: {
+      networkMode: 'offlineFirst',
+    },
+  },
+})
+
 const inter = Inter({ subsets: ['latin'], variable: '--font-body' })
 
 const poppins = Poppins({
@@ -29,7 +44,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={cn(inter.variable, poppins.variable)}>
-        <GrazProvider>
+        <GrazProvider client={client}>
           <AbstractProvider config={abstractConfig}>
             <main className="flex flex-col items-center p-24 min-h-screen">
               <section className="mt-10">

diff --git a/packages/provider-cosmoskit/package.json b/packages/provider-cosmoskit/package.json
@@ -27,9 +27,6 @@
       "optional": true
     }
   },
-  "dependencies": {
-    "@cosmjs/cosmwasm-stargate": "^0.32.2"
-  },
   "type": "module",
   "peerDependencies": {
     "@abstract-money/react": "workspace:*",

diff --git a/packages/provider-cosmoskit/src/index.ts b/packages/provider-cosmoskit/src/index.ts
@@ -1,8 +1,4 @@
 import { Provider } from '@abstract-money/react'
-import {
-  type CosmWasmClient,
-  type SigningCosmWasmClient,
-} from '@cosmjs/cosmwasm-stargate'
 import { useChain } from '@cosmos-kit/react'
 import { useEffect, useMemo, useState } from 'react'
 
@@ -12,9 +8,10 @@ import { useEffect, useMemo, useState } from 'react'
  */
 const USE_CHAIN_HACK_CHAIN_NAME = 'neutron'
 
-export const cosmosKitProvider = {
-  useCosmWasmClient(parameters: Parameters<Provider['useCosmWasmClient']>[0]) {
-    const [client, setClient] = useState<CosmWasmClient | undefined>(undefined)
+export const cosmosKitProvider: Provider = {
+  useCosmWasmClient(parameters) {
+    const [client, setClient] =
+      useState<ReturnType<Provider['useCosmWasmClient']>>(undefined)
     const { getCosmWasmClient: _getCosmWasmClient } = useChain(
       parameters?.chainName ?? USE_CHAIN_HACK_CHAIN_NAME,
     )
@@ -31,12 +28,9 @@ export const cosmosKitProvider = {
 
     return client
   },
-  useSigningCosmWasmClient(
-    parameters: Parameters<Provider['useSigningCosmWasmClient']>[0],
-  ) {
-    const [client, setClient] = useState<SigningCosmWasmClient | undefined>(
-      undefined,
-    )
+  useSigningCosmWasmClient(parameters) {
+    const [client, setClient] =
+      useState<ReturnType<Provider['useSigningCosmWasmClient']>>(undefined)
     const {
       getSigningCosmWasmClient: _getSigningCosmWasmClient,
       isWalletConnected,

diff --git a/packages/provider-graz/package.json b/packages/provider-graz/package.json
@@ -28,9 +28,6 @@
     }
   },
   "type": "module",
-  "dependencies": {
-    "@cosmjs/cosmwasm-stargate": "^0.32.2"
-  },
   "devDependencies": {
     "@abstract-money/react": "workspace:*",
     "@abstract-money/core": "workspace:*",

diff --git a/packages/react/src/contexts/provider.ts b/packages/react/src/contexts/provider.ts
@@ -1,21 +1,6 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import * as React from 'react'
 import { AbstractConfigContext, AbstractConfigProps } from './config'
 
-const client = new QueryClient({
-  defaultOptions: {
-    queries: {
-      cacheTime: 1_000 * 60 * 60 * 24, // 24 hours
-      networkMode: 'offlineFirst',
-      refetchOnWindowFocus: false,
-      retry: 0,
-    },
-    mutations: {
-      networkMode: 'offlineFirst',
-    },
-  },
-})
-
 export type AbstractProviderProps = AbstractConfigProps
 
 /**
@@ -25,20 +10,14 @@ export type AbstractProviderProps = AbstractConfigProps
 export function AbstractProvider({
   children,
   config,
-  queryClientOptions,
 }: React.PropsWithChildren<AbstractProviderProps>) {
   // Bailing out of using JSX
   // https://github.com/egoist/tsup/issues/390#issuecomment-933488738
   return React.createElement(React.Fragment, {
     // biome-ignore lint/correctness/noChildrenProp: <explanation>
     children: React.createElement(AbstractConfigContext, {
       config,
-      // biome-ignore lint/correctness/noChildrenProp: <explanation>
-      children: React.createElement(QueryClientProvider, {
-        children,
-        client: client,
-        ...queryClientOptions,
-      }),
+      children,
     }),
   })
 }