update example

zktx-io · Dec 4, 2024 · 013e2b8 · 013e2b8
1 parent 995a2dc
commit 013e2b8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/packages/example/src/App.tsx b/packages/example/src/App.tsx
@@ -1,5 +1,10 @@
+import { useState } from 'react';
+
+import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
+import { getFullnodeUrl } from '@mysten/sui/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
+import { NETWORK } from './network';
 import { Editor } from './pages/editor';
 import { Home } from './pages/home';
 import { Viewer } from './pages/viewer';
@@ -20,7 +25,26 @@ const router = createBrowserRouter([
 ]);
 
 function App() {
-  return <RouterProvider router={router} />;
+  const [activeNetwork, setActiveNetwork] = useState<
+    'testnet' | 'mainnet' | 'devnet'
+  >(NETWORK);
+  return (
+    <SuiClientProvider
+      networks={{
+        mainnet: { url: getFullnodeUrl('mainnet') },
+        testnet: { url: getFullnodeUrl('testnet') },
+        devnet: { url: getFullnodeUrl('devnet') },
+      }}
+      defaultNetwork={activeNetwork as 'mainnet' | 'testnet' | 'devnet'}
+      onNetworkChange={(network) => {
+        setActiveNetwork(network);
+      }}
+    >
+      <WalletProvider autoConnect>
+        <RouterProvider router={router} />;
+      </WalletProvider>
+    </SuiClientProvider>
+  );
 }
 
 export default App;
diff --git a/packages/example/src/index.tsx b/packages/example/src/index.tsx
@@ -1,14 +1,11 @@
 import React from 'react';
 
-import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
-import { getFullnodeUrl } from '@mysten/sui/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SnackbarProvider } from 'notistack';
 import ReactDOM from 'react-dom/client';
 
 import './index.css';
 import App from './App';
-import { NETWORK } from './network';
 import reportWebVitals from './reportWebVitals';
 
 const queryClient = new QueryClient();
@@ -24,14 +21,7 @@ root.render(
       hideIconVariant
     >
       <QueryClientProvider client={queryClient}>
-        <SuiClientProvider
-          networks={{ devnet: { url: getFullnodeUrl(NETWORK) } }}
-          defaultNetwork="devnet"
-        >
-          <WalletProvider autoConnect>
-            <App />
-          </WalletProvider>
-        </SuiClientProvider>
+        <App />
       </QueryClientProvider>
     </SnackbarProvider>
   </React.StrictMode>,

diff --git a/packages/example/src/pages/editor.tsx b/packages/example/src/pages/editor.tsx
@@ -4,6 +4,7 @@ import {
   ConnectButton,
   useCurrentAccount,
   useSignAndExecuteTransaction,
+  useSuiClientContext,
 } from '@mysten/dapp-kit';
 import { Transaction } from '@mysten/sui/transactions';
 import { PTBBuilder } from '@zktx.io/ptb-builder';
@@ -13,7 +14,11 @@ import { DragAndDrop } from '../components/DragAndDrop';
 import { NETWORK } from '../network';
 
 export const Editor = () => {
+  const ctx = useSuiClientContext();
   const account = useCurrentAccount();
+  const [network, setNetwork] = React.useState<
+    'mainnet' | 'testnet' | 'devnet'
+  >(NETWORK);
   const [ptb, setPtb] = React.useState<string | undefined>(undefined);
   const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction();
 
@@ -30,7 +35,7 @@ export const Editor = () => {
       signAndExecuteTransaction(
         {
           transaction,
-          chain: `sui:${NETWORK}`,
+          chain: `sui:${network}`,
         },
         {
           onSuccess: (result) => {
@@ -48,7 +53,9 @@ export const Editor = () => {
     }
   };
 
-  const handleDrop = (ptb: object) => {
+  const handleDrop = (ptb: any) => {
+    setNetwork((ptb as any).network);
+    ctx.selectNetwork((ptb as any).network);
     setPtb(JSON.stringify(ptb));
   };
 
@@ -58,7 +65,7 @@ export const Editor = () => {
         <>
           <DragAndDrop onDrop={handleDrop} />
           <PTBBuilder
-            network={NETWORK}
+            network={network}
             excuteTx={excuteTx}
             txbOrPtb={ptb}
             update={(value: string) => {