Giter Club home page Giter Club logo

aztec-frontend-boilerplate's Introduction

Aztec Frontend Boilerplate

โš ๏ธ This repo was created for Aztec Connect, which is now deprecated. You can read more about the deprecation here.

This is a sample Aztec frontend powered by Aztec SDK and Create React App.

By default, the project works on the Aztec Testnet.

You can try it out on: https://aztec-frontend-boilerplate.netlify.app/

Functions

A user with Metamask may interact with the Aztec Network using the project. Its functions cover:

Account Management

  • Connect to Metamask
  • Register / Login an Aztec account

Aztec Interactions

  • Deposit ETH onto Aztec
  • Swap ETH to wstETH through Aztec
  • Log balances on Aztec

Development with the Aztec SDK

  • Initialize the Aztec SDK
  • Log the Aztec SDK
  • Log known bridges on the Aztec Testnet

See App.tsx for more details.

Getting Started

Prerequisites

Commands

yarn

Install dependencies.

yarn start

Runs the app in development mode.

Open http://localhost:3000 to view it in the browser. When you make changes, the page will automatically reload.

yarn build

Builds the app for production to the build folder.

It bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

See the deployment section of the Create React App documentation for more details.

yarn devnet

Starts a local ethereum network, deploys the aztec contracts and runs a local aztec sequencer.

If you run into this error:

Rollup not found for merkle root: 232e56c264cf93ac066440084035de11fa28faf0e2e76bc806c501d988a1b055

try clearing your site data in the Application tab of developer tools.

clear data

Learn More

To learn more about the Aztec SDK, visit the Aztec Docs.

To learn more about React, visit the React documentation.

aztec-frontend-boilerplate's People

Contributors

brunny-eth avatar critesjosh avatar joss-aztec avatar maddiaa0 avatar pietergreyling avatar savio-sou avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

aztec-frontend-boilerplate's Issues

hello guys I am getting this issue any one can guide me please

/node_modules/@aztec/sdk/dest
i am getting error in this file
ERROR(Module not found: Can't resolve '@aztec/barretenberg/account_id')
and my IDE is also showing error on 2 files
1)/node_modules/@aztec/sdk/tsconfig.json
this is the path of that file and error is showing on that line
"references": [{ "path": "../barretenberg.js/tsconfig.dest.json" }, { "path": "../blockchain/tsconfig.dest.json" }],
2)/node_modules/@aztec/blockchain/tsconfig.dest.json
this is the path of that file and error is showing on that line
"references": [{ "path": "../barretenberg.js/tsconfig.dest.json" }],

Failed to compile , typeorm module not found, can't resolve

getting this error

and that the compile failed "Failed to compile."

./node_modules/typeorm/browser/driver/react-native/ReactNativeDriver.js
Module not found: Can't resolve 'react-native-sqlite-storage' in '/home/adrian/Documents/dev/aztec/aztec-frontend-boilerplate/node_modules/typeorm/browser/driver/react-native'

typeorm is in yarn.lock

grep typeorm *
grep: node_modules: Is a directory
grep: public: Is a directory
grep: src: Is a directory
yarn.lock: typeorm "0.2.38"
yarn.lock:[email protected]:
yarn.lock: resolved "https://registry.yarnpkg.com/typeorm/-/typeorm-0.2.38.tgz#2af08079919f6ab04cd17017f9faa2c8d5cd566f"

tried yarn add react-native-sqlite-storage

but that still gives similar error for typeorm and react-native

web console in browser shows:
./node_modules/react-native-sqlite-storage/lib/sqlite.core.js
Module not found: Can't resolve 'react-native' in '... aztec-frontend-boilerplate/node_modules/react-native-sqlite-storage/lib' index.js:1

Uncaught ReferenceError: process is not defined
4043 blank line 343323 > injectedScript:2
r blank line 343323 > injectedScript:2
8048 blank line 343323 > injectedScript:2
r blank line 343323 > injectedScript:2
8641 blank line 343323 > injectedScript:2
r blank line 343323 > injectedScript:2
blank line 343323 > injectedScript:2
blank line 343323 > injectedScript:2
blank line 343323 > injectedScript:2
onload index.js:1
be index.js:1
de index.js:1
handleErrors webpackHotDevClient.js:169
onmessage webpackHotDevClient.js:213
js webpackHotDevClient.js:195
Webpack 7

Copying aztec-connect.wasm and web_worker.js

Hey guys, I'm trying to setup sdk 2.1.81 in my vue.js app but I'm getting error that file https://localhost:8080/aztec-connect.wasm is not found. I've found that in this web app, this file is copied from node modules directory to build folder. Do I need to do the same and copy these files via CopyWebpackPlugin? There's like another 4 packages that are required to successfully do this, according to boilerplate example code. I would love to avoid doing all this stuff...

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.