Reference chat GUI implementation for the WhatsDapp Secure Messaging Library.

• Requirements
• Install
  • Installing the WhatsDapp library
  • Installing GUI-Prototype (whatsdapp-ui-example)
• Registration and Login
• Troubleshooting
  • You cannot write to yourself
  • Burned Identities
  • Reset Local Storage
  • High CPU Usage on macOS
  • Foreman on macOS
• Sources

• node v12+
• npm v6+

Also you need a mnemonic with some tDash (v0.18). Herefore you can go through these steps:

1. Getting a HD-Wallet with mnemonic you
   • either follow this tutorial: Create and Fund a Wallet.
   • or easily create and manage wallet with EvoWallet or Chrome Wallet.
2. Get some tDash from faucet and wait a few minutes until it's mined.

WhatsDapp creates and tops up an Identity and optionally registers a DPNS name for you automatically in the registration tab. But you can use your existing ones or create on your own by following these tutorials.

1. Register an Identity and
2. Topup an Identity's Balance: So you will be able to write to the Dash Drive.
3. Register a Name for an Identity: This way you can be found by others in the messenger.

Run the install-script

sh install.sh

and start messenger:

npm run dev

If this won't work choose the following long way ;)

Clone WhatsDapp-Lib:

git submodule update --init

Install:

cd whatsdapp-lib
npm ci
npm rebuild grpc --runtime=electron --target=v10.1.4
npm run dist

In case of error redo easily with:

rm -rf node_modules dist && \
    npm ci && \
    npm rebuild grpc --runtime=electron --target=v10.1.4 && \
    npm run dist

(We will get rid of the Electron dependency in WhatsDapp-lib soon.)

Install:

npm ci
npm ci grpc --runtime=electron --target=v10.1.4

In case of error redo easily with:

rm -rf node_modules && \
    npm ci && \
    npm ci grpc --runtime=electron --target=v10.1.4

Run messeger:

npm run dev

When React code is changed while the app is running, the app updates immediatly after saving. Chrome Dev Tools can be opened by pressing F12 (check if enableDevTools = true in electron-starter.js).

Sometimes the node process is not killed properly, consumes CPU and blocks used port. Find it by ps aux | grep node and kill corresponding PID.

On first start use the Registration tab and type in your mnemonic.

Show registration screenshot

If you want to use an existing identity check "Custom Identity Address" and type in identity. If this identity already has a DPNS name leave "Username" empty.

If you want WhatsDapp to create an identity for you just type in your wish-DPNS name in "Username". WhatsDapp will follow the Dash tutorials mentioned above and creates an identity, tops up with 1000 duffs and registers the DPNS name.

The "Display Name" can be same as your DPNS but doesn't have to. This is your WhatsDapp internal name. It will be used for displaying contacts/messages.

The "Password" is used to encrypt your local storage. So the next time you use WhatsDapp, you'll only have to type this password to login.

Show login screenshot

Be patient... Your WhatsDapp profile will be created and uploaded containing your key-bundles for session-setup.

You'll be forwarded to a message window. Here you can search for a DPNS name and add to your conversations (receiver also needs to upload a WhatsDapp profile in first place, too).

Now start secure chatting over the blockchain ;) Be patient again... Sent messages will be shown after they arrived at the blockchain implying success.

Show chat screenshot

If you're interested in, you can find your encrypted messages with the Dash Platform Explorer. You can find our contract containing receiverId, timestamps and content of your messages. The content is a base64 encoded JSON-object containing signal-encrypted message.

If you want to chat with yourself, just don't ;) Actually it will crash for decryption reasons.

Also it is not possible to run the application multiple times on the same system because it needs one exclusive port. You need to use two different OS's.

At this point if some trouble occurs, easiest way to get rid of it is to create a new Dash identity and DPNS name. Try another login with this new identity. But before you also should reset local storage.

For using another login just remove your local storage folder.

Linux: "~/.config/whatsdapp-ui-example"

macOs: "~/Library/Application Support/whatsdapp-ui-example"

Windows: "%AppData%/whatsdapp-ui-example"

It occurs that Electron and consequently WhatsDapp consumes one CPU to 100% even if nothing seems to happen. This leads back to file-watching issue of node.js. A better notification-service is implemented in FSEvents.

In WhatsDapp-UI folder run:

npm install fsevents

A bit more info here.

There is a issue on foreman for macOS, more information here. To fix this, go into package.json and replace line

"foreman": "^2.0.0",

by

"@heroku/foreman": "^2.0.0",

Based on:

• https://github.com/mui-org/material-ui
• https://github.com/facebook/react
• https://github.com/electron/electron
• https://github.com/csepulv/electron-with-create-react-app

Helped us understanding:

• https://github.com/pusher/electron-desktop-chat