Merge branch 'save-url-image-2' of github.com:balena-io/etcher into save-url-image-2

Rework system & large drives handling logic
Change-type: patch Changelog-entry: Rework system & large drives handling logic Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
2025-11-02 06:58:31 +00:00 · 2020-10-19 12:54:34 +02:00 · 2020-10-19 12:22:17 +02:00 · 2020-10-14 13:12:11 +02:00 · 2020-10-14 13:12:11 +02:00 · 2020-10-14 13:12:11 +02:00
237 changed files with 23360 additions and 36420 deletions
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -3,4 +3,4 @@
 - **Image flashed:** 
 - **Do you see any meaningful error information in the DevTools?** 

-<!-- You can open DevTools by pressing `Ctrl+Shift+I` (`Ctrl+Alt+I` for Etcher before v1.3.x), or `Cmd+Alt+I` if you're on Mac OS. -->
+<!-- You can open DevTools by pressing `Ctrl+Shift+I` (`Ctrl+Alt+I` for Etcher before v1.3.x), or `Cmd+Opt+I` if you're on macOS. -->
--- a/.gitignore
+++ b/.gitignore
@@ -47,3 +47,7 @@ node_modules
 # OSX files

 .DS_Store
+
+# VSCode files
+
+.vscode
--- a/.resinci.json
+++ b/.resinci.json
@@ -1,6 +1,6 @@
 {
  "electron": {
-    "npm_version": "6.7.0",
+    "npm_version": "6.14.5",
    "dependencies": {
      "linux": [
        "libudev-dev",
@@ -9,41 +9,24 @@
        "libgtk-3-0",
        "libatk-bridge2.0-0",
        "libdbus-1-3",
+        "libgbm1",
        "libc6"
      ]
    },
    "builder": {
      "appId": "io.balena.etcher",
-      "copyright": "Copyright 2016-2019 Balena Ltd",
+      "copyright": "Copyright 2016-2020 Balena Ltd",
      "productName": "balenaEtcher",
-      "nodeGypRebuild": true,
+      "nodeGypRebuild": false,
      "afterPack": "./afterPack.js",
+      "asar": false,
      "files": [
-        "build/Release/elevator.node",
        "generated",
-        "lib/shared/catalina-sudo/sudo-askpass.osascript.js",
-        "lib/gui/app/index.html",
-        "lib/gui/css/*.css",
-        "lib/gui/css/fonts/*.woff2",
-        "lib/gui/assets/*.svg",
-        "assets/icon.png",
-        "!node_modules/**/**",
-        "node_modules/**/*.js",
-        "node_modules/**/*.json",
-        "node_modules/**/*.node",
-        "node_modules/**/*.dll",
-        "node_modules/node-raspberrypi-usbboot/blobs/**",
-        "node_modules/flexboxgrid/dist/flexboxgrid.css",
-        "node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff",
-        "node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff",
-        "node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff",
-        "node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff",
-        "node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff",
-        "node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
+        "lib/shared/catalina-sudo/sudo-askpass.osascript.js"
      ],
+      "beforeBuild": "./beforeBuild.js",
      "afterSign": "./afterSignHook.js",
      "mac": {
-        "asar": false,
        "category": "public.app-category.developer-tools",
        "hardenedRuntime": true,
        "entitlements": "entitlements.mac.plist",
@@ -74,10 +57,17 @@
        "synopsis": "balenaEtcher is a powerful OS image flasher built with web technologies to ensure flashing an SDCard or USB drive is a pleasant and safe experience. It protects you from accidentally writing to your hard-drives, ensures every byte of data was written correctly and much more."
      },
      "deb": {
+        "compression": "bzip2",
        "priority": "optional",
        "depends": [
          "polkit-1-auth-agent | policykit-1-gnome | polkit-kde-1"
        ]
+      },
+      "protocols": {
+        "name": "etcher",
+        "schemes": [
+          "etcher"
+        ]
      }
    }
  }
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@@ -1,17 +0,0 @@
-# sass-lint config generated by make-sass-lint-config v0.1.2
-
-files:
-  include: lib/gui/scss/**/*.scss
-options:
-  formatter: stylish
-  merge-default-rules: false
-rules:
-  no-css-comments: 0
-  no-important: 0
-  no-qualifying-elements: 0
-  placeholder-in-extend: 0
-  property-sort-order: 0
-  quotes:
-    - 1
-    - style: double
-
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,308 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).

+# v1.5.109
+## (2020-09-14)
+
+* Workaround elevation bug on Windows when the username contains an ampersand [Alexis Svinartchouk]
+
+# v1.5.108
+## (2020-09-10)
+
+* Fix content not loading when the app path contains special characters [Alexis Svinartchouk]
+
+# v1.5.107
+## (2020-09-04)
+
+* Re-enable ext partitions trimming on 32 bit Windows [Alexis Svinartchouk]
+* Rework system & large drives handling logic [Lorenzo Alberto Maria Ambrosi]
+* Reword macOS Catalina askpass message [Lorenzo Alberto Maria Ambrosi]
+* Add clone-drive workflow [Lorenzo Alberto Maria Ambrosi]
+
+# v1.5.106
+## (2020-08-27)
+
+* Disable ext partitions trimming on 32 bit windows until it is fixed [Alexis Svinartchouk]
+* Fix opening zip files from servers accepting Range headers [Alexis Svinartchouk]
+
+# v1.5.105
+## (2020-08-25)
+
+* Update etcher-sdk to 4.1.26 [Alexis Svinartchouk]
+* URL selector cancel button cancels ongoing url selection [Alexis Svinartchouk]
+* Spinner for URL selector modal [Alexis Svinartchouk]
+
+# v1.5.104
+## (2020-08-20)
+
+* Fix writing config file [Alexis Svinartchouk]
+* Update electron to v9.2.1 [Alexis Svinartchouk]
+
+# v1.5.103
+## (2020-08-18)
+
+* Update rendition  to ^17 [Alexis Svinartchouk]
+* Update electron to 9.2.0 [Alexis Svinartchouk]
+* Update etcher-sdk to ^4.1.23 [Alexis Svinartchouk]
+* Move linting and testing into package.json [Alexis Svinartchouk]
+* Set module: es2015 in tsconfig.json [Alexis Svinartchouk]
+* Replace native elevator with sudo-prompt on windows [Alexis Svinartchouk]
+* Don't import WeakMap polyfill in deep-map-keys [Alexis Svinartchouk]
+* Don't use lodash in child-writer.js [Alexis Svinartchouk]
+* Optimize svgs [Alexis Svinartchouk]
+* User regular stream in lzma-native instead of readable-stream [Alexis Svinartchouk]
+* Remove Bluebird [Alexis Svinartchouk]
+
+# v1.5.102
+## (2020-07-27)
+
+* Fix flashing truncated images, fix flashing large dmgs [Alexis Svinartchouk]
+* Electron 9.1.1 [Alexis Svinartchouk]
+* Remove bluebird from main process, reduce lodash usage [Alexis Svinartchouk]
+* Centralize imports in child-writer [Alexis Svinartchouk]
+* Split main process and child-writer js files [Alexis Svinartchouk]
+* Stop using request, replace it with already used axios [Alexis Svinartchouk]
+* Remove font awesome unused icons from the generated bundle [Alexis Svinartchouk]
+* Remove no longer used .sass-lint.yml [Alexis Svinartchouk]
+* Use tslib [Alexis Svinartchouk]
+* Use strict typescript compiler option [Alexis Svinartchouk]
+* Update rendition to ^16.1.1 [Alexis Svinartchouk]
+
+# v1.5.101
+## (2020-07-09)
+
+* Resize modal to show content appropriately [Lorenzo Alberto Maria Ambrosi]
+* Update etcher-sdk to v4.1.16 [Lorenzo Alberto Maria Ambrosi]
+* Convert sass to plain css [Lorenzo Alberto Maria Ambrosi]
+* Remove unused scss [Lorenzo Alberto Maria Ambrosi]
+* Remove unused warning in settings [Lorenzo Alberto Maria Ambrosi]
+* Refactor UI without bootstrap & flexboxgrid [Lorenzo Alberto Maria Ambrosi]
+* Restyle modals [Lorenzo Alberto Maria Ambrosi]
+* Remove bootstrap & flexboxgrid [Lorenzo Alberto Maria Ambrosi]
+* Rework and move flashing view elements [Lorenzo Alberto Maria Ambrosi]
+* Refactor UI grid to use rendition [Lorenzo Alberto Maria Ambrosi]
+
+# v1.5.100
+## (2020-06-22)
+
+* Update partitioninfo to 5.3.5 [Alexis Svinartchouk]
+* Add .vhd to the list of supported extensions, allow opening any file [Alexis Svinartchouk]
+* Update mocha to v8.0.1 [Alexis Svinartchouk]
+* Update electron-notarize to v1.0.0 [Alexis Svinartchouk]
+* Update electron to v9.0.4 [Alexis Svinartchouk]
+* Update etcher-sdk to v4.1.15 [Alexis Svinartchouk]
+* Sticky header in target selection table [Alexis Svinartchouk]
+* Update rendition to 15.2.1 [Alexis Svinartchouk]
+* Fix source-selector image height [Lorenzo Alberto Maria Ambrosi]
+* Update rendition to v15.0.0 [Lorenzo Alberto Maria Ambrosi]
+* Merge unsafe mode with new target selector [Lorenzo Alberto Maria Ambrosi]
+* Rework target selector modal [Lorenzo Alberto Maria Ambrosi]
+
+# v1.5.99
+## (2020-06-12)
+
+* Update node-raspberrypi-usbboot to 0.2.8 [Alexis Svinartchouk]
+* Update electron to 9.0.3 [Alexis Svinartchouk]
+* Inline all svgs [Alexis Svinartchouk]
+
+# v1.5.98
+## (2020-06-10)
+
+* Use between 2 and 256MiB for buffering depending on the number of drives [Alexis Svinartchouk]
+* Check that argument is an url or a regular file before opening [Alexis Svinartchouk]
+* Update etcher-sdk to ^4.1.13 [Alexis Svinartchouk]
+
+# v1.5.97
+## (2020-06-08)
+
+* Update electron to v9.0.2 [Alexis Svinartchouk]
+* Fix flash from url on windows [Alexis Svinartchouk]
+* Avoid random access in http sources [Alexis Svinartchouk]
+* Update etcher-sdk to ^4.1.8 [Alexis Svinartchouk]
+* Read image path from arguments, register `etcher://...` protocol [Alexis Svinartchouk]
+* Update etcher-sdk to ^4.1.6 [Alexis Svinartchouk]
+* Fix sudo-prompt promisification [Alexis Svinartchouk]
+* Allow skipping notarization when building package (dev) [Lorenzo Alberto Maria Ambrosi]
+
+# v1.5.96
+## (2020-06-03)
+
+* Fix ia32 builds for windows [Alexis Svinartchouk]
+* Remove writing speed from finish screen [Alexis Svinartchouk]
+* Add effective speed in flash results [Alexis Svinartchouk]
+* Update progress bar style [Alexis Svinartchouk]
+* Change font to SourceSansPro and fix hover color [Alexis Svinartchouk]
+* Update rendition to ^14.13.0 [Alexis Svinartchouk]
+* Remove unused styles [Alexis Svinartchouk]
+
+# v1.5.95
+## (2020-06-01)
+
+* spectron: Make tests pass on Windows Docker containers [Juan Cruz Viotti]
+
+# v1.5.94
+## (2020-05-27)
+
+* Stop checking file extensions [Alexis Svinartchouk]
+* Fix flash from url (broken in 1.5.92) [Alexis Svinartchouk]
+* Update etcher-sdk to ^4.1.4 [Alexis Svinartchouk]
+
+# v1.5.93
+## (2020-05-25)
+
+* Update electron-builder to v22.6.1 [Alexis Svinartchouk]
+* Strip out comments from generated code [Alexis Svinartchouk]
+* Update electron to v9.0.0 [Alexis Svinartchouk]
+
+# v1.5.92
+## (2020-05-22)
+
+* Use electron.app.getAppPath() instead of reading it from argv in catalina-sudo [Alexis Svinartchouk]
+* Disable asar packing on all platforms [Alexis Svinartchouk]
+* Remove unneeded fortawesome from main.scss [Alexis Svinartchouk]
+* Remove unneeded font formats [Alexis Svinartchouk]
+* Webpack everything, reduce package size [Alexis Svinartchouk]
+
+# v1.5.91
+## (2020-05-21)
+
+* Minor fix - Init isSourceDrive param in correct place [Lorenzo Alberto Maria Ambrosi]
+* Fix undefined image from DriveCompatibilityWarning [Rob Evans]
+
+# v1.5.90
+## (2020-05-20)
+
+* Update leds behaviour [Alexis Svinartchouk]
+
+# v1.5.89
+## (2020-05-13)
+
+* Fix drive selector modal padding [Alexis Svinartchouk]
+* Update all dependencies minor versions [Alexis Svinartchouk]
+* Update @types/node 12.12.24 -> 12.12.39 [Alexis Svinartchouk]
+* Update ts-loader 6 -> 7 [Alexis Svinartchouk]
+* Update sinon 8 -> 9 [Alexis Svinartchouk]
+* Update node-gyp 3 -> 6 [Alexis Svinartchouk]
+* Update lint-staged 9 -> 10 [Alexis Svinartchouk]
+* Update husky 3 -> 4 [Alexis Svinartchouk]
+* Remove no longer used html-loader dev dependency [Alexis Svinartchouk]
+* Update electron-notarize 0.1.1 -> 0.3.0 [Alexis Svinartchouk]
+* Remove no longer used chalk dev dependency [Alexis Svinartchouk]
+* Update @types/tmp 0.1.0 -> 0.2.0 [Alexis Svinartchouk]
+* Update @types/sinon 7 -> 9 [Alexis Svinartchouk]
+* Update @types/semver 6 -> 7 [Alexis Svinartchouk]
+* Update @types/mocha 5 -> 7 [Alexis Svinartchouk]
+
+# v1.5.88
+## (2020-05-12)
+
+* Update roboto-fontface 0.9.0 -> 0.10.0 [Alexis Svinartchouk]
+* Update rendition 12 -> 14, styled-system and styled-components 4 -> 5 [Alexis Svinartchouk]
+* Update electron-updater 4.0.6 -> 4.3.1 [Alexis Svinartchouk]
+* Update redux 3 -> 4 [Alexis Svinartchouk]
+* Update debug 3 -> 4 [Alexis Svinartchouk]
+* Update semver 5 -> 7 [Alexis Svinartchouk]
+* Update tmp 0.1.0 -> 0.2.1 [Alexis Svinartchouk]
+* Update uuid v3 -> v8 [Alexis Svinartchouk]
+
+# v1.5.87
+## (2020-05-12)
+
+* Update etcher-sdk to ^4.1.3 to fix issues with some bz2 files [Alexis Svinartchouk]
+
+# v1.5.86
+## (2020-05-06)
+
+* Fix theme warnings [Alexis Svinartchouk]
+
+# v1.5.85
+## (2020-05-05)
+
+* Prefer balena-etcher to etcher-bin on Arch Linux [Alexis Svinartchouk]
+
+# v1.5.84
+## (2020-05-04)
+
+* Including Arch / Manjaro install instructions [Tom]
+* Fix notification icon path [Alexis Svinartchouk]
+
+# v1.5.83
+## (2020-04-30)
+
+* Decompress images before flashing, remove trim setting, trim ext partitions [Alexis Svinartchouk]
+
+# v1.5.82
+## (2020-04-24)
+
+* Allow http/https only for Flash from URL [Lorenzo Alberto Maria Ambrosi]
+* Add generic error's message [Lorenzo Alberto Maria Ambrosi]
+* Refactor buttons style [Lorenzo Alberto Maria Ambrosi]
+* Add flash from url workflow [Lorenzo Alberto Maria Ambrosi]
+* Add staging percentage for v1.5.81 [Lorenzo Alberto Maria Ambrosi]
+* Trigger update for v1.5.81 [Lorenzo Alberto Maria Ambrosi]
+
+# v1.5.81
+## (2020-04-14)
+
+* Add average speed in flash results [Lorenzo Alberto Maria Ambrosi]
+* docs: Update macOS drive recovery command [Wilson de Farias]
+* Update etcher-sdk to use direct IO [Alexis Svinartchouk]
+
+# v1.5.80
+## (2020-03-24)
+
+* Use zoomFactor to scale contents in fullscreen mode [Lorenzo Alberto Maria Ambrosi]
+* Update electron to v7.1.14 [Alexis Svinartchouk]
+* Fix sass files path for lint-sass [Alexis Svinartchouk]
+
+# v1.5.79
+## (2020-02-20)
+
+* Remove "Download the React DevTools for a better development experience" message [Alexis Svinartchouk]
+* Fix error when launching from terminal when installed via apt. [Alois Klink]
+
+# v1.5.78
+## (2020-02-19)
+
+* Update drivelist to 8.0.10 to fix parsing lsblk --pairs [Alexis Svinartchouk]
+
+# v1.5.77
+## (2020-02-17)
+
+* Fix error message not being shown on write error [Alexis Svinartchouk]
+* The RGBLed module has been moved to a separate repository [Alexis Svinartchouk]
+
+# v1.5.76
+## (2020-02-05)
+
+* Prefix temp permissions script name [Lorenzo Alberto Maria Ambrosi]
+* Fix image drop zone, remove react-dropzone dependency [Alexis Svinartchouk]
+* Update etcher-sdk to ^2.0.17 [Alexis Svinartchouk]
+
+# v1.5.75
+## (2020-02-05)
+
+* Initialize leds object map [Omar López]
+
+# v1.5.74
+## (2020-02-04)
+
+* Etcher pro leds feature [Alexis Svinartchouk]
+* Compress deb package with bzip instead of xz [Alexis Svinartchouk]
+* Update electron to 7.1.11 [Alexis Svinartchouk]
+* Sort devices by device path on Linux [Alexis Svinartchouk]
+
+# v1.5.73
+## (2020-01-28)
+
+* Update electron to v7.1.10 [Alexis Svinartchouk]
+
+# v1.5.72
+## (2020-01-27)
+
+* Remove no longer used angular svg-icon component [Alexis Svinartchouk]
+* Remove no longer used closestUnit angular filter [Alexis Svinartchouk]
+
 # v1.5.71
 ## (2020-01-14)

--- a/78
+++ b/78
@@ -3,18 +3,12 @@
 # ---------------------------------------------------------------------

 RESIN_SCRIPTS ?= ./scripts/resin
-export NPM_VERSION ?= 6.7.0
+export NPM_VERSION ?= 6.14.5
 S3_BUCKET = artifacts.ci.balena-cloud.com

 # This directory will be completely deleted by the `clean` rule
 BUILD_DIRECTORY ?= dist

-# See http://stackoverflow.com/a/20763842/1641422
-BUILD_DIRECTORY_PARENT = $(dir $(BUILD_DIRECTORY))
-ifeq ($(wildcard $(BUILD_DIRECTORY_PARENT).),)
-$(error $(BUILD_DIRECTORY_PARENT) does not exist)
-endif
-
 BUILD_TEMPORARY_DIRECTORY = $(BUILD_DIRECTORY)/.tmp

 $(BUILD_DIRECTORY):
@@ -23,9 +17,7 @@ $(BUILD_DIRECTORY):
 $(BUILD_TEMPORARY_DIRECTORY): | $(BUILD_DIRECTORY)
 	mkdir $@

-# See https://stackoverflow.com/a/13468229/1641422
 SHELL := /bin/bash
-PATH := $(shell pwd)/node_modules/.bin:$(PATH)

 # ---------------------------------------------------------------------
 # Operating system and architecture detection
@@ -93,7 +85,7 @@ TARGET_ARCH ?= $(HOST_ARCH)
 # ---------------------------------------------------------------------
 # Electron
 # ---------------------------------------------------------------------
-electron-develop: | $(BUILD_TEMPORARY_DIRECTORY)
+electron-develop:
 	$(RESIN_SCRIPTS)/electron/install.sh \
 		-b $(shell pwd) \
 		-r $(TARGET_ARCH) \
@@ -114,8 +106,7 @@ electron-build: assets/dmg/background.tiff | $(BUILD_TEMPORARY_DIRECTORY)
 		-r $(TARGET_ARCH) \
 		-s $(PLATFORM) \
 		-v production \
-		-n $(BUILD_TEMPORARY_DIRECTORY)/npm \
-		-w $(BUILD_TEMPORARY_DIRECTORY)
+		-n $(BUILD_TEMPORARY_DIRECTORY)/npm

 # ---------------------------------------------------------------------
 # Phony targets
@@ -125,69 +116,20 @@ TARGETS = \
 	help \
 	info \
 	lint \
-	lint-js \
-	lint-sass \
-	lint-cpp \
-	lint-html \
-	lint-spell \
-	test-spectron \
-	test-gui \
 	test \
-	sanity-checks \
 	clean \
 	distclean \
-	webpack \
 	electron-develop \
 	electron-test \
 	electron-build

-webpack:
-	./node_modules/.bin/webpack
-
 .PHONY: $(TARGETS)

-sass:
-	npm rebuild node-sass
-	node-sass lib/gui/app/scss/main.scss > lib/gui/css/main.css
+lint: 
+	npm run lint

-lint-ts:
-	resin-lint --typescript lib
-
-lint-js:
-	eslint --ignore-pattern scripts/resin/**/*.js lib tests scripts bin webpack.config.js
-
-lint-sass:
-	sass-lint lib/gui/scss
-
-lint-cpp:
-	cpplint --recursive src
-
-lint-html:
-	node scripts/html-lint.js
-
-lint-spell:
-	codespell \
-		--dictionary - \
-		--dictionary dictionary.txt \
-		--skip *.svg *.gz,*.bz2,*.xz,*.zip,*.img,*.dmg,*.iso,*.rpi-sdcard,*.wic,.DS_Store,*.dtb,*.dtbo,*.dat,*.elf,*.bin,*.foo,xz-without-extension \
-		lib tests docs Makefile *.md LICENSE
-
-lint: lint-ts lint-js lint-sass lint-cpp lint-html lint-spell
-
-MOCHA_OPTIONS=--recursive --reporter spec --require ts-node/register
-
-# See https://github.com/electron/spectron/issues/127
-ETCHER_SPECTRON_ENTRYPOINT ?= $(shell node -e 'console.log(require("electron"))')
-test-spectron:
-	ETCHER_SPECTRON_ENTRYPOINT="$(ETCHER_SPECTRON_ENTRYPOINT)" mocha $(MOCHA_OPTIONS) tests/spectron
-
-test-gui:
-	electron-mocha $(MOCHA_OPTIONS) --full-trace --no-sandbox --renderer tests/gui
-
-test-sdk:
-	electron-mocha $(MOCHA_OPTIONS) --full-trace --no-sandbox tests/shared
-
-test: test-gui test-sdk test-spectron
+test:
+	npm run test

 help:
 	@echo "Available targets: $(TARGETS)"
@@ -197,17 +139,11 @@ info:
 	@echo "Host arch           : $(HOST_ARCH)"
 	@echo "Target arch         : $(TARGET_ARCH)"

-sanity-checks:
-	./scripts/ci/ensure-staged-sass.sh
-	./scripts/ci/ensure-npm-dependencies-compatibility.sh
-	./scripts/ci/ensure-all-file-extensions-in-gitattributes.sh
-
 clean:
 	rm -rf $(BUILD_DIRECTORY)

 distclean: clean
 	rm -rf node_modules
-	rm -rf build
 	rm -rf dist
 	rm -rf generated
 	rm -rf $(BUILD_TEMPORARY_DIRECTORY)
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ installers for all supported operating systems.
 2. Trust Bintray.com's GPG key:

    ```sh
-    sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 379CE192D401AB61
+    sudo apt-key adv --keyserver hkps://keyserver.ubuntu.com:443 --recv-keys 379CE192D401AB61
    ```

 3. Update and install:
@@ -59,6 +59,21 @@ sudo apt-get remove balena-etcher-electron
 sudo rm /etc/apt/sources.list.d/balena-etcher.list
 sudo apt-get update
 ```
+
+##### OpenSUSE LEAP & Tumbleweed install
+
+```sh
+sudo zypper ar https://balena.io/etcher/static/etcher-rpm.repo
+sudo zypper ref
+sudo zypper in balena-etcher-electron
+```
+
+##### Uninstall
+
+```sh
+sudo zypper rm balena-etcher-electron
+```
+
 #### Redhat (RHEL) and Fedora based Package Repository (GNU/Linux x86/x64)

 1. Add Etcher rpm repository:
@@ -105,6 +120,21 @@ sudo eopkg it etcher
 sudo eopkg rm etcher
 ```

+#### Arch Linux / Manjaro (GNU/Linux x64)
+
+Etcher is offered through the Arch User Repository and can be installed on both Manjaro and Arch systems. You can compile it from the source code in this repository using [`balena-etcher`](https://aur.archlinux.org/packages/balena-etcher/). The following example uses a common AUR helper to install the latest release:
+
+
+```sh
+yay -S balena-etcher
+```
+
+##### Uninstall
+
+```sh
+yay -R balena-etcher
+```
+
 #### Brew Cask (macOS)

 Note that the Etcher Cask has to be updated manually to point to new versions,
--- a/afterPack.js
+++ b/afterPack.js
@@ -14,12 +14,16 @@ exports.default = function(context) {
  cp.execFileSync('mv', [scriptPath, binPath])
  fs.writeFileSync(
    scriptPath,
-    outdent`
+    outdent({trimTrailingNewline: false})`
      #!/bin/bash
+
+      # Resolve symlinks. Warning, readlink -f doesn't work on MacOS/BSD
+      script_dir="$(dirname "$(readlink -f "\${BASH_SOURCE[0]}")")"
+
      if [[ $EUID -ne 0 ]] || [[ $ELECTRON_RUN_AS_NODE ]]; then
-        "\${BASH_SOURCE%/*}"/${context.packager.executableName}.bin "$@"
+        "\${script_dir}"/${context.packager.executableName}.bin "$@"
      else
-        "\${BASH_SOURCE%/*}"/${context.packager.executableName}.bin "$@" --no-sandbox
+        "\${script_dir}"/${context.packager.executableName}.bin "$@" --no-sandbox
      fi
    `
  )
--- a/afterSignHook.js
+++ b/afterSignHook.js
@@ -1,10 +1,11 @@
 'use strict'

 const { notarize } = require('electron-notarize')
+const { ELECTRON_SKIP_NOTARIZATION } = process.env

 async function main(context) {
  const { electronPlatformName, appOutDir } = context
-  if (electronPlatformName !== 'darwin') {
+  if (electronPlatformName !== 'darwin' || ELECTRON_SKIP_NOTARIZATION === 'true') {
    return
  }

--- a/beforeBuild.js
+++ b/beforeBuild.js
@@ -0,0 +1,26 @@
+'use strict'
+
+const cp = require('child_process');
+const rimraf = require('rimraf');
+const process = require('process');
+
+// Rebuild native modules for ia32 and run webpack again for the ia32 part of windows packages
+exports.default = function(context) {
+        if (context.platform.name === 'windows') {
+                cp.execFileSync(
+                        'bash',
+                        ['./node_modules/.bin/electron-rebuild', '--types', 'dev', '--arch', context.arch],
+                );
+		rimraf.sync('generated');
+                cp.execFileSync(
+                        'bash',
+                        ['./node_modules/.bin/webpack'],
+			{
+				env: {
+					...process.env,
+					npm_config_target_arch: context.arch,
+				},
+			},
+                );
+        }
+}
--- a/binding.gyp
+++ b/binding.gyp
@@ -1,35 +0,0 @@
-{
-  "targets": [
-    {
-      "target_name": "elevator",
-      "include_dirs" : [
-        "src",
-        "<!(node -e \"require('nan')\")"
-      ],
-      'conditions': [
-
-        [ 'OS=="win"', {
-          "sources": [
-            "src/utils/v8utils.cpp",
-            "src/os/win32/elevate.cpp",
-            "src/elevator_init.cpp",
-          ],
-          "libraries": [
-            "-lShell32.lib",
-          ],
-        } ],
-
-        [ 'OS=="mac"', {
-          "xcode_settings": {
-            "OTHER_CPLUSPLUSFLAGS": [
-              "-stdlib=libc++"
-            ],
-            "OTHER_LDFLAGS": [
-              "-stdlib=libc++"
-            ]
-          }
-        } ]
-      ],
-    }
-  ],
-}
--- a/docs/ARCHITECTURE.md
+++ b/docs/ARCHITECTURE.md
@@ -12,12 +12,9 @@ technologies used in Etcher that you should become familiar with:

 - [Electron][electron]
 - [NodeJS][nodejs]
- [AngularJS][angularjs]
 - [Redux][redux]
 - [ImmutableJS][immutablejs]
- [Bootstrap][bootstrap]
 - [Sass][sass]
- [Flexbox Grid][flexbox-grid]
 - [Mocha][mocha]
 - [JSDoc][jsdoc]

@@ -66,11 +63,8 @@ be documented instead!
 [gui-dir]: https://github.com/balena-io/etcher/tree/master/lib/gui
 [electron]: http://electron.atom.io
 [nodejs]: https://nodejs.org
-[angularjs]: https://angularjs.org
 [redux]: http://redux.js.org
 [immutablejs]: http://facebook.github.io/immutable-js/
-[bootstrap]: http://getbootstrap.com
 [sass]: http://sass-lang.com
-[flexbox-grid]: http://flexboxgrid.com
 [mocha]: http://mochajs.org
 [jsdoc]: http://usejsdoc.org
--- a/docs/USER-DOCUMENTATION.md
+++ b/docs/USER-DOCUMENTATION.md
@@ -166,7 +166,7 @@ Run the following command in `Terminal.app`, replacing `N` by the corresponding
 disk number, which you can find by running `diskutil list`:

 ```sh
-diskutil eraseDisk free UNTITLED /dev/diskN
+diskutil eraseDisk FAT32 UNTITLED MBRFormat /dev/diskN
 ```

 ### GNU/Linux
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -1,34 +1,16 @@
 appId: io.balena.etcher
-copyright: Copyright 2016-2019 Balena Ltd
+copyright: Copyright 2016-2020 Balena Ltd
 productName: balenaEtcher
 npmRebuild: true
-nodeGypRebuild: true
+nodeGypRebuild: false
 publish: null
+beforeBuild: "./beforeBuild.js"
 afterPack: "./afterPack.js"
+asar: false
 files:
-  - build/Release/elevator.node
  - generated
  - lib/shared/catalina-sudo/sudo-askpass.osascript.js
-  - lib/gui/app/index.html
-  - lib/gui/css/*.css
-  - lib/gui/css/fonts/*.woff2
-  - lib/gui/assets/*.svg
-  - assets/icon.png
-  - "!node_modules/**/**"
-  - "node_modules/**/*.js"
-  - "node_modules/**/*.json"
-  - "node_modules/**/*.node"
-  - "node_modules/**/*.dll"
-  - node_modules/node-raspberrypi-usbboot/blobs/**
-  - node_modules/flexboxgrid/dist/flexboxgrid.css
-  - node_modules/roboto-fontface/fonts/roboto/Roboto-Thin.woff
-  - node_modules/roboto-fontface/fonts/roboto/Roboto-Light.woff
-  - node_modules/roboto-fontface/fonts/roboto/Roboto-Regular.woff
-  - node_modules/roboto-fontface/fonts/roboto/Roboto-Medium.woff
-  - node_modules/roboto-fontface/fonts/roboto/Roboto-Bold.woff
-  - node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
 mac:
-  asar: false
  icon: assets/icon.icns
  category: public.app-category.developer-tools
  hardenedRuntime: true
@@ -82,6 +64,7 @@ deb:
    - libexpat1
    - libfontconfig1
    - libfreetype6
+    - libgbm1
    - libgcc1
    - libgconf-2-4
    - libgdk-pixbuf2.0-0
@@ -91,7 +74,7 @@ deb:
    - libnotify4
    - libnspr4
    - libnss3
-    - libpango1.0-0
+    - libpango1.0-0 | libpango-1.0-0
    - libstdc++6
    - libx11-6
    - libxcomposite1
@@ -107,5 +90,8 @@ deb:
    - polkit-1-auth-agent | policykit-1-gnome | polkit-kde-1
 rpm:
  depends:
-    - lsb
-    - libXScrnSaver
+    - util-linux
+protocols:
+  name: etcher
+  schemes:
+    - etcher
--- a/lib/gui/app/app.js
+++ b/lib/gui/app/app.js
@@ -1,456 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @module Etcher
- */
-
-'use strict'
-
-/* eslint-disable no-var */
-
-var angular = require('angular')
-
-/* eslint-enable no-var */
-
-const electron = require('electron')
-const sdk = require('etcher-sdk')
-const _ = require('lodash')
-const uuidV4 = require('uuid/v4')
-
-const EXIT_CODES = require('../../shared/exit-codes')
-const messages = require('../../shared/messages')
-const store = require('./models/store')
-const packageJSON = require('../../../package.json')
-const flashState = require('./models/flash-state')
-const settings = require('./models/settings')
-const windowProgress = require('./os/window-progress')
-const analytics = require('./modules/analytics')
-const availableDrives = require('./models/available-drives')
-const driveScanner = require('./modules/drive-scanner')
-const osDialog = require('./os/dialog')
-const exceptionReporter = require('./modules/exception-reporter')
-const updateLock = require('./modules/update-lock')
-
-/* eslint-disable lodash/prefer-lodash-method,lodash/prefer-get */
-
-// Enable debug information from all modules that use `debug`
-// See https://github.com/visionmedia/debug#browser-support
-//
-// Enable drivelist debugging information
-// See https://github.com/balena-io-modules/drivelist
-process.env.DRIVELIST_DEBUG = /drivelist|^\*$/i.test(process.env.DEBUG) ? '1' : ''
-window.localStorage.debug = process.env.DEBUG
-
-window.addEventListener('unhandledrejection', (event) => {
-  // Promise: event.reason
-  // Bluebird: event.detail.reason
-  // Anything else: event
-  const error = event.reason || (event.detail && event.detail.reason) || event
-  analytics.logException(error)
-  event.preventDefault()
-})
-
-// Set application session UUID
-store.dispatch({
-  type: store.Actions.SET_APPLICATION_SESSION_UUID,
-  data: uuidV4()
-})
-
-// Set first flashing workflow UUID
-store.dispatch({
-  type: store.Actions.SET_FLASHING_WORKFLOW_UUID,
-  data: uuidV4()
-})
-
-const applicationSessionUuid = store.getState().toJS().applicationSessionUuid
-const flashingWorkflowUuid = store.getState().toJS().flashingWorkflowUuid
-
-const app = angular.module('Etcher', [
-  require('angular-ui-router'),
-  require('angular-ui-bootstrap'),
-  require('angular-if-state'),
-
-  // Components
-  require('./components/svg-icon'),
-  require('./components/safe-webview'),
-
-  // Pages
-  require('./pages/main/main.ts').MODULE_NAME,
-  require('./components/finish/index.ts').MODULE_NAME
-])
-
-app.run(() => {
-  console.log([
-    ' _____ _       _',
-    '|  ___| |     | |',
-    '| |__ | |_ ___| |__   ___ _ __',
-    '|  __|| __/ __| \'_ \\ / _ \\ \'__|',
-    '| |___| || (__| | | |  __/ |',
-    '\\____/ \\__\\___|_| |_|\\___|_|',
-    '',
-    'Interested in joining the Etcher team?',
-    'Drop us a line at join+etcher@balena.io',
-    '',
-    `Version = ${packageJSON.version}, Type = ${packageJSON.packageType}`
-  ].join('\n'))
-})
-
-app.run(() => {
-  const currentVersion = packageJSON.version
-
-  analytics.logEvent('Application start', {
-    packageType: packageJSON.packageType,
-    version: currentVersion,
-    applicationSessionUuid
-  })
-})
-
-app.run(() => {
-  store.observe(() => {
-    if (!flashState.isFlashing()) {
-      return
-    }
-
-    const currentFlashState = flashState.getFlashState()
-    const stateType = !currentFlashState.flashing && currentFlashState.verifying
-      ? `Verifying ${currentFlashState.verifying}`
-      : `Flashing ${currentFlashState.flashing}`
-
-    // NOTE: There is usually a short time period between the `isFlashing()`
-    // property being set, and the flashing actually starting, which
-    // might cause some non-sense flashing state logs including
-    // `undefined` values.
-    analytics.logDebug(
-      `${stateType} devices, ` +
-      `${currentFlashState.percentage}% at ${currentFlashState.speed} MB/s ` +
-      `(total ${currentFlashState.totalSpeed} MB/s) ` +
-      `eta in ${currentFlashState.eta}s ` +
-      `with ${currentFlashState.failed} failed devices`
-    )
-
-    windowProgress.set(currentFlashState)
-  })
-})
-
-/**
- * @summary The radix used by USB ID numbers
- * @type {Number}
- * @constant
- */
-const USB_ID_RADIX = 16
-
-/**
- * @summary The expected length of a USB ID number
- * @type {Number}
- * @constant
- */
-const USB_ID_LENGTH = 4
-
-/**
- * @summary Convert a USB id (e.g. product/vendor) to a string
- * @function
- * @private
- *
- * @param {Number} id - USB id
- * @returns {String} string id
- *
- * @example
- * console.log(usbIdToString(2652))
- * > '0x0a5c'
- */
-const usbIdToString = (id) => {
-  return `0x${_.padStart(id.toString(USB_ID_RADIX), USB_ID_LENGTH, '0')}`
-}
-
-/**
- * @summary Product ID of BCM2708
- * @type {Number}
- * @constant
- */
-const USB_PRODUCT_ID_BCM2708_BOOT = 0x2763
-
-/**
- * @summary Product ID of BCM2710
- * @type {Number}
- * @constant
- */
-const USB_PRODUCT_ID_BCM2710_BOOT = 0x2764
-
-/**
- * @summary Compute module descriptions
- * @type {Object}
- * @constant
- */
-const COMPUTE_MODULE_DESCRIPTIONS = {
-  [USB_PRODUCT_ID_BCM2708_BOOT]: 'Compute Module 1',
-  [USB_PRODUCT_ID_BCM2710_BOOT]: 'Compute Module 3'
-}
-
-app.run(($timeout) => {
-  const BLACKLISTED_DRIVES = settings.has('driveBlacklist')
-    ? settings.get('driveBlacklist').split(',')
-    : []
-
-  // eslint-disable-next-line require-jsdoc
-  const driveIsAllowed = (drive) => {
-    return !(
-      BLACKLISTED_DRIVES.includes(drive.devicePath) ||
-      BLACKLISTED_DRIVES.includes(drive.device) ||
-      BLACKLISTED_DRIVES.includes(drive.raw)
-    )
-  }
-
-  // eslint-disable-next-line require-jsdoc,consistent-return
-  const prepareDrive = (drive) => {
-    if (drive instanceof sdk.sourceDestination.BlockDevice) {
-      return drive.drive
-    } else if (drive instanceof sdk.sourceDestination.UsbbootDrive) {
-      // This is a workaround etcher expecting a device string and a size
-      drive.device = drive.usbDevice.portId
-      drive.size = null
-      drive.progress = 0
-      drive.disabled = true
-      drive.on('progress', (progress) => {
-        updateDriveProgress(drive, progress)
-      })
-      return drive
-    } else if (drive instanceof sdk.sourceDestination.DriverlessDevice) {
-      const description = COMPUTE_MODULE_DESCRIPTIONS[drive.deviceDescriptor.idProduct] || 'Compute Module'
-      return {
-        device: `${usbIdToString(drive.deviceDescriptor.idVendor)}:${usbIdToString(drive.deviceDescriptor.idProduct)}`,
-        displayName: 'Missing drivers',
-        description,
-        mountpoints: [],
-        isReadOnly: false,
-        isSystem: false,
-        disabled: true,
-        icon: 'warning',
-        size: null,
-        link: 'https://www.raspberrypi.org/documentation/hardware/computemodule/cm-emmc-flashing.md',
-        linkCTA: 'Install',
-        linkTitle: 'Install missing drivers',
-        linkMessage: [
-          'Would you like to download the necessary drivers from the Raspberry Pi Foundation?',
-          'This will open your browser.\n\n',
-          'Once opened, download and run the installer from the "Windows Installer" section to install the drivers.'
-        ].join(' ')
-      }
-    }
-  }
-
-  // eslint-disable-next-line require-jsdoc
-  const setDrives = (drives) => {
-    availableDrives.setDrives(_.values(drives))
-
-    // Safely trigger a digest cycle.
-    // In some cases, AngularJS doesn't acknowledge that the
-    // available drives list has changed, and incorrectly
-    // keeps asking the user to "Connect a drive".
-    $timeout()
-  }
-
-  // eslint-disable-next-line require-jsdoc
-  const getDrives = () => {
-    return _.keyBy(availableDrives.getDrives() || [], 'device')
-  }
-
-  // eslint-disable-next-line require-jsdoc
-  const addDrive = (drive) => {
-    const preparedDrive = prepareDrive(drive)
-    if (!driveIsAllowed(preparedDrive)) {
-      return
-    }
-    const drives = getDrives()
-    drives[preparedDrive.device] = preparedDrive
-    setDrives(drives)
-  }
-
-  // eslint-disable-next-line require-jsdoc
-  const removeDrive = (drive) => {
-    const preparedDrive = prepareDrive(drive)
-    const drives = getDrives()
-    // eslint-disable-next-line prefer-reflect
-    delete drives[preparedDrive.device]
-    setDrives(drives)
-  }
-
-  // eslint-disable-next-line require-jsdoc
-  const updateDriveProgress = (drive, progress) => {
-    const drives = getDrives()
-    const driveInMap = drives[drive.device]
-    if (driveInMap) {
-      driveInMap.progress = progress
-      setDrives(drives)
-    }
-  }
-
-  driveScanner.on('attach', addDrive)
-  driveScanner.on('detach', removeDrive)
-
-  driveScanner.on('error', (error) => {
-    // Stop the drive scanning loop in case of errors,
-    // otherwise we risk presenting the same error over
-    // and over again to the user, while also heavily
-    // spamming our error reporting service.
-    driveScanner.stop()
-
-    return exceptionReporter.report(error)
-  })
-
-  driveScanner.start()
-})
-
-app.run(($window) => {
-  let popupExists = false
-
-  $window.addEventListener('beforeunload', (event) => {
-    if (!flashState.isFlashing() || popupExists) {
-      analytics.logEvent('Close application', {
-        isFlashing: flashState.isFlashing(),
-        applicationSessionUuid
-      })
-      return
-    }
-
-    // Don't close window while flashing
-    event.returnValue = false
-
-    // Don't open any more popups
-    popupExists = true
-
-    analytics.logEvent('Close attempt while flashing', { applicationSessionUuid, flashingWorkflowUuid })
-
-    osDialog.showWarning({
-      confirmationLabel: 'Yes, quit',
-      rejectionLabel: 'Cancel',
-      title: 'Are you sure you want to close Etcher?',
-      description: messages.warning.exitWhileFlashing()
-    }).then((confirmed) => {
-      if (confirmed) {
-        analytics.logEvent('Close confirmed while flashing', {
-          flashInstanceUuid: flashState.getFlashUuid(),
-          applicationSessionUuid,
-          flashingWorkflowUuid
-        })
-
-        // This circumvents the 'beforeunload' event unlike
-        // electron.remote.app.quit() which does not.
-        electron.remote.process.exit(EXIT_CODES.SUCCESS)
-      }
-
-      analytics.logEvent('Close rejected while flashing', { applicationSessionUuid, flashingWorkflowUuid })
-      popupExists = false
-    }).catch(exceptionReporter.report)
-  })
-
-  /**
-   * @summary Helper fn for events
-   * @function
-   * @private
-   * @example
-   * window.addEventListener('click', extendLock)
-   */
-  const extendLock = () => {
-    updateLock.extend()
-  }
-
-  $window.addEventListener('click', extendLock)
-  $window.addEventListener('touchstart', extendLock)
-
-  // Initial update lock acquisition
-  extendLock()
-})
-
-app.run(($rootScope) => {
-  $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState) => {
-    // Ignore first navigation
-    if (!fromState.name) {
-      return
-    }
-
-    analytics.logEvent('Navigate', {
-      to: toState.name,
-      from: fromState.name,
-      applicationSessionUuid
-    })
-  })
-})
-
-app.config(($urlRouterProvider) => {
-  $urlRouterProvider.otherwise('/main')
-})
-
-app.config(($provide) => {
-  $provide.decorator('$exceptionHandler', ($delegate) => {
-    return (exception, cause) => {
-      exceptionReporter.report(exception)
-      $delegate(exception, cause)
-    }
-  })
-})
-
-app.config(($locationProvider) => {
-  // NOTE(Shou): this seems to invoke a minor perf decrease when set to true
-  $locationProvider.html5Mode({
-    rewriteLinks: false
-  })
-})
-
-app.controller('StateController', function ($rootScope, $scope) {
-  const unregisterStateChange = $rootScope.$on('$stateChangeSuccess', (event, toState, toParams, fromState) => {
-    this.previousName = fromState.name
-    this.currentName = toState.name
-  })
-
-  $scope.$on('$destroy', unregisterStateChange)
-
-  /**
-   * @summary Get the previous state name
-   * @function
-   * @public
-   *
-   * @returns {String} previous state name
-   *
-   * @example
-   * if (StateController.previousName === 'main') {
-   *   console.log('We left the main screen!');
-   * }
-   */
-  this.previousName = null
-
-  /**
-   * @summary Get the current state name
-   * @function
-   * @public
-   *
-   * @returns {String} current state name
-   *
-   * @example
-   * if (StateController.currentName === 'main') {
-   *   console.log('We are on the main screen!');
-   * }
-   */
-  this.currentName = null
-})
-
-// Ensure user settings are loaded before
-// we bootstrap the Angular.js application
-angular.element(document).ready(() => {
-  settings.load().then(() => {
-    angular.bootstrap(document, [ 'Etcher' ])
-  }).catch(exceptionReporter.report)
-})
--- a/lib/gui/app/app.ts
+++ b/lib/gui/app/app.ts
@@ -0,0 +1,372 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as electron from 'electron';
+import * as sdk from 'etcher-sdk';
+import * as _ from 'lodash';
+import outdent from 'outdent';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { v4 as uuidV4 } from 'uuid';
+
+import * as packageJSON from '../../../package.json';
+import {
+	DrivelistDrive,
+	isDriveValid,
+	isSourceDrive,
+} from '../../shared/drive-constraints';
+import * as EXIT_CODES from '../../shared/exit-codes';
+import * as messages from '../../shared/messages';
+import * as availableDrives from './models/available-drives';
+import * as flashState from './models/flash-state';
+import { init as ledsInit } from './models/leds';
+import { deselectImage, getImage, selectDrive } from './models/selection-state';
+import * as settings from './models/settings';
+import { Actions, observe, store } from './models/store';
+import * as analytics from './modules/analytics';
+import { scanner as driveScanner } from './modules/drive-scanner';
+import * as exceptionReporter from './modules/exception-reporter';
+import * as osDialog from './os/dialog';
+import * as windowProgress from './os/window-progress';
+import MainPage from './pages/main/MainPage';
+
+window.addEventListener(
+	'unhandledrejection',
+	(event: PromiseRejectionEvent | any) => {
+		// Promise: event.reason
+		// Anything else: event
+		const error = event.reason || event;
+		analytics.logException(error);
+		event.preventDefault();
+	},
+);
+
+// Set application session UUID
+store.dispatch({
+	type: Actions.SET_APPLICATION_SESSION_UUID,
+	data: uuidV4(),
+});
+
+// Set first flashing workflow UUID
+store.dispatch({
+	type: Actions.SET_FLASHING_WORKFLOW_UUID,
+	data: uuidV4(),
+});
+
+const applicationSessionUuid = store.getState().toJS().applicationSessionUuid;
+const flashingWorkflowUuid = store.getState().toJS().flashingWorkflowUuid;
+
+console.log(outdent`
+	${outdent}
+	 _____ _       _
+	|  ___| |     | |
+	| |__ | |_ ___| |__   ___ _ __
+	|  __|| __/ __| '_ \\ / _ \\ '__|
+	| |___| || (__| | | |  __/ |
+	\\____/ \\__\\___|_| |_|\\___|_|
+
+	Interested in joining the Etcher team?
+	Drop us a line at join+etcher@balena.io
+
+	Version = ${packageJSON.version}, Type = ${packageJSON.packageType}
+`);
+
+const currentVersion = packageJSON.version;
+
+analytics.logEvent('Application start', {
+	packageType: packageJSON.packageType,
+	version: currentVersion,
+});
+
+const debouncedLog = _.debounce(console.log, 1000, { maxWait: 1000 });
+
+function pluralize(word: string, quantity: number) {
+	return `${quantity} ${word}${quantity === 1 ? '' : 's'}`;
+}
+
+observe(() => {
+	if (!flashState.isFlashing()) {
+		return;
+	}
+	const currentFlashState = flashState.getFlashState();
+	windowProgress.set(currentFlashState);
+
+	let eta = '';
+	if (currentFlashState.eta !== undefined) {
+		eta = `eta in ${currentFlashState.eta.toFixed(0)}s`;
+	}
+	let active = '';
+	if (currentFlashState.type !== 'decompressing') {
+		active = pluralize('device', currentFlashState.active);
+	}
+	// NOTE: There is usually a short time period between the `isFlashing()`
+	// property being set, and the flashing actually starting, which
+	// might cause some non-sense flashing state logs including
+	// `undefined` values.
+	debouncedLog(outdent({ newline: ' ' })`
+		${_.capitalize(currentFlashState.type)}
+		${active},
+		${currentFlashState.percentage}%
+		at
+		${(currentFlashState.speed || 0).toFixed(2)}
+		MB/s
+		(total ${(currentFlashState.speed * currentFlashState.active).toFixed(2)} MB/s)
+		${eta}
+		with
+		${pluralize('failed device', currentFlashState.failed)}
+	`);
+});
+
+/**
+ * @summary The radix used by USB ID numbers
+ */
+const USB_ID_RADIX = 16;
+
+/**
+ * @summary The expected length of a USB ID number
+ */
+const USB_ID_LENGTH = 4;
+
+/**
+ * @summary Convert a USB id (e.g. product/vendor) to a string
+ *
+ * @example
+ * console.log(usbIdToString(2652))
+ * > '0x0a5c'
+ */
+function usbIdToString(id: number): string {
+	return `0x${_.padStart(id.toString(USB_ID_RADIX), USB_ID_LENGTH, '0')}`;
+}
+
+/**
+ * @summary Product ID of BCM2708
+ */
+const USB_PRODUCT_ID_BCM2708_BOOT = 0x2763;
+
+/**
+ * @summary Product ID of BCM2710
+ */
+const USB_PRODUCT_ID_BCM2710_BOOT = 0x2764;
+
+/**
+ * @summary Compute module descriptions
+ */
+const COMPUTE_MODULE_DESCRIPTIONS: _.Dictionary<string> = {
+	[USB_PRODUCT_ID_BCM2708_BOOT]: 'Compute Module 1',
+	[USB_PRODUCT_ID_BCM2710_BOOT]: 'Compute Module 3',
+};
+
+async function driveIsAllowed(drive: {
+	devicePath: string;
+	device: string;
+	raw: string;
+}) {
+	const driveBlacklist = (await settings.get('driveBlacklist')) || [];
+	return !(
+		driveBlacklist.includes(drive.devicePath) ||
+		driveBlacklist.includes(drive.device) ||
+		driveBlacklist.includes(drive.raw)
+	);
+}
+
+type Drive =
+	| sdk.sourceDestination.BlockDevice
+	| sdk.sourceDestination.UsbbootDrive
+	| sdk.sourceDestination.DriverlessDevice;
+
+function prepareDrive(drive: Drive) {
+	if (drive instanceof sdk.sourceDestination.BlockDevice) {
+		// @ts-ignore (BlockDevice.drive is private)
+		return drive.drive;
+	} else if (drive instanceof sdk.sourceDestination.UsbbootDrive) {
+		// This is a workaround etcher expecting a device string and a size
+		// @ts-ignore
+		drive.device = drive.usbDevice.portId;
+		drive.size = null;
+		// @ts-ignore
+		drive.progress = 0;
+		drive.disabled = true;
+		drive.on('progress', (progress) => {
+			updateDriveProgress(drive, progress);
+		});
+		return drive;
+	} else if (drive instanceof sdk.sourceDestination.DriverlessDevice) {
+		const description =
+			COMPUTE_MODULE_DESCRIPTIONS[
+				drive.deviceDescriptor.idProduct.toString()
+			] || 'Compute Module';
+		return {
+			device: `${usbIdToString(
+				drive.deviceDescriptor.idVendor,
+			)}:${usbIdToString(drive.deviceDescriptor.idProduct)}`,
+			displayName: 'Missing drivers',
+			description,
+			mountpoints: [],
+			isReadOnly: false,
+			isSystem: false,
+			disabled: true,
+			icon: 'warning',
+			size: null,
+			link:
+				'https://www.raspberrypi.org/documentation/hardware/computemodule/cm-emmc-flashing.md',
+			linkCTA: 'Install',
+			linkTitle: 'Install missing drivers',
+			linkMessage: outdent`
+				Would you like to download the necessary drivers from the Raspberry Pi Foundation?
+				This will open your browser.
+
+
+				Once opened, download and run the installer from the "Windows Installer" section to install the drivers
+			`,
+		};
+	}
+}
+
+function setDrives(drives: _.Dictionary<DrivelistDrive>) {
+	availableDrives.setDrives(_.values(drives));
+}
+
+function getDrives() {
+	return _.keyBy(availableDrives.getDrives(), 'device');
+}
+
+async function addDrive(drive: Drive) {
+	const preparedDrive = prepareDrive(drive);
+	if (!(await driveIsAllowed(preparedDrive))) {
+		return;
+	}
+	const drives = getDrives();
+	drives[preparedDrive.device] = preparedDrive;
+	setDrives(drives);
+	if (
+		(await settings.get('autoSelectAllDrives')) &&
+		drive instanceof sdk.sourceDestination.BlockDevice &&
+		// @ts-ignore BlockDevice.drive is private
+		isDriveValid(drive.drive, getImage())
+	) {
+		selectDrive(drive.device);
+	}
+}
+
+function removeDrive(drive: Drive) {
+	if (
+		drive instanceof sdk.sourceDestination.BlockDevice &&
+		// @ts-ignore BlockDevice.drive is private
+		isSourceDrive(drive.drive, getImage())
+	) {
+		// Deselect the image if it was on the drive that was removed.
+		// This will also deselect the image if the drive mountpoints change.
+		deselectImage();
+	}
+	const preparedDrive = prepareDrive(drive);
+	const drives = getDrives();
+	delete drives[preparedDrive.device];
+	setDrives(drives);
+}
+
+function updateDriveProgress(
+	drive: sdk.sourceDestination.UsbbootDrive,
+	progress: number,
+) {
+	const drives = getDrives();
+	// @ts-ignore
+	const driveInMap = drives[drive.device];
+	if (driveInMap) {
+		// @ts-ignore
+		drives[drive.device] = { ...driveInMap, progress };
+		setDrives(drives);
+	}
+}
+
+driveScanner.on('attach', addDrive);
+driveScanner.on('detach', removeDrive);
+
+driveScanner.on('error', (error) => {
+	// Stop the drive scanning loop in case of errors,
+	// otherwise we risk presenting the same error over
+	// and over again to the user, while also heavily
+	// spamming our error reporting service.
+	driveScanner.stop();
+
+	return exceptionReporter.report(error);
+});
+
+driveScanner.start();
+
+let popupExists = false;
+
+window.addEventListener('beforeunload', async (event) => {
+	if (!flashState.isFlashing() || popupExists) {
+		analytics.logEvent('Close application', {
+			isFlashing: flashState.isFlashing(),
+		});
+		return;
+	}
+
+	// Don't close window while flashing
+	event.returnValue = false;
+
+	// Don't open any more popups
+	popupExists = true;
+
+	analytics.logEvent('Close attempt while flashing');
+
+	try {
+		const confirmed = await osDialog.showWarning({
+			confirmationLabel: 'Yes, quit',
+			rejectionLabel: 'Cancel',
+			title: 'Are you sure you want to close Etcher?',
+			description: messages.warning.exitWhileFlashing(),
+		});
+		if (confirmed) {
+			analytics.logEvent('Close confirmed while flashing', {
+				flashInstanceUuid: flashState.getFlashUuid(),
+			});
+
+			// This circumvents the 'beforeunload' event unlike
+			// electron.remote.app.quit() which does not.
+			electron.remote.process.exit(EXIT_CODES.SUCCESS);
+		}
+
+		analytics.logEvent('Close rejected while flashing', {
+			applicationSessionUuid,
+			flashingWorkflowUuid,
+		});
+		popupExists = false;
+	} catch (error) {
+		exceptionReporter.report(error);
+	}
+});
+
+async function main() {
+	await ledsInit();
+	ReactDOM.render(
+		React.createElement(MainPage),
+		document.getElementById('main'),
+		// callback to set the correct zoomFactor for webviews as well
+		async () => {
+			const fullscreen = await settings.get('fullscreen');
+			const width = fullscreen ? window.screen.width : window.outerWidth;
+			try {
+				electron.webFrame.setZoomFactor(width / settings.DEFAULT_WIDTH);
+			} catch (err) {
+				// noop
+			}
+		},
+	);
+}
+
+main();
--- a/lib/gui/app/components/drive-selector/DriveSelectorModal.jsx
+++ b/lib/gui/app/components/drive-selector/DriveSelectorModal.jsx
@@ -1,337 +0,0 @@
-/*
- * Copyright 2019 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const React = require('react')
-const { Modal } = require('rendition')
-const {
-  isDriveValid,
-  getDriveImageCompatibilityStatuses,
-  hasListDriveImageCompatibilityStatus,
-  COMPATIBILITY_STATUS_TYPES
-} = require('../../../../shared/drive-constraints')
-const store = require('../../models/store')
-const analytics = require('../../modules/analytics')
-const availableDrives = require('../../models/available-drives')
-const selectionState = require('../../models/selection-state')
-const { bytesToClosestUnit } = require('../../../../shared/units')
-const utils = require('../../../../shared/utils')
-const { open: openExternal } = require('../../os/open-external/services/open-external')
-
-/**
- * @summary Determine if we can change a drive's selection state
- * @function
- * @private
- *
- * @param {Object} drive - drive
- * @returns {Promise}
- *
- * @example
- * shouldChangeDriveSelectionState(drive)
- *    .then((shouldChangeDriveSelectionState) => {
- *        if (shouldChangeDriveSelectionState) doSomething();
- *    });
- */
-const shouldChangeDriveSelectionState = (drive) => {
-  return isDriveValid(drive, selectionState.getImage())
-}
-
-/**
- * @summary Toggle a drive selection
- * @function
- * @public
- *
- * @param {Object} drive - drive
- * @returns {void}
- *
- * @example
- * toggleDrive({
- *   device: '/dev/disk2',
- *   size: 999999999,
- *   name: 'Cruzer USB drive'
- * });
- */
-const toggleDrive = (drive) => {
-  const canChangeDriveSelectionState = shouldChangeDriveSelectionState(drive)
-
-  if (canChangeDriveSelectionState) {
-    analytics.logEvent('Toggle drive', {
-      drive,
-      previouslySelected: selectionState.isCurrentDrive(availableDrives.device),
-      applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-      flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-    })
-
-    selectionState.toggleDrive(drive.device)
-  }
-}
-
-/**
- * @summary Memoized getDrives function
- * @function
- * @public
- *
- * @returns {Array<Object>} - memoized list of drives
- *
- * @example
- * const drives = getDrives()
- * // Do something with drives
- */
-const getDrives = utils.memoize(availableDrives.getDrives, _.isEqual)
-
-/**
- * @summary Get a drive's compatibility status object(s)
- * @function
- * @public
- *
- * @description
- * Given a drive, return its compatibility status with the selected image,
- * containing the status type (ERROR, WARNING), and accompanying
- * status message.
- *
- * @returns {Object[]} list of objects containing statuses
- *
- * @example
- * const statuses = getDriveStatuses(drive);
- *
- * for ({ type, message } of statuses) {
- *   // do something
- * }
- */
-const getDriveStatuses = utils.memoize((drive) => {
-  return getDriveImageCompatibilityStatuses(drive, selectionState.getImage())
-}, _.isEqual)
-
-/**
- * @summary Keyboard event drive toggling
- * @function
- * @public
- *
- * @description
- * Keyboard-event specific entry to the toggleDrive function.
- *
- * @param {Object} drive - drive
- * @param {Object} evt - event
- *
- * @example
- * <div tabindex="1" onKeyPress="keyboardToggleDrive(drive, evt)">
- *   Tab-select me and press enter or space!
- * </div>
- */
-const keyboardToggleDrive = (drive, evt) => {
-  const ENTER = 13
-  const SPACE = 32
-  if (_.includes([ ENTER, SPACE ], evt.keyCode)) {
-    toggleDrive(drive)
-  }
-}
-
-const DriveSelectorModal = ({ close }) => {
-  const [ confirmModal, setConfirmModal ] = React.useState({ open: false })
-  const [ drives, setDrives ] = React.useState(getDrives())
-
-  React.useEffect(() => {
-    const unsubscribe = store.subscribe(() => {
-      setDrives(availableDrives.getDrives())
-    })
-    return unsubscribe
-  })
-
-  /**
-   * @summary Prompt the user to install missing usbboot drivers
-   * @function
-   * @public
-   *
-   * @param {Object} drive - drive
-   * @returns {void}
-   *
-   * @example
-   * installMissingDrivers({
-   *   linkTitle: 'Go to example.com',
-   *   linkMessage: 'Examples are great, right?',
-   *   linkCTA: 'Call To Action',
-   *   link: 'https://example.com'
-   * });
-   */
-  const installMissingDrivers = (drive) => {
-    if (drive.link) {
-      analytics.logEvent('Open driver link modal', {
-        url: drive.link,
-        applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-        flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-      })
-
-      setConfirmModal({
-        open: true,
-        options: {
-          width: 400,
-          title: drive.linkTitle,
-          cancel: () => setConfirmModal({ open: false }),
-          done: async (shouldContinue) => {
-            try {
-              if (shouldContinue) {
-                openExternal(drive.link)
-              } else {
-                setConfirmModal({ open: false })
-              }
-            } catch (error) {
-              analytics.logException(error)
-            }
-          },
-          action: 'Yes, continue',
-          cancelButtonProps: {
-            children: 'Cancel'
-          },
-          children: drive.linkMessage || `Etcher will open ${drive.link} in your browser`
-        }
-      })
-    }
-  }
-
-  /**
-   * @summary Select a drive and close the modal
-   * @function
-   * @public
-   *
-   * @param {Object} drive - drive
-   * @returns {void}
-   *
-   * @example
-   * selectDriveAndClose({
-   *   device: '/dev/disk2',
-   *   size: 999999999,
-   *   name: 'Cruzer USB drive'
-   * });
-   */
-  const selectDriveAndClose = async (drive) => {
-    const canChangeDriveSelectionState = await shouldChangeDriveSelectionState(drive)
-
-    if (canChangeDriveSelectionState) {
-      selectionState.selectDrive(drive.device)
-
-      analytics.logEvent('Drive selected (double click)', {
-        applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-        flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-      })
-
-      close()
-    }
-  }
-
-  const hasStatus = hasListDriveImageCompatibilityStatus(selectionState.getSelectedDrives(), selectionState.getImage())
-
-  return (
-    <Modal
-      className='modal-drive-selector-modal'
-      title='Select a Drive'
-      done={close}
-      action='Continue'
-      style={{
-        padding: '20px 30px 11px 30px'
-      }}
-      primaryButtonProps={{
-        primary: !hasStatus,
-        warning: hasStatus
-      }}
-    >
-      <div>
-        <ul style={{
-          height: '250px',
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          padding: '0'
-        }}>
-          {_.map(drives, (drive, index) => {
-            return (
-              <li
-                key={`item-${drive.displayName}`}
-                className="list-group-item"
-                disabled={!isDriveValid(drive, selectionState.getImage())}
-                onDoubleClick={() => selectDriveAndClose(drive, close)}
-                onClick={() => toggleDrive(drive)}
-              >
-                {drive.icon && <img className="list-group-item-section" alt="Drive device type logo"
-                  src={`../assets/${drive.icon}.svg`}
-                  width="25"
-                  height="30"/>}
-                <div
-                  className="list-group-item-section list-group-item-section-expanded"
-                  // eslint-disable-next-line no-magic-numbers
-                  tabIndex={ 15 + index }
-                  onKeyPress={(evt) => keyboardToggleDrive(drive, evt)}>
-
-                  <h6 className="list-group-item-heading">
-                    { drive.description }
-                    {drive.size && <span className="word-keep"> - { bytesToClosestUnit(drive.size) }</span>}
-                  </h6>
-                  {!drive.link && <p className="list-group-item-text">
-                    { drive.displayName }
-                  </p>}
-                  {drive.link && <p className="list-group-item-text">
-                    { drive.displayName } - <b><a onClick={() => installMissingDrivers(drive)}>{ drive.linkCTA }</a></b>
-                  </p>}
-
-                  <footer className="list-group-item-footer">
-                    {_.map(getDriveStatuses(drive), (status, idx) => {
-                      const className = {
-                        [COMPATIBILITY_STATUS_TYPES.WARNING]: 'label-warning',
-                        [COMPATIBILITY_STATUS_TYPES.ERROR]: 'label-danger'
-                      }
-                      return (
-                        <span key={`${drive.displayName}-status-${idx}`} className={`label ${className[status.type]}`}>
-                          { status.message }
-                        </span>
-                      )
-                    })}
-                  </footer>
-                  {Boolean(drive.progress) && (
-                    <progress
-                      className='drive-init-progress'
-                      value={ drive.progress }
-                      max="100">
-                    </progress>
-                  )}
-                </div>
-
-                {isDriveValid(drive, selectionState.getImage()) && (
-                  <span className="list-group-item-section tick tick--success"
-                    disabled={!selectionState.isDriveSelected(drive.device)}>
-                  </span>
-                )}
-              </li>
-            )
-          })}
-          {!availableDrives.hasAvailableDrives() && <li className="list-group-item">
-            <div>
-              <b>Connect a drive!</b>
-              <div>No removable drive detected.</div>
-            </div>
-          </li>}
-        </ul>
-      </div>
-
-      {confirmModal.open && <Modal
-        {...confirmModal.options}
-      >
-      </Modal>
-      }
-    </Modal>
-  )
-}
-
-module.exports = DriveSelectorModal
--- a/lib/gui/app/components/drive-selector/drive-selector.tsx
+++ b/lib/gui/app/components/drive-selector/drive-selector.tsx
@@ -0,0 +1,534 @@
+/*
+ * Copyright 2019 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import ChevronDownSvg from '@fortawesome/fontawesome-free/svgs/solid/chevron-down.svg';
+import * as sourceDestination from 'etcher-sdk/build/source-destination/';
+import * as React from 'react';
+import { Flex, ModalProps, Txt, Badge, Link, TableColumn } from 'rendition';
+import styled from 'styled-components';
+
+import {
+	getDriveImageCompatibilityStatuses,
+	isDriveValid,
+	DriveStatus,
+	DrivelistDrive,
+	isDriveSizeLarge,
+} from '../../../../shared/drive-constraints';
+import { compatibility, warning } from '../../../../shared/messages';
+import * as prettyBytes from 'pretty-bytes';
+import { getDrives, hasAvailableDrives } from '../../models/available-drives';
+import { getImage, isDriveSelected } from '../../models/selection-state';
+import { store } from '../../models/store';
+import { logEvent, logException } from '../../modules/analytics';
+import { open as openExternal } from '../../os/open-external/services/open-external';
+import {
+	Alert,
+	GenericTableProps,
+	Modal,
+	Table,
+} from '../../styled-components';
+
+import DriveSVGIcon from '../../../assets/tgt.svg';
+import { SourceMetadata } from '../source-selector/source-selector';
+
+interface UsbbootDrive extends sourceDestination.UsbbootDrive {
+	progress: number;
+}
+
+interface DriverlessDrive {
+	displayName: string; // added in app.ts
+	description: string;
+	link: string;
+	linkTitle: string;
+	linkMessage: string;
+	linkCTA: string;
+}
+
+type Drive = DrivelistDrive | DriverlessDrive | UsbbootDrive;
+
+function isUsbbootDrive(drive: Drive): drive is UsbbootDrive {
+	return (drive as UsbbootDrive).progress !== undefined;
+}
+
+function isDriverlessDrive(drive: Drive): drive is DriverlessDrive {
+	return (drive as DriverlessDrive).link !== undefined;
+}
+
+function isDrivelistDrive(drive: Drive): drive is DrivelistDrive {
+	return typeof (drive as DrivelistDrive).size === 'number';
+}
+
+const DrivesTable = styled((props: GenericTableProps<Drive>) => (
+	<Table<Drive> {...props} />
+))`
+	[data-display='table-head'],
+	[data-display='table-body'] {
+		> [data-display='table-row'] > [data-display='table-cell'] {
+			&:nth-child(2) {
+				width: 32%;
+			}
+
+			&:nth-child(3) {
+				width: 15%;
+			}
+
+			&:nth-child(4) {
+				width: 15%;
+			}
+
+			&:nth-child(5) {
+				width: 32%;
+			}
+		}
+	}
+`;
+
+function badgeShadeFromStatus(status: string) {
+	switch (status) {
+		case compatibility.containsImage():
+			return 16;
+		case compatibility.system():
+		case compatibility.tooSmall():
+			return 5;
+		default:
+			return 14;
+	}
+}
+
+const InitProgress = styled(
+	({
+		value,
+		...props
+	}: {
+		value: number;
+		props?: React.ProgressHTMLAttributes<Element>;
+	}) => {
+		return <progress max="100" value={value} {...props} />;
+	},
+)`
+	/* Reset the default appearance */
+	appearance: none;
+
+	::-webkit-progress-bar {
+		width: 130px;
+		height: 4px;
+		background-color: #dde1f0;
+		border-radius: 14px;
+	}
+
+	::-webkit-progress-value {
+		background-color: #1496e1;
+		border-radius: 14px;
+	}
+`;
+
+export interface DriveSelectorProps
+	extends Omit<ModalProps, 'done' | 'cancel'> {
+	multipleSelection: boolean;
+	showWarnings?: boolean;
+	cancel: () => void;
+	done: (drives: DrivelistDrive[]) => void;
+	titleLabel: string;
+	emptyListLabel: string;
+	selectedList?: DrivelistDrive[];
+	updateSelectedList?: () => DrivelistDrive[];
+}
+
+interface DriveSelectorState {
+	drives: Drive[];
+	image?: SourceMetadata;
+	missingDriversModal: { drive?: DriverlessDrive };
+	selectedList: DrivelistDrive[];
+	showSystemDrives: boolean;
+}
+
+function isSystemDrive(drive: Drive) {
+	return isDrivelistDrive(drive) && drive.isSystem;
+}
+
+export class DriveSelector extends React.Component<
+	DriveSelectorProps,
+	DriveSelectorState
+> {
+	private unsubscribe: (() => void) | undefined;
+	tableColumns: Array<TableColumn<Drive>>;
+
+	constructor(props: DriveSelectorProps) {
+		super(props);
+
+		const defaultMissingDriversModalState: { drive?: DriverlessDrive } = {};
+		const selectedList = this.props.selectedList || [];
+
+		this.state = {
+			drives: getDrives(),
+			image: getImage(),
+			missingDriversModal: defaultMissingDriversModalState,
+			selectedList,
+			showSystemDrives: false,
+		};
+
+		this.tableColumns = [
+			{
+				field: 'description',
+				label: 'Name',
+				render: (description: string, drive: Drive) => {
+					if (isDrivelistDrive(drive)) {
+						const isLargeDrive = isDriveSizeLarge(drive);
+						const hasWarnings =
+							this.props.showWarnings && (isLargeDrive || drive.isSystem);
+						return (
+							<Flex alignItems="center">
+								{hasWarnings && (
+									<ExclamationTriangleSvg
+										height="1em"
+										fill={drive.isSystem ? '#fca321' : '#8f9297'}
+									/>
+								)}
+								<Txt ml={(hasWarnings && 8) || 0}>{description}</Txt>
+							</Flex>
+						);
+					}
+					return <Txt>{description}</Txt>;
+				},
+			},
+			{
+				field: 'description',
+				key: 'size',
+				label: 'Size',
+				render: (_description: string, drive: Drive) => {
+					if (isDrivelistDrive(drive) && drive.size !== null) {
+						return prettyBytes(drive.size);
+					}
+				},
+			},
+			{
+				field: 'description',
+				key: 'link',
+				label: 'Location',
+				render: (_description: string, drive: Drive) => {
+					return (
+						<Txt>
+							{drive.displayName}
+							{isDriverlessDrive(drive) && (
+								<>
+									{' '}
+									-{' '}
+									<b>
+										<a onClick={() => this.installMissingDrivers(drive)}>
+											{drive.linkCTA}
+										</a>
+									</b>
+								</>
+							)}
+						</Txt>
+					);
+				},
+			},
+			{
+				field: 'description',
+				key: 'extra',
+				// We use an empty React fragment otherwise it uses the field name as label
+				label: <></>,
+				render: (_description: string, drive: Drive) => {
+					if (isUsbbootDrive(drive)) {
+						return this.renderProgress(drive.progress);
+					} else if (isDrivelistDrive(drive)) {
+						return this.renderStatuses(drive);
+					}
+				},
+			},
+		];
+	}
+
+	private driveShouldBeDisabled(drive: Drive, image?: SourceMetadata) {
+		return (
+			isUsbbootDrive(drive) ||
+			isDriverlessDrive(drive) ||
+			!isDriveValid(drive, image)
+		);
+	}
+
+	private getDisplayedDrives(drives: Drive[]): Drive[] {
+		return drives.filter((drive) => {
+			return (
+				isUsbbootDrive(drive) ||
+				isDriverlessDrive(drive) ||
+				isDriveSelected(drive.device) ||
+				this.state.showSystemDrives ||
+				!drive.isSystem
+			);
+		});
+	}
+
+	private getDisabledDrives(drives: Drive[], image?: SourceMetadata): string[] {
+		return drives
+			.filter((drive) => this.driveShouldBeDisabled(drive, image))
+			.map((drive) => drive.displayName);
+	}
+
+	private renderProgress(progress: number) {
+		return (
+			<Flex flexDirection="column">
+				<Txt fontSize={12}>Initializing device</Txt>
+				<InitProgress value={progress} />
+			</Flex>
+		);
+	}
+
+	private warningFromStatus(
+		status: string,
+		drive: { device: string; size: number },
+	) {
+		switch (status) {
+			case compatibility.containsImage():
+				return warning.sourceDrive();
+			case compatibility.largeDrive():
+				return warning.largeDriveSize();
+			case compatibility.system():
+				return warning.systemDrive();
+			case compatibility.tooSmall():
+				const recommendedDriveSize =
+					this.state.image?.recommendedDriveSize || this.state.image?.size || 0;
+				return warning.unrecommendedDriveSize({ recommendedDriveSize }, drive);
+		}
+	}
+
+	private renderStatuses(drive: DrivelistDrive) {
+		const statuses: DriveStatus[] = getDriveImageCompatibilityStatuses(
+			drive,
+			this.state.image,
+		).slice(0, 2);
+		return (
+			// the column render fn expects a single Element
+			<>
+				{statuses.map((status) => {
+					const badgeShade = badgeShadeFromStatus(status.message);
+					const warningMessage = this.warningFromStatus(status.message, {
+						device: drive.device,
+						size: drive.size || 0,
+					});
+					return (
+						<Badge
+							key={status.message}
+							shade={badgeShade}
+							mr="8px"
+							tooltip={this.props.showWarnings ? warningMessage : ''}
+						>
+							{status.message}
+						</Badge>
+					);
+				})}
+			</>
+		);
+	}
+
+	private installMissingDrivers(drive: DriverlessDrive) {
+		if (drive.link) {
+			logEvent('Open driver link modal', {
+				url: drive.link,
+			});
+			this.setState({ missingDriversModal: { drive } });
+		}
+	}
+
+	private deselectingAll(rows: DrivelistDrive[]) {
+		return (
+			rows.length > 0 &&
+			rows.length === this.state.selectedList.length &&
+			this.state.selectedList.every(
+				(d) => rows.findIndex((r) => d.device === r.device) > -1,
+			)
+		);
+	}
+
+	componentDidMount() {
+		this.unsubscribe = store.subscribe(() => {
+			const drives = getDrives();
+			const image = getImage();
+			this.setState({
+				drives,
+				image,
+				selectedList:
+					(this.props.updateSelectedList && this.props.updateSelectedList()) ||
+					[],
+			});
+		});
+	}
+
+	componentWillUnmount() {
+		this.unsubscribe?.();
+	}
+
+	render() {
+		const { cancel, done, ...props } = this.props;
+		const { selectedList, drives, image, missingDriversModal } = this.state;
+
+		const displayedDrives = this.getDisplayedDrives(drives);
+		const disabledDrives = this.getDisabledDrives(drives, image);
+		const numberOfSystemDrives = drives.filter(isSystemDrive).length;
+		const numberOfDisplayedSystemDrives = displayedDrives.filter(isSystemDrive)
+			.length;
+		const numberOfHiddenSystemDrives =
+			numberOfSystemDrives - numberOfDisplayedSystemDrives;
+		const hasSystemDrives = selectedList.filter(isSystemDrive).length;
+		const showWarnings = this.props.showWarnings && hasSystemDrives;
+
+		return (
+			<Modal
+				titleElement={
+					<Flex alignItems="baseline" mb={18}>
+						<Txt fontSize={24} align="left">
+							{this.props.titleLabel}
+						</Txt>
+						<Txt
+							fontSize={11}
+							ml={12}
+							color="#5b82a7"
+							style={{ fontWeight: 600 }}
+						>
+							{drives.length} found
+						</Txt>
+					</Flex>
+				}
+				titleDetails={<Txt fontSize={11}>{getDrives().length} found</Txt>}
+				cancel={cancel}
+				done={() => done(selectedList)}
+				action={`Select (${selectedList.length})`}
+				primaryButtonProps={{
+					primary: !showWarnings,
+					warning: showWarnings,
+					disabled: !hasAvailableDrives(),
+				}}
+				{...props}
+			>
+				{!hasAvailableDrives() ? (
+					<Flex
+						flexDirection="column"
+						justifyContent="center"
+						alignItems="center"
+						width="100%"
+					>
+						<DriveSVGIcon width="40px" height="90px" />
+						<b>{this.props.emptyListLabel}</b>
+					</Flex>
+				) : (
+					<>
+						<DrivesTable
+							refFn={(t) => {
+								if (t !== null) {
+									t.setRowSelection(selectedList);
+								}
+							}}
+							checkedRowsNumber={selectedList.length}
+							multipleSelection={this.props.multipleSelection}
+							columns={this.tableColumns}
+							data={displayedDrives}
+							disabledRows={disabledDrives}
+							getRowClass={(row: Drive) =>
+								isDrivelistDrive(row) && row.isSystem ? ['system'] : []
+							}
+							rowKey="displayName"
+							onCheck={(rows: Drive[]) => {
+								let newSelection = rows.filter(isDrivelistDrive);
+								if (this.props.multipleSelection) {
+									if (this.deselectingAll(newSelection)) {
+										newSelection = [];
+									}
+									this.setState({
+										selectedList: newSelection,
+									});
+									return;
+								}
+								this.setState({
+									selectedList: newSelection.slice(newSelection.length - 1),
+								});
+							}}
+							onRowClick={(row: Drive) => {
+								if (
+									!isDrivelistDrive(row) ||
+									this.driveShouldBeDisabled(row, image)
+								) {
+									return;
+								}
+								const index = selectedList.findIndex(
+									(d) => d.device === row.device,
+								);
+								const newList = this.props.multipleSelection
+									? [...selectedList]
+									: [];
+								if (index === -1) {
+									newList.push(row);
+								} else {
+									// Deselect if selected
+									newList.splice(index, 1);
+								}
+								this.setState({
+									selectedList: newList,
+								});
+							}}
+						/>
+						{numberOfHiddenSystemDrives > 0 && (
+							<Link
+								mt={15}
+								mb={15}
+								fontSize="14px"
+								onClick={() => this.setState({ showSystemDrives: true })}
+							>
+								<Flex alignItems="center">
+									<ChevronDownSvg height="1em" fill="currentColor" />
+									<Txt ml={8}>Show {numberOfHiddenSystemDrives} hidden</Txt>
+								</Flex>
+							</Link>
+						)}
+					</>
+				)}
+				{this.props.showWarnings && hasSystemDrives ? (
+					<Alert className="system-drive-alert" style={{ width: '67%' }}>
+						Selecting your system drive is dangerous and will erase your drive!
+					</Alert>
+				) : null}
+
+				{missingDriversModal.drive !== undefined && (
+					<Modal
+						width={400}
+						title={missingDriversModal.drive.linkTitle}
+						cancel={() => this.setState({ missingDriversModal: {} })}
+						done={() => {
+							try {
+								if (missingDriversModal.drive !== undefined) {
+									openExternal(missingDriversModal.drive.link);
+								}
+							} catch (error) {
+								logException(error);
+							} finally {
+								this.setState({ missingDriversModal: {} });
+							}
+						}}
+						action="Yes, continue"
+						cancelButtonProps={{
+							children: 'Cancel',
+						}}
+						children={
+							missingDriversModal.drive.linkMessage ||
+							`Etcher will open ${missingDriversModal.drive.link} in your browser`
+						}
+					/>
+				)}
+			</Modal>
+		);
+	}
+}
--- a/lib/gui/app/components/drive-selector/styles/_drive-selector.scss
+++ b/lib/gui/app/components/drive-selector/styles/_drive-selector.scss
@@ -1,113 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.modal-drive-selector-modal .modal-content {
-  width: 315px;
-  height: 320px;
-}
-
-.modal-drive-selector-modal .modal-body {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.modal-drive-selector-modal .list-group-item[disabled] {
-  cursor: not-allowed;
-}
-
-.modal-drive-selector-modal {
-
-  .list-group-item-footer:has(span) {
-    margin-top: 8px;
-  }
-
-  .list-group-item-heading,
-  .list-group-item-text {
-    word-break: break-all;
-  }
-
-  .list-group {
-    margin-bottom: 0;
-  }
-
-  .list-group-item {
-    display: flex;
-    align-items: center;
-    border-left: 0;
-    border-right: 0;
-    border-radius: 0;
-    border-color: darken($palette-theme-light-background, 7%);
-    padding: 12px 0;
-
-    .list-group-item-section-expanded {
-      flex-grow: 1;
-      margin-left: 15px;
-    }
-
-    .list-group-item-section + .list-group-item-section {
-      margin-left: 10px;
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    > .tick {
-      font-size: 11px;
-    }
-
-    &:first-child {
-      border-top: 0;
-    }
-
-    &[disabled] .list-group-item-heading {
-      color: $palette-theme-light-soft-foreground;
-    }
-
-    .drive-init-progress {
-      appearance: none;
-      width: 100%;
-      height: 2.5px;
-      border: none;
-      border-radius: 50% 50%;
-    }
-
-    .drive-init-progress::-webkit-progress-bar {
-      background-color: $palette-theme-default-background;
-      border: none;
-      outline: none;
-    }
-
-    .drive-init-progress::-webkit-progress-value {
-      border-bottom: 1px solid darken($palette-theme-primary-background, 15);
-      background-color: $palette-theme-primary-background;
-    }
-
-  }
-
-  .list-group-item-heading {
-    font-size: 13px;
-  }
-
-  .list-group-item-text {
-    line-height: 1;
-    font-size: 11px;
-    color: $palette-theme-light-soft-foreground;
-  }
-
-  .word-keep {
-    word-break: keep-all;
-  }
-}
-
--- a/lib/gui/app/components/drive-selector/target-selector.jsx
+++ b/lib/gui/app/components/drive-selector/target-selector.jsx
@@ -1,164 +0,0 @@
-/*
- * Copyright 2019 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* eslint-disable no-magic-numbers */
-
-'use strict'
-
-// eslint-disable-next-line no-unused-vars
-const React = require('react')
-const propTypes = require('prop-types')
-const { default: styled } = require('styled-components')
-const {
-  ChangeButton,
-  DetailsText,
-  StepButton,
-  StepNameButton
-} = require('./../../styled-components')
-const { Txt } = require('rendition')
-const middleEllipsis = require('./../../utils/middle-ellipsis')
-const { bytesToClosestUnit } = require('./../../../../shared/units')
-
-const TargetDetail = styled((props) => (
-  <Txt.span {...props}>
-  </Txt.span>
-)) `
-  float: ${({ float }) => float}
-`
-
-const TargetDisplayText = ({
-  description,
-  size,
-  ...props
-}) => {
-  return (
-    <Txt.span {...props}>
-      <TargetDetail
-        float='left'>
-        {description}
-      </TargetDetail>
-      <TargetDetail
-        float='right'
-      >
-        {size}
-      </TargetDetail>
-    </Txt.span>
-  )
-}
-
-const TargetSelector = (props) => {
-  const targets = props.selection.getSelectedDrives()
-
-  if (targets.length === 1) {
-    const target = targets[0]
-    return (
-      <React.Fragment>
-        <StepNameButton
-          plain
-          tooltip={props.tooltip}
-        >
-          {/* eslint-disable no-magic-numbers */}
-          { middleEllipsis(target.description, 20) }
-        </StepNameButton>
-        {!props.flashing &&
-          <ChangeButton
-            plain
-            mb={14}
-            onClick={props.reselectDrive}
-          >
-            Change
-          </ChangeButton>
-        }
-        <DetailsText>
-          { props.constraints.hasListDriveImageCompatibilityStatus(targets, props.image) &&
-            <Txt.span className='glyphicon glyphicon-exclamation-sign'
-              ml={2}
-              tooltip={
-                props.constraints.getListDriveImageCompatibilityStatuses(targets, props.image)[0].message
-              }
-            />
-          }
-          { bytesToClosestUnit(target.size) }
-        </DetailsText>
-      </React.Fragment>
-    )
-  }
-
-  if (targets.length > 1) {
-    const targetsTemplate = []
-    for (const target of targets) {
-      targetsTemplate.push((
-        <DetailsText
-          key={target.device}
-          tooltip={
-            `${target.description} ${target.displayName} ${bytesToClosestUnit(target.size)}`
-          }
-          px={21}
-        >
-          <TargetDisplayText
-            description={middleEllipsis(target.description, 14)}
-            size={bytesToClosestUnit(target.size)}
-          >
-          </TargetDisplayText>
-        </DetailsText>
-      ))
-    }
-    return (
-      <React.Fragment>
-        <StepNameButton
-          plain
-          tooltip={props.tooltip}
-        >
-          {targets.length} Targets
-        </StepNameButton>
-        { !props.flashing &&
-          <ChangeButton
-            plain
-            onClick={props.reselectDrive}
-            mb={14}
-          >
-            Change
-          </ChangeButton>
-        }
-        {targetsTemplate}
-      </React.Fragment>
-    )
-  }
-
-  return (
-    <StepButton
-      tabindex={(targets.length > 0) ? -1 : 2 }
-      disabled={props.disabled}
-      onClick={props.openDriveSelector}
-    >
-      Select target
-    </StepButton>
-  )
-}
-
-TargetSelector.propTypes = {
-  targets: propTypes.array,
-  disabled: propTypes.bool,
-  openDriveSelector: propTypes.func,
-  selection: propTypes.object,
-  reselectDrive: propTypes.func,
-  flashing: propTypes.bool,
-  constraints: propTypes.object,
-  show: propTypes.bool,
-  tooltip: propTypes.string
-}
-
-module.exports = TargetSelector
--- a/lib/gui/app/components/drive-status-warning-modal/drive-status-warning-modal.tsx
+++ b/lib/gui/app/components/drive-status-warning-modal/drive-status-warning-modal.tsx
@@ -0,0 +1,82 @@
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Badge, Flex, Txt, ModalProps } from 'rendition';
+import { Modal, ScrollableFlex } from '../../styled-components';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+
+import * as prettyBytes from 'pretty-bytes';
+import { DriveWithWarnings } from '../../pages/main/Flash';
+
+const DriveStatusWarningModal = ({
+	done,
+	cancel,
+	isSystem,
+	drivesWithWarnings,
+}: ModalProps & {
+	isSystem: boolean;
+	drivesWithWarnings: DriveWithWarnings[];
+}) => {
+	let warningSubtitle = 'You are about to erase an unusually large drive';
+	let warningCta = 'Are you sure the selected drive is not a storage drive?';
+
+	if (isSystem) {
+		warningSubtitle = "You are about to erase your computer's drives";
+		warningCta = 'Are you sure you want to flash your system drive?';
+	}
+	return (
+		<Modal
+			footerShadow={false}
+			reverseFooterButtons={true}
+			done={done}
+			cancel={cancel}
+			cancelButtonProps={{
+				primary: false,
+				warning: true,
+				children: 'Change target',
+			}}
+			action={"Yes, I'm sure"}
+			primaryButtonProps={{
+				primary: false,
+				outline: true,
+			}}
+		>
+			<Flex
+				flexDirection="column"
+				alignItems="center"
+				justifyContent="center"
+				width="100%"
+			>
+				<Flex flexDirection="column">
+					<ExclamationTriangleSvg height="2em" fill="#fca321" />
+					<Txt fontSize="24px" color="#fca321">
+						WARNING!
+					</Txt>
+				</Flex>
+				<Txt fontSize="24px">{warningSubtitle}</Txt>
+				<ScrollableFlex
+					flexDirection="column"
+					backgroundColor="#fff5e6"
+					m="2em 0"
+					p="1em 2em"
+					width="420px"
+					maxHeight="100px"
+				>
+					{drivesWithWarnings.map((drive, i, array) => (
+						<>
+							<Flex justifyContent="space-between" alignItems="baseline">
+								<strong>{middleEllipsis(drive.description, 28)}</strong>{' '}
+								{drive.size && prettyBytes(drive.size) + ' '}
+								<Badge shade={5}>{drive.statuses[0].message}</Badge>
+							</Flex>
+							{i !== array.length - 1 ? <hr style={{ width: '100%' }} /> : null}
+						</>
+					))}
+				</ScrollableFlex>
+				<Txt style={{ fontWeight: 600 }}>{warningCta}</Txt>
+			</Flex>
+		</Modal>
+	);
+};
+
+export default DriveStatusWarningModal;
--- a/lib/gui/app/components/featured-project/featured-project.jsx
+++ b/lib/gui/app/components/featured-project/featured-project.jsx
@@ -1,57 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const React = require('react')
-const propTypes = require('prop-types')
-const SafeWebview = require('../safe-webview/safe-webview.jsx')
-const settings = require('../../models/settings')
-const analytics = require('../../modules/analytics')
-
-class FeaturedProject extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      endpoint: null
-    }
-  }
-
-  componentDidMount () {
-    return settings.load()
-      .then(() => {
-        const endpoint = settings.get('featuredProjectEndpoint') || 'https://assets.balena.io/etcher-featured/index.html'
-        this.setState({ endpoint })
-      })
-      .catch(analytics.logException)
-  }
-
-  render () {
-    return (this.state.endpoint) ? (
-      <SafeWebview
-        src={this.state.endpoint}
-        {...this.props}>
-      </SafeWebview>
-    ) : null
-  }
-}
-
-FeaturedProject.propTypes = {
-  onWebviewShow: propTypes.func
-}
-
-module.exports = FeaturedProject
--- a/lib/gui/app/components/finish/finish.tsx
+++ b/lib/gui/app/components/finish/finish.tsx
@@ -14,122 +14,104 @@
 * limitations under the License.
 */

-import * as _ from 'lodash';
 import * as React from 'react';
-import * as uuidV4 from 'uuid/v4';
+import { Flex } from 'rendition';
+import { v4 as uuidV4 } from 'uuid';

-import * as messages from '../../../../shared/messages';
 import * as flashState from '../../models/flash-state';
 import * as selectionState from '../../models/selection-state';
-import * as store from '../../models/store';
+import { Actions, store } from '../../models/store';
 import * as analytics from '../../modules/analytics';
-import * as updateLock from '../../modules/update-lock';
-import { open as openExternal } from '../../os/open-external/services/open-external';
 import { FlashAnother } from '../flash-another/flash-another';
-import { FlashResults } from '../flash-results/flash-results';
-import * as SVGIcon from '../svg-icon/svg-icon';
+import { FlashResults, FlashError } from '../flash-results/flash-results';
+import { SafeWebview } from '../safe-webview/safe-webview';

-const restart = (options: any, $state: any) => {
-	const {
-		applicationSessionUuid,
-		flashingWorkflowUuid,
-		// @ts-ignore
-	} = store.getState().toJS();
-	if (!options.preserveImage) {
-		selectionState.deselectImage();
-	}
+function restart(goToMain: () => void) {
 	selectionState.deselectAllDrives();
-	analytics.logEvent('Restart', {
-		...options,
-		applicationSessionUuid,
-		flashingWorkflowUuid,
-	});
-
-	// Re-enable lock release on inactivity
-	updateLock.resume();
+	analytics.logEvent('Restart');

 	// Reset the flashing workflow uuid
 	store.dispatch({
-		type: 'SET_FLASHING_WORKFLOW_UUID',
+		type: Actions.SET_FLASHING_WORKFLOW_UUID,
 		data: uuidV4(),
 	});

-	$state.go('main');
-};
+	goToMain();
+}

-const formattedErrors = () => {
-	const errors = _.map(
-		_.get(flashState.getFlashResults(), ['results', 'errors']),
-		error => {
-			return `${error.device}: ${error.message || error.code}`;
+function FinishPage({ goToMain }: { goToMain: () => void }) {
+	const [webviewShowing, setWebviewShowing] = React.useState(false);
+	const flashResults = flashState.getFlashResults();
+	let errors: FlashError[] = flashResults.results?.errors;
+	if (errors === undefined) {
+		errors = (store.getState().toJS().failedDevicePaths || []).map(
+			([, error]: [string, FlashError]) => ({
+				...error,
+			}),
+		);
+	}
+	const {
+		averageSpeed,
+		blockmappedSize,
+		bytesWritten,
+		failed,
+		size,
+	} = flashState.getFlashState();
+	const {
+		skip,
+		results = {
+			bytesWritten,
+			sourceMetadata: {
+				size,
+				blockmappedSize,
+			},
+			averageFlashingSpeed: averageSpeed,
+			devices: { failed, successful: 0 },
 		},
-	);
-	return errors.join('\n');
-};
-
-function FinishPage({ $state }: any) {
-	// @ts-ignore
-	const results = flashState.getFlashResults().results || {};
-	const progressMessage = messages.progress;
+	} = flashResults;
 	return (
-		<div className="page-finish row around-xs">
-			<div className="col-xs">
-				<div className="box center">
-					<FlashResults
-						results={results}
-						message={progressMessage}
-						errors={formattedErrors}
-					></FlashResults>
+		<Flex height="100%" justifyContent="space-between">
+			<Flex
+				width={webviewShowing ? '36.2vw' : '100vw'}
+				height="100vh"
+				alignItems="center"
+				justifyContent="center"
+				flexDirection="column"
+				style={{
+					position: 'absolute',
+					top: 0,
+					zIndex: 1,
+					boxShadow: '0 2px 15px 0 rgba(0, 0, 0, 0.2)',
+				}}
+			>
+				<FlashResults
+					image={selectionState.getImageName()}
+					results={results}
+					skip={skip}
+					errors={errors}
+					mb="32px"
+					goToMain={goToMain}
+				/>

-					<FlashAnother
-						onClick={(options: any) => restart(options, $state)}
-					></FlashAnother>
-				</div>
-
-				<div className="box center">
-					<div className="fallback-banner">
-						<div className="caption caption-big">
-							Thanks for using
-							<span
-								style={{ cursor: 'pointer' }}
-								onClick={() =>
-									openExternal(
-										'https://balena.io/etcher?ref=etcher_offline_banner',
-									)
-								}
-							>
-								<SVGIcon
-									paths={['../../assets/etcher.svg']}
-									width="165px"
-									height="auto"
-								></SVGIcon>
-							</span>
-						</div>
-						<div className="caption caption-small fallback-footer">
-							made with
-							<SVGIcon
-								paths={['../../assets/love.svg']}
-								width="auto"
-								height="20px"
-							></SVGIcon>
-							by
-							<span
-								style={{ cursor: 'pointer' }}
-								onClick={() =>
-									openExternal('https://balena.io?ref=etcher_success')
-								}
-							>
-								<SVGIcon
-									paths={['../../assets/balena.svg']}
-									width="auto"
-									height="20px"
-								></SVGIcon>
-							</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+				<FlashAnother
+					onClick={() => {
+						restart(goToMain);
+					}}
+				/>
+			</Flex>
+			<SafeWebview
+				src="https://www.balena.io/etcher/success-banner?borderTop=false&darkBackground=true"
+				onWebviewShow={setWebviewShowing}
+				style={{
+					display: webviewShowing ? 'flex' : 'none',
+					position: 'absolute',
+					right: 0,
+					bottom: 0,
+					width: '63.8vw',
+					height: '100vh',
+				}}
+			/>
+		</Flex>
 	);
 }

--- a/lib/gui/app/components/finish/index.ts
+++ b/lib/gui/app/components/finish/index.ts
@@ -1,35 +0,0 @@
-/*
- * Copyright 2019 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @module Etcher.Pages.Finish
- */
-
-import * as angular from 'angular';
-import { react2angular } from 'react2angular';
-import FinishPage from './finish';
-
-export const MODULE_NAME = 'Etcher.Pages.Finish';
-const Finish = angular.module(MODULE_NAME, []);
-
-Finish.component('finish', react2angular(FinishPage, [], ['$state']));
-
-Finish.config(($stateProvider: any) => {
-	$stateProvider.state('success', {
-		url: '/success',
-		template: '<finish style="width:100%"></finish>',
-	});
-});
--- a/lib/gui/app/components/flash-another/flash-another.tsx
+++ b/lib/gui/app/components/flash-another/flash-another.tsx
@@ -15,30 +15,17 @@
 */

 import * as React from 'react';
-import styled from 'styled-components';
-import { position, right } from 'styled-system';
-import { BaseButton, ThemedProvider } from '../../styled-components';

-const Div = styled.div<any>`
-	${position}
-	${right}
-`;
+import { BaseButton } from '../../styled-components';

 export interface FlashAnotherProps {
-	onClick: (options: { preserveImage: boolean }) => void;
+	onClick: () => void;
 }

 export const FlashAnother = (props: FlashAnotherProps) => {
 	return (
-		<ThemedProvider>
-			<Div position="absolute" right="152px">
-				<BaseButton
-					primary
-					onClick={props.onClick.bind(null, { preserveImage: true })}
-				>
-					Flash Another
-				</BaseButton>
-			</Div>
-		</ThemedProvider>
+		<BaseButton primary onClick={props.onClick}>
+			Flash another
+		</BaseButton>
 	);
 };
--- a/lib/gui/app/components/flash-another/index.ts
+++ b/lib/gui/app/components/flash-another/index.ts
@@ -1,24 +0,0 @@
-/*
- * Copyright 2019 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as angular from 'angular';
-import { react2angular } from 'react2angular';
-import { FlashAnother } from './flash-another';
-
-export const MODULE_NAME = 'Etcher.Components.FlashAnother';
-const FlashAnotherModule = angular.module(MODULE_NAME, []);
-
-FlashAnotherModule.component('flashAnother', react2angular(FlashAnother));
--- a/lib/gui/app/components/flash-results/flash-results.tsx
+++ b/lib/gui/app/components/flash-results/flash-results.tsx
@@ -14,52 +14,222 @@
 * limitations under the License.
 */

+import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
+import CheckCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/check-circle.svg';
+import TimesCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/times-circle.svg';
 import * as _ from 'lodash';
+import outdent from 'outdent';
 import * as React from 'react';
+import { Flex, FlexProps, Link, TableColumn, Txt } from 'rendition';
 import styled from 'styled-components';
-import { left, position, space, top } from 'styled-system';
-import { Underline } from '../../styled-components';

-const Div: any = styled.div<any>`
-  ${position}
-  ${top}
-  ${left}
-  ${space}
+import { progress } from '../../../../shared/messages';
+import { bytesToMegabytes } from '../../../../shared/units';
+
+import FlashSvg from '../../../assets/flash.svg';
+import { resetState } from '../../models/flash-state';
+import * as selection from '../../models/selection-state';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+import { Modal, Table } from '../../styled-components';
+
+const ErrorsTable = styled((props) => <Table<FlashError> {...props} />)`
+	[data-display='table-head'],
+	[data-display='table-body'] {
+		[data-display='table-cell'] {
+			&:first-child {
+				width: 30%;
+			}
+
+			&:nth-child(2) {
+				width: 20%;
+			}
+
+			&:last-child {
+				width: 50%;
+			}
+		}
 `;

-export const FlashResults: any = ({
-	errors,
-	results,
-	message,
-}: {
-	errors: () => string;
-	results: any;
-	message: any;
+const DoneIcon = (props: {
+	skipped: boolean;
+	allFailed: boolean;
+	someFailed: boolean;
 }) => {
-	return (
-		<Div position="absolute" left="153px" top="66px">
-			<div className="inline-flex title">
-				<span className="tick tick--success space-right-medium"></span>
-				<h3>Flash Complete!</h3>
-			</div>
-			<Div className="results" mt="11px" mr="0" mb="0" ml="40px">
-				<Underline tooltip={errors()}>
-					{_.map(results.devices, (quantity, type) => {
-						return quantity ? (
-							<div
-								key={type}
-								className={`target-status-line target-status-${type}`}
-							>
-								<span className="target-status-dot"></span>
-								<span className="target-status-quantity">{quantity}</span>
-								<span className="target-status-message">
-									{message[type](quantity)}
-								</span>
-							</div>
-						) : null;
-					})}
-				</Underline>
-			</Div>
-		</Div>
+	const { allFailed, someFailed } = props;
+	const someOrAllFailed = allFailed || someFailed;
+	const svgProps = {
+		width: '24px',
+		fill: someOrAllFailed ? '#c6c8c9' : '#1ac135',
+		style: {
+			width: '28px',
+			height: '28px',
+			marginTop: '-25px',
+			marginLeft: '13px',
+			zIndex: 1,
+			color: someOrAllFailed ? '#c6c8c9' : '#1ac135',
+		},
+	};
+	return allFailed && !props.skipped ? (
+		<TimesCircleSvg {...svgProps} />
+	) : (
+		<CheckCircleSvg {...svgProps} />
 	);
 };
+
+export interface FlashError extends Error {
+	description: string;
+	device: string;
+	code: string;
+}
+
+function formattedErrors(errors: FlashError[]) {
+	return errors
+		.map((error) => `${error.device}: ${error.message || error.code}`)
+		.join('\n');
+}
+
+const columns: Array<TableColumn<FlashError>> = [
+	{
+		field: 'description',
+		label: 'Target',
+	},
+	{
+		field: 'device',
+		label: 'Location',
+	},
+	{
+		field: 'message',
+		label: 'Error',
+		render: (message: string, { code }: FlashError) => {
+			return message ?? code;
+		},
+	},
+];
+
+export function FlashResults({
+	goToMain,
+	image = '',
+	errors,
+	results,
+	skip,
+	...props
+}: {
+	goToMain: () => void;
+	image?: string;
+	errors: FlashError[];
+	skip: boolean;
+	results: {
+		bytesWritten: number;
+		sourceMetadata: {
+			size: number;
+			blockmappedSize: number;
+		};
+		averageFlashingSpeed: number;
+		devices: { failed: number; successful: number };
+	};
+} & FlexProps) {
+	const [showErrorsInfo, setShowErrorsInfo] = React.useState(false);
+	const allFailed = results.devices.successful === 0;
+	const effectiveSpeed = _.round(
+		bytesToMegabytes(
+			results.sourceMetadata.size /
+				(results.bytesWritten / results.averageFlashingSpeed),
+		),
+		1,
+	);
+	return (
+		<Flex flexDirection="column" {...props}>
+			<Flex alignItems="center" flexDirection="column">
+				<Flex
+					alignItems="center"
+					mt="50px"
+					mb="32px"
+					color="#7e8085"
+					flexDirection="column"
+				>
+					<FlashSvg width="40px" height="40px" className="disabled" />
+					<DoneIcon
+						skipped={skip}
+						allFailed={allFailed}
+						someFailed={results.devices.failed !== 0}
+					/>
+					<Txt>{middleEllipsis(image, 24)}</Txt>
+				</Flex>
+				<Txt fontSize={24} color="#fff" mb="17px">
+					Flash Complete!
+				</Txt>
+				{skip ? <Flex color="#7e8085">Validation has been skipped</Flex> : null}
+			</Flex>
+			<Flex flexDirection="column" color="#7e8085">
+				{Object.entries(results.devices).map(([type, quantity]) => {
+					const failedTargets = type === 'failed';
+					return quantity ? (
+						<Flex alignItems="center">
+							<CircleSvg
+								width="14px"
+								fill={type === 'failed' ? '#ff4444' : '#1ac135'}
+								color={failedTargets ? '#ff4444' : '#1ac135'}
+							/>
+							<Txt ml="10px" color="#fff">
+								{quantity}
+							</Txt>
+							<Txt
+								ml="10px"
+								tooltip={failedTargets ? formattedErrors(errors) : undefined}
+							>
+								{progress[type](quantity)}
+							</Txt>
+							{failedTargets && (
+								<Link ml="10px" onClick={() => setShowErrorsInfo(true)}>
+									more info
+								</Link>
+							)}
+						</Flex>
+					) : null;
+				})}
+				{!allFailed && (
+					<Txt
+						fontSize="10px"
+						style={{
+							fontWeight: 500,
+							textAlign: 'center',
+						}}
+						tooltip={outdent({ newline: ' ' })`
+							The speed is calculated by dividing the image size by the flashing time.
+							Disk images with ext partitions flash faster as we are able to skip unused parts.
+						`}
+					>
+						Effective speed: {effectiveSpeed} MB/s
+					</Txt>
+				)}
+			</Flex>
+
+			{showErrorsInfo && (
+				<Modal
+					titleElement={
+						<Flex alignItems="baseline" mb={18}>
+							<Txt fontSize={24} align="left">
+								Failed targets
+							</Txt>
+						</Flex>
+					}
+					action="Retry failed targets"
+					cancel={() => setShowErrorsInfo(false)}
+					done={() => {
+						setShowErrorsInfo(false);
+						resetState();
+						selection
+							.getSelectedDrives()
+							.filter((drive) =>
+								errors.every((error) => error.device !== drive.device),
+							)
+							.forEach((drive) => selection.deselectDrive(drive.device));
+						goToMain();
+					}}
+				>
+					<ErrorsTable columns={columns} data={errors} />
+				</Modal>
+			)}
+		</Flex>
+	);
+}
--- a/lib/gui/app/components/flash-results/index.ts
+++ b/lib/gui/app/components/flash-results/index.ts
@@ -1,28 +0,0 @@
-/*
- * Copyright 2019 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * @module Etcher.Components.FlashResults
- */
-
-import * as angular from 'angular';
-import { react2angular } from 'react2angular';
-import { FlashResults } from './flash-results';
-
-export const MODULE_NAME = 'Etcher.Components.FlashResults';
-const FlashResultsModule = angular.module(MODULE_NAME, []);
-
-FlashResultsModule.component('flashResults', react2angular(FlashResults));
--- a/lib/gui/app/components/image-selector/image-selector.jsx
+++ b/lib/gui/app/components/image-selector/image-selector.jsx
@@ -1,404 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const Bluebird = require('bluebird')
-const sdk = require('etcher-sdk')
-const _ = require('lodash')
-const path = require('path')
-const propTypes = require('prop-types')
-const React = require('react')
-const Dropzone = require('react-dropzone').default
-const errors = require('../../../../shared/errors')
-const messages = require('../../../../shared/messages')
-const supportedFormats = require('../../../../shared/supported-formats')
-const shared = require('../../../../shared/units')
-const selectionState = require('../../models/selection-state')
-const store = require('../../models/store')
-const analytics = require('../../modules/analytics')
-const exceptionReporter = require('../../modules/exception-reporter')
-const osDialog = require('../../os/dialog')
-const { replaceWindowsNetworkDriveLetter } = require('../../os/windows-network-drives')
-const {
-  StepButton,
-  StepNameButton,
-  StepSelection,
-  Footer,
-  Underline,
-  DetailsText,
-  ChangeButton
-} = require('../../styled-components')
-const {
-  Modal
-} = require('rendition')
-const middleEllipsis = require('../../utils/middle-ellipsis')
-const SVGIcon = require('../svg-icon/svg-icon.jsx')
-const { default: styled } = require('styled-components')
-
-// TODO move these styles to rendition
-const ModalText = styled.p `
-  a {
-    color: rgb(0, 174, 239);
-
-    &:hover {
-      color: rgb(0, 139, 191);
-    }
-  }
-`
-
-/**
- * @summary Main supported extensions
- * @constant
- * @type {String[]}
- * @public
- */
-const mainSupportedExtensions = _.intersection([
-  'img',
-  'iso',
-  'zip'
-], supportedFormats.getAllExtensions())
-
-/**
- * @summary Extra supported extensions
- * @constant
- * @type {String[]}
- * @public
- */
-const extraSupportedExtensions = _.difference(
-  supportedFormats.getAllExtensions(),
-  mainSupportedExtensions
-).sort()
-
-const getState = () => {
-  return {
-    hasImage: selectionState.hasImage(),
-    imageName: selectionState.getImageName(),
-    imageSize: selectionState.getImageSize()
-  }
-}
-
-class ImageSelector extends React.Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      ...getState(),
-      warning: null,
-      showImageDetails: false
-    }
-
-    this.openImageSelector = this.openImageSelector.bind(this)
-    this.reselectImage = this.reselectImage.bind(this)
-    this.handleOnDrop = this.handleOnDrop.bind(this)
-    this.showSelectedImageDetails = this.showSelectedImageDetails.bind(this)
-  }
-
-  componentDidMount () {
-    this.unsubscribe = store.observe(() => {
-      this.setState(getState())
-    })
-  }
-
-  componentWillUnmount () {
-    this.unsubscribe()
-  }
-
-  reselectImage () {
-    analytics.logEvent('Reselect image', {
-      previousImage: selectionState.getImage(),
-      applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-      flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-    })
-
-    this.openImageSelector()
-  }
-
-  selectImage (image) {
-    if (!supportedFormats.isSupportedImage(image.path)) {
-      const invalidImageError = errors.createUserError({
-        title: 'Invalid image',
-        description: messages.error.invalidImage(image)
-      })
-
-      osDialog.showError(invalidImageError)
-      analytics.logEvent('Invalid image', _.merge({
-        applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-        flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-      }, image))
-      return
-    }
-
-    Bluebird.try(() => {
-      let message = null
-      let title = null
-
-      if (supportedFormats.looksLikeWindowsImage(image.path)) {
-        analytics.logEvent('Possibly Windows image', {
-          image,
-          applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-          flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-        })
-        message = messages.warning.looksLikeWindowsImage()
-        title = 'Possible Windows image detected'
-      } else if (!image.hasMBR) {
-        analytics.logEvent('Missing partition table', {
-          image,
-          applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-          flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-        })
-        title = 'Missing partition table'
-        message = messages.warning.missingPartitionTable()
-      }
-
-      if (message) {
-        this.setState({
-          warning: {
-            message,
-            title
-          }
-        })
-
-        return
-      }
-
-      return false
-    }).then(() => {
-      selectionState.selectImage(image)
-
-      // An easy way so we can quickly identify if we're making use of
-      // certain features without printing pages of text to DevTools.
-      image.logo = Boolean(image.logo)
-      image.blockMap = Boolean(image.blockMap)
-
-      return analytics.logEvent('Select image', {
-        image,
-        applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-        flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-      })
-    }).catch(exceptionReporter.report)
-  }
-
-  async selectImageByPath (imagePath) {
-    try {
-      // eslint-disable-next-line no-param-reassign
-      imagePath = await replaceWindowsNetworkDriveLetter(imagePath)
-    } catch (error) {
-      analytics.logException(error)
-    }
-    if (!supportedFormats.isSupportedImage(imagePath)) {
-      const invalidImageError = errors.createUserError({
-        title: 'Invalid image',
-        description: messages.error.invalidImage(imagePath)
-      })
-
-      osDialog.showError(invalidImageError)
-      analytics.logEvent('Invalid image', { path: imagePath })
-      return
-    }
-
-    const source = new sdk.sourceDestination.File(imagePath, sdk.sourceDestination.File.OpenFlags.Read)
-    try {
-      const innerSource = await source.getInnerSource()
-      const metadata = await innerSource.getMetadata()
-      const partitionTable = await innerSource.getPartitionTable()
-      if (partitionTable) {
-        metadata.hasMBR = true
-        metadata.partitions = partitionTable.partitions
-      }
-      metadata.path = imagePath
-      // eslint-disable-next-line no-magic-numbers
-      metadata.extension = path.extname(imagePath).slice(1)
-      this.selectImage(metadata)
-    } catch (error) {
-      const imageError = errors.createUserError({
-        title: 'Error opening image',
-        description: messages.error.openImage(path.basename(imagePath), error.message)
-      })
-      osDialog.showError(imageError)
-      analytics.logException(error)
-    } finally {
-      try {
-        await source.close()
-      } catch (error) {
-        // Noop
-      }
-    }
-  }
-
-  /**
-   * @summary Open image selector
-   * @function
-   * @public
-   *
-   * @example
-   * ImageSelectionController.openImageSelector();
-   */
-  openImageSelector () {
-    analytics.logEvent('Open image selector', {
-      applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-      flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-    })
-
-    osDialog.selectImage().then((imagePath) => {
-      // Avoid analytics and selection state changes
-      // if no file was resolved from the dialog.
-      if (!imagePath) {
-        analytics.logEvent('Image selector closed', {
-          applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-          flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-        })
-        return
-      }
-
-      this.selectImageByPath(imagePath)
-    }).catch(exceptionReporter.report)
-  }
-
-  handleOnDrop (acceptedFiles) {
-    const [ file ] = acceptedFiles
-
-    if (file) {
-      this.selectImageByPath(file.path)
-    }
-  }
-
-  showSelectedImageDetails () {
-    analytics.logEvent('Show selected image tooltip', {
-      imagePath: selectionState.getImagePath(),
-      flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
-      applicationSessionUuid: store.getState().toJS().applicationSessionUuid
-    })
-
-    this.setState({
-      showImageDetails: true
-    })
-  }
-
-  // TODO add a visual change when dragging a file over the selector
-  render () {
-    const {
-      flashing
-    } = this.props
-    const {
-      showImageDetails
-    } = this.state
-
-    const hasImage = selectionState.hasImage()
-
-    const imageBasename = hasImage ? path.basename(selectionState.getImagePath()) : ''
-    const imageName = selectionState.getImageName()
-    const imageSize = selectionState.getImageSize()
-
-    return (
-      <React.Fragment>
-        <div className="box text-center relative">
-          <Dropzone multiple={false} onDrop={this.handleOnDrop}>
-            {({ getRootProps, getInputProps }) => (
-              <div className="center-block" {...getRootProps()}>
-                <input {...getInputProps()} />
-                <SVGIcon contents={selectionState.getImageLogo()} paths={[ '../../assets/image.svg' ]} />
-              </div>
-            )}
-          </Dropzone>
-
-          <div className="space-vertical-large">
-            {hasImage ? (
-              <React.Fragment>
-                <StepNameButton
-                  plain
-                  onClick={this.showSelectedImageDetails}
-                  tooltip={imageBasename}
-                >
-                  {/* eslint-disable no-magic-numbers */}
-                  { middleEllipsis(imageName || imageBasename, 20) }
-                </StepNameButton>
-                { !flashing &&
-                  <ChangeButton
-                    plain
-                    mb={14}
-                    onClick={this.reselectImage}
-                  >
-                    Change
-                  </ChangeButton>
-                }
-                <DetailsText>
-                  {shared.bytesToClosestUnit(imageSize)}
-                </DetailsText>
-              </React.Fragment>
-            ) : (
-              <StepSelection>
-                <StepButton
-                  onClick={this.openImageSelector}
-                >
-                  Select image
-                </StepButton>
-                <Footer>
-                  { mainSupportedExtensions.join(', ') }, and{' '}
-                  <Underline
-                    tooltip={ extraSupportedExtensions.join(', ') }
-                  >
-                    many more
-                  </Underline>
-                </Footer>
-              </StepSelection>
-            )}
-          </div>
-        </div>
-
-        {Boolean(this.state.warning) && (
-          <Modal
-            title={(
-              <span>
-                <span style={{ color: '#d9534f' }} className="glyphicon glyphicon-exclamation-sign"></span>
-                {' '}
-                <span>{this.state.warning.title}</span>
-              </span>
-            )}
-            action='Continue'
-            cancel={() => {
-              this.setState({ warning: null })
-              this.reselectImage()
-            }}
-            done={() => {
-              this.setState({ warning: null })
-            }}
-            primaryButtonProps={{ warning: true, primary: false }}
-          >
-            <ModalText dangerouslySetInnerHTML={{ __html: this.state.warning.message }} />
-          </Modal>
-        )}
-
-        {showImageDetails && (
-          <Modal
-            title="Image File Name"
-            done={() => {
-              this.setState({ showImageDetails: false })
-            }}
-          >
-            {selectionState.getImagePath()}
-          </Modal>
-        )}
-      </React.Fragment>
-    )
-  }
-}
-
-ImageSelector.propTypes = {
-  flashing: propTypes.bool
-}
-
-module.exports = ImageSelector
--- a/lib/gui/app/components/modal/services/modal.js
+++ b/lib/gui/app/components/modal/services/modal.js
@@ -1,100 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const store = require('../../../models/store')
-const analytics = require('../../../modules/analytics')
-
-module.exports = function ($uibModal, $q) {
-  /**
-   * @summary Open a modal
-   * @function
-   * @public
-   *
-   * @param {Object} options - options
-   * @param {String} options.template - template contents
-   * @param {String} options.controller - controller
-   * @param {String} [options.size='sm'] - modal size
-   * @param {Object} options.resolve - modal resolves
-   * @returns {Object} modal
-   *
-   * @example
-   * ModalService.open({
-   *   name: 'my modal',
-   *   template: require('./path/to/modal.tpl.html'),
-   *   controller: 'DriveSelectorController as modal',
-   * });
-   */
-  this.open = (options = {}) => {
-    _.defaults(options, {
-      size: 'sm'
-    })
-
-    analytics.logEvent('Open modal', {
-      name: options.name,
-      applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-      flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-    })
-
-    const modal = $uibModal.open({
-      animation: true,
-      template: options.template,
-      controller: options.controller,
-      size: options.size,
-      resolve: options.resolve,
-      backdrop: 'static'
-    })
-
-    return {
-      close: modal.close,
-      result: $q((resolve, reject) => {
-        modal.result.then((value) => {
-          analytics.logEvent('Modal accepted', {
-            name: options.name,
-            value,
-            applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-            flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-          })
-
-          resolve(value)
-        }).catch((error) => {
-          // Bootstrap doesn't 'resolve' these but cancels the dialog
-          if (error === 'escape key press') {
-            analytics.logEvent('Modal rejected', {
-              name: options.name,
-              method: error,
-              applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-              flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-            })
-
-            return resolve()
-          }
-
-          analytics.logEvent('Modal rejected', {
-            name: options.name,
-            value: error,
-            applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-            flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-          })
-
-          return reject(error)
-        })
-      })
-    }
-  }
-}
--- a/lib/gui/app/components/modal/styles/_modal.scss
+++ b/lib/gui/app/components/modal/styles/_modal.scss
@@ -1,106 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.modal-content {
-  background-color: $palette-theme-light-background;
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  height: auto;
-  overflow: hidden;
-}
-
-.modal-header {
-  display: flex;
-  align-items: baseline;
-  font-size: 12px;
-  color: $palette-theme-light-soft-foreground;
-  padding: 11px 20px;
-  flex-grow: 0;
-}
-
-.modal-title {
-  font-size: inherit;
-  flex-grow: 1;
-}
-
-.modal-body {
-  flex-grow: 1;
-  color: $palette-theme-light-foreground;
-  padding: 20px;
-  max-height: 250px;
-  overflow: auto;
-
-  a {
-    color: $palette-theme-primary-background;
-  }
-
-  > p {
-    white-space: pre-line;
-  }
-
-  > p:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.modal-menu {
-  display: flex;
-
-  > * {
-    flex-basis: auto;
-  }
-}
-
-// UI Bootstrap adds the `.modal-open` class to the <body>
-// element and sets its right padding to the width of the
-// window, causing the window content to overflow and get
-// pushed to the bottom.
-// The `!important` flag is needed since UI Bootstrap inlines
-// the styles programmatically to the element.
-.modal-open {
-  padding-right: 0 !important;
-}
-
-// Disable modal opacity
-.modal-backdrop.in {
-  opacity: 0;
-}
-
-.modal-footer {
-  flex-grow: 0;
-  border: 0;
-  text-align: center;
-}
-
-.modal {
-
-  // Center the modal using Flexbox so we can
-  // freely use any height.
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-
-  .button[disabled] {
-    background-color: $palette-theme-light-disabled-background;
-    color: $palette-theme-light-disabled-foreground;
-  }
-}
-
-.modal-dialog {
-  margin: 0;
-  position: initial;
-}
--- a/lib/gui/app/components/progress-button/progress-button.jsx
+++ b/lib/gui/app/components/progress-button/progress-button.jsx
@@ -1,155 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const React = require('react')
-const propTypes = require('prop-types')
-const Color = require('color')
-
-const {
-  default: styled,
-  css,
-  keyframes
-} = require('styled-components')
-
-const { ProgressBar } = require('rendition')
-
-const { colors } = require('./../../theme')
-const { StepButton, StepSelection } = require('./../../styled-components')
-
-const darkenForegroundStripes = 0.18
-const desaturateForegroundStripes = 0.2
-const progressButtonStripesForegroundColor = Color(colors.primary.background)
-  .darken(darkenForegroundStripes)
-  .desaturate(desaturateForegroundStripes)
-  .string()
-
-const desaturateBackgroundStripes = 0.05
-const progressButtonStripesBackgroundColor = Color(colors.primary.background)
-  .desaturate(desaturateBackgroundStripes)
-  .string()
-
-const ProgressButtonStripes = keyframes `
-  0% {
-    background-position: 0 0;
-  }
-
-  100% {
-    background-position: 20px 20px;
-  }
-`
-
-const ProgressButtonStripesRule = css `
-  ${ProgressButtonStripes} 1s linear infinite;
-`
-
-const FlashProgressBar = styled(ProgressBar) `
-  > div {
-    width: 200px;
-    height: 48px;
-    color: white !important;
-    text-shadow: none !important;
-  }
-
-  width: 200px;
-  height: 48px;
-  font-size: 16px;
-  line-height: 48px;
-
-  background: ${Color(colors.warning.background).darken(darkenForegroundStripes).string()};
-`
-
-const FlashProgressBarValidating = styled(FlashProgressBar) `
-
-  // Notice that we add 0.01 to certain gradient stop positions.
-  // That workarounds a Chrome rendering issue where diagonal
-  // lines look spiky.
-  // See https://github.com/balena-io/etcher/issues/472
-
-  background-image: -webkit-gradient(linear, 0 0, 100% 100%,
-    color-stop(0.25, ${progressButtonStripesForegroundColor}),
-    color-stop(0.26, ${progressButtonStripesBackgroundColor}),
-    color-stop(0.50, ${progressButtonStripesBackgroundColor}),
-    color-stop(0.51, ${progressButtonStripesForegroundColor}),
-    color-stop(0.75, ${progressButtonStripesForegroundColor}),
-    color-stop(0.76 , ${progressButtonStripesBackgroundColor}),
-    to(${progressButtonStripesBackgroundColor}));
-
-  background-color: white;
-
-  animation: ${ProgressButtonStripesRule};
-  overflow: hidden;
-
-  background-size: 20px 20px;
-`
-
-/**
- * Progress Button component
- */
-class ProgressButton extends React.Component {
-  render () {
-    if (this.props.active) {
-      if (this.props.striped) {
-        return (
-          <StepSelection>
-            <FlashProgressBarValidating
-              primary
-              emphasized
-              value= { this.props.percentage }
-            >
-              { this.props.label }
-            </FlashProgressBarValidating>
-          </StepSelection>
-        )
-      }
-
-      return (
-        <StepSelection>
-          <FlashProgressBar
-            warning
-            emphasized
-            value= { this.props.percentage }
-          >
-            { this.props.label }
-          </FlashProgressBar>
-        </StepSelection>
-      )
-    }
-
-    return (
-      <StepSelection>
-        <StepButton
-          onClick= { this.props.callback }
-          disabled= { this.props.disabled }
-        >
-          {this.props.label}
-        </StepButton>
-      </StepSelection>
-    )
-  }
-}
-
-ProgressButton.propTypes = {
-  striped: propTypes.bool,
-  active: propTypes.bool,
-  percentage: propTypes.number,
-  label: propTypes.string,
-  disabled: propTypes.bool,
-  callback: propTypes.func
-}
-
-module.exports = ProgressButton
--- a/lib/gui/app/components/progress-button/progress-button.tsx
+++ b/lib/gui/app/components/progress-button/progress-button.tsx
@@ -0,0 +1,135 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { Flex, Button, ProgressBar, Txt } from 'rendition';
+import { default as styled } from 'styled-components';
+
+import { fromFlashState, FlashState } from '../../modules/progress-status';
+import { StepButton } from '../../styled-components';
+
+const FlashProgressBar = styled(ProgressBar)`
+	> div {
+		width: 220px;
+		height: 12px;
+		color: white !important;
+		text-shadow: none !important;
+		transition-duration: 0s;
+		> div {
+			transition-duration: 0s;
+		}
+	}
+
+	width: 220px;
+	height: 12px;
+	margin-bottom: 6px;
+	border-radius: 14px;
+	font-size: 16px;
+	line-height: 48px;
+
+	background: #2f3033;
+`;
+
+interface ProgressButtonProps {
+	type: FlashState['type'];
+	active: boolean;
+	percentage: number;
+	position: number;
+	disabled: boolean;
+	cancel: (type: string) => void;
+	callback: () => void;
+	warning?: boolean;
+}
+
+const colors = {
+	decompressing: '#00aeef',
+	flashing: '#da60ff',
+	verifying: '#1ac135',
+	downloading: '#00aeef',
+	default: '#00aeef',
+} as const;
+
+const CancelButton = styled(({ type, onClick, ...props }) => {
+	const status = type === 'verifying' ? 'Skip' : 'Cancel';
+	return (
+		<Button plain onClick={() => onClick(status)} {...props}>
+			{status}
+		</Button>
+	);
+})`
+	font-weight: 600;
+	&&& {
+		width: auto;
+		height: auto;
+		font-size: 14px;
+	}
+`;
+
+export class ProgressButton extends React.PureComponent<ProgressButtonProps> {
+	public render() {
+		const type = this.props.type || 'default';
+		const percentage = this.props.percentage;
+		const warning = this.props.warning;
+		const { status, position } = fromFlashState({
+			type: this.props.type,
+			percentage,
+			position: this.props.position,
+		});
+		if (this.props.active) {
+			return (
+				<>
+					<Flex
+						alignItems="baseline"
+						justifyContent="space-between"
+						width="100%"
+						style={{
+							marginTop: 42,
+							marginBottom: '6px',
+							fontSize: 16,
+							fontWeight: 600,
+						}}
+					>
+						<Flex>
+							<Txt color="#fff">{status}&nbsp;</Txt>
+							<Txt color={colors[type]}>{position}</Txt>
+						</Flex>
+						{type && (
+							<CancelButton
+								type={type}
+								onClick={this.props.cancel}
+								color="#00aeef"
+							/>
+						)}
+					</Flex>
+					<FlashProgressBar background={colors[type]} value={percentage} />
+				</>
+			);
+		}
+		return (
+			<StepButton
+				primary={!warning}
+				warning={warning}
+				onClick={this.props.callback}
+				disabled={this.props.disabled}
+				style={{
+					marginTop: 30,
+				}}
+			>
+				Flash!
+			</StepButton>
+		);
+	}
+}
--- a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx
+++ b/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx
@@ -1,81 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const React = require('react')
-const propTypes = require('prop-types')
-const styled = require('styled-components').default
-const { color } = require('styled-system')
-const SvgIcon = require('../svg-icon/svg-icon.jsx')
-
-const Div = styled.div `
-  position: absolute;
-  top: 45px;
-  left: 545px;
-
-  > span.step-name {
-    justify-content: flex-start;
-
-    > span {
-      margin-left: 10px;
-    }
-
-    > span:nth-child(2) {
-      font-weight: 500;
-    }
-
-    > span:nth-child(3) {
-      font-weight: 400;
-      font-style: italic;
-    }
-  }
-
-  .svg-icon[disabled] {
-    opacity: 0.4;
-  }
-`
-
-const Span = styled.span `
-  ${color}
-`
-
-const ReducedFlashingInfos = (props) => {
-  return (props.shouldShow) ? (
-    <Div>
-      <Span className="step-name">
-        <SvgIcon disabled contents={[ props.imageLogo ]} paths={[ '../../assets/image.svg' ]} width='20px'></SvgIcon>
-        <Span>{ props.imageName }</Span>
-        <Span color='#7e8085'>{ props.imageSize }</Span>
-      </Span>
-
-      <Span className="step-name">
-        <SvgIcon disabled paths={[ '../../assets/drive.svg' ]} width='20px'></SvgIcon>
-        <Span>{ props.driveTitle }</Span>
-      </Span>
-    </Div>
-  ) : null
-}
-
-ReducedFlashingInfos.propTypes = {
-  imageLogo: propTypes.string,
-  imageName: propTypes.string,
-  imageSize: propTypes.string,
-  driveTitle: propTypes.string,
-  shouldShow: propTypes.bool
-}
-
-module.exports = ReducedFlashingInfos
--- a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx
+++ b/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { Flex, Txt } from 'rendition';
+
+import DriveSvg from '../../../assets/drive.svg';
+import ImageSvg from '../../../assets/image.svg';
+import { SVGIcon } from '../svg-icon/svg-icon';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+
+interface ReducedFlashingInfosProps {
+	imageLogo?: string;
+	imageName?: string;
+	imageSize: string;
+	driveTitle: string;
+	driveLabel: string;
+	style?: React.CSSProperties;
+}
+
+export class ReducedFlashingInfos extends React.Component<
+	ReducedFlashingInfosProps
+> {
+	constructor(props: ReducedFlashingInfosProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		const { imageName = '' } = this.props;
+		return (
+			<Flex
+				flexDirection="column"
+				style={this.props.style ? this.props.style : undefined}
+			>
+				<Flex mb={16}>
+					<SVGIcon
+						disabled
+						width="21px"
+						height="21px"
+						contents={this.props.imageLogo}
+						fallback={ImageSvg}
+						style={{ marginRight: '9px' }}
+					/>
+					<Txt
+						style={{ marginRight: '9px' }}
+						tooltip={{ text: imageName, placement: 'right' }}
+					>
+						{middleEllipsis(imageName, 16)}
+					</Txt>
+					<Txt color="#7e8085">{this.props.imageSize}</Txt>
+				</Flex>
+
+				<Flex>
+					<DriveSvg width="21px" height="21px" style={{ marginRight: '9px' }} />
+					<Txt tooltip={{ text: this.props.driveLabel, placement: 'right' }}>
+						{middleEllipsis(this.props.driveTitle, 16)}
+					</Txt>
+				</Flex>
+			</Flex>
+		);
+	}
+}
--- a/lib/gui/app/components/safe-webview/index.js
+++ b/lib/gui/app/components/safe-webview/index.js
@@ -1,34 +0,0 @@
-/*
- * Copyright 2018 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.SafeWebview
- */
-
-const angular = require('angular')
-const { react2angular } = require('react2angular')
-
-const MODULE_NAME = 'Etcher.Components.SafeWebview'
-const SafeWebview = angular.module(MODULE_NAME, [])
-
-SafeWebview.component(
-  'safeWebview',
-  react2angular(require('./safe-webview.jsx'))
-)
-
-module.exports = MODULE_NAME
--- a/lib/gui/app/components/safe-webview/safe-webview.jsx
+++ b/lib/gui/app/components/safe-webview/safe-webview.jsx
@@ -1,245 +0,0 @@
-/*
- * Copyright 2017 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-/* eslint-disable jsdoc/require-example */
-
-const _ = require('lodash')
-const electron = require('electron')
-const react = require('react')
-const propTypes = require('prop-types')
-const analytics = require('../../modules/analytics')
-const store = require('../../models/store')
-const settings = require('../../models/settings')
-const packageJSON = require('../../../../../package.json')
-
-/**
- * @summary Electron session identifier
- * @constant
- * @private
- * @type {String}
- */
-const ELECTRON_SESSION = 'persist:success-banner'
-
-/**
- * @summary Etcher version search-parameter key
- * @constant
- * @private
- * @type {String}
- */
-const ETCHER_VERSION_PARAM = 'etcher-version'
-
-/**
- * @summary API version search-parameter key
- * @constant
- * @private
- * @type {String}
- */
-const API_VERSION_PARAM = 'api-version'
-
-/**
- * @summary Opt-out analytics search-parameter key
- * @constant
- * @private
- * @type {String}
- */
-const OPT_OUT_ANALYTICS_PARAM = 'optOutAnalytics'
-
-/**
- * @summary Webview API version
- * @constant
- * @private
- * @type {String}
- *
- * @description
- * Changing this number represents a departure from an older API and as such
- * should only be changed when truly necessary as it introduces breaking changes.
- * This version number is exposed to the banner such that it can determine what
- * features are safe to utilize.
- *
- * See `git blame -L n` where n is the line below for the history of version changes.
- */
-const API_VERSION = 2
-
-/**
- * @summary Webviews that hide/show depending on the HTTP status returned
- * @type {Object}
- * @public
- *
- * @example
- * <safe-webview src="https://etcher.io/"></safe-webview>
- */
-class SafeWebview extends react.PureComponent {
-  /**
-   * @param {Object} props - React element properties
-   */
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      shouldShow: true
-    }
-
-    const url = new window.URL(props.src)
-
-    // We set the version GET parameters here.
-    url.searchParams.set(ETCHER_VERSION_PARAM, packageJSON.version)
-    url.searchParams.set(API_VERSION_PARAM, API_VERSION)
-    url.searchParams.set(OPT_OUT_ANALYTICS_PARAM, !settings.get('errorReporting'))
-
-    this.entryHref = url.href
-
-    // Events steal 'this'
-    this.didFailLoad = _.bind(this.didFailLoad, this)
-    this.didGetResponseDetails = _.bind(this.didGetResponseDetails, this)
-
-    const logWebViewMessage = (event) => {
-      console.log('Message from SafeWebview:', event.message)
-    }
-
-    this.eventTuples = [
-      [ 'did-fail-load', this.didFailLoad ],
-      [ 'new-window', this.constructor.newWindow ],
-      [ 'console-message', logWebViewMessage ]
-    ]
-
-    // Make a persistent electron session for the webview
-    this.session = electron.remote.session.fromPartition(ELECTRON_SESSION, {
-
-      // Disable the cache for the session such that new content shows up when refreshing
-      cache: false
-    })
-  }
-
-  /**
-   * @returns {react.Element}
-   */
-  render () {
-    return react.createElement('webview', {
-      ref: 'webview',
-      partition: ELECTRON_SESSION,
-      style: {
-        flex: this.state.shouldShow ? null : '0 1',
-        width: this.state.shouldShow ? null : '0',
-        height: this.state.shouldShow ? null : '0'
-      }
-    }, [])
-  }
-
-  /**
-   * @summary Add the Webview events
-   */
-  componentDidMount () {
-    // Events React is unaware of have to be handled manually
-    _.map(this.eventTuples, (tuple) => {
-      this.refs.webview.addEventListener(...tuple)
-    })
-
-    this.session.webRequest.onCompleted(this.didGetResponseDetails)
-
-    // It's important that this comes after the partition setting, otherwise it will
-    // use another session and we can't change it without destroying the element again
-    this.refs.webview.src = this.entryHref
-  }
-
-  /**
-   * @summary Remove the Webview events
-   */
-  componentWillUnmount () {
-    // Events that React is unaware of have to be handled manually
-    _.map(this.eventTuples, (tuple) => {
-      this.refs.webview.removeEventListener(...tuple)
-    })
-    this.session.webRequest.onCompleted(null)
-  }
-
-  /**
-   * @summary Set the element state to hidden
-   */
-  didFailLoad () {
-    this.setState({
-      shouldShow: false
-    })
-    if (this.props.onWebviewShow) {
-      this.props.onWebviewShow(false)
-    }
-  }
-
-  /**
-   * @summary Set the element state depending on the HTTP response code
-   * @param {Event} event - Event object
-   */
-  didGetResponseDetails (event) {
-    // This seems to pick up all requests related to the webview,
-    // only care about this event if it's a request for the main frame
-    if (event.resourceType === 'mainFrame') {
-      const HTTP_OK = 200
-
-      analytics.logEvent('SafeWebview loaded', {
-        event,
-        applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-        flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-      })
-
-      this.setState({
-        shouldShow: event.statusCode === HTTP_OK
-      })
-      if (this.props.onWebviewShow) {
-        this.props.onWebviewShow(event.statusCode === HTTP_OK)
-      }
-    }
-  }
-
-  /**
-   * @summary Open link in browser if it's opened as a 'foreground-tab'
-   * @param {Event} event - event object
-   */
-  static newWindow (event) {
-    const url = new window.URL(event.url)
-
-    if (_.every([
-      url.protocol === 'http:' || url.protocol === 'https:',
-      event.disposition === 'foreground-tab',
-
-      // Don't open links if they're disabled by the env var
-      !settings.get('disableExternalLinks')
-    ])) {
-      electron.shell.openExternal(url.href)
-    }
-  }
-}
-
-SafeWebview.propTypes = {
-
-  /**
-   * @summary The website source URL
-   */
-  src: propTypes.string.isRequired,
-
-  /**
-   * @summary Refresh the webview
-   */
-  refreshNow: propTypes.bool,
-
-  /**
-   * @summary Webview lifecycle event
-   */
-  onWebviewShow: propTypes.func
-
-}
-
-module.exports = SafeWebview
--- a/lib/gui/app/components/safe-webview/safe-webview.tsx
+++ b/lib/gui/app/components/safe-webview/safe-webview.tsx
@@ -0,0 +1,207 @@
+/*
+ * Copyright 2017 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as electron from 'electron';
+import * as React from 'react';
+
+import * as packageJSON from '../../../../../package.json';
+import * as settings from '../../models/settings';
+import * as analytics from '../../modules/analytics';
+
+/**
+ * @summary Electron session identifier
+ */
+const ELECTRON_SESSION = 'persist:success-banner';
+
+/**
+ * @summary Etcher version search-parameter key
+ */
+const ETCHER_VERSION_PARAM = 'etcher-version';
+
+/**
+ * @summary API version search-parameter key
+ */
+const API_VERSION_PARAM = 'api-version';
+
+/**
+ * @summary Opt-out analytics search-parameter key
+ */
+const OPT_OUT_ANALYTICS_PARAM = 'optOutAnalytics';
+
+/**
+ * @summary Webview API version
+ *
+ * @description
+ * Changing this number represents a departure from an older API and as such
+ * should only be changed when truly necessary as it introduces breaking changes.
+ * This version number is exposed to the banner such that it can determine what
+ * features are safe to utilize.
+ *
+ * See `git blame -L n` where n is the line below for the history of version changes.
+ */
+const API_VERSION = '2';
+
+interface SafeWebviewProps {
+	// The website source URL
+	src: string;
+	// Webview lifecycle event
+	onWebviewShow?: (isWebviewShowing: boolean) => void;
+	style?: React.CSSProperties;
+}
+
+interface SafeWebviewState {
+	shouldShow: boolean;
+}
+
+/**
+ * @summary Webviews that hide/show depending on the HTTP status returned
+ */
+export class SafeWebview extends React.PureComponent<
+	SafeWebviewProps,
+	SafeWebviewState
+> {
+	private entryHref: string;
+	private session: electron.Session;
+	private webviewRef: React.RefObject<electron.WebviewTag>;
+
+	constructor(props: SafeWebviewProps) {
+		super(props);
+		this.webviewRef = React.createRef();
+		this.state = {
+			shouldShow: true,
+		};
+		const url = new window.URL(this.props.src);
+		// We set the version GET parameters here.
+		url.searchParams.set(ETCHER_VERSION_PARAM, packageJSON.version);
+		url.searchParams.set(API_VERSION_PARAM, API_VERSION);
+		url.searchParams.set(
+			OPT_OUT_ANALYTICS_PARAM,
+			(!settings.getSync('errorReporting')).toString(),
+		);
+		this.entryHref = url.href;
+		// Events steal 'this'
+		this.didFailLoad = this.didFailLoad.bind(this);
+		this.didGetResponseDetails = this.didGetResponseDetails.bind(this);
+		// Make a persistent electron session for the webview
+		this.session = electron.remote.session.fromPartition(ELECTRON_SESSION, {
+			// Disable the cache for the session such that new content shows up when refreshing
+			cache: false,
+		});
+	}
+
+	private static logWebViewMessage(event: electron.ConsoleMessageEvent) {
+		console.log('Message from SafeWebview:', event.message);
+	}
+
+	public render() {
+		const {
+			style = {
+				flex: this.state.shouldShow ? undefined : '0 1',
+				width: this.state.shouldShow ? undefined : '0',
+				height: this.state.shouldShow ? undefined : '0',
+			},
+		} = this.props;
+		return (
+			<webview
+				ref={this.webviewRef}
+				partition={ELECTRON_SESSION}
+				style={style}
+			/>
+		);
+	}
+
+	// Add the Webview events
+	public componentDidMount() {
+		// Events React is unaware of have to be handled manually
+		if (this.webviewRef.current !== null) {
+			this.webviewRef.current.addEventListener(
+				'did-fail-load',
+				this.didFailLoad,
+			);
+			this.webviewRef.current.addEventListener(
+				'new-window',
+				SafeWebview.newWindow,
+			);
+			this.webviewRef.current.addEventListener(
+				'console-message',
+				SafeWebview.logWebViewMessage,
+			);
+			this.session.webRequest.onCompleted(this.didGetResponseDetails);
+			// It's important that this comes after the partition setting, otherwise it will
+			// use another session and we can't change it without destroying the element again
+			this.webviewRef.current.src = this.entryHref;
+		}
+	}
+
+	// Remove the Webview events
+	public componentWillUnmount() {
+		// Events that React is unaware of have to be handled manually
+		if (this.webviewRef.current !== null) {
+			this.webviewRef.current.removeEventListener(
+				'did-fail-load',
+				this.didFailLoad,
+			);
+			this.webviewRef.current.removeEventListener(
+				'new-window',
+				SafeWebview.newWindow,
+			);
+			this.webviewRef.current.removeEventListener(
+				'console-message',
+				SafeWebview.logWebViewMessage,
+			);
+		}
+		this.session.webRequest.onCompleted(null);
+	}
+
+	// Set the element state to hidden
+	public didFailLoad() {
+		this.setState({
+			shouldShow: false,
+		});
+		if (this.props.onWebviewShow) {
+			this.props.onWebviewShow(false);
+		}
+	}
+
+	// Set the element state depending on the HTTP response code
+	public didGetResponseDetails(event: electron.OnCompletedListenerDetails) {
+		// This seems to pick up all requests related to the webview,
+		// only care about this event if it's a request for the main frame
+		if (event.resourceType === 'mainFrame') {
+			const HTTP_OK = 200;
+			analytics.logEvent('SafeWebview loaded', { event });
+			this.setState({
+				shouldShow: event.statusCode === HTTP_OK,
+			});
+			if (this.props.onWebviewShow) {
+				this.props.onWebviewShow(event.statusCode === HTTP_OK);
+			}
+		}
+	}
+
+	// Open link in browser if it's opened as a 'foreground-tab'
+	public static async newWindow(event: electron.NewWindowEvent) {
+		const url = new window.URL(event.url);
+		if (
+			(url.protocol === 'http:' || url.protocol === 'https:') &&
+			event.disposition === 'foreground-tab' &&
+			// Don't open links if they're disabled by the env var
+			!(await settings.get('disableExternalLinks'))
+		) {
+			electron.shell.openExternal(url.href);
+		}
+	}
+}
--- a/lib/gui/app/components/settings/settings.tsx
+++ b/lib/gui/app/components/settings/settings.tsx
@@ -14,214 +14,149 @@
 * limitations under the License.
 */

-import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import GithubSvg from '@fortawesome/fontawesome-free/svgs/brands/github.svg';
 import * as _ from 'lodash';
 import * as os from 'os';
 import * as React from 'react';
-import { Badge, Checkbox, Modal } from 'rendition';
-import styled from 'styled-components';
+import { Flex, Checkbox, Txt } from 'rendition';

-import { version } from '../../../../../package.json';
+import { version, packageType } from '../../../../../package.json';
 import * as settings from '../../models/settings';
-import * as store from '../../models/store';
 import * as analytics from '../../modules/analytics';
 import { open as openExternal } from '../../os/open-external/services/open-external';
+import { Modal } from '../../styled-components';

-const { useState } = React;
 const platform = os.platform();

-interface WarningModalProps {
-	message: string;
-	confirmLabel: string;
-	cancel: () => void;
-	done: () => void;
-}
-
-const WarningModal = ({
-	message,
-	confirmLabel,
-	cancel,
-	done,
-}: WarningModalProps) => {
-	return (
-		<Modal
-			title={confirmLabel}
-			action={confirmLabel}
-			cancel={cancel}
-			done={done}
-			style={{
-				width: 420,
-				height: 300,
-			}}
-			primaryButtonProps={{ warning: true }}
-		>
-			{message}
-		</Modal>
-	);
-};
-
 interface Setting {
 	name: string;
 	label: string | JSX.Element;
-	options?: any;
+	options?: {
+		description: string;
+		confirmLabel: string;
+	};
 	hide?: boolean;
 }

-const settingsList: Setting[] = [
-	{
-		name: 'errorReporting',
-		label: 'Anonymously report errors and usage statistics to balena.io',
-	},
-	{
-		name: 'unmountOnSuccess',
-		/**
-		 * On Windows, "Unmounting" basically means "ejecting".
-		 * On top of that, Windows users are usually not even
-		 * familiar with the meaning of "unmount", which comes
-		 * from the UNIX world.
-		 */
-		label: `${platform === 'win32' ? 'Eject' : 'Auto-unmount'} on success`,
-	},
-	{
-		name: 'validateWriteOnSuccess',
-		label: 'Validate write on success',
-	},
-	{
-		name: 'trim',
-		label: 'Trim ext{2,3,4} partitions before writing (raw images only)',
-	},
-	{
-		name: 'updatesEnabled',
-		label: 'Auto-updates enabled',
-	},
-	{
-		name: 'unsafeMode',
-		label: (
-			<span>
-				Unsafe mode{' '}
-				<Badge danger fontSize={12}>
-					Dangerous
-				</Badge>
-			</span>
-		),
-		options: {
-			description: `Are you sure you want to turn this on?
-			You will be able to overwrite your system drives if you're not careful.`,
-			confirmLabel: 'Enable unsafe mode',
+async function getSettingsList(): Promise<Setting[]> {
+	return [
+		{
+			name: 'errorReporting',
+			label: 'Anonymously report errors and usage statistics to balena.io',
 		},
-		hide: settings.get('disableUnsafeMode'),
-	},
-];
+		{
+			name: 'unmountOnSuccess',
+			/**
+			 * On Windows, "Unmounting" basically means "ejecting".
+			 * On top of that, Windows users are usually not even
+			 * familiar with the meaning of "unmount", which comes
+			 * from the UNIX world.
+			 */
+			label: `${platform === 'win32' ? 'Eject' : 'Auto-unmount'} on success`,
+		},
+		{
+			name: 'validateWriteOnSuccess',
+			label: 'Validate write on success',
+		},
+		{
+			name: 'updatesEnabled',
+			label: 'Auto-updates enabled',
+			hide: ['rpm', 'deb'].includes(packageType),
+		},
+	];
+}

 interface SettingsModalProps {
 	toggleModal: (value: boolean) => void;
 }

-interface Dictionary<T> {
-	[key: string]: T;
-}
-
-export const SettingsModal: any = styled(
-	({ toggleModal }: SettingsModalProps) => {
-		const [currentSettings, setCurrentSettings]: [
-			Dictionary<any>,
-			React.Dispatch<React.SetStateAction<Dictionary<any>>>,
-		] = useState(settings.getAll());
-		const [warning, setWarning]: [
-			any,
-			React.Dispatch<React.SetStateAction<any>>,
-		] = useState({});
-
-		const toggleSetting = async (setting: string, options?: any) => {
-			const value = currentSettings[setting];
-			const dangerous = !_.isUndefined(options);
-
-			analytics.logEvent('Toggle setting', {
-				setting,
-				value,
-				dangerous,
-				// @ts-ignore
-				applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-			});
-
-			if (value || !dangerous) {
-				await settings.set(setting, !value);
-				setCurrentSettings({
-					...currentSettings,
-					[setting]: !value,
-				});
-				setWarning({});
-				return;
+export function SettingsModal({ toggleModal }: SettingsModalProps) {
+	const [settingsList, setCurrentSettingsList] = React.useState<Setting[]>([]);
+	React.useEffect(() => {
+		(async () => {
+			if (settingsList.length === 0) {
+				setCurrentSettingsList(await getSettingsList());
 			}
+		})();
+	});
+	const [currentSettings, setCurrentSettings] = React.useState<
+		_.Dictionary<boolean>
+	>({});
+	React.useEffect(() => {
+		(async () => {
+			if (_.isEmpty(currentSettings)) {
+				setCurrentSettings(await settings.getAll());
+			}
+		})();
+	});

-			// Show warning since it's a dangerous setting
-			setWarning({
-				setting,
-				settingValue: value,
-				...options,
-			});
-		};
+	const toggleSetting = async (
+		setting: string,
+		options?: Setting['options'],
+	) => {
+		const value = currentSettings[setting];
+		const dangerous = options !== undefined;

-		return (
-			<Modal
-				id="settings-modal"
-				title="Settings"
-				done={() => toggleModal(false)}
-				style={{
-					width: 780,
-					height: 420,
-				}}
-			>
-				<div>
-					{_.map(settingsList, (setting: Setting, i: number) => {
-						return setting.hide ? null : (
-							<div key={setting.name}>
-								<Checkbox
-									toggle
-									tabIndex={6 + i}
-									label={setting.label}
-									checked={currentSettings[setting.name]}
-									onChange={() => toggleSetting(setting.name, setting.options)}
-								/>
-							</div>
-						);
-					})}
-					<div>
-						<span
-							onClick={() =>
-								openExternal(
-									'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md',
-								)
-							}
-						>
-							<FontAwesomeIcon icon={faGithub} /> {version}
-						</span>
-					</div>
-				</div>
+		analytics.logEvent('Toggle setting', {
+			setting,
+			value,
+			dangerous,
+		});

-				{_.isEmpty(warning) ? null : (
-					<WarningModal
-						message={warning.description}
-						confirmLabel={warning.confirmLabel}
-						done={() => {
-							settings.set(warning.setting, !warning.settingValue);
-							setCurrentSettings({
-								...currentSettings,
-								[warning.setting]: true,
-							});
-							setWarning({});
-						}}
-						cancel={() => {
-							setWarning({});
-						}}
+		await settings.set(setting, !value);
+		setCurrentSettings({
+			...currentSettings,
+			[setting]: !value,
+		});
+		return;
+	};
+
+	return (
+		<Modal
+			titleElement={
+				<Txt fontSize={24} mb={24}>
+					Settings
+				</Txt>
+			}
+			done={() => toggleModal(false)}
+		>
+			<Flex flexDirection="column">
+				{settingsList.map((setting: Setting, i: number) => {
+					return setting.hide ? null : (
+						<Flex key={setting.name} mb={14}>
+							<Checkbox
+								toggle
+								tabIndex={6 + i}
+								label={setting.label}
+								checked={currentSettings[setting.name]}
+								onChange={() => toggleSetting(setting.name, setting.options)}
+							/>
+						</Flex>
+					);
+				})}
+				<Flex
+					mt={18}
+					alignItems="center"
+					color="#00aeef"
+					style={{
+						width: 'fit-content',
+						cursor: 'pointer',
+						fontSize: 14,
+					}}
+					onClick={() =>
+						openExternal(
+							'https://github.com/balena-io/etcher/blob/master/CHANGELOG.md',
+						)
+					}
+				>
+					<GithubSvg
+						height="1em"
+						fill="currentColor"
+						style={{ marginRight: 8 }}
 					/>
-				)}
-			</Modal>
-		);
-	},
-)`
-	> div:nth-child(3) {
-		justify-content: center;
-	}
-`;
+					<Txt style={{ borderBottom: '1px solid #00aeef' }}>{version}</Txt>
+				</Flex>
+			</Flex>
+		</Modal>
+	);
+}
--- a/lib/gui/app/components/source-selector/source-selector.tsx
+++ b/lib/gui/app/components/source-selector/source-selector.tsx
@@ -0,0 +1,613 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import CopySvg from '@fortawesome/fontawesome-free/svgs/solid/copy.svg';
+import FileSvg from '@fortawesome/fontawesome-free/svgs/solid/file.svg';
+import LinkSvg from '@fortawesome/fontawesome-free/svgs/solid/link.svg';
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import { sourceDestination } from 'etcher-sdk';
+import { ipcRenderer, IpcRendererEvent } from 'electron';
+import * as _ from 'lodash';
+import { GPTPartition, MBRPartition } from 'partitioninfo';
+import * as path from 'path';
+import * as prettyBytes from 'pretty-bytes';
+import * as React from 'react';
+import { Flex, ButtonProps, Modal as SmallModal, Txt } from 'rendition';
+import styled from 'styled-components';
+
+import * as errors from '../../../../shared/errors';
+import * as messages from '../../../../shared/messages';
+import * as supportedFormats from '../../../../shared/supported-formats';
+import * as selectionState from '../../models/selection-state';
+import { observe } from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import * as exceptionReporter from '../../modules/exception-reporter';
+import * as osDialog from '../../os/dialog';
+import { replaceWindowsNetworkDriveLetter } from '../../os/windows-network-drives';
+import {
+	ChangeButton,
+	DetailsText,
+	StepButton,
+	StepNameButton,
+} from '../../styled-components';
+import { colors } from '../../theme';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+import URLSelector from '../url-selector/url-selector';
+import { SVGIcon } from '../svg-icon/svg-icon';
+
+import ImageSvg from '../../../assets/image.svg';
+import { DriveSelector } from '../drive-selector/drive-selector';
+import { DrivelistDrive } from '../../../../shared/drive-constraints';
+
+const isURL = (imagePath: string) =>
+	imagePath.startsWith('https://') || imagePath.startsWith('http://');
+
+// TODO move these styles to rendition
+const ModalText = styled.p`
+	a {
+		color: rgb(0, 174, 239);
+
+		&:hover {
+			color: rgb(0, 139, 191);
+		}
+	}
+`;
+
+function getState() {
+	return {
+		hasImage: selectionState.hasImage(),
+		imageName: selectionState.getImageName(),
+		imageSize: selectionState.getImageSize(),
+	};
+}
+
+function isString(value: any): value is string {
+	return typeof value === 'string';
+}
+
+interface Flow {
+	icon?: JSX.Element;
+	onClick: (evt: React.MouseEvent) => void;
+	label: string;
+}
+
+const FlowSelector = styled(
+	({ flow, ...props }: { flow: Flow } & ButtonProps) => (
+		<StepButton
+			plain={!props.primary}
+			primary={props.primary}
+			onClick={(evt: React.MouseEvent<Element, MouseEvent>) =>
+				flow.onClick(evt)
+			}
+			icon={flow.icon}
+			{...props}
+		>
+			{flow.label}
+		</StepButton>
+	),
+)`
+	border-radius: 24px;
+	color: rgba(255, 255, 255, 0.7);
+
+	:enabled:focus,
+	:enabled:focus svg {
+		color: ${colors.primary.foreground} !important;
+	}
+
+	:enabled:hover {
+		background-color: ${colors.primary.background};
+		color: ${colors.primary.foreground};
+		font-weight: 600;
+
+		svg {
+			color: ${colors.primary.foreground}!important;
+		}
+	}
+`;
+
+export type Source =
+	| typeof sourceDestination.File
+	| typeof sourceDestination.BlockDevice
+	| typeof sourceDestination.Http;
+
+export interface SourceMetadata extends sourceDestination.Metadata {
+	hasMBR?: boolean;
+	partitions?: MBRPartition[] | GPTPartition[];
+	path: string;
+	displayName: string;
+	description: string;
+	SourceType: Source;
+	drive?: DrivelistDrive;
+	extension?: string;
+	archiveExtension?: string;
+}
+
+interface SourceSelectorProps {
+	flashing: boolean;
+}
+
+interface SourceSelectorState {
+	hasImage: boolean;
+	imageName?: string;
+	imageSize?: number;
+	warning: { message: string; title: string | null } | null;
+	showImageDetails: boolean;
+	showURLSelector: boolean;
+	showDriveSelector: boolean;
+	defaultFlowActive: boolean;
+}
+
+export class SourceSelector extends React.Component<
+	SourceSelectorProps,
+	SourceSelectorState
+> {
+	private unsubscribe: (() => void) | undefined;
+
+	constructor(props: SourceSelectorProps) {
+		super(props);
+		this.state = {
+			...getState(),
+			warning: null,
+			showImageDetails: false,
+			showURLSelector: false,
+			showDriveSelector: false,
+			defaultFlowActive: true,
+		};
+
+		// Bind `this` since it's used in an event's callback
+		this.onSelectImage = this.onSelectImage.bind(this);
+	}
+
+	public componentDidMount() {
+		this.unsubscribe = observe(() => {
+			this.setState(getState());
+		});
+		ipcRenderer.on('select-image', this.onSelectImage);
+		ipcRenderer.send('source-selector-ready');
+	}
+
+	public componentWillUnmount() {
+		this.unsubscribe?.();
+		ipcRenderer.removeListener('select-image', this.onSelectImage);
+	}
+
+	private async onSelectImage(_event: IpcRendererEvent, imagePath: string) {
+		await this.selectSource(
+			imagePath,
+			isURL(imagePath) ? sourceDestination.Http : sourceDestination.File,
+		).promise;
+	}
+
+	private async createSource(selected: string, SourceType: Source) {
+		try {
+			selected = await replaceWindowsNetworkDriveLetter(selected);
+		} catch (error) {
+			analytics.logException(error);
+		}
+
+		if (SourceType === sourceDestination.File) {
+			return new sourceDestination.File({
+				path: selected,
+			});
+		}
+		return new sourceDestination.Http({ url: selected });
+	}
+
+	private reselectSource() {
+		analytics.logEvent('Reselect image', {
+			previousImage: selectionState.getImage(),
+		});
+
+		selectionState.deselectImage();
+	}
+
+	private selectSource(
+		selected: string | DrivelistDrive,
+		SourceType: Source,
+	): { promise: Promise<void>; cancel: () => void } {
+		let cancelled = false;
+		return {
+			cancel: () => {
+				cancelled = true;
+			},
+			promise: (async () => {
+				const sourcePath = isString(selected) ? selected : selected.device;
+				let source;
+				let metadata: SourceMetadata | undefined;
+				if (isString(selected)) {
+					if (SourceType === sourceDestination.Http && !isURL(selected)) {
+						this.handleError(
+							'Unsupported protocol',
+							selected,
+							messages.error.unsupportedProtocol(),
+						);
+						return;
+					}
+
+					if (supportedFormats.looksLikeWindowsImage(selected)) {
+						analytics.logEvent('Possibly Windows image', { image: selected });
+						this.setState({
+							warning: {
+								message: messages.warning.looksLikeWindowsImage(),
+								title: 'Possible Windows image detected',
+							},
+						});
+					}
+					source = await this.createSource(selected, SourceType);
+
+					if (cancelled) {
+						return;
+					}
+
+					try {
+						const innerSource = await source.getInnerSource();
+						if (cancelled) {
+							return;
+						}
+						metadata = await this.getMetadata(innerSource, selected);
+						if (cancelled) {
+							return;
+						}
+						metadata.SourceType = SourceType;
+
+						if (!metadata.hasMBR) {
+							analytics.logEvent('Missing partition table', { metadata });
+							this.setState({
+								warning: {
+									message: messages.warning.missingPartitionTable(),
+									title: 'Missing partition table',
+								},
+							});
+						}
+					} catch (error) {
+						this.handleError(
+							'Error opening source',
+							sourcePath,
+							messages.error.openSource(sourcePath, error.message),
+							error,
+						);
+					} finally {
+						try {
+							await source.close();
+						} catch (error) {
+							// Noop
+						}
+					}
+				} else {
+					metadata = {
+						path: selected.device,
+						displayName: selected.displayName,
+						description: selected.displayName,
+						size: selected.size as SourceMetadata['size'],
+						SourceType: sourceDestination.BlockDevice,
+						drive: selected,
+					};
+				}
+
+				if (metadata !== undefined) {
+					selectionState.selectSource(metadata);
+					analytics.logEvent('Select image', {
+						// An easy way so we can quickly identify if we're making use of
+						// certain features without printing pages of text to DevTools.
+						image: {
+							...metadata,
+							logo: Boolean(metadata.logo),
+							blockMap: Boolean(metadata.blockMap),
+						},
+					});
+				}
+			})(),
+		};
+	}
+
+	private handleError(
+		title: string,
+		sourcePath: string,
+		description: string,
+		error?: Error,
+	) {
+		const imageError = errors.createUserError({
+			title,
+			description,
+		});
+		osDialog.showError(imageError);
+		if (error) {
+			analytics.logException(error);
+			return;
+		}
+		analytics.logEvent(title, { path: sourcePath });
+	}
+
+	private async getMetadata(
+		source: sourceDestination.SourceDestination,
+		selected: string | DrivelistDrive,
+	) {
+		const metadata = (await source.getMetadata()) as SourceMetadata;
+		const partitionTable = await source.getPartitionTable();
+		if (partitionTable) {
+			metadata.hasMBR = true;
+			metadata.partitions = partitionTable.partitions;
+		} else {
+			metadata.hasMBR = false;
+		}
+		if (isString(selected)) {
+			metadata.extension = path.extname(selected).slice(1);
+			metadata.path = selected;
+		}
+		return metadata;
+	}
+
+	private async openImageSelector() {
+		analytics.logEvent('Open image selector');
+
+		try {
+			const imagePath = await osDialog.selectImage();
+			// Avoid analytics and selection state changes
+			// if no file was resolved from the dialog.
+			if (!imagePath) {
+				analytics.logEvent('Image selector closed');
+				return;
+			}
+			await this.selectSource(imagePath, sourceDestination.File).promise;
+		} catch (error) {
+			exceptionReporter.report(error);
+		}
+	}
+
+	private async onDrop(event: React.DragEvent<HTMLDivElement>) {
+		const [file] = event.dataTransfer.files;
+		if (file) {
+			await this.selectSource(file.path, sourceDestination.File).promise;
+		}
+	}
+
+	private openURLSelector() {
+		analytics.logEvent('Open image URL selector');
+
+		this.setState({
+			showURLSelector: true,
+		});
+	}
+
+	private openDriveSelector() {
+		analytics.logEvent('Open drive selector');
+
+		this.setState({
+			showDriveSelector: true,
+		});
+	}
+
+	private onDragOver(event: React.DragEvent<HTMLDivElement>) {
+		// Needed to get onDrop events on div elements
+		event.preventDefault();
+	}
+
+	private onDragEnter(event: React.DragEvent<HTMLDivElement>) {
+		// Needed to get onDrop events on div elements
+		event.preventDefault();
+	}
+
+	private showSelectedImageDetails() {
+		analytics.logEvent('Show selected image tooltip', {
+			imagePath: selectionState.getImagePath(),
+		});
+
+		this.setState({
+			showImageDetails: true,
+		});
+	}
+
+	private setDefaultFlowActive(defaultFlowActive: boolean) {
+		this.setState({ defaultFlowActive });
+	}
+
+	// TODO add a visual change when dragging a file over the selector
+	public render() {
+		const { flashing } = this.props;
+		const { showImageDetails, showURLSelector, showDriveSelector } = this.state;
+		const selectionImage = selectionState.getImage();
+		let image: SourceMetadata | DrivelistDrive =
+			selectionImage !== undefined ? selectionImage : ({} as SourceMetadata);
+
+		image = image.drive ?? image;
+
+		let cancelURLSelection = () => {
+			// noop
+		};
+		image.name = image.description || image.name;
+		const imagePath = image.path || image.displayName || '';
+		const imageBasename = path.basename(imagePath);
+		const imageName = image.name || '';
+		const imageSize = image.size;
+		const imageLogo = image.logo || '';
+
+		return (
+			<>
+				<Flex
+					flexDirection="column"
+					alignItems="center"
+					onDrop={(evt: React.DragEvent<HTMLDivElement>) => this.onDrop(evt)}
+					onDragEnter={(evt: React.DragEvent<HTMLDivElement>) =>
+						this.onDragEnter(evt)
+					}
+					onDragOver={(evt: React.DragEvent<HTMLDivElement>) =>
+						this.onDragOver(evt)
+					}
+				>
+					<SVGIcon
+						contents={imageLogo}
+						fallback={ImageSvg}
+						style={{
+							marginBottom: 30,
+						}}
+					/>
+
+					{selectionImage !== undefined ? (
+						<>
+							<StepNameButton
+								plain
+								onClick={() => this.showSelectedImageDetails()}
+								tooltip={imageName || imageBasename}
+							>
+								{middleEllipsis(imageName || imageBasename, 20)}
+							</StepNameButton>
+							{!flashing && (
+								<ChangeButton
+									plain
+									mb={14}
+									onClick={() => this.reselectSource()}
+								>
+									Remove
+								</ChangeButton>
+							)}
+							{!_.isNil(imageSize) && (
+								<DetailsText>{prettyBytes(imageSize)}</DetailsText>
+							)}
+						</>
+					) : (
+						<>
+							<FlowSelector
+								primary={this.state.defaultFlowActive}
+								key="Flash from file"
+								flow={{
+									onClick: () => this.openImageSelector(),
+									label: 'Flash from file',
+									icon: <FileSvg height="1em" fill="currentColor" />,
+								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
+							/>
+							<FlowSelector
+								key="Flash from URL"
+								flow={{
+									onClick: () => this.openURLSelector(),
+									label: 'Flash from URL',
+									icon: <LinkSvg height="1em" fill="currentColor" />,
+								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
+							/>
+							<FlowSelector
+								key="Clone drive"
+								flow={{
+									onClick: () => this.openDriveSelector(),
+									label: 'Clone drive',
+									icon: <CopySvg height="1em" fill="currentColor" />,
+								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
+							/>
+						</>
+					)}
+				</Flex>
+
+				{this.state.warning != null && (
+					<SmallModal
+						titleElement={
+							<span>
+								<ExclamationTriangleSvg fill="#fca321" height="1em" />{' '}
+								<span>{this.state.warning.title}</span>
+							</span>
+						}
+						action="Continue"
+						cancel={() => {
+							this.setState({ warning: null });
+							this.reselectSource();
+						}}
+						done={() => {
+							this.setState({ warning: null });
+						}}
+						primaryButtonProps={{ warning: true, primary: false }}
+					>
+						<ModalText
+							dangerouslySetInnerHTML={{ __html: this.state.warning.message }}
+						/>
+					</SmallModal>
+				)}
+
+				{showImageDetails && (
+					<SmallModal
+						title="Image"
+						done={() => {
+							this.setState({ showImageDetails: false });
+						}}
+					>
+						<Txt.p>
+							<Txt.span bold>Name: </Txt.span>
+							<Txt.span>{imageName || imageBasename}</Txt.span>
+						</Txt.p>
+						<Txt.p>
+							<Txt.span bold>Path: </Txt.span>
+							<Txt.span>{imagePath}</Txt.span>
+						</Txt.p>
+					</SmallModal>
+				)}
+
+				{showURLSelector && (
+					<URLSelector
+						cancel={() => {
+							cancelURLSelection();
+							this.setState({
+								showURLSelector: false,
+							});
+						}}
+						done={async (imageURL: string) => {
+							// Avoid analytics and selection state changes
+							// if no file was resolved from the dialog.
+							if (!imageURL) {
+								analytics.logEvent('URL selector closed');
+							} else {
+								let promise;
+								({ promise, cancel: cancelURLSelection } = this.selectSource(
+									imageURL,
+									sourceDestination.Http,
+								));
+								await promise;
+							}
+							this.setState({
+								showURLSelector: false,
+							});
+						}}
+					/>
+				)}
+
+				{showDriveSelector && (
+					<DriveSelector
+						multipleSelection={false}
+						titleLabel="Select source"
+						emptyListLabel="Plug a source"
+						cancel={() => {
+							this.setState({
+								showDriveSelector: false,
+							});
+						}}
+						done={async (drives: DrivelistDrive[]) => {
+							if (drives.length) {
+								await this.selectSource(
+									drives[0],
+									sourceDestination.BlockDevice,
+								);
+							}
+							this.setState({
+								showDriveSelector: false,
+							});
+						}}
+					/>
+				)}
+			</>
+		);
+	}
+}
--- a/lib/gui/app/components/svg-icon/styles/_svg-icon.scss
+++ b/lib/gui/app/components/svg-icon/styles/_svg-icon.scss
@@ -1,9 +0,0 @@
-
-svg-icon {
-  display: inline-block;
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
--- a/lib/gui/app/components/svg-icon/svg-icon.jsx
+++ b/lib/gui/app/components/svg-icon/svg-icon.jsx
@@ -1,167 +0,0 @@
-/*
- * Copyright 2018 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Components.SVGIcon
- */
-
-const _ = require('lodash')
-const react = require('react')
-const propTypes = require('prop-types')
-const path = require('path')
-const fs = require('fs')
-const analytics = require('../../modules/analytics')
-const domParser = new window.DOMParser()
-
-const DEFAULT_SIZE = '40px'
-
-/**
- * @summary Try to parse SVG contents and return it data encoded
- *
- * @param {String} contents - SVG XML contents
- * @returns {String|null}
- *
- * @example
- * const encodedSVG = tryParseSVGContents('<svg><path></path></svg>')
- *
- * img.src = encodedSVG
- */
-const tryParseSVGContents = (contents) => {
-  const doc = domParser.parseFromString(contents, 'image/svg+xml')
-  const parserError = doc.querySelector('parsererror')
-  const svg = doc.querySelector('svg')
-
-  if (!parserError && svg) {
-    return `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`
-  }
-
-  return null
-}
-
-/* eslint-disable jsdoc/require-example */
-
-/**
- * @summary SVG element that takes both filepaths and file contents
- * @type {Object}
- * @public
- */
-class SVGIcon extends react.Component {
-  /**
-   * @summary Render the SVG
-   * @returns {react.Element}
-   */
-  render () {
-    // __dirname behaves strangely inside a Webpack bundle,
-    // so we need to provide different base directories
-    // depending on whether __dirname is absolute or not,
-    // which helps detecting a Webpack bundle.
-    // We use global.__dirname inside a Webpack bundle since
-    // that's the only way to get the "real" __dirname.
-    const baseDirectory = path.isAbsolute(__dirname)
-      ? path.join(__dirname, '..')
-      // eslint-disable-next-line no-underscore-dangle
-      : global.__dirname
-
-    let svgData = ''
-
-    _.find(this.props.contents, (content) => {
-      const attempt = tryParseSVGContents(content)
-
-      if (attempt) {
-        svgData = attempt
-        return true
-      }
-
-      return false
-    })
-
-    if (!svgData) {
-      _.find(this.props.paths, (relativePath) => {
-        // This means the path to the icon should be
-        // relative to *this directory*.
-        // TODO: There might be a way to compute the path
-        // relatively to the `index.html`.
-        const imagePath = path.join(baseDirectory, 'assets', relativePath)
-
-        const contents = _.attempt(() => {
-          return fs.readFileSync(imagePath, {
-            encoding: 'utf8'
-          })
-        })
-
-        if (_.isError(contents)) {
-          analytics.logException(contents)
-          return false
-        }
-
-        const parsed = _.attempt(tryParseSVGContents, contents)
-
-        if (parsed) {
-          svgData = parsed
-          return true
-        }
-
-        return false
-      })
-    }
-
-    const width = this.props.width || DEFAULT_SIZE
-    const height = this.props.height || DEFAULT_SIZE
-
-    return react.createElement('img', {
-      className: 'svg-icon',
-      style: {
-        width,
-        height
-      },
-      src: svgData,
-      disabled: this.props.disabled
-    })
-  }
-}
-
-SVGIcon.propTypes = {
-
-  /**
-   * @summary Paths to SVG files to be tried in succession if any fails
-   */
-  paths: propTypes.array,
-
-  /**
-   * @summary List of embedded SVG contents to be tried in succession if any fails
-   */
-  contents: propTypes.array,
-
-  /**
-   * @summary SVG image width unit
-   */
-  width: propTypes.string,
-
-  /**
-   * @summary SVG image height unit
-   */
-  height: propTypes.string,
-
-  /**
-   * @summary Should the element visually appear grayed out and disabled?
-   */
-  disabled: propTypes.bool
-
-}
-
-module.exports = SVGIcon
--- a/lib/gui/app/components/svg-icon/svg-icon.tsx
+++ b/lib/gui/app/components/svg-icon/svg-icon.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2018 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+
+const domParser = new window.DOMParser();
+
+const DEFAULT_SIZE = '40px';
+
+/**
+ * @summary Try to parse SVG contents and return it data encoded
+ *
+ */
+function tryParseSVGContents(contents?: string): string | undefined {
+	if (contents === undefined) {
+		return;
+	}
+	const doc = domParser.parseFromString(contents, 'image/svg+xml');
+	const parserError = doc.querySelector('parsererror');
+	const svg = doc.querySelector('svg');
+	if (!parserError && svg) {
+		return `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`;
+	}
+}
+
+interface SVGIconProps {
+	// Optional string representing the SVG contents to be tried
+	contents?: string;
+	// Fallback SVG element to show if `contents` is invalid/undefined
+	fallback: React.FunctionComponent<React.SVGProps<HTMLOrSVGElement>>;
+	// SVG image width unit
+	width?: string;
+	// SVG image height unit
+	height?: string;
+	// Should the element visually appear grayed out and disabled?
+	disabled?: boolean;
+	style?: React.CSSProperties;
+}
+
+/**
+ * @summary SVG element that takes file contents
+ */
+export class SVGIcon extends React.PureComponent<SVGIconProps> {
+	public render() {
+		const svgData = tryParseSVGContents(this.props.contents);
+		const { width, height, style = {} } = this.props;
+		style.width = width || DEFAULT_SIZE;
+		style.height = height || DEFAULT_SIZE;
+		if (svgData !== undefined) {
+			return (
+				<img
+					className={this.props.disabled ? 'disabled' : ''}
+					style={style}
+					src={svgData}
+				/>
+			);
+		}
+		const { fallback: FallbackSVG } = this.props;
+		return <FallbackSVG style={style} />;
+	}
+}
--- a/lib/gui/app/components/target-selector/target-selector-button.tsx
+++ b/lib/gui/app/components/target-selector/target-selector-button.tsx
@@ -0,0 +1,153 @@
+/*
+ * Copyright 2019 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ExclamationTriangleSvg from '@fortawesome/fontawesome-free/svgs/solid/exclamation-triangle.svg';
+import * as React from 'react';
+import { Flex, FlexProps, Txt } from 'rendition';
+
+import {
+	getDriveImageCompatibilityStatuses,
+	DriveStatus,
+} from '../../../../shared/drive-constraints';
+import { compatibility, warning } from '../../../../shared/messages';
+import * as prettyBytes from 'pretty-bytes';
+import { getSelectedDrives } from '../../models/selection-state';
+import {
+	ChangeButton,
+	DetailsText,
+	StepButton,
+	StepNameButton,
+} from '../../styled-components';
+import { middleEllipsis } from '../../utils/middle-ellipsis';
+
+interface TargetSelectorProps {
+	targets: any[];
+	disabled: boolean;
+	openDriveSelector: () => void;
+	reselectDrive: () => void;
+	flashing: boolean;
+	show: boolean;
+	tooltip: string;
+}
+
+function getDriveWarning(status: DriveStatus) {
+	switch (status.message) {
+		case compatibility.containsImage():
+			return warning.sourceDrive();
+		case compatibility.largeDrive():
+			return warning.largeDriveSize();
+		case compatibility.system():
+			return warning.systemDrive();
+		default:
+			return '';
+	}
+}
+
+const DriveCompatibilityWarning = ({
+	warnings,
+	...props
+}: {
+	warnings: string[];
+} & FlexProps) => {
+	const systemDrive = warnings.find(
+		(message) => message === warning.systemDrive(),
+	);
+	return (
+		<Flex tooltip={warnings.join(', ')} {...props}>
+			<ExclamationTriangleSvg
+				fill={systemDrive ? '#fca321' : '#8f9297'}
+				height="1em"
+			/>
+		</Flex>
+	);
+};
+
+export function TargetSelectorButton(props: TargetSelectorProps) {
+	const targets = getSelectedDrives();
+
+	if (targets.length === 1) {
+		const target = targets[0];
+		const warnings = getDriveImageCompatibilityStatuses(target).map(
+			getDriveWarning,
+		);
+		return (
+			<>
+				<StepNameButton plain tooltip={props.tooltip}>
+					{warnings.length > 0 && (
+						<DriveCompatibilityWarning warnings={warnings} mr={2} />
+					)}
+					{middleEllipsis(target.description, 20)}
+				</StepNameButton>
+				{!props.flashing && (
+					<ChangeButton plain mb={14} onClick={props.reselectDrive}>
+						Change
+					</ChangeButton>
+				)}
+				{target.size != null && (
+					<DetailsText>{prettyBytes(target.size)}</DetailsText>
+				)}
+			</>
+		);
+	}
+
+	if (targets.length > 1) {
+		const targetsTemplate = [];
+		for (const target of targets) {
+			const warnings = getDriveImageCompatibilityStatuses(target).map(
+				getDriveWarning,
+			);
+			targetsTemplate.push(
+				<DetailsText
+					key={target.device}
+					tooltip={`${target.description} ${target.displayName} ${
+						target.size != null ? prettyBytes(target.size) : ''
+					}`}
+					px={21}
+				>
+					{warnings.length > 0 ? (
+						<DriveCompatibilityWarning warnings={warnings} mr={2} />
+					) : null}
+					<Txt mr={2}>{middleEllipsis(target.description, 14)}</Txt>
+					{target.size != null && <Txt>{prettyBytes(target.size)}</Txt>}
+				</DetailsText>,
+			);
+		}
+		return (
+			<>
+				<StepNameButton plain tooltip={props.tooltip}>
+					{targets.length} Targets
+				</StepNameButton>
+				{!props.flashing && (
+					<ChangeButton plain onClick={props.reselectDrive} mb={14}>
+						Change
+					</ChangeButton>
+				)}
+				{targetsTemplate}
+			</>
+		);
+	}
+
+	return (
+		<StepButton
+			primary
+			tabIndex={targets.length > 0 ? -1 : 2}
+			disabled={props.disabled}
+			onClick={props.openDriveSelector}
+		>
+			Select target
+		</StepButton>
+	);
+}
--- a/lib/gui/app/components/target-selector/target-selector.tsx
+++ b/lib/gui/app/components/target-selector/target-selector.tsx
@@ -0,0 +1,180 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { scanner } from 'etcher-sdk';
+import * as React from 'react';
+import { Flex, Txt } from 'rendition';
+
+import {
+	DriveSelector,
+	DriveSelectorProps,
+} from '../drive-selector/drive-selector';
+import {
+	isDriveSelected,
+	getImage,
+	getSelectedDrives,
+	deselectDrive,
+	selectDrive,
+} from '../../models/selection-state';
+import * as settings from '../../models/settings';
+import { observe } from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import { TargetSelectorButton } from './target-selector-button';
+
+import DriveSvg from '../../../assets/drive.svg';
+import { warning } from '../../../../shared/messages';
+
+export const getDriveListLabel = () => {
+	return getSelectedDrives()
+		.map((drive: any) => {
+			return `${drive.description} (${drive.displayName})`;
+		})
+		.join('\n');
+};
+
+const shouldShowDrivesButton = () => {
+	return !settings.getSync('disableExplicitDriveSelection');
+};
+
+const getDriveSelectionStateSlice = () => ({
+	showDrivesButton: shouldShowDrivesButton(),
+	driveListLabel: getDriveListLabel(),
+	targets: getSelectedDrives(),
+	image: getImage(),
+});
+
+export const TargetSelectorModal = (
+	props: Omit<
+		DriveSelectorProps,
+		'titleLabel' | 'emptyListLabel' | 'multipleSelection'
+	>,
+) => (
+	<DriveSelector
+		multipleSelection={true}
+		titleLabel="Select target"
+		emptyListLabel="Plug a target drive"
+		showWarnings={true}
+		selectedList={getSelectedDrives()}
+		updateSelectedList={getSelectedDrives}
+		{...props}
+	/>
+);
+
+export const selectAllTargets = (
+	modalTargets: scanner.adapters.DrivelistDrive[],
+) => {
+	const selectedDrivesFromState = getSelectedDrives();
+	const deselected = selectedDrivesFromState.filter(
+		(drive) =>
+			!modalTargets.find((modalTarget) => modalTarget.device === drive.device),
+	);
+	// deselect drives
+	deselected.forEach((drive) => {
+		analytics.logEvent('Toggle drive', {
+			drive,
+			previouslySelected: true,
+		});
+		deselectDrive(drive.device);
+	});
+	// select drives
+	modalTargets.forEach((drive) => {
+		// Don't send events for drives that were already selected
+		if (!isDriveSelected(drive.device)) {
+			analytics.logEvent('Toggle drive', {
+				drive,
+				previouslySelected: false,
+			});
+		}
+		selectDrive(drive.device);
+	});
+};
+
+interface TargetSelectorProps {
+	disabled: boolean;
+	hasDrive: boolean;
+	flashing: boolean;
+}
+
+export const TargetSelector = ({
+	disabled,
+	hasDrive,
+	flashing,
+}: TargetSelectorProps) => {
+	// TODO: inject these from redux-connector
+	const [
+		{ showDrivesButton, driveListLabel, targets },
+		setStateSlice,
+	] = React.useState(getDriveSelectionStateSlice());
+	const [showTargetSelectorModal, setShowTargetSelectorModal] = React.useState(
+		false,
+	);
+
+	React.useEffect(() => {
+		return observe(() => {
+			setStateSlice(getDriveSelectionStateSlice());
+		});
+	}, []);
+
+	const hasSystemDrives = targets.some((target) => target.isSystem);
+	return (
+		<Flex flexDirection="column" alignItems="center">
+			<DriveSvg
+				className={disabled ? 'disabled' : ''}
+				width="40px"
+				style={{
+					marginBottom: 30,
+				}}
+			/>
+
+			<TargetSelectorButton
+				disabled={disabled}
+				show={!hasDrive && showDrivesButton}
+				tooltip={driveListLabel}
+				openDriveSelector={() => {
+					setShowTargetSelectorModal(true);
+				}}
+				reselectDrive={() => {
+					analytics.logEvent('Reselect drive');
+					setShowTargetSelectorModal(true);
+				}}
+				flashing={flashing}
+				targets={targets}
+			/>
+
+			{hasSystemDrives ? (
+				<Txt
+					color="#fca321"
+					style={{
+						position: 'absolute',
+						bottom: '25px',
+					}}
+				>
+					Warning: {warning.systemDrive()}
+				</Txt>
+			) : null}
+
+			{showTargetSelectorModal && (
+				<TargetSelectorModal
+					cancel={() => setShowTargetSelectorModal(false)}
+					done={(modalTargets) => {
+						selectAllTargets(modalTargets);
+						setShowTargetSelectorModal(false);
+					}}
+				/>
+			)}
+		</Flex>
+	);
+};
--- a/lib/gui/app/components/url-selector/url-selector.tsx
+++ b/lib/gui/app/components/url-selector/url-selector.tsx
@@ -0,0 +1,167 @@
+import { uniqBy } from 'lodash';
+import * as React from 'react';
+import Checkbox from 'rendition/dist_esm5/components/Checkbox';
+import { Flex } from 'rendition/dist_esm5/components/Flex';
+import Input from 'rendition/dist_esm5/components/Input';
+import Link from 'rendition/dist_esm5/components/Link';
+import RadioButton from 'rendition/dist_esm5/components/RadioButton';
+import Txt from 'rendition/dist_esm5/components/Txt';
+
+import * as settings from '../../models/settings';
+import { Modal, ScrollableFlex } from '../../styled-components';
+import { openDialog } from '../../os/dialog';
+import { startEllipsis } from '../../utils/start-ellipsis';
+
+const RECENT_URL_IMAGES_KEY = 'recentUrlImages';
+const SAVE_IMAGE_AFTER_FLASH_KEY = 'saveUrlImage';
+const SAVE_IMAGE_AFTER_FLASH_PATH_KEY = 'saveUrlImageTo';
+
+function normalizeRecentUrlImages(urls: any[]): URL[] {
+	if (!Array.isArray(urls)) {
+		urls = [];
+	}
+	urls = urls
+		.map((url) => {
+			try {
+				return new URL(url);
+			} catch (error) {
+				// Invalid URL, skip
+			}
+		})
+		.filter((url) => url !== undefined);
+	urls = uniqBy(urls, (url) => url.href);
+	return urls.slice(-5);
+}
+
+function getRecentUrlImages(): URL[] {
+	let urls = [];
+	try {
+		urls = JSON.parse(localStorage.getItem(RECENT_URL_IMAGES_KEY) || '[]');
+	} catch {
+		// noop
+	}
+	return normalizeRecentUrlImages(urls);
+}
+
+function setRecentUrlImages(urls: string[]) {
+	localStorage.setItem(RECENT_URL_IMAGES_KEY, JSON.stringify(urls));
+}
+
+export const URLSelector = ({
+	done,
+	cancel,
+}: {
+	done: (imageURL: string) => void;
+	cancel: () => void;
+}) => {
+	const [imageURL, setImageURL] = React.useState('');
+	const [recentImages, setRecentImages] = React.useState<URL[]>([]);
+	const [loading, setLoading] = React.useState(false);
+	const [saveImage, setSaveImage] = React.useState(false);
+	const [saveImagePath, setSaveImagePath] = React.useState('');
+	React.useEffect(() => {
+		const fetchRecentUrlImages = async () => {
+			const recentUrlImages: URL[] = await getRecentUrlImages();
+			setRecentImages(recentUrlImages);
+		};
+		const getSaveImageSettings = async () => {
+			const saveUrlImage: boolean = await settings.get(
+				SAVE_IMAGE_AFTER_FLASH_KEY,
+			);
+			const saveUrlImageToPath: string = await settings.get(
+				SAVE_IMAGE_AFTER_FLASH_PATH_KEY,
+			);
+			setSaveImage(saveUrlImage);
+			setSaveImagePath(saveUrlImageToPath);
+		};
+		fetchRecentUrlImages();
+		getSaveImageSettings();
+	}, []);
+	return (
+		<Modal
+			title="Use Image URL"
+			cancel={cancel}
+			primaryButtonProps={{
+				className: loading || !imageURL ? 'disabled' : '',
+			}}
+			done={async () => {
+				setLoading(true);
+				const urlStrings = recentImages
+					.map((url: URL) => url.href)
+					.concat(imageURL);
+				setRecentUrlImages(urlStrings);
+				await done(imageURL);
+			}}
+		>
+			<Flex flexDirection="column">
+				<Flex mb="16px" width="100%" height="auto" flexDirection="column">
+					<Input
+						value={imageURL}
+						placeholder="Enter a valid URL"
+						type="text"
+						onChange={(evt: React.ChangeEvent<HTMLInputElement>) =>
+							setImageURL(evt.target.value)
+						}
+					/>
+					<Flex alignItems="flex-end">
+						<Checkbox
+							mt="16px"
+							checked={saveImage}
+							onChange={(evt) => {
+								const value = evt.target.checked;
+								setSaveImage(value);
+								settings
+									.set(SAVE_IMAGE_AFTER_FLASH_KEY, value)
+									.then(() => setSaveImage(value));
+							}}
+							label={<>Save file to:&nbsp;</>}
+						/>
+						<Link
+							disabled={!saveImage}
+							onClick={async () => {
+								if (saveImage) {
+									const folder = await openDialog('openDirectory');
+									if (folder) {
+										await settings.set(SAVE_IMAGE_AFTER_FLASH_PATH_KEY, folder);
+										setSaveImagePath(folder);
+									}
+								}
+							}}
+						>
+							{startEllipsis(saveImagePath, 20)}
+						</Link>
+					</Flex>
+				</Flex>
+				{recentImages.length > 0 && (
+					<Flex flexDirection="column" height="58%">
+						<Txt fontSize={18} mb="10px">
+							Recent
+						</Txt>
+						<ScrollableFlex flexDirection="column" p="0">
+							{recentImages
+								.map((recent, i) => (
+									<RadioButton
+										mb={i !== 0 ? '6px' : '0'}
+										key={recent.href}
+										checked={imageURL === recent.href}
+										label={`${recent.pathname.split('/').pop()} - ${
+											recent.href
+										}`}
+										onChange={() => {
+											setImageURL(recent.href);
+										}}
+										style={{
+											overflowWrap: 'break-word',
+										}}
+									/>
+								))
+								.reverse()}
+						</ScrollableFlex>
+					</Flex>
+				)}
+			</Flex>
+		</Modal>
+	);
+};
+
+export default URLSelector;
--- a/lib/gui/app/css/fonts/SourceSansPro-Regular.ttf
+++ b/lib/gui/app/css/fonts/SourceSansPro-Regular.ttf
--- a/lib/gui/app/css/fonts/SourceSansPro-SemiBold.ttf
+++ b/lib/gui/app/css/fonts/SourceSansPro-SemiBold.ttf
--- a/lib/gui/app/css/main.css
+++ b/lib/gui/app/css/main.css
@@ -14,40 +14,36 @@
 * limitations under the License.
 */

-/* Prevent text selection */
-body {
-  -webkit-user-select: none;
+@font-face {
+  font-family: "SourceSansPro";
+  src: url("./fonts/SourceSansPro-Regular.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
 }

-
-/* Allow window to be dragged from anywhere */
-#app-header {
-  -webkit-app-region: drag;
+@font-face {
+  font-family: "SourceSansPro";
+  src: url("./fonts/SourceSansPro-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
 }

-.modal-body {
-  -webkit-app-region: no-drag;
-}
-
-button,
-a,
-input {
-  -webkit-app-region: no-drag;
-}
-
-/* Prevent WebView bounce effect in OS X */
 html,
 body {
+  margin: 0;
+  overflow: hidden;
+
+  /* Prevent white flash when running application */
+  background-color: #4d5057;
+
+  /* Prevent WebView bounce effect in OS X */
  height: 100%;
  width: 100%;
 }

-html {
-  overflow: hidden;
-}
-
+/* Prevent text selection */
 body {
-  overflow: hidden;
+  -webkit-user-select: none;
  -webkit-overflow-scrolling: touch;
 }

@@ -55,11 +51,16 @@ body {
 a:focus,
 input:focus,
 button:focus,
-[tabindex]:focus {
+[tabindex]:focus,
+input[type="checkbox"] + div {
  outline: none !important;
+  box-shadow: none !important;
 }

-/* Titles don't have margins on desktop apps */
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
+.disabled {
+  opacity: 0.4;
+}
+
+#rendition-tooltip-root > div {
+  font-family: "SourceSansPro", sans-serif;
 }
--- a/lib/gui/app/index.html
+++ b/lib/gui/app/index.html
@@ -3,24 +3,10 @@
  <head>
    <meta charset="UTF-8">
    <title>Etcher</title>
-    <link rel="stylesheet" type="text/css" href="../../../node_modules/flexboxgrid/dist/flexboxgrid.css">
-    <link rel="stylesheet" type="text/css" href="../css/main.css">
-    <link rel="stylesheet" type="text/css" href="../css/desktop.css">
-    <link rel="stylesheet" type="text/css" href="../css/angular.css">
-    <script src="../../../generated/gui.js"></script>
+    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
-
-    <main ui-view></main>
-
-    <div class="section-loader"
-      ng-controller="StateController as state"
-      ng-class="{
-        isFinish: state.currentName === 'success'
-      }">
-      <safe-webview src="'https://www.balena.io/etcher/success-banner/'">
-      </safe-webview>
-    </div>
-
+    <main id="main"></main>
+    <script src="gui.js"></script>
  </body>
 </html>
--- a/lib/gui/app/models/available-drives.js
+++ b/lib/gui/app/models/available-drives.js
@@ -1,70 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const store = require('./store')
-
-/**
- * @summary Check if there are available drives
- * @function
- * @public
- *
- * @returns {Boolean} whether there are available drives
- *
- * @example
- * if (availableDrives.hasAvailableDrives()) {
- *   console.log('There are available drives!');
- * }
- */
-exports.hasAvailableDrives = () => {
-  return !_.isEmpty(exports.getDrives())
-}
-
-/**
- * @summary Set a list of drives
- * @function
- * @private
- *
- * @param {Object[]} drives - drives
- *
- * @throws Will throw if no drives
- * @throws Will throw if drives is not an array of objects
- *
- * @example
- * availableDrives.setDrives([ ... ]);
- */
-exports.setDrives = (drives) => {
-  store.dispatch({
-    type: store.Actions.SET_AVAILABLE_DRIVES,
-    data: drives
-  })
-}
-
-/**
- * @summary Get detected drives
- * @function
- * @private
- *
- * @returns {Object[]} drives
- *
- * @example
- * const drives = availableDrives.getDrives();
- */
-exports.getDrives = () => {
-  return store.getState().toJS().availableDrives
-}
--- a/lib/gui/app/scss/components/_label.scss
+++ b/lib/gui/app/scss/components/_label.scss
@@ -14,22 +14,20 @@
 * limitations under the License.
 */

-.label {
-  font-size: 9px;
-  margin-right: 4.5px;
+import { DrivelistDrive } from '../../../shared/drive-constraints';
+import { Actions, store } from './store';
+
+export function hasAvailableDrives() {
+	return getDrives().length > 0;
 }

-.label-big {
-  font-size: 11px;
-  padding: 8px 25px;
+export function setDrives(drives: any[]) {
+	store.dispatch({
+		type: Actions.SET_AVAILABLE_TARGETS,
+		data: drives,
+	});
 }

-.label-inset {
-  background-color: darken($palette-theme-dark-background, 10%);
-  color: darken($palette-theme-dark-foreground, 43%);
-}
-
-.label-danger {
-  background-color: $palette-theme-danger-background;
-  color: $palette-theme-danger-foreground;
+export function getDrives(): DrivelistDrive[] {
+	return store.getState().toJS().availableDrives;
 }
--- a/lib/gui/app/models/files.js
+++ b/lib/gui/app/models/files.js
@@ -1,156 +0,0 @@
-/*
- * Copyright 2018 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const Bluebird = require('bluebird')
-const fs = Bluebird.promisifyAll(require('fs'))
-const path = require('path')
-
-const driveScanner = require('../modules/drive-scanner')
-
-/* eslint-disable lodash/prefer-lodash-method */
-/* eslint-disable no-undefined */
-
-const CONCURRENCY = 10
-
-const collator = new Intl.Collator(undefined, {
-  sensitivity: 'case'
-})
-
-/**
- * @summary Sort files by their names / stats
- * @param {FileEntry} fileA - first file
- * @param {FileEntry} fileB - second file
- * @returns {Number}
- *
- * @example
- * files.readdirAsync(dirname).then((files) => {
- *   return files.sort(sortFiles)
- * })
- */
-const sortFiles = (fileA, fileB) => {
-  return (fileB.isDirectory - fileA.isDirectory) ||
-    collator.compare(fileA.basename, fileB.basename)
-}
-
-/**
- * @summary FileEntry struct
- * @class
- * @type {FileEntry}
- */
-class FileEntry {
-  /**
-   * @summary FileEntry
-   * @param {String} filename - filename
-   * @param {fs.Stats} stats - stats
-   *
-   * @example
-   * new FileEntry(filename, stats)
-   */
-  constructor (filename, stats) {
-    const components = path.parse(filename)
-
-    this.path = filename
-    this.dirname = components.dir
-    this.basename = components.base
-    this.name = components.name
-    this.ext = components.ext
-    this.isHidden = components.name.startsWith('.')
-    this.isFile = stats.isFile()
-    this.isDirectory = stats.isDirectory()
-    this.size = stats.size
-  }
-}
-
-/**
- * @summary Read a directory & stat all contents
- * @param {String} dirpath - Directory path
- * @returns {Array<FileEntry>}
- *
- * @example
- * files.readdirAsync('/').then((files) => {
- *   // ...
- * })
- */
-exports.readdirAsync = (dirpath) => {
-  console.time('readdirAsync')
-  const dirname = path.resolve(dirpath)
-  return fs.readdirAsync(dirname).then((ls) => {
-    return ls.filter((filename) => {
-      return !filename.startsWith('.')
-    }).map((filename) => {
-      return path.join(dirname, filename)
-    })
-  }).map((filename, index, length) => {
-    return fs.statAsync(filename).then((stats) => {
-      return new FileEntry(filename, stats)
-    })
-  }, { concurrency: CONCURRENCY }).then((files) => {
-    console.timeEnd('readdirAsync')
-    return files.sort(sortFiles)
-  })
-}
-
-/**
- * @summary Split a path on it's separator(s)
- * @function
- * @public
- *
- * @param {String} fullpath - full path to split
- * @param {Array<String>} [subpaths] - this param shouldn't normally be used
- * @returns {Array<String>}
- *
- * @example
- * console.log(splitPath(path.join(os.homedir(), 'Downloads'))
- * // Linux
- * > [ '/', 'home', 'user', 'Downloads' ]
- * // Windows
- * > [ 'C:', 'Users', 'user', 'Downloads' ]
- */
-exports.splitPath = (fullpath, subpaths = []) => {
-  const {
-    base,
-    dir,
-    root
-  } = path.parse(fullpath)
-  const isAbsolute = path.isAbsolute(fullpath)
-
-  // Takes care of 'relative/path'
-  if (!isAbsolute && dir === '') {
-    return [ base ].concat(subpaths)
-
-  // Takes care of '/'
-  } else if (isAbsolute && base === '') {
-    return [ root ].concat(subpaths)
-  }
-
-  return exports.splitPath(dir, [ base ].concat(subpaths))
-}
-
-/**
- * @summary Get constraint path device
- * @param {String} pathname - device path
- * @returns {Drive} drive - drive object
- * @example
- * const device = files.getConstraintDevice('/dev/disk2')
- */
-exports.getConstraintDevice = (pathname) => {
-  // This supposes the drive scanner is ready
-  return driveScanner.getBy('device', pathname) || driveScanner.getBy('devicePath', pathname)
-}
-
-exports.FileEntry = FileEntry
--- a/lib/gui/app/models/flash-state.js
+++ b/lib/gui/app/models/flash-state.js
@@ -1,244 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const store = require('./store')
-const units = require('../../../shared/units')
-
-/**
- * @summary Reset flash state
- * @function
- * @public
- *
- * @example
- * flashState.resetState();
- */
-exports.resetState = () => {
-  store.dispatch({
-    type: store.Actions.RESET_FLASH_STATE
-  })
-}
-
-/**
- * @summary Check if currently flashing
- * @function
- * @private
- *
- * @returns {Boolean} whether is flashing or not
- *
- * @example
- * if (flashState.isFlashing()) {
- *   console.log('We\'re currently flashing');
- * }
- */
-exports.isFlashing = () => {
-  return store.getState().toJS().isFlashing
-}
-
-/**
- * @summary Set the flashing flag
- * @function
- * @private
- *
- * @description
- * This function is extracted for testing purposes.
- *
- * The flag is used to signify that we're going to
- * start a flash process.
- *
- * @example
- * flashState.setFlashingFlag();
- */
-exports.setFlashingFlag = () => {
-  store.dispatch({
-    type: store.Actions.SET_FLASHING_FLAG
-  })
-}
-
-/**
- * @summary Unset the flashing flag
- * @function
- * @private
- *
- * @description
- * This function is extracted for testing purposes.
- *
- * The flag is used to signify that the write process ended.
- *
- * @param {Object} results - flash results
- *
- * @example
- * flashState.unsetFlashingFlag({
- *   cancelled: false,
- *   sourceChecksum: 'a1b45d'
- * });
- */
-exports.unsetFlashingFlag = (results) => {
-  store.dispatch({
-    type: store.Actions.UNSET_FLASHING_FLAG,
-    data: results
-  })
-}
-
-/**
- * @summary Set the flashing state
- * @function
- * @private
- *
- * @description
- * This function is extracted for testing purposes.
- *
- * @param {Object} state - flashing state
- *
- * @example
- * flashState.setProgressState({
- *   type: 'write',
- *   percentage: 50,
- *   eta: 15,
- *   speed: 100000000000
- * });
- */
-exports.setProgressState = (state) => {
-  // Preserve only one decimal place
-  const PRECISION = 1
-  const data = _.assign({}, state, {
-    percentage: _.isFinite(state.percentage)
-      ? Math.floor(state.percentage)
-      // eslint-disable-next-line no-undefined
-      : undefined,
-
-    speed: _.attempt(() => {
-      if (_.isFinite(state.speed)) {
-        return _.round(units.bytesToMegabytes(state.speed), PRECISION)
-      }
-
-      return null
-    }),
-
-    totalSpeed: _.attempt(() => {
-      if (_.isFinite(state.totalSpeed)) {
-        return _.round(units.bytesToMegabytes(state.totalSpeed), PRECISION)
-      }
-
-      return null
-    })
-  })
-
-  store.dispatch({
-    type: store.Actions.SET_FLASH_STATE,
-    data
-  })
-}
-
-/**
- * @summary Get the flash results
- * @function
- * @private
- *
- * @returns {Object} flash results
- *
- * @example
- * const results = flashState.getFlashResults();
- */
-exports.getFlashResults = () => {
-  return store.getState().toJS().flashResults
-}
-
-/**
- * @summary Get the current flash state
- * @function
- * @public
- *
- * @returns {Object} flash state
- *
- * @example
- * const flashState = flashState.getFlashState();
- */
-exports.getFlashState = () => {
-  return store.getState().get('flashState').toJS()
-}
-
-/**
- * @summary Determine if the last flash was cancelled
- * @function
- * @public
- *
- * @description
- * This function returns false if there was no last flash.
- *
- * @returns {Boolean} whether the last flash was cancelled
- *
- * @example
- * if (flashState.wasLastFlashCancelled()) {
- *   console.log('The last flash was cancelled');
- * }
- */
-exports.wasLastFlashCancelled = () => {
-  return _.get(exports.getFlashResults(), [ 'cancelled' ], false)
-}
-
-/**
- * @summary Get last flash source checksum
- * @function
- * @public
- *
- * @description
- * This function returns undefined if there was no last flash.
- *
- * @returns {(String|Undefined)} the last flash source checksum
- *
- * @example
- * const checksum = flashState.getLastFlashSourceChecksum();
- */
-exports.getLastFlashSourceChecksum = () => {
-  return exports.getFlashResults().sourceChecksum
-}
-
-/**
- * @summary Get last flash error code
- * @function
- * @public
- *
- * @description
- * This function returns undefined if there was no last flash.
- *
- * @returns {(String|Undefined)} the last flash error code
- *
- * @example
- * const errorCode = flashState.getLastFlashErrorCode();
- */
-exports.getLastFlashErrorCode = () => {
-  return exports.getFlashResults().errorCode
-}
-
-/**
- * @summary Get current (or last) flash uuid
- * @function
- * @public
- *
- * @description
- * This function returns undefined if no flash has been started yet.
- *
- * @returns {String} the last flash uuid
- *
- * @example
- * const uuid = flashState.getFlashUuid();
- */
-exports.getFlashUuid = () => {
-  return store.getState().toJS().flashUuid
-}
--- a/lib/gui/app/models/flash-state.ts
+++ b/lib/gui/app/models/flash-state.ts
@@ -0,0 +1,152 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as sdk from 'etcher-sdk';
+import * as _ from 'lodash';
+
+import { bytesToMegabytes } from '../../../shared/units';
+import { Actions, store } from './store';
+
+/**
+ * @summary Reset flash state
+ */
+export function resetState() {
+	store.dispatch({
+		type: Actions.RESET_FLASH_STATE,
+		data: {},
+	});
+}
+
+/**
+ * @summary Check if currently flashing
+ */
+export function isFlashing(): boolean {
+	return store.getState().toJS().isFlashing;
+}
+
+/**
+ * @summary Set the flashing flag
+ *
+ * @description
+ * The flag is used to signify that we're going to
+ * start a flash process.
+ */
+export function setFlashingFlag() {
+	store.dispatch({
+		type: Actions.SET_FLASHING_FLAG,
+		data: {},
+	});
+}
+
+/**
+ * @summary Unset the flashing flag
+ *
+ * @description
+ * The flag is used to signify that the write process ended.
+ */
+export function unsetFlashingFlag(results: {
+	cancelled?: boolean;
+	sourceChecksum?: string;
+	errorCode?: string | number;
+}) {
+	store.dispatch({
+		type: Actions.UNSET_FLASHING_FLAG,
+		data: results,
+	});
+}
+
+export function setDevicePaths(devicePaths: string[]) {
+	store.dispatch({
+		type: Actions.SET_DEVICE_PATHS,
+		data: devicePaths,
+	});
+}
+
+export function addFailedDevicePath({
+	device,
+	error,
+}: {
+	device: sdk.scanner.adapters.DrivelistDrive;
+	error: Error;
+}) {
+	const failedDevicePathsMap = new Map(
+		store.getState().toJS().failedDevicePaths,
+	);
+	failedDevicePathsMap.set(device.device, {
+		description: device.description,
+		device: device.device,
+		devicePath: device.devicePath,
+		...error,
+	});
+	store.dispatch({
+		type: Actions.SET_FAILED_DEVICE_PATHS,
+		data: Array.from(failedDevicePathsMap),
+	});
+}
+
+/**
+ * @summary Set the flashing state
+ */
+export function setProgressState(
+	state: sdk.multiWrite.MultiDestinationProgress,
+) {
+	// Preserve only one decimal place
+	const PRECISION = 1;
+	const data = {
+		...state,
+		percentage:
+			state.percentage !== undefined && _.isFinite(state.percentage)
+				? Math.floor(state.percentage)
+				: undefined,
+
+		speed: _.attempt(() => {
+			if (_.isFinite(state.speed)) {
+				return _.round(bytesToMegabytes(state.speed), PRECISION);
+			}
+
+			return null;
+		}),
+	};
+
+	store.dispatch({
+		type: Actions.SET_FLASH_STATE,
+		data,
+	});
+}
+
+export function getFlashResults() {
+	return store.getState().toJS().flashResults;
+}
+
+export function getFlashState() {
+	return store.getState().get('flashState').toJS();
+}
+
+export function wasLastFlashCancelled() {
+	return _.get(getFlashResults(), ['cancelled'], false);
+}
+
+export function getLastFlashSourceChecksum(): string {
+	return getFlashResults().sourceChecksum;
+}
+
+export function getLastFlashErrorCode() {
+	return getFlashResults().errorCode;
+}
+
+export function getFlashUuid() {
+	return store.getState().toJS().flashUuid;
+}
--- a/lib/gui/app/models/leds.ts
+++ b/lib/gui/app/models/leds.ts
@@ -0,0 +1,225 @@
+/*
+ * Copyright 2020 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as _ from 'lodash';
+import { AnimationFunction, Color, RGBLed } from 'sys-class-rgb-led';
+
+import {
+	isSourceDrive,
+	DrivelistDrive,
+} from '../../../shared/drive-constraints';
+import * as settings from './settings';
+import { DEFAULT_STATE, observe } from './store';
+
+const leds: Map<string, RGBLed> = new Map();
+
+function setLeds(
+	drivesPaths: Set<string>,
+	colorOrAnimation: Color | AnimationFunction,
+	frequency?: number,
+) {
+	for (const path of drivesPaths) {
+		const led = leds.get(path);
+		if (led) {
+			if (Array.isArray(colorOrAnimation)) {
+				led.setStaticColor(colorOrAnimation);
+			} else {
+				led.setAnimation(colorOrAnimation, frequency);
+			}
+		}
+	}
+}
+
+const red: Color = [1, 0, 0];
+const green: Color = [0, 1, 0];
+const blue: Color = [0, 0, 1];
+const white: Color = [1, 1, 1];
+const black: Color = [0, 0, 0];
+const purple: Color = [0.5, 0, 0.5];
+
+function createAnimationFunction(
+	intensityFunction: (t: number) => number,
+	color: Color,
+): AnimationFunction {
+	return (t: number): Color => {
+		const intensity = intensityFunction(t);
+		return color.map((v) => v * intensity) as Color;
+	};
+}
+
+function blink(t: number) {
+	return Math.floor(t / 1000) % 2;
+}
+
+function breathe(t: number) {
+	return (1 + Math.sin(t / 1000)) / 2;
+}
+
+const breatheBlue = createAnimationFunction(breathe, blue);
+const blinkGreen = createAnimationFunction(blink, green);
+const blinkPurple = createAnimationFunction(blink, purple);
+
+interface LedsState {
+	step: 'main' | 'flashing' | 'verifying' | 'finish';
+	sourceDrive: string | undefined;
+	availableDrives: string[];
+	selectedDrives: string[];
+	failedDrives: string[];
+}
+
+// Source slot (1st slot): behaves as a target unless it is chosen as source
+//  No drive: black
+//  Drive plugged: blue - on
+//
+// Other slots (2 - 16):
+//
+// +----------------+---------------+-----------------------------+----------------------------+---------------------------------+
+// |                | main screen   | flashing                    | validating                 | results screen                  |
+// +----------------+---------------+-----------------------------+----------------------------+---------------------------------+
+// | no drive       | black         | black                       | black                      | black                           |
+// +----------------+---------------+-----------------------------+----------------------------+---------------------------------+
+// | drive plugged  | black         | black                       | black                      | black                           |
+// +----------------+---------------+-----------------------------+----------------------------+---------------------------------+
+// | drive selected | white         | blink purple, red if failed | blink green, red if failed | green if success, red if failed |
+// +----------------+---------------+-----------------------------+----------------------------+---------------------------------+
+export function updateLeds({
+	step,
+	sourceDrive,
+	availableDrives,
+	selectedDrives,
+	failedDrives,
+}: LedsState) {
+	const unplugged = new Set(leds.keys());
+	const plugged = new Set(availableDrives);
+	const selectedOk = new Set(selectedDrives);
+	const selectedFailed = new Set(failedDrives);
+
+	// Remove selected devices from plugged set
+	for (const d of selectedOk) {
+		plugged.delete(d);
+	}
+
+	// Remove plugged devices from unplugged set
+	for (const d of plugged) {
+		unplugged.delete(d);
+	}
+
+	// Remove failed devices from selected set
+	for (const d of selectedFailed) {
+		selectedOk.delete(d);
+	}
+
+	// Handle source slot
+	if (sourceDrive !== undefined) {
+		if (unplugged.has(sourceDrive)) {
+			unplugged.delete(sourceDrive);
+			// TODO
+			setLeds(new Set([sourceDrive]), breatheBlue, 2);
+		} else if (plugged.has(sourceDrive)) {
+			plugged.delete(sourceDrive);
+			setLeds(new Set([sourceDrive]), blue);
+		}
+	}
+	if (step === 'main') {
+		setLeds(unplugged, black);
+		setLeds(plugged, black);
+		setLeds(selectedOk, white);
+		setLeds(selectedFailed, white);
+	} else if (step === 'flashing') {
+		setLeds(unplugged, black);
+		setLeds(plugged, black);
+		setLeds(selectedOk, blinkPurple, 2);
+		setLeds(selectedFailed, red);
+	} else if (step === 'verifying') {
+		setLeds(unplugged, black);
+		setLeds(plugged, black);
+		setLeds(selectedOk, blinkGreen, 2);
+		setLeds(selectedFailed, red);
+	} else if (step === 'finish') {
+		setLeds(unplugged, black);
+		setLeds(plugged, black);
+		setLeds(selectedOk, green);
+		setLeds(selectedFailed, red);
+	}
+}
+
+interface DeviceFromState {
+	devicePath?: string;
+	device: string;
+}
+
+let ledsState: LedsState | undefined;
+
+function stateObserver(state: typeof DEFAULT_STATE) {
+	const s = state.toJS();
+	let step: 'main' | 'flashing' | 'verifying' | 'finish';
+	if (s.isFlashing) {
+		step = s.flashState.type;
+	} else {
+		step = s.lastAverageFlashingSpeed == null ? 'main' : 'finish';
+	}
+	const availableDrives = s.availableDrives.filter(
+		(d: DeviceFromState) => d.devicePath,
+	);
+	const sourceDrivePath = availableDrives.filter((d: DrivelistDrive) =>
+		isSourceDrive(d, s.selection.image),
+	)[0]?.devicePath;
+	const availableDrivesPaths = availableDrives.map(
+		(d: DeviceFromState) => d.devicePath,
+	);
+	let selectedDrivesPaths: string[];
+	if (step === 'main') {
+		selectedDrivesPaths = availableDrives
+			.filter((d: DrivelistDrive) => s.selection.devices.includes(d.device))
+			.map((d: DrivelistDrive) => d.devicePath);
+	} else {
+		selectedDrivesPaths = s.devicePaths;
+	}
+	const failedDevicePaths = s.failedDevicePaths.map(
+		([devicePath]: [string]) => devicePath,
+	);
+	const newLedsState = {
+		step,
+		sourceDrive: sourceDrivePath,
+		availableDrives: availableDrivesPaths,
+		selectedDrives: selectedDrivesPaths,
+		failedDrives: failedDevicePaths,
+	};
+	if (!_.isEqual(newLedsState, ledsState)) {
+		updateLeds(newLedsState);
+		ledsState = newLedsState;
+	}
+}
+
+export async function init(): Promise<void> {
+	// ledsMapping is something like:
+	// {
+	// 	'platform-xhci-hcd.0.auto-usb-0:1.1.1:1.0-scsi-0:0:0:0': [
+	// 		'led1_r',
+	// 		'led1_g',
+	// 		'led1_b',
+	// 	],
+	// 	...
+	// }
+	const ledsMapping: _.Dictionary<[string, string, string]> =
+		(await settings.get('ledsMapping')) || {};
+	if (!_.isEmpty(ledsMapping)) {
+		for (const [drivePath, ledsNames] of Object.entries(ledsMapping)) {
+			leds.set('/dev/disk/by-path/' + drivePath, new RGBLed(ledsNames));
+		}
+		observe(_.debounce(stateObserver, 1000, { maxWait: 1000 }));
+	}
+}
--- a/lib/gui/app/models/local-settings.js
+++ b/lib/gui/app/models/local-settings.js
@@ -1,184 +0,0 @@
-/*
- * Copyright 2017 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const Bluebird = require('bluebird')
-const fs = require('fs')
-const path = require('path')
-
-/**
- * @summary Number of spaces to indent JSON output with
- * @type {Number}
- * @constant
- */
-const JSON_INDENT = 2
-
-/**
- * @summary Userdata directory path
- * @description
- * Defaults to the following:
- * - `%APPDATA%/etcher` on Windows
- * - `$XDG_CONFIG_HOME/etcher` or `~/.config/etcher` on Linux
- * - `~/Library/Application Support/etcher` on macOS
- * See https://electronjs.org/docs/api/app#appgetpathname
- * @constant
- * @type {String}
- */
-const USER_DATA_DIR = (() => {
-  // NOTE: The ternary is due to this module being loaded both,
-  // Electron's main process and renderer process
-  const electron = require('electron')
-  return electron.app
-    ? electron.app.getPath('userData')
-    : electron.remote.app.getPath('userData')
-})()
-
-/**
- * @summary Configuration file path
- * @type {String}
- * @constant
- */
-const CONFIG_PATH = path.join(USER_DATA_DIR, 'config.json')
-
-/**
- * @summary Read a local config.json file
- * @function
- * @private
- *
- * @param {String} filename - file path
- * @fulfil {Object} - settings
- * @returns {Promise}
- *
- * @example
- * readConfigFile('config.json').then((settings) => {
- *   console.log(settings)
- * })
- */
-const readConfigFile = (filename) => {
-  return new Bluebird((resolve, reject) => {
-    fs.readFile(filename, { encoding: 'utf8' }, (error, contents) => {
-      let data = {}
-      if (error) {
-        if (error.code === 'ENOENT') {
-          resolve(data)
-        } else {
-          reject(error)
-        }
-      } else {
-        try {
-          data = JSON.parse(contents)
-        } catch (parseError) {
-          console.error(parseError)
-        }
-        resolve(data)
-      }
-    })
-  })
-}
-
-/**
- * @summary Write to the local configuration file
- * @function
- * @private
- *
- * @param {String} filename - file path
- * @param {Object} data - data
- * @fulfil {Object} data - data
- * @returns {Promise}
- *
- * @example
- * writeConfigFile('config.json', { something: 'good' })
- *   .then(() => {
- *     console.log('data written')
- *   })
- */
-const writeConfigFile = (filename, data) => {
-  return new Bluebird((resolve, reject) => {
-    const contents = JSON.stringify(data, null, JSON_INDENT)
-    fs.writeFile(filename, contents, (error) => {
-      if (error) {
-        reject(error)
-      } else {
-        resolve(data)
-      }
-    })
-  })
-}
-
-/**
- * @summary Read all local settings
- * @function
- * @public
- *
- * @fulfil {Object} - local settings
- * @returns {Promise}
- *
- * @example
- * localSettings.readAll().then((settings) => {
- *   console.log(settings);
- * });
- */
-exports.readAll = () => {
-  return readConfigFile(CONFIG_PATH)
-}
-
-/**
- * @summary Write local settings
- * @function
- * @public
- *
- * @param {Object} settings - settings
- * @fulfil {Object} settings - settings
- * @returns {Promise}
- *
- * @example
- * localSettings.writeAll({
- *   foo: 'bar'
- * }).then(() => {
- *   console.log('Done!');
- * });
- */
-exports.writeAll = (settings) => {
-  return writeConfigFile(CONFIG_PATH, settings)
-}
-
-/**
- * @summary Clear the local settings
- * @function
- * @private
- *
- * @description
- * Exported for testing purposes
- *
- * @returns {Promise}
- *
- * @example
- * localSettings.clear().then(() => {
- *   console.log('Done!');
- * });
- */
-exports.clear = () => {
-  return new Bluebird((resolve, reject) => {
-    fs.unlink(CONFIG_PATH, (error) => {
-      if (error) {
-        reject(error)
-      } else {
-        resolve()
-      }
-    })
-  })
-}
--- a/lib/gui/app/models/selection-state.js
+++ b/lib/gui/app/models/selection-state.js
@@ -1,438 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const store = require('./store')
-const availableDrives = require('./available-drives')
-
-/**
- * @summary Select a drive by its device path
- * @function
- * @public
- *
- * @param {String} driveDevice - drive device
- *
- * @example
- * selectionState.selectDrive('/dev/disk2');
- */
-exports.selectDrive = (driveDevice) => {
-  store.dispatch({
-    type: store.Actions.SELECT_DRIVE,
-    data: driveDevice
-  })
-}
-
-/**
- * @summary Toggle drive selection
- * @function
- * @public
- *
- * @param {String} driveDevice - drive device
- *
- * @example
- * selectionState.toggleDrive('/dev/disk2');
- */
-exports.toggleDrive = (driveDevice) => {
-  if (exports.isDriveSelected(driveDevice)) {
-    exports.deselectDrive(driveDevice)
-  } else {
-    exports.selectDrive(driveDevice)
-  }
-}
-
-/**
- * @summary Deselect all other drives and keep the current drive's status
- * @function
- * @public
- * @deprecated
- *
- * @description
- * This is a temporary function during the transition to multi-writes,
- * remove this and its uses when multi-selection should become user-facing.
- *
- * @param {String} driveDevice - drive device identifier
- *
- * @example
- * console.log(selectionState.getSelectedDevices())
- * > [ '/dev/disk1', '/dev/disk2', '/dev/disk3' ]
- * selectionState.deselectOtherDrives('/dev/disk2')
- * console.log(selectionState.getSelectedDevices())
- * > [ '/dev/disk2' ]
- */
-exports.deselectOtherDrives = (driveDevice) => {
-  if (exports.isDriveSelected(driveDevice)) {
-    const otherDevices = _.reject(exports.getSelectedDevices(), _.partial(_.isEqual, driveDevice))
-    _.each(otherDevices, exports.deselectDrive)
-  } else {
-    exports.deselectAllDrives()
-  }
-}
-
-/**
- * @summary Select an image
- * @function
- * @public
- *
- * @param {Object} image - image
- *
- * @example
- * selectionState.selectImage({
- *   path: 'foo.img',
- *   size: 1000000000,
- *   compressedSize: 1000000000,
- *   isSizeEstimated: false,
- * });
- */
-exports.selectImage = (image) => {
-  store.dispatch({
-    type: store.Actions.SELECT_IMAGE,
-    data: image
-  })
-}
-
-/**
- * @summary Get all selected drives' devices
- * @function
- * @public
- *
- * @returns {String[]} selected drives' devices
- *
- * @example
- * for (driveDevice of selectionState.getSelectedDevices()) {
- *   console.log(driveDevice)
- * }
- * > '/dev/disk1'
- * > '/dev/disk2'
- */
-exports.getSelectedDevices = () => {
-  return store.getState().getIn([ 'selection', 'devices' ]).toJS()
-}
-
-/**
- * @summary Get all selected drive objects
- * @function
- * @public
- *
- * @returns {Object[]} selected drive objects
- *
- * @example
- * for (drive of selectionState.getSelectedDrives()) {
- *   console.log(drive)
- * }
- * > '{ device: '/dev/disk1', size: 123456789, ... }'
- * > '{ device: '/dev/disk2', size: 987654321, ... }'
- */
-exports.getSelectedDrives = () => {
-  const drives = availableDrives.getDrives()
-  return _.map(exports.getSelectedDevices(), (device) => {
-    return _.find(drives, { device })
-  })
-}
-
-/**
- * @summary Get the head of the list of selected drives
- * @function
- * @public
- *
- * @returns {Object} drive
- *
- * @example
- * const drive = selectionState.getCurrentDrive();
- * console.log(drive)
- * > { device: '/dev/disk1', name: 'Flash drive', ... }
- */
-exports.getCurrentDrive = () => {
-  const device = _.head(exports.getSelectedDevices())
-  return _.find(availableDrives.getDrives(), { device })
-}
-
-/**
- * @summary Get the selected image
- * @function
- * @public
- *
- * @returns {Object} image
- *
- * @example
- * const image = selectionState.getImage();
- */
-exports.getImage = () => {
-  return _.get(store.getState().toJS(), [ 'selection', 'image' ])
-}
-
-/**
- * @summary Get image path
- * @function
- * @public
- *
- * @returns {String} image path
- *
- * @example
- * const imagePath = selectionState.getImagePath();
- */
-exports.getImagePath = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'path'
-  ])
-}
-
-/**
- * @summary Get image size
- * @function
- * @public
- *
- * @returns {Number} image size
- *
- * @example
- * const imageSize = selectionState.getImageSize();
- */
-exports.getImageSize = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'size'
-  ])
-}
-
-/**
- * @summary Get image url
- * @function
- * @public
- *
- * @returns {String} image url
- *
- * @example
- * const imageUrl = selectionState.getImageUrl();
- */
-exports.getImageUrl = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'url'
-  ])
-}
-
-/**
- * @summary Get image name
- * @function
- * @public
- *
- * @returns {String} image name
- *
- * @example
- * const imageName = selectionState.getImageName();
- */
-exports.getImageName = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'name'
-  ])
-}
-
-/**
- * @summary Get image logo
- * @function
- * @public
- *
- * @returns {String} image logo
- *
- * @example
- * const imageLogo = selectionState.getImageLogo();
- */
-exports.getImageLogo = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'logo'
-  ])
-}
-
-/**
- * @summary Get image support url
- * @function
- * @public
- *
- * @returns {String} image support url
- *
- * @example
- * const imageSupportUrl = selectionState.getImageSupportUrl();
- */
-exports.getImageSupportUrl = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'supportUrl'
-  ])
-}
-
-/**
- * @summary Get image recommended drive size
- * @function
- * @public
- *
- * @returns {String} image recommended drive size
- *
- * @example
- * const imageRecommendedDriveSize = selectionState.getImageRecommendedDriveSize();
- */
-exports.getImageRecommendedDriveSize = () => {
-  return _.get(store.getState().toJS(), [
-    'selection',
-    'image',
-    'recommendedDriveSize'
-  ])
-}
-
-/**
- * @summary Check if there is a selected drive
- * @function
- * @public
- *
- * @returns {Boolean} whether there is a selected drive
- *
- * @example
- * if (selectionState.hasDrive()) {
- *   console.log('There is a drive!');
- * }
- */
-exports.hasDrive = () => {
-  return Boolean(exports.getSelectedDevices().length)
-}
-
-/**
- * @summary Check if there is a selected image
- * @function
- * @public
- *
- * @returns {Boolean} whether there is a selected image
- *
- * @example
- * if (selectionState.hasImage()) {
- *   console.log('There is an image!');
- * }
- */
-exports.hasImage = () => {
-  return Boolean(exports.getImage())
-}
-
-/**
- * @summary Remove drive from selection
- * @function
- * @public
- *
- * @param {String} driveDevice - drive device identifier
- *
- * @example
- * selectionState.deselectDrive('/dev/sdc');
- *
- * @example
- * selectionState.deselectDrive('\\\\.\\PHYSICALDRIVE3');
- */
-exports.deselectDrive = (driveDevice) => {
-  store.dispatch({
-    type: store.Actions.DESELECT_DRIVE,
-    data: driveDevice
-  })
-}
-
-/**
- * @summary Deselect image
- * @function
- * @public
- *
- * @example
- * selectionState.deselectImage();
- */
-exports.deselectImage = () => {
-  store.dispatch({
-    type: store.Actions.DESELECT_IMAGE
-  })
-}
-
-/**
- * @summary Deselect all drives
- * @function
- * @public
- *
- * @example
- * selectionState.deselectAllDrives()
- */
-exports.deselectAllDrives = () => {
-  _.each(exports.getSelectedDevices(), exports.deselectDrive)
-}
-
-/**
- * @summary Clear selections
- * @function
- * @public
- *
- * @example
- * selectionState.clear();
- */
-exports.clear = () => {
-  exports.deselectImage()
-  exports.deselectAllDrives()
-}
-
-/**
- * @summary Check if a drive is the current drive
- * @function
- * @public
- *
- * @param {String} driveDevice - drive device
- * @returns {Boolean} whether the drive is the current drive
- *
- * @example
- * if (selectionState.isCurrentDrive('/dev/sdb')) {
- *   console.log('This is the current drive!');
- * }
- */
-exports.isCurrentDrive = (driveDevice) => {
-  if (!driveDevice) {
-    return false
-  }
-
-  return driveDevice === _.get(exports.getCurrentDrive(), [ 'device' ])
-}
-
-/**
- * @summary Check whether a given device is selected.
- * @function
- * @public
- *
- * @param {String} driveDevice - drive device identifier
- * @returns {Boolean}
- *
- * @example
- * const isSelected = selectionState.isDriveSelected('/dev/sdb')
- *
- * if (isSelected) {
- *   selectionState.deselectDrive(driveDevice)
- * }
- */
-exports.isDriveSelected = (driveDevice) => {
-  if (!driveDevice) {
-    return false
-  }
-
-  const selectedDriveDevices = exports.getSelectedDevices()
-  return _.includes(selectedDriveDevices, driveDevice)
-}
--- a/lib/gui/app/models/selection-state.ts
+++ b/lib/gui/app/models/selection-state.ts
@@ -0,0 +1,148 @@
+import { DrivelistDrive } from '../../../shared/drive-constraints';
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { SourceMetadata } from '../components/source-selector/source-selector';
+
+import * as availableDrives from './available-drives';
+import { Actions, store } from './store';
+
+/**
+ * @summary Select a drive by its device path
+ */
+export function selectDrive(driveDevice: string) {
+	store.dispatch({
+		type: Actions.SELECT_TARGET,
+		data: driveDevice,
+	});
+}
+
+/**
+ * @summary Toggle drive selection
+ */
+export function toggleDrive(driveDevice: string) {
+	if (isDriveSelected(driveDevice)) {
+		deselectDrive(driveDevice);
+	} else {
+		selectDrive(driveDevice);
+	}
+}
+
+export function selectSource(source: SourceMetadata) {
+	store.dispatch({
+		type: Actions.SELECT_SOURCE,
+		data: source,
+	});
+}
+
+/**
+ * @summary Get all selected drives' devices
+ */
+export function getSelectedDevices(): string[] {
+	return store.getState().getIn(['selection', 'devices']).toJS();
+}
+
+/**
+ * @summary Get all selected drive objects
+ */
+export function getSelectedDrives(): DrivelistDrive[] {
+	const selectedDevices = getSelectedDevices();
+	return availableDrives
+		.getDrives()
+		.filter((drive) => selectedDevices.includes(drive.device));
+}
+
+/**
+ * @summary Get the selected image
+ */
+export function getImage(): SourceMetadata | undefined {
+	return store.getState().toJS().selection.image;
+}
+
+export function getImagePath(): string | undefined {
+	return store.getState().toJS().selection.image?.path;
+}
+
+export function getImageSize(): number | undefined {
+	return store.getState().toJS().selection.image?.size;
+}
+
+export function getImageName(): string | undefined {
+	return store.getState().toJS().selection.image?.name;
+}
+
+export function getImageLogo(): string | undefined {
+	return store.getState().toJS().selection.image?.logo;
+}
+
+export function getImageSupportUrl(): string | undefined {
+	return store.getState().toJS().selection.image?.supportUrl;
+}
+
+/**
+ * @summary Check if there is a selected drive
+ */
+export function hasDrive(): boolean {
+	return Boolean(getSelectedDevices().length);
+}
+
+/**
+ * @summary Check if there is a selected image
+ */
+export function hasImage(): boolean {
+	return getImage() !== undefined;
+}
+
+/**
+ * @summary Remove drive from selection
+ */
+export function deselectDrive(driveDevice: string) {
+	store.dispatch({
+		type: Actions.DESELECT_TARGET,
+		data: driveDevice,
+	});
+}
+
+export function deselectImage() {
+	store.dispatch({
+		type: Actions.DESELECT_SOURCE,
+		data: {},
+	});
+}
+
+export function deselectAllDrives() {
+	getSelectedDevices().forEach(deselectDrive);
+}
+
+/**
+ * @summary Clear selections
+ */
+export function clear() {
+	deselectImage();
+	deselectAllDrives();
+}
+
+/**
+ * @summary Check whether a given device is selected.
+ */
+export function isDriveSelected(driveDevice: string) {
+	if (!driveDevice) {
+		return false;
+	}
+
+	const selectedDriveDevices = getSelectedDevices();
+	return selectedDriveDevices.includes(driveDevice);
+}
--- a/lib/gui/app/models/settings.js
+++ b/lib/gui/app/models/settings.js
@@ -1,232 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-/**
- * @module Etcher.Models.Settings
- */
-
-const _ = require('lodash')
-const Bluebird = require('bluebird')
-const localSettings = require('./local-settings')
-const errors = require('../../../shared/errors')
-const packageJSON = require('../../../../package.json')
-const debug = require('debug')('etcher:models:settings')
-
-/**
- * @summary Default settings
- * @constant
- * @type {Object}
- */
-const DEFAULT_SETTINGS = {
-  unsafeMode: false,
-  errorReporting: true,
-  unmountOnSuccess: true,
-  validateWriteOnSuccess: true,
-  trim: false,
-  updatesEnabled: packageJSON.updates.enabled && !_.includes([ 'rpm', 'deb' ], packageJSON.packageType),
-  lastSleptUpdateNotifier: null,
-  lastSleptUpdateNotifierVersion: null,
-  desktopNotifications: true
-}
-
-/**
- * @summary Settings state
- * @type {Object}
- * @private
- */
-let settings = _.cloneDeep(DEFAULT_SETTINGS)
-
-/**
- * @summary Reset settings to their default values
- * @function
- * @public
- *
- * @returns {Promise}
- *
- * @example
- * settings.reset().then(() => {
- *   console.log('Done!');
- * });
- */
-exports.reset = () => {
-  debug('reset')
-
-  // TODO: Remove default settings from config file (?)
-  settings = _.cloneDeep(DEFAULT_SETTINGS)
-  return localSettings.writeAll(settings)
-}
-
-/**
- * @summary Extend the current settings
- * @function
- * @public
- *
- * @param {Object} value - value
- * @returns {Promise}
- *
- * @example
- * settings.assign({
- *   foo: 'bar'
- * }).then(() => {
- *   console.log('Done!');
- * });
- */
-exports.assign = (value) => {
-  debug('assign', value)
-  if (_.isNil(value)) {
-    return Bluebird.reject(errors.createError({
-      title: 'Missing settings'
-    }))
-  }
-
-  if (!_.isPlainObject(value)) {
-    return Bluebird.reject(errors.createError({
-      title: 'Settings must be an object'
-    }))
-  }
-
-  const newSettings = _.assign({}, settings, value)
-
-  return localSettings.writeAll(newSettings)
-    .then((updatedSettings) => {
-      // NOTE: Only update in memory settings when successfully written
-      settings = updatedSettings
-    })
-}
-
-/**
- * @summary Extend the application state with the local settings
- * @function
- * @public
- *
- * @returns {Promise}
- *
- * @example
- * settings.load().then(() => {
- *   console.log('Done!');
- * });
- */
-exports.load = () => {
-  debug('load')
-  return localSettings.readAll().then((loadedSettings) => {
-    return _.assign(settings, loadedSettings)
-  })
-}
-
-/**
- * @summary Set a setting value
- * @function
- * @public
- *
- * @param {String} key - setting key
- * @param {*} value - setting value
- * @returns {Promise}
- *
- * @example
- * settings.set('unmountOnSuccess', true).then(() => {
- *   console.log('Done!');
- * });
- */
-exports.set = (key, value) => {
-  debug('set', key, value)
-  if (_.isNil(key)) {
-    return Bluebird.reject(errors.createError({
-      title: 'Missing setting key'
-    }))
-  }
-
-  if (!_.isString(key)) {
-    return Bluebird.reject(errors.createError({
-      title: `Invalid setting key: ${key}`
-    }))
-  }
-
-  const previousValue = settings[key]
-
-  settings[key] = value
-
-  return localSettings.writeAll(settings)
-    .catch((error) => {
-      // Revert to previous value if persisting settings failed
-      settings[key] = previousValue
-      throw error
-    })
-}
-
-/**
- * @summary Get a setting value
- * @function
- * @public
- *
- * @param {String} key - setting key
- * @returns {*} setting value
- *
- * @example
- * const value = settings.get('unmountOnSuccess');
- */
-exports.get = (key) => {
-  return _.cloneDeep(_.get(settings, [ key ]))
-}
-
-/**
- * @summary Check if setting value exists
- * @function
- * @public
- *
- * @param {String} key - setting key
- * @returns {Boolean} exists
- *
- * @example
- * const hasValue = settings.has('unmountOnSuccess');
- */
-exports.has = (key) => {
-  /* eslint-disable no-eq-null */
-  return settings[key] != null
-}
-
-/**
- * @summary Get all setting values
- * @function
- * @public
- *
- * @returns {Object} all setting values
- *
- * @example
- * const allSettings = settings.getAll();
- * console.log(allSettings.unmountOnSuccess);
- */
-exports.getAll = () => {
-  debug('getAll')
-  return _.cloneDeep(settings)
-}
-
-/**
- * @summary Get the default setting values
- * @function
- * @public
- *
- * @returns {Object} all setting values
- *
- * @example
- * const defaults = settings.getDefaults();
- * console.log(defaults.unmountOnSuccess);
- */
-exports.getDefaults = () => {
-  debug('getDefaults')
-  return _.cloneDeep(DEFAULT_SETTINGS)
-}
--- a/lib/gui/app/models/settings.ts
+++ b/lib/gui/app/models/settings.ts
@@ -0,0 +1,134 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as _debug from 'debug';
+import * as electron from 'electron';
+import * as _ from 'lodash';
+import { promises as fs } from 'fs';
+import { join } from 'path';
+
+import * as packageJSON from '../../../../package.json';
+
+const debug = _debug('etcher:models:settings');
+
+const JSON_INDENT = 2;
+
+export const DEFAULT_WIDTH = 800;
+export const DEFAULT_HEIGHT = 480;
+
+/**
+ * @summary Userdata directory path
+ * @description
+ * Defaults to the following:
+ * - `%APPDATA%/etcher` on Windows
+ * - `$XDG_CONFIG_HOME/etcher` or `~/.config/etcher` on Linux
+ * - `~/Library/Application Support/etcher` on macOS
+ * See https://electronjs.org/docs/api/app#appgetpathname
+ *
+ * NOTE: The ternary is due to this module being loaded both,
+ * Electron's main process and renderer process
+ */
+
+const app = electron.app || electron.remote.app;
+
+const USER_DATA_DIR = app.getPath('userData');
+
+const CONFIG_PATH = join(USER_DATA_DIR, 'config.json');
+
+const DOWNLOADS_DIR = app.getPath('downloads');
+
+async function readConfigFile(filename: string): Promise<_.Dictionary<any>> {
+	let contents = '{}';
+	try {
+		contents = await fs.readFile(filename, { encoding: 'utf8' });
+	} catch (error) {
+		// noop
+	}
+	try {
+		return JSON.parse(contents);
+	} catch (parseError) {
+		console.error(parseError);
+		return {};
+	}
+}
+
+// exported for tests
+export async function readAll() {
+	return await readConfigFile(CONFIG_PATH);
+}
+
+// exported for tests
+export async function writeConfigFile(
+	filename: string,
+	data: _.Dictionary<any>,
+): Promise<void> {
+	await fs.writeFile(filename, JSON.stringify(data, null, JSON_INDENT));
+}
+
+const DEFAULT_SETTINGS: _.Dictionary<any> = {
+	errorReporting: true,
+	unmountOnSuccess: true,
+	validateWriteOnSuccess: true,
+	updatesEnabled: !_.includes(['rpm', 'deb'], packageJSON.packageType),
+	desktopNotifications: true,
+	autoBlockmapping: true,
+	decompressFirst: true,
+	saveUrlImage: false,
+	saveUrlImageTo: DOWNLOADS_DIR,
+};
+
+const settings = _.cloneDeep(DEFAULT_SETTINGS);
+
+async function load(): Promise<void> {
+	debug('load');
+	const loadedSettings = await readAll();
+	_.assign(settings, loadedSettings);
+}
+
+const loaded = load();
+
+export async function set(
+	key: string,
+	value: any,
+	writeConfigFileFn = writeConfigFile,
+): Promise<void> {
+	debug('set', key, value);
+	await loaded;
+	const previousValue = settings[key];
+	settings[key] = value;
+	try {
+		await writeConfigFileFn(CONFIG_PATH, settings);
+	} catch (error) {
+		// Revert to previous value if persisting settings failed
+		settings[key] = previousValue;
+		throw error;
+	}
+}
+
+export async function get(key: string): Promise<any> {
+	await loaded;
+	return getSync(key);
+}
+
+export function getSync(key: string): any {
+	return _.cloneDeep(settings[key]);
+}
+
+export async function getAll() {
+	debug('getAll');
+	await loaded;
+	return _.cloneDeep(settings);
+}
--- a/lib/gui/app/models/storage.js
+++ b/lib/gui/app/models/storage.js
@@ -1,164 +0,0 @@
-/*
- * Copyright 2018 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const INDENTATION_SPACES = 2
-
-/**
- * @summary Localstorage class and helper functions
- * @class
- * @public
- */
-class Storage {
-  /**
-   * @function
-   * @public
-   *
-   * @param {String} superkey - superkey
-   *
-   * @example
-   * const potatoStorage = new Storage('potato')
-   */
-  constructor (superkey) {
-    this.superkey = superkey
-  }
-
-  /**
-   * @summary Get the whole object under the superkey
-   * @function
-   * @public
-   *
-   * @returns {Object}
-   *
-   * @example
-   * for (const key in potatoStorage.getAll()) {
-   *   console.log(key)
-   * }
-   */
-  getAll () {
-    try {
-      // JSON.parse(null) === null, so we fallback to {}
-      return JSON.parse(window.localStorage.getItem(this.superkey)) || {}
-    } catch (err) {
-      this.setAll({})
-      throw err
-    }
-  }
-
-  /**
-   * @summary Set the whole object under the superkey
-   * @function
-   * @public
-   *
-   * @param {Any} value - any valid JSON value
-   *
-   * @example
-   * potatoStorage.setAll({
-   *   location: 'somewhere',
-   *   freshness: 100,
-   *   edible: true
-   * })
-   */
-  setAll (value) {
-    window.localStorage.setItem(this.superkey, JSON.stringify(value, null, INDENTATION_SPACES))
-  }
-
-  /**
-   * @summary Clear the whole object under the superkey
-   * @function
-   * @public
-   *
-   * @example
-   * potatoStorage.clearAll()
-   */
-  clearAll () {
-    window.localStorage.removeItem(this.superkey)
-  }
-
-  /**
-   * @summary Get a stored value
-   * @function
-   * @public
-   *
-   * @param {String} key - object field key
-   * @param {Any} defaultValue - any valid JSON value
-   * @returns {Any} - the JSON parsed value
-   *
-   * @example
-   * potatoStorage.get('location', 'my farm')
-   */
-  get (key, defaultValue) {
-    const value = this.getAll()[key]
-
-    // eslint-disable-next-line no-undefined
-    if (value === undefined) {
-      return defaultValue
-    }
-
-    return value
-  }
-
-  /**
-   * @summary Modify a stored value
-   * @function
-   * @public
-   *
-   * @param {String} key - object field key
-   * @param {Function} func - function to apply to the value
-   * @param {Any} defaultValue - fallback value
-   * @returns {Any} - the value returned by the function applied above
-   *
-   * @example
-   * potatoStorage.modify('freshness', (freshness) => {
-   *   return freshness + 1
-   * })
-   */
-  modify (key, func, defaultValue) {
-    const obj = this.getAll()
-
-    let result = null
-    // eslint-disable-next-line no-undefined
-    if (obj[key] === undefined) {
-      result = func(defaultValue)
-    } else {
-      result = func(obj[key])
-    }
-
-    // eslint-disable-next-line lodash/prefer-lodash-method
-    this.setAll(Object.assign(obj, { [key]: result }))
-    return result
-  }
-
-  /**
-   * @summary Set a stored value
-   * @function
-   * @public
-   *
-   * @param {String} key - object field key
-   * @param {Any} value - value to set
-   *
-   * @example
-   * potatoStorage.set('edible', true)
-   */
-  set (key, value) {
-    this.modify(key, () => {
-      return value
-    })
-  }
-}
-
-module.exports = Storage
--- a/lib/gui/app/models/store.js
+++ b/lib/gui/app/models/store.js
@@ -1,554 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const Immutable = require('immutable')
-const _ = require('lodash')
-const redux = require('redux')
-const uuidV4 = require('uuid/v4')
-const constraints = require('../../../shared/drive-constraints')
-const supportedFormats = require('../../../shared/supported-formats')
-const errors = require('../../../shared/errors')
-const fileExtensions = require('../../../shared/file-extensions')
-const utils = require('../../../shared/utils')
-const settings = require('./settings')
-
-/**
- * @summary Verify and throw if any state fields are nil
- * @function
- * @public
- *
- * @param {Object} object - state object
- * @param {Array<Array<String>> | Array<String>} fields - array of object field paths
- * @param {String} name - name of the state we're dealing with
- * @throws
- *
- * @example
- * const fields = [ 'type', 'percentage' ]
- * verifyNoNilFields(action.data, fields, 'flash')
- */
-const verifyNoNilFields = (object, fields, name) => {
-  const nilFields = _.filter(fields, (field) => {
-    return _.isNil(_.get(object, field))
-  })
-  if (nilFields.length) {
-    throw new Error(`Missing ${name} fields: ${nilFields.join(', ')}`)
-  }
-}
-
-/**
- * @summary FLASH_STATE fields that can't be nil
- * @constant
- * @private
- */
-const flashStateNoNilFields = [
-  'speed',
-  'totalSpeed'
-]
-
-/**
- * @summary SELECT_IMAGE fields that can't be nil
- * @constant
- * @private
- */
-const selectImageNoNilFields = [
-  'path',
-  'extension'
-]
-
-/**
- * @summary Application default state
- * @type {Object}
- * @constant
- * @private
- */
-const DEFAULT_STATE = Immutable.fromJS({
-  applicationSessionUuid: '',
-  flashingWorkflowUuid: '',
-  availableDrives: [],
-  selection: {
-    devices: new Immutable.OrderedSet()
-  },
-  isFlashing: false,
-  flashResults: {},
-  flashState: {
-    flashing: 0,
-    verifying: 0,
-    successful: 0,
-    failed: 0,
-    percentage: 0,
-    speed: null,
-    totalSpeed: null
-  }
-})
-
-/**
- * @summary Application supported action messages
- * @type {Object}
- * @constant
- */
-const ACTIONS = _.fromPairs(_.map([
-  'SET_AVAILABLE_DRIVES',
-  'SET_FLASH_STATE',
-  'RESET_FLASH_STATE',
-  'SET_FLASHING_FLAG',
-  'UNSET_FLASHING_FLAG',
-  'SELECT_DRIVE',
-  'SELECT_IMAGE',
-  'DESELECT_DRIVE',
-  'DESELECT_IMAGE',
-  'SET_APPLICATION_SESSION_UUID',
-  'SET_FLASHING_WORKFLOW_UUID',
-  'SET_WEBVIEW_SHOWING_STATUS'
-], (message) => {
-  return [ message, message ]
-}))
-
-/**
- * @summary Get available drives from the state
- * @function
- * @public
- *
- * @param {Object} state - state object
- * @returns {Object} new state
- *
- * @example
- * const drives = getAvailableDrives(state)
- * _.find(drives, { device: '/dev/sda' })
- */
-const getAvailableDrives = (state) => {
-  // eslint-disable-next-line lodash/prefer-lodash-method
-  return state.get('availableDrives').toJS()
-}
-
-/**
- * @summary The redux store reducer
- * @function
- * @private
- *
- * @param {Object} state - application state
- * @param {Object} action - dispatched action
- * @returns {Object} new application state
- *
- * @example
- * const newState = storeReducer(DEFAULT_STATE, {
- *   type: ACTIONS.DESELECT_DRIVE
- * });
- */
-const storeReducer = (state = DEFAULT_STATE, action) => {
-  switch (action.type) {
-    case ACTIONS.SET_AVAILABLE_DRIVES: {
-      // Type: action.data : Array<DriveObject>
-
-      if (!action.data) {
-        throw errors.createError({
-          title: 'Missing drives'
-        })
-      }
-
-      const drives = action.data
-
-      if (!_.isArray(drives) || !_.every(drives, _.isObject)) {
-        throw errors.createError({
-          title: `Invalid drives: ${drives}`
-        })
-      }
-
-      const newState = state.set('availableDrives', Immutable.fromJS(drives))
-      const selectedDevices = newState.getIn([ 'selection', 'devices' ]).toJS()
-
-      // Remove selected drives that are stale, i.e. missing from availableDrives
-      const nonStaleNewState = _.reduce(selectedDevices, (accState, device) => {
-        // Check whether the drive still exists in availableDrives
-        if (device && !_.find(drives, {
-          device
-        })) {
-          // Deselect this drive gone from availableDrives
-          return storeReducer(accState, {
-            type: ACTIONS.DESELECT_DRIVE,
-            data: device
-          })
-        }
-
-        return accState
-      }, newState)
-
-      const shouldAutoselectAll = Boolean(settings.get('disableExplicitDriveSelection'))
-      const AUTOSELECT_DRIVE_COUNT = 1
-      const nonStaleSelectedDevices = nonStaleNewState.getIn([ 'selection', 'devices' ]).toJS()
-      const hasSelectedDevices = nonStaleSelectedDevices.length >= AUTOSELECT_DRIVE_COUNT
-      const shouldAutoselectOne = drives.length === AUTOSELECT_DRIVE_COUNT && !hasSelectedDevices
-
-      if (shouldAutoselectOne || shouldAutoselectAll) {
-        // Even if there's no image selected, we need to call several
-        // drive/image related checks, and `{}` works fine with them
-        const image = state.getIn([ 'selection', 'image' ], Immutable.fromJS({})).toJS()
-
-        return _.reduce(drives, (accState, drive) => {
-          if (_.every([
-            constraints.isDriveValid(drive, image),
-            constraints.isDriveSizeRecommended(drive, image),
-
-            // We don't want to auto-select large drives
-            !constraints.isDriveSizeLarge(drive),
-
-            // We don't want to auto-select system drives,
-            // even when "unsafe mode" is enabled
-            !constraints.isSystemDrive(drive)
-
-          ]) || (shouldAutoselectAll && constraints.isDriveValid(drive, image))) {
-            // Auto-select this drive
-            return storeReducer(accState, {
-              type: ACTIONS.SELECT_DRIVE,
-              data: drive.device
-            })
-          }
-
-          // Deselect this drive in case it still is selected
-          return storeReducer(accState, {
-            type: ACTIONS.DESELECT_DRIVE,
-            data: drive.device
-          })
-        }, nonStaleNewState)
-      }
-
-      return nonStaleNewState
-    }
-
-    case ACTIONS.SET_FLASH_STATE: {
-      // Type: action.data : FlashStateObject
-
-      if (!state.get('isFlashing')) {
-        throw errors.createError({
-          title: 'Can\'t set the flashing state when not flashing'
-        })
-      }
-
-      verifyNoNilFields(action.data, flashStateNoNilFields, 'flash')
-
-      if (!_.every(_.pick(action.data, [
-        'flashing',
-        'verifying',
-        'successful',
-        'failed'
-      ]), _.isFinite)) {
-        throw errors.createError({
-          title: 'State quantity field(s) not finite number'
-        })
-      }
-
-      if (!_.isUndefined(action.data.percentage) && !utils.isValidPercentage(action.data.percentage)) {
-        throw errors.createError({
-          title: `Invalid state percentage: ${action.data.percentage}`
-        })
-      }
-
-      if (!_.isUndefined(action.data.eta) && !_.isNumber(action.data.eta)) {
-        throw errors.createError({
-          title: `Invalid state eta: ${action.data.eta}`
-        })
-      }
-
-      return state.set('flashState', Immutable.fromJS(action.data))
-    }
-
-    case ACTIONS.RESET_FLASH_STATE: {
-      return state
-        .set('isFlashing', false)
-        .set('flashState', DEFAULT_STATE.get('flashState'))
-        .set('flashResults', DEFAULT_STATE.get('flashResults'))
-        .delete('flashUuid')
-    }
-
-    case ACTIONS.SET_FLASHING_FLAG: {
-      return state
-        .set('isFlashing', true)
-        .set('flashUuid', uuidV4())
-        .set('flashResults', DEFAULT_STATE.get('flashResults'))
-    }
-
-    case ACTIONS.UNSET_FLASHING_FLAG: {
-      // Type: action.data : FlashResultsObject
-
-      if (!action.data) {
-        throw errors.createError({
-          title: 'Missing results'
-        })
-      }
-
-      _.defaults(action.data, {
-        cancelled: false
-      })
-
-      if (!_.isBoolean(action.data.cancelled)) {
-        throw errors.createError({
-          title: `Invalid results cancelled: ${action.data.cancelled}`
-        })
-      }
-
-      if (action.data.cancelled && action.data.sourceChecksum) {
-        throw errors.createError({
-          title: 'The sourceChecksum value can\'t exist if the flashing was cancelled'
-        })
-      }
-
-      if (action.data.sourceChecksum && !_.isString(action.data.sourceChecksum)) {
-        throw errors.createError({
-          title: `Invalid results sourceChecksum: ${action.data.sourceChecksum}`
-        })
-      }
-
-      if (action.data.errorCode && !_.isString(action.data.errorCode) && !_.isNumber(action.data.errorCode)) {
-        throw errors.createError({
-          title: `Invalid results errorCode: ${action.data.errorCode}`
-        })
-      }
-
-      return state
-        .set('isFlashing', false)
-        .set('flashResults', Immutable.fromJS(action.data))
-        .set('flashState', DEFAULT_STATE.get('flashState'))
-    }
-
-    case ACTIONS.SELECT_DRIVE: {
-      // Type: action.data : String
-
-      const device = action.data
-
-      if (!device) {
-        throw errors.createError({
-          title: 'Missing drive'
-        })
-      }
-
-      if (!_.isString(device)) {
-        throw errors.createError({
-          title: `Invalid drive: ${device}`
-        })
-      }
-
-      const selectedDrive = _.find(getAvailableDrives(state), { device })
-
-      if (!selectedDrive) {
-        throw errors.createError({
-          title: `The drive is not available: ${device}`
-        })
-      }
-
-      if (selectedDrive.isReadOnly) {
-        throw errors.createError({
-          title: 'The drive is write-protected'
-        })
-      }
-
-      const image = state.getIn([ 'selection', 'image' ])
-      if (image && !constraints.isDriveLargeEnough(selectedDrive, image.toJS())) {
-        throw errors.createError({
-          title: 'The drive is not large enough'
-        })
-      }
-
-      const selectedDevices = state.getIn([ 'selection', 'devices' ])
-
-      return state.setIn([ 'selection', 'devices' ], selectedDevices.add(device))
-    }
-
-    // TODO(jhermsmeier): Consolidate these assertions
-    // with image-stream / supported-formats, and have *one*
-    // place where all the image extension / format handling
-    // takes place, to avoid having to check 2+ locations with different logic
-    case ACTIONS.SELECT_IMAGE: {
-      // Type: action.data : ImageObject
-
-      verifyNoNilFields(action.data, selectImageNoNilFields, 'image')
-
-      if (!_.isString(action.data.path)) {
-        throw errors.createError({
-          title: `Invalid image path: ${action.data.path}`
-        })
-      }
-
-      if (!_.isString(action.data.extension)) {
-        throw errors.createError({
-          title: `Invalid image extension: ${action.data.extension}`
-        })
-      }
-
-      const extension = _.toLower(action.data.extension)
-
-      if (!_.includes(supportedFormats.getAllExtensions(), extension)) {
-        throw errors.createError({
-          title: `Invalid image extension: ${action.data.extension}`
-        })
-      }
-
-      let lastImageExtension = fileExtensions.getLastFileExtension(action.data.path)
-      lastImageExtension = _.isString(lastImageExtension) ? _.toLower(lastImageExtension) : lastImageExtension
-
-      if (lastImageExtension !== extension) {
-        if (!_.isString(action.data.archiveExtension)) {
-          throw errors.createError({
-            title: 'Missing image archive extension'
-          })
-        }
-
-        const archiveExtension = _.toLower(action.data.archiveExtension)
-
-        if (!_.includes(supportedFormats.getAllExtensions(), archiveExtension)) {
-          throw errors.createError({
-            title: `Invalid image archive extension: ${action.data.archiveExtension}`
-          })
-        }
-
-        if (lastImageExtension !== archiveExtension) {
-          throw errors.createError({
-            title: `Image archive extension mismatch: ${action.data.archiveExtension} and ${lastImageExtension}`
-          })
-        }
-      }
-
-      const MINIMUM_IMAGE_SIZE = 0
-
-      // eslint-disable-next-line no-undefined
-      if (action.data.size !== undefined) {
-        if ((action.data.size < MINIMUM_IMAGE_SIZE) || !_.isInteger(action.data.size)) {
-          throw errors.createError({
-            title: `Invalid image size: ${action.data.size}`
-          })
-        }
-      }
-
-      if (!_.isUndefined(action.data.compressedSize)) {
-        if ((action.data.compressedSize < MINIMUM_IMAGE_SIZE) || !_.isInteger(action.data.compressedSize)) {
-          throw errors.createError({
-            title: `Invalid image compressed size: ${action.data.compressedSize}`
-          })
-        }
-      }
-
-      if (action.data.url && !_.isString(action.data.url)) {
-        throw errors.createError({
-          title: `Invalid image url: ${action.data.url}`
-        })
-      }
-
-      if (action.data.name && !_.isString(action.data.name)) {
-        throw errors.createError({
-          title: `Invalid image name: ${action.data.name}`
-        })
-      }
-
-      if (action.data.logo && !_.isString(action.data.logo)) {
-        throw errors.createError({
-          title: `Invalid image logo: ${action.data.logo}`
-        })
-      }
-
-      const selectedDevices = state.getIn([ 'selection', 'devices' ])
-
-      // Remove image-incompatible drives from selection with `constraints.isDriveValid`
-      return _.reduce(selectedDevices.toJS(), (accState, device) => {
-        const drive = _.find(getAvailableDrives(state), { device })
-        if (!constraints.isDriveValid(drive, action.data) || !constraints.isDriveSizeRecommended(drive, action.data)) {
-          return storeReducer(accState, {
-            type: ACTIONS.DESELECT_DRIVE,
-            data: device
-          })
-        }
-
-        return accState
-      }, state).setIn([ 'selection', 'image' ], Immutable.fromJS(action.data))
-    }
-
-    case ACTIONS.DESELECT_DRIVE: {
-      // Type: action.data : String
-
-      if (!action.data) {
-        throw errors.createError({
-          title: 'Missing drive'
-        })
-      }
-
-      if (!_.isString(action.data)) {
-        throw errors.createError({
-          title: `Invalid drive: ${action.data}`
-        })
-      }
-
-      const selectedDevices = state.getIn([ 'selection', 'devices' ])
-
-      // Remove drive from set in state
-      return state.setIn([ 'selection', 'devices' ], selectedDevices.delete(action.data))
-    }
-
-    case ACTIONS.DESELECT_IMAGE: {
-      return state.deleteIn([ 'selection', 'image' ])
-    }
-
-    case ACTIONS.SET_APPLICATION_SESSION_UUID: {
-      return state.set('applicationSessionUuid', action.data)
-    }
-
-    case ACTIONS.SET_FLASHING_WORKFLOW_UUID: {
-      return state.set('flashingWorkflowUuid', action.data)
-    }
-
-    case ACTIONS.SET_WEBVIEW_SHOWING_STATUS: {
-      return state.set('isWebviewShowing', action.data)
-    }
-
-    default: {
-      return state
-    }
-  }
-}
-
-module.exports = _.merge(redux.createStore(storeReducer, DEFAULT_STATE), {
-  Actions: ACTIONS,
-  Defaults: DEFAULT_STATE
-})
-
-/**
- * @summary Observe the store for changes
- * @param {Function} onChange - change handler
- * @returns {Function} unsubscribe
- * @example
- * store.observe((newState) => {
- *   // ...
- * })
- */
-module.exports.observe = (onChange) => {
-  let currentState = null
-
-  /**
-   * @summary Internal change detection handler
-   * @private
-   * @example
-   * store.subscribe(changeHandler)
-   */
-  const changeHandler = () => {
-    const nextState = module.exports.getState()
-    if (!_.isEqual(nextState, currentState)) {
-      currentState = nextState
-      onChange(currentState)
-    }
-  }
-
-  changeHandler()
-
-  return module.exports.subscribe(changeHandler)
-}
--- a/lib/gui/app/models/store.ts
+++ b/lib/gui/app/models/store.ts
@@ -0,0 +1,553 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as Immutable from 'immutable';
+import * as _ from 'lodash';
+import * as redux from 'redux';
+import { v4 as uuidV4 } from 'uuid';
+
+import * as constraints from '../../../shared/drive-constraints';
+import * as errors from '../../../shared/errors';
+import * as utils from '../../../shared/utils';
+import * as settings from './settings';
+
+/**
+ * @summary Verify and throw if any state fields are nil
+ */
+function verifyNoNilFields(
+	object: _.Dictionary<any>,
+	fields: string[],
+	name: string,
+) {
+	const nilFields = _.filter(fields, (field) => {
+		return _.isNil(_.get(object, field));
+	});
+	if (nilFields.length) {
+		throw new Error(`Missing ${name} fields: ${nilFields.join(', ')}`);
+	}
+}
+
+/**
+ * @summary FLASH_STATE fields that can't be nil
+ */
+const flashStateNoNilFields = ['speed'];
+
+/**
+ * @summary SELECT_IMAGE fields that can't be nil
+ */
+const selectImageNoNilFields = ['path', 'extension'];
+
+/**
+ * @summary Application default state
+ */
+export const DEFAULT_STATE = Immutable.fromJS({
+	applicationSessionUuid: '',
+	flashingWorkflowUuid: '',
+	availableDrives: [],
+	selection: {
+		devices: Immutable.OrderedSet(),
+	},
+	isFlashing: false,
+	devicePaths: [],
+	failedDevicePaths: [],
+	flashResults: {},
+	flashState: {
+		active: 0,
+		failed: 0,
+		percentage: 0,
+		speed: null,
+		averageSpeed: null,
+	},
+	lastAverageFlashingSpeed: null,
+});
+
+/**
+ * @summary Application supported action messages
+ */
+export enum Actions {
+	SET_DEVICE_PATHS,
+	SET_FAILED_DEVICE_PATHS,
+	SET_AVAILABLE_TARGETS,
+	SET_FLASH_STATE,
+	RESET_FLASH_STATE,
+	SET_FLASHING_FLAG,
+	UNSET_FLASHING_FLAG,
+	SELECT_TARGET,
+	SELECT_SOURCE,
+	DESELECT_TARGET,
+	DESELECT_SOURCE,
+	SET_APPLICATION_SESSION_UUID,
+	SET_FLASHING_WORKFLOW_UUID,
+}
+
+interface Action {
+	type: Actions;
+	data: any;
+}
+
+/**
+ * @summary Get available drives from the state
+ *
+ * @param {Object} state - state object
+ * @returns {Object} new state
+ */
+function getAvailableDrives(state: typeof DEFAULT_STATE) {
+	return state.get('availableDrives').toJS();
+}
+
+/**
+ * @summary The redux store reducer
+ */
+function storeReducer(
+	state = DEFAULT_STATE,
+	action: Action,
+): typeof DEFAULT_STATE {
+	switch (action.type) {
+		case Actions.SET_AVAILABLE_TARGETS: {
+			// Type: action.data : Array<DriveObject>
+
+			if (!action.data) {
+				throw errors.createError({
+					title: 'Missing drives',
+				});
+			}
+
+			let drives = action.data;
+
+			if (!_.isArray(drives) || !_.every(drives, _.isObject)) {
+				throw errors.createError({
+					title: `Invalid drives: ${drives}`,
+				});
+			}
+
+			drives = _.sortBy(drives, [
+				// System drives last
+				(d) => !!d.isSystem,
+				// Devices with no devicePath first (usbboot)
+				(d) => !!d.devicePath,
+				// Then sort by devicePath (only available on Linux with udev) or device
+				(d) => d.devicePath || d.device,
+			]);
+
+			const newState = state.set('availableDrives', Immutable.fromJS(drives));
+			const selectedDevices = newState.getIn(['selection', 'devices']).toJS();
+
+			// Remove selected drives that are stale, i.e. missing from availableDrives
+			const nonStaleNewState = _.reduce(
+				selectedDevices,
+				(accState, device) => {
+					// Check whether the drive still exists in availableDrives
+					if (
+						device &&
+						!_.find(drives, {
+							device,
+						})
+					) {
+						// Deselect this drive gone from availableDrives
+						return storeReducer(accState, {
+							type: Actions.DESELECT_TARGET,
+							data: device,
+						});
+					}
+
+					return accState;
+				},
+				newState,
+			);
+
+			const shouldAutoselectAll = Boolean(
+				settings.getSync('disableExplicitDriveSelection'),
+			);
+			const AUTOSELECT_DRIVE_COUNT = 1;
+			const nonStaleSelectedDevices = nonStaleNewState
+				.getIn(['selection', 'devices'])
+				.toJS();
+			const hasSelectedDevices =
+				nonStaleSelectedDevices.length >= AUTOSELECT_DRIVE_COUNT;
+			const shouldAutoselectOne =
+				drives.length === AUTOSELECT_DRIVE_COUNT && !hasSelectedDevices;
+
+			if (shouldAutoselectOne || shouldAutoselectAll) {
+				// Even if there's no image selected, we need to call several
+				// drive/image related checks, and `{}` works fine with them
+				const image = state
+					.getIn(['selection', 'image'], Immutable.fromJS({}))
+					.toJS();
+
+				return _.reduce(
+					drives,
+					(accState, drive) => {
+						if (
+							_.every([
+								constraints.isDriveValid(drive, image),
+								constraints.isDriveSizeRecommended(drive, image),
+
+								// We don't want to auto-select large drives
+								!constraints.isDriveSizeLarge(drive),
+
+								// We don't want to auto-select system drives,
+								// even when "unsafe mode" is enabled
+								!constraints.isSystemDrive(drive),
+							]) ||
+							(shouldAutoselectAll && constraints.isDriveValid(drive, image))
+						) {
+							// Auto-select this drive
+							return storeReducer(accState, {
+								type: Actions.SELECT_TARGET,
+								data: drive.device,
+							});
+						}
+
+						// Deselect this drive in case it still is selected
+						return storeReducer(accState, {
+							type: Actions.DESELECT_TARGET,
+							data: drive.device,
+						});
+					},
+					nonStaleNewState,
+				);
+			}
+
+			return nonStaleNewState;
+		}
+
+		case Actions.SET_FLASH_STATE: {
+			// Type: action.data : FlashStateObject
+
+			if (!state.get('isFlashing')) {
+				throw errors.createError({
+					title: "Can't set the flashing state when not flashing",
+				});
+			}
+
+			verifyNoNilFields(action.data, flashStateNoNilFields, 'flash');
+
+			if (!_.every(_.pick(action.data, ['active', 'failed']), _.isFinite)) {
+				throw errors.createError({
+					title: 'State quantity field(s) not finite number',
+				});
+			}
+
+			if (
+				!_.isUndefined(action.data.percentage) &&
+				!utils.isValidPercentage(action.data.percentage)
+			) {
+				throw errors.createError({
+					title: `Invalid state percentage: ${action.data.percentage}`,
+				});
+			}
+
+			if (!_.isUndefined(action.data.eta) && !_.isNumber(action.data.eta)) {
+				throw errors.createError({
+					title: `Invalid state eta: ${action.data.eta}`,
+				});
+			}
+
+			let ret = state.set('flashState', Immutable.fromJS(action.data));
+			if (action.data.type === 'flashing') {
+				ret = ret.set('lastAverageFlashingSpeed', action.data.averageSpeed);
+			}
+			return ret;
+		}
+
+		case Actions.RESET_FLASH_STATE: {
+			return state
+				.set('isFlashing', false)
+				.set('flashState', DEFAULT_STATE.get('flashState'))
+				.set('flashResults', DEFAULT_STATE.get('flashResults'))
+				.set('devicePaths', DEFAULT_STATE.get('devicePaths'))
+				.set('failedDevicePaths', DEFAULT_STATE.get('failedDevicePaths'))
+				.set(
+					'lastAverageFlashingSpeed',
+					DEFAULT_STATE.get('lastAverageFlashingSpeed'),
+				)
+				.delete('flashUuid');
+		}
+
+		case Actions.SET_FLASHING_FLAG: {
+			return state
+				.set('isFlashing', true)
+				.set('flashUuid', uuidV4())
+				.set('flashResults', DEFAULT_STATE.get('flashResults'));
+		}
+
+		case Actions.UNSET_FLASHING_FLAG: {
+			// Type: action.data : FlashResultsObject
+
+			if (!action.data) {
+				throw errors.createError({
+					title: 'Missing results',
+				});
+			}
+
+			_.defaults(action.data, {
+				cancelled: false,
+				skip: false,
+			});
+
+			if (!_.isBoolean(action.data.cancelled)) {
+				throw errors.createError({
+					title: `Invalid results cancelled: ${action.data.cancelled}`,
+				});
+			}
+
+			if (action.data.cancelled && action.data.sourceChecksum) {
+				throw errors.createError({
+					title:
+						"The sourceChecksum value can't exist if the flashing was cancelled",
+				});
+			}
+
+			if (
+				action.data.sourceChecksum &&
+				!_.isString(action.data.sourceChecksum)
+			) {
+				throw errors.createError({
+					title: `Invalid results sourceChecksum: ${action.data.sourceChecksum}`,
+				});
+			}
+
+			if (
+				action.data.errorCode &&
+				!_.isString(action.data.errorCode) &&
+				!_.isNumber(action.data.errorCode)
+			) {
+				throw errors.createError({
+					title: `Invalid results errorCode: ${action.data.errorCode}`,
+				});
+			}
+
+			if (action.data.results) {
+				action.data.results.averageFlashingSpeed = state.get(
+					'lastAverageFlashingSpeed',
+				);
+			}
+
+			if (action.data.skip) {
+				return state
+					.set('isFlashing', false)
+					.set('flashResults', Immutable.fromJS(action.data));
+			}
+
+			return state
+				.set('isFlashing', false)
+				.set('flashResults', Immutable.fromJS(action.data))
+				.set('flashState', DEFAULT_STATE.get('flashState'));
+		}
+
+		case Actions.SELECT_TARGET: {
+			// Type: action.data : String
+
+			const device = action.data;
+
+			if (!device) {
+				throw errors.createError({
+					title: 'Missing drive',
+				});
+			}
+
+			if (!_.isString(device)) {
+				throw errors.createError({
+					title: `Invalid drive: ${device}`,
+				});
+			}
+
+			const selectedDrive = _.find(getAvailableDrives(state), { device });
+
+			if (!selectedDrive) {
+				throw errors.createError({
+					title: `The drive is not available: ${device}`,
+				});
+			}
+
+			if (selectedDrive.isReadOnly) {
+				throw errors.createError({
+					title: 'The drive is write-protected',
+				});
+			}
+
+			const image = state.getIn(['selection', 'image']);
+			if (
+				image &&
+				!constraints.isDriveLargeEnough(selectedDrive, image.toJS())
+			) {
+				throw errors.createError({
+					title: 'The drive is not large enough',
+				});
+			}
+
+			const selectedDevices = state.getIn(['selection', 'devices']);
+
+			return state.setIn(['selection', 'devices'], selectedDevices.add(device));
+		}
+
+		// TODO(jhermsmeier): Consolidate these assertions
+		// with image-stream / supported-formats, and have *one*
+		// place where all the image extension / format handling
+		// takes place, to avoid having to check 2+ locations with different logic
+		case Actions.SELECT_SOURCE: {
+			// Type: action.data : ImageObject
+
+			if (!action.data.drive) {
+				verifyNoNilFields(action.data, selectImageNoNilFields, 'image');
+			}
+
+			if (!_.isString(action.data.path)) {
+				throw errors.createError({
+					title: `Invalid image path: ${action.data.path}`,
+				});
+			}
+
+			const MINIMUM_IMAGE_SIZE = 0;
+
+			if (action.data.size !== undefined) {
+				if (
+					action.data.size < MINIMUM_IMAGE_SIZE ||
+					!_.isInteger(action.data.size)
+				) {
+					throw errors.createError({
+						title: `Invalid image size: ${action.data.size}`,
+					});
+				}
+			}
+
+			if (!_.isUndefined(action.data.compressedSize)) {
+				if (
+					action.data.compressedSize < MINIMUM_IMAGE_SIZE ||
+					!_.isInteger(action.data.compressedSize)
+				) {
+					throw errors.createError({
+						title: `Invalid image compressed size: ${action.data.compressedSize}`,
+					});
+				}
+			}
+
+			if (action.data.url && !_.isString(action.data.url)) {
+				throw errors.createError({
+					title: `Invalid image url: ${action.data.url}`,
+				});
+			}
+
+			if (action.data.name && !_.isString(action.data.name)) {
+				throw errors.createError({
+					title: `Invalid image name: ${action.data.name}`,
+				});
+			}
+
+			if (action.data.logo && !_.isString(action.data.logo)) {
+				throw errors.createError({
+					title: `Invalid image logo: ${action.data.logo}`,
+				});
+			}
+
+			const selectedDevices = state.getIn(['selection', 'devices']);
+
+			// Remove image-incompatible drives from selection with `constraints.isDriveValid`
+			return _.reduce(
+				selectedDevices.toJS(),
+				(accState, device) => {
+					const drive = _.find(getAvailableDrives(state), { device });
+					if (
+						!constraints.isDriveValid(drive, action.data) ||
+						!constraints.isDriveSizeRecommended(drive, action.data)
+					) {
+						return storeReducer(accState, {
+							type: Actions.DESELECT_TARGET,
+							data: device,
+						});
+					}
+
+					return accState;
+				},
+				state,
+			).setIn(['selection', 'image'], Immutable.fromJS(action.data));
+		}
+
+		case Actions.DESELECT_TARGET: {
+			// Type: action.data : String
+
+			if (!action.data) {
+				throw errors.createError({
+					title: 'Missing drive',
+				});
+			}
+
+			if (!_.isString(action.data)) {
+				throw errors.createError({
+					title: `Invalid drive: ${action.data}`,
+				});
+			}
+
+			const selectedDevices = state.getIn(['selection', 'devices']);
+
+			// Remove drive from set in state
+			return state.setIn(
+				['selection', 'devices'],
+				selectedDevices.delete(action.data),
+			);
+		}
+
+		case Actions.DESELECT_SOURCE: {
+			return state.deleteIn(['selection', 'image']);
+		}
+
+		case Actions.SET_APPLICATION_SESSION_UUID: {
+			return state.set('applicationSessionUuid', action.data);
+		}
+
+		case Actions.SET_FLASHING_WORKFLOW_UUID: {
+			return state.set('flashingWorkflowUuid', action.data);
+		}
+
+		case Actions.SET_DEVICE_PATHS: {
+			return state.set('devicePaths', action.data);
+		}
+
+		case Actions.SET_FAILED_DEVICE_PATHS: {
+			return state.set('failedDevicePaths', action.data);
+		}
+
+		default: {
+			return state;
+		}
+	}
+}
+
+export const store = redux.createStore(storeReducer, DEFAULT_STATE);
+
+/**
+ * @summary Observe the store for changes
+ * @param {Function} onChange - change handler
+ * @returns {Function} unsubscribe
+ */
+export function observe(onChange: (state: typeof DEFAULT_STATE) => void) {
+	let currentState: typeof DEFAULT_STATE | null = null;
+
+	/**
+	 * @summary Internal change detection handler
+	 */
+	const changeHandler = () => {
+		const nextState = store.getState();
+		if (!_.isEqual(nextState, currentState)) {
+			currentState = nextState;
+			onChange(currentState);
+		}
+	};
+
+	changeHandler();
+
+	return store.subscribe(changeHandler);
+}
--- a/lib/gui/app/modules/analytics.js
+++ b/lib/gui/app/modules/analytics.js
@@ -1,148 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const resinCorvus = require('resin-corvus/browser')
-const packageJSON = require('../../../../package.json')
-const settings = require('../models/settings')
-const { getConfig, hasProps } = require('../../../shared/utils')
-
-const sentryToken = settings.get('analyticsSentryToken') ||
-  _.get(packageJSON, [ 'analytics', 'sentry', 'token' ])
-const mixpanelToken = settings.get('analyticsMixpanelToken') ||
-  _.get(packageJSON, [ 'analytics', 'mixpanel', 'token' ])
-
-const configUrl = settings.get('configUrl') || 'https://balena.io/etcher/static/config.json'
-
-const DEFAULT_PROBABILITY = 0.1
-
-const services = {
-  sentry: sentryToken,
-  mixpanel: mixpanelToken
-}
-resinCorvus.install({
-  services,
-  options: {
-    release: packageJSON.version,
-    shouldReport: () => {
-      return settings.get('errorReporting')
-    },
-    mixpanelDeferred: true
-  }
-})
-
-let mixpanelSample = DEFAULT_PROBABILITY
-
-/**
- * @summary Init analytics configurations
- * @example initConfig()
- */
-const initConfig = async () => {
-  let validatedConfig = null
-  try {
-    const config = await getConfig(configUrl)
-    const mixpanel = _.get(config, [ 'analytics', 'mixpanel' ], {})
-    mixpanelSample = mixpanel.probability || DEFAULT_PROBABILITY
-    if (isClientEligible(mixpanelSample)) {
-      validatedConfig = validateMixpanelConfig(mixpanel)
-    }
-  } catch (err) {
-    resinCorvus.logException(err)
-  }
-  resinCorvus.setConfigs({
-    mixpanel: validatedConfig
-  })
-}
-
-initConfig()
-
-/**
- * @summary Check that the client is eligible for analytics
- * @param {Object} - config
- */
-// eslint-disable-next-line
-function isClientEligible(probability) {
-  return Math.random() < probability
-}
-
-/**
- * @summary Check that config has at least HTTP_PROTOCOL and api_host
- * @param {Object} - config
- */
-// eslint-disable-next-line
-function validateMixpanelConfig (config) {
-  /* eslint-disable camelcase */
-  const mixpanelConfig = {
-    api_host: 'https://api.mixpanel.com'
-  }
-  if (hasProps(config, [ 'HTTP_PROTOCOL', 'api_host' ])) {
-    mixpanelConfig.api_host = `${config.HTTP_PROTOCOL}://${config.api_host}`
-  }
-  return mixpanelConfig
-  /* eslint-enable camelcase */
-}
-
-/**
- * @summary Log a debug message
- * @function
- * @public
- *
- * @description
- * This function sends the debug message to error reporting services.
- *
- * @param {String} message - message
- *
- * @example
- * analytics.log('Hello World');
- */
-exports.logDebug = resinCorvus.logDebug
-
-/**
- * @summary Log an event
- * @function
- * @public
- *
- * @description
- * This function sends the debug message to product analytics services.
- *
- * @param {String} message - message
- * @param {Object} [data] - event data
- *
- * @example
- * analytics.logEvent('Select image', {
- *   image: '/dev/disk2'
- * });
- */
-exports.logEvent = (message, data) => {
-  resinCorvus.logEvent(message, { ...data, sample: mixpanelSample })
-}
-
-/**
- * @summary Log an exception
- * @function
- * @public
- *
- * @description
- * This function logs an exception to error reporting services.
- *
- * @param {Error} exception - exception
- *
- * @example
- * analytics.logException(new Error('Something happened'));
- */
-exports.logException = resinCorvus.logException
--- a/lib/gui/app/modules/analytics.ts
+++ b/lib/gui/app/modules/analytics.ts
@@ -0,0 +1,123 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as _ from 'lodash';
+import * as resinCorvus from 'resin-corvus/browser';
+
+import * as packageJSON from '../../../../package.json';
+import { getConfig } from '../../../shared/utils';
+import * as settings from '../models/settings';
+import { store } from '../models/store';
+
+const DEFAULT_PROBABILITY = 0.1;
+
+async function installCorvus(): Promise<void> {
+	const sentryToken =
+		(await settings.get('analyticsSentryToken')) ||
+		_.get(packageJSON, ['analytics', 'sentry', 'token']);
+	const mixpanelToken =
+		(await settings.get('analyticsMixpanelToken')) ||
+		_.get(packageJSON, ['analytics', 'mixpanel', 'token']);
+	resinCorvus.install({
+		services: {
+			sentry: sentryToken,
+			mixpanel: mixpanelToken,
+		},
+		options: {
+			release: packageJSON.version,
+			shouldReport: () => {
+				return settings.getSync('errorReporting');
+			},
+			mixpanelDeferred: true,
+		},
+	});
+}
+
+let mixpanelSample = DEFAULT_PROBABILITY;
+
+/**
+ * @summary Init analytics configurations
+ */
+async function initConfig() {
+	await installCorvus();
+	let validatedConfig = null;
+	try {
+		const configUrl = await settings.get('configUrl');
+		const config = await getConfig(configUrl);
+		const mixpanel = _.get(config, ['analytics', 'mixpanel'], {});
+		mixpanelSample = mixpanel.probability || DEFAULT_PROBABILITY;
+		if (isClientEligible(mixpanelSample)) {
+			validatedConfig = validateMixpanelConfig(mixpanel);
+		}
+	} catch (err) {
+		resinCorvus.logException(err);
+	}
+	resinCorvus.setConfigs({
+		mixpanel: validatedConfig,
+	});
+}
+
+initConfig();
+
+/**
+ * @summary Check that the client is eligible for analytics
+ */
+function isClientEligible(probability: number) {
+	return Math.random() < probability;
+}
+
+/**
+ * @summary Check that config has at least HTTP_PROTOCOL and api_host
+ */
+function validateMixpanelConfig(config: {
+	api_host?: string;
+	HTTP_PROTOCOL?: string;
+}) {
+	const mixpanelConfig = {
+		api_host: 'https://api.mixpanel.com',
+	};
+	if (config.HTTP_PROTOCOL !== undefined && config.api_host !== undefined) {
+		mixpanelConfig.api_host = `${config.HTTP_PROTOCOL}://${config.api_host}`;
+	}
+	return mixpanelConfig;
+}
+
+/**
+ * @summary Log an event
+ *
+ * @description
+ * This function sends the debug message to product analytics services.
+ */
+export function logEvent(message: string, data: _.Dictionary<any> = {}) {
+	const {
+		applicationSessionUuid,
+		flashingWorkflowUuid,
+	} = store.getState().toJS();
+	resinCorvus.logEvent(message, {
+		...data,
+		sample: mixpanelSample,
+		applicationSessionUuid,
+		flashingWorkflowUuid,
+	});
+}
+
+/**
+ * @summary Log an exception
+ *
+ * @description
+ * This function logs an exception to error reporting services.
+ */
+export const logException = resinCorvus.logException;
--- a/lib/gui/app/modules/drive-scanner.js
+++ b/lib/gui/app/modules/drive-scanner.js
@@ -1,54 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const sdk = require('etcher-sdk')
-const process = require('process')
-
-const settings = require('../models/settings')
-
-/**
- * @summary returns true if system drives should be shown
- * @function
- *
- * @returns {Boolean}
- *
- * @example
- * const shouldInclude = includeSystemDrives()
- */
-const includeSystemDrives = () => {
-  return settings.get('unsafeMode') && !settings.get('disableUnsafeMode')
-}
-
-const adapters = [
-  new sdk.scanner.adapters.BlockDeviceAdapter(includeSystemDrives)
-]
-
-// Can't use permissions.isElevated() here as it returns a promise and we need to set
-// module.exports = scanner right now.
-// eslint-disable-next-line no-magic-numbers
-if ((process.platform !== 'linux') || (process.geteuid() === 0)) {
-  adapters.push(new sdk.scanner.adapters.UsbbootDeviceAdapter())
-}
-
-if (process.platform === 'win32') {
-  adapters.push(new sdk.scanner.adapters.DriverlessDeviceAdapter())
-}
-
-const scanner = new sdk.scanner.Scanner(adapters)
-
-module.exports = scanner
--- a/lib/gui/app/modules/drive-scanner.ts
+++ b/lib/gui/app/modules/drive-scanner.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as sdk from 'etcher-sdk';
+import { geteuid, platform } from 'process';
+
+const adapters: sdk.scanner.adapters.Adapter[] = [
+	new sdk.scanner.adapters.BlockDeviceAdapter({
+		includeSystemDrives: () => true,
+	}),
+];
+
+// Can't use permissions.isElevated() here as it returns a promise and we need to set
+// module.exports = scanner right now.
+if (platform !== 'linux' || geteuid() === 0) {
+	adapters.push(new sdk.scanner.adapters.UsbbootDeviceAdapter());
+}
+
+if (
+	platform === 'win32' &&
+	sdk.scanner.adapters.DriverlessDeviceAdapter !== undefined
+) {
+	adapters.push(new sdk.scanner.adapters.DriverlessDeviceAdapter());
+}
+
+export const scanner = new sdk.scanner.Scanner(adapters);
--- a/lib/gui/app/modules/exception-reporter.ts
+++ b/lib/gui/app/modules/exception-reporter.ts
@@ -14,8 +14,16 @@
 * limitations under the License.
 */

-.caption {
-  font-weight: bold;
-  font-size: 11px;
-  margin-bottom: 0;
+import { logException } from '../modules/analytics';
+import { showError } from '../os/dialog';
+
+/**
+ * @summary Report an exception
+ */
+export function report(exception?: Error) {
+	if (exception === undefined) {
+		return;
+	}
+	showError(exception);
+	logException(exception);
 }
--- a/lib/gui/app/modules/image-writer.js
+++ b/lib/gui/app/modules/image-writer.js
@@ -1,377 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const Bluebird = require('bluebird')
-const _ = require('lodash')
-const path = require('path')
-const os = require('os')
-const ipc = require('node-ipc')
-const electron = require('electron')
-const store = require('../models/store')
-const settings = require('../models/settings')
-const flashState = require('../models/flash-state')
-const errors = require('../../../shared/errors')
-const permissions = require('../../../shared/permissions')
-const windowProgress = require('../os/window-progress')
-const analytics = require('../modules/analytics')
-const updateLock = require('./update-lock')
-const packageJSON = require('../../../../package.json')
-const selectionState = require('../models/selection-state')
-
-/**
- * @summary Number of threads per CPU to allocate to the UV_THREADPOOL
- * @type {Number}
- * @constant
- */
-const THREADS_PER_CPU = 16
-
-/**
- * @summary Handle a flash  error and log it to analytics
- * @function
- * @private
- *
- * @param {Error} error - error object
- * @param {Object} analyticsData - analytics object
- *
- * @example
- * handleErrorLogging({ code: 'EUNPLUGGED' }, { image: 'balena.img' })
- */
-const handleErrorLogging = (error, analyticsData) => {
-  const eventData = _.assign({
-    applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-    flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
-    flashInstanceUuid: flashState.getFlashUuid()
-  }, analyticsData)
-
-  if (error.code === 'EVALIDATION') {
-    analytics.logEvent('Validation error', eventData)
-  } else if (error.code === 'EUNPLUGGED') {
-    analytics.logEvent('Drive unplugged', eventData)
-  } else if (error.code === 'EIO') {
-    analytics.logEvent('Input/output error', eventData)
-  } else if (error.code === 'ENOSPC') {
-    analytics.logEvent('Out of space', eventData)
-  } else if (error.code === 'ECHILDDIED') {
-    analytics.logEvent('Child died unexpectedly', eventData)
-  } else {
-    analytics.logEvent('Flash error', _.merge({
-      error: errors.toJSON(error)
-    }, eventData))
-  }
-}
-
-/**
- * @summary Perform write operation
- * @function
- * @private
- *
- * @description
- * This function is extracted for testing purposes.
- *
- * @param {String} image - image path
- * @param {Array<String>} drives - drives
- * @param {Function} onProgress - in progress callback (state)
- *
- * @fulfil {Object} - flash results
- * @returns {Promise}
- *
- * @example
- * imageWriter.performWrite('path/to/image.img', [ '/dev/disk2' ], (state) => {
- *   console.log(state.percentage)
- * })
- */
-exports.performWrite = (image, drives, onProgress) => {
-  // There might be multiple Etcher instances running at
-  // the same time, therefore we must ensure each IPC
-  // server/client has a different name.
-  const IPC_SERVER_ID = `etcher-server-${process.pid}`
-  const IPC_CLIENT_ID = `etcher-client-${process.pid}`
-
-  ipc.config.id = IPC_SERVER_ID
-  ipc.config.socketRoot = path.join(process.env.XDG_RUNTIME_DIR || os.tmpdir(), path.sep)
-
-  // NOTE: Ensure this isn't disabled, as it will cause
-  // the stdout maxBuffer size to be exceeded when flashing
-  ipc.config.silent = true
-  ipc.serve()
-
-  /**
-   * @summary Safely terminate the IPC server
-   * @function
-   * @private
-   *
-   * @example
-   * terminateServer()
-   */
-  const terminateServer = () => {
-    // Turns out we need to destroy all sockets for
-    // the server to actually close. Otherwise, it
-    // just stops receiving any further connections,
-    // but remains open if there are active ones.
-    _.each(ipc.server.sockets, (socket) => {
-      socket.destroy()
-    })
-
-    ipc.server.stop()
-  }
-
-  return new Bluebird((resolve, reject) => {
-    ipc.server.on('error', (error) => {
-      terminateServer()
-      const errorObject = errors.fromJSON(error)
-      reject(errorObject)
-    })
-
-    ipc.server.on('log', (message) => {
-      console.log(message)
-    })
-
-    const flashResults = {}
-    const analyticsData = {
-      image,
-      drives,
-      driveCount: drives.length,
-      uuid: flashState.getFlashUuid(),
-      flashInstanceUuid: flashState.getFlashUuid(),
-      unmountOnSuccess: settings.get('unmountOnSuccess'),
-      validateWriteOnSuccess: settings.get('validateWriteOnSuccess'),
-      trim: settings.get('trim')
-    }
-
-    ipc.server.on('fail', ({ device, error }) => {
-      handleErrorLogging(error, analyticsData)
-    })
-
-    ipc.server.on('done', (event) => {
-      event.results.errors = _.map(event.results.errors, (data) => {
-        return errors.fromJSON(data)
-      })
-      _.merge(flashResults, event)
-    })
-
-    ipc.server.on('abort', () => {
-      terminateServer()
-      resolve({
-        cancelled: true
-      })
-    })
-
-    ipc.server.on('state', onProgress)
-
-    ipc.server.on('ready', (data, socket) => {
-      ipc.server.emit(socket, 'write', {
-        imagePath: image,
-        destinations: drives,
-        validateWriteOnSuccess: settings.get('validateWriteOnSuccess'),
-        trim: settings.get('trim'),
-        unmountOnSuccess: settings.get('unmountOnSuccess')
-      })
-    })
-
-    const argv = _.attempt(() => {
-      let entryPoint = electron.remote.app.getAppPath()
-
-      // AppImages run over FUSE, so the files inside the mount point
-      // can only be accessed by the user that mounted the AppImage.
-      // This means we can't re-spawn Etcher as root from the same
-      // mount-point, and as a workaround, we re-mount the original
-      // AppImage as root.
-      if (os.platform() === 'linux' && process.env.APPIMAGE && process.env.APPDIR) {
-        entryPoint = _.replace(entryPoint, process.env.APPDIR, '')
-        return [
-          process.env.APPIMAGE,
-          '-e',
-          `require(\`\${process.env.APPDIR}${entryPoint}\`)`
-        ]
-      }
-      return [
-        _.first(process.argv),
-        entryPoint
-      ]
-    })
-
-    ipc.server.on('start', () => {
-      console.log(`Elevating command: ${_.join(argv, ' ')}`)
-
-      const env = _.assign({}, process.platform === 'win32' ? {} : process.env, {
-        IPC_SERVER_ID,
-        IPC_CLIENT_ID,
-        IPC_SOCKET_ROOT: ipc.config.socketRoot,
-        ELECTRON_RUN_AS_NODE: 1,
-        UV_THREADPOOL_SIZE: os.cpus().length * THREADS_PER_CPU,
-
-        // This environment variable prevents the AppImages
-        // desktop integration script from presenting the
-        // "installation" dialog
-        SKIP: 1
-      })
-
-      permissions.elevateCommand(argv, {
-        applicationName: packageJSON.displayName,
-        environment: env
-      }).then((results) => {
-        flashResults.cancelled = results.cancelled
-        console.log('Flash results', flashResults)
-
-        // This likely means the child died halfway through
-        if (!flashResults.cancelled && !_.get(flashResults, [ 'results', 'bytesWritten' ])) {
-          throw errors.createUserError({
-            title: 'The writer process ended unexpectedly',
-            description: 'Please try again, and contact the Etcher team if the problem persists',
-            code: 'ECHILDDIED'
-          })
-        }
-
-        resolve(flashResults)
-      }).catch((error) => {
-        // This happens when the child is killed using SIGKILL
-        const SIGKILL_EXIT_CODE = 137
-        if (error.code === SIGKILL_EXIT_CODE) {
-          error.code = 'ECHILDDIED'
-        }
-        reject(error)
-      }).finally(() => {
-        console.log('Terminating IPC server')
-        terminateServer()
-      })
-    })
-
-    // Clear the update lock timer to prevent longer
-    // flashing timing it out, and releasing the lock
-    updateLock.pause()
-    ipc.server.start()
-  })
-}
-
-/**
- * @summary Flash an image to drives
- * @function
- * @public
- *
- * @description
- * This function will update `imageWriter.state` with the current writing state.
- *
- * @param {String} image - image path
- * @param {Array<String>} drives - drives
- * @returns {Promise}
- *
- * @example
- * imageWriter.flash('foo.img', [ '/dev/disk2' ]).then(() => {
- *   console.log('Write completed!')
- * })
- */
-exports.flash = (image, drives) => {
-  if (flashState.isFlashing()) {
-    return Bluebird.reject(new Error('There is already a flash in progress'))
-  }
-
-  flashState.setFlashingFlag()
-
-  const analyticsData = {
-    image,
-    drives,
-    driveCount: drives.length,
-    uuid: flashState.getFlashUuid(),
-    status: 'started',
-    flashInstanceUuid: flashState.getFlashUuid(),
-    unmountOnSuccess: settings.get('unmountOnSuccess'),
-    validateWriteOnSuccess: settings.get('validateWriteOnSuccess'),
-    trim: settings.get('trim'),
-    applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-    flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
-  }
-
-  analytics.logEvent('Flash', analyticsData)
-
-  return exports.performWrite(image, drives, (state) => {
-    flashState.setProgressState(state)
-  }).then(flashState.unsetFlashingFlag).then(() => {
-    if (flashState.wasLastFlashCancelled()) {
-      const eventData = _.assign({ status: 'cancel' }, analyticsData)
-      analytics.logEvent('Elevation cancelled', eventData)
-    } else {
-      const { results } = flashState.getFlashResults()
-      const eventData = _.assign({
-        errors: results.errors,
-        devices: results.devices,
-        status: 'finished'
-      },
-      analyticsData)
-      analytics.logEvent('Done', eventData)
-    }
-  }).catch((error) => {
-    flashState.unsetFlashingFlag({
-      errorCode: error.code
-    })
-
-    // eslint-disable-next-line no-magic-numbers
-    if (drives.length > 1) {
-      const { results } = flashState.getFlashResults()
-      const eventData = _.assign({
-        errors: results.errors,
-        devices: results.devices,
-        status: 'failed'
-      },
-      analyticsData)
-      analytics.logEvent('Write failed', eventData)
-    }
-
-    return Bluebird.reject(error)
-  }).finally(() => {
-    windowProgress.clear()
-  })
-}
-
-/**
- * @summary Cancel write operation
- * @function
- * @public
- *
- * @example
- * imageWriter.cancel()
- */
-exports.cancel = () => {
-  const drives = selectionState.getSelectedDevices()
-  const analyticsData = {
-    image: selectionState.getImagePath(),
-    drives,
-    driveCount: drives.length,
-    uuid: flashState.getFlashUuid(),
-    flashInstanceUuid: flashState.getFlashUuid(),
-    unmountOnSuccess: settings.get('unmountOnSuccess'),
-    validateWriteOnSuccess: settings.get('validateWriteOnSuccess'),
-    trim: settings.get('trim'),
-    applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
-    flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid,
-    status: 'cancel'
-  }
-  analytics.logEvent('Cancel', analyticsData)
-
-  // Re-enable lock release on inactivity
-  updateLock.resume()
-
-  try {
-    const [ socket ] = ipc.server.sockets
-    // eslint-disable-next-line no-undefined
-    if (socket !== undefined) {
-      ipc.server.emit(socket, 'cancel')
-    }
-  } catch (error) {
-    analytics.logException(error)
-  }
-}
--- a/lib/gui/app/modules/image-writer.ts
+++ b/lib/gui/app/modules/image-writer.ts
@@ -0,0 +1,363 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Drive as DrivelistDrive } from 'drivelist';
+import * as electron from 'electron';
+import * as sdk from 'etcher-sdk';
+import * as _ from 'lodash';
+import * as ipc from 'node-ipc';
+import * as os from 'os';
+import * as path from 'path';
+
+import * as packageJSON from '../../../../package.json';
+import * as errors from '../../../shared/errors';
+import * as permissions from '../../../shared/permissions';
+import { SourceMetadata } from '../components/source-selector/source-selector';
+import * as flashState from '../models/flash-state';
+import * as selectionState from '../models/selection-state';
+import * as settings from '../models/settings';
+import * as analytics from '../modules/analytics';
+import * as windowProgress from '../os/window-progress';
+
+const THREADS_PER_CPU = 16;
+
+// There might be multiple Etcher instances running at
+// the same time, therefore we must ensure each IPC
+// server/client has a different name.
+const IPC_SERVER_ID = `etcher-server-${process.pid}`;
+const IPC_CLIENT_ID = `etcher-client-${process.pid}`;
+
+ipc.config.id = IPC_SERVER_ID;
+ipc.config.socketRoot = path.join(
+	process.env.XDG_RUNTIME_DIR || os.tmpdir(),
+	path.sep,
+);
+
+// NOTE: Ensure this isn't disabled, as it will cause
+// the stdout maxBuffer size to be exceeded when flashing
+ipc.config.silent = true;
+
+/**
+ * @summary Handle a flash error and log it to analytics
+ */
+function handleErrorLogging(
+	error: Error & { code: string },
+	analyticsData: any,
+) {
+	const eventData = {
+		...analyticsData,
+		flashInstanceUuid: flashState.getFlashUuid(),
+	};
+
+	if (error.code === 'EVALIDATION') {
+		analytics.logEvent('Validation error', eventData);
+	} else if (error.code === 'EUNPLUGGED') {
+		analytics.logEvent('Drive unplugged', eventData);
+	} else if (error.code === 'EIO') {
+		analytics.logEvent('Input/output error', eventData);
+	} else if (error.code === 'ENOSPC') {
+		analytics.logEvent('Out of space', eventData);
+	} else if (error.code === 'ECHILDDIED') {
+		analytics.logEvent('Child died unexpectedly', eventData);
+	} else {
+		analytics.logEvent('Flash error', {
+			...eventData,
+			error: errors.toJSON(error),
+		});
+	}
+}
+
+function terminateServer() {
+	// Turns out we need to destroy all sockets for
+	// the server to actually close. Otherwise, it
+	// just stops receiving any further connections,
+	// but remains open if there are active ones.
+	// @ts-ignore (no Server.sockets in @types/node-ipc)
+	for (const socket of ipc.server.sockets) {
+		socket.destroy();
+	}
+	ipc.server.stop();
+}
+
+function writerArgv(): string[] {
+	let entryPoint = path.join(
+		electron.remote.app.getAppPath(),
+		'generated',
+		'child-writer.js',
+	);
+	// AppImages run over FUSE, so the files inside the mount point
+	// can only be accessed by the user that mounted the AppImage.
+	// This means we can't re-spawn Etcher as root from the same
+	// mount-point, and as a workaround, we re-mount the original
+	// AppImage as root.
+	if (os.platform() === 'linux' && process.env.APPIMAGE && process.env.APPDIR) {
+		entryPoint = entryPoint.replace(process.env.APPDIR, '');
+		return [
+			process.env.APPIMAGE,
+			'-e',
+			`require(\`\${process.env.APPDIR}${entryPoint}\`)`,
+		];
+	} else {
+		return [process.argv[0], entryPoint];
+	}
+}
+
+function writerEnv() {
+	return {
+		IPC_SERVER_ID,
+		IPC_CLIENT_ID,
+		IPC_SOCKET_ROOT: ipc.config.socketRoot,
+		ELECTRON_RUN_AS_NODE: '1',
+		UV_THREADPOOL_SIZE: (os.cpus().length * THREADS_PER_CPU).toString(),
+		// This environment variable prevents the AppImages
+		// desktop integration script from presenting the
+		// "installation" dialog
+		SKIP: '1',
+		...(process.platform === 'win32' ? {} : process.env),
+	};
+}
+
+interface FlashResults {
+	skip?: boolean;
+	cancelled?: boolean;
+}
+
+async function performWrite(
+	image: SourceMetadata,
+	drives: DrivelistDrive[],
+	onProgress: sdk.multiWrite.OnProgressFunction,
+): Promise<{ cancelled?: boolean }> {
+	let cancelled = false;
+	let skip = false;
+	ipc.serve();
+	const {
+		unmountOnSuccess,
+		validateWriteOnSuccess,
+		autoBlockmapping,
+		decompressFirst,
+		saveUrlImage,
+		saveUrlImageTo,
+	} = await settings.getAll();
+	return await new Promise((resolve, reject) => {
+		ipc.server.on('error', (error) => {
+			terminateServer();
+			const errorObject = errors.fromJSON(error);
+			reject(errorObject);
+		});
+
+		ipc.server.on('log', (message) => {
+			console.log(message);
+		});
+
+		const flashResults: FlashResults = {};
+		const analyticsData = {
+			image,
+			drives,
+			driveCount: drives.length,
+			uuid: flashState.getFlashUuid(),
+			flashInstanceUuid: flashState.getFlashUuid(),
+			unmountOnSuccess,
+			validateWriteOnSuccess,
+		};
+
+		ipc.server.on('fail', ({ device, error }) => {
+			if (device.devicePath) {
+				flashState.addFailedDevicePath({ device, error });
+			}
+			handleErrorLogging(error, analyticsData);
+		});
+
+		ipc.server.on('done', (event) => {
+			event.results.errors = _.map(event.results.errors, (data) => {
+				return errors.fromJSON(data);
+			});
+			_.merge(flashResults, event);
+		});
+
+		ipc.server.on('abort', () => {
+			terminateServer();
+			cancelled = true;
+		});
+
+		ipc.server.on('skip', () => {
+			terminateServer();
+			skip = true;
+		});
+
+		ipc.server.on('state', onProgress);
+
+		ipc.server.on('ready', (_data, socket) => {
+			ipc.server.emit(socket, 'write', {
+				image,
+				destinations: drives,
+				SourceType: image.SourceType.name,
+				validateWriteOnSuccess,
+				autoBlockmapping,
+				unmountOnSuccess,
+				decompressFirst,
+				saveUrlImage,
+				saveUrlImageTo,
+			});
+		});
+
+		const argv = writerArgv();
+
+		ipc.server.on('start', async () => {
+			console.log(`Elevating command: ${_.join(argv, ' ')}`);
+			const env = writerEnv();
+			try {
+				const results = await permissions.elevateCommand(argv, {
+					applicationName: packageJSON.displayName,
+					environment: env,
+				});
+				flashResults.cancelled = cancelled || results.cancelled;
+				flashResults.skip = skip;
+			} catch (error) {
+				// This happens when the child is killed using SIGKILL
+				const SIGKILL_EXIT_CODE = 137;
+				if (error.code === SIGKILL_EXIT_CODE) {
+					error.code = 'ECHILDDIED';
+				}
+				reject(error);
+			} finally {
+				console.log('Terminating IPC server');
+				terminateServer();
+			}
+			console.log('Flash results', flashResults);
+
+			// This likely means the child died halfway through
+			if (
+				!flashResults.cancelled &&
+				!flashResults.skip &&
+				!_.get(flashResults, ['results', 'bytesWritten'])
+			) {
+				reject(
+					errors.createUserError({
+						title: 'The writer process ended unexpectedly',
+						description:
+							'Please try again, and contact the Etcher team if the problem persists',
+					}),
+				);
+				return;
+			}
+			resolve(flashResults);
+		});
+
+		// Clear the update lock timer to prevent longer
+		// flashing timing it out, and releasing the lock
+		ipc.server.start();
+	});
+}
+
+/**
+ * @summary Flash an image to drives
+ */
+export async function flash(
+	image: SourceMetadata,
+	drives: DrivelistDrive[],
+	// This function is a parameter so it can be mocked in tests
+	write = performWrite,
+): Promise<void> {
+	if (flashState.isFlashing()) {
+		throw new Error('There is already a flash in progress');
+	}
+
+	flashState.setFlashingFlag();
+	flashState.setDevicePaths(
+		drives.map((d) => d.devicePath).filter((p) => p != null) as string[],
+	);
+
+	const analyticsData = {
+		image,
+		drives,
+		driveCount: drives.length,
+		uuid: flashState.getFlashUuid(),
+		status: 'started',
+		flashInstanceUuid: flashState.getFlashUuid(),
+		unmountOnSuccess: await settings.get('unmountOnSuccess'),
+		validateWriteOnSuccess: await settings.get('validateWriteOnSuccess'),
+	};
+
+	analytics.logEvent('Flash', analyticsData);
+
+	try {
+		const result = await write(image, drives, flashState.setProgressState);
+		flashState.unsetFlashingFlag(result);
+	} catch (error) {
+		flashState.unsetFlashingFlag({ cancelled: false, errorCode: error.code });
+		windowProgress.clear();
+		const { results = {} } = flashState.getFlashResults();
+		const eventData = {
+			...analyticsData,
+			errors: results.errors,
+			devices: results.devices,
+			status: 'failed',
+			error,
+		};
+		analytics.logEvent('Write failed', eventData);
+		throw error;
+	}
+	windowProgress.clear();
+	if (flashState.wasLastFlashCancelled()) {
+		const eventData = {
+			...analyticsData,
+			status: 'cancel',
+		};
+		analytics.logEvent('Elevation cancelled', eventData);
+	} else {
+		const { results = {} } = flashState.getFlashResults();
+		const eventData = {
+			...analyticsData,
+			errors: results.errors,
+			devices: results.devices,
+			status: 'finished',
+			bytesWritten: results.bytesWritten,
+			sourceMetadata: results.sourceMetadata,
+		};
+		analytics.logEvent('Done', eventData);
+	}
+}
+
+/**
+ * @summary Cancel write operation
+ */
+export async function cancel(type: string) {
+	const status = type.toLowerCase();
+	const drives = selectionState.getSelectedDevices();
+	const analyticsData = {
+		image: selectionState.getImagePath(),
+		drives,
+		driveCount: drives.length,
+		uuid: flashState.getFlashUuid(),
+		flashInstanceUuid: flashState.getFlashUuid(),
+		unmountOnSuccess: await settings.get('unmountOnSuccess'),
+		validateWriteOnSuccess: await settings.get('validateWriteOnSuccess'),
+		status,
+	};
+	analytics.logEvent('Cancel', analyticsData);
+
+	// Re-enable lock release on inactivity
+
+	try {
+		// @ts-ignore (no Server.sockets in @types/node-ipc)
+		const [socket] = ipc.server.sockets;
+		if (socket !== undefined) {
+			ipc.server.emit(socket, status);
+		}
+	} catch (error) {
+		analytics.logException(error);
+	}
+}
--- a/lib/gui/app/modules/progress-status.js
+++ b/lib/gui/app/modules/progress-status.js
@@ -1,74 +0,0 @@
-/*
- * Copyright 2017 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License")
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const settings = require('../models/settings')
-const utils = require('../../../shared/utils')
-const units = require('../../../shared/units')
-
-/**
- * @summary Make the progress status subtitle string
- *
- * @param {Object} state - flashing metadata
- *
- * @returns {String}
- *
- * @example
- * const status = progressStatus.fromFlashState({
- *   flashing: 1,
- *   verifying: 0,
- *   successful: 0,
- *   failed: 0,
- *   percentage: 55,
- *   speed: 2049
- * })
- *
- * console.log(status)
- * // '55% Flashing'
- */
-exports.fromFlashState = (state) => {
-  const isFlashing = Boolean(state.flashing)
-  const isValidating = !isFlashing && Boolean(state.verifying)
-  const shouldValidate = settings.get('validateWriteOnSuccess')
-  const shouldUnmount = settings.get('unmountOnSuccess')
-
-  if (state.percentage === utils.PERCENTAGE_MINIMUM && !state.speed) {
-    if (isValidating) {
-      return 'Validating...'
-    }
-
-    return 'Starting...'
-  } else if (state.percentage === utils.PERCENTAGE_MAXIMUM) {
-    if ((isValidating || !shouldValidate) && shouldUnmount) {
-      return 'Unmounting...'
-    }
-
-    return 'Finishing...'
-  } else if (isFlashing) {
-    // eslint-disable-next-line no-eq-null
-    if (state.percentage != null) {
-      return `${state.percentage}% Flashing`
-    }
-    return `${units.bytesToClosestUnit(state.position)} flashed`
-  } else if (isValidating) {
-    return `${state.percentage}% Validating`
-  } else if (!isFlashing && !isValidating) {
-    return 'Failed'
-  }
-
-  throw new Error(`Invalid state: ${JSON.stringify(state)}`)
-}
--- a/lib/gui/app/modules/progress-status.ts
+++ b/lib/gui/app/modules/progress-status.ts
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2017 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License")
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as prettyBytes from 'pretty-bytes';
+
+export interface FlashState {
+	active: number;
+	failed: number;
+	percentage?: number;
+	speed: number;
+	position: number;
+	type?: 'decompressing' | 'flashing' | 'verifying' | 'downloading';
+}
+
+export function fromFlashState({
+	type,
+	percentage,
+	position,
+}: Pick<FlashState, 'type' | 'percentage' | 'position'>): {
+	status: string;
+	position?: string;
+} {
+	if (type === undefined) {
+		return { status: 'Starting...' };
+	} else if (type === 'decompressing') {
+		if (percentage == null) {
+			return { status: 'Decompressing...' };
+		} else {
+			return { position: `${percentage}%`, status: 'Decompressing...' };
+		}
+	} else if (type === 'flashing') {
+		if (percentage != null) {
+			if (percentage < 100) {
+				return { position: `${percentage}%`, status: 'Flashing...' };
+			} else {
+				return { status: 'Finishing...' };
+			}
+		} else {
+			return {
+				status: 'Flashing...',
+				position: `${position ? prettyBytes(position) : ''}`,
+			};
+		}
+	} else if (type === 'verifying') {
+		if (percentage == null) {
+			return { status: 'Validating...' };
+		} else if (percentage < 100) {
+			return { position: `${percentage}%`, status: 'Validating...' };
+		} else {
+			return { status: 'Finishing...' };
+		}
+	} else if (type === 'downloading') {
+		if (percentage == null) {
+			return { status: 'Downloading...' };
+		} else if (percentage < 100) {
+			return { position: `${percentage}%`, status: 'Downloading...' };
+		}
+	}
+	return { status: 'Failed' };
+}
+
+export function titleFromFlashState(
+	state: Pick<FlashState, 'type' | 'percentage' | 'position'>,
+): string {
+	const { status, position } = fromFlashState(state);
+	if (position !== undefined) {
+		return `${position} ${status}`;
+	}
+	return status;
+}
--- a/lib/gui/app/modules/update-lock.js
+++ b/lib/gui/app/modules/update-lock.js
@@ -1,214 +0,0 @@
-/*
- * Copyright 2018 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const electron = require('electron')
-const EventEmitter = require('events')
-const createInactivityTimer = require('inactivity-timer')
-const debug = require('debug')('etcher:update-lock')
-const analytics = require('./analytics')
-const settings = require('../models/settings')
-
-/* eslint-disable no-magic-numbers, callback-return */
-
-/**
- * Interaction timeout in milliseconds (defaults to 5 minutes)
- * @type {Number}
- * @constant
- */
-const INTERACTION_TIMEOUT_MS = settings.has('interactionTimeout')
-  ? parseInt(settings.get('interactionTimeout'), 10)
-  : 5 * 60 * 1000
-
-/**
- * Balena Update Lock
- * @class
- */
-class UpdateLock extends EventEmitter {
-  /**
-   * @summary Balena Update Lock
-   * @example
-   * new UpdateLock()
-   */
-  constructor () {
-    super()
-    this.paused = false
-    this.on('inactive', UpdateLock.onInactive)
-    this.lockTimer = createInactivityTimer(INTERACTION_TIMEOUT_MS, () => {
-      debug('inactive')
-      this.emit('inactive')
-    })
-  }
-
-  /**
-   * @summary Inactivity event handler, releases the balena update lock on inactivity
-   * @private
-   * @example
-   * this.on('inactive', onInactive)
-   */
-  static onInactive () {
-    if (settings.get('resinUpdateLock')) {
-      UpdateLock.check((checkError, isLocked) => {
-        debug('inactive-check', Boolean(checkError))
-        if (checkError) {
-          analytics.logException(checkError)
-        }
-        if (isLocked) {
-          UpdateLock.release((error) => {
-            debug('inactive-release', Boolean(error))
-            if (error) {
-              analytics.logException(error)
-            }
-          })
-        }
-      })
-    }
-  }
-
-  /**
-   * @summary Acquire the update lock
-   * @private
-   * @param {Function} callback - callback(error)
-   * @example
-   * UpdateLock.acquire((error) => {
-   *   // ...
-   * })
-   */
-  static acquire (callback) {
-    debug('lock')
-    if (settings.get('resinUpdateLock')) {
-      electron.ipcRenderer.once('resin-update-lock', (event, error) => {
-        callback(error)
-      })
-      electron.ipcRenderer.send('resin-update-lock', 'lock')
-    } else {
-      callback(new Error('Update lock disabled'))
-    }
-  }
-
-  /**
-   * @summary Release the update lock
-   * @private
-   * @param {Function} callback - callback(error)
-   * @example
-   * UpdateLock.release((error) => {
-   *   // ...
-   * })
-   */
-  static release (callback) {
-    debug('unlock')
-    if (settings.get('resinUpdateLock')) {
-      electron.ipcRenderer.once('resin-update-lock', (event, error) => {
-        callback(error)
-      })
-      electron.ipcRenderer.send('resin-update-lock', 'unlock')
-    } else {
-      callback(new Error('Update lock disabled'))
-    }
-  }
-
-  /**
-   * @summary Check the state of the update lock
-   * @private
-   * @param {Function} callback - callback(error, isLocked)
-   * @example
-   * UpdateLock.check((error, isLocked) => {
-   *   if (isLocked) {
-   *     // ...
-   *   }
-   * })
-   */
-  static check (callback) {
-    debug('check')
-    if (settings.get('resinUpdateLock')) {
-      electron.ipcRenderer.once('resin-update-lock', (event, error, isLocked) => {
-        callback(error, isLocked)
-      })
-      electron.ipcRenderer.send('resin-update-lock', 'check')
-    } else {
-      callback(new Error('Update lock disabled'))
-    }
-  }
-
-  /**
-   * @summary Extend the lock timer
-   * @example
-   * updateLock.extend()
-   */
-  extend () {
-    debug('extend')
-
-    if (this.paused) {
-      debug('extend:paused')
-      return
-    }
-
-    this.lockTimer.signal()
-
-    // When extending, check that we have the lock,
-    // and acquire it, if not
-    if (settings.get('resinUpdateLock')) {
-      UpdateLock.check((checkError, isLocked) => {
-        if (checkError) {
-          analytics.logException(checkError)
-        }
-        if (!isLocked) {
-          UpdateLock.acquire((error) => {
-            if (error) {
-              analytics.logException(error)
-            }
-            debug('extend-acquire', Boolean(error))
-          })
-        }
-      })
-    }
-  }
-
-  /**
-   * @summary Clear the lock timer
-   * @example
-   * updateLock.clearTimer()
-   */
-  clearTimer () {
-    debug('clear')
-    this.lockTimer.clear()
-  }
-
-  /**
-   * @summary Clear the lock timer, and pause extension, avoiding triggering until resume()d
-   * @example
-   * updateLock.pause()
-   */
-  pause () {
-    debug('pause')
-    this.paused = true
-    this.clearTimer()
-  }
-
-  /**
-   * @summary Un-pause lock extension, and restart the timer
-   * @example
-   * updateLock.resume()
-   */
-  resume () {
-    debug('resume')
-    this.paused = false
-    this.extend()
-  }
-}
-
-module.exports = new UpdateLock()
--- a/lib/gui/app/os/dialog.js
+++ b/lib/gui/app/os/dialog.js
@@ -1,147 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const _ = require('lodash')
-const electron = require('electron')
-const Bluebird = require('bluebird')
-const errors = require('../../../shared/errors')
-const supportedFormats = require('../../../shared/supported-formats')
-
-/**
- * @summary Current renderer BrowserWindow instance
- * @type {Object}
- * @private
- */
-const currentWindow = electron.remote.getCurrentWindow()
-
-/**
- * @summary Open an image selection dialog
- * @function
- * @public
- *
- * @description
- * Notice that by image, we mean *.img/*.iso/*.zip/etc files.
- *
- * @fulfil {Object} - selected image
- * @returns {Promise};
- *
- * @example
- * osDialog.selectImage().then((image) => {
- *   console.log('The selected image is', image.path);
- * });
- */
-exports.selectImage = () => {
-  return new Bluebird((resolve) => {
-    electron.remote.dialog.showOpenDialog(currentWindow, {
-
-      // This variable is set when running in GNU/Linux from
-      // inside an AppImage, and represents the working directory
-      // from where the AppImage was run (which might not be the
-      // place where the AppImage is located). `OWD` stands for
-      // "Original Working Directory".
-      //
-      // See: https://github.com/probonopd/AppImageKit/commit/1569d6f8540aa6c2c618dbdb5d6fcbf0003952b7
-      defaultPath: process.env.OWD,
-      properties: [
-        'openFile',
-        'treatPackageAsDirectory'
-      ],
-      filters: [
-        {
-          name: 'OS Images',
-          extensions: _.sortBy(supportedFormats.getAllExtensions())
-        }
-      ]
-    }, (files) => {
-      // `_.first` is smart enough to not throw and return `undefined`
-      // if we pass it an `undefined` value (e.g: when the selection
-      // dialog was cancelled).
-      return resolve(_.first(files))
-    })
-  })
-}
-
-/**
- * @summary Open a warning dialog
- * @function
- * @public
- *
- * @param {Object} options - options
- * @param {String} options.title - dialog title
- * @param {String} options.description - dialog description
- * @param {String} [options.confirmationLabel="OK"] - confirmation label
- * @param {String} [options.rejectionLabel="Cancel"] - rejection label
- * @fulfil {Boolean} - whether the dialog was confirmed or not
- * @returns {Promise};
- *
- * @example
- * osDialog.showWarning({
- *   title: 'This is a warning',
- *   description: 'Are you sure you want to continue?',
- *   confirmationLabel: 'Yes, continue',
- *   rejectionLabel: 'Cancel'
- * }).then((confirmed) => {
- *   if (confirmed) {
- *     console.log('The dialog was confirmed');
- *   }
- * });
- */
-exports.showWarning = (options) => {
-  _.defaults(options, {
-    confirmationLabel: 'OK',
-    rejectionLabel: 'Cancel'
-  })
-
-  const BUTTONS = [
-    options.confirmationLabel,
-    options.rejectionLabel
-  ]
-
-  const BUTTON_CONFIRMATION_INDEX = _.indexOf(BUTTONS, options.confirmationLabel)
-  const BUTTON_REJECTION_INDEX = _.indexOf(BUTTONS, options.rejectionLabel)
-
-  return new Bluebird((resolve) => {
-    electron.remote.dialog.showMessageBox(currentWindow, {
-      type: 'warning',
-      buttons: BUTTONS,
-      defaultId: BUTTON_REJECTION_INDEX,
-      cancelId: BUTTON_REJECTION_INDEX,
-      title: 'Attention',
-      message: options.title,
-      detail: options.description
-    }, (response) => {
-      return resolve(response === BUTTON_CONFIRMATION_INDEX)
-    })
-  })
-}
-
-/**
- * @summary Show error dialog for an Error instance
- * @function
- * @public
- *
- * @param {Error} error - error
- *
- * @example
- * osDialog.showError(new Error('Foo Bar'));
- */
-exports.showError = (error) => {
-  const title = errors.getTitle(error)
-  const message = errors.getDescription(error)
-  electron.remote.dialog.showErrorBox(title, message)
-}
--- a/lib/gui/app/os/dialog.ts
+++ b/lib/gui/app/os/dialog.ts
@@ -0,0 +1,125 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as electron from 'electron';
+import * as _ from 'lodash';
+
+import * as errors from '../../../shared/errors';
+import * as settings from '../../../gui/app/models/settings';
+import { SUPPORTED_EXTENSIONS } from '../../../shared/supported-formats';
+
+async function mountSourceDrive() {
+	// sourceDrivePath is the name of the link in /dev/disk/by-path
+	const sourceDrivePath = await settings.get('automountOnFileSelect');
+	if (sourceDrivePath) {
+		try {
+			await electron.ipcRenderer.invoke('mount-drive', sourceDrivePath);
+		} catch (error) {
+			// noop
+		}
+	}
+}
+
+/**
+ * @summary Open an image selection dialog
+ *
+ * @description
+ * Notice that by image, we mean *.img/*.iso/*.zip/etc files.
+ */
+export async function selectImage(): Promise<string | undefined> {
+	return await openDialog();
+}
+
+export async function openDialog(
+	type: 'openFile' | 'openDirectory' = 'openFile',
+) {
+	await mountSourceDrive();
+	const options: electron.OpenDialogOptions = {
+		// This variable is set when running in GNU/Linux from
+		// inside an AppImage, and represents the working directory
+		// from where the AppImage was run (which might not be the
+		// place where the AppImage is located). `OWD` stands for
+		// "Original Working Directory".
+		//
+		// See: https://github.com/probonopd/AppImageKit/commit/1569d6f8540aa6c2c618dbdb5d6fcbf0003952b7
+		defaultPath: process.env.OWD,
+		properties: [type, 'treatPackageAsDirectory'],
+		filters:
+			type === 'openFile'
+				? [
+						{
+							name: 'OS Images',
+							extensions: SUPPORTED_EXTENSIONS,
+						},
+						{
+							name: 'All',
+							extensions: ['*'],
+						},
+				  ]
+				: undefined,
+	};
+	const currentWindow = electron.remote.getCurrentWindow();
+	const [path] = (
+		await electron.remote.dialog.showOpenDialog(currentWindow, options)
+	).filePaths;
+	return path;
+}
+
+/**
+ * @summary Open a warning dialog
+ */
+export async function showWarning(options: {
+	confirmationLabel: string;
+	rejectionLabel: string;
+	title: string;
+	description: string;
+}): Promise<boolean> {
+	_.defaults(options, {
+		confirmationLabel: 'OK',
+		rejectionLabel: 'Cancel',
+	});
+
+	const BUTTONS = [options.confirmationLabel, options.rejectionLabel];
+
+	const BUTTON_CONFIRMATION_INDEX = _.indexOf(
+		BUTTONS,
+		options.confirmationLabel,
+	);
+	const BUTTON_REJECTION_INDEX = _.indexOf(BUTTONS, options.rejectionLabel);
+
+	const { response } = await electron.remote.dialog.showMessageBox(
+		electron.remote.getCurrentWindow(),
+		{
+			type: 'warning',
+			buttons: BUTTONS,
+			defaultId: BUTTON_REJECTION_INDEX,
+			cancelId: BUTTON_REJECTION_INDEX,
+			title: 'Attention',
+			message: options.title,
+			detail: options.description,
+		},
+	);
+	return response === BUTTON_CONFIRMATION_INDEX;
+}
+
+/**
+ * @summary Show error dialog for an Error instance
+ */
+export function showError(error: Error) {
+	const title = errors.getTitle(error);
+	const message = errors.getDescription(error);
+	electron.remote.dialog.showErrorBox(title, message);
+}
--- a/lib/gui/app/os/notification.js
+++ b/lib/gui/app/os/notification.js
@@ -1,56 +0,0 @@
-/*
- * Copyright 2017 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const electron = require('electron')
-const settings = require('../models/settings')
-
-/**
- * @summary Send a notification
- * @function
- * @public
- *
- * @description
- * This function makes use of Electron's notification desktop
- * integration feature. See:
- * http://electron.atom.io/docs/v0.37.5/tutorial/desktop-environment-integration/
- *
- * @param {String} title - notification title
- * @param {Object} options - options object
- * @param {String} options.body - notification body
- * @param {String} options.icon - supported icon path
- * @returns {Object} HTML5 notification instance
- *
- * @example
- * notification.send('Hello', {
- *   body: 'Foo Bar Bar',
- *   icon: 'icon.png'
- * });
- */
-exports.send = (title, options) => {
-  // Bail out if desktop notifications are disabled
-  if (!settings.get('desktopNotifications')) {
-    return null
-  }
-
-  // `app.dock` is only defined in OS X
-  if (electron.remote.app.dock) {
-    electron.remote.app.dock.bounce()
-  }
-
-  return new window.Notification(title, options)
-}
--- a/lib/gui/app/modules/exception-reporter.js
+++ b/lib/gui/app/modules/exception-reporter.js
@@ -1,5 +1,5 @@
 /*
- * Copyright 2016 balena.io
+ * Copyright 2017 balena.io
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
@@ -14,27 +14,23 @@
 * limitations under the License.
 */

-'use strict'
+import * as electron from 'electron';

-const _ = require('lodash')
-const analytics = require('../modules/analytics')
-const osDialog = require('../os/dialog')
+import * as settings from '../models/settings';

 /**
- * @summary Report an exception
- * @function
- * @public
- *
- * @param {Error} exception - exception
- *
- * @example
- * exceptionReporter.report(new Error('Something happened'));
+ * @summary Send a notification
 */
-exports.report = (exception) => {
-  if (_.isUndefined(exception)) {
-    return
-  }
+export async function send(title: string, body: string, icon: string) {
+	// Bail out if desktop notifications are disabled
+	if (!(await settings.get('desktopNotifications'))) {
+		return;
+	}

-  osDialog.showError(exception)
-  analytics.logException(exception)
+	// `app.dock` is only defined in OS X
+	if (electron.remote.app.dock) {
+		electron.remote.app.dock.bounce();
+	}
+
+	return new window.Notification(title, { body, icon });
 }
--- a/lib/gui/app/os/open-external/services/open-external.js
+++ b/lib/gui/app/os/open-external/services/open-external.js
@@ -1,54 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const electron = require('electron')
-const store = require('../../../models/store')
-const analytics = require('../../../modules/analytics')
-const settings = require('../../../models/settings')
-
-/**
- * @summary Open an external resource
- * @function
- * @public
- *
- * @param {String} url - url
- *
- * @example
- * OSOpenExternalService.open('https://www.google.com');
- */
-const open = (url) => {
-  // Don't open links if they're disabled by the env var
-  if (settings.get('disableExternalLinks')) {
-    return
-  }
-
-  analytics.logEvent('Open external link', {
-    url,
-    applicationSessionUuid: store.getState().toJS().applicationSessionUuid
-  })
-
-  if (url) {
-    electron.shell.openExternal(url)
-  }
-}
-
-module.exports = function () {
-  this.open = open
-}
-
-module.exports.open = open
--- a/lib/gui/app/os/open-external/services/open-external.ts
+++ b/lib/gui/app/os/open-external/services/open-external.ts
@@ -14,19 +14,22 @@
 * limitations under the License.
 */

-'use strict'
-
-/* eslint-disable jsdoc/require-example */
+import * as electron from 'electron';
+import * as settings from '../../../models/settings';
+import { logEvent } from '../../../modules/analytics';

 /**
- * @module Etcher.Components.SVGIcon
+ * @summary Open an external resource
 */
+export async function open(url: string) {
+	// Don't open links if they're disabled by the env var
+	if (await settings.get('disableExternalLinks')) {
+		return;
+	}

-const angular = require('angular')
-const react2angular = require('react2angular').react2angular
+	logEvent('Open external link', { url });

-const MODULE_NAME = 'Etcher.Components.SVGIcon'
-const angularSVGIcon = angular.module(MODULE_NAME, [])
-
-angularSVGIcon.component('svgIcon', react2angular(require('./svg-icon.jsx')))
-module.exports = MODULE_NAME
+	if (url) {
+		electron.shell.openExternal(url);
+	}
+}
--- a/lib/gui/app/os/window-progress.js
+++ b/lib/gui/app/os/window-progress.js
@@ -1,114 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const electron = require('electron')
-const utils = require('../../../shared/utils')
-const progressStatus = require('../modules/progress-status')
-
-/**
- * @summary The title of the main window upon program launch
- * @type {String}
- * @private
- * @constant
- */
-const INITIAL_TITLE = document.title
-
-/**
- * @summary Make the full window status title
- * @private
- *
- * @param {Object} state - flash state object
- *
- * @returns {String}
- *
- * @example
- * const title = getWindowTitle({
- *   flashing: 1,
- *   validating: 0,
- *   successful: 0,
- *   failed: 0,
- *   percentage: 55,
- *   speed: 2049
- * });
- *
- * console.log(title);
- * // 'Etcher \u2013 55% Flashing'
- */
-const getWindowTitle = (state) => {
-  if (state) {
-    const subtitle = progressStatus.fromFlashState(state)
-    const DASH_UNICODE_CHAR = '\u2013'
-    return `${INITIAL_TITLE} ${DASH_UNICODE_CHAR} ${subtitle}`
-  }
-
-  return INITIAL_TITLE
-}
-
-/**
- * @summary A reference to the current renderer Electron window
- * @type {Object}
- * @protected
- *
- * @description
- * We expose this property to `this` for testability purposes.
- */
-exports.currentWindow = electron.remote.getCurrentWindow()
-
-/**
- * @summary Set operating system window progress
- * @function
- * @public
- *
- * @description
- * Show progress inline in operating system task bar
- *
- * @param {Number} state - flash state object
- *
- * @example
- * windowProgress.set({
- *   flashing: 1,
- *   validating: 0,
- *   successful: 0,
- *   failed: 0,
- *   percentage: 55,
- *   speed: 2049
- * })
- */
-exports.set = (state) => {
-  // eslint-disable-next-line no-eq-null
-  if (state.percentage != null) {
-    exports.currentWindow.setProgressBar(utils.percentageToFloat(state.percentage))
-  }
-  exports.currentWindow.setTitle(getWindowTitle(state))
-}
-
-/**
- * @summary Clear the window progress bar
- * @function
- * @public
- *
- * @example
- * windowProgress.clear();
- */
-exports.clear = () => {
-  // Passing 0 or null/undefined doesn't work.
-  const ELECTRON_PROGRESS_BAR_RESET_VALUE = -1
-
-  exports.currentWindow.setProgressBar(ELECTRON_PROGRESS_BAR_RESET_VALUE)
-  exports.currentWindow.setTitle(getWindowTitle(null))
-}
--- a/lib/gui/app/os/window-progress.ts
+++ b/lib/gui/app/os/window-progress.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as electron from 'electron';
+
+import { percentageToFloat } from '../../../shared/utils';
+import { FlashState, titleFromFlashState } from '../modules/progress-status';
+
+/**
+ * @summary The title of the main window upon program launch
+ */
+const INITIAL_TITLE = document.title;
+
+/**
+ * @summary Make the full window status title
+ */
+function getWindowTitle(state?: FlashState) {
+	if (state) {
+		return `${INITIAL_TITLE} – ${titleFromFlashState(state)}`;
+	}
+	return INITIAL_TITLE;
+}
+
+/**
+ * @summary A reference to the current renderer Electron window
+ *
+ * @description
+ * We expose this property to `this` for testability purposes.
+ */
+export const currentWindow = electron.remote.getCurrentWindow();
+
+/**
+ * @summary Set operating system window progress
+ *
+ * @description
+ * Show progress inline in operating system task bar
+ */
+export function set(state: FlashState) {
+	if (state.percentage != null) {
+		currentWindow.setProgressBar(percentageToFloat(state.percentage));
+	}
+	currentWindow.setTitle(getWindowTitle(state));
+}
+
+/**
+ * @summary Clear the window progress bar
+ */
+export function clear() {
+	// Passing 0 or null/undefined doesn't work.
+	currentWindow.setProgressBar(-1);
+	currentWindow.setTitle(getWindowTitle(undefined));
+}
--- a/lib/gui/app/os/windows-network-drives.js
+++ b/lib/gui/app/os/windows-network-drives.js
@@ -1,143 +0,0 @@
-/*
- * Copyright 2019 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const Bluebird = require('bluebird')
-const cp = require('child_process')
-const fs = require('fs')
-const _ = require('lodash')
-const os = require('os')
-const Path = require('path')
-const process = require('process')
-const { promisify } = require('util')
-
-const { tmpFileDisposer } = require('../../../shared/utils')
-
-const readFileAsync = promisify(fs.readFile)
-
-const execAsync = promisify(cp.exec)
-
-/**
- * @summary Returns wmic's output for network drives
- * @function
- *
- * @returns {Promise<String>}
- *
- * @example
- * const output = await getWmicNetworkDrivesOutput()
- */
-exports.getWmicNetworkDrivesOutput = async () => {
-  // Exported for tests.
-  // When trying to read wmic's stdout directly from node, it is encoded with the current
-  // console codepage (depending on the computer).
-  // Decoding this would require getting this codepage somehow and using iconv as node
-  // doesn't know how to read cp850 directly for example.
-  // We could also use wmic's "/output:" switch but it doesn't work when the filename
-  // contains a space and the os temp dir may contain spaces ("D:\Windows Temp Files" for example).
-  // So we just redirect to a file and read it afterwards as we know it will be ucs2 encoded.
-  const options = {
-
-    // Close the file once it's created
-    discardDescriptor: true,
-
-    // Wmic fails with "Invalid global switch" when the "/output:" switch filename contains a dash ("-")
-    prefix: 'tmp'
-  }
-  return Bluebird.using(tmpFileDisposer(options), async ({ path }) => {
-    const command = [
-      Path.join(process.env.SystemRoot, 'System32', 'Wbem', 'wmic'),
-      'path',
-      'Win32_LogicalDisk',
-      'Where',
-      'DriveType="4"',
-      'get',
-      'DeviceID,ProviderName',
-      '>',
-      `"${path}"`
-    ]
-    await execAsync(command.join(' '), { windowsHide: true })
-    return readFileAsync(path, 'ucs2')
-  })
-}
-
-/**
- * @summary returns a Map of drive letter -> network locations on Windows
- * @function
- *
- * @returns {Promise<Map<String, String>>} - 'Z:' -> '\\\\192.168.0.1\\Public'
- *
- * @example
- * getWindowsNetworkDrives()
- *   .then(console.log);
- */
-const getWindowsNetworkDrives = async () => {
-  const result = await exports.getWmicNetworkDrivesOutput()
-  const couples = _.chain(result)
-    .split('\n')
-
-    // Remove header line
-    // eslint-disable-next-line no-magic-numbers
-    .slice(1)
-
-    // Remove extra spaces / tabs / carriage returns
-    .invokeMap(String.prototype.trim)
-
-    // Filter out empty lines
-    .compact()
-    .map((str) => {
-      const colonPosition = str.indexOf(':')
-      // eslint-disable-next-line no-magic-numbers
-      if (colonPosition === -1) {
-        throw new Error(`Can't parse wmic output: ${result}`)
-      }
-      // eslint-disable-next-line no-magic-numbers
-      return [ str.slice(0, colonPosition + 1), _.trim(str.slice(colonPosition + 1)) ]
-    })
-    // eslint-disable-next-line no-magic-numbers
-    .filter((couple) => couple[1].length > 0)
-    .value()
-  return new Map(couples)
-}
-
-/**
- * @summary Replaces network drive letter with network drive location in the provided filePath on Windows
- * @function
- *
- * @param {String} filePath - file path
- *
- * @returns {String} - updated file path
- *
- * @example
- * replaceWindowsNetworkDriveLetter('Z:\\some-file')
- *   .then(console.log);
- */
-exports.replaceWindowsNetworkDriveLetter = async (filePath) => {
-  let result = filePath
-  if (os.platform() === 'win32') {
-    const matches = /^([A-Z]+:)\\(.*)$/.exec(filePath)
-    if (matches !== null) {
-      const [ , drive, relativePath ] = matches
-      const drives = await getWindowsNetworkDrives()
-      const location = drives.get(drive)
-      // eslint-disable-next-line no-undefined
-      if (location !== undefined) {
-        result = `${location}\\${relativePath}`
-      }
-    }
-  }
-  return result
-}
--- a/lib/gui/app/os/windows-network-drives.ts
+++ b/lib/gui/app/os/windows-network-drives.ts
@@ -0,0 +1,116 @@
+/*
+ * Copyright 2019 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { exec } from 'child_process';
+import { readFile } from 'fs';
+import { chain, trim } from 'lodash';
+import { platform } from 'os';
+import { join } from 'path';
+import { env } from 'process';
+import { promisify } from 'util';
+
+import { withTmpFile } from '../../../shared/tmp';
+
+const readFileAsync = promisify(readFile);
+
+const execAsync = promisify(exec);
+
+/**
+ * @summary Returns wmic's output for network drives
+ */
+async function getWmicNetworkDrivesOutput(): Promise<string> {
+	// When trying to read wmic's stdout directly from node, it is encoded with the current
+	// console codepage (depending on the computer).
+	// Decoding this would require getting this codepage somehow and using iconv as node
+	// doesn't know how to read cp850 directly for example.
+	// We could also use wmic's "/output:" switch but it doesn't work when the filename
+	// contains a space and the os temp dir may contain spaces ("D:\Windows Temp Files" for example).
+	// So we just redirect to a file and read it afterwards as we know it will be ucs2 encoded.
+	const options = {
+		// Close the file once it's created
+		discardDescriptor: true,
+		// Wmic fails with "Invalid global switch" when the "/output:" switch filename contains a dash ("-")
+		prefix: 'tmp',
+	};
+	return withTmpFile(options, async (path) => {
+		const command = [
+			join(env.SystemRoot as string, 'System32', 'Wbem', 'wmic'),
+			'path',
+			'Win32_LogicalDisk',
+			'Where',
+			'DriveType="4"',
+			'get',
+			'DeviceID,ProviderName',
+			'>',
+			`"${path}"`,
+		];
+		await execAsync(command.join(' '), { windowsHide: true });
+		return readFileAsync(path, 'ucs2');
+	});
+}
+
+/**
+ * @summary returns a Map of drive letter -> network locations on Windows: 'Z:' -> '\\\\192.168.0.1\\Public'
+ */
+async function getWindowsNetworkDrives(
+	getWmicOutput: () => Promise<string>,
+): Promise<Map<string, string>> {
+	const result = await getWmicOutput();
+	const couples: Array<[string, string]> = chain(result)
+		.split('\n')
+		// Remove header line
+		.slice(1)
+		// Remove extra spaces / tabs / carriage returns
+		.invokeMap(String.prototype.trim)
+		// Filter out empty lines
+		.compact()
+		.map((str: string): [string, string] => {
+			const colonPosition = str.indexOf(':');
+			if (colonPosition === -1) {
+				throw new Error(`Can't parse wmic output: ${result}`);
+			}
+			return [
+				str.slice(0, colonPosition + 1),
+				trim(str.slice(colonPosition + 1)),
+			];
+		})
+		.filter((couple) => couple[1].length > 0)
+		.value();
+	return new Map(couples);
+}
+
+/**
+ * @summary Replaces network drive letter with network drive location in the provided filePath on Windows
+ */
+export async function replaceWindowsNetworkDriveLetter(
+	filePath: string,
+	// getWmicOutput is a parameter so it can be replaced in tests
+	getWmicOutput = getWmicNetworkDrivesOutput,
+): Promise<string> {
+	let result = filePath;
+	if (platform() === 'win32') {
+		const matches = /^([A-Z]+:)\\(.*)$/.exec(filePath);
+		if (matches !== null) {
+			const [, drive, relativePath] = matches;
+			const drives = await getWindowsNetworkDrives(getWmicOutput);
+			const location = drives.get(drive);
+			if (location !== undefined) {
+				result = `${location}\\${relativePath}`;
+			}
+		}
+	}
+	return result;
+}
--- a/lib/gui/app/pages/finish/styles/_finish.scss
+++ b/lib/gui/app/pages/finish/styles/_finish.scss
@@ -1,173 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.page-finish {
-  margin-top: 60px;
-}
-
-.col-xs-5.inline-flex.items-baseline > span, .col-xs-5.inline-flex.items-baseline > div {
-  margin-bottom: -10px;
-}
-
-.page-finish .button-label {
-  margin: 0 auto $spacing-medium;
-
-  // Keep some spacing at the sides
-  max-width: $btn-min-width - 5px;
-}
-
-.page-finish .button-primary {
-  min-width: $btn-min-width;
-}
-
-.page-finish .title,
-.page-finish .title h3 {
-  color: $palette-theme-dark-foreground;
-  font-weight: bold;
-}
-
-.page-finish .huge-title {
-  font-size: 3.5em;
-}
-
-.page-finish .label {
-  display: inline-block;
-
-  > b {
-    color: $palette-theme-dark-soft-foreground;
-  }
-}
-
-.page-finish .soft {
-  color: $palette-theme-dark-soft-foreground;
-}
-
-.page-finish .separator-xs {
-  flex-grow: 0;
-  background-color: $palette-theme-dark-soft-background;
-  padding: 0px;
-  min-width: 2px;
-}
-
-.page-finish .center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.page-finish .box > div > button {
-  margin-right: 20px;
-}
-
-.page-finish webview {
-  width: 800px;
-  height: 300px;
-  position: absolute;
-  top: 80px;
-  left: 0;
-  z-index: 9001;
-}
-
-.page-finish .fallback-banner {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  position: absolute;
-  bottom: 0;
-  color: white;
-  height: 320px;
-  width: 100vw;
-
-  > * {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .caption {
-    display: flex;
-    font-weight: 500;
-  }
-
-  .caption-big {
-    font-size: 28px;
-    font-weight: bold;
-    position: absolute;
-    top: 75px;
-  }
-
-  .caption-small {
-    font-size: 12px;
-  }
-
-  .fallback-footer {
-    font-size: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    max-height: 21px;
-    margin-bottom: 17px;
-  }
-
-  .svg-icon {
-    margin: 0 10px;
-  }
-
-  .section-footer {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-
-    .footer-right {
-      color: #7e8085;
-      font-size: 12px;
-      margin-right: 30px;
-    }
-  }
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-.items-baseline {
-  align-items: baseline;
-}
-
-.page-finish .tick--success {
-  /* hack(Shou): for some reason the height is stretched */
-  height: 24px;
-  width: 24px;
-  border: none;
-  padding: 0;
-  margin: 0 15px 0 0;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  font-size: 16px;
-}
-
-.title-wrap {
-  margin-left: 5px;
-
-  > .title {
-    margin-bottom: 3px;
-  }
-}
--- a/lib/gui/app/pages/main/DriveSelector.tsx
+++ b/lib/gui/app/pages/main/DriveSelector.tsx
@@ -1,149 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as _ from 'lodash';
-import * as propTypes from 'prop-types';
-import * as React from 'react';
-import styled from 'styled-components';
-import * as driveConstraints from '../../../../shared/drive-constraints';
-import * as utils from '../../../../shared/utils';
-import * as DriveSelectorModal from '../../components/drive-selector/DriveSelectorModal.jsx';
-import * as TargetSelector from '../../components/drive-selector/target-selector.jsx';
-import * as SvgIcon from '../../components/svg-icon/svg-icon.jsx';
-import * as selectionState from '../../models/selection-state';
-import * as settings from '../../models/settings';
-import * as store from '../../models/store';
-import * as analytics from '../../modules/analytics';
-
-const StepBorder = styled.div<{
-	disabled: boolean;
-	left?: boolean;
-	right?: boolean;
-}>`
-	height: 2px;
-	background-color: ${props =>
-		props.disabled
-			? props.theme.customColors.dark.disabled.foreground
-			: props.theme.customColors.dark.foreground};
-	position: absolute;
-	width: 124px;
-	top: 19px;
-
-	left: ${props => (props.left ? '-67px' : undefined)};
-	right: ${props => (props.right ? '-67px' : undefined)};
-`;
-
-const getDriveListLabel = () => {
-	return _.join(
-		_.map(selectionState.getSelectedDrives(), (drive: any) => {
-			return `${drive.description} (${drive.displayName})`;
-		}),
-		'\n',
-	);
-};
-
-const getMemoizedSelectedDrives = utils.memoize(
-	selectionState.getSelectedDrives,
-	_.isEqual,
-);
-
-const shouldShowDrivesButton = () => {
-	return !settings.get('disableExplicitDriveSelection');
-};
-
-const getDriveSelectionStateSlice = () => ({
-	showDrivesButton: shouldShowDrivesButton(),
-	driveListLabel: getDriveListLabel(),
-	targets: getMemoizedSelectedDrives(),
-});
-
-export const DriveSelector = ({
-	webviewShowing,
-	disabled,
-	nextStepDisabled,
-	hasDrive,
-	flashing,
-}: any) => {
-	// TODO: inject these from redux-connector
-	const [
-		{ showDrivesButton, driveListLabel, targets },
-		setStateSlice,
-	] = React.useState(getDriveSelectionStateSlice());
-	const [showDriveSelectorModal, setShowDriveSelectorModal] = React.useState(
-		false,
-	);
-
-	React.useEffect(() => {
-		return (store as any).observe(() => {
-			setStateSlice(getDriveSelectionStateSlice());
-		});
-	}, []);
-
-	const showStepConnectingLines = !webviewShowing || !flashing;
-
-	return (
-		<div className="box text-center relative">
-			{showStepConnectingLines && (
-				<React.Fragment>
-					<StepBorder disabled={disabled} left />
-					<StepBorder disabled={nextStepDisabled} right />
-				</React.Fragment>
-			)}
-
-			<div className="center-block">
-				<SvgIcon paths={['../../assets/drive.svg']} disabled={disabled} />
-			</div>
-
-			<div className="space-vertical-large">
-				<TargetSelector
-					disabled={disabled}
-					show={!hasDrive && showDrivesButton}
-					tooltip={driveListLabel}
-					selection={selectionState}
-					openDriveSelector={() => {
-						setShowDriveSelectorModal(true);
-					}}
-					reselectDrive={() => {
-						analytics.logEvent('Reselect drive', {
-							applicationSessionUuid: (store as any).getState().toJS()
-								.applicationSessionUuid,
-							flashingWorkflowUuid: (store as any).getState().toJS()
-								.flashingWorkflowUuid,
-						});
-						setShowDriveSelectorModal(true);
-					}}
-					flashing={flashing}
-					constraints={driveConstraints}
-					targets={targets}
-				/>
-			</div>
-
-			{showDriveSelectorModal && (
-				<DriveSelectorModal
-					close={() => setShowDriveSelectorModal(false)}
-				></DriveSelectorModal>
-			)}
-		</div>
-	);
-};
-
-DriveSelector.propTypes = {
-	webviewShowing: propTypes.bool,
-	disabled: propTypes.bool,
-	nextStepDisabled: propTypes.bool,
-	hasDrive: propTypes.bool,
-	flashing: propTypes.bool,
-};
--- a/lib/gui/app/pages/main/Flash.tsx
+++ b/lib/gui/app/pages/main/Flash.tsx
@@ -14,45 +14,33 @@
 * limitations under the License.
 */

+import CircleSvg from '@fortawesome/fontawesome-free/svgs/solid/circle.svg';
 import * as _ from 'lodash';
 import * as path from 'path';
 import * as React from 'react';
-import { Modal, Txt } from 'rendition';
+import { Flex, Modal as SmallModal, Txt } from 'rendition';
+
 import * as constraints from '../../../../shared/drive-constraints';
 import * as messages from '../../../../shared/messages';
-import * as DriveSelectorModal from '../../components/drive-selector/DriveSelectorModal.jsx';
-import * as ProgressButton from '../../components/progress-button/progress-button.jsx';
-import * as SvgIcon from '../../components/svg-icon/svg-icon.jsx';
+import { ProgressButton } from '../../components/progress-button/progress-button';
 import * as availableDrives from '../../models/available-drives';
 import * as flashState from '../../models/flash-state';
 import * as selection from '../../models/selection-state';
-import * as store from '../../models/store';
 import * as analytics from '../../modules/analytics';
-import * as driveScanner from '../../modules/drive-scanner';
+import { scanner as driveScanner } from '../../modules/drive-scanner';
 import * as imageWriter from '../../modules/image-writer';
-import * as progressStatus from '../../modules/progress-status';
 import * as notification from '../../os/notification';
+import {
+	selectAllTargets,
+	TargetSelectorModal,
+} from '../../components/target-selector/target-selector';
+
+import FlashSvg from '../../../assets/flash.svg';
+import DriveStatusWarningModal from '../../components/drive-status-warning-modal/drive-status-warning-modal';

 const COMPLETED_PERCENTAGE = 100;
 const SPEED_PRECISION = 2;

-const getWarningMessages = (drives: any, image: any) => {
-	const warningMessages = [];
-	for (const drive of drives) {
-		if (constraints.isDriveSizeLarge(drive)) {
-			warningMessages.push(messages.warning.largeDriveSize(drive));
-		} else if (!constraints.isDriveSizeRecommended(drive, image)) {
-			warningMessages.push(
-				messages.warning.unrecommendedDriveSize(image, drive),
-			);
-		}
-
-		// TODO(Shou): we should consider adding the same warning dialog for system drives and remove unsafe mode
-	}
-
-	return warningMessages;
-};
-
 const getErrorMessageFromCode = (errorCode: string) => {
 	// TODO: All these error codes to messages translations
 	// should go away if the writer emitted user friendly
@@ -71,15 +59,17 @@ const getErrorMessageFromCode = (errorCode: string) => {
 	return '';
 };

-const flashImageToDrive = async (goToSuccess: () => void) => {
+async function flashImageToDrive(
+	isFlashing: boolean,
+	goToSuccess: () => void,
+): Promise<string> {
 	const devices = selection.getSelectedDevices();
 	const image: any = selection.getImage();
-	const drives = _.filter(availableDrives.getDrives(), (drive: any) => {
-		return _.includes(devices, drive.device);
+	const drives = availableDrives.getDrives().filter((drive: any) => {
+		return devices.includes(drive.device);
 	});

-	// eslint-disable-next-line no-magic-numbers
-	if (drives.length === 0 || flashState.isFlashing()) {
+	if (drives.length === 0 || isFlashing) {
 		return '';
 	}

@@ -87,40 +77,33 @@ const flashImageToDrive = async (goToSuccess: () => void) => {
 	// otherwise Windows throws EPERM
 	driveScanner.stop();

-	const iconPath = '../../assets/icon.png';
+	const iconPath = path.join('media', 'icon.png');
 	const basename = path.basename(image.path);
 	try {
-		await imageWriter.flash(image.path, drives);
+		await imageWriter.flash(image, drives);
 		if (!flashState.wasLastFlashCancelled()) {
-			const flashResults: any = flashState.getFlashResults();
-			notification.send('Flash complete!', {
-				body: messages.info.flashComplete(
-					basename,
-					drives as any,
-					flashResults.results.devices,
-				),
-				icon: iconPath,
-			});
+			const {
+				results = { devices: { successful: 0, failed: 0 } },
+			} = flashState.getFlashResults();
+			notification.send(
+				'Flash complete!',
+				messages.info.flashComplete(basename, drives as any, results.devices),
+				iconPath,
+			);
 			goToSuccess();
 		}
 	} catch (error) {
-		// When flashing is cancelled before starting above there is no error
-		if (!error) {
-			return '';
-		}
-
-		notification.send('Oops! Looks like the flash failed.', {
-			body: messages.error.flashFailure(path.basename(image.path), drives),
-			icon: iconPath,
-		});
-
+		notification.send(
+			'Oops! Looks like the flash failed.',
+			messages.error.flashFailure(path.basename(image.path), drives),
+			iconPath,
+		);
 		let errorMessage = getErrorMessageFromCode(error.code);
 		if (!errorMessage) {
 			error.image = basename;
 			analytics.logException(error);
-			errorMessage = messages.error.genericFlashError();
+			errorMessage = messages.error.genericFlashError(error);
 		}
-
 		return errorMessage;
 	} finally {
 		availableDrives.setDrives([]);
@@ -128,196 +111,211 @@ const flashImageToDrive = async (goToSuccess: () => void) => {
 	}

 	return '';
-};
-
-/**
- * @summary Get progress button label
- * @function
- * @public
- *
- * @returns {String} progress button label
- *
- * @example
- * const label = FlashController.getProgressButtonLabel()
- */
-const getProgressButtonLabel = () => {
-	if (!flashState.isFlashing()) {
-		return 'Flash!';
-	}
-
-	return progressStatus.fromFlashState(flashState.getFlashState());
-};
+}

 const formatSeconds = (totalSeconds: number) => {
-	if (!totalSeconds && !_.isNumber(totalSeconds)) {
+	if (typeof totalSeconds !== 'number' || !Number.isFinite(totalSeconds)) {
 		return '';
 	}
-	// eslint-disable-next-line no-magic-numbers
 	const minutes = Math.floor(totalSeconds / 60);
-	// eslint-disable-next-line no-magic-numbers
 	const seconds = Math.floor(totalSeconds - minutes * 60);

 	return `${minutes}m${seconds}s`;
 };

-export const Flash = ({
-	shouldFlashStepBeDisabled,
-	lastFlashErrorCode,
-	progressMessage,
-	goToSuccess,
-}: any) => {
-	const state: any = flashState.getFlashState();
-	const isFlashing = flashState.isFlashing();
-	const flashErrorCode = lastFlashErrorCode();
+interface FlashStepProps {
+	shouldFlashStepBeDisabled: boolean;
+	goToSuccess: () => void;
+	isFlashing: boolean;
+	style?: React.CSSProperties;
+	// TODO: factorize
+	step: 'decompressing' | 'flashing' | 'verifying';
+	percentage: number;
+	position: number;
+	failed: number;
+	speed?: number;
+	eta?: number;
+}

-	const [warningMessages, setWarningMessages] = React.useState<string[]>([]);
-	const [errorMessage, setErrorMessage] = React.useState('');
-	const [showDriveSelectorModal, setShowDriveSelectorModal] = React.useState(
-		false,
-	);
+export interface DriveWithWarnings extends constraints.DrivelistDrive {
+	statuses: constraints.DriveStatus[];
+}

-	const handleWarningResponse = async (shouldContinue: boolean) => {
-		setWarningMessages([]);
+interface FlashStepState {
+	warningMessage: boolean;
+	errorMessage: string;
+	showDriveSelectorModal: boolean;
+	systemDrives: boolean;
+	drivesWithWarnings: DriveWithWarnings[];
+}

+export class FlashStep extends React.PureComponent<
+	FlashStepProps,
+	FlashStepState
+> {
+	constructor(props: FlashStepProps) {
+		super(props);
+		this.state = {
+			warningMessage: false,
+			errorMessage: '',
+			showDriveSelectorModal: false,
+			systemDrives: false,
+			drivesWithWarnings: [],
+		};
+	}
+
+	private async handleWarningResponse(shouldContinue: boolean) {
+		this.setState({ warningMessage: false });
 		if (!shouldContinue) {
-			setShowDriveSelectorModal(true);
+			this.setState({ showDriveSelectorModal: true });
 			return;
 		}
+		this.setState({
+			errorMessage: await flashImageToDrive(
+				this.props.isFlashing,
+				this.props.goToSuccess,
+			),
+		});
+	}

-		setErrorMessage(await flashImageToDrive(goToSuccess));
-	};
-
-	const handleFlashErrorResponse = (shouldRetry: boolean) => {
-		setErrorMessage('');
+	private handleFlashErrorResponse(shouldRetry: boolean) {
+		this.setState({ errorMessage: '' });
 		flashState.resetState();
 		if (shouldRetry) {
-			analytics.logEvent('Restart after failure', {
-				applicationSessionUuid: (store as any).getState().toJS()
-					.applicationSessionUuid,
-				flashingWorkflowUuid: (store as any).getState().toJS()
-					.flashingWorkflowUuid,
-			});
+			analytics.logEvent('Restart after failure');
 		} else {
 			selection.clear();
 		}
-	};
+	}

-	const tryFlash = async () => {
-		const devices = selection.getSelectedDevices();
-		const image = selection.getImage();
-		const drives = _.filter(availableDrives.getDrives(), (drive: any) => {
-			return _.includes(devices, drive.device);
-		});
-
-		// eslint-disable-next-line no-magic-numbers
+	private hasListWarnings(drives: any[]) {
 		if (drives.length === 0 || flashState.isFlashing()) {
 			return;
 		}
+		return drives.filter((drive) => drive.isSystem).length > 0;
+	}

-		const hasDangerStatus = constraints.hasListDriveImageCompatibilityStatus(
-			drives,
-			image,
-		);
-		if (hasDangerStatus) {
-			setWarningMessages(getWarningMessages(drives, image));
+	private async tryFlash() {
+		const drives = selection.getSelectedDrives().map((drive) => {
+			return {
+				...drive,
+				statuses: constraints.getDriveImageCompatibilityStatuses(drive),
+			};
+		});
+		if (drives.length === 0 || this.props.isFlashing) {
 			return;
 		}
+		const hasDangerStatus = drives.some((drive) => drive.statuses.length > 0);
+		if (hasDangerStatus) {
+			const systemDrives = drives.some((drive) =>
+				drive.statuses.includes(constraints.statuses.system),
+			);
+			this.setState({
+				systemDrives,
+				drivesWithWarnings: drives.filter((driveWithWarnings) => {
+					return (
+						driveWithWarnings.isSystem ||
+						(!systemDrives &&
+							driveWithWarnings.statuses.includes(constraints.statuses.large))
+					);
+				}),
+				warningMessage: true,
+			});
+			return;
+		}
+		this.setState({
+			errorMessage: await flashImageToDrive(
+				this.props.isFlashing,
+				this.props.goToSuccess,
+			),
+		});
+	}

-		setErrorMessage(await flashImageToDrive(goToSuccess));
-	};
-
-	return (
-		<React.Fragment>
-			<div className="box text-center">
-				<div className="center-block">
-					<SvgIcon
-						paths={['../../assets/flash.svg']}
-						disabled={shouldFlashStepBeDisabled}
+	public render() {
+		return (
+			<>
+				<Flex
+					flexDirection="column"
+					alignItems="start"
+					style={this.props.style}
+				>
+					<FlashSvg
+						width="40px"
+						className={this.props.shouldFlashStepBeDisabled ? 'disabled' : ''}
+						style={{
+							margin: '0 auto',
+						}}
 					/>
-				</div>

-				<div className="space-vertical-large">
 					<ProgressButton
-						tabindex="3"
-						striped={state.type === 'verifying'}
-						active={isFlashing}
-						percentage={state.percentage}
-						label={getProgressButtonLabel()}
-						disabled={Boolean(flashErrorCode) || shouldFlashStepBeDisabled}
-						callback={tryFlash}
-					></ProgressButton>
+						type={this.props.step}
+						active={this.props.isFlashing}
+						percentage={this.props.percentage}
+						position={this.props.position}
+						disabled={this.props.shouldFlashStepBeDisabled}
+						cancel={imageWriter.cancel}
+						warning={this.hasListWarnings(selection.getSelectedDrives())}
+						callback={() => this.tryFlash()}
+					/>

-					{isFlashing && (
-						<button
-							className="button button-link button-abort-write"
-							onClick={imageWriter.cancel}
-						>
-							<span className="glyphicon glyphicon-remove-sign"></span>
-						</button>
-					)}
-					{!_.isNil(state.speed) && state.percentage !== COMPLETED_PERCENTAGE && (
-						<p className="step-footer step-footer-split">
-							{Boolean(state.speed) && (
-								<span>{`${state.speed.toFixed(SPEED_PRECISION)} MB/s`}</span>
-							)}
-							{!_.isNil(state.eta) && (
-								<span>{`ETA: ${formatSeconds(state.eta)}`}</span>
-							)}
-						</p>
-					)}
+					{!_.isNil(this.props.speed) &&
+						this.props.percentage !== COMPLETED_PERCENTAGE && (
+							<Flex
+								justifyContent="space-between"
+								fontSize="14px"
+								color="#7e8085"
+								width="100%"
+							>
+								<Txt>{this.props.speed.toFixed(SPEED_PRECISION)} MB/s</Txt>
+								{!_.isNil(this.props.eta) && (
+									<Txt>ETA: {formatSeconds(this.props.eta)}</Txt>
+								)}
+							</Flex>
+						)}

-					{Boolean(state.failed) && (
-						<div className="target-status-wrap">
-							<div className="target-status-line target-status-failed">
-								<span className="target-status-dot"></span>
-								<span className="target-status-quantity">{state.failed}</span>
-								<span className="target-status-message">
-									{progressMessage.failed(state.failed)}{' '}
-								</span>
-							</div>
-						</div>
+					{Boolean(this.props.failed) && (
+						<Flex color="#fff" alignItems="center" mt={35}>
+							<CircleSvg height="1em" fill="#ff4444" />
+							<Txt ml={10}>{this.props.failed}</Txt>
+							<Txt ml={10}>{messages.progress.failed(this.props.failed)}</Txt>
+						</Flex>
 					)}
-				</div>
-			</div>
+				</Flex>

-			{/* eslint-disable-next-line no-magic-numbers */}
-			{warningMessages && warningMessages.length > 0 && (
-				<Modal
-					width={400}
-					titleElement={'Attention'}
-					cancel={() => handleWarningResponse(false)}
-					done={() => handleWarningResponse(true)}
-					cancelButtonProps={{
-						children: 'Change',
-					}}
-					action={'Continue'}
-					primaryButtonProps={{ primary: false, warning: true }}
-				>
-					{_.map(warningMessages, (message, key) => (
-						<Txt key={key} whitespace="pre-line" mt={2}>
-							{message}
+				{this.state.warningMessage && (
+					<DriveStatusWarningModal
+						done={() => this.handleWarningResponse(true)}
+						cancel={() => this.handleWarningResponse(false)}
+						isSystem={this.state.systemDrives}
+						drivesWithWarnings={this.state.drivesWithWarnings}
+					/>
+				)}
+
+				{this.state.errorMessage && (
+					<SmallModal
+						width={400}
+						titleElement={'Attention'}
+						cancel={() => this.handleFlashErrorResponse(false)}
+						done={() => this.handleFlashErrorResponse(true)}
+						action={'Retry'}
+					>
+						<Txt>
+							{this.state.errorMessage.split('\n').map((message, key) => (
+								<p key={key}>{message}</p>
+							))}
 						</Txt>
-					))}
-				</Modal>
-			)}
-
-			{errorMessage && (
-				<Modal
-					width={400}
-					titleElement={'Attention'}
-					cancel={() => handleFlashErrorResponse(false)}
-					done={() => handleFlashErrorResponse(true)}
-					action={'Retry'}
-				>
-					<Txt>{errorMessage}</Txt>
-				</Modal>
-			)}
-
-			{showDriveSelectorModal && (
-				<DriveSelectorModal
-					close={() => setShowDriveSelectorModal(false)}
-				></DriveSelectorModal>
-			)}
-		</React.Fragment>
-	);
-};
+					</SmallModal>
+				)}
+				{this.state.showDriveSelectorModal && (
+					<TargetSelectorModal
+						cancel={() => this.setState({ showDriveSelectorModal: false })}
+						done={(modalTargets) => {
+							selectAllTargets(modalTargets);
+							this.setState({ showDriveSelectorModal: false });
+						}}
+					/>
+				)}
+			</>
+		);
+	}
+}
--- a/lib/gui/app/pages/main/MainPage.tsx
+++ b/lib/gui/app/pages/main/MainPage.tsx
@@ -14,37 +14,48 @@
 * limitations under the License.
 */

-import { faCog, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import * as path from 'path';
-import * as React from 'react';
-import { Button } from 'rendition';
+import CogSvg from '@fortawesome/fontawesome-free/svgs/solid/cog.svg';
+import QuestionCircleSvg from '@fortawesome/fontawesome-free/svgs/solid/question-circle.svg';

-import * as FeaturedProject from '../../components/featured-project/featured-project';
-import * as ImageSelector from '../../components/image-selector/image-selector';
-import * as ReducedFlashingInfos from '../../components/reduced-flashing-infos/reduced-flashing-infos';
+import * as path from 'path';
+import * as prettyBytes from 'pretty-bytes';
+import * as React from 'react';
+import { Flex } from 'rendition';
+import styled from 'styled-components';
+
+import FinishPage from '../../components/finish/finish';
+import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos';
 import { SettingsModal } from '../../components/settings/settings';
-import * as SvgIcon from '../../components/svg-icon/svg-icon.jsx';
+import {
+	SourceMetadata,
+	SourceSelector,
+} from '../../components/source-selector/source-selector';
 import * as flashState from '../../models/flash-state';
 import * as selectionState from '../../models/selection-state';
 import * as settings from '../../models/settings';
-import * as store from '../../models/store';
+import { observe } from '../../models/store';
 import { open as openExternal } from '../../os/open-external/services/open-external';
-import { ThemedProvider } from '../../styled-components';
+import {
+	IconButton as BaseIcon,
+	ThemedProvider,
+} from '../../styled-components';
+
+import {
+	TargetSelector,
+	getDriveListLabel,
+} from '../../components/target-selector/target-selector';
+import { FlashStep } from './Flash';
+
+import EtcherSvg from '../../../assets/etcher.svg';
+import { SafeWebview } from '../../components/safe-webview/safe-webview';
 import { colors } from '../../theme';
-import * as middleEllipsis from '../../utils/middle-ellipsis';

-import * as messages from '../../../../shared/messages';
-import { bytesToClosestUnit } from '../../../../shared/units';
+const Icon = styled(BaseIcon)`
+	margin-right: 20px;
+`;

-import { DriveSelector } from './DriveSelector';
-import { Flash } from './Flash';
-
-const DEFAULT_SUPPORT_URL =
-	'https://github.com/balena-io/etcher/blob/master/SUPPORT.md';
-
-const getDrivesTitle = (selection: any) => {
-	const drives = selection.getSelectedDrives();
+function getDrivesTitle() {
+	const drives = selectionState.getSelectedDrives();

 	if (drives.length === 1) {
 		return drives[0].description || 'Untitled Device';
@@ -55,162 +66,275 @@ const getDrivesTitle = (selection: any) => {
 	}

 	return `${drives.length} Targets`;
-};
+}

-const getImageBasename = (selection: any) => {
-	if (!selection.hasImage()) {
+function getImageBasename(image?: SourceMetadata) {
+	if (image === undefined) {
 		return '';
 	}

-	const selectionImageName = selection.getImageName();
-	const imageBasename = path.basename(selection.getImagePath());
-	return selectionImageName || imageBasename;
-};
+	if (image.drive) {
+		return image.drive.description;
+	}
+	const imageBasename = path.basename(image.path);
+	return image.name || imageBasename;
+}

-const MainPage = ({ $state }: any) => {
-	const setRefresh = React.useState(false)[1];
-	const [isWebviewShowing, setIsWebviewShowing] = React.useState(false);
-	const [hideSettings, setHideSettings] = React.useState(true);
-	React.useEffect(() => {
-		return (store as any).observe(() => {
-			setRefresh(ref => !ref);
+const StepBorder = styled.div<{
+	disabled: boolean;
+	left?: boolean;
+	right?: boolean;
+}>`
+	position: relative;
+	height: 2px;
+	background-color: ${(props) =>
+		props.disabled ? colors.dark.disabled.foreground : colors.dark.foreground};
+	width: 120px;
+	top: 19px;
+
+	left: ${(props) => (props.left ? '-67px' : undefined)};
+	margin-right: ${(props) => (props.left ? '-120px' : undefined)};
+	right: ${(props) => (props.right ? '-67px' : undefined)};
+	margin-left: ${(props) => (props.right ? '-120px' : undefined)};
+`;
+
+interface MainPageStateFromStore {
+	isFlashing: boolean;
+	hasImage: boolean;
+	hasDrive: boolean;
+	imageLogo?: string;
+	imageSize?: number;
+	imageName?: string;
+	driveTitle: string;
+	driveLabel: string;
+}
+
+interface MainPageState {
+	current: 'main' | 'success';
+	isWebviewShowing: boolean;
+	hideSettings: boolean;
+	featuredProjectURL?: string;
+}
+
+export class MainPage extends React.Component<
+	{},
+	MainPageState & MainPageStateFromStore
+> {
+	constructor(props: {}) {
+		super(props);
+		this.state = {
+			current: 'main',
+			isWebviewShowing: false,
+			hideSettings: true,
+			...this.stateHelper(),
+		};
+	}
+
+	private stateHelper(): MainPageStateFromStore {
+		return {
+			isFlashing: flashState.isFlashing(),
+			hasImage: selectionState.hasImage(),
+			hasDrive: selectionState.hasDrive(),
+			imageLogo: selectionState.getImageLogo(),
+			imageSize: selectionState.getImageSize(),
+			imageName: getImageBasename(selectionState.getImage()),
+			driveTitle: getDrivesTitle(),
+			driveLabel: getDriveListLabel(),
+		};
+	}
+
+	private async getFeaturedProjectURL() {
+		const url = new URL(
+			(await settings.get('featuredProjectEndpoint')) ||
+				'https://assets.balena.io/etcher-featured/index.html',
+		);
+		url.searchParams.append('borderRight', 'false');
+		url.searchParams.append('darkBackground', 'true');
+		return url.toString();
+	}
+
+	public async componentDidMount() {
+		observe(() => {
+			this.setState(this.stateHelper());
 		});
-	}, []);
+		this.setState({ featuredProjectURL: await this.getFeaturedProjectURL() });
+	}

-	const setWebviewShowing = (isShowing: boolean) => {
-		setIsWebviewShowing(isShowing);
-		store.dispatch({
-			type: 'SET_WEBVIEW_SHOWING_STATUS',
-			data: Boolean(isShowing),
-		});
-	};
-
-	const isFlashing = flashState.isFlashing();
-	const shouldDriveStepBeDisabled = !selectionState.hasImage();
-	const shouldFlashStepBeDisabled =
-		!selectionState.hasDrive() || shouldDriveStepBeDisabled;
-	const hasDrive = selectionState.hasDrive();
-	const imageLogo = selectionState.getImageLogo();
-	const imageSize = bytesToClosestUnit(selectionState.getImageSize());
-	const imageName = middleEllipsis(getImageBasename(selectionState), 16);
-	const driveTitle = middleEllipsis(getDrivesTitle(selectionState), 16);
-	const shouldShowFlashingInfos = isFlashing && isWebviewShowing;
-	const lastFlashErrorCode = flashState.getLastFlashErrorCode;
-	const progressMessage = messages.progress;
-
-	return (
-		<ThemedProvider style={{ height: '100%' }}>
-			<header
-				id="app-header"
-				style={{
-					width: '100%',
-					padding: '13px 14px',
-					textAlign: 'center',
-				}}
+	private renderMain() {
+		const state = flashState.getFlashState();
+		const shouldDriveStepBeDisabled = !this.state.hasImage;
+		const shouldFlashStepBeDisabled =
+			!this.state.hasImage || !this.state.hasDrive;
+		const notFlashingOrSplitView =
+			!this.state.isFlashing || !this.state.isWebviewShowing;
+		return (
+			<Flex
+				m={`110px ${this.state.isWebviewShowing ? 35 : 55}px`}
+				justifyContent="space-between"
 			>
-				<span
-					style={{
-						cursor: 'pointer',
-					}}
-					onClick={() =>
-						openExternal('https://www.balena.io/etcher?ref=etcher_footer')
-					}
-					tabIndex={100}
-				>
-					<SvgIcon
-						paths={['../../assets/etcher.svg']}
-						width="123px"
-						height="22px"
-					></SvgIcon>
-				</span>
-
-				<span
-					style={{
-						float: 'right',
-						position: 'absolute',
-						right: 0,
-					}}
-				>
-					<Button
-						icon={<FontAwesomeIcon icon={faCog} />}
-						color={colors.secondary.background}
-						fontSize={24}
-						style={{ width: '30px' }}
-						plain
-						onClick={() => setHideSettings(false)}
-						tabIndex={5}
-					/>
-					{!settings.get('disableExternalLinks') && (
-						<Button
-							icon={<FontAwesomeIcon icon={faQuestionCircle} />}
-							color={colors.secondary.background}
-							fontSize={24}
-							style={{ width: '30px' }}
-							plain
-							onClick={() =>
-								openExternal(
-									selectionState.getImageSupportUrl() || DEFAULT_SUPPORT_URL,
-								)
-							}
-							tabIndex={5}
+				{notFlashingOrSplitView && (
+					<>
+						<SourceSelector flashing={this.state.isFlashing} />
+						<Flex>
+							<StepBorder disabled={shouldDriveStepBeDisabled} left />
+						</Flex>
+						<TargetSelector
+							disabled={shouldDriveStepBeDisabled}
+							hasDrive={this.state.hasDrive}
+							flashing={this.state.isFlashing}
 						/>
-					)}
-				</span>
-			</header>
-			{hideSettings ? null : (
-				<SettingsModal
-					toggleModal={(value: boolean) => {
-						setHideSettings(!value);
-					}}
-				/>
-			)}
-
-			<div className="page-main row around-xs" style={{ margin: '110px 50px' }}>
-				<div className="col-xs">
-					<ImageSelector flashing={isFlashing} />
-				</div>
-
-				<div className="col-xs">
-					<DriveSelector
-						webviewShowing={isWebviewShowing}
-						disabled={shouldDriveStepBeDisabled}
-						nextStepDisabled={shouldFlashStepBeDisabled}
-						hasDrive={hasDrive}
-						flashing={isFlashing}
-					/>
-				</div>
-
-				{isFlashing && (
-					<div
-						className={`featured-project ${
-							isFlashing && isWebviewShowing ? 'fp-visible' : ''
-						}`}
-					>
-						<FeaturedProject onWebviewShow={setWebviewShowing} />
-					</div>
+						<Flex>
+							<StepBorder disabled={shouldFlashStepBeDisabled} right />
+						</Flex>
+					</>
 				)}

-				<div>
-					<ReducedFlashingInfos
-						imageLogo={imageLogo}
-						imageName={imageName}
-						imageSize={imageSize}
-						driveTitle={driveTitle}
-						shouldShow={shouldShowFlashingInfos}
+				{this.state.isFlashing && this.state.isWebviewShowing && (
+					<Flex
+						style={{
+							position: 'absolute',
+							top: 0,
+							left: 0,
+							width: '36.2vw',
+							height: '100vh',
+							zIndex: 1,
+							boxShadow: '0 2px 15px 0 rgba(0, 0, 0, 0.2)',
+						}}
+					>
+						<ReducedFlashingInfos
+							imageLogo={this.state.imageLogo}
+							imageName={this.state.imageName}
+							imageSize={
+								typeof this.state.imageSize === 'number'
+									? prettyBytes(this.state.imageSize)
+									: ''
+							}
+							driveTitle={this.state.driveTitle}
+							driveLabel={this.state.driveLabel}
+							style={{
+								position: 'absolute',
+								color: '#fff',
+								left: 35,
+								top: 72,
+							}}
+						/>
+					</Flex>
+				)}
+				{this.state.isFlashing && this.state.featuredProjectURL && (
+					<SafeWebview
+						src={this.state.featuredProjectURL}
+						onWebviewShow={(isWebviewShowing: boolean) => {
+							this.setState({ isWebviewShowing });
+						}}
+						style={{
+							position: 'absolute',
+							right: 0,
+							bottom: 0,
+							width: '63.8vw',
+							height: '100vh',
+						}}
 					/>
-				</div>
+				)}

-				<div className="col-xs">
-					<Flash
-						goToSuccess={() => $state.go('success')}
-						shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
-						lastFlashErrorCode={lastFlashErrorCode}
-						progressMessage={progressMessage}
+				<FlashStep
+					goToSuccess={() => this.setState({ current: 'success' })}
+					shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
+					isFlashing={this.state.isFlashing}
+					step={state.type}
+					percentage={state.percentage}
+					position={state.position}
+					failed={state.failed}
+					speed={state.speed}
+					eta={state.eta}
+					style={{ zIndex: 1 }}
+				/>
+			</Flex>
+		);
+	}
+
+	private renderSuccess() {
+		return (
+			<FinishPage
+				goToMain={() => {
+					flashState.resetState();
+					this.setState({ current: 'main' });
+				}}
+			/>
+		);
+	}
+
+	public render() {
+		return (
+			<ThemedProvider style={{ height: '100%', width: '100%' }}>
+				<Flex
+					justifyContent="space-between"
+					alignItems="center"
+					paddingTop="14px"
+					style={{
+						// Allow window to be dragged from header
+						// @ts-ignore
+						'-webkit-app-region': 'drag',
+						position: 'relative',
+						zIndex: 1,
+					}}
+				>
+					<Flex width="100%" />
+					<Flex width="100%" alignItems="center" justifyContent="center">
+						<EtcherSvg
+							width="123px"
+							height="22px"
+							style={{
+								cursor: 'pointer',
+							}}
+							onClick={() =>
+								openExternal('https://www.balena.io/etcher?ref=etcher_footer')
+							}
+							tabIndex={100}
+						/>
+					</Flex>
+
+					<Flex width="100%" alignItems="center" justifyContent="flex-end">
+						<Icon
+							icon={<CogSvg height="1em" fill="currentColor" />}
+							plain
+							tabIndex={5}
+							onClick={() => this.setState({ hideSettings: false })}
+							style={{
+								// Make touch events click instead of dragging
+								'-webkit-app-region': 'no-drag',
+							}}
+						/>
+						{!settings.getSync('disableExternalLinks') && (
+							<Icon
+								icon={<QuestionCircleSvg height="1em" fill="currentColor" />}
+								onClick={() =>
+									openExternal(
+										selectionState.getImageSupportUrl() ||
+											'https://github.com/balena-io/etcher/blob/master/SUPPORT.md',
+									)
+								}
+								tabIndex={6}
+								style={{
+									// Make touch events click instead of dragging
+									'-webkit-app-region': 'no-drag',
+								}}
+							/>
+						)}
+					</Flex>
+				</Flex>
+				{this.state.hideSettings ? null : (
+					<SettingsModal
+						toggleModal={(value: boolean) => {
+							this.setState({ hideSettings: !value });
+						}}
 					/>
-				</div>
-			</div>
-		</ThemedProvider>
-	);
-};
+				)}
+				{this.state.current === 'main'
+					? this.renderMain()
+					: this.renderSuccess()}
+			</ThemedProvider>
+		);
+	}
+}

 export default MainPage;
--- a/lib/gui/app/pages/main/main.ts
+++ b/lib/gui/app/pages/main/main.ts
@@ -1,51 +0,0 @@
-/*
- * Copyright 2019 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict';
-
-/**
- * This page represents the application main page.
- *
- * @module Etcher.Pages.Main
- */
-
-import * as angular from 'angular';
-// @ts-ignore
-import * as angularRouter from 'angular-ui-router';
-import { react2angular } from 'react2angular';
-import MainPage from './MainPage';
-
-import { MODULE_NAME as flashAnother } from '../../components/flash-another';
-import { MODULE_NAME as flashResults } from '../../components/flash-results';
-import * as byteSize from '../../utils/byte-size/byte-size';
-
-export const MODULE_NAME = 'Etcher.Pages.Main';
-
-const Main = angular.module(MODULE_NAME, [
-	angularRouter,
-	flashAnother,
-	flashResults,
-	byteSize,
-]);
-
-Main.component('mainPage', react2angular(MainPage, [], ['$state']));
-
-Main.config(($stateProvider: any) => {
-	$stateProvider.state('main', {
-		url: '/main',
-		template: '<main-page style="width:100%"></main-page>',
-	});
-});
--- a/lib/gui/app/pages/main/styles/_main.scss
+++ b/lib/gui/app/pages/main/styles/_main.scss
@@ -1,201 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-img[disabled] {
-  opacity: $disabled-opacity;
-}
-
-.page-main {
-  flex: 1;
-  align-self: center;
-  margin: 20px;
-}
-
-.page-main > .col-xs {
-  height: 165px;
-}
-
-.page-main .step-selection-text {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  color: $palette-theme-dark-foreground;
-}
-
-.page-main .text-disabled > span {
-  color: $palette-theme-dark-disabled-foreground;
-}
-
-.page-main .step-drive.text-warning {
-  color: $palette-theme-warning-background;
-}
-
-.page-main .relative {
-  position: relative;
-}
-
-.page-main .button-abort-write {
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  padding: 0;
-  font-size: 16px;
-  position: absolute;
-  right: -17px;
-  top: 30%;
-}
-
-.button-brick {
-  width: 200px;
-  height: 48px;
-  font-size: 16px;
-  font-weight: 300;
-}
-
-.page-main .step-tooltip {
-  display: block;
-  margin: -5px auto -20px;
-  color: $palette-theme-dark-disabled-foreground;
-  font-size: 10px;
-}
-
-.page-main .step-footer {
-  width: 100%;
-  color: $palette-theme-dark-disabled-foreground;
-  font-size: 10px;
-}
-
-.page-main p.step-footer {
-  margin-top: 9px;
-}
-
-.page-main .step-footer-split {
-  position: absolute;
-  top: 39px;
-  left: 28px;
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  justify-content: space-between;
-  width: $btn-min-width;
-}
-
-.page-main .button.step-footer {
-  font-size: 16px;
-  color: $palette-theme-primary-background;
-  border-radius: 0;
-  padding: 0;
-  width: 100%;
-  font-weight: 300;
-  height: 21px;
-}
-
-.page-main .step-drive.glyphicon {
-  margin-top: 1px;
-}
-
-.page-main div.step-fill,
-.page-main span.step-fill {
-  margin-top: 25px;
-}
-
-.page-main .step-drive.step-list {
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: $palette-theme-dark-disabled-foreground;
-    border-radius: 4px;
-  }
-}
-
-.page-main .glyphicon {
-  vertical-align: text-top;
-}
-
-.page-main .step-name {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 39px;
-  width: 100%;
-  font-weight: bold;
-  color: $palette-theme-primary-foreground;
-}
-
-.page-main .step-size {
-  color: $palette-theme-dark-disabled-foreground;
-  margin: 0 0 8px 0;
-  font-size: 16px;
-  line-height: 1.5;
-  height: 21px;
-  width: 100%;
-}
-
-.page-main .step-list {
-  height: 80px;
-  margin: 15px;
-  overflow-y: auto;
-  color: $palette-theme-dark-disabled-foreground;
-}
-
-.target-status-wrap {
-  display: flex;
-  position: absolute;
-  top: 62px;
-  flex-direction: column;
-  margin: 8px 28px;
-  align-items: flex-start;
-}
-
-.target-status-line {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 9px;
-
-  > .target-status-dot {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-
-  &.target-status-successful > .target-status-dot {
-    background-color: $palette-theme-success-background;
-  }
-  &.target-status-failed > .target-status-dot {
-    background-color: $palette-theme-danger-background;
-  }
-
-  > .target-status-quantity {
-    color: white;
-    font-weight: bold;
-  }
-
-  > .target-status-message {
-    color: gray;
-    margin-left: 10px;
-  }
-}
-
-.tooltip-inner {
-  white-space: pre-line;
-}
-
-.space-vertical-large {
-  position: relative;
-}
--- a/lib/gui/app/scss/components/_button.scss
+++ b/lib/gui/app/scss/components/_button.scss
@@ -1,99 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.button {
-  @extend .btn;
-
-  padding: 10px;
-  padding-top: 11px;
-
-  border-radius: 24px;
-  border: 0;
-
-  letter-spacing: .5px;
-  outline: none;
-
-  position: relative;
-
-  > .glyphicon {
-    top: 0;
-    width: 24px;
-    height: 24px;
-  }
-
-  &.button-primary{
-    width: 200px;
-    height: 48px;
-  }
-
-  &[disabled] {
-    @extend .button-no-hover;
-    background-color: $palette-theme-dark-disabled-background;
-    color: $palette-theme-dark-disabled-foreground;
-    opacity: 1;
-  }
-}
-
-.button-link {
-  @extend .btn-link;
-}
-
-.button-block {
-  display: block;
-  width: 100%;
-}
-
-.button-no-hover {
-  pointer-events: none;
-}
-
-// Create map from Bootstrap `.btn` type styles
-// since its not possible to perform variable
-// interpolation (e.g: `$btn-${type}-bg`).
-// See https://github.com/sass/sass/issues/132
-$button-types-styles: (
-  default: (
-    bg: $palette-theme-default-background,
-    color: $palette-theme-default-foreground
-  ),
-  primary: (
-    bg: $palette-theme-primary-background,
-    color: $palette-theme-primary-foreground
-  ),
-  danger: (
-    bg: $palette-theme-danger-background,
-    color: $palette-theme-danger-foreground
-  ),
-  warning: (
-    bg: $palette-theme-warning-background,
-    color: $palette-theme-danger-foreground
-  )
-);
-
-@each $style in map-keys($button-types-styles) {
-  $button-styles: map-get($button-types-styles, $style);
-
-  .button-#{$style} {
-    background-color: map-get($button-styles, "bg");
-    color: map-get($button-styles, "color");
-  }
-
-  .button-#{$style}:focus,
-  .button-#{$style}:hover {
-    background-color: darken(map-get($button-styles, "bg"), 10%);
-    color: map-get($button-styles, "color");
-  }
-}
--- a/lib/gui/app/scss/components/_tick.scss
+++ b/lib/gui/app/scss/components/_tick.scss
@@ -1,47 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.tick {
-  @extend .glyphicon;
-
-  display: inline-block;
-  border-radius: 50%;
-  padding: 3px;
-  font-size: 18px;
-  border: 2px solid;
-
-  &[disabled] {
-    color: $palette-theme-dark-soft-foreground;
-    border-color: $palette-theme-dark-soft-foreground;
-    background-color: transparent;
-  }
-}
-
-.tick--success {
-  @extend .glyphicon-ok;
-
-  color: $palette-theme-success-foreground;
-  background-color: $palette-theme-success-background;
-  border-color: $palette-theme-success-background;
-}
-
-.tick--error {
-  @extend .glyphicon-remove;
-
-  color: $palette-theme-danger-foreground;
-  background-color: $palette-theme-danger-background;
-  border-color: $palette-theme-danger-background;
-}
--- a/lib/gui/app/scss/main.scss
+++ b/lib/gui/app/scss/main.scss
@@ -1,213 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-$icon-font-path: "../../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
-$font-size-base: 16px;
-$cursor-disabled: initial;
-$link-hover-decoration: none;
-$btn-min-width: 170px;
-$link-color: #ddd;
-$disabled-opacity: 0.2;
-
-@import "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
-@import "./modules/theme";
-@import "./modules/bootstrap";
-@import "./modules/space";
-@import "./components/label";
-@import "./components/badge";
-@import "./components/caption";
-@import "./components/button";
-@import "./components/tick";
-@import "../components/modal/styles/modal";
-@import "../components/drive-selector/styles/drive-selector";
-@import "../components/svg-icon/styles/svg-icon";
-@import "../pages/main/styles/main";
-@import "../pages/finish/styles/finish";
-
-$fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free-webfonts/webfonts";
-
-@import "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fontawesome";
-@import "../../../../node_modules/@fortawesome/fontawesome-free-webfonts/scss/fa-solid";
-
-@font-face {
-  font-family: 'Nunito';
-  src: url('Nunito-Regular.eot');
-  src: url('./fonts/Nunito-Regular.eot?#iefix') format('embedded-opentype'),
-      url('./fonts/Nunito-Regular.woff2') format('woff2'),
-      url('./fonts/Nunito-Regular.woff') format('woff'),
-      url('./fonts/Nunito-Regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-  font-display: block;
-}
-
-@font-face {
-  font-family: 'Nunito';
-  src: url('Nunito-Bold.eot');
-  src: url('./fonts/Nunito-Bold.eot?#iefix') format('embedded-opentype'),
-      url('./fonts/Nunito-Bold.woff2') format('woff2'),
-      url('./fonts/Nunito-Bold.woff') format('woff'),
-      url('./fonts/Nunito-Bold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-  font-display: block;
-}
-
-@font-face {
-  font-family: 'Nunito';
-  src: url('Nunito-Light.eot');
-  src: url('./fonts/Nunito-Light.eot?#iefix') format('embedded-opentype'),
-      url('./fonts/Nunito-Light.woff2') format('woff2'),
-      url('./fonts/Nunito-Light.woff') format('woff'),
-      url('./fonts/Nunito-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: block;
-}
-
-@font-face {
-  font-family: 'CircularStd';
-  src: url('./fonts/CircularStd-Bold.eot');
-  src: url('./fonts/CircularStd-Bold.eot?#iefix') format('embedded-opentype'),
-      url('./fonts/CircularStd-Bold.woff2') format('woff2'),
-      url('./fonts/CircularStd-Bold.woff') format('woff'),
-      url('./fonts/CircularStd-Bold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-  font-display: block;
-}
-
-@font-face {
-  font-family: 'CircularStd';
-  src: url('./fonts/CircularStd-Book.eot');
-  src: url('./fonts/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
-      url('./fonts/CircularStd-Book.woff2') format('woff2'),
-      url('./fonts/CircularStd-Book.woff') format('woff'),
-      url('./fonts/CircularStd-Book.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-  font-display: block;
-}
-
-@font-face {
-  font-family: 'CircularStd';
-  src: url('./fonts/CircularStd-Medium.eot');
-  src: url('./fonts/CircularStd-Medium.eot?#iefix') format('embedded-opentype'),
-      url('./fonts/CircularStd-Medium.woff2') format('woff2'),
-      url('./fonts/CircularStd-Medium.woff') format('woff'),
-      url('./fonts/CircularStd-Medium.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: block;
-}
-
-.circular {
-  font-family: 'CircularStd';
-  font-weight: 500;
-}
-.nunito {
-  font-family: 'Nunito';
-}
-
-body {
-  letter-spacing: 0.5px;
-  display: flex;
-  flex-direction: column;
-  font-family: 'CircularStd';
-
-  > header {
-    flex: 0 0 auto;
-  }
-
-  > main {
-    flex: 1;
-    display: flex;
-  }
-
-  > footer {
-    flex: 0 0 auto;
-  }
-}
-
-.section-footer-main {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-
-  color: $palette-theme-dark-disabled-foreground;
-  margin: 0 30px 16px 30px;
-  padding-top: 15px;
-  border-top: 2px solid $palette-theme-dark-soft-background;
-  text-align: center;
-
-  // Override default column padding
-  // set by flexboxgrid.
-  .col-xs {
-    padding: 0;
-  }
-
-  .svg-icon {
-    margin: 0 13px;
-  }
-
-  .footer-right {
-    font-size: 10px;
-    position: absolute;
-    right: 0;
-  }
-}
-
-.section-loader {
-  webview {
-    flex: 0 1;
-    height: 0;
-    width: 0;
-  }
-
-  &.isFinish webview {
-    flex: initial;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 320px;
-  }
-}
-
-.wrapper {
-  height: 100%;
-  margin: 20px 50px;
-}
-
-.featured-project {
-  webview {
-    flex: 0 1;
-    height: 0;
-    width: 0;
-  }
-
-  &.fp-visible webview {
-    width: 480px;
-    height: 360px;
-    position: absolute;
-    z-index: 1;
-    left: 30px;
-    top: 45px;
-    border-radius: 7px;
-    overflow: hidden;
-  }
-}
--- a/lib/gui/app/scss/modules/_bootstrap.scss
+++ b/lib/gui/app/scss/modules/_bootstrap.scss
@@ -1,42 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// This file is meant to hold Bootstrap modifications
-// that don't qualify as separate UI components.
-
-// Prevent white flash when running application
-html {
-  background-color: $palette-theme-dark-background;
-}
-
-body {
-  background-color: $palette-theme-dark-background;
-}
-
-// Fix slight checkbox vertical alignment issue
-.checkbox input[type="checkbox"] {
-  position: initial;
-  margin-right: 2px;
-}
-
-[uib-tooltip] {
-  cursor: default;
-}
-
-.tooltip {
-  word-wrap: break-word;
-}
-
--- a/lib/gui/app/scss/modules/_space.scss
+++ b/lib/gui/app/scss/modules/_space.scss
@@ -1,55 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-$spacing-large: 30px;
-$spacing-medium: 15px;
-$spacing-small: 10px;
-$spacing-tiny: 5px;
-
-.space-medium {
-  margin: $spacing-medium;
-}
-
-.space-vertical-medium {
-  margin-top: $spacing-medium;
-  margin-bottom: $spacing-medium;
-}
-
-.space-vertical-small {
-  margin-top: $spacing-small;
-  margin-bottom: $spacing-small;
-}
-
-.space-top-large {
-  margin-top: $spacing-large;
-}
-
-.space-vertical-large {
-  margin-top: $spacing-large;
-  margin-bottom: $spacing-large;
-}
-
-.space-bottom-medium {
-  margin-bottom: $spacing-medium;
-}
-
-.space-bottom-large {
-  margin-bottom: $spacing-large;
-}
-
-.space-right-tiny {
-  margin-right: $spacing-tiny;
-}
--- a/lib/gui/app/scss/modules/_theme.scss
+++ b/lib/gui/app/scss/modules/_theme.scss
@@ -1,37 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-$palette-theme-dark-foreground: #fff;
-$palette-theme-dark-background: #4d5057;
-$palette-theme-light-foreground: #666;
-$palette-theme-light-background: #fff;
-$palette-theme-dark-soft-foreground: #ddd;
-$palette-theme-dark-soft-background: #64686a;
-$palette-theme-light-soft-foreground: #b3b3b3;
-$palette-theme-dark-disabled-background: #3a3c41;
-$palette-theme-dark-disabled-foreground: #787c7f;
-$palette-theme-light-disabled-background: #d5d5d5;
-$palette-theme-light-disabled-foreground: #787c7f;
-$palette-theme-default-background: #ececec;
-$palette-theme-default-foreground: #b3b3b3;
-$palette-theme-primary-background: #2297de;
-$palette-theme-primary-foreground: #fff;
-$palette-theme-warning-background: #ff912f;
-$palette-theme-warning-foreground: #fff;
-$palette-theme-danger-background: #d9534f;
-$palette-theme-danger-foreground: #fff;
-$palette-theme-success-background: #5fb835;
-$palette-theme-success-foreground: #fff;
--- a/lib/gui/app/styled-components.js
+++ b/lib/gui/app/styled-components.js
@@ -1,123 +0,0 @@
-/*
- * Copyright 2018 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-// eslint-disable-next-line no-unused-vars
-const React = require('react')
-const { default: styled } = require('styled-components')
-const {
-  Button,
-  Txt,
-  Flex,
-  Provider
-} = require('rendition')
-const {
-  space
-} = require('styled-system')
-const { colors } = require('./theme')
-
-const theme = {
-  // TODO: Standardize how the colors are specified to match with rendition's format.
-  customColors: colors,
-  button: {
-    border: {
-      width: '0',
-      radius: '24px'
-    },
-    disabled: {
-      opacity: 1
-    },
-    extend: () => `
-      width: 200px;
-      height: 48px;
-      font-size: 16px;
-
-      &:disabled {
-        background-color: ${colors.dark.disabled.background};
-        color: ${colors.dark.disabled.foreground};
-        opacity: 1;
-
-        &:hover {
-          background-color: ${colors.dark.disabled.background};
-          color: ${colors.dark.disabled.foreground};
-        }
-      }
-    `
-  }
-}
-
-exports.ThemedProvider = (props) => (
-  <Provider theme={theme} {...props}>
-  </Provider>
-)
-
-const BaseButton = styled(Button) `
-  height: 48px;
-`
-
-exports.BaseButton = BaseButton
-
-exports.StepButton = (props) => (
-  <BaseButton primary {...props}>
-  </BaseButton>
-)
-
-exports.ChangeButton = styled(BaseButton) `
-  color: ${colors.primary.background};
-  padding: 0;
-  width: 100%;
-  height: auto;
-
-  &:enabled {
-    &:hover, &:focus, &:active {
-      color: #8f9297;
-    }
-  }
-
-  ${space}
-`
-exports.StepNameButton = styled(BaseButton) `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  font-weight: bold;
-  color: ${colors.dark.foreground};
-
-  &:enabled {
-    &:hover, &:focus, &:active{
-      color: #8f9297;
-    }
-  }
-`
-exports.StepSelection = styled(Flex) `
-  flex-wrap: wrap;
-  justify-content: center;
-`
-exports.Footer = styled(Txt) `
-  margin-top: 10px;
-  color: ${colors.dark.disabled.foreground};
-  font-size: 10px;
-`
-exports.Underline = styled(Txt.span) `
-  border-bottom: 1px dotted;
-  padding-bottom: 2px;
-`
-exports.DetailsText = styled(Txt.p) `
-  color: ${colors.dark.disabled.foreground};
-  margin-bottom: 0;
-`
--- a/lib/gui/app/styled-components.tsx
+++ b/lib/gui/app/styled-components.tsx
@@ -14,76 +14,78 @@
 * limitations under the License.
 */

+import * as _ from 'lodash';
 import * as React from 'react';
-import { Button, Flex, Provider, Txt } from 'rendition';
-import styled from 'styled-components';
-import { space } from 'styled-system';
+import {
+	Alert as AlertBase,
+	Flex,
+	FlexProps,
+	Button,
+	ButtonProps,
+	Modal as ModalBase,
+	Provider,
+	Table as BaseTable,
+	TableProps as BaseTableProps,
+	Txt,
+} from 'rendition';
+import styled, { css } from 'styled-components';

-import { colors } from './theme';
-
-const theme = {
-	// TODO: Standardize how the colors are specified to match with rendition's format.
-	customColors: colors,
-	button: {
-		border: {
-			width: '0',
-			radius: '24px',
-		},
-		disabled: {
-			opacity: 1,
-		},
-		extend: () => `
-      width: 200px;
-      height: 48px;
-      font-size: 16px;
-
-      &:disabled {
-        background-color: ${colors.dark.disabled.background};
-        color: ${colors.dark.disabled.foreground};
-        opacity: 1;
-
-        &:hover {
-          background-color: ${colors.dark.disabled.background};
-          color: ${colors.dark.disabled.foreground};
-        }
-      }
-    `,
-	},
-};
+import { colors, theme } from './theme';

 export const ThemedProvider = (props: any) => (
 	<Provider theme={theme} {...props}></Provider>
 );

 export const BaseButton = styled(Button)`
+	width: 200px;
 	height: 48px;
+	font-size: 16px;
 `;

-export const StepButton = (props: any) => (
-	<BaseButton primary {...props}></BaseButton>
-);
+export const IconButton = styled((props) => <Button plain {...props} />)`
+	&&& {
+		width: 24px;
+		height: 24px;
+		font-size: 24px;
+		color: #fff;

-export const ChangeButton = styled(BaseButton)`
-	color: ${colors.primary.background};
-	padding: 0;
-	width: 100%;
-	height: auto;
-
-	&:enabled {
-		&:hover,
-		&:focus,
-		&:active {
-			color: #8f9297;
+		> svg {
+			font-size: 1em;
 		}
 	}
-	${space}
 `;
+
+export const StepButton = styled((props: ButtonProps) => (
+	<BaseButton {...props}></BaseButton>
+))`
+	color: #ffffff;
+	font-size: 14px;
+`;
+
+export const ChangeButton = styled(Button)`
+	&& {
+		border-radius: 24px;
+		color: ${colors.primary.background};
+		padding: 0;
+		height: 18px;
+		font-size: 14px;
+
+		&:enabled {
+			&:hover,
+			&:focus,
+			&:active {
+				color: #8f9297;
+			}
+		}
+	}
+`;
+
 export const StepNameButton = styled(BaseButton)`
-	display: flex;
+	display: inline-flex;
 	justify-content: center;
 	align-items: center;
 	width: 100%;
-	font-weight: bold;
+	font-weight: normal;
 	color: ${colors.dark.foreground};

 	&:enabled {
@@ -94,20 +96,247 @@ export const StepNameButton = styled(BaseButton)`
 		}
 	}
 `;
-export const StepSelection = styled(Flex)`
-	flex-wrap: wrap;
-	justify-content: center;
-`;
+
 export const Footer = styled(Txt)`
 	margin-top: 10px;
 	color: ${colors.dark.disabled.foreground};
 	font-size: 10px;
 `;
-export const Underline = styled(Txt.span)`
-	border-bottom: 1px dotted;
-	padding-bottom: 2px;
+
+export const DetailsText = (props: FlexProps) => (
+	<Flex
+		alignItems="center"
+		color={colors.dark.disabled.foreground}
+		{...props}
+	/>
+);
+
+const modalFooterShadowCss = css`
+	overflow: auto;
+	background: 0, linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, 0,
+		linear-gradient(rgba(255, 255, 255, 0), rgba(221, 225, 240, 0.5) 70%) 0 100%;
+	background-repeat: no-repeat;
+	background-size: 100% 40px, 100% 40px, 100% 8px, 100% 8px;
+
+	background-repeat: no-repeat;
+	background-color: white;
+	background-size: 100% 40px, 100% 40px, 100% 8px, 100% 8px;
+	background-attachment: local, local, scroll, scroll;
 `;
-export const DetailsText = styled(Txt.p)`
-	color: ${colors.dark.disabled.foreground};
-	margin-bottom: 0;
+
+export const Modal = styled(({ style, children, ...props }) => {
+	return (
+		<Provider
+			theme={_.merge({}, theme, {
+				header: {
+					height: '50px',
+				},
+				layer: {
+					extend: () => `
+						${theme.layer.extend()}
+
+						> div:last-child {
+							top: 0;
+						}
+					`,
+				},
+			})}
+		>
+			<ModalBase
+				position="top"
+				width="97vw"
+				cancelButtonProps={{
+					style: {
+						marginRight: '20px',
+						border: 'solid 1px #2a506f',
+					},
+				}}
+				style={{
+					height: '87.5vh',
+					...style,
+				}}
+				{...props}
+			>
+				<ScrollableFlex flexDirection="column" width="100%" height="90%">
+					{...children}
+				</ScrollableFlex>
+			</ModalBase>
+		</Provider>
+	);
+})`
+	> div {
+		padding: 0;
+		height: 100%;
+
+		> div:first-child {
+			height: 81%;
+			padding: 24px 30px 0;
+		}
+
+		> h3 {
+			margin: 0;
+			padding: 24px 30px 0;
+			height: 14.3%;
+		}
+
+		> div:first-child {
+			height: 81%;
+			padding: 24px 30px 0;
+		}
+
+		> div:nth-child(2) {
+			height: 61%;
+			padding: 0 30px;
+			${modalFooterShadowCss}
+		}
+
+		> div:last-child {
+			margin: 0;
+			flex-direction: ${(props) =>
+				props.reverseFooterButtons ? 'row-reverse' : 'row'};
+			border-radius: 0 0 7px 7px;
+			height: 80px;
+			background-color: #fff;
+			justify-content: center;
+			width: 100%;
+		}
+
+		::-webkit-scrollbar {
+			display: none;
+		}
+	}
 `;
+
+export const ScrollableFlex = styled(Flex)`
+	overflow: auto;
+
+	::-webkit-scrollbar {
+		display: none;
+	}
+
+	> div > div {
+		/* This is required for the sticky table header in TargetsTable */
+		overflow-x: visible;
+	}
+`;
+
+export const Alert = styled((props) => (
+	<AlertBase warning emphasized {...props}></AlertBase>
+))`
+	position: fixed;
+	top: -40px;
+	left: 50%;
+	transform: translate(-50%, 0px);
+	height: 30px;
+	min-width: 50%;
+	padding: 0px;
+	justify-content: center;
+	align-items: center;
+	font-size: 14px;
+	background-color: #fca321;
+	text-align: center;
+
+	* {
+		color: #ffffff;
+	}
+
+	> div:first-child {
+		display: none;
+	}
+`;
+
+export interface GenericTableProps<T> extends BaseTableProps<T> {
+	refFn: (t: BaseTable<T>) => void;
+	data: T[];
+	checkedRowsNumber?: number;
+	multipleSelection: boolean;
+	showWarnings?: boolean;
+}
+
+const GenericTable: <T>(
+	props: GenericTableProps<T>,
+) => React.ReactElement<GenericTableProps<T>> = <T extends {}>({
+	refFn,
+	...props
+}: GenericTableProps<T>) => (
+	<div>
+		<BaseTable<T> ref={refFn} {...props} />
+	</div>
+);
+
+function StyledTable<T>() {
+	return styled((props: GenericTableProps<T>) => (
+		<GenericTable<T> {...props} />
+	))`
+		[data-display='table-head']
+			> [data-display='table-row']
+			> [data-display='table-cell'] {
+			position: sticky;
+			background-color: #f8f9fd;
+			top: 0;
+			z-index: 1;
+
+			input[type='checkbox'] + div {
+				display: ${(props) => (props.multipleSelection ? 'flex' : 'none')};
+
+				${(props) =>
+					props.multipleSelection &&
+					props.checkedRowsNumber !== 0 &&
+					props.checkedRowsNumber !== props.data.length
+						? `
+						font-weight: 600;
+						color: ${colors.primary.foreground};
+						background: ${colors.primary.background};
+
+						::after {
+							content: '–';
+						}
+						`
+						: ''}
+				}
+			}
+		}
+
+		[data-display='table-head'] > [data-display='table-row'],
+		[data-display='table-body'] > [data-display='table-row'] {
+			> [data-display='table-cell']:first-child {
+				padding-left: 15px;
+				width: 6%;
+			}
+
+			> [data-display='table-cell']:last-child {
+				padding-right: 0;
+			}
+		}
+
+		[data-display='table-body'] > [data-display='table-row'] {
+			&:nth-of-type(2n) {
+				background: transparent;
+			}
+
+			&[data-highlight='true'] {
+				&.system {
+					background-color: ${(props) => (props.showWarnings ? '#fff5e6' : '#e8f5fc')};
+				}
+
+				> [data-display='table-cell']:first-child {
+					box-shadow: none;
+				}
+			}
+		}
+
+		&& [data-display='table-row'] > [data-display='table-cell'] {
+			padding: 6px 8px;
+			color: #2a506f;
+		}
+
+		input[type='checkbox'] + div {
+			border-radius: ${(props) => (props.multipleSelection ? '4px' : '50%')};
+		}
+	`;
+}
+
+export const Table = <T extends {}>(props: GenericTableProps<T>) => {
+	const TypedStyledFunctional = StyledTable<T>();
+	return <TypedStyledFunctional {...props} />;
+};
--- a/lib/gui/app/theme.js
+++ b/lib/gui/app/theme.js
@@ -1,71 +0,0 @@
-/*
- * Copyright 2018 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License"),
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-exports.colors = {
-  dark: {
-    foreground: '#fff',
-    background: '#4d5057',
-    soft: {
-      foreground: '#ddd',
-      background: '#64686a'
-    },
-    disabled: {
-      foreground: '#787c7f',
-      background: '#3a3c41'
-    }
-  },
-  light: {
-    foreground: '#666',
-    background: '#fff',
-    soft: {
-      foreground: '#b3b3b3'
-    },
-    disabled: {
-      foreground: '#787c7f',
-      background: '#d5d5d5'
-    }
-  },
-  default: {
-    foreground: '#b3b3b3',
-    background: '#ececec'
-  },
-  primary: {
-    foreground: '#fff',
-    background: '#2297de'
-  },
-  secondary: {
-    foreground: '#000',
-    background: '#ddd'
-  },
-  warning: {
-    foreground: '#fff',
-    background: '#fca321'
-  },
-  danger: {
-    foreground: '#fff',
-    background: '#d9534f'
-  },
-  success: {
-    foreground: '#fff',
-    background: '#5fb835'
-  }
-}
-
-exports.consts = {
-  btnMaxWidth: '170px'
-}
--- a/lib/gui/app/theme.ts
+++ b/lib/gui/app/theme.ts
@@ -0,0 +1,121 @@
+/*
+ * Copyright 2018 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"),
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as _ from 'lodash';
+import { Theme } from 'rendition';
+
+export const colors = {
+	dark: {
+		foreground: '#fff',
+		background: '#4d5057',
+		soft: {
+			foreground: '#ddd',
+			background: '#64686a',
+		},
+		disabled: {
+			foreground: '#787c7f',
+			background: '#3a3c41',
+		},
+	},
+	light: {
+		foreground: '#666',
+		background: '#fff',
+		soft: {
+			foreground: '#b3b3b3',
+		},
+		disabled: {
+			foreground: '#787c7f',
+			background: '#d5d5d5',
+		},
+	},
+	default: {
+		foreground: '#b3b3b3',
+		background: '#ececec',
+	},
+	primary: {
+		foreground: '#fff',
+		background: '#00aeef',
+	},
+	secondary: {
+		foreground: '#000',
+		background: '#ddd',
+		main: '#fff',
+	},
+	warning: {
+		foreground: '#fff',
+		background: '#fca321',
+	},
+	danger: {
+		foreground: '#fff',
+		background: '#d9534f',
+	},
+	success: {
+		foreground: '#fff',
+		background: '#5fb835',
+	},
+};
+
+const font = 'SourceSansPro';
+
+export const theme = _.merge({}, Theme, {
+	font,
+	global: {
+		font: {
+			family: font,
+			size: 16,
+		},
+		text: {
+			medium: {
+				size: 16,
+			},
+		},
+	},
+	button: {
+		border: {
+			width: '0',
+			radius: '24px',
+		},
+		disabled: {
+			opacity: 1,
+		},
+		extend: () => `
+			width: 200px;
+			font-size: 16px;
+
+			&& {
+				height: 48px;
+			}
+
+			:disabled {
+				background-color: ${colors.dark.disabled.background};
+				color: ${colors.dark.disabled.foreground};
+				opacity: 1;
+
+				:hover {
+					background-color: ${colors.dark.disabled.background};
+					color: ${colors.dark.disabled.foreground};
+				}
+			}
+		`,
+	},
+	layer: {
+		extend: () => `
+			> div:first-child {
+				background-color: transparent;
+			}
+		`,
+	},
+});
--- a/Show More
+++ b/Show More