spacemeshos / smapp

Spacemesh App (Smesher + Wallet) 🏦📊

 

Smapp - the Spacemesh App 🏦📊

Smesher UI + Wallet

This repo includes the source code for the Spacemesh App. A desktop application for Windows 10, OS X, and Linux which includes a Smesher and a basic wallet. The main artifacts of this repo are the app and an app installer for all supported platforms.

Important note: Currently, Smapp does not support Hardware Wallets. This feature will be implemented in the future, but until then we highly recommend using SMCLI to generate the necessary keys for your ledger setup.

Also, the Wallet-only mode is temporarily disabled.

Installation & Quick Start

Download the latest Smapp release from Spacemesh Website.

For the installation guide, follow this link.

Building from Source

Smapp is written in TypeScript and bundled within Electron. You need Node.js (v12) and Yarn to build from the source. Make sure they are available on your system.

1. Clone the repository
2. Read node/use-version file: this is the version of go-spacemesh that should be used
3. Download the specified version from Go-spacemesh Releases
4. Put the binary in either node/windows, node/mac, or node/linux folder, depending on your platform
5. Run yarn to install dependencies
6. Run yarn start to start the application in development mode

To build and pack the application:

1. Run yarn build
2. Run one of the commands depending on your platform:
   • yarn package-win
   • yarn package-mac set env variable DONT_SIGN_APP=1 to skip notarizing the app,
   • yarn package-linux

Arguments

Smapp can be started with additional arguments:

• --discovery (string) e.g. ./Spacemesh --discovery=http://localhost:8000/networks.json Specifies custom url to a custom networks list. It makes it possible for Smesher to connect to custom networks. Env variable alias: DISCOVERY_URL
• --pprof-server (boolean) e.g. ./Spacemesh --pprof-server It makes Smapp runs go-spacemesh with the --pprof-server flag. Env variable alias: PPROF_SERVER
• --test-mode (boolean) e.g. ./Spacemesh --test-mode It runs Smapp and the Node under the hood in standalone mode, making it much easier to test and debug the application. Env variable alias: TEST_MODE
• --check-interval (number) e.g. ./Spacemesh --check-interval=60 to check for updates every 60 seconds Smapp checks every N seconds for the software updates and new config. If a new config arrived — it automatically merges it with the custom User settings and restarts the Node. Default: 3600 seconds, or every hour

To run the application in dev mode with the same behavior set env variables instead:

PPROF_SERVER=1 DISCOVERY_URL=http://localhost:8000/networks.json yarn start

Environment Variables

Connect to custom networks:

DISCOVERY_URL=http://localhost:8000/networks.json yarn start

Alias for --discovery argument.

Deprecated

To run the application against DevNet you have to set URL to the config file to env variable DEV_NET_URL:

DEV_NET_URL=https://.../config.json yarn start

To run the application against DevNet in the Wallet Only mode you have to also set the URL (or list of URLs separated by commas) to GRPC API provider to env variable DEV_NET_REMOTE_API:

export DEV_NET_REMOTE_API=https://192.168.0.1:31030
export DEV_NET_URL=https://.../config.json
yarn start

Profiling Node

PPROF_SERVER=1 yarn start

Alias for --pprof-server argument.

Building Artifacts in CI

Smapp uses two workflows. Both of them build an application for all supported platforms: Windows, macOS, and Linux.

• PR builds Triggered by open Pull Request and any further changes on the branch. For testing and development purposes only. Unsigned and can not be trusted. Artifacts and links a temporary. Links to artifacts posted by the bot in comments.
• Release builds Triggered by tag v*. Public releases of Smapp. Signed for macOS and Windows platforms. Artifacts and links should be permanent. CI prepares a draft release with links to the artifacts.

---

• Roadmap & product details
• Platform documentation
• Spacemesh improvement proposals

Run the Spacemesh app on Ubuntu

We recommend choosing AppImage as it is not possible to embed certain features in the .deb package. For the Ubuntu platform Electron has an issue with setup, if you want to run it on the Ubuntu > 22.04 platform, please provide --no-sandbox flag

