@mysten/create-dapp 0.5.13 → 0.6.0

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

@@ -1,106 +1,179 @@
 import {
   useCurrentAccount,
-  useSignAndExecuteTransaction,
-  useSuiClient,
-  useSuiClientQuery,
-} from "@mysten/dapp-kit";
-import type { SuiObjectData } from "@mysten/sui/client";
+  useCurrentClient,
+  useDAppKit,
+} from "@mysten/dapp-kit-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 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";
+import {
+  Counter as CounterStruct,
+  increment,
+  setValue,
+} from "./contracts/counter/counter";
+import { Button } from "./components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./components/ui/card";
+import { Plus, RotateCcw } from "lucide-react";
 
 export function Counter({ id }: { id: string }) {
-  const counterPackageId = useNetworkVariable("counterPackageId");
-  const suiClient = useSuiClient();
+  const client = useCurrentClient();
   const currentAccount = useCurrentAccount();
-  const { mutate: signAndExecute } = useSignAndExecuteTransaction();
-  const { data, isPending, error, refetch } = useSuiClientQuery("getObject", {
-    id,
-    options: {
-      showContent: true,
-      showOwner: true,
+  const dAppKit = useDAppKit();
+  const queryClient = useQueryClient();
+
+  // Fetch counter object with React Query
+  const { data, isPending, error } = useQuery({
+    queryKey: ["counter", id],
+    queryFn: async () => {
+      const { object } = await client.getObject({
+        objectId: id,
+        include: { content: true },
+      });
+      return object;
     },
   });
 
-  const [waitingForTxn, setWaitingForTxn] = useState("");
+  // Mutation for executing move calls
+  const incrementMutation = useMutation({
+    mutationFn: async () => {
+      const tx = new Transaction();
+      tx.add(increment({ arguments: { counter: id } }));
 
-  const executeMoveCall = (method: "increment" | "reset") => {
-    setWaitingForTxn(method);
+      const result = await dAppKit.signAndExecuteTransaction({
+        transaction: tx,
+      });
 
-    const tx = new Transaction();
+      if (result.$kind === "FailedTransaction") {
+        throw new Error("Transaction failed");
+      }
 
-    if (method === "reset") {
-      tx.moveCall({
-        arguments: [tx.object(id), tx.pure.u64(0)],
-        target: `${counterPackageId}::counter::set_value`,
-      });
-    } else {
-      tx.moveCall({
-        arguments: [tx.object(id)],
-        target: `${counterPackageId}::counter::increment`,
-      });
-    }
+      await client.waitForTransaction({ result });
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["counter", id] });
+    },
+    onError: (err) => {
+      console.error(err);
+    },
+  });
 
-    signAndExecute(
-      {
+  const resetMutation = useMutation({
+    mutationFn: async () => {
+      const tx = new Transaction();
+      tx.add(setValue({ arguments: { counter: id, value: 0 } }));
+
+      const result = await dAppKit.signAndExecuteTransaction({
         transaction: tx,
-      },
-      {
-        onSuccess: (tx) => {
-          suiClient.waitForTransaction({ digest: tx.digest }).then(async () => {
-            await refetch();
-            setWaitingForTxn("");
-          });
-        },
-      },
-    );
-  };
+      });
+
+      if (result.$kind === "FailedTransaction") {
+        throw new Error("Transaction failed");
+      }
 
-  if (isPending) return <Text>Loading...</Text>;
+      await client.waitForTransaction({ result });
+      return result;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["counter", id] });
+    },
+    onError: (err) => {
+      console.error(err);
+    },
+  });
+
+  const isAnyMutationPending =
+    incrementMutation.isPending || resetMutation.isPending;
+
+  if (isPending) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center py-12">
+          <div className="text-muted-foreground">Loading...</div>
+        </CardContent>
+      </Card>
+    );
+  }
 
