@haneullabs/create-dapp 0.1.0

package/README.md

@@ -0,0 +1,33 @@
+# @haneullabs/create-dapp
+
+`@haneullabs/create-dapp` is a CLI tool that helps you to create a new dApp project.
+
+You can get started quickly by running the following command:
+
+```bash
+pnpm create @haneullabs/dapp
+```
+
+This will prompt you through creating a new dApp project. It will ask you for the name/directory and
+ask you to select from one of the provided templates.
+
+## Templates
+
+The following templates are available:
+
+- `react-client-dapp`: A basic React dApp that fetches a list of objects owned by the connected
+  wallet
+- `react-e2e-counter`: An end to end Example with move code and UI for a simple counter app
+
+The examples are based off the Vite TypeScript starter project, and pre-configure a few things for
+you including:
+
+- [React](https://react.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vite](https://vitejs.dev/)
+- [Radix UI](https://www.radix-ui.com/)
+- [ESLint](https://eslint.org/)
+- [`@haneullabs/dapp-kit`](https://sdk.haneullabs.com/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/bin/index.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+require('../dist/index.js');

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,102 @@
+"use strict";
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable no-restricted-globals */
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = require("fs");
+const promises_1 = require("fs/promises");
+const path_1 = require("path");
+const util_1 = require("util");
+const enquirer_1 = require("enquirer");
+const { values: args } = (0, util_1.parseArgs)({
+    options: {
+        template: {
+            type: 'string',
+            default: '',
+            short: 't',
+        },
+    },
+});
+async function main() {
+    const results = await (0, enquirer_1.prompt)([
+        {
+            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-haneul-dapp',
+        },
+    ].filter((question) => !args[question.name]));
+    const outDir = (0, path_1.resolve)(process.cwd(), results.dAppName);
+    if ((0, fs_1.existsSync)(outDir)) {
+        throw new Error(`Directory ${outDir} already exists`);
+    }
+    const files = await collectFiles(results.template ?? args.template, results.dAppName);
+    await writeFiles(files, outDir);
+}
+main();
+async function collectFiles(template, dAppName) {
+    const dependencies = await getDependencyVersions();
+    const templateDir = (0, path_1.resolve)(__dirname, '../templates', template);
+    const files = new Array();
+    if (!(0, fs_1.statSync)(templateDir).isDirectory()) {
+        throw new Error(`Template ${templateDir} could not be found`);
+    }
+    await addDir(templateDir);
+    return files;
+    async function addDir(dir) {
+        const entries = await (0, promises_1.readdir)(dir);
+        for (const entry of entries) {
+            if (entry === 'node_modules') {
+                continue;
+            }
+            const entryPath = (0, path_1.resolve)(dir, entry);
+            const stat = (0, fs_1.statSync)(entryPath);
+            if (stat.isDirectory()) {
+                await addDir(entryPath);
+            }
+            else {
+                let content = await (0, promises_1.readFile)(entryPath);
+                if (entry === 'package.json') {
+                    const json = JSON.parse(content.toString());
+                    json.name = dAppName;
+                    json.dependencies['@haneullabs/haneul'] = dependencies['@haneullabs/haneul'];
+                    json.dependencies['@haneullabs/dapp-kit'] = dependencies['@haneullabs/dapp-kit'];
+                    content = Buffer.from(JSON.stringify(json, null, 2));
+                }
+                files.push({ path: (0, path_1.relative)(templateDir, entryPath), content });
+            }
+        }
+    }
+}
+async function writeFiles(files, outDir) {
+    for (const file of files) {
+        const filePath = (0, path_1.resolve)(outDir, file.path);
+        const dirPath = (0, path_1.resolve)(filePath, '..');
+        if (!(0, fs_1.existsSync)(dirPath)) {
+            await (0, promises_1.mkdir)(dirPath, { recursive: true });
+        }
+        await (0, promises_1.writeFile)(filePath, file.content);
+    }
+}
+async function getDependencyVersions() {
+    const packagePath = (0, path_1.resolve)(__dirname, '../package.json');
+    const content = JSON.parse(await (0, promises_1.readFile)(packagePath, 'utf-8'));
+    return content.dependencies;
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@haneullabs/create-dapp",
+  "author": "Haneul Labs <build@haneullabs.com>",
+  "description": "A CLI for creating new Haneul dApps",
+  "homepage": "https://sdk.haneullabs.com",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md",
+    "dist",
+    "src",
+    "templates"
+  ],
+  "type": "commonjs",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/cjs/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GeunhwaJeong/haneul-ts-sdks.git"
+  },
+  "bugs": {
+    "url": "https://github.com/GeunhwaJeong/haneul-ts-sdks/issues/new"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "@haneullabs/build-scripts": "0.1.0"
+  },
+  "dependencies": {
+    "@types/node": "^24.10.1",
+    "enquirer": "^2.4.1",
+    "@haneullabs/dapp-kit": "0.1.0",
+    "@haneullabs/haneul": "0.1.0"
+  },
+  "sideEffects": false,
+  "bin": "./bin/index.js",
+  "scripts": {
+    "clean": "rm -rf tsconfig.tsbuildinfo ./dist",
+    "build": "tsc --build",
+    "prettier:check": "prettier -c --ignore-unknown .",
+    "prettier:fix": "prettier -w --ignore-unknown .",
+    "eslint:check": "eslint --max-warnings=0 .",
+    "eslint:fix": "pnpm run eslint:check --fix",
+    "lint": "pnpm run eslint:check && pnpm run prettier:check",
+    "lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix"
+  }
+}

package/src/index.ts

@@ -0,0 +1,130 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable no-restricted-globals */
+
+import { existsSync, statSync } from 'fs';
+import { mkdir, readdir, readFile, writeFile } from 'fs/promises';
+import { relative, resolve } from 'path';
+import { parseArgs } from 'util';
+import { prompt } from 'enquirer';
+
+const { values: args } = parseArgs({
+	options: {
+		template: {
+			type: 'string',
+			default: '',
+			short: 't',
+		},
+	},
+});
+
+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-haneul-dapp',
+			},
+		].filter((question) => !args[question.name as 'template']),
+	);
+
+	const outDir = resolve(process.cwd(), results.dAppName);
+
+	if (existsSync(outDir)) {
+		throw new Error(`Directory ${outDir} already exists`);
+	}
+
+	const files = await collectFiles(results.template ?? args.template, results.dAppName);
+	await writeFiles(files, outDir);
+}
+
+main();
+
+async function collectFiles(template: string, dAppName: string) {
+	const dependencies = await getDependencyVersions();
+	const templateDir = resolve(__dirname, '../templates', template);
+	const files = new Array<{
+		path: string;
+		content: Buffer;
+	}>();
+
+	if (!statSync(templateDir).isDirectory()) {
+		throw new Error(`Template ${templateDir} could not be found`);
+	}
+
+	await addDir(templateDir);
+
+	return files;
+
+	async function addDir(dir: string) {
+		const entries = await readdir(dir);
+
+		for (const entry of entries) {
+			if (entry === 'node_modules') {
+				continue;
+			}
+			const entryPath = resolve(dir, entry);
+			const stat = statSync(entryPath);
+
+			if (stat.isDirectory()) {
+				await addDir(entryPath);
+			} else {
+				let content = await readFile(entryPath);
+
+				if (entry === 'package.json') {
+					const json = JSON.parse(content.toString());
+					json.name = dAppName;
+					json.dependencies['@haneullabs/haneul'] = dependencies['@haneullabs/haneul'];
+					json.dependencies['@haneullabs/dapp-kit'] = dependencies['@haneullabs/dapp-kit'];
+
+					content = Buffer.from(JSON.stringify(json, null, 2));
+				}
+
+				files.push({ path: relative(templateDir, entryPath), content });
+			}
+		}
+	}
+}
+
+async function writeFiles(files: Array<{ path: string; content: Buffer }>, outDir: string) {
+	for (const file of files) {
+		const filePath = resolve(outDir, file.path);
+		const dirPath = resolve(filePath, '..');
+		if (!existsSync(dirPath)) {
+			await mkdir(dirPath, { recursive: true });
+		}
+
+		await writeFile(filePath, file.content);
+	}
+}
+
+async function getDependencyVersions() {
+	const packagePath = resolve(__dirname, '../package.json');
+	const content = JSON.parse(await readFile(packagePath, 'utf-8')) as {
+		dependencies: Record<string, string>;
+	};
+
+	return content.dependencies;
+}

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

