Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: PXE in the browser #10353

Merged
merged 42 commits into from
Dec 9, 2024
Merged
Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
c0400f1
from another branch
Thunkar Nov 29, 2024
a727d33
restore interfaces
Thunkar Nov 29, 2024
e53d217
working separate interfaces
Thunkar Nov 29, 2024
9624809
fs promises
Thunkar Nov 29, 2024
4ad27eb
wip
Thunkar Nov 29, 2024
0af93eb
async variants
Thunkar Dec 2, 2024
9b45568
db complete
Thunkar Dec 2, 2024
2bf0d3b
working poc
Thunkar Dec 2, 2024
e68b124
removed await from iterators
Thunkar Dec 2, 2024
c2ea0c0
fix persistent storage
Thunkar Dec 2, 2024
9161b23
removed compilation artifacts
Thunkar Dec 2, 2024
7758452
updated gitignore
Thunkar Dec 2, 2024
6740a88
Merge branch 'master' of github.com:AztecProtocol/aztec-packages into…
Thunkar Dec 2, 2024
ed3c96c
fmt
Thunkar Dec 2, 2024
357258e
fmt
Thunkar Dec 2, 2024
82ae48c
noPXE option for sandbox
Thunkar Dec 3, 2024
42379b8
Merge branch 'master' of github.com:AztecProtocol/aztec-packages into…
Thunkar Dec 3, 2024
1601cb5
merge
Thunkar Dec 3, 2024
a3599d0
Merge branch 'master' of github.com:AztecProtocol/aztec-packages into…
Thunkar Dec 3, 2024
5d4d847
sanity check
Thunkar Dec 3, 2024
7f1ee35
async txs
Thunkar Dec 3, 2024
187bbc9
avoid deploying test accounts when no_pxe is true
Thunkar Dec 3, 2024
7c3b346
pxe version, comments and improvements
Thunkar Dec 4, 2024
8ef1144
fixed package.json
Thunkar Dec 4, 2024
e698de1
fix
Thunkar Dec 4, 2024
34e8757
better commment
Thunkar Dec 4, 2024
8c28413
updated lock
Thunkar Dec 4, 2024
0fb9ff2
Apply suggestions from code review
Thunkar Dec 4, 2024
79ae026
Merge branch 'master' into gj/pxe_in_the_browser_not_insane
Thunkar Dec 4, 2024
6024da2
fixes
Thunkar Dec 4, 2024
b8523cb
Merge branch 'gj/pxe_in_the_browser_not_insane' of github.com:AztecPr…
Thunkar Dec 4, 2024
7355ff7
fixes
Thunkar Dec 4, 2024
1868d5c
Merge branch 'master' into gj/pxe_in_the_browser_not_insane
Thunkar Dec 4, 2024
e487250
Merge branch 'master' of github.com:AztecProtocol/aztec-packages into…
Thunkar Dec 4, 2024
c307ed6
Merge branch 'gj/pxe_in_the_browser_not_insane' of github.com:AztecPr…
Thunkar Dec 4, 2024
2352998
Merge branch 'master' of github.com:AztecProtocol/aztec-packages into…
Thunkar Dec 5, 2024
6dcce7e
changed package jsons to use inherit directive
Thunkar Dec 5, 2024
a420921
yarn install
Thunkar Dec 5, 2024
ecd9c2a
generated file match prettier
Thunkar Dec 5, 2024
e427737
Merge branch 'master' of github.com:AztecProtocol/aztec-packages into…
Thunkar Dec 5, 2024
4d3aefb
Merge branch 'master' of github.com:AztecProtocol/aztec-packages into…
Thunkar Dec 9, 2024
7ff9aac
fixes
Thunkar Dec 9, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions boxes/boxes/vite/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# 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?

