使用React Native创建以太坊钱包,实现转账等功能

之前想用React Native开发一版以太坊钱包app,但在生成账户那块遇见了问题,没有crypto等nodejs包,react native是运行在JavaScriptCore环境里面,是没有buffer, crypto 跟 stream这些库的,所以为了解决,就跟同事开发了基于golang的web3go,然后使用gomoble工具编译成ios需要的framework以及android需要的jar aar,完美解决问题

  • 演示
dapp-demo-1.png
dapp-demo-2.png
  • 安装web3go
git clone https://github.com/bcl-chain/web3.go.git
  • 使用gomobile编译成framework,jar,aar
// generate framework
gomobile bind -target=ios ./github.com/bcl-chain/web3.go/mobile

// generate arr jar
gomobile bind -target=android ./github.com/bcl-chain/web3.go/mobile
  • 把生成的包link到原生app里面
link-web3go.png

andoir-getbalence.png
  • 下载ETH本地测试工具ganache-cli
gan-cli.png
  • 安装依赖
yarn
react-native run-android
react-native run-ios
  • getBalance代码分析
// IOS
RCT_EXPORT_METHOD(getBalance:
                  (NSString*) address:
                  (RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject){
  // ip地址
  Web3goEthereumClient* client = Web3goNewEthereumClient(nodeIP, nil);
  Web3goContext* ctx = Web3goNewContext();
  // 账户地址
  Web3goAddress* address1 = Web3goNewAddressFromHex(address, nil);
  @try {
    Web3goBigInt* a = [client getBalanceAt:ctx account:address1 number:-1 error:nil];
    NSString* ammount = [a getString:10];
    NSLog(@"%@", ammount);
    resolve(ammount);
  } @catch (NSError *exception) {
    NSLog(@"NSError: %@", exception);
    reject(@"NSError: %@", @"There were no events", exception);
  } @finally {
    NSLog(@"finally");
  }
  
}

// android
@ReactMethod
public void getBalance(String address, Promise promise) {
    try {
      web3go.EthereumClient client = Web3go.newEthereumClient(nodeIP);
      web3go.Context ctx = Web3go.newContext();
      web3go.Address address1 = Web3go.newAddressFromHex(address);
      web3go.BigInt a = client.getBalanceAt(ctx, address1, -1);
      String ammout = a.getString(10);
      promise.resolve(ammout);
    } catch (Exception e) {
      promise.reject(e.getMessage());
    }
}

// react-native
async getBalance() {
    try {
      var ammount = await NativeModules.Web3go.getBalance(this.state.defGaAddress);
      this.setState({
        gaAmmount: ammount
      })
    } catch (e) {
      console.error(e);
    }
}
 

如果有用,给个start

web3go

React-Native-Dapp

你可能感兴趣的:(使用React Native创建以太坊钱包,实现转账等功能)