@mysten/create-dapp 0.5.12 → 0.6.0

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

@@ -1,42 +1,69 @@
-import { useCurrentAccount, useSuiClientQuery } from "@mysten/dapp-kit";
-import { Flex, Heading, Text } from "@radix-ui/themes";
+import { useCurrentAccount, useCurrentClient } from "@mysten/dapp-kit-react";
+import { useQuery } from "@tanstack/react-query";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./components/ui/card";
+import { Package, Loader2 } from "lucide-react";
 
 export function OwnedObjects() {
   const account = useCurrentAccount();
-  const { data, isPending, error } = useSuiClientQuery(
-    "getOwnedObjects",
-    {
-      owner: account?.address as string,
-    },
-    {
-      enabled: !!account,
-    },
-  );
+  const client = useCurrentClient();
 
-  if (!account) {
-    return;
-  }
+  const { data, isPending, error } = useQuery({
+    queryKey: ["ownedObjects", account?.address],
+    queryFn: async () => {
+      if (!account) return null;
 
-  if (error) {
-    return <Flex>Error: {error.message}</Flex>;
-  }
+      const { response } = await client.stateService.listOwnedObjects({
+        owner: account.address,
+      });
+      return response.objects ?? [];
+    },
+    enabled: !!account,
+  });
 
-  if (isPending || !data) {
-    return <Flex>Loading...</Flex>;
+  if (!account) {
+    return null;
   }
 
   return (
-    <Flex direction="column" my="2">
-      {data.data.length === 0 ? (
-        <Text>No objects owned by the connected wallet</Text>
-      ) : (
-        <Heading size="4">Objects owned by the connected wallet</Heading>
-      )}
-      {data.data.map((object) => (
-        <Flex key={object.data?.objectId}>
-          <Text>Object ID: {object.data?.objectId}</Text>
-        </Flex>
-      ))}
-    </Flex>
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Package className="h-5 w-5" />
+          Owned Objects
+        </CardTitle>
+        <CardDescription>Objects owned by the connected wallet</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {error ? (
+          <p className="text-destructive-foreground">
+            Error: {(error as Error)?.message || "Unknown error"}
+          </p>
+        ) : isPending || !data ? (
+          <div className="flex items-center gap-2 text-muted-foreground">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Loading objects...
+          </div>
+        ) : data.length === 0 ? (
+          <p className="text-muted-foreground">No objects found</p>
+        ) : (
+          <div className="space-y-2">
+            {data.map((object) => (
+              <div
+                key={object.objectId}
+                className="rounded-md border bg-muted/50 p-3"
+              >
+                <p className="font-mono text-xs break-all">{object.objectId}</p>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
   );
 }

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

@@ -1,23 +1,48 @@
-import { useCurrentAccount } from "@mysten/dapp-kit";
-import { Container, Flex, Heading, Text } from "@radix-ui/themes";
+import { useCurrentAccount } from "@mysten/dapp-kit-react";
 import { OwnedObjects } from "./OwnedObjects";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./components/ui/card";
+import { Wallet, CheckCircle2 } from "lucide-react";
 
 export function WalletStatus() {
   const account = useCurrentAccount();
 
   return (
-    <Container my="2">
-      <Heading mb="2">Wallet Status</Heading>
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Wallet className="h-5 w-5" />
+            Wallet Status
+          </CardTitle>
+          <CardDescription>
+            {account
+              ? "Your wallet is connected"
+              : "Connect your wallet to get started"}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {account ? (
+            <div className="flex items-center gap-2">
+              <CheckCircle2 className="h-4 w-4 text-green-500" />
+              <span className="font-mono text-sm break-all">
+                {account.address}
+              </span>
+            </div>
+          ) : (
+            <p className="text-muted-foreground">
+              Click the connect button above to link your Sui wallet.
+            </p>
+          )}
+        </CardContent>
+      </Card>
 
-      {account ? (
-        <Flex direction="column">
-          <Text>Wallet connected</Text>
-          <Text>Address: {account.address}</Text>
-        </Flex>
-      ) : (
-        <Text>Wallet not connected</Text>
-      )}
       <OwnedObjects />
-    </Container>
+    </div>
   );
 }

package/templates/react-client-dapp/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-client-dapp/src/dApp-kit.ts

@@ -0,0 +1,24 @@
+import { createDAppKit } from "@mysten/dapp-kit-react";
+import { SuiGrpcClient } from "@mysten/sui/grpc";
+
+const GRPC_URLS = {
+  mainnet: "https://fullnode.mainnet.sui.io:443",
+  testnet: "https://fullnode.testnet.sui.io:443",
+  devnet: "https://fullnode.devnet.sui.io:443",
+};
+
+export const dAppKit = createDAppKit({
+  enableBurnerWallet: import.meta.env.DEV,
+  networks: ["mainnet", "testnet", "devnet"],
+  defaultNetwork: "testnet",
+  createClient(network) {
+    return new SuiGrpcClient({ network, baseUrl: GRPC_URLS[network] });
+  },
+});
+
+// global type registration necessary for the hooks to work correctly
+declare module "@mysten/dapp-kit-react" {
+  interface Register {
+    dAppKit: typeof dAppKit;
+  }
+}

package/templates/react-client-dapp/src/index.css

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+
+@theme {
+  --color-background: oklch(0.145 0 0);
+  --color-foreground: oklch(0.985 0 0);
+  --color-card: oklch(0.145 0 0);
+  --color-card-foreground: oklch(0.985 0 0);
+  --color-primary: oklch(0.985 0 0);
+  --color-primary-foreground: oklch(0.205 0 0);
+  --color-secondary: oklch(0.269 0 0);
+  --color-secondary-foreground: oklch(0.985 0 0);
+  --color-muted: oklch(0.269 0 0);
+  --color-muted-foreground: oklch(0.708 0 0);
+  --color-accent: oklch(0.269 0 0);
+  --color-accent-foreground: oklch(0.985 0 0);
+  --color-destructive: oklch(0.396 0.141 25.723);
+  --color-destructive-foreground: oklch(0.637 0.237 25.331);
+  --color-border: oklch(0.269 0 0);
+  --color-input: oklch(0.269 0 0);
+  --color-ring: oklch(0.556 0 0);
+  --color-sui: oklch(0.7 0.2 220);
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+}
+
+* {
+  border-color: var(--color-border);
+}
+
+body {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family:
+    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+}

package/templates/react-client-dapp/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

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

@@ -1,26 +1,20 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "@mysten/dapp-kit/dist/index.css";
-import "@radix-ui/themes/styles.css";
+import "./index.css";
 
-import { SuiClientProvider, WalletProvider } from "@mysten/dapp-kit";
+import { DAppKitProvider } from "@mysten/dapp-kit-react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Theme } from "@radix-ui/themes";
 import App from "./App.tsx";
-import { networkConfig } from "./networkConfig.ts";
+import { dAppKit } from "./dApp-kit.ts";
 
 const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <Theme appearance="dark">
-      <QueryClientProvider client={queryClient}>
-        <SuiClientProvider networks={networkConfig} defaultNetwork="testnet">
-          <WalletProvider autoConnect>
-            <App />
-          </WalletProvider>
-        </SuiClientProvider>
-      </QueryClientProvider>
-    </Theme>
+    <QueryClientProvider client={queryClient}>
+      <DAppKitProvider dAppKit={dAppKit}>
+        <App />
+      </DAppKitProvider>
+    </QueryClientProvider>
   </React.StrictMode>,
 );

package/templates/react-client-dapp/vite.config.mts

@@ -1,7 +1,8 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
 });

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

@@ -0,0 +1,2 @@
+# Mark generated files
+src/contracts/** linguist-generated=true

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

@@ -6,15 +6,32 @@ Client dApp using the following tools:
 - [React](https://react.dev/) as the UI framework
 - [TypeScript](https://www.typescriptlang.org/) for type checking
 - [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
-- [`@mysten/dapp-kit`](https://sdk.mystenlabs.com/dapp-kit) for connecting to
-  wallets and loading data
+- [Tailwind CSS v4](https://tailwindcss.com/) for styling
+- [Lucide React](https://lucide.dev/) for icons
+- [`@mysten/dapp-kit-react`](https://sdk.mystenlabs.com/dapp-kit) for connecting
+  to wallets and loading data
+- [`@mysten/codegen`](https://sdk.mystenlabs.com/codegen) for generating
+  TypeScript bindings from Move code
 - [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).
 
+## Project Structure
+
+```
+src/
+├── components/ui/     # Reusable UI components (Button, Card)
+├── contracts/         # Generated TypeScript bindings (via codegen)
+├── lib/utils.ts       # Utility functions (cn for classnames)
+├── App.tsx            # Main application component
+├── Counter.tsx        # Counter display and controls
+├── CreateCounter.tsx  # Counter creation component
+├── dApp-kit.ts        # dApp Kit configuration
+├── constants.ts       # Package IDs per network
+└── index.css          # Tailwind CSS with theme variables
+```
+
 ## Deploying your Move code
 
 ### Install Sui cli
@@ -60,14 +77,29 @@ sui client publish --gas-budget 100000000 counter
 ```
 
 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`:
+to save that package ID to the `src/constants.ts` file:
 
 ```ts
 export const TESTNET_COUNTER_PACKAGE_ID = "<YOUR_PACKAGE_ID>";
 ```
 
-Now that we have published the move code, and update the package ID, we can
-start the app.
+The package ID is mapped to the local package name `@local-pkg/counter` in
+`src/dApp-kit.ts` via MVR overrides. This allows the generated TypeScript
+bindings to resolve the package address automatically.
+
+### Generating TypeScript bindings
+
+After publishing your Move code, generate the TypeScript bindings:
+
+```bash
+pnpm codegen
+```
+
+This generates type-safe functions and BCS types in `src/contracts/` based on
+your Move modules.
+
+Now that we have published the move code, updated the package ID, and generated
+the TypeScript bindings, we can start the app.
 
 ## Starting your dApp
 
@@ -90,3 +122,17 @@ To build your app for deployment you can run
 ```bash
 pnpm build
 ```
+
+## Customizing the UI
+
+This template uses [Tailwind CSS v4](https://tailwindcss.com/docs) for styling
+with [shadcn/ui](https://ui.shadcn.com/)-style components. The UI components in
+`src/components/ui/` are based on shadcn/ui patterns and can be customized or
+extended.
+
+To add more shadcn/ui components, you can copy them from the
+[shadcn/ui components](https://ui.shadcn.com/docs/components) documentation and
+adapt them to work with your project.
+
+Theme variables are defined in `src/index.css` using Tailwind's `@theme`
+directive.

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

@@ -1,58 +1,12 @@
 <!doctype html>
-<html lang="en" class="dark-theme" style="color-scheme: dark">
+<html lang="en">
   <head>
     <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>Sui dApp Starter</title>
-
-    <style>
-      /*
-  Josh's Custom CSS Reset
-  https://www.joshwcomeau.com/css/custom-css-reset/
-*/
-      *,
-      *::before,
-      *::after {
-        box-sizing: border-box;
-      }
-      * {
-        margin: 0;
-      }
-      body {
-        line-height: 1.5;
-        -webkit-font-smoothing: antialiased;
-      }
-      img,
-      picture,
-      video,
-      canvas,
-      svg {
-        display: block;
-        max-width: 100%;
-      }
-      input,
-      button,
-      textarea,
-      select {
-        font: inherit;
-      }
-      p,
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        overflow-wrap: break-word;
-      }
-      #root,
-      #__next {
-        isolation: isolate;
-      }
-    </style>
   </head>
-  <body>
+  <body class="min-h-screen antialiased">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

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

@@ -1,36 +1,34 @@
 {
-  "name": "@mysten/template-react-e2e-coinflip",
+  "name": "@mysten/template-react-e2e-counter",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "codegen": "rm -rf src/contracts && sui-ts-codegen generate"
   },
   "dependencies": {
-    "@mysten/dapp-kit": "workspace:*",
-    "@mysten/sui": "workspace:*",
-    "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^3.2.1",
-    "@tanstack/react-query": "^5.87.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-spinners": "^0.14.1"
+    "@mysten/dapp-kit-react": "workspace:^",
+    "@mysten/sui": "workspace:^",
+    "@nanostores/react": "^1.0.0",
+    "@tanstack/react-query": "^5.90.16",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.43.0",
-    "@typescript-eslint/parser": "^8.43.0",
-    "@vitejs/plugin-react-swc": "^3.11.0",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "prettier": "^3.6.2",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.5"
+    "@mysten/codegen": "workspace:^",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "prettier": "^3.7.4",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
   }
 }