artifacts/*
codegenCache.json
50 changes: 50 additions & 0 deletions boxes/boxes/vite/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```

- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:

```js
// eslint.config.js
import react from 'eslint-plugin-react'

export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})
```
28 changes: 28 additions & 0 deletions boxes/boxes/vite/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)
25 changes: 25 additions & 0 deletions boxes/boxes/vite/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Private Token Noir Smart Contract</title>
<style>
#root {
width: 100%;
text-align: center;
}

body {
display: flex;
place-items: center;
background: linear-gradient(#f6fbfc, #d8d4e7);
min-height: 100vh;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
48 changes: 48 additions & 0 deletions boxes/boxes/vite/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
{
"name": "vite",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"compile": "cd src/contracts && ${AZTEC_NARGO:-aztec-nargo} compile --silence-warnings",
"codegen": "${AZTEC_BUILDER:-aztec} codegen src/contracts/target -o artifacts",
"clean": "rm -rf ./dist .tsbuildinfo ./artifacts ./src/contracts/target",
"prep": "yarn clean && yarn compile && yarn codegen",
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@aztec/accounts": "portal:../../../yarn-project/accounts",
"@aztec/aztec.js": "portal:../../../yarn-project/aztec.js",
"@aztec/circuit-types": "portal:../../../yarn-project/circuit-types",
"@aztec/key-store": "link:../../../yarn-project/key-store",
"@aztec/kv-store": "portal:../../../yarn-project/kv-store",
"@aztec/pxe": "link:../../../yarn-project/pxe",
"@noir-lang/acvm_js": "link:../../../noir/packages/acvm_js",
"@noir-lang/noirc_abi": "link:../../../noir/packages/noirc_abi",
"buffer": "^6.0.3",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-toastify": "^10.0.6"
},
"devDependencies": {
"@eslint/js": "^9.13.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^9.13.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"globals": "^15.11.0",
"memfs": "^4.14.0",
"node-stdlib-browser": "^1.3.0",
"typescript": "~5.6.2",
"typescript-eslint": "^8.11.0",
"vite": "^5.4.10",
"vite-plugin-externalize-deps": "^0.8.0",
"vite-plugin-node-polyfills": "^0.22.0",
"vite-plugin-top-level-await": "^1.4.4"
}
}
42 changes: 42 additions & 0 deletions boxes/boxes/vite/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}
35 changes: 35 additions & 0 deletions boxes/boxes/vite/src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "./App.css";
import { Home } from "./pages/home";
import { useEffect, useState } from "react";
import initACVM from "@noir-lang/acvm_js/web/acvm_js";
import initABI from "@noir-lang/noirc_abi/web/noirc_abi_wasm";
import acvmURL from "@noir-lang/acvm_js/web/acvm_js_bg.wasm?url";
import abiURL from "@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm?url";

const InitWasm = ({ children }: any) => {
const [init, setInit] = useState(false);
useEffect(() => {
(async () => {
await Promise.all([
initACVM(new URL(acvmURL, import.meta.url).toString()),
initABI(new URL(abiURL, import.meta.url).toString()),
]);
setInit(true);
})();
});
Thunkar marked this conversation as resolved.
Show resolved Hide resolved

return <div>{init && children}</div>;
};

function App() {
return (
<InitWasm>
<Home />
<ToastContainer />
</InitWasm>
);
}

export default App;
101 changes: 101 additions & 0 deletions boxes/boxes/vite/src/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import {
AztecNode,
Fr,
createDebugLogger,
deriveMasterIncomingViewingSecretKey,
} from "@aztec/aztec.js";
import { BoxReactContractArtifact } from "../artifacts/BoxReact";
import { AccountManager } from "@aztec/aztec.js/account";
import { SingleKeyAccountContract } from "@aztec/accounts/single_key";
import { createAztecNodeClient } from "@aztec/aztec.js";
import { PXEService } from "@aztec/pxe/service";
import { PXEServiceConfig, getPXEServiceConfig } from "@aztec/pxe/config";
import { KVPxeDatabase } from "@aztec/pxe/database";
import { TestPrivateKernelProver } from "@aztec/pxe/kernel_prover";
import { KeyStore } from "@aztec/key-store";
import { PrivateKernelProver } from "@aztec/circuit-types";
import { L2TipsStore } from "@aztec/kv-store/stores";
import { createStore } from "@aztec/kv-store/indexeddb";

const SECRET_KEY = Fr.random();

export class PrivateEnv {
pxe;
accountContract;
account: AccountManager;

constructor(
private secretKey: Fr,
private nodeURL: string,
) {}

async init() {
const config = getPXEServiceConfig();
config.dataDirectory = "pxe";
const aztecNode = await createAztecNodeClient(this.nodeURL);
const proofCreator = new TestPrivateKernelProver();
this.pxe = await this.createPXEService(aztecNode, config, proofCreator);
const encryptionPrivateKey = deriveMasterIncomingViewingSecretKey(
this.secretKey,
);
this.accountContract = new SingleKeyAccountContract(encryptionPrivateKey);
this.account = new AccountManager(
this.pxe,
this.secretKey,
this.accountContract,
);
}

async createPXEService(
aztecNode: AztecNode,
config: PXEServiceConfig,
proofCreator?: PrivateKernelProver,
) {
const l1Contracts = await aztecNode.getL1ContractAddresses();
const configWithContracts = {
...config,
l1Contracts,
} as PXEServiceConfig;

const store = await createStore(
"pxe_data",
configWithContracts,
createDebugLogger("aztec:pxe:data:indexeddb"),
);

const keyStore = new KeyStore(store);

const db = await KVPxeDatabase.create(store);
const tips = new L2TipsStore(store, "pxe");

const server = new PXEService(
keyStore,
aztecNode,
db,
tips,
proofCreator,
config,
);
await server.start();
return server;
}

async getWallet() {
// taking advantage that register is no-op if already registered
return await this.account.register();
}
}

export const deployerEnv = new PrivateEnv(
SECRET_KEY,
process.env.PXE_URL || "http://localhost:8080",
);

const IGNORE_FUNCTIONS = [
"constructor",
"compute_note_hash_and_optionally_a_nullifier",
"sync_notes",
];
export const filteredInterface = BoxReactContractArtifact.functions.filter(
(f) => !IGNORE_FUNCTIONS.includes(f.name),
);
9 changes: 9 additions & 0 deletions boxes/boxes/vite/src/contracts/Nargo.toml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
[package]
name = "boxreact"
authors = [""]
compiler_version = ">=0.18.0"
type = "contract"

[dependencies]
aztec = { path = "../../../../../noir-projects/aztec-nr/aztec" }
value_note = { path = "../../../../../noir-projects/aztec-nr/value-note" }
Loading
Loading