create-leo-app 0.0.13

package/template-offline-public-transaction-ts/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "node-offline-transaction-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "rimraf dist/js && rollup --config",
+    "start": "npm run build && node dist/index.js"
+  },
+  "dependencies": {
+    "@provablehq/sdk": "^0.6.0"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.1",
+    "rollup": "^3.27.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.2.2"
+  }
+}

package/template-offline-public-transaction-ts/rollup.config.js

@@ -0,0 +1,19 @@
+import typescript from "rollup-plugin-typescript2";
+
+export default {
+    input: {
+        index: "./src/index.ts",
+    },
+    output: {
+        dir: `dist`,
+        format: "es",
+        sourcemap: true,
+    },
+    external: ['@provablehq/sdk'],
+    plugins: [
+        typescript({
+            tsconfig: "tsconfig.json",
+            clean: true,
+        }),
+    ],
+};

package/template-offline-public-transaction-ts/src/helpers.ts

@@ -0,0 +1,70 @@
+import { CREDITS_PROGRAM_KEYS } from "@provablehq/sdk";
+import { promises as fsPromises, writeFileSync } from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+async function downloadAndSaveKey(keyData, keysDirPath) {
+    const locatorParts = keyData.locator.split('/');
+    const fileName = locatorParts.pop();
+    const dirPath = path.join(keysDirPath, ...locatorParts);
+    await fsPromises.mkdir(dirPath, { recursive: true });
+    const filePath = path.join(dirPath, `${fileName}.prover`);
+
+    try {
+        await fsPromises.access(filePath);
+        return filePath;
+    } catch {
+        const res = await fetch(keyData.prover);
+        const buffer = await res.arrayBuffer();
+        writeFileSync(filePath, new Uint8Array(buffer), { flag: 'wx' });
+        console.log(`Downloaded ${keyData.locator}.prover to ${filePath}`);
+        return filePath;
+    }
+}
+
+async function preDownloadTransferKeys() {
+    const keyPaths = {};
+    const __dirname = path.dirname(fileURLToPath(import.meta.url));
+    const keysDirPath = path.join(__dirname, "keys");
+    await fsPromises.mkdir(keysDirPath, { recursive: true });
+
+    for (const keyData of [CREDITS_PROGRAM_KEYS.transfer_public, CREDITS_PROGRAM_KEYS.fee_public]) {
+        try {
+            keyPaths[keyData.locator] = await downloadAndSaveKey(keyData, keysDirPath);
+        } catch (error) {
+            throw(`Failed to download ${keyData.locator} - ${error}`);
+        }
+    }
+
+    return keyPaths;
+}
+
+async function preDownloadBondingKeys() {
+    const keyPaths = {};
+    const __dirname = path.dirname(fileURLToPath(import.meta.url));
+    const keysDirPath = path.join(__dirname, "keys");
+    await fsPromises.mkdir(keysDirPath, { recursive: true });
+
+    for (const keyData of [CREDITS_PROGRAM_KEYS.bond_public, CREDITS_PROGRAM_KEYS.fee_public, CREDITS_PROGRAM_KEYS.unbond_public, CREDITS_PROGRAM_KEYS.claim_unbond_public]) {
+        try {
+            keyPaths[keyData.locator] = await downloadAndSaveKey(keyData, keysDirPath);
+        } catch (error) {
+            throw(`Failed to download ${keyData.locator} - ${error}`);
+        }
+    }
+
+    return keyPaths;
+}
+
+async function getLocalKey(filePath: string): Promise<Uint8Array> {
+    try {
+        console.log("Reading key file:", filePath);
+        const buffer = await fsPromises.readFile(filePath);
+        return new Uint8Array(buffer);
+    } catch (error) {
+        console.error("Error reading file:", error);
+        throw error;
+    }
+}
+
+export { downloadAndSaveKey, getLocalKey, preDownloadBondingKeys, preDownloadTransferKeys };

package/template-offline-public-transaction-ts/src/index.ts

