@mysten/create-dapp 0.3.29 → 0.3.31

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @mysten/create-dapp
 
+## 0.3.31
+
+### Patch Changes
+
+- Updated dependencies [e7bc63e]
+  - @mysten/sui@1.14.2
+  - @mysten/dapp-kit@0.14.30
+
+## 0.3.30
+
+### Patch Changes
+
+- 325955b: Fixes issue regarding refetching object data too soon after executing transactions
+
 ## 0.3.29
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "author": "Mysten Labs <build@mystenlabs.com>",
   "description": "A CLI for creating new Sui dApps",
   "homepage": "https://sdk.mystenlabs.com",
-  "version": "0.3.29",
+  "version": "0.3.31",
   "license": "Apache-2.0",
   "files": [
     "CHANGELOG.md",
@@ -30,8 +30,8 @@
   "dependencies": {
     "@types/node": "^20.14.10",
     "enquirer": "^2.4.1",
-    "@mysten/dapp-kit": "0.14.29",
-    "@mysten/sui": "1.14.1"
+    "@mysten/dapp-kit": "0.14.30",
+    "@mysten/sui": "1.14.2"
   },
   "sideEffects": false,
   "bin": "./bin/index.js",

package/templates/react-e2e-counter/move/counter/Move.toml

@@ -4,7 +4,7 @@ version = "0.0.1"
 edition = "2024.beta"
 
 [dependencies]
-Sui = { git = "https://github.com/MystenLabs/sui.git", subdir = "crates/sui-framework/packages/sui-framework", rev = "framework/devnet" }
+Sui = { git = "https://github.com/MystenLabs/sui.git", subdir = "crates/sui-framework/packages/sui-framework", rev = "framework/testnet" }
 
 [addresses]
 counter = "0x0"

package/templates/react-e2e-counter/package.json

@@ -17,7 +17,8 @@
     "@radix-ui/themes": "^3.1.1",
     "@tanstack/react-query": "^5.50.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-spinners": "^0.14.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

package/templates/react-e2e-counter/src/Counter.tsx

@@ -8,23 +8,14 @@ import type { SuiObjectData } from "@mysten/sui/client";
 import { Transaction } from "@mysten/sui/transactions";
 import { Button, Flex, Heading, Text } from "@radix-ui/themes";
 import { useNetworkVariable } from "./networkConfig";
+import { useState } from "react";
+import ClipLoader from "react-spinners/ClipLoader";
 
 export function Counter({ id }: { id: string }) {
   const counterPackageId = useNetworkVariable("counterPackageId");
   const suiClient = useSuiClient();
   const currentAccount = useCurrentAccount();
-  const { mutate: signAndExecute } = useSignAndExecuteTransaction({
-    execute: async ({ bytes, signature }) =>
-      await suiClient.executeTransactionBlock({
-        transactionBlock: bytes,
-        signature,
-        options: {
-          // Raw effects are required so the effects can be reported back to the wallet
-          showRawEffects: true,
-          showEffects: true,
-        },
-      }),
-  });
+  const { mutate: signAndExecute } = useSignAndExecuteTransaction();
   const { data, isPending, error, refetch } = useSuiClientQuery("getObject", {
     id,
     options: {
@@ -33,7 +24,11 @@ export function Counter({ id }: { id: string }) {
     },
   });
 
+  const [waitingForTxn, setWaitingForTxn] = useState("");
+
   const executeMoveCall = (method: "increment" | "reset") => {
+    setWaitingForTxn(method);
+
     const tx = new Transaction();
 
     if (method === "reset") {
@@ -53,8 +48,11 @@ export function Counter({ id }: { id: string }) {
         transaction: tx,
       },
       {
-        onSuccess: async () => {
-          await refetch();
+        onSuccess: (tx) => {
+          suiClient.waitForTransaction({ digest: tx.digest }).then(async () => {
+            await refetch();
+            setWaitingForTxn("");
+          });
         },
       },
     );
@@ -76,11 +74,23 @@ export function Counter({ id }: { id: string }) {
       <Flex direction="column" gap="2">
         <Text>Count: {getCounterFields(data.data)?.value}</Text>
         <Flex direction="row" gap="2">
-          <Button onClick={() => executeMoveCall("increment")}>
-            Increment
+          <Button
+            onClick={() => executeMoveCall("increment")}
+            disabled={waitingForTxn !== ""}
+          >
+            {waitingForTxn === "increment" ? (
+              <ClipLoader size={20} />
+            ) : (
+              "Increment"
+            )}
           </Button>
           {ownedByCurrentAccount ? (
-            <Button onClick={() => executeMoveCall("reset")}>Reset</Button>
+            <Button
+              onClick={() => executeMoveCall("reset")}
+              disabled={waitingForTxn !== ""}
+            >
+              {waitingForTxn === "reset" ? <ClipLoader size={20} /> : "Reset"}
+            </Button>
           ) : null}
         </Flex>
       </Flex>

package/templates/react-e2e-counter/src/CreateCounter.tsx

@@ -2,6 +2,7 @@ import { Transaction } from "@mysten/sui/transactions";
 import { Button, Container } from "@radix-ui/themes";
 import { useSignAndExecuteTransaction, useSuiClient } from "@mysten/dapp-kit";
 import { useNetworkVariable } from "./networkConfig";
+import ClipLoader from "react-spinners/ClipLoader";
 
 export function CreateCounter({
   onCreated,
@@ -10,31 +11,11 @@ export function CreateCounter({
 }) {
   const counterPackageId = useNetworkVariable("counterPackageId");
   const suiClient = useSuiClient();
-  const { mutate: signAndExecute } = useSignAndExecuteTransaction({
-    execute: async ({ bytes, signature }) =>
-      await suiClient.executeTransactionBlock({
-        transactionBlock: bytes,
-        signature,
-        options: {
-          // Raw effects are required so the effects can be reported back to the wallet
-          showRawEffects: true,
-          showEffects: true,
-        },
-      }),
-  });
-
-  return (
-    <Container>
-      <Button
-        size="3"
-        onClick={() => {
-          create();
-        }}
-      >
-        Create Counter
-      </Button>
-    </Container>
-  );
+  const {
+    mutate: signAndExecute,
+    isSuccess,
+    isPending,
+  } = useSignAndExecuteTransaction();
 
   function create() {
     const tx = new Transaction();
@@ -49,13 +30,31 @@ export function CreateCounter({
         transaction: tx,
       },
       {
-        onSuccess: (result) => {
-          const objectId = result.effects?.created?.[0]?.reference?.objectId;
-          if (objectId) {
-            onCreated(objectId);
-          }
+        onSuccess: async ({ digest }) => {
+          const { effects } = await suiClient.waitForTransaction({
+            digest: digest,
+            options: {
+              showEffects: true,
+            },
+          });
+
+          onCreated(effects?.created?.[0]?.reference?.objectId!);
         },
       },
     );
   }
+
+  return (
+    <Container>
+      <Button
+        size="3"
+        onClick={() => {
+          create();
+        }}
+        disabled={isSuccess || isPending}
+      >
+        {isSuccess || isPending ? <ClipLoader size={20} /> : "Create Counter"}
+      </Button>
+    </Container>
+  );
 }