command: /opt/Spacemesh/spacemesh_app --no-sandbox

---

Troubleshooting

The first thing to check if you encounter any issues with Smapp

• Check the Release Notes on GitHub - you might find there the information about the known issues and workarounds to them.
• We recommend visiting https://status.spacemesh.io/, to see if Spacemesh Team is already working on this issue.
• Check the Smapp version -it should always come from the official source and be the latest released package, update it if needed.
• If you have the latest version, restart Smapp and check if the issue remains.
• The GPU drivers should be up to date; please check if you have the latest release. For NVIDIA, it should be version 525 (currently).
• Check our Discord chats, the issue might have been discussed there.

Additionally:

Windows:

• The following directories should be removed in case of reinstallation from scratch:

  C:\Users\{USERNAME}\AppData\Local\Programs\Spacemesh or your installation path

  C:\Users\{USERNAME}\AppData\Roaming\Spacemesh

• Remove the PoS data directory if you want to remove/recreate PoS data:

  C:\Users\{USERNAME}\post\{GENESIS_ID} or your PoS directory path

  Where {GENESIS_ID} is first 8 chars from the HexString. Eg 7c8cef2b

• The latest Visual C++ Redist should be installed

• Check the Firewall settings, and amend them if needed

Linux:

• The following directories should be removed in case of reinstallation from scratch:

  /opt/Spacemesh (deb) or ~/Applications/Spacemesh-... (AppImage) or your installation path

  ~/.config/Spacemesh

• Remove the PoS data directory if you want to remove/recreate PoS data:

  ~/post/{GENESIS_ID} or your PoS directory path

  Where {GENESIS_ID} is first 8 chars from the HexString. Eg 7c8cef2b

• We recommend using AppImage as some features cannot be embedded into a .deb package.

• If you are using Ubuntu, check the OS version. We recommend at least 22.04

• Glibc and other libraries should be up to date

macOS:

• The following directories should be removed in case of reinstallation from scratch:

  /Applications/Spacemesh or your installation path

  ~/Library/Application\ Support/Spacemesh

• Remove the PoS data directory if you want to remove/recreate PoS data:

  ~/post/{GENESIS_ID} or your PoS directory path

  Where {GENESIS_ID} is first 8 chars from the HexString. Eg 7c8cef2b

• Check if the incoming connections aren’t blocked for go-spacemesh

CLI-tools

These tools are created for debugging and development purposes. They are not supposed to be used in the production (on real and valuable data). So use it at your own risk.

yarn script:composeTx

Compose the transaction (and sign if needed).

yarn script:decomposeTx

Decompose the transaction (byte array) to the human-readable structure (JSON)

yarn script:readSecrets

Read secrets from the wallet file. For example, if you need to export private keys or mnemonics.

yarn script:addViewAccount

Add a public key to the wallet file. It makes it possible to track someone else transactions and rewards. Pay attention that Smapp does not fully support such kinds of accounts. So in case you try to sign a message or publish a transaction — unhandled exceptions will occur.

smapp's Issues

App connectivity

Check gRPC protocol or alternative for communication with full node

Allow reaching Local Node tab without unlocking wallet

Add close button to welcome screens
After closing welcome screen navigate to Local Node tab
Attempt to navigate to other tab will redirect to unlock/create wallet screen
Add logout button below settings tab button

Login flow - welcome page

Welcome page to include:
Background sliding image setup
center card component
dot slider component

Change temporary key derivation function with new one

Expose it through WASM, update WASM repo and Wallet app

Create network screen ui

Send coins - transaction details UI and logic

Wallet Backup - 12 words backup confirmation screen

UI and logic for confirmation of 12 words backup (drag and drop user interaction)

Desktop Notifications

The app should use desktop notifications to notify the user on important events to keep him informed and in-control and to encourage him to perform the key app interactions we want him to do such as perform his first transaction and update his app and full node software.

1. Setup Complete Notification
   Rational: keep the user informed and in control of the one-time setup process.
   Icon: something positive. An achievement.
   Click action: Open local node status screen where user sees that his node finished setup and is participating in mining.
   Copy: “Your full node setup is complete! You are now participating in the Spacemesh network…!”

