@mysten/create-dapp 0.3.11 → 0.3.12

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @mysten/create-dapp
 
+## 0.3.12
+
+### Patch Changes
+
+- 0f27a97: Update dependencies
+- Updated dependencies [7fc464a]
+- Updated dependencies [086b2bc]
+- Updated dependencies [0fb0628]
+- Updated dependencies [cdedf69]
+- Updated dependencies [0f27a97]
+- Updated dependencies [beed646]
+  - @mysten/sui@1.3.0
+  - @mysten/dapp-kit@0.14.12
+
 ## 0.3.11
 
 ### Patch Changes
@@ -92,8 +106,10 @@
 
 ### Minor Changes
 
-- a92b03de42: The Typescript SDK has been renamed to `@mysten/sui` and includes many new features and breaking changes.
-  See the [full migration guide](https://sdk.mystenlabs.com/typescript/migrations/sui-1.0) for details on how to upgrade.
+- a92b03de42: The Typescript SDK has been renamed to `@mysten/sui` and includes many new features
+  and breaking changes. See the
+  [full migration guide](https://sdk.mystenlabs.com/typescript/migrations/sui-1.0) for details on
+  how to upgrade.
 
 ### 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.11",
+  "version": "0.3.12",
   "license": "Apache-2.0",
   "files": [
     "CHANGELOG.md",
@@ -24,14 +24,14 @@
     "access": "public"
   },
   "devDependencies": {
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.3",
     "@mysten/build-scripts": "0.0.0"
   },
   "dependencies": {
-    "@types/node": "^20.4.2",
+    "@types/node": "^20.14.10",
     "enquirer": "^2.4.1",
-    "@mysten/dapp-kit": "0.14.11",
-    "@mysten/sui": "1.2.1"
+    "@mysten/dapp-kit": "0.14.12",
+    "@mysten/sui": "1.3.0"
   },
   "sideEffects": false,
   "bin": "./bin/index.js",

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

@@ -14,22 +14,22 @@
     "@mysten/sui": "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",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.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.2.15",
-    "@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": "^18.3.3",
+    "@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

@@ -3,25 +3,14 @@ import ReactDOM from "react-dom/client";
 import "@mysten/dapp-kit/dist/index.css";
 import "@radix-ui/themes/styles.css";
 
-import { getFullnodeUrl } from "@mysten/sui/client";
-import {
-  SuiClientProvider,
-  WalletProvider,
-  createNetworkConfig,
-} from "@mysten/dapp-kit";
+import { SuiClientProvider, WalletProvider } from "@mysten/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">

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

@@ -0,0 +1,17 @@
+import { getFullnodeUrl } from "@mysten/sui/client";
+import { createNetworkConfig } from "@mysten/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

@@ -12,6 +12,9 @@ Client dApp using the following tools:
   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://docs.sui.io/guides/developer/app-examples/e2e-counter#frontend).
+
 ## Deploying your Move code
 
 ### Install Sui cli
@@ -20,12 +23,12 @@ Before deploying your move code, ensure that you have installed the Sui CLI. You
 can follow the [Sui installation instruction](https://docs.sui.io/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
-sui client new-env --alias devnet --rpc https://fullnode.devnet.sui.io:443
-sui client switch --env devnet
+sui client new-env --alias testnet --rpc https://fullnode.testnet.sui.io:443
+sui client switch --env testnet
 ```
 
 If you haven't set up an address in the sui client yet, you can use the
@@ -47,7 +50,7 @@ We can ensure we have some Sui in our new wallet by requesting Sui from the
 faucet (make sure to replace the address with your address):
 
 ```bash
-curl --location --request POST 'https://faucet.devnet.sui.io/gas' \
+curl --location --request POST 'https://faucet.testnet.sui.io/gas' \
 --header 'Content-Type: application/json' \
 --data-raw '{
     "FixedAmountRequest": {
@@ -70,7 +73,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/move/counter/sources/counter.move

@@ -7,47 +7,30 @@
 /// - everyone can increment a counter by 1
 /// - the owner of the counter can reset it to any value
 module counter::counter {
-    use sui::transfer;
-    use sui::object::{Self, UID};
-    use sui::tx_context::{Self, TxContext};
-
-    /// A shared counter.
-    public 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 @@
     "@mysten/sui": "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",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.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.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^18.3.3",
+    "@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/Counter.tsx

@@ -10,10 +10,21 @@ import { Button, Flex, Heading, Text } from "@radix-ui/themes";
 import { useNetworkVariable } from "./networkConfig";
 
 export function Counter({ id }: { id: string }) {
-  const client = useSuiClient();
-  const currentAccount = useCurrentAccount();
   const counterPackageId = useNetworkVariable("counterPackageId");
-  const { mutate: signAndExecute } = useSignAndExecuteTransaction();
+  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 { data, isPending, error, refetch } = useSuiClientQuery("getObject", {
     id,
     options: {
@@ -42,10 +53,8 @@ export function Counter({ id }: { id: string }) {
         transaction: tx,
       },
       {
-        onSuccess: (tx) => {
-          client.waitForTransaction({ digest: tx.digest }).then(() => {
-            refetch();
-          });
+        onSuccess: async () => {
+          await refetch();
         },
       },
     );

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

@@ -8,9 +8,20 @@ export function CreateCounter({
 }: {
   onCreated: (id: string) => void;
 }) {
-  const client = useSuiClient();
   const counterPackageId = useNetworkVariable("counterPackageId");
-  const { mutate: signAndExecute } = useSignAndExecuteTransaction();
+  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>
@@ -38,21 +49,11 @@ export function CreateCounter({
         transaction: tx,
       },
       {
-        onSuccess: ({ digest }) => {
-          client
-            .waitForTransaction({
-              digest: digest,
-              options: {
-                showEffects: true,
-              },
-            })
-            .then((tx) => {
-              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);
+          }
         },
       },
     );