Add top level transaction status to transaction response (#702)

* Add top level transaction status to transaction response

update examples and docs

add transaction result type

* pr feedback

* fix broken test

* update create-dapp (#703)

* update create-dapp

Add codegen docs

* PR feedback

Author: hayes-mysten

.changeset/update-create-dapp.md

@@ -0,0 +1,16 @@
+---
+'@mysten/create-dapp': minor
+---
+
+Update create-dapp templates:
+
+- Migrate from `@mysten/dapp-kit` to `@mysten/dapp-kit-react`
+- Upgrade React to version 19.2.1
+- Remove forwardRef usage in favor of React 19 ref prop pattern
+- Add TypeScript code generation support using `@mysten/codegen`
+- Update UI components to use shadcn/ui-style card and button components
+- Update to Tailwind CSS v4
+- Update example code to use gRPC client and new SDK patterns
+- Fix transaction result handling to properly unwrap TransactionResult types
+- Add documentation and setup guides
+- Fix dependency injection for devDependencies

.oxlintrc.json

@@ -30,6 +30,7 @@
 		"packages/payment-kit/src/contracts",
 		"generated",
 		"vite-env.d.ts",
+		"vitest.config.*",
 		".git",
 		"packages/suins/examples",
 		"packages/deepbook-v3/examples",
@@ -51,6 +52,17 @@
 		"typescript/no-non-null-asserted-optional-chain": "off",
 		"@typescript-eslint/no-redundant-type-constituents": "off",
 		"@typescript-eslint/restrict-template-expressions": "off",
-		"@typescript-eslint/unbound-method": "off"
+		"@typescript-eslint/unbound-method": "off",
+		"import/extensions": [
+			"error",
+			"always",
+			{
+				"ignorePackages": true,
+				"js": "always",
+				"ts": "always",
+				"jsx": "always",
+				"tsx": "always"
+			}
+		]
 	}
 }

.prettierignore

@@ -11,6 +11,7 @@ yarn-debug.log*
 .next/
 .source/
 .swc/
+.claude
 build/
 coverage/
 dist/

packages/create-dapp/package.json

@@ -38,7 +38,8 @@
 		"typescript": "^5.9.3"
 	},
 	"dependencies": {
-		"@mysten/dapp-kit": "workspace:*",
+		"@mysten/codegen": "workspace:*",
+		"@mysten/dapp-kit-react": "workspace:*",
 		"@mysten/sui": "workspace:*",
 		"@types/node": "^24.10.1",
 		"enquirer": "^2.4.1"

packages/create-dapp/src/index.ts

@@ -14,47 +14,62 @@ const { values: args } = parseArgs({
 			default: '',
 			short: 't',
 		},
+		name: {
+			type: 'string',
+			default: '',
+			short: 'n',
+		},
 	},
 });
 
 async function main() {
-	const results = await prompt<{
-		template: string;
-		dAppName: string;
-	}>(
-		[
-			{
-				type: 'select',
-				name: 'template',
-				message: 'Which starter template would you like to use?',
-				choices: [
-					{
-						name: 'react-client-dapp',
-						hint: 'React Client dApp that reads data from wallet and the blockchain',
-					},
-					{
-						name: 'react-e2e-counter',
-						hint: 'React dApp with a move smart contract that implements a distributed counter',
-					},
-				],
-			},
-			{
-				type: 'input',
-
-				name: 'dAppName',
-				message: 'What is the name of your dApp? (this will be used as the directory name)',
-				initial: 'my-first-sui-dapp',
-			},
-		].filter((question) => !args[question.name as 'template']),
-	);
-
-	const outDir = resolve(process.cwd(), results.dAppName);
+	const questions = [
+		{
+			type: 'select',
+			name: 'template',
+			message: 'Which starter template would you like to use?',
+			choices: [
+				{
+					name: 'react-client-dapp',
+					hint: 'React Client dApp that reads data from wallet and the blockchain',
+				},
+				{
+					name: 'react-e2e-counter',
+					hint: 'React dApp with a move smart contract that implements a distributed counter',
+				},
+			],
+		},
+		{
+			type: 'input',
+			name: 'dAppName',
+			message: 'What is the name of your dApp? (this will be used as the directory name)',
+			initial: 'my-first-sui-dapp',
+		},
+	].filter((question) => {
+		if (question.name === 'template' && args.template) return false;
+		if (question.name === 'dAppName' && args.name) return false;
+		return true;
+	});
+
+	const results =
+		questions.length > 0
+			? await prompt<{ template?: string; dAppName?: string }>(questions)
+			: { template: undefined, dAppName: undefined };
+
+	const template = results.template ?? args.template;
+	const dAppName = results.dAppName ?? args.name;
+
+	if (!template || !dAppName) {
+		throw new Error('Template and name are required');
+	}
+
+	const outDir = resolve(process.cwd(), dAppName);
 
 	if (existsSync(outDir)) {
 		throw new Error(`Directory ${outDir} already exists`);
 	}
 
-	const files = await collectFiles(results.template ?? args.template, results.dAppName);
+	const files = await collectFiles(template, dAppName);
 	await writeFiles(files, outDir);
 }
 