2. Mining Award Notification
   Rational: Communicate main benefit. Encourage user to open the app - check their balance and perform a transaction. Without using the tap or getting coins from someone else - this notification means user earned coin and can transact with them.
   Icon: Coins & happiness
   Click action: open main wallet screen where user sees his updated balance
   Copy: “You earned 5 Spacemesh Coins for your participation...”

3. Update Available Notification
   Action: Click to the testnet guide install page where user can install the updated app installer for his platform
   Copy: “An important Spacemesh App update is available - please install it. Click here for more info...”.
   Tech notes: we will need a method on the gateway http/json service to provide the latest testnet software semantic version + metadata so client can figure out when to display this.
   Electron notifications support: https://electronjs.org/docs/tutorial/notifications

Implementation notes: notifications can be implemented with a temp icon and copy which will be provided as well.

4. Outgoing transaction confirmed (or failed)
   A transaction the user initiated was confirmed. Click to view it in the transaction log.

5. New incoming transaction
   A coin transfer transaction was confirmed on the mesh - crediting the user's default account. Click to open the transaction log view.

Add service in Electron to read/write files and connect to React

Contact tab

Create UI and add logic of creating new contact in send transaction screen and in tab itself. Add logic for searching for contact

POST setup: status message when volume doesn't have enough space

When a volume without sufficient free space to setup POST (and to allocate to SM data) is selected we need to show the user a status message telling him about this fact. Something like:

Not enough free disk space. Spacemesh requires a minimum 200GB of free disk space. You have only 115GB of free disk space on {volume name}. More info... (a link to POST setup help on the web)

Should be warning-style orange to stand out of the text.

Steps to reproduce: try setting up post when you have less than 150GB free on your drive.

Autostart local node

Motivation: we'd like to maximize the number of full node on the network and users do occasionally restart their computers. We'd like to avoid a situation where a user installs the app, starts a node, restarts his computer and forgets to start his node again. This is going to be quite common.

Solution:

• By default, after the OS starts up, start the app if and only if a local full node was setup on the system, and was running at least once. The app main window can start minimized and not full size but the important part is to that the full-node starts again so they user doesn't have to remember to start it
• User should be able to easily turn off this feature via the app settings screen so they are always in control to turn this off. Vast majority of users never change default settings but for those who care we'll provide this feature

Test and validate full tx flow against local node

Add library for signing tx (ed25519)

Backup Wallet Flow

Create UI and logic for wallet backup as file and as 12 words paper backup

Local Node - retrieve logs and status from local node

Connect wallet app to local node api and consume incoming data for UI reflection

Create Wallet/Unlock Wallet/Restore Wallet Flows

Show friendly volume names in post setup

On OS X we need to show the friendly volume names. e.g. Macintosh HD and not the logical names e.g. /dev/disk1 - normal non-dev users have no ideas what the 2nd name means...
On windows it is fine to show c:\, d:\ etc... as this is what is displayed in windows explorer. On linux, I guess users know their volume names so /dev/disk1 is fine unless there's a user defined volume name label that we can use...

Connect login flow to redux

Login and Create wallet flow should be synced with redux to preserve a global state for authenticated wallet.

Acceptance Criteria

1. Login info should pass to global state:
   • wallet data
   • setup full node selection (yes/no)
2. Data should be received by the wallet app on the authenticated side.

Wallet Backup - create initial screen

Settings tab

Create UI and add logic to change current wallet name, color, account/accounts name, backup, navigation to privacy, security, term and service agreement, user guide. Also add logic of creating new wallet and switching between existing wallets

Local Node - Setup Page Logic

Retrieve logical disk's names and free space on each disk

Send coins initial state screen

Transaction flow - transactions tab

Create UI and add infinite loading list of transactions connected to reducer

Project infra

Send Coins - transaction summary UI and logic

Create scripts for packing app for Windows/Linux/MacOs

Add scripts to package.json and also to travis.yml for validation

Send Coins Flow

Add ability to create new network

Add new network - add params such as IP address, port, network name and save to local storage for persistency