@@ -0,0 +1,35 @@
+# Sui dApp Starter Template
+
+This dApp was created using `@haneullabs/create-dapp` that sets up a basic React
+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/)
+- [`@haneullabs/dapp-kit`](https://sdk.haneullabs.com/dapp-kit) for connecting to
+  wallets and loading data
+- [pnpm](https://pnpm.io/) for package management
+
+## Starting your dApp
+
+To install dependencies you can run
+
+```bash
+pnpm install
+```
+
+To start your dApp in development mode run
+
+```bash
+pnpm dev
+```
+
+## Building
+
+To build your app for deployment you can run
+
+```bash
+pnpm build
+```

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

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en" class="dark-theme" style="color-scheme: dark">
+  <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>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,35 @@
+{
+  "name": "@haneullabs/template-react-client-app",
+  "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"
+  },
+  "dependencies": {
+    "@haneullabs/dapp-kit": "workspace:*",
+    "@haneullabs/haneul": "workspace:*",
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/themes": "^3.2.1",
+    "@tanstack/react-query": "^5.90.11",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "prettier": "^3.7.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6"
+  }
+}

package/templates/react-client-dapp/prettier.config.cjs

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

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

@@ -0,0 +1,39 @@
+import { ConnectButton } from "@haneullabs/dapp-kit";
+import { Box, Container, Flex, Heading } from "@radix-ui/themes";
+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>
+          <ConnectButton />
+        </Box>
+      </Flex>
+      <Container>
+        <Container
+          mt="5"
+          pt="2"
+          px="4"
+          style={{ background: "var(--gray-a2)", minHeight: 500 }}
+        >
+          <WalletStatus />
+        </Container>
+      </Container>
+    </>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,42 @@
+import { useCurrentAccount, useHaneulClientQuery } from "@haneullabs/dapp-kit";
+import { Flex, Heading, Text } from "@radix-ui/themes";
+
+export function OwnedObjects() {
+  const account = useCurrentAccount();
+  const { data, isPending, error } = useHaneulClientQuery(
+    "getOwnedObjects",
+    {
+      owner: account?.address as string,
+    },
+    {
+      enabled: !!account,
+    },
+  );
+
+  if (!account) {
+    return;
+  }
+
+  if (error) {
+    return <Flex>Error: {error.message}</Flex>;
+  }
+
+  if (isPending || !data) {
+    return <Flex>Loading...</Flex>;
+  }
+
+  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>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { useCurrentAccount } from "@haneullabs/dapp-kit";
+import { Container, Flex, Heading, Text } from "@radix-ui/themes";
+import { OwnedObjects } from "./OwnedObjects";
+
+export function WalletStatus() {
+  const account = useCurrentAccount();
+
+  return (
+    <Container my="2">
+      <Heading mb="2">Wallet Status</Heading>
+
+      {account ? (
+        <Flex direction="column">
+          <Text>Wallet connected</Text>
+          <Text>Address: {account.address}</Text>
+        </Flex>
+      ) : (
+        <Text>Wallet not connected</Text>
+      )}
+      <OwnedObjects />
+    </Container>
+  );
+}

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

@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@haneullabs/dapp-kit/dist/index.css";
+import "@radix-ui/themes/styles.css";
+
+import { HaneulClientProvider, WalletProvider } from "@haneullabs/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();
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <Theme appearance="dark">
+      <QueryClientProvider client={queryClient}>
+        <HaneulClientProvider networks={networkConfig} defaultNetwork="testnet">
+          <WalletProvider autoConnect>
+            <App />
+          </WalletProvider>
+        </HaneulClientProvider>
+      </QueryClientProvider>
+    </Theme>
+  </React.StrictMode>,
+);

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

@@ -0,0 +1,17 @@
+import { getFullnodeUrl } from "@haneullabs/haneul/client";
+import { createNetworkConfig } from "@haneullabs/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-client-dapp/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

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

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.mts"]
+}

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

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