update examples

graz-sh · Dec 3, 2024 · f19689a · f19689a
1 parent 5619f52
commit f19689a
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 55 deletions.
diff --git 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
@@ -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<AppProps> = ({ Component, pageProps }) => {
   return (
     <ChakraProvider resetCSS theme={theme}>
-      <GrazProvider
-        grazOptions={{
-          chains,
-          onReconnectFailed: () => {
-            console.log("reconnect failed");
-          },
-          autoReconnect: false,
-          walletConnect: {
-            options: {
-              projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
+      <QueryClientProvider client={queryClient}>
+        <GrazProvider
+          grazOptions={{
+            chains,
+            onReconnectFailed: () => {
+              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"],
-          },
-        }}
-      >
-        <Component {...pageProps} />
-      </GrazProvider>
+          }}
+        >
+          <Component {...pageProps} />
+        </GrazProvider>
+      </QueryClientProvider>
     </ChakraProvider>
   );
 };

diff --git 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
@@ -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 (
-    <GrazProvider
-      grazOptions={{
-        chains: mainnetChains,
-        walletConnect: {
-          options: {
-            projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
+    <QueryClientProvider client={queryClient}>
+      <GrazProvider
+        grazOptions={{
+          chains: mainnetChains,
+          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,
+          },
+          walletDefaultOptions: {
+            sign: {
+              preferNoSetFee: true,
+            },
           },
-        },
-        capsuleConfig: {
-          apiKey: process.env.NEXT_PUBLIC_CAPSULE_API_KEY,
-          env: process.env.NEXT_PUBLIC_CAPSULE_ENV,
-        },
-        walletDefaultOptions: {
-          sign: {
-            preferNoSetFee: true,
+          iframeOptions: {
+            allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone"],
           },
-        },
-        iframeOptions: {
-          allowedIframeParentOrigins: ["https://daodao.zone", "https://dao.daodao.zone"],
-        },
-      }}
-    >
-      <ChakraProvider resetCSS theme={theme}>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
-      </ChakraProvider>
-    </GrazProvider>
+        }}
+      >
+        <ChakraProvider resetCSS theme={theme}>
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        </ChakraProvider>
+      </GrazProvider>
+    </QueryClientProvider>
   );
 };
 

diff --git 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
@@ -1,20 +1,30 @@
 import "./index.css";
 
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { GrazProvider } from "graz";
 import { cosmoshub } from "graz/chains";
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 
 import App from "./App";
 
+const queryClient = new QueryClient();
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <GrazProvider
-      grazOptions={{
-        chains: [cosmoshub],
-      }}
-    >
-      <App />
-    </GrazProvider>
+    <QueryClientProvider client={queryClient}>
+      <GrazProvider
+        grazOptions={{
+          chains: [cosmoshub],
+          capsuleConfig: {
+            apiKey: import.meta.env.VITE_CAPSULE_API_KEY as string,
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            env: (import.meta.env.VITE_CAPSULE_ENV as "DEV" | "SANDBOX" | "BETA" | "PROD") || "DEV",
+          },
+        }}
+      >
+        <App />
+      </GrazProvider>
+    </QueryClientProvider>
   </React.StrictMode>,
 );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml