@iota/create-dapp 0.1.0

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

@@ -0,0 +1,35 @@
+{
+  "name": "@iota/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": {
+    "@iota/dapp-kit": "workspace:*",
+    "@iota/iota-sdk": "workspace:*",
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/themes": "^2.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "prettier": "^3.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^4.4.4"
+  }
+}

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 "@iota/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, useIotaClientQuery } from "@iota/dapp-kit";
+import { Flex, Heading, Text } from "@radix-ui/themes";
+
+export function OwnedObjects() {
+  const account = useCurrentAccount();
+  const { data, isPending, error } = useIotaClientQuery(
+    "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 "@iota/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,40 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "@iota/dapp-kit/dist/index.css";
+import "@radix-ui/themes/styles.css";
+
+import { getFullnodeUrl } from "@iota/iota-sdk/client";
+import {
+  IotaClientProvider,
+  WalletProvider,
+  createNetworkConfig,
+} from "@iota/dapp-kit";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Theme } from "@radix-ui/themes";
+import App from "./App.tsx";
+
+const queryClient = new QueryClient();
+
+const { networkConfig } = createNetworkConfig({
+  localnet: { url: getFullnodeUrl("localnet") },
+  devnet: { url: getFullnodeUrl("devnet") },
+  testnet: { url: getFullnodeUrl("testnet") },
+  mainnet: { url: getFullnodeUrl("mainnet") },
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <Theme appearance="dark">
+      <QueryClientProvider client={queryClient}>
+        <IotaClientProvider networks={networkConfig} defaultNetwork="devnet">
+          <WalletProvider autoConnect>
+            <App />
+          </WalletProvider>
+        </IotaClientProvider>
+      </QueryClientProvider>
+    </Theme>
+  </React.StrictMode>,
+);

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.ts"]
+}

package/templates/react-client-dapp/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()],
+});

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

@@ -0,0 +1,100 @@
+# Iota dApp Starter Template
+
+This dApp was created using `@iota/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/) for linting
+- [`@iota/dapp-kit`]() for connecting to
+  wallets and loading data
+- [pnpm](https://pnpm.io/) for package management
+
+## Deploying your Move code
+
+### Install Iota cli
+
+Before deploying your move code, ensure that you have installed the Iota CLI.
+You can follow the
+[Iota installation instruction](https://docs.iota.io/build/install) to get
+everything set up.
+
+This template uses `devnet` by default, so we'll need to set up a devnet
+environment in the CLI:
+
+```bash
+iota client new-env --alias devnet --rpc https://fullnode.devnet.iota.io:443
+iota client switch --env devnet
+```
+
+If you haven't set up an address in the iota client yet, you can use the
+following command to get a new address:
+
+```bash
+iota client new-address secp256k1
+```
+
+This well generate a new address and recover phrase for you. You can mark a
+newly created address as you active address by running the following command
+with your new address:
+
+```bash
+iota client switch --address 0xYOUR_ADDRESS...
+```
+
+We can ensure we have some Iota in our new wallet by requesting Iota from the
+faucet (make sure to replace the address with your address):
+
+```bash
+curl --location --request POST 'https://faucet.devnet.iota.io/gas' \
+--header 'Content-Type: application/json' \
+--data-raw '{
+    "FixedAmountRequest": {
+        "recipient": "<YOUR_ADDRESS>"
+    }
+}'
+```
+
+### Publishing the move package
+
+The move code for this template is located in the `move` directory. To publish
+it, you can enter the `move` directory, and publish it with the Iota CLI:
+
+```bash
+cd move
+iota 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`:
+
+```ts
+export const DEVNET_COUNTER_PACKAGE_ID = "<YOUR_PACKAGE_ID>";
+```
+
+Now that we have published the move code, and update the package ID, we can
+start the app.
+
+## 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-e2e-counter/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>Iota 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-e2e-counter/move/counter/Move.toml

@@ -0,0 +1,9 @@
+[package]
+name = "counter"
+version = "0.0.1"
+
+[dependencies]
+Iota = { git = "https://github.com/iotaledger/iota.git", subdir = "crates/iota-framework/packages/iota-framework", rev = "framework/devnet" }
+
+[addresses]
+counter = "0x0"

package/templates/react-e2e-counter/move/counter/sources/counter.move

@@ -0,0 +1,54 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+/// This example demonstrates a basic use of a shared object.
+/// Rules:
+/// - anyone can create and share a counter
+/// - everyone can increment a counter by 1
+/// - the owner of the counter can reset it to any value
+module counter::counter {
+    use iota::transfer;
+    use iota::object::{Self, UID};
+    use iota::tx_context::{Self, TxContext};
+
+    /// A shared counter.
+    struct Counter has key {
+        id: UID,
+        owner: address,
+        value: u64
+    }
+
+    public fun owner(counter: &Counter): address {
+        counter.owner
+    }
+
+    public fun value(counter: &Counter): u64 {
+        counter.value
+    }
+
+    /// Create and share a Counter object.
+    public fun create(ctx: &mut TxContext) {
+        transfer::share_object(Counter {
+            id: object::new(ctx),
+            owner: tx_context::sender(ctx),
+            value: 0
+        })
+    }
+
+    /// Increment a counter by 1.
+    public fun increment(counter: &mut Counter) {
+        counter.value = counter.value + 1;
+    }
+
+    /// Set value (only runnable by the Counter owner)
+    public fun set_value(counter: &mut Counter, value: u64, ctx: &TxContext) {
+        assert!(counter.owner == tx_context::sender(ctx), 0);
+        counter.value = value;
+    }
+
+    /// Assert a value for the counter.
+    public fun assert_value(counter: &Counter, value: u64) {
+        assert!(counter.value == value, 0)
+    }
+}

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

@@ -0,0 +1,35 @@
+{
+  "name": "@iota/template-react-e2e-coinflip",
+  "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": {
+    "@iota/dapp-kit": "workspace:*",
+    "@iota/iota-sdk": "workspace:*",
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/themes": "^2.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "prettier": "^3.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^4.4.4"
+  }
+}

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

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

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

@@ -0,0 +1,64 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+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,94 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  useCurrentAccount,
+  useSignAndExecuteTransactionBlock,
+  useIotaClient,
+  useIotaClientQuery,
+} from "@iota/dapp-kit";
+import type { IotaObjectData } from "@iota/iota-sdk/client";
+import { TransactionBlock } 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 client = useIotaClient();
+  const currentAccount = useCurrentAccount();
+  const counterPackageId = useNetworkVariable("counterPackageId");
+  const { mutate: signAndExecute } = useSignAndExecuteTransactionBlock();
+  const { data, isPending, error, refetch } = useIotaClientQuery("getObject", {
+    id,
+    options: {
+      showContent: true,
+      showOwner: true,
+    },
+  });
+
+  const executeMoveCall = (method: "increment" | "reset") => {
+    const txb = new TransactionBlock();
+
+    if (method === "reset") {
+      txb.moveCall({
+        arguments: [txb.object(id), txb.pure.u64(0)],
+        target: `${counterPackageId}::counter::set_value`,
+      });
+    } else {
+      txb.moveCall({
+        arguments: [txb.object(id)],
+        target: `${counterPackageId}::counter::increment`,
+      });
+    }
+
+    signAndExecute(
+      {
+        transactionBlock: txb,
+        options: {
+          showEffects: true,
+          showObjectChanges: true,
+        },
+      },
+      {
+        onSuccess: (tx) => {
+          client.waitForTransactionBlock({ digest: tx.digest }).then(() => {
+            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 };
+}