@@ -0,0 +1,171 @@
+import {Account, Address, CREDITS_PROGRAM_KEYS, initThreadPool, ProgramManager, OfflineQuery, OfflineKeyProvider, OfflineSearchParams, ProvingKey, Transaction} from "@provablehq/sdk";
+import { getLocalKey, preDownloadBondingKeys, preDownloadTransferKeys } from "./helpers";
+
+await initThreadPool();
+
+/// Build transfer public transaction without connection to the internet
+async function buildTransferPublicTxOffline(recipientAddress: Address, amount: number, latestStateRoot: string, keyPaths: {}): Promise<Error | Transaction>  {
+    // Create an offline program manager
+    const programManager = new ProgramManager();
+
+    // Create a temporary account for the execution of the program
+    const account = new Account();
+    programManager.setAccount(account);
+
+    // Create the proving keys from the key bytes on the offline machine
+    console.log("Creating proving keys from local key files");
+    const feePublicKeyBytes = await getLocalKey(<string>keyPaths[CREDITS_PROGRAM_KEYS.fee_public.locator]);
+    const transferPublicAsSignerKeyBytes = await getLocalKey(<string>keyPaths[CREDITS_PROGRAM_KEYS.transfer_public_as_signer.locator]);
+    const feePublicProvingKey = ProvingKey.fromBytes(feePublicKeyBytes);
+    const transferPublicProvingKey = ProvingKey.fromBytes(transferPublicAsSignerKeyBytes);
+
+    // Create an offline key provider
+    console.log("Creating offline key provider");
+    const offlineKeyProvider = new OfflineKeyProvider();
+
+    // Insert the proving keys into the offline key provider. The key provider will automatically insert the verifying
+    // keys into the key manager.
+    console.log("Inserting proving keys into key provider");
+    offlineKeyProvider.insertFeePublicKeys(feePublicProvingKey);
+    offlineKeyProvider.insertTransferPublicKeys(transferPublicProvingKey);
+
+    // Create an offline query to complete the inclusion proof
+    const offlineQuery = new OfflineQuery(latestStateRoot);
+
+    // Insert the key provider into the program manager
+    programManager.setKeyProvider(offlineKeyProvider);
+
+    // Build tne transfer_public transaction offline
+    console.log("Building transfer transaction offline");
+    return programManager.buildTransferPublicAsSignerTransaction(
+        amount,
+        recipientAddress.to_string(),
+        0.28,
+        undefined,
+        offlineQuery,
+    );
+}
+
+/// Build bonding and unbonding transactions without connection to the internet
+async function buildBondingTxOffline(stakerAddress: Address,  validatorAddress: Address, withdrawalAddress: Address, amount: number, latestStateRoot: string, keyPaths: {}): Promise<Error | Transaction[]> {
+    // Create an offline program manager
+    const programManager = new ProgramManager();
+
+    // Create a temporary account for the execution of the program
+    const account = new Account();
+    programManager.setAccount(account);
+
+    // Create the proving keys from the key bytes on the offline machine
+    console.log("Creating proving keys from local key files");
+    const feePublicKeyBytes = await getLocalKey(<string>keyPaths[CREDITS_PROGRAM_KEYS.fee_public.locator]);
+    const bondPublicKeyBytes = await getLocalKey(<string>keyPaths[CREDITS_PROGRAM_KEYS.bond_public.locator]);
+    const unbondPublicKeyBytes = await getLocalKey(<string>keyPaths[CREDITS_PROGRAM_KEYS.unbond_public.locator]);
+    const claimUnbondPublicKeyBytes = await getLocalKey(<string>keyPaths[CREDITS_PROGRAM_KEYS.claim_unbond_public.locator]);
+    const feePublicProvingKey = ProvingKey.fromBytes(feePublicKeyBytes);
+    const bondPublicProvingKey = ProvingKey.fromBytes(bondPublicKeyBytes);
+    const unBondPublicProvingKey = ProvingKey.fromBytes(unbondPublicKeyBytes);
+    const claimUnbondPublicProvingKey = ProvingKey.fromBytes(claimUnbondPublicKeyBytes);
+
+    // Create an offline key provider to fetch keys without connection to the internet
+    console.log("Creating offline key provider");
+    const offlineKeyProvider = new OfflineKeyProvider();
+
+    // Insert the proving keys into the offline key provider. The key provider will automatically insert the verifying
+    // keys into the key manager.
+    console.log("Inserting proving keys into key provider");
+    offlineKeyProvider.insertFeePublicKeys(feePublicProvingKey);
+    offlineKeyProvider.insertBondPublicKeys(bondPublicProvingKey);
+    offlineKeyProvider.insertUnbondPublicKeys(unBondPublicProvingKey);
+    offlineKeyProvider.insertClaimUnbondPublicKeys(claimUnbondPublicProvingKey);
+
+    // Insert the key provider into the program manager
+    programManager.setKeyProvider(offlineKeyProvider);
+
+    // Build the bonding transactions offline
+    console.log("Building a bond_public execution transaction offline");
+    const bondPublicOptions = {
+        executionParams: {
+            keySearchParams: OfflineSearchParams.bondPublicKeyParams()
+        },
+        offlineParams: {
+            offlineQuery: new OfflineQuery(latestStateRoot)
+        }
+    }
+
+    const bondTx = <Transaction>await programManager.buildBondPublicTransaction(
+        stakerAddress.to_string(),
+        validatorAddress.to_string(),
+        withdrawalAddress.to_string(),
+        amount,
+        bondPublicOptions,
+    )
+    console.log("\nbond_public transaction built!\n");
+
+    console.log("Building an unbond_public execution transaction offline")
+    const unbondPublicOptions = {
+        executionParams: {
+            keySearchParams: OfflineSearchParams.unbondPublicKeyParams()
+        },
+        offlineParams: {
+            offlineQuery: new OfflineQuery(latestStateRoot)
+        }
+    }
+
+    const unBondTx = <Transaction>await programManager.buildUnbondPublicTransaction(stakerAddress.to_string(), amount, unbondPublicOptions);
+    console.log("\nunbond_public transaction built!\n");
+
+    console.log("Building a claim_unbond_public transaction offline")
+    // Build the claim unbonding transaction offline
+    const claimUnbondPublicOptions = {
+        executionParams: {
+            keySearchParams: OfflineSearchParams.claimUnbondPublicKeyParams()
+        },
+        offlineParams: {
+            offlineQuery: new OfflineQuery(latestStateRoot)
+        }
+    }
+
+    const claimUnbondTx = <Transaction>await programManager.buildClaimUnbondPublicTransaction(stakerAddress.to_string(), claimUnbondPublicOptions);
+    console.log("\nclaim_unbond_public transaction built!\n");
+    return [bondTx, unBondTx, claimUnbondTx];
+}
+
+// -------------------ONLINE COMPONENT---------------------
+//     (Do this part on an internet connected machine)
+
+// Download the needed keys for the functions we want to execute offline
+const transferKeyPaths = await preDownloadTransferKeys();
+const bondingKeyPaths = await preDownloadBondingKeys();
+//---------------------------------------------------------
+
+// ------------------OFFLINE COMPONENT---------------------
+//           (Do this part on an offline machine)
+// Get the latest state root from an online machine and enter it into an offline machine
+const latestStateRoot = "sr1p93gpsezrjzdhcd2wujznx5s07k8qa39t6vfcej35zew8vn2jyrs46te8q";
+
+// Build a transfer_public transaction
+const stakerAddress = new Account().address();
+const validatorAddress = new Account().address();
+const withdrawalAddress = new Account().address();
+const transferTx = await buildTransferPublicTxOffline(stakerAddress, 10000, latestStateRoot, transferKeyPaths);
+console.log("Transfer transaction built offline!");
+console.log(`\n---------------transfer_public transaction---------------\n${transferTx}`);
+console.log(`---------------------------------------------------------`);
+
+// Build bonding & unbonding transactions
+const bondTransactions = await buildBondingTxOffline(stakerAddress, validatorAddress, withdrawalAddress, 100, latestStateRoot, bondingKeyPaths);
+console.log("Bonding transactions built offline!");
+console.log(`\n-----------------bond_public transaction-----------------\n${bondTransactions[0]}`);
+console.log(`---------------------------------------------------------`);
+console.log(`\n----------------unbond_public transaction:---------------\n${bondTransactions[1]}`);
+console.log(`---------------------------------------------------------`);
+console.log(`\n-----------------claim_unbond transaction:---------------\n${bondTransactions[2]}`);
+console.log(`---------------------------------------------------------`);
+//---------------------------------------------------------
+
+// -------------------ONLINE COMPONENT---------------------
+//     (Do this part on an internet connected machine)
+// ONLINE COMPONENT (Uncomment this part to send the transaction to the Aleo Network on an internet connected machine)
+// Submit the transaction to the network
+// const transferTxId = await networkClient.submitTransaction(transferTx);
+//---------------------------------------------------------

