@iota/create-dapp 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @iota/create-dapp
 
+## 0.2.0
+
+### Minor Changes
+
+-   6eabd18: Changes for compatibility with the node, simplification of exposed APIs and general
+    improvements.
+
+### Patch Changes
+
+-   Updated dependencies [6eabd18]
+    -   @iota/dapp-kit@0.3.0
+    -   @iota/iota-sdk@0.3.0
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -27,7 +27,7 @@ you including:
 - [Vite](https://vitejs.dev/)
 - [Radix UI](https://www.radix-ui.com/)
 - [ESLint](https://eslint.org/)
-- [`@iota/dapp-kit`]()
+- [`@iota/dapp-kit`](https://wiki.iota.org/references/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

@@ -1,8 +1,8 @@
 {
   "name": "@iota/create-dapp",
-  "author": "IOTA Foundation <contact@iota.org>",
-  "description": "A CLI for creating new Iota dApps",
-  "version": "0.1.0",
+  "author": "IOTA Foundation <info@iota.org>",
+  "description": "A CLI for creating new IOTA dApps",
+  "version": "0.2.0",
   "license": "Apache-2.0",
   "files": [
     "CHANGELOG.md",
@@ -20,14 +20,14 @@
     "url": "https://github.com/iotaledger/iota/issues/new"
   },
   "devDependencies": {
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.3",
     "@iota/build-scripts": "0.0.0"
   },
   "dependencies": {
-    "@types/node": "^20.4.2",
+    "@types/node": "^20.14.10",
     "enquirer": "^2.4.1",
-    "@iota/dapp-kit": "0.2.0",
-    "@iota/iota-sdk": "0.2.0"
+    "@iota/dapp-kit": "0.3.0",
+    "@iota/iota-sdk": "0.3.0"
   },
   "sideEffects": false,
   "bin": "./bin/index.js",

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

@@ -1,4 +1,4 @@
-# Iota dApp Starter Template
+# IOTA dApp Starter Template
 
 This dApp was created using `@iota/create-dapp` that sets up a basic React
 Client dApp using the following tools:
@@ -8,8 +8,8 @@ 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`]() for connecting to
-  wallets and loading data
+- [`@iota/dapp-kit`](https://wiki.iota.org/references/ts-sdk/dapp-kit) for
+  connecting to wallets and loading data
 - [pnpm](https://pnpm.io/) for package management
 
 ## Starting your dApp

package/templates/react-client-dapp/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Iota dApp Starter</title>
+    <title>IOTA dApp Starter</title>
 
     <style>
       /*

package/templates/react-client-dapp/package.json

@@ -14,22 +14,22 @@
     "@iota/iota-sdk": "workspace:*",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^2.0.0",
-    "@tanstack/react-query": "^5.0.0",
+    "@radix-ui/themes": "^3.1.1",
+    "@tanstack/react-query": "^5.50.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.1.0",
-    "@typescript-eslint/parser": "^6.1.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "prettier": "^3.0.0",
-    "typescript": "^5.3.3",
-    "vite": "^4.4.4"
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "eslint": "^9.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "prettier": "^3.3.2",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3"
   }
 }

package/templates/react-client-dapp/src/main.tsx

@@ -1,4 +1,5 @@
-// Copyright (c) 2024 IOTA Stiftung
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
 import React from "react";
@@ -6,30 +7,19 @@ import ReactDOM from "react-dom/client";
 import "@iota/dapp-kit/dist/index.css";
 import "@radix-ui/themes/styles.css";
 
-import { getFullnodeUrl } from "@iota/iota-sdk/client";
-import {
-  IotaClientProvider,
-  WalletProvider,
-  createNetworkConfig,
-} from "@iota/dapp-kit";
+import { IotaClientProvider, WalletProvider } from "@iota/dapp-kit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Theme } from "@radix-ui/themes";
 import App from "./App.tsx";
+import { networkConfig } from "./networkConfig.ts";
 
 const queryClient = new QueryClient();
 
-const { networkConfig } = createNetworkConfig({
-  localnet: { url: getFullnodeUrl("localnet") },
-  devnet: { url: getFullnodeUrl("devnet") },
-  testnet: { url: getFullnodeUrl("testnet") },
-  mainnet: { url: getFullnodeUrl("mainnet") },
-});
-
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Theme appearance="dark">
       <QueryClientProvider client={queryClient}>
-        <IotaClientProvider networks={networkConfig} defaultNetwork="devnet">
+        <IotaClientProvider networks={networkConfig} defaultNetwork="testnet">
           <WalletProvider autoConnect>
             <App />
           </WalletProvider>

package/templates/react-client-dapp/src/networkConfig.ts

@@ -0,0 +1,17 @@
+import { getFullnodeUrl } from "@iota/iota-sdk/client";
+import { createNetworkConfig } from "@iota/dapp-kit";
+
+const { networkConfig, useNetworkVariable, useNetworkVariables } =
+  createNetworkConfig({
+    devnet: {
+      url: getFullnodeUrl("devnet"),
+    },
+    testnet: {
+      url: getFullnodeUrl("testnet"),
+    },
+    mainnet: {
+      url: getFullnodeUrl("mainnet"),
+    },
+  });
+
+export { useNetworkVariable, useNetworkVariables, networkConfig };

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

@@ -1,4 +1,4 @@
-# Iota dApp Starter Template
+# IOTA dApp Starter Template
 
 This dApp was created using `@iota/create-dapp` that sets up a basic React
 Client dApp using the following tools:
@@ -8,25 +8,28 @@ 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`]() for connecting to
-  wallets and loading data
+- [`@iota/dapp-kit`](https://wiki.iota.org/references/ts-sdk/dapp-kit) for
+  connecting to wallets and loading data
 - [pnpm](https://pnpm.io/) for package management
 
+For a full guide on how to build this dApp from scratch, visit this
+[guide](http://wiki.iota.org/guides/developer/app-examples/e2e-counter#frontend).
+
 ## Deploying your Move code
 
-### Install Iota cli
+### Install IOTA cli
 
-Before deploying your move code, ensure that you have installed the Iota CLI.
+Before deploying your move code, ensure that you have installed the IOTA CLI.
 You can follow the
-[Iota installation instruction](https://docs.iota.io/build/install) to get
+[IOTA installation instruction](https://wiki.iota.org/build/install) to get
 everything set up.
 
-This template uses `devnet` by default, so we'll need to set up a devnet
+This template uses `testnet` by default, so we'll need to set up a testnet
 environment in the CLI:
 
 ```bash
-iota client new-env --alias devnet --rpc https://fullnode.devnet.iota.io:443
-iota client switch --env devnet
+iota client new-env --alias testnet --rpc https://fullnode.testnet.iota.org:443
+iota client switch --env testnet
 ```
 
 If you haven't set up an address in the iota client yet, you can use the
@@ -44,11 +47,11 @@ with your new address:
 iota client switch --address 0xYOUR_ADDRESS...
 ```
 
-We can ensure we have some Iota in our new wallet by requesting Iota from the
+We can ensure we have some IOTA in our new wallet by requesting IOTA from the
 faucet (make sure to replace the address with your address):
 
 ```bash
-curl --location --request POST 'https://faucet.devnet.iota.io/gas' \
+curl --location --request POST 'https://faucet.testnet.iota.org/gas' \
 --header 'Content-Type: application/json' \
 --data-raw '{
     "FixedAmountRequest": {
@@ -60,7 +63,7 @@ curl --location --request POST 'https://faucet.devnet.iota.io/gas' \
 ### Publishing the move package
 
 The move code for this template is located in the `move` directory. To publish
-it, you can enter the `move` directory, and publish it with the Iota CLI:
+it, you can enter the `move` directory, and publish it with the IOTA CLI:
 
 ```bash
 cd move
@@ -71,7 +74,7 @@ In the output there will be an object with a `"packageId"` property. You'll want
 to save that package ID to the `src/constants.ts` file as `PACKAGE_ID`:
 
 ```ts
-export const DEVNET_COUNTER_PACKAGE_ID = "<YOUR_PACKAGE_ID>";
+export const TESTNET_COUNTER_PACKAGE_ID = "<YOUR_PACKAGE_ID>";
 ```
 
 Now that we have published the move code, and update the package ID, we can

package/templates/react-e2e-counter/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Iota dApp Starter</title>
+    <title>IOTA dApp Starter</title>
 
     <style>
       /*

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

@@ -1,9 +1,10 @@
 [package]
 name = "counter"
 version = "0.0.1"
+edition = "2024.beta"
 
 [dependencies]
-Iota = { git = "https://github.com/iotaledger/iota.git", subdir = "crates/iota-framework/packages/iota-framework", rev = "framework/devnet" }
+Iota = { git = "https://github.com/iotaledger/iota.git", subdir = "crates/iota-framework/packages/iota-framework", rev = "devnet" }
 
 [addresses]
 counter = "0x0"

package/templates/react-e2e-counter/move/counter/sources/counter.move

@@ -8,47 +8,30 @@
 /// - everyone can increment a counter by 1
 /// - the owner of the counter can reset it to any value
 module counter::counter {
-    use iota::transfer;
-    use iota::object::{Self, UID};
-    use iota::tx_context::{Self, TxContext};
-
-    /// A shared counter.
-    struct Counter has key {
-        id: UID,
-        owner: address,
-        value: u64
-    }
-
-    public fun owner(counter: &Counter): address {
-        counter.owner
-    }
-
-    public fun value(counter: &Counter): u64 {
-        counter.value
-    }
-
-    /// Create and share a Counter object.
-    public fun create(ctx: &mut TxContext) {
-        transfer::share_object(Counter {
-            id: object::new(ctx),
-            owner: tx_context::sender(ctx),
-            value: 0
-        })
-    }
-
-    /// Increment a counter by 1.
-    public fun increment(counter: &mut Counter) {
-        counter.value = counter.value + 1;
-    }
-
-    /// Set value (only runnable by the Counter owner)
-    public fun set_value(counter: &mut Counter, value: u64, ctx: &TxContext) {
-        assert!(counter.owner == tx_context::sender(ctx), 0);
-        counter.value = value;
-    }
-
-    /// Assert a value for the counter.
-    public fun assert_value(counter: &Counter, value: u64) {
-        assert!(counter.value == value, 0)
-    }
+  /// A shared counter.
+  public struct Counter has key {
+    id: UID,
+    owner: address,
+    value: u64
+  }
+
+  /// Create and share a Counter object.
+  public fun create(ctx: &mut TxContext) {
+    transfer::share_object(Counter {
+      id: object::new(ctx),
+      owner: ctx.sender(),
+      value: 0
+    })
+  }
+
+  /// Increment a counter by 1.
+  public fun increment(counter: &mut Counter) {
+    counter.value = counter.value + 1;
+  }
+
+  /// Set value (only runnable by the Counter owner)
+  public fun set_value(counter: &mut Counter, value: u64, ctx: &TxContext) {
+    assert!(counter.owner == ctx.sender(), 0);
+    counter.value = value;
+  }
 }

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

@@ -14,22 +14,22 @@
     "@iota/iota-sdk": "workspace:*",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^2.0.0",
-    "@tanstack/react-query": "^5.0.0",
+    "@radix-ui/themes": "^3.1.1",
+    "@tanstack/react-query": "^5.50.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "prettier": "^3.0.0",
-    "typescript": "^5.3.3",
-    "vite": "^4.4.4"
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "prettier": "^3.3.2",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3"
   }
 }

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

@@ -1,4 +1,5 @@
-// Copyright (c) 2024 IOTA Stiftung
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
 import { ConnectButton, useCurrentAccount } from "@iota/dapp-kit";

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

@@ -1,22 +1,34 @@
-// Copyright (c) 2024 IOTA Stiftung
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
 import {
   useCurrentAccount,
-  useSignAndExecuteTransactionBlock,
+  useSignAndExecuteTransaction,
   useIotaClient,
   useIotaClientQuery,
 } from "@iota/dapp-kit";
 import type { IotaObjectData } from "@iota/iota-sdk/client";
-import { TransactionBlock } from "@iota/iota-sdk/transactions";
+import { Transaction } from "@iota/iota-sdk/transactions";
 import { Button, Flex, Heading, Text } from "@radix-ui/themes";
 import { useNetworkVariable } from "./networkConfig";
 
 export function Counter({ id }: { id: string }) {
-  const client = useIotaClient();
-  const currentAccount = useCurrentAccount();
   const counterPackageId = useNetworkVariable("counterPackageId");
-  const { mutate: signAndExecute } = useSignAndExecuteTransactionBlock();
+  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 { data, isPending, error, refetch } = useIotaClientQuery("getObject", {
     id,
     options: {
@@ -26,33 +38,27 @@ export function Counter({ id }: { id: string }) {
   });
 
   const executeMoveCall = (method: "increment" | "reset") => {
-    const txb = new TransactionBlock();
+    const tx = new Transaction();
 
     if (method === "reset") {
-      txb.moveCall({
-        arguments: [txb.object(id), txb.pure.u64(0)],
+      tx.moveCall({
+        arguments: [tx.object(id), tx.pure.u64(0)],
         target: `${counterPackageId}::counter::set_value`,
       });
     } else {
-      txb.moveCall({
-        arguments: [txb.object(id)],
+      tx.moveCall({
+        arguments: [tx.object(id)],
         target: `${counterPackageId}::counter::increment`,
       });
     }
 
     signAndExecute(
       {
-        transactionBlock: txb,
-        options: {
-          showEffects: true,
-          showObjectChanges: true,
-        },
+        transaction: tx,
       },
       {
-        onSuccess: (tx) => {
-          client.waitForTransactionBlock({ digest: tx.digest }).then(() => {
-            refetch();
-          });
+        onSuccess: async () => {
+          await refetch();
         },
       },
     );

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

@@ -1,12 +1,6 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { TransactionBlock } from "@iota/iota-sdk/transactions";
+import { Transaction } from "@iota/iota-sdk/transactions";
 import { Button, Container } from "@radix-ui/themes";
-import {
-  useSignAndExecuteTransactionBlock,
-  useIotaClient,
-} from "@iota/dapp-kit";
+import { useSignAndExecuteTransaction, useIotaClient } from "@iota/dapp-kit";
 import { useNetworkVariable } from "./networkConfig";
 
 export function CreateCounter({
@@ -14,9 +8,20 @@ export function CreateCounter({
 }: {
   onCreated: (id: string) => void;
 }) {
-  const client = useIotaClient();
   const counterPackageId = useNetworkVariable("counterPackageId");
-  const { mutate: signAndExecute } = useSignAndExecuteTransactionBlock();
+  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>
@@ -32,34 +37,23 @@ export function CreateCounter({
   );
 
   function create() {
-    const txb = new TransactionBlock();
+    const tx = new Transaction();
 
-    txb.moveCall({
+    tx.moveCall({
       arguments: [],
       target: `${counterPackageId}::counter::create`,
     });
 
     signAndExecute(
       {
-        transactionBlock: txb,
-        options: {
-          showEffects: true,
-          showObjectChanges: true,
-        },
+        transaction: tx,
       },
       {
-        onSuccess: (tx) => {
-          client
-            .waitForTransactionBlock({
-              digest: tx.digest,
-            })
-            .then(() => {
-              const objectId = tx.effects?.created?.[0]?.reference?.objectId;
-
-              if (objectId) {
-                onCreated(objectId);
-              }
-            });
+        onSuccess: (result) => {
+          const objectId = result.effects?.created?.[0]?.reference?.objectId;
+          if (objectId) {
+            onCreated(objectId);
+          }
         },
       },
     );

package/templates/react-e2e-counter/src/constants.ts

@@ -1,2 +1,3 @@
 export const DEVNET_COUNTER_PACKAGE_ID = "0xTODO";
+export const TESTNET_COUNTER_PACKAGE_ID = "0xTODO";
 export const MAINNET_COUNTER_PACKAGE_ID = "0xTODO";

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

@@ -15,7 +15,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Theme appearance="dark">
       <QueryClientProvider client={queryClient}>
-        <IotaClientProvider networks={networkConfig} defaultNetwork="devnet">
+        <IotaClientProvider networks={networkConfig} defaultNetwork="testnet">
           <WalletProvider autoConnect>
             <App />
           </WalletProvider>

package/templates/react-e2e-counter/src/networkConfig.ts

@@ -1,9 +1,11 @@
-// Copyright (c) 2024 IOTA Stiftung
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
 import { getFullnodeUrl } from "@iota/iota-sdk/client";
 import {
   DEVNET_COUNTER_PACKAGE_ID,
+  TESTNET_COUNTER_PACKAGE_ID,
   MAINNET_COUNTER_PACKAGE_ID,
 } from "./constants.ts";
 import { createNetworkConfig } from "@iota/dapp-kit";
@@ -16,6 +18,12 @@ const { networkConfig, useNetworkVariable, useNetworkVariables } =
         counterPackageId: DEVNET_COUNTER_PACKAGE_ID,
       },
     },
+    testnet: {
+      url: getFullnodeUrl("testnet"),
+      variables: {
+        counterPackageId: TESTNET_COUNTER_PACKAGE_ID,
+      },
+    },
     mainnet: {
       url: getFullnodeUrl("mainnet"),
       variables: {