@iota/create-dapp 0.0.0-experimental-20250611113847

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

@@ -0,0 +1,61 @@
+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";
+
+function App() {
+  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>
+    </>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,96 @@
+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";
+
+export function Counter({ id }: { id: string }) {
+  const counterPackageId = useNetworkVariable("counterPackageId");
+  const iotaClient = useIotaClient();
+  const currentAccount = useCurrentAccount();
+  const { mutate: signAndExecute } = useSignAndExecuteTransaction({
+    execute: async ({ bytes, signature }) =>
+      await iotaClient.executeTransactionBlock({
+        transactionBlock: bytes,
+        signature,
+        options: {
+          // Raw effects are required so the effects can be reported back to the wallet
+          showRawEffects: true,
+          showEffects: true,
+        },
+      }),
+  });
+  const { data, isPending, error, refetch } = useIotaClientQuery("getObject", {
+    id,
+    options: {
+      showContent: true,
+      showOwner: true,
+    },
+  });
+
+  const executeMoveCall = (method: "increment" | "reset") => {
+    const tx = new Transaction();
+
+    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: async () => {
+          await refetch();
+        },
+      },
+    );
+  };
+
+  if (isPending) return <Text>Loading...</Text>;
+
+  if (error) return <Text>Error: {error.message}</Text>;
+
+  if (!data.data) return <Text>Not found</Text>;
+
+  const ownedByCurrentAccount =
+    getCounterFields(data.data)?.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">
+          <Button onClick={() => executeMoveCall("increment")}>
+            Increment
+          </Button>
+          {ownedByCurrentAccount ? (
+            <Button onClick={() => executeMoveCall("reset")}>Reset</Button>
+          ) : null}
+        </Flex>
+      </Flex>
+    </>
+  );
+}
+function getCounterFields(data: IotaObjectData) {
+  if (data.content?.dataType !== "moveObject") {
+    return null;
+  }
+
+  return data.content.fields as { value: number; owner: string };
+}

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

@@ -0,0 +1,61 @@
+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";
+
+export function CreateCounter({
+  onCreated,
+}: {
+  onCreated: (id: string) => void;
+}) {
+  const counterPackageId = useNetworkVariable("counterPackageId");
+  const iotaClient = useIotaClient();
+  const { mutate: signAndExecute } = useSignAndExecuteTransaction({
+    execute: async ({ bytes, signature }) =>
+      await iotaClient.executeTransactionBlock({
+        transactionBlock: bytes,
+        signature,
+        options: {
+          // Raw effects are required so the effects can be reported back to the wallet
+          showRawEffects: true,
+          showEffects: true,
+        },
+      }),
+  });
+
+  return (
+    <Container>
+      <Button
+        size="3"
+        onClick={() => {
+          create();
+        }}
+      >
+        Create Counter
+      </Button>
+    </Container>
+  );
+
+  function create() {
+    const tx = new Transaction();
+
+    tx.moveCall({
+      arguments: [],
+      target: `${counterPackageId}::counter::create`,
+    });
+
+    signAndExecute(
+      {
+        transaction: tx,
+      },
+      {
+        onSuccess: (result) => {
+          const objectId = result.effects?.created?.[0]?.reference?.objectId;
+          if (objectId) {
+            onCreated(objectId);
+          }
+        },
+      },
+    );
+  }
+}

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

@@ -0,0 +1,3 @@
+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/main.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@iota/dapp-kit/dist/index.css";
+import "@radix-ui/themes/styles.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";
+
+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>,
+);

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

@@ -0,0 +1,31 @@
+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";
+
+const { networkConfig, useNetworkVariable, useNetworkVariables } =
+  createNetworkConfig({
+    devnet: {
+      url: getFullnodeUrl("devnet"),
+      variables: {
+        counterPackageId: DEVNET_COUNTER_PACKAGE_ID,
+      },
+    },
+    testnet: {
+      url: getFullnodeUrl("testnet"),
+      variables: {
+        counterPackageId: TESTNET_COUNTER_PACKAGE_ID,
+      },
+    },
+    mainnet: {
+      url: getFullnodeUrl("mainnet"),
+      variables: {
+        counterPackageId: MAINNET_COUNTER_PACKAGE_ID,
+      },
+    },
+  });
+
+export { useNetworkVariable, useNetworkVariables, networkConfig };

package/templates/react-e2e-counter/src/vite-env.d.ts

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

package/templates/react-e2e-counter/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-e2e-counter/tsconfig.node.json

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

package/templates/react-e2e-counter/vite.config.ts

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