@iota/create-dapp 0.3.10 → 0.3.11

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @iota/create-dapp
 
+## 0.3.11
+
+### Patch Changes
+
+-   d8e3086: Fixes issue regarding refetching object data too soon after executing transactions
+-   Updated dependencies [40576ed]
+-   Updated dependencies [61b0944]
+-   Updated dependencies [966f83c]
+-   Updated dependencies [f008db3]
+-   Updated dependencies [733df30]
+-   Updated dependencies [13ca264]
+-   Updated dependencies [5bbafa8]
+-   Updated dependencies [28ce666]
+-   Updated dependencies [c855f8c]
+-   Updated dependencies [f008db3]
+-   Updated dependencies [464c15a]
+-   Updated dependencies [75554e6]
+    -   @iota/iota-sdk@1.5.0
+    -   @iota/dapp-kit@0.5.1
+
 ## 0.3.10
 
 ### Patch Changes

package/README.md

@@ -29,7 +29,7 @@ you including:
 - [Vite](https://vitejs.dev/)
 - [Radix UI](https://www.radix-ui.com/)
 - [ESLint](https://eslint.org/)
-- [`@iota/dapp-kit`](https://docs.iota.org/ts-sdk/dapp-kit)
+- [`@iota/dapp-kit`](https://docs.iota.org/developer/ts-sdk/dapp-kit)
 
 These templates are still new, and would love to get feedback and suggestions for improvements or
 future templates. Please open an issue on GitHub if you have any feedback.

package/package.json

@@ -3,7 +3,7 @@
   "author": "IOTA Foundation <info@iota.org>",
   "description": "A CLI for creating new IOTA dApps",
   "homepage": "https://docs.iota.org/ts-sdk/typescript/",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "license": "Apache-2.0",
   "files": [
     "CHANGELOG.md",
@@ -27,8 +27,8 @@
   "dependencies": {
     "@types/node": "^20.14.10",
     "enquirer": "^2.4.1",
-    "@iota/iota-sdk": "1.4.0",
-    "@iota/dapp-kit": "0.5.0"
+    "@iota/dapp-kit": "0.5.1",
+    "@iota/iota-sdk": "1.5.0"
   },
   "sideEffects": false,
   "bin": "./bin/index.js",

package/templates/react-client-dapp/README.md

@@ -8,7 +8,7 @@ Client dApp using the following tools:
 - [Vite](https://vitejs.dev/) for build tooling
 - [Radix UI](https://www.radix-ui.com/) for pre-built UI components
 - [ESLint](https://eslint.org/)
-- [`@iota/dapp-kit`](https://docs.iota.org/ts-sdk/dapp-kit) for
+- [`@iota/dapp-kit`](https://docs.iota.org/developer/ts-sdk/dapp-kit) for
   connecting to wallets and loading data
 - [pnpm](https://pnpm.io/) for package management
 

package/templates/react-e2e-counter/README.md

@@ -8,7 +8,7 @@ Client dApp using the following tools:
 - [Vite](https://vitejs.dev/) for build tooling
 - [Radix UI](https://www.radix-ui.com/) for pre-built UI components
 - [ESLint](https://eslint.org/) for linting
-- [`@iota/dapp-kit`](https://docs.iota.org/ts-sdk/dapp-kit) for
+- [`@iota/dapp-kit`](https://docs.iota.org/developer/ts-sdk/dapp-kit) for
   connecting to wallets and loading data
 - [pnpm](https://pnpm.io/) for package management
 

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

@@ -16,7 +16,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": {
     "@eslint/js": "^9.17.0",

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

@@ -8,23 +8,14 @@ import type { IotaObjectData } from "@iota/iota-sdk/client";
 import { Transaction } from "@iota/iota-sdk/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 iotaClient = useIotaClient();
   const currentAccount = useCurrentAccount();
-  const { mutate: signAndExecute } = useSignAndExecuteTransaction({
-    execute: async ({ bytes, signature }) =>
-      await iotaClient.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 } = useIotaClientQuery("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,13 @@ export function Counter({ id }: { id: string }) {
         transaction: tx,
       },
       {
-        onSuccess: async () => {
-          await refetch();
+        onSuccess: (tx) => {
+          iotaClient
+            .waitForTransaction({ digest: tx.digest })
+            .then(async () => {
+              await refetch();
+              setWaitingForTxn("");
+            });
         },
       },
     );
@@ -76,11 +76,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 "@iota/iota-sdk/transactions";
 import { Button, Container } from "@radix-ui/themes";
 import { useSignAndExecuteTransaction, useIotaClient } from "@iota/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 iotaClient = useIotaClient();
-  const { mutate: signAndExecute } = useSignAndExecuteTransaction({
-    execute: async ({ bytes, signature }) =>
-      await iotaClient.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,36 @@ export function CreateCounter({
         transaction: tx,
       },
       {
-        onSuccess: (result) => {
-          const objectId = result.effects?.created?.[0]?.reference?.objectId;
+        onSuccess: async ({ digest }) => {
+          const { effects } = await iotaClient.waitForTransaction({
+            digest: digest,
+            options: {
+              showEffects: true,
+            },
+          });
+
+          const objectId = effects?.created?.[0]?.reference?.objectId;
           if (objectId) {
             onCreated(objectId);
+          } else {
+            console.error("Failed to get objectId from transaction effects");
           }
         },
       },
     );
   }
+
+  return (
+    <Container>
+      <Button
+        size="3"
+        onClick={() => {
+          create();
+        }}
+        disabled={isSuccess || isPending}
+      >
+        {isSuccess || isPending ? <ClipLoader size={20} /> : "Create Counter"}
+      </Button>
+    </Container>
+  );
 }