Add typescript template (ProvableHQ#785)

* copy react-leo to react-typescript

* work in progress but was able to build

* ts template in cli

* make typescript a variant

* rename to react-ts

---------

Signed-off-by: Caleb Curry <[email protected]>

create-aleo-app/src/index.ts

@@ -48,6 +48,11 @@ const FRAMEWORKS: Framework[] = [
         display: "JavaScript + Leo",
         color: lightGreen,
       },
+      {
+        name: 'react-ts',
+        display: "React + TypeScript",
+        color: red
+      },
       {
         name: "nextjs-ts",
         display: "TypeScript + Next.js",

create-aleo-app/template-react-ts/.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-typescript",
+        ["@babel/preset-react", { "runtime": "automatic" }]
+    ]
+}

create-aleo-app/template-react-ts/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

create-aleo-app/template-react-ts/README.md

@@ -0,0 +1,90 @@
+# React + Aleo + Leo
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/AleoHQ/sdk/tree/testnet3/create-aleo-app/template-react)
+
+This template provides a minimal setup to get React and Aleo working in Vite
+with HMR and some ESLint rules.
+
+This template includes a Leo program that is loaded by the web app located in
+the `helloworld` directory.
+
+Note: Webpack is currently used for production builds due to a
+[bug](https://github.com/vitejs/vite/issues/13367) with Vite related to nested
+workers.
+
+### Start in development mode
+
+```bash
+npm run dev
+```
+
+Your app should be running on http://localhost:5173/
+
+### Build Leo program
+
+1. Copy the `helloworld/.env.example` to `helloworld/.env` (this will be ignored
+   by Git):
+
+   ```bash
+   cd helloworld
+   cp .env.example .env
+   ```
+
+2. Replace `PRIVATE_KEY=user1PrivateKey` in the `.env` with your own key (you
+   can use an existing one or generate your own at https://aleo.tools/account)
+
+3. Follow instructions to install Leo here: https://github.com/AleoHQ/leo
+
+4. You can edit `helloworld/src/main.leo` and run `leo run` to compile and update the
+   Aleo instructions under `build` which are loaded by the web app.
+
+## Deploy program from web app
+
+> [!WARNING]  
+> This is for demonstration purposes or local testing only, in production applications you
+> should avoid building a public facing web app with private key information
+
+Information on generating a private key, seeding a wallet with funds, and finding a spendable record can be found here
+if you are unfamiliar: https://developer.aleo.org/testnet/getting_started/deploy_execute_demo
+
+Aleo programs deployed require unique names, make sure to edit the program's name to something unique in `helloworld/src/main.leo`, `helloworld/program.json`, rename `helloworld/inputs/helloworld.in` and rebuild.
+
+1. In the `worker.js` file modify the privateKey to be an account with available
+   funds
+
+   ```js
+   // Use existing account with funds
+   const account = new Account({
+     privateKey: "user1PrivateKey",
+   });
+   ```
+
+2. (Optional) Provide a fee record manually (located in commented code within `worker.js`)
+
+   If you do not provide a manual fee record, the SDK will attempt to scan for a record starting at the latest block. A simple way to speed this up would be to make a public transaction to this account right before deploying.
+
+3. Run the web app and hit the deploy button
+
+## Production deployment
+
+### Build
+
+`npm run build`
+
+Upload `dist` folder to your host of choice.
+
+### ⚠️ Header warnings
+
+`DOMException: Failed to execute 'postMessage' on 'Worker': SharedArrayBuffer transfer requires self.crossOriginIsolated`
+
+If you get a warning similar to this when deploying your application, you need
+to make sure your web server is configured with the following headers:
+
+```
+Cross-Origin-Opener-Policy: same-origin
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+We've included a `_headers` file that works with some web hosts (e.g. Netlify)
+but depending on your host / server setup you may need to configure the headers
+manually.

create-aleo-app/template-react-ts/_gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

create-aleo-app/template-react-ts/_headers

@@ -0,0 +1,3 @@
+/*
+  Cross-Origin-Opener-Policy: same-origin
+  Cross-Origin-Embedder-Policy: require-corp

create-aleo-app/template-react-ts/helloworld/.env.example

@@ -0,0 +1,2 @@
+NETWORK=testnet3
+PRIVATE_KEY=user1PrivateKey

create-aleo-app/template-react-ts/helloworld/.gitignore

@@ -0,0 +1,5 @@
+.env
+*.avm
+*.prover
+*.verifier
+outputs/

create-aleo-app/template-react-ts/helloworld/README.md

@@ -0,0 +1,13 @@
+# helloworld.aleo
+
+## Build Guide
+
+To compile this Aleo program, run:
+```bash
+snarkvm build
+```
+
+To execute this Aleo program, run:
+```bash
+snarkvm run hello
+```

create-aleo-app/template-react-ts/helloworld/build/main.aleo

@@ -0,0 +1,7 @@
+program helloworld.aleo;
+
+function main:
+    input r0 as u32.public;
+    input r1 as u32.private;
+    add r0 r1 into r2;
+    output r2 as u32.private;

create-aleo-app/template-react-ts/helloworld/build/program.json

@@ -0,0 +1,6 @@
+{
+    "program": "helloworld.aleo",
+    "version": "0.0.0",
+    "description": "",
+    "license": "MIT"
+}

create-aleo-app/template-react-ts/helloworld/inputs/helloworld.in

@@ -0,0 +1,4 @@
+// The program input for helloworld/src/main.leo
+[main]
+public a: u32 = 1u32;
+b: u32 = 2u32;

create-aleo-app/template-react-ts/helloworld/program.json

@@ -0,0 +1,6 @@
+{
+    "program": "helloworld.aleo",
+    "version": "0.0.0",
+    "description": "",
+    "license": "MIT"
+}

create-aleo-app/template-react-ts/helloworld/src/main.leo

@@ -0,0 +1,7 @@
+// The 'helloworld' program.
+program helloworld.aleo {
+    transition main(public a: u32, b: u32) -> u32 {
+        let c: u32 = a + b;
+        return c;
+    }
+}

create-aleo-app/template-react-ts/index.html

@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="public/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Aleo + React</title>
+    <style>
+      body {
+        background: #000000;
+      }
+      .spinner {
+        margin: 150px auto 50px auto;
+        width: 40px;
+        height: 40px;
+        position: relative;
+        text-align: center;
+
+        -webkit-animation: sk-rotate 2s infinite linear;
+        animation: sk-rotate 2s infinite linear;
+      }
+
+      .dot1,
+      .dot2 {
+        width: 60%;
+        height: 60%;
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        background-color: #00C0F9;
+        border-radius: 100%;
+
+        -webkit-animation: sk-bounce 2s infinite ease-in-out;
+        animation: sk-bounce 2s infinite ease-in-out;
+      }
+
+      .dot2 {
+        top: auto;
+        bottom: 0;
+        -webkit-animation-delay: -1s;
+        animation-delay: -1s;
+      }
+
+      @-webkit-keyframes sk-rotate {
+        100% {
+          -webkit-transform: rotate(360deg);
+        }
+      }
+      @keyframes sk-rotate {
+        100% {
+          transform: rotate(360deg);
+          -webkit-transform: rotate(360deg);
+        }
+      }
+
+      @-webkit-keyframes sk-bounce {
+        0%,
+        100% {
+          -webkit-transform: scale(0);
+        }
+        50% {
+          -webkit-transform: scale(1);
+        }
+      }
+
+      @keyframes sk-bounce {
+        0%,
+        100% {
+          transform: scale(0);
+          -webkit-transform: scale(0);
+        }
+        50% {
+          transform: scale(1);
+          -webkit-transform: scale(1);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root">
+      <div class="spinner">
+        <div class="dot1"></div>
+        <div class="dot2"></div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

create-aleo-app/template-react-ts/install.sh

@@ -0,0 +1,30 @@
+#!/bin/bash
+
+# script exists immediately if command fails
+set -e
+
+# check for dependencies
+command -v git >/dev/null 2>&1 || { echo >&2 "git is required but it's not installed. Aborting."; exit 1; }
+command -v cargo >/dev/null 2>&1 || { echo >&2 "cargo is required but it's not installed. Aborting."; exit 1; }
+
+INSTALL_DIR="${INSTALL_DIR:-$HOME/.leo}"
+
+# ask for confirmation
+read -p "This script will install Leo into $INSTALL_DIR. Do you want to continue? (y/N) " choice
+case "$choice" in 
+  y|Y ) echo "Continuing installation...";;
+  * ) echo "Aborting."; exit;;
+esac
+
+# clone or update the repo
+if [ -d "$INSTALL_DIR" ]; then
+  echo "Directory $INSTALL_DIR exists. Updating repository..."
+  git -C "$INSTALL_DIR" pull
+else
+  echo "Cloning repository into $INSTALL_DIR..."
+  git clone https://github.com/AleoHQ/leo "$INSTALL_DIR"
+fi
+
+# build and install
+echo "Building and installing from source..."
+cargo install --path "$INSTALL_DIR"

create-aleo-app/template-react-ts/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "aleo-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "webpack",
+    "dev-webpack": "webpack serve",
+    "build:vite": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "install-leo": "./install.sh"
+  },
+  "dependencies": {
+    "@aleohq/sdk": "^0.6.2",
+    "comlink": "^4.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.2",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/babel__generator": "^7.6.6",
+    "@types/node": "^20.8.7",
+    "@vitejs/plugin-react": "^4.0.4",
+    "babel-loader": "^8.2.3",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.6.0",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "raw-loader": "^4.0.2",
+    "style-loader": "^3.3.1",
+    "svg-url-loader": "^8.0.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.5",
+    "webpack": "^5.76.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}