@iota/create-dapp 0.4.5 → 0.5.0

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

@@ -1,38 +1,31 @@
 {
-  "name": "@iota/template-react-e2e-coinflip",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "format": "prettier -w ."
-  },
-  "dependencies": {
-    "@iota/dapp-kit": "workspace:*",
-    "@iota/iota-sdk": "workspace:*",
-    "@radix-ui/themes": "^3.1.1",
-    "@tanstack/react-query": "^5.50.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-spinners": "^0.14.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "eslint-plugin-react": "^7.37.2",
-    "typescript-eslint": "^8.18.0",
-    "prettier": "^3.3.2",
-    "typescript": "^5.5.3",
-    "vite": "^5.4.12"
-  }
+    "name": "@iota/template-react-e2e-counter",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "lint": "oxlint .",
+        "format": "oxfmt --write src/",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@iota/dapp-kit": "workspace:*",
+        "@iota/iota-sdk": "workspace:*",
+        "@tanstack/react-query": "^5.91.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+    },
+    "devDependencies": {
+        "@tailwindcss/vite": "^4.2.2",
+        "@types/react": "^18.3.28",
+        "@types/react-dom": "^18.3.7",
+        "@vitejs/plugin-react": "^6.0.1",
+        "oxfmt": "^0.41.0",
+        "oxlint": "^1.56.0",
+        "tailwindcss": "^4.2.2",
+        "typescript": "^5.9.3",
+        "vite": "^8.0.1"
+    }
 }

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

@@ -1,61 +1,42 @@
-import { ConnectButton, useCurrentAccount } from "@iota/dapp-kit";
-import { isValidIotaObjectId } from "@iota/iota-sdk/utils";
-import { Box, Container, Flex, Heading } from "@radix-ui/themes";
-import { useState } from "react";
-import { Counter } from "./Counter";
-import { CreateCounter } from "./CreateCounter";
+import { ConnectButton, useCurrentAccount } from '@iota/dapp-kit';
+import { isValidIotaObjectId } from '@iota/iota-sdk/utils';
+import { useState } from 'react';
+import { Counter } from './Counter';
+import { CreateCounter } from './CreateCounter';
 
 function App() {
-  const currentAccount = useCurrentAccount();
-  const [counterId, setCounter] = useState(() => {
-    const hash = window.location.hash.slice(1);
-    return isValidIotaObjectId(hash) ? hash : null;
-  });
+    const currentAccount = useCurrentAccount();
+    const [counterId, setCounter] = useState(() => {
+        const hash = window.location.hash.slice(1);
+        return isValidIotaObjectId(hash) ? hash : null;
+    });
 
-  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 }}
-        >
-          {currentAccount ? (
-            counterId ? (
-              <Counter id={counterId} />
-            ) : (
-              <CreateCounter
-                onCreated={(id) => {
-                  window.location.hash = id;
-                  setCounter(id);
-                }}
-              />
-            )
-          ) : (
-            <Heading>Please connect your wallet</Heading>
-          )}
-        </Container>
-      </Container>
-    </>
-  );
+    return (
+        <>
+            <div className="sticky top-0 flex px-4 py-2 justify-between items-center border-b border-gray-800 bg-gray-950">
+                <h1 className="text-2xl font-bold">dApp Starter Template</h1>
+                <ConnectButton />
+            </div>
+            <div className="max-w-4xl mx-auto">
+                <div className="mt-5 pt-2 px-4 bg-gray-900 min-h-[500px] rounded">
+                    {currentAccount ? (
+                        counterId ? (
+                            <Counter id={counterId} />
+                        ) : (
+                            <CreateCounter
+                                onCreated={(id) => {
+                                    window.location.hash = id;
+                                    setCounter(id);
+                                }}
+                            />
+                        )
+                    ) : (
+                        <h2 className="text-xl font-semibold">Please connect your wallet</h2>
+                    )}
+                </div>
+            </div>
+        </>
+    );
 }
 
 export default App;

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