package/templates/react-e2e-counter/prettier.config.cjs

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-undef
 module.exports = {
   proseWrap: "always",
 };

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

@@ -1,9 +1,10 @@
-import { ConnectButton, useCurrentAccount } from "@mysten/dapp-kit";
+import { ConnectButton, useCurrentAccount } from "@mysten/dapp-kit-react";
 import { isValidSuiObjectId } from "@mysten/sui/utils";
-import { Box, Container, Flex, Heading } from "@radix-ui/themes";
 import { useState } from "react";
 import { Counter } from "./Counter";
 import { CreateCounter } from "./CreateCounter";
+import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card";
+import { Wallet } from "lucide-react";
 
 function App() {
   const currentAccount = useCurrentAccount();
@@ -13,31 +14,16 @@ function App() {
   });
 
   return (
-    <>
-      <Flex
-        position="sticky"
-        px="4"
-        py="2"
-        justify="between"
-        style={{
-          borderBottom: "1px solid var(--gray-a2)",
-        }}
-      >
-        <Box>
-          <Heading>dApp Starter Template</Heading>
-        </Box>
-
-        <Box>
+    <div className="min-h-screen">
+      <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container mx-auto flex h-14 items-center justify-between px-4">
+          <h1 className="text-lg font-semibold">Sui Counter dApp</h1>
           <ConnectButton />
-        </Box>
-      </Flex>
-      <Container>
-        <Container
-          mt="5"
-          pt="2"
-          px="4"
-          style={{ background: "var(--gray-a2)", minHeight: 500 }}
-        >
+        </div>
+      </header>
+
+      <main className="container mx-auto px-4 py-8">
+        <div className="mx-auto max-w-md">
           {currentAccount ? (
             counterId ? (
               <Counter id={counterId} />
@@ -50,11 +36,24 @@ function App() {
               />
             )
           ) : (
-            <Heading>Please connect your wallet</Heading>
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Wallet className="h-5 w-5" />
+                  Connect Wallet
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-muted-foreground">
+                  Connect your wallet to create and interact with counters on
+                  the Sui blockchain.
+                </p>
+              </CardContent>
+            </Card>
           )}
-        </Container>
-      </Container>
-    </>
+        </div>
+      </main>
+    </div>
   );
 }