-  if (error) return <Text>Error: {error.message}</Text>;
+  if (error) {
+    return (
+      <Card>
+        <CardContent className="py-6">
+          <p className="text-destructive-foreground">
+            Error: {(error as Error)?.message || "Unknown error"}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
 
-  if (!data.data) return <Text>Not found</Text>;
+  if (!data) {
+    return (
+      <Card>
+        <CardContent className="py-6">
+          <p className="text-muted-foreground">Counter not found</p>
+        </CardContent>
+      </Card>
+    );
+  }
 
-  const ownedByCurrentAccount =
-    getCounterFields(data.data)?.owner === currentAccount?.address;
+  const fields = getCounterFields(data);
+  const ownedByCurrentAccount = fields?.owner === currentAccount?.address;
 
   return (
-    <>
-      <Heading size="3">Counter {id}</Heading>
-
-      <Flex direction="column" gap="2">
-        <Text>Count: {getCounterFields(data.data)?.value}</Text>
-        <Flex direction="row" gap="2">
+    <Card>
+      <CardHeader>
+        <CardTitle>Counter</CardTitle>
+        <CardDescription className="font-mono text-xs break-all">
+          {id}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="text-center">
+          <span className="text-6xl font-bold tabular-nums">
+            {fields?.value ?? 0}
+          </span>
+        </div>
+        <div className="flex gap-2 justify-center">
           <Button
-            onClick={() => executeMoveCall("increment")}
-            disabled={waitingForTxn !== ""}
+            onClick={() => incrementMutation.mutate()}
+            loading={incrementMutation.isPending}
+            disabled={isAnyMutationPending}
           >
-            {waitingForTxn === "increment" ? (
-              <ClipLoader size={20} />
-            ) : (
-              "Increment"
-            )}
+            <Plus className="h-4 w-4" />
+            Increment
           </Button>
-          {ownedByCurrentAccount ? (
+          {ownedByCurrentAccount && (
             <Button
-              onClick={() => executeMoveCall("reset")}
-              disabled={waitingForTxn !== ""}
+              variant="secondary"
+              onClick={() => resetMutation.mutate()}
+              loading={resetMutation.isPending}
+              disabled={isAnyMutationPending}
             >
-              {waitingForTxn === "reset" ? <ClipLoader size={20} /> : "Reset"}
+              <RotateCcw className="h-4 w-4" />
+              Reset
             </Button>
-          ) : null}
-        </Flex>
-      </Flex>
-    </>
+          )}
+        </div>
+      </CardContent>
+    </Card>
   );
 }
-function getCounterFields(data: SuiObjectData) {
-  if (data.content?.dataType !== "moveObject") {
+
+function getCounterFields(data: { content?: Uint8Array }) {
+  if (!data.content) {
     return null;
   }
 
-  return data.content.fields as { value: number; owner: string };
+  try {
+    const parsed = CounterStruct.parse(data.content);
+    return { value: Number(parsed.value), owner: parsed.owner };
+  } catch {
+    return null;
+  }
 }

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

@@ -1,60 +1,101 @@
 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";
+import { useCurrentClient, useDAppKit } from "@mysten/dapp-kit-react";
+import { useState } from "react";
+import { create as createCounter } from "./contracts/counter/counter";
+import { Button } from "./components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./components/ui/card";
+import { PlusCircle } from "lucide-react";
 
 export function CreateCounter({
   onCreated,
 }: {
   onCreated: (id: string) => void;
 }) {
-  const counterPackageId = useNetworkVariable("counterPackageId");
-  const suiClient = useSuiClient();
-  const {
-    mutate: signAndExecute,
-    isSuccess,
-    isPending,
-  } = useSignAndExecuteTransaction();
-
-  function create() {
+  const client = useCurrentClient();
+  const dAppKit = useDAppKit();
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function create() {
+    setIsPending(true);
+    setError(null);
+
     const tx = new Transaction();
 
-    tx.moveCall({
-      arguments: [],
-      target: `${counterPackageId}::counter::create`,
-    });
+    tx.add(createCounter());
 
-    signAndExecute(
-      {
+    try {
+      const result = await dAppKit.signAndExecuteTransaction({
         transaction: tx,
-      },
-      {
-        onSuccess: async ({ digest }) => {
-          const { effects } = await suiClient.waitForTransaction({
-            digest: digest,
-            options: {
-              showEffects: true,
-            },
-          });
-
-          onCreated(effects?.created?.[0]?.reference?.objectId!);
+      });
+
+      if (result.$kind === "FailedTransaction") {
+        throw new Error("Transaction failed");
+      }
+
+      const txResult = await client.waitForTransaction({
+        digest: result.Transaction.digest,
+        include: {
+          effects: true,
         },
-      },
-    );
+      });
+
+      if (txResult.$kind === "FailedTransaction") {
+        throw new Error("Transaction failed");
+      }
+
+      // Find the created object from the effects
+      const createdObject = txResult.Transaction.effects?.changedObjects?.find(
+        (obj: { idOperation?: string; objectId?: string }) =>
+          obj.idOperation === "Created",
+      );
+
+      const id = createdObject?.objectId;
+
+      if (!id) {
+        throw new Error("Counter object ID not found in transaction effects");
+      }
+
+      onCreated(id);
+    } catch (err) {
+      console.error(err);
+      setError(err instanceof Error ? err.message : "An error occurred");
+      setIsPending(false);
+    }
   }
 
   return (
-    <Container>
-      <Button
-        size="3"
-        onClick={() => {
-          create();
-        }}
-        disabled={isSuccess || isPending}
-      >
-        {isSuccess || isPending ? <ClipLoader size={20} /> : "Create Counter"}
-      </Button>
-    </Container>
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <PlusCircle className="h-5 w-5" />
+          Create Counter
+        </CardTitle>
+        <CardDescription>
+          Deploy a new counter object on the Sui blockchain.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {error && (
+          <div className="mb-4 p-3 rounded-md bg-red-50 border border-red-200 text-red-800 text-sm">
+            {error}
+          </div>
+        )}
+        <Button
+          size="lg"
+          className="w-full"
+          onClick={create}
+          loading={isPending}
+        >
+          Create Counter
+        </Button>
+      </CardContent>
+    </Card>
   );
 }

package/templates/react-e2e-counter/src/components/ui/button.tsx

@@ -0,0 +1,52 @@
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "../../lib/utils";
+import { Loader2 } from "lucide-react";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "secondary" | "outline" | "ghost";
+  size?: "default" | "sm" | "lg";
+  loading?: boolean;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  loading = false,
+  disabled,
+  children,
+  ref,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        {
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90":
+            variant === "default",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80":
+            variant === "secondary",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground":
+            variant === "outline",
+          "hover:bg-accent hover:text-accent-foreground": variant === "ghost",
+        },
+        {
+          "h-9 px-4 py-2": size === "default",
+          "h-8 rounded-md px-3 text-xs": size === "sm",
+          "h-10 rounded-md px-8": size === "lg",
+        },
+        className,
+      )}
+      ref={ref}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+      {children}
+    </button>
+  );
+}
+
+export { Button };

package/templates/react-e2e-counter/src/components/ui/card.tsx

@@ -0,0 +1,75 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/utils";
+
+function Card({
+  className,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-xl border bg-card text-card-foreground shadow",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
+  return (
+    <div
+      ref={ref}
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  className,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLHeadingElement> & {
+  ref?: React.Ref<HTMLHeadingElement>;
+}) {
+  return (
+    <h3
+      ref={ref}
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLParagraphElement> & {
+  ref?: React.Ref<HTMLParagraphElement>;
+}) {
+  return (
+    <p
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  className,
+  ref,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { ref?: React.Ref<HTMLDivElement> }) {
+  return <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />;
+}
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent };

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

@@ -1,3 +1,4 @@
-export const DEVNET_COUNTER_PACKAGE_ID = "0xTODO";
-export const TESTNET_COUNTER_PACKAGE_ID = "0xTODO";
-export const MAINNET_COUNTER_PACKAGE_ID = "0xTODO";
+// TODO: Update these with your deployed package IDs after running `sui client publish`
+export const DEVNET_COUNTER_PACKAGE_ID: string | undefined = undefined;
+export const TESTNET_COUNTER_PACKAGE_ID: string | undefined = undefined;
+export const MAINNET_COUNTER_PACKAGE_ID: string | undefined = undefined;

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

@@ -0,0 +1,96 @@
+/**************************************************************
+ * THIS FILE IS GENERATED AND SHOULD NOT BE MANUALLY MODIFIED *
+ **************************************************************/
+
+/**
+ * This example demonstrates a basic use of a shared object. Rules:
+ *
+ * - anyone can create and share a counter
+ * - everyone can increment a counter by 1
+ * - the owner of the counter can reset it to any value
+ */
+
+import {
+  MoveStruct,
+  normalizeMoveArguments,
+  type RawTransactionArgument,
+} from "../utils/index.js";
+import { bcs } from "@mysten/sui/bcs";
+import { type Transaction } from "@mysten/sui/transactions";
+const $moduleName = "@local-pkg/counter::counter";
+export const Counter = new MoveStruct({
+  name: `${$moduleName}::Counter`,
+  fields: {
+    id: bcs.Address,
+    owner: bcs.Address,
+    value: bcs.u64(),
+  },
+});
+export interface CreateOptions {
+  package?: string;
+  arguments?: [];
+}
+/** Create and share a Counter object. */
+export function create(options: CreateOptions = {}) {
+  const packageAddress = options.package ?? "@local-pkg/counter";
+  return (tx: Transaction) =>
+    tx.moveCall({
+      package: packageAddress,
+      module: "counter",
+      function: "create",
+    });
+}
+export interface IncrementArguments {
+  counter: RawTransactionArgument<string>;
+}
+export interface IncrementOptions {
+  package?: string;
+  arguments: IncrementArguments | [counter: RawTransactionArgument<string>];
+}
+/** Increment a counter by 1. */
+export function increment(options: IncrementOptions) {
+  const packageAddress = options.package ?? "@local-pkg/counter";
+  const argumentsTypes = [null] satisfies (string | null)[];
+  const parameterNames = ["counter"];
+  return (tx: Transaction) =>
+    tx.moveCall({
+      package: packageAddress,
+      module: "counter",
+      function: "increment",
+      arguments: normalizeMoveArguments(
+        options.arguments,
+        argumentsTypes,
+        parameterNames,
+      ),
+    });
+}
+export interface SetValueArguments {
+  counter: RawTransactionArgument<string>;
+  value: RawTransactionArgument<number | bigint>;
+}
+export interface SetValueOptions {
+  package?: string;
+  arguments:
+    | SetValueArguments
+    | [
+        counter: RawTransactionArgument<string>,
+        value: RawTransactionArgument<number | bigint>,
+      ];
+}
+/** Set value (only runnable by the Counter owner) */
+export function setValue(options: SetValueOptions) {
+  const packageAddress = options.package ?? "@local-pkg/counter";
+  const argumentsTypes = [null, "u64"] satisfies (string | null)[];
+  const parameterNames = ["counter", "value"];
+  return (tx: Transaction) =>
+    tx.moveCall({
+      package: packageAddress,
+      module: "counter",
+      function: "set_value",
+      arguments: normalizeMoveArguments(
+        options.arguments,
+        argumentsTypes,
+        parameterNames,
+      ),
+    });
+}