[Examples/Tic-Tac-Toe] Front-end

## Description Build front-ends for shared and multi-sig tic-tac-toe, using `create-react-dapp`. ## Test plan Manually tested, (screenshots TBD).
MystenLabs · Jul 4, 2024 · 6aaf246 · 6aaf246
1 parent a38c2f2
commit 6aaf246
Show file tree

Hide file tree

Showing 34 changed files with 5,685 additions and 0 deletions.
diff --git a/examples/tic-tac-toe/scripts/publish.sh b/examples/tic-tac-toe/scripts/publish.sh
@@ -0,0 +1,71 @@
+#! /usr/bin/env bash
+# Copyright (c) Mysten Labs, Inc.
+# SPDX-License-Identifier: Apache-2.0
+
+set -e
+
+# Change to the script's directory.
+cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null
+
+# Check dependencies are available.
+SUI=${SUI:-sui}
+for i in jq curl $SUI; do
+  if ! command -V ${i} &>/dev/null; then
+    echo "${i} is not installed"
+    exit 1
+  fi
+done
+
+# Make sure an environment was provided, and switch to it
+if [ -z "$1" ]; then
+    echo "Error: No environment provided."
+    exit 1
+fi
+ENV=$1
+$SUI client switch --env $ENV
+
+MOVE_PACKAGE_PATH=../move
+PUBLISH=$(
+    $SUI client ptb                                                \
+         --publish ../move --assign cap                            \
+         --transfer-objects [cap] "@$($SUI client active-address)" \
+         --json
+)
+
+STATUS=$(
+    echo $PUBLISH |
+        jq -r '.effects.status.status'
+)
+
+if [[ $STATUS != "success" ]]; then
+    echo "Error: Move contract publishing failed. Status:"
+    echo $PUBLISH | jq '.effects.status'
+    exit 1
+fi
+
+PACKAGE_ID=$(
+    echo $PUBLISH |
+        jq -r '.objectChanges[] | select(.type == "published") | .packageId'
+)
+
+UPGRADE_CAP=$(
+    echo $PUBLISH |
+        jq -r '.objectChanges[]
+            | select(.type == "created")
+            | select(.objectType | contains("0x2::package::UpgradeCap"))
+            | .objectId'
+)
+
+CONFIG="$(readlink -f ../ui/src)/env.$ENV.ts"
+cat > $CONFIG <<-EOF
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+export default {
+  packageId: "$PACKAGE_ID",
+  upgradeCap: "$UPGRADE_CAP",
+};
+EOF
+
+echo "Contract Deployment finished!"
+echo "Details written to $CONFIG"
diff --git a/examples/tic-tac-toe/ui/README.md b/examples/tic-tac-toe/ui/README.md
@@ -0,0 +1,47 @@
+# Tic-Tac-Toe Front-end
+
+This demo app showcases two versions of on-chain tic-tac-toe. One version
+utilizes shared objects for coordination between players, while the other uses
+owned objects and multi-sigs functionality.
+
+This part of the demo illustrates how to:
+
+- Set-up an application to interact with a blockchain, using the Sui
+  TypeScript SDK and dApp-kit, including deploying its Move packages.
+- Build UIs that represent on-chain data, and update in response to running
+  transactions.
+- Interact with multi-sig accounts.
+
+This dApp was created using `@mysten/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/)
+- [`@mysten/dapp-kit`](https://sdk.mystenlabs.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
+```
diff --git a/examples/tic-tac-toe/ui/index.html b/examples/tic-tac-toe/ui/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en" class="light-theme" style="color-scheme: light">
+  <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>Tic Tac Toe</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>
diff --git a/examples/tic-tac-toe/ui/package.json b/examples/tic-tac-toe/ui/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "tic-tac-toe",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "license": "Apache-2.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@mysten/dapp-kit": "0.14.9",
+    "@mysten/sui": "1.1.2",
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/themes": "^3.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1"
+  },
+  "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.0.0",
+    "@types/react": "^18.2.15",
+    "@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",
+    "vite-tsconfig-paths": "^4.3.2"
+  }
+}