Your first dApp on EthOS
Published: 2024-05-13 11:41:42

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 ](https://dev.to/cromatikap/ks-ethos-review-35el)

If you don't have an EthOS phone, you can use [an image in a simulator on your development device](https://ethosmobile.readme.io/docs/how-to-use-ethos-in-an-emulator)

---

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](https://ethosmobile.readme.io/docs/expo-system-wallet-support) it makes mobile development for crypto even faster and simpler than a traditional application.

![A picture of the app running on a physical EthOS phone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rsaz6ut8cj418ws2wcf.png)

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-set-up-your-development-environment)
  1. [Using expo](#1-using-expo)
  2. [Using react-native bare project](#2-using-reactnative-bare-project)
2. [Let's dive in](#2-lets-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](#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.

![Google Services installation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5yb5rsiey1xvf0k0iwm.png)

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

![Expo installation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75pjm021xq9qy5ni72e8.png)

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

#### Project initialization

```sh
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.

> ![Connection timed out](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xn5lnm810cvfhmj0nn6k.png)

> 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](https://reactnative.dev/docs/running-on-device#1-enable-debugging-over-usb). Go to __Settings -> About phone__ and tap 7 times on the `Build number`

![developer mode activation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbxq7tkkx62p6k7y9ko2.png)

Now go to __Settings -> System -> Developer options__ to enable "USB debugging".

![enable "USB debugging"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xr2uezktxe3p3p70jkh.png)

#### Project initialization

1. [Set up a react-native project](https://reactnative.dev/docs/environment-setup)
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:
```sh
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:
```sh
npx react-native run-android
```

## 2. Let's dive in

![ExpoWalletsdk module interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onm9z2yiz9qwps33sjei.png)

### 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](https://www.base.org/).

### 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`)

```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`:

```typescript
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:

![app screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjoq38y7m2xne7yu46sg.png)

---

Here is the full implementation with JSX and `onPress` event:

```tsx
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](https://github.com/cromatikap/ethOS-react-app/blob/main/src/components/Main.tsx).

### 4. That's it

Easy, right? :)

You can find the full code on [this repository](https://github.com/cromatikap/ethOS-react-app/tree/main).

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](https://en.wikipedia.org/wiki/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.