@@ -1,108 +1,102 @@
 import {
-  useCurrentAccount,
-  useSignAndExecuteTransaction,
-  useIotaClient,
-  useIotaClientQuery,
-} from "@iota/dapp-kit";
-import type { IotaObjectData } from "@iota/iota-sdk/client";
-import { Transaction } from "@iota/iota-sdk/transactions";
-import { Button, Flex, Heading, Text } from "@radix-ui/themes";
-import { useNetworkVariable } from "./networkConfig";
-import { useState } from "react";
-import ClipLoader from "react-spinners/ClipLoader";
+    useCurrentAccount,
+    useSignAndExecuteTransaction,
+    useIotaClient,
+    useIotaClientQuery,
+} from '@iota/dapp-kit';
+import type { IotaObjectData } from '@iota/iota-sdk/client';
+import { Transaction } from '@iota/iota-sdk/transactions';
+import { useNetworkVariable } from './networkConfig';
+import { useState } from 'react';
 
 export function Counter({ id }: { id: string }) {
-  const counterPackageId = useNetworkVariable("counterPackageId");
-  const iotaClient = useIotaClient();
-  const currentAccount = useCurrentAccount();
-  const { mutate: signAndExecute } = useSignAndExecuteTransaction();
-  const { data, isPending, error, refetch } = useIotaClientQuery("getObject", {
-    id,
-    options: {
-      showContent: true,
-      showOwner: true,
-    },
-  });
-
-  const [waitingForTxn, setWaitingForTxn] = useState("");
+    const counterPackageId = useNetworkVariable('counterPackageId');
+    const iotaClient = useIotaClient();
+    const currentAccount = useCurrentAccount();
+    const { mutate: signAndExecute } = useSignAndExecuteTransaction();
+    const { data, isPending, error, refetch } = useIotaClientQuery('getObject', {
+        id,
+        options: {
+            showContent: true,
+            showOwner: true,
+        },
+    });
 
-  const executeMoveCall = (method: "increment" | "reset") => {
-    setWaitingForTxn(method);
+    const [waitingForTxn, setWaitingForTxn] = useState('');
 
-    const tx = new Transaction();
+    const executeMoveCall = (method: 'increment' | 'reset') => {
+        setWaitingForTxn(method);
 
-    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`,
-      });
-    }
+        const tx = new Transaction();
 
-    signAndExecute(
-      {
-        transaction: tx,
-      },
-      {
-        onSuccess: (tx) => {
-          iotaClient
-            .waitForTransaction({ digest: tx.digest })
-            .then(async () => {
-              await refetch();
-              setWaitingForTxn("");
+        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`,
+            });
+        }
+
+        signAndExecute(
+            {
+                transaction: tx,
+            },
+            {
+                onSuccess: (tx) => {
+                    iotaClient.waitForTransaction({ digest: tx.digest }).then(async () => {
+                        await refetch();
+                        setWaitingForTxn('');
+                    });
+                },
+            },
+        );
+    };
 
-  if (isPending) return <Text>Loading...</Text>;
+    if (isPending) return <p className="text-gray-300">Loading...</p>;
 
-  if (error) return <Text>Error: {error.message}</Text>;
+    if (error) return <p className="text-red-400">Error: {error.message}</p>;
 
-  if (!data.data) return <Text>Not found</Text>;
+    if (!data.data) return <p className="text-gray-300">Not found</p>;
 
-  const ownedByCurrentAccount =
-    getCounterFields(data.data)?.owner === currentAccount?.address;
+    const ownedByCurrentAccount = getCounterFields(data.data)?.owner === currentAccount?.address;
 
