@qubic-js/react-native-alice

react-native-alice

rn plugin for alice

Installation

npm install react-native-alice

Usage

 createAccount(
    password: string,
    reqPayload: string,
    wsUrl: string,
    ticket: string
  ): Promise<string>;
  verifyPassword(
    password: string,
    reqPayload: string,
    wsUrl: string,
    ticket: string
  ): Promise<string>;
  reshare(
    oldPassword: string,
    newPassword: string,
    reqPayload: string,
    wsUrl: string,
    ticket: string
  ): Promise<string>;
  signMessage(
    password: string,
    reqPayload: string,
    wsUrl: string,
    ticket: string
  ): Promise<string>;
  signTypedData(
    password: string,
    reqPayload: string,
    wsUrl: string,
    ticket: string
  ): Promise<string>;
  signTransaction(
    password: string,
    reqPayload: string,
    wsUrl: string,
    ticket: string
  ): Promise<string>;

  echo(text: string): Promise<string>;
  getGoBenchmarkResult(): string;
  generateSafePrime(size: number): string;

Development

Prepare Go environment

git config --global url.“ssh://[e-mail]/”.insteadOf “https://github.maicoin.site/”

Update ~/.zshrc

This including Go path and Android path

export GOPRIVATE=github.maicoin.site # tell GO this is private repo
export ANDROID_HOME=$HOME/Library/Android/sdk
export ANDROID_NDK_HOME=$HOME/Library/Android/sdk/ndk/29.0.13113456
export JAVA_HOME=$(/usr/libexec/java_home -v17)
export PATH="$JAVA_HOME/bin:$PATH"
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$HOME/go/bin

Install go mod

go mod tidy

# Install gomobile cli and init
make install-tools

Prepare gemfile for ios example

cd example/ios
bundle install

When go file changed

# Release
./build-go-lib.mjs

# Debug
./build-go-lib.mjs -d

# android
# it will rebuild including alice go library
yarn example android

# ios
# need to manually pod install
cd example/ios
pod install
cd ..
yarn example ios

Try in on simulator

You can see typescript file changed immediately. And the log from Go lang will show up in Android Studio

yarn example android
yarn example ios

假設要加一個新方法

1. 先在 src/NativeAlice.ts 定好 Spec

yarn example ios/android 時， turbo module 會確認是否有實作

echo(text: string): Promise<string>;

2. android/ios native 實作

android/src/java/AliceModule.kt

  override fun echo(message: String, promise: Promise) {
    try {
      val result = AliceGoLib.echo(message)
      promise.resolve(result)
    } catch (e: Exception) {
      promise.reject("ECHO_ERROR", e)
    }
  }

ios/Alice.mm

- (void)echo:(NSString *)text
   resolve:(RCTPromiseResolveBlock)resolve
   reject:(RCTPromiseRejectBlock)reject
{
  NSError *error = nil;
  NSString *result = AliceGoLibEcho(text, &error);
  if (error != nil) {
    reject(@"echo_error", error.localizedDescription, error);
  } else {
    resolve(result);
  }
}

3. 在 go 新增方法

// 原始方法
func echo(s string) (string, error) {
  return fmt.Sprintf("Echo: %s", s), nil
}

// 首字大寫，代表是 public function
func Echo(s string) (string, error) {
  // aliceUtils.SafeExecute 可以讓 panic 作為 error 傳去上一層
  return aliceUtils.SafeExecute(func() (string, error) {
    return echo(s)
  })
}

4. 編譯 go 成為 library，會生成 aar 和 xcframework

./build-go-lib.mjs

5. 確認是否正常運作

# android 直接會用新的 aar
yarn example android

# ios 需要手動再安裝一次
cd example/ios
pod install
cd ../..
yarn example ios

如果有改動 go 的話照上面方法執行， 只有改 kotlin/objectv 的話，就執行 yarn example android/ios， 只有 src/ts 的話，因為有 hot reload 機制不需要重 build， 也可以只執行 yarn example start，然後手動啟用模擬器之前已 build 過的 app

Release

1. When .go files changed, execute ./build-prod.sh before release.
2. type yarn release to update version tag and publish to npm

Use Go as library in kotlin

classDiagram
  class JavaScript {
    +React Native App
    +Calls Native Modules
  }

  class ReactNativePlugin {
    +@ReactMethod functions
    +Bridge Layer
  }

  class Kotlin {
    +Native Android Code
    +Can call Go via JNI or include Go logic
  }

  class Go {
    +WASM (JSC only)
  }

  JavaScript --> ReactNativePlugin : uses
  ReactNativePlugin --> Kotlin : implemented in
  Kotlin --> Go : calls (via JNI or shared lib)

Use Go as WASM

classDiagram
  class JavaScript {
    +React Native App
    +Uses WebAssembly
    +Calls Plugin bridge
  }

  class ReactNativePlugin {
    +Bridge to native layer
    +Handles file loading / FS
  }

  class WebAssembly {
    +Compiled from Go (.wasm)
    +Runs in JSC (not Hermes)
  }

  class Go {
    +Go source code
    +Built with GOARCH=wasm
  }

  JavaScript --> ReactNativePlugin : uses
  ReactNativePlugin --> WebAssembly : loads & instantiates
  WebAssembly --> JavaScript : exports functions
  Go --> WebAssembly : compiled to .wasm

go install

// put this in ~/.zshrc

export GOPRIVATE=github.maicoin.site

git config --global url.“ssh://[e-mail]/”.insteadOf “https://github.maicoin.site/”

ios 安裝要求 new architecture, expo config 要啟用才能正常

  [
    'expo-build-properties',
    {
      ios: {
        newArchEnabled: true,
      },
    },
  ],

txt sign android 模擬器比較

android 目前 v8 - js 版本

HTSS sign duration: 3435 ms
HTSS sign duration: 3475 ms
HTSS sign duration: 3007 ms
HTSS sign duration: 2486 ms
HTSS sign duration: 2934 ms

android react-native-alice go

HTSS sign duration: 3335 ms
HTSS sign duration: 4161 ms
HTSS sign duration: 3282 ms
HTSS sign duration: 3239 ms
HTSS sign duration: 3067 ms

txt sign ios 模擬器比較

ios 目前 jsc - js 版本

HTSS sign duration: 3053 ms HTSS sign duration: 3095 ms HTSS sign duration: 3651 ms HTSS sign duration: 2696 ms HTSS sign duration: 3272 ms

ios react-native-alice go

HTSS sign duration: 2777 ms HTSS sign duration: 1966 ms HTSS sign duration: 3245 ms HTSS sign duration: 2971 ms HTSS sign duration: 3081 ms

TODO

• web wasm
  • where to put source wasm file
  • how to ship *.wasm and wasm_exec.js
• support node