@@ -94,8 +109,17 @@ async function collectFiles(template: string, dAppName: string) {
 				if (entry === 'package.json') {
 					const json = JSON.parse(content.toString());
 					json.name = dAppName;
-					json.dependencies['@mysten/sui'] = dependencies['@mysten/sui'];
-					json.dependencies['@mysten/dapp-kit'] = dependencies['@mysten/dapp-kit'];
+
+					if (json.dependencies?.['@mysten/sui']) {
+						json.dependencies['@mysten/sui'] = dependencies['@mysten/sui'];
+					}
+					if (json.dependencies?.['@mysten/dapp-kit-react']) {
+						json.dependencies['@mysten/dapp-kit-react'] = dependencies['@mysten/dapp-kit-react'];
+					}
+
+					if (json.devDependencies?.['@mysten/codegen']) {
+						json.devDependencies['@mysten/codegen'] = dependencies['@mysten/codegen'];
+					}
 
 					content = Buffer.from(JSON.stringify(json, null, 2));
 				}

packages/create-dapp/templates/.oxlintrc.json

@@ -0,0 +1,5 @@
+{
+	"rules": {
+		"import/extensions": "off"
+	}
+}

packages/create-dapp/templates/react-client-dapp/README.md

@@ -6,11 +6,25 @@ 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
-- [`@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
 - [pnpm](https://pnpm.io/) for package management
 
+## Project Structure
+
+```
+src/
+├── components/ui/     # Reusable UI components (Card)
+├── lib/utils.ts       # Utility functions (cn for classnames)
+├── App.tsx            # Main application component
+├── WalletStatus.tsx   # Wallet connection status display
+├── OwnedObjects.tsx   # Display objects owned by connected wallet
+├── dApp-kit.ts        # dApp Kit configuration
+└── index.css          # Tailwind CSS with theme variables
+```
+
 ## Starting your dApp
 
 To install dependencies you can run
@@ -32,3 +46,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.

packages/create-dapp/templates/react-client-dapp/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>

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

@@ -9,20 +9,23 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@mysten/dapp-kit": "workspace:*",
+    "@mysten/dapp-kit-react": "workspace:*",
     "@mysten/sui": "workspace:*",
-    "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^3.2.1",
+    "@nanostores/react": "^1.0.0",
     "@tanstack/react-query": "^5.90.11",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.468.0",
     "react": "^19.2.1",
-    "react-dom": "^19.2.1"
+    "react-dom": "^19.2.1",
+    "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.2",
     "prettier": "^3.7.3",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.9.3",
     "vite": "^7.2.6"
   }

packages/create-dapp/templates/react-client-dapp/src/App.tsx

@@ -1,38 +1,20 @@
-import { ConnectButton } from "@mysten/dapp-kit";
-import { Box, Container, Flex, Heading } from "@radix-ui/themes";
+import { ConnectButton } from "@mysten/dapp-kit-react";
 import { WalletStatus } from "./WalletStatus";
 
 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 dApp Starter</h1>
           <ConnectButton />
-        </Box>
-      </Flex>
-      <Container>
-        <Container
-          mt="5"
-          pt="2"
-          px="4"
-          style={{ background: "var(--gray-a2)", minHeight: 500 }}
-        >
-          <WalletStatus />
-        </Container>
-      </Container>
-    </>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-4 py-8">
+        <WalletStatus />
+      </main>
+    </div>
   );
 }