Local Node Flow

Overview
As a wallet user, I would like to setup full node, check the status of a full node setup and view the node log.

Acceptance Criteria

1. User can access the full node page by clicking on the "Full Node" tab in the side menu.
2. Full node page shows node status, node setup status and node log.

Network Tab

Create screen with list of all available networks and ability to create new network and switch between existing networks

Wallet backup - file backup logic

Expand existing api from React to Electron to allow wallet backup as file at user's selected location

Restore wallet from 12 words backup or encrypted file

User can choose whether he wants to unlock wallet file (in some other then default location) or if passphrase is also lost - restore wallet seed and addresses from 12 words backup

Login Flow - Encrypt Wallet Page (no actual encryption yet)

ACs:

1. have ability to get password and compare to other password field
2. No actual encryption for now

Connect redux actions to network requests

Link to help system in modal screens

We need to have a big '?' icon in every modal screen which expects user input so users can get help if they get stuck in an interaction. For example - the modal screens in the first-time user experience, this unlock wallet modal screen, etc...
We have it in some mocks next to the 'x' button on the top right.
Clicking on it should open the relevant help page in the testnet guide in the user's default web-browser.

wrong volume free space displayed

I have ~390GB free on my main OS X drive yet the app shows me I only have 115GB and so can't setup POST. Also - dropdown shows a bad volume with NAN free space. Recommend you filter out volumes that can't report on their free space from the drop-down altogether as these are likely volumes that the user can't setup post on anyhow.

Modal Component

Create a generic modal component with SM styling

Receive coins screen

Setup a library for generating QR codes from strings
Create screen UI and connect it to flow

Transactions Flow

Create Transaction screen UI in transactions tab and latest transactions component in wallet tab. Save transactions to wallet file for initial persistency. Connect flow to sending/receiving transactions to mesh. Add logic to sort transactions by type. Transaction should be displayed as infinite loading list

Dropdown component

Create a generic dropdown component

Acceptance Criteria:

1. Dropdown component will accept a list of items and return the selected item with each selection
2. Support being disabled and also certain items in the list disabled
3. Have the ability to set a default selection
4. Adhere to SM design scheme

Transactions flow - add latest transactions component to wallet overview screen

Create component and connect it to transactions reducer

Connect to Travis CI

Persist wallet data to local storage

Overview
Data needs to persist to local storage for easing the user's re-entry to wallet.
In order for the data to persist to local storage, a local storage service needs to be implemented.

Acceptance Criteria

1. Wallet data is saved in local storage
2. Wallet data is erased upon logout
3. Wallet data persists when logging back in to wallet

Local Node - Communication between wallet app to local node app

Create infra for communication channel through Electron to standalone local node app
Send setup params to local node
Retrieve logs and status from local node and pass them to wallet app
Connect UI to incoming data

Local Node Setup Page UI

Overview
When navigating to "Full Node" page, user that has not yet set up his or her full node, will see the "Full Node Setup" page. This page has two modes, setting and loading. Setting mode has the configuration selection for the full node and a prompt to start setup. Loading mode has the spinning indicator and log etc. When full node setup is done, user lands in the "Full Node" page.

Acceptance Criteria

1. User can navigate to the Full Node page using the side bar
2. Based on the full node setup status user will either see the "Full Node Setup" or "Full Node" pages
3. If lands in "Full Node Setup" page, then the modes are as described in overview above.
4. Once setup is complete, user is able to navigate between Setup and Full Node pages using the links (see images)

Local Node Setup Progress Page UI

Overview
When navigating to "Full Node" page, user that has set up his or her full node, will see the "Full Node" page. This page shows the full node log, status etc (see image).

Acceptance Criteria

1. User can navigate to the Full Node page using the side bar
2. Based on the full node setup status user will either see the "Full Node Setup" or "Full Node" pages
3. User is able to navigate between Setup and Full Node pages using the links (see images)

Add switching networks logic

Local node - check if local node already running, if not - start the local node app

Wallet Backup - create 12 words backup screen and logic

Get the mnemonic from seed, translate it back to strings and display in UI