Your first dApp on EthOS

If you don't know what EthOS is or if you're looking for a review in depth, make sure to have a look at my previous article: Ξ ethOS: your wallet as a mobile phone

If you don't have an EthOS phone, you can use an image in a simulator on your development device

EthOS provides a handy SDK to use directly in your app the crypto wallet integrated to the operating system. With a clear and concise documentation it makes mobile development for crypto even faster and simpler than a traditional application.

In this article, I'll walk you through all the steps to create EthLove, a simple EthOS application that lets the user make a donation with just a finger tap.

Table of contents

1. Set up your development environment
   1. Using expo
   2. Using react-native bare project
2. Let's dive in
   1. A simple donation app
   2. Check for the system wallet
   3. Request user to send a transaction
   4. That's it
3. Conclusion

1. Set up your development environment

1. Using expo

EthOS phone setup

In order to install the necessary Expo application, you'll need first to install Google Play services.

Now you can go on the Play Store and look for Expo.

Make sure to connect the EthOS phone to the same network than your development device.

Project initialization

npx create-expo-app app-name --template
cd app-name
npm start

At this point, you should see a qrcode displayed on your command line. All you have to do is to open the expo app you just downloaded on your EthOS phone and flash it. Make sure that your EthOS device is connected to the same local network as your development machine.

ℹ️ On my side, expo had connection issues. If you know how I could make it work, feel free to add a comment I'd more than happy to update this article with your solution.

Therefore I have opted to go for a react-native bare project so I could install my app via USB cable directly.

2. Using react-native bare project

EthOS phone setup

First, you need to enable debugging over USB. Go to Settings -> About phone and tap 7 times on the Build number

Now go to Settings -> System -> Developer options to enable "USB debugging".

Project initialization

1. Set up a react-native project
2. npx install-expo-modules
3. npx expo install expo-walletsdk
4. npx react-native run-android

🛠️ Troubleshooting

I came across this error when building:

Execution failed for task ':expo-walletsdk:compileDebugKotlin'.
> 'compileDebugJavaWithJavac' task (current target is 17) and 'compileDebugKotlin' task (current target is 11) jvm target compatibility should be set to the same Java version.

The fix:

1. Start Android Studio and click on open project
2. Select the android/ folder at the root of your react-native project
3. Go in the project navigation panel and open Gradle Scripts -> build.gradle (Module : expo-walletsdk)
4. Replace all occurrences of JavaVersion.VERSION_11 by JavaVersion.VERSION_17

Now you can close Android Studio, go back to your react-native project with your favorite IDE and rerun the command:

npx react-native run-android

2. Let's dive in

1. A simple donation app

For this example, we will create an application showing a list of (more or less) famous people in the ecosystem.
By a simple tap on one of them, the user will be prompted by the system wallet to make an ETH donation on the Base network.

2. Check for the system wallet

The SDK comes with a handy method to know if the application is installed on EthOS or any OS with a system wallet.
At the root of your application, you can call this method and either display the rest of the application logic (Main.tsx) or a screen explaining to the user that the application is incompatible with his operating system (Incompatible.tsx)

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
} from 'react-native';

import {hasSystemWallet} from 'expo-walletsdk';

import Main from './components/Main';
import Incompatible from './components/Incompatible';

function App(): React.JSX.Element {
  return (
    <SafeAreaView>
      <StatusBar />
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        { hasSystemWallet() ? <Main /> : <Incompatible /> }
      </ScrollView>
    </SafeAreaView>
  );
}

export default App;

3. Request user to send a transaction

To request the user for sending a transaction with their wallet, you'll need to use sendTransaction:

import * as ExpoWalletsdk from 'expo-walletsdk';

...

const transaction = {
  to: recipient,
  value: '500000000000000', // 0.0005 ETH
  chainId: 8453, 
  chainRPCUrl: 'https://mainnet.base.org'
};
ExpoWalletsdk.sendTransaction(transaction);

When ExpoWalletsdk.sendTransaction(transaction) is called, the OS will display to send a transaction with a hard coded value of 0.0005 ETH.

The very nice thing about the SDK is that the system wallet will take care of informing the user about the network and let them change accordingly if they are not currently connected to it:

Here is the full implementation with JSX and onPress event:

function Main(): React.JSX.Element {
  const makeDonation = (recipient: Address) => () => {
    console.log(`Donating to ${recipient}`);

    const transaction = {
      to: recipient,
      value: '500000000000000', // 0.0005 ETH
      chainId: 8453, 
      chainRPCUrl: 'https://mainnet.base.org'
    };
    var txHash: TxResult = ExpoWalletsdk.sendTransaction(transaction);
    if (txHash === "decline")
      ToastAndroid.show('Donnation canceled', ToastAndroid.CENTER);
    else
      ToastAndroid.show(`Success: ${txHash}`, ToastAndroid.CENTER);
  };

  return (
    <View>
      <Header />
      {donorRecipients.map((recipient, i) => (
        <Pressable
        key={i}
        style={({pressed}) => pressed ? [s.button, s.pressed] : s.button}
        onPress={makeDonation(recipient.address)}
        >
          <Text style={s.name}>{recipient.name}</Text>
          <Text style={s.description}>{recipient.description}</Text>
        </Pressable>
      ))}
    </View>
  );
}

You can consult the full code of Main.tsx here.

4. That's it

Easy, right? :)

You can find the full code on this repository.

I kept it very simple and minimalist on purpose so you can use it as a boilerplate to start coding on EthOS.

Feel free to reuse or submit a PR, here are few examples on how the app could be improved:

• Add an amount selector for the donation value
• Add the possibility to add and remove donor recipients
• Add a network selector so the user can donate on different chains
• Add a messaging system using the method signMessage
• The limit is your imagination :)

3. Conclusion

With EthOS the security and UI/UX aspect of the wallet management is offloaded to the OS. This is a very nice separation of concerns that makes it simpler for the app development and hardness user security.

Acknowledgment to MrSnowball for lending the device that made this tutorial possible.