package/template-offline-public-transaction-ts/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "es2017",
+    "module": "esnext",
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+
+    /* Advanced Options */
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}

package/template-react-leo/.babelrc

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

package/template-react-leo/.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 },
+    ],
+  },
+}

package/template-react-leo/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/ProvableHQ/sdk/tree/testnet3/create-leo-app/template-react-leo)
+
+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://provable.tools/account)
+
+3. Follow instructions to install Leo here: https://github.com/ProvableHQ/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.

package/template-react-leo/_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?

package/template-react-leo/_headers

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

package/template-react-leo/helloworld/.env.example

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

package/template-react-leo/helloworld/.gitignore

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

package/template-react-leo/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
+```

package/template-react-leo/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;

package/template-react-leo/helloworld/build/program.json

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

package/template-react-leo/helloworld/inputs/helloworld.in

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

package/template-react-leo/helloworld/program.json

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

package/template-react-leo/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;
+    }
+}

package/template-react-leo/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.jsx"></script>
+  </body>
+</html>

package/template-react-leo/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/ProvableHQ/leo "$INSTALL_DIR"
+fi
+
+# build and install
+echo "Building and installing from source..."
+cargo install --path "$INSTALL_DIR"

package/template-react-leo/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "aleo-react-leo-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "webpack --config webpack.config.js",
+    "build:vite": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "install-leo": "./install.sh"
+  },
+  "dependencies": {
+    "@provablehq/sdk": "^0.6.0",
+    "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.16.7",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.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",
+    "vite": "^4.4.12",
+    "webpack": "^5.76.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}