Skip to content

Commit

Permalink
Update docs with adding a new halo2 circuit in 'mopro-wam' (#292)
Browse files Browse the repository at this point in the history
* docs: added 'mopro-wasm' page in v0.1.0 and iOS configuration in prerequisites page

* docs: Updated adding new circuit for mopro-wasm

* docs: Updated setup pages with using mopro cli instead of based on 'Rust setup' page

* fix: Using mopro cli for updating circuit for web wasm bindings

* fix: updated follows review feedback

* docs: updated v0.1.0 version docs with next(latest updates)

* fix: sync sidebar updated with latest doc
  • Loading branch information
sifnoc authored Jan 16, 2025
1 parent 777d69f commit e424efd
Show file tree
Hide file tree
Showing 22 changed files with 623 additions and 120 deletions.
10 changes: 6 additions & 4 deletions docs/docs/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Getting started

This tutorial guides you through building a static library with the Circom/Halo2 adapter for Android and iOS and creating example templates for mobile development.
This tutorial guides you through building a static library with the Circom/Halo2 adapter for Android, iOS and Web and creating example templates for mobile development.

## 0. Prerequisites

Expand Down Expand Up @@ -28,7 +28,7 @@ mopro init
## 3. Build bindings

Navigate to your project directory. (e.g. `cd mopro-example-app`) <br/>
Build bindings for specific targets (iOS, Android).
Build bindings for specific targets (iOS, Android, Web).

```sh
mopro build
Expand Down Expand Up @@ -58,7 +58,9 @@ For iOS:
open ios/MoproApp.xcodeproj
```

For Android
For Android:
```sh
open android -a Android\ Studio
```
```

For Web:
7 changes: 7 additions & 0 deletions docs/docs/prerequisites.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ Depending on what platforms and adapters you use, there are several prerequisite
- [Xcode](https://developer.apple.com/xcode/)
- Android
- [Android Studio](https://developer.android.com/studio)
- [JDK(Java Development Kit)](https://www.oracle.com/java/technologies/downloads)
- Also see [configuration](#android-configuration) below
- Web(WASM)
- [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/)
Expand All @@ -22,6 +23,12 @@ Depending on what platforms and adapters you use, there are several prerequisite
- Halo2
- Pre-generated SRS (Structured Reference String) file, typically used as the universal setup for your circuits

## iOS configuration

Ensure that the command-line tools path is correctly set in Xcode. You can check this by navigating to Xcode > Settings > Locations.

![xcode - settings - location](/img/xcode-setting.png)

## Android configuration

Some additional configuration is required for Android.
Expand Down
4 changes: 3 additions & 1 deletion docs/docs/setup/android-setup.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# Android Setup

After you've completed the [Rust setup](docs/setup/rust-setup.md) you should be able to run `cargo run --bin android`. This will create a new folder called `MoproAndroidBindings`. It should look like the structure
Before starting, ensure you have completed ["Getting Started - 3. Mopro build"](/docs/getting-started.md#3-build-bindings) and selected the android platform during the build process. This step uses the mopro cli to generate the required bindings for your android project.

After successfully completing the build, a folder named **MoproAndroidBindings** will appear in your project directory. The structure of this folder should look like this:

```sh
MoproAndroidBindings
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/setup/flutter-setup.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Flutter Setup

After completing the [Rust setup](rust-setup.md) and setting up either [iOS setup](ios-setup.md) or [Android setup](android-setup.md), you're ready to create a cross-platform project using [Flutter](https://flutter.dev/). <br/>
Using ["Getting Started - 3. Mopro build"](/docs/getting-started.md#3-build-bindings) guide, you can generate the "MoproAndroidBindings" and "MoproIOSBindings" for the iOS and android platforms in your project folder, you're ready to create a cross-platform project using [Flutter](https://flutter.dev/). <br/>
Flutter is a framework for building natively compiled, multi-platform applications from a single codebase.

## 1. Prerequisites
Expand Down
4 changes: 3 additions & 1 deletion docs/docs/setup/ios-setup.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@

# iOS Setup

Once you've completed the [Rust setup](docs/setup/rust-setup.md) you should be able to run `cargo run --bin ios`. This will create a new folder called `MoproiOSBindings`. Inside this folder there should be a file named `mopro.swift` and a folder named `MoproBindings.xcframework`.
Before starting, ensure you have completed ["Getting Started - 3. Mopro build"](/docs/getting-started.md#3-build-bindings) with selecting **iOS** platform. This step enables you to use the mopro cli to generate the required bindings for your iOS project.

Once the iOS bindings have been built successfully, you will find a folder named **MoproiOSBindings** in your project directory. Inside **MoproiOSBindings** folder there should be a file named `mopro.swift` and a folder named `MoproBindings.xcframework`.

## Demo video of this tutorial

Expand Down
64 changes: 43 additions & 21 deletions docs/docs/setup/react-native-setup.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# React Native Setup

After completing the [Rust setup](rust-setup.md) and setting up either [iOS setup](ios-setup.md) or [Android setup](android-setup.md), you're ready to create a cross-platform project using [React Native](https://reactnative.dev/). <br/>
Using ["Getting Started - 3. Mopro build"](/docs/getting-started.md#3-build-bindings) guide, you can generate the "MoproAndroidBindings" and "MoproIOSBindings" for the iOS and android platforms in your project folder. These bindings allow you to create a cross-platform project using [React Native](https://reactnative.dev/).<br/>

React Native is a _JavaScript_ framework that enables developers to build native apps for multiple platforms with a single codebase.

In this tutorial, you will learn how to create a native Mopro module on both Android and iOS simulators. <br/>
Expand All @@ -10,9 +11,30 @@ In this tutorial, you will learn how to create a native Mopro module on both And
<img src="/img/react-native-ios.png" alt="Second Image" width="250"/>
</div>

You have 2 options to get started with a mopro React Native project:
You have 3 options to get started with a mopro React Native project:

## Option 1: Use Mopro Cli

The easiest way to set up your project is by using the mopro cli **create** command.<br/>This command helps you quickly add templates, similar to the next option, but with fewer manual steps.

```sh
mopro-example-app $ mopro create
```

Assuming you’ve successfully built the **iOS** and **android** bindings: `MoproAndroidBindings` and `MoproIOSBindings` in your project folder, the mopro cli stored some parameters into the `Config.toml` file and reads them during the create command. It will also allow you to select the **react-native** template, as shown below:

```
? Create template ›
ios
android
web - Require binding
flutter
❯ react-native
```

## Option 2: Clone the Repository and Import the Bindings

### Option 1: Clone the Repository and Import the Bindings
This option is a more manual compared to [Option 1](#option-1-use-mopro-cli). You can clone a pre-configured repository and manually import the generated bindings into your React Native project.

1. Clone the [zkmopro/react-native-app](https://github.com/zkmopro/react-native-app) repository

Expand Down Expand Up @@ -40,11 +62,11 @@ You have 2 options to get started with a mopro React Native project:

4. Update mopro bindings in [Android](#4-2-include-mopro-bindings-in-the-native-android-module) and [iOS](#51-use-a-framework) native module

### Option 2: Follow the Tutorial and Build a React Native Module
## Option 3: Follow the Tutorial and Build a React Native Module

If you prefer a more hands-on approach and wish to understand how everything works, you can follow the tutorial to build a React Native module from scratch.

## 1. Initializing a New React Native Project or Using an Existing One
### 1. Initializing a New React Native Project or Using an Existing One

- Getting started with React Native: [Official documentation](https://reactnative.dev/docs/environment-setup)

Expand All @@ -65,7 +87,7 @@ If you prefer a more hands-on approach and wish to understand how everything wor
```
for Android emulators.

## 2. Creating a Native Module
### 2. Creating a Native Module

- Creating a native module by the command

Expand All @@ -80,7 +102,7 @@ If you prefer a more hands-on approach and wish to understand how everything wor
[Wrap third-party native libraries](https://docs.expo.dev/modules/third-party-library/)
:::

## 3. Define an API
### 3. Define an API

- Define the types for the native module. Add the following types in the file:

Expand Down Expand Up @@ -122,17 +144,17 @@ If you prefer a more hands-on approach and wish to understand how everything wor
}
```
## 4. Implement the module on Android
### 4. Implement the module on Android
### 4-1. Add dependency for [jna](https://github.com/java-native-access/jna) in the file `build.gradle`.
#### 4-1. Add dependency for [jna](https://github.com/java-native-access/jna) in the file `build.gradle`.
```kotlin title="/modules/mopro/android/build.gradle"
dependencies {
implementation("net.java.dev.jna:jna:5.13.0@aar")
}
```
### 4-2. Include Mopro bindings in the native Android module
#### 4-2. Include Mopro bindings in the native Android module
- Get the `MoproAndroidBindings` from `cargo run --bin android`.
:::info
Expand Down Expand Up @@ -165,7 +187,7 @@ dependencies {
└── libuniffi_mopro.so
```
### 4-3. Create convertible types for Javascript library with kotlin.
#### 4-3. Create convertible types for Javascript library with kotlin.
It is a better way to represent a JavaScript object with the native type safety.
Expand Down Expand Up @@ -230,7 +252,7 @@ class Result : Record {
Ref: [Records](https://docs.expo.dev/modules/module-api/#records)
:::
### 4-4. Create native module implementation in `MoproModule.kt`
#### 4-4. Create native module implementation in `MoproModule.kt`
```kotlin title="/modules/mopro/android/src/main/java/expo/modules/mopro/MoproModule.kt"
package expo.modules.mopro
Expand Down Expand Up @@ -284,9 +306,9 @@ class MoproModule : Module() {
}
```
## 5. Implement the module on iOS
### 5. Implement the module on iOS
### 5.1 Use a framework
#### 5.1 Use a framework
- Get the `MoproiOSBindings` from `cargo run --bin ios`.
:::info
Expand All @@ -302,7 +324,7 @@ class MoproModule : Module() {
...
```
### 5.2 Create convertible types for Javascript library with swift.
#### 5.2 Create convertible types for Javascript library with swift.
- Create a new file called `MoproType.swift` in the following folder: `modules/mopro/ios`
Expand Down Expand Up @@ -346,7 +368,7 @@ class MoproModule : Module() {
}
```
### 5-3. Create native module implementation in `MoproModule.swift`
#### 5-3. Create native module implementation in `MoproModule.swift`
```swift title="/modules/mopro/ios/MoproModule.swift"
import ExpoModulesCore
Expand Down Expand Up @@ -416,17 +438,17 @@ public class MoproModule: Module {
}
```
## 6. Run the app
### 6. Run the app
### 6.1 Install expo-asset
#### 6.1 Install expo-asset
Install `expo-asset` to use assets.
```sh
npx expo install expo-asset
```
### 6.2 Check the expo command
#### 6.2 Check the expo command
The `android` and `ios` script should be as follows:
Expand All @@ -443,7 +465,7 @@ The `android` and `ios` script should be as follows:
}
```
### 6.3 Create an example view
#### 6.3 Create an example view
This view enables users to generate `multiplier2` proofs and the public signals.
Expand Down Expand Up @@ -573,7 +595,7 @@ const styles = StyleSheet.create({
});
```
### 6.4 Run in simulators
#### 6.4 Run in simulators
- **Android**
Expand Down
Loading

0 comments on commit e424efd

Please sign in to comment.