-  return (
-    <>
-      <Heading size="3">Counter {id}</Heading>
+    return (
+        <>
+            <h3 className="text-lg font-semibold">Counter {id}</h3>
 
-      <Flex direction="column" gap="2">
-        <Text>Count: {getCounterFields(data.data)?.value}</Text>
-        <Flex direction="row" gap="2">
-          <Button
-            onClick={() => executeMoveCall("increment")}
-            disabled={waitingForTxn !== ""}
-          >
-            {waitingForTxn === "increment" ? (
-              <ClipLoader size={20} />
-            ) : (
-              "Increment"
-            )}
-          </Button>
-          {ownedByCurrentAccount ? (
-            <Button
-              onClick={() => executeMoveCall("reset")}
-              disabled={waitingForTxn !== ""}
-            >
-              {waitingForTxn === "reset" ? <ClipLoader size={20} /> : "Reset"}
-            </Button>
-          ) : null}
-        </Flex>
-      </Flex>
-    </>
-  );
+            <div className="flex flex-col gap-2">
+                <p className="text-gray-300">Count: {getCounterFields(data.data)?.value}</p>
+                <div className="flex flex-row gap-2">
+                    <button
+                        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+                        onClick={() => executeMoveCall('increment')}
+                        disabled={waitingForTxn !== ''}
+                    >
+                        {waitingForTxn === 'increment' ? 'Loading...' : 'Increment'}
+                    </button>
+                    {ownedByCurrentAccount ? (
+                        <button
+                            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+                            onClick={() => executeMoveCall('reset')}
+                            disabled={waitingForTxn !== ''}
+                        >
+                            {waitingForTxn === 'reset' ? 'Loading...' : 'Reset'}
+                        </button>
+                    ) : null}
+                </div>
+            </div>
+        </>
+    );
 }
+
 function getCounterFields(data: IotaObjectData) {
-  if (data.content?.dataType !== "moveObject") {
-    return null;
-  }
+    if (data.content?.dataType !== 'moveObject') {
+        return null;
+    }
 
-  return data.content.fields as { value: number; owner: string };
+    return data.content.fields as { value: number; owner: string };
 }

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

@@ -1,65 +1,55 @@
-import { Transaction } from "@iota/iota-sdk/transactions";
-import { Button, Container } from "@radix-ui/themes";
-import { useSignAndExecuteTransaction, useIotaClient } from "@iota/dapp-kit";
-import { useNetworkVariable } from "./networkConfig";
-import ClipLoader from "react-spinners/ClipLoader";
+import { Transaction } from '@iota/iota-sdk/transactions';
+import { useSignAndExecuteTransaction, useIotaClient } from '@iota/dapp-kit';
+import { useNetworkVariable } from './networkConfig';
 
-export function CreateCounter({
-  onCreated,
-}: {
-  onCreated: (id: string) => void;
-}) {
-  const counterPackageId = useNetworkVariable("counterPackageId");
-  const iotaClient = useIotaClient();
-  const {
-    mutate: signAndExecute,
-    isSuccess,
-    isPending,
-  } = useSignAndExecuteTransaction();
+export function CreateCounter({ onCreated }: { onCreated: (id: string) => void }) {
+    const counterPackageId = useNetworkVariable('counterPackageId');
+    const iotaClient = useIotaClient();
+    const { mutate: signAndExecute, isSuccess, isPending } = useSignAndExecuteTransaction();
 
-  function create() {
-    const tx = new Transaction();
+    function create() {
+        const tx = new Transaction();
 
-    tx.moveCall({
-      arguments: [],
-      target: `${counterPackageId}::counter::create`,
-    });
+        tx.moveCall({
+            arguments: [],
+            target: `${counterPackageId}::counter::create`,
+        });
 
-    signAndExecute(
-      {
-        transaction: tx,
-      },
-      {
-        onSuccess: async ({ digest }) => {
-          const { effects } = await iotaClient.waitForTransaction({
-            digest: digest,
-            options: {
-              showEffects: true,
+        signAndExecute(
+            {
+                transaction: tx,
             },
-          });
+            {
+                onSuccess: async ({ digest }) => {
+                    const { effects } = await iotaClient.waitForTransaction({
+                        digest: digest,
+                        options: {
+                            showEffects: true,
+                        },
+                    });
 
-          const objectId = effects?.created?.[0]?.reference?.objectId;
-          if (objectId) {
-            onCreated(objectId);
-          } else {
-            console.error("Failed to get objectId from transaction effects");
-          }
-        },
-      },
-    );
-  }
+                    const objectId = effects?.created?.[0]?.reference?.objectId;
+                    if (objectId) {
+                        onCreated(objectId);
+                    } else {
+                        console.error('Failed to get objectId from transaction effects');
+                    }
+                },
+            },
+        );
+    }
 
-  return (
-    <Container>
-      <Button
-        size="3"
-        onClick={() => {
-          create();
-        }}
-        disabled={isSuccess || isPending}
-      >
-        {isSuccess || isPending ? <ClipLoader size={20} /> : "Create Counter"}
-      </Button>
-    </Container>
-  );
+    return (
+        <div>
+            <button
+                className="px-6 py-3 text-lg bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+                onClick={() => {
+                    create();
+                }}
+                disabled={isSuccess || isPending}
+            >
+                {isSuccess || isPending ? 'Creating...' : 'Create Counter'}
+            </button>
+        </div>
+    );
 }

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

@@ -1,3 +1,3 @@
-export const DEVNET_COUNTER_PACKAGE_ID = "0xTODO";
-export const TESTNET_COUNTER_PACKAGE_ID = "0xTODO";
-export const MAINNET_COUNTER_PACKAGE_ID = "0xTODO";
+export const DEVNET_COUNTER_PACKAGE_ID = '0xTODO';
+export const TESTNET_COUNTER_PACKAGE_ID = '0xTODO';
+export const MAINNET_COUNTER_PACKAGE_ID = '0xTODO';

package/templates/react-e2e-counter/src/index.css

@@ -0,0 +1,9 @@
+@import 'tailwindcss';
+
+:root {
+    color-scheme: dark;
+}
+
+body {
+    @apply bg-gray-950 text-gray-100;
+}

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

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

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

@@ -1,31 +1,30 @@
-import { getFullnodeUrl } from "@iota/iota-sdk/client";
+import { getFullnodeUrl } from '@iota/iota-sdk/client';
 import {
-  DEVNET_COUNTER_PACKAGE_ID,
-  TESTNET_COUNTER_PACKAGE_ID,
-  MAINNET_COUNTER_PACKAGE_ID,
-} from "./constants.ts";
-import { createNetworkConfig } from "@iota/dapp-kit";
+    DEVNET_COUNTER_PACKAGE_ID,
+    TESTNET_COUNTER_PACKAGE_ID,
+    MAINNET_COUNTER_PACKAGE_ID,
+} from './constants.ts';
+import { createNetworkConfig } from '@iota/dapp-kit';
 
-const { networkConfig, useNetworkVariable, useNetworkVariables } =
-  createNetworkConfig({
+const { networkConfig, useNetworkVariable, useNetworkVariables } = createNetworkConfig({
     devnet: {
-      url: getFullnodeUrl("devnet"),
-      variables: {
-        counterPackageId: DEVNET_COUNTER_PACKAGE_ID,
-      },
+        url: getFullnodeUrl('devnet'),
+        variables: {
+            counterPackageId: DEVNET_COUNTER_PACKAGE_ID,
+        },
     },
     testnet: {
-      url: getFullnodeUrl("testnet"),
-      variables: {
-        counterPackageId: TESTNET_COUNTER_PACKAGE_ID,
-      },
+        url: getFullnodeUrl('testnet'),
+        variables: {
+            counterPackageId: TESTNET_COUNTER_PACKAGE_ID,
+        },
     },
     mainnet: {
-      url: getFullnodeUrl("mainnet"),
-      variables: {
-        counterPackageId: MAINNET_COUNTER_PACKAGE_ID,
-      },
+        url: getFullnodeUrl('mainnet'),
+        variables: {
+            counterPackageId: MAINNET_COUNTER_PACKAGE_ID,
+        },
     },
-  });
+});
 
 export { useNetworkVariable, useNetworkVariables, networkConfig };

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

@@ -1,25 +1,24 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "target": "ES2022",
+        "useDefineForClassFields": true,
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
+        /* 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" }]
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src", "vite.config.ts"]
 }