Home

Awesome

BattleZips-Noir Frontend

<p align="center"> <img width="250" height="250" src="aztec_logo.png"> <img width="250" height="250" src="battlezips.png"> </p> <br/> <br/>

Description

This repo demonstrates how the proofs for BattleZips-Noir can be generated and verified in a React.js application.

This repo was created with create-react-app. As of react-scripts 5, core node modules are not automatically polyfilled. Since the Aztec backend packages are native to node, we have to override the configuration to ensure that missing modules do not result in breaking changes. This can be done by ejecting the configuration files or by using a speciazlized npm package to override without ejecting.

Two popular packages used for overriding configuration are react-app-rewired and craco (create-react-app configuration override). For this implemenation craco was chosen to proceed. Additionally an instrumental piece in getting this frontend implementation to work was the example provided by hello-noir-ui .

Video Series

Coming soon...

Get In Touch

Check out the following links to provide feedback or ask questions!

Related repositories

Setup

  1. Clone repo <br/>
git clone https://github.com/Ian-Bright/BattleZips-Noir-frontend
  1. Install dependenices with using npm or yarn
yarn
---
npm install

  1. Copy relevant files over from BattleZips-Noir and paste in public directory

    Web Assembly
    • aztec_backend_bg.wasm
    • barretenberg.wasm
    • noir_wasm_bg.wasm
    Proof related files
    • boardAcir.buf
    • boardCircuit.buf
    • shotAcir.buf
    • shotCircuit.buf

  2. Add .env file and add BattleshipGame contract

REACT_APP_BATTLESHIP_GAME_CONTRACT_MUMBAI=0xe65c09d82572201684972562062619a2a56e6671
  1. Start app
yarn start
---
npm start