Feat: Update UI to IOTA 2.0 DevNet (#27)

* wip

* Fix issues

* add output type filter

* wip

* wip

* update electron

* update node

* replace remote module

* wip

* wip

* clean up electron.js

* wip

* Fix bug

* wip

* integrate asset info fetching

* clean up comments

* disable logging

* Feat update lib (#17)

* wip

* Fix issues

* add output type filter

* wip

* wip

* update electron

* update node

* replace remote module

* wip

* wip

* clean up electron.js

* Fix bug

* clean up comments

* disable logging

* fix build (#20)

* update styles on main screen

* update h2 color and app bg color

* fix apiRegistryClient unhandled exception

* Build new homepage and confirmation page

* update primary and secondary buttons
	* responsive layout
	* remove buttons hover and focus

* animate drops in landing

* Add Maximize / minimize features

* does every window button need to be wrapped in an ElectronHelper
component?

* Update inputs background

* add hexagon to landing page and tweka responsive from mobile to 4k

* Set API and API ASSET REGISTRY endpoints

* Check is Electron just once on window buttons

* prevent image from being dragged

* Improve landing page responsive styles

* Add manual-desktop workflow

* update homepage logo and header logo

* use new API endpoint

* Position & style landing page spinner and

* prevent homepage from showing after after settings or delete screens

* Revert "prevent homepage from showing after after settings or delete screens"

This reverts commit 6ac04fc.

* Check whether wallet has been loaded to show homepage or not

* Update Electron storage directory name

* tweak homepage styles

* Add missing brackets

* Hide api Registry Endpoint from Settings in production mode

* Tidy up code

* align Edit & Delete buttons horizontally in Assets card

* Swap Smybol - Name -Color assets position

* Truncate asset color string

* Fine tune homepage CSS

* remove webkit CSS from previous commit

* fix drop css

* check name & symbol length on asset create/update

* update workflows to name the files "nectar"

* Update readme to nectar

* Update naming to nectar

* Update version to v0.7.0

* Always display landing node notification message

* Improve wallet tables UI

* Small landing CSS retouch

* Update API endpoint

* remove commented code

* rebuild spinners

remove position attributes from Spinner component and set those in
parent divs

* avoid wallet centering and keep aligned to top

* Add missing img alts

* "show message on copy address"

* "Catch and display forbidden strings error"

* "improve copy to clipboard code"

* replace Nectar Wallet and nectar Wallet with Nectar DevNet Wallet

* Restart timer on every click to copy address to clipboard

* Rewrite Balance to Balances

* update nectar wallet to nectar devnet wallet

* clear interval on componentWillUnmount and avoid fullscreen variable for maximize window

* Centralize variables to avoid code duplication

* Rename all to IOTA 2.0 DevNet Wallet

* fix app names typos

* add missing colon

* update version

* Add macOS notarization script and config

* Remove manual action

* adding signature vars and steps

* Allow builds to be manually triggered

* Don't fail fast

* Fix working directory for AppImage signing

* Fix actions with new names

* fix actions

* update product name

* Add mac app icon

Co-authored-by: capossele <[email protected]>
Co-authored-by: Diego <[email protected]>
Co-authored-by: Rajiv Shah <[email protected]>
Co-authored-by: sadjy <[email protected]>

.github/workflows/desktop.yaml

@@ -8,13 +8,23 @@ on:
       - "src/**"
       - ".github/workflows/desktop.yaml"
       - "package.json"
+  workflow_dispatch:
+    inputs:
+      logLevel:
+        description: 'Log level'     
+        required: true
+        default: 'warning'
+      tags:
+        description: 'Test scenario tags' 
+
 jobs:
   build:
     #runs-on: ubuntu-18.04
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
         os: [ubuntu-18.04, macos-10.15, windows-2019]
+      fail-fast: false
 
     steps:
     - uses: actions/checkout@v2
@@ -31,16 +41,40 @@ jobs:
 
     - name: Packaging Electron app - Windows
       run: npm run package-win
+      env:
+        CSC_LINK: ${{ secrets.WIN_CERT_BASE64 }}
+        CSC_KEY_PASSWORD: ${{ secrets.WIN_CERT_PASSWORD }}
       if: matrix.os == 'windows-2019'
 
     - name: Packaging Electron app - MacOs
       run: npm run package-mac
+      env:
+        CSC_LINK: ${{ secrets.MAC_CERT_BASE64 }}
+        CSC_KEY_PASSWORD: ${{ secrets.MAC_CERT_PASSWORD }}
+        POLLEN_APPLE_ID: ${{ secrets.APPLE_ID }}
+        POLLEN_APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
       if: matrix.os == 'macos-10.15'
 
     - name: Packaging Electron app - Linux
       run: npm run package-linux
       if: matrix.os == 'ubuntu-18.04'
 
+    - name: Import GPG key (Linux)
+      run: |
+        echo "$GPG_PRIVATE_KEY" | base64 -d > /tmp/private.key && \
+        echo "$GPG_PASSPHRASE" | gpg --batch --yes --passphrase-fd 0 --import /tmp/private.key
+      env:
+        GPG_PRIVATE_KEY: ${{ secrets.GPG_PRIVATE_KEY }}
+        GPG_PASSPHRASE: ${{ secrets.GPG_PASSPHRASE }}
+      if: matrix.os == 'ubuntu-18.04'
+
+    - name: Sign AppImage (Linux)
+      run: echo $GPG_PASSPHRASE | gpg --pinentry-mode loopback --batch --passphrase-fd 0 --armor --detach-sign --default-key [email protected] iota-devnet-wallet-*.AppImage
+      working-directory: out
+      env:
+        GPG_PASSPHRASE: ${{ secrets.GPG_PASSPHRASE }}
+      if: matrix.os == 'ubuntu-18.04'
+
     - name: get version
       id: package-version
       uses: notiz-dev/github-action-json-property@release
@@ -50,19 +84,19 @@ jobs:
 
     - uses: actions/upload-artifact@v2
       with:
-        name: pollen-wallet-win-${{ steps.package-version.outputs.prop}}
-        path: out/pollen-wallet-${{ steps.package-version.outputs.prop}}.exe
+        name: iota-devnet-wallet-win-${{ steps.package-version.outputs.prop}}
+        path: out/iota-devnet-wallet-${{ steps.package-version.outputs.prop}}.exe
       if: matrix.os == 'windows-2019'
 
     - uses: actions/upload-artifact@v2
       with:
-        name: pollen-wallet-mac-${{ steps.package-version.outputs.prop}}
-        path: out/pollen-wallet-${{ steps.package-version.outputs.prop}}.dmg
+        name: iota-devnet-wallet-mac-${{ steps.package-version.outputs.prop}}
+        path: out/iota-devnet-wallet-${{ steps.package-version.outputs.prop}}.dmg
       if: matrix.os == 'macos-10.15'
 
     - uses: actions/upload-artifact@v2
       with:
-        name: pollen-wallet-linux-${{ steps.package-version.outputs.prop}}
+        name: iota-devnet-wallet-linux-${{ steps.package-version.outputs.prop}}
         path: |
-          out/pollen-wallet-${{ steps.package-version.outputs.prop}}.AppImage
+          out/iota-devnet-wallet-${{ steps.package-version.outputs.prop}}.AppImage
       if: matrix.os == 'ubuntu-18.04'

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.7.0
+
+Update UI to Nectar branding
+
 ## v0.6.2
 
 Add Asset Registry support

README.md

@@ -1,12 +1,10 @@
-# IOTA Pollen GUI Wallet
+# IOTA 2.0 DevNet GUI Wallet
 
-IOTA Pollen wallet GUI, a lightweight wallet for the test Pollen network.
+IOTA 2.0 DevNet GUI Wallet, a lightweight wallet for the IOTA 2.0 DevNet network.
 
-<span style="color:#bb0000">The wallet is configured by default to connect to a node running on your local machine. You must either run a local node or change the settings to connect to a remote node [See settings](#settings).</span>
+**Disclaimer** - This wallet is intended to demonstrate how to communicate with the IOTA 2.0 DevNet network, your seed is **NOT** stored securely.
 
-**Disclaimer** - This wallet is intended to demonstrate how to communicate with the Pollen network, your seed is **NOT** stored securely.
-
-![Pollen Wallet](images/pollen-wallet.png)
+![IOTA 2.0 DevNet Wallet](images/devnet-wallet.png)
 
 ## Building
 
@@ -37,6 +35,8 @@ npm run package-win
 npm run package-mac
 ```
 
+For local development, set the environment variable `MACOS_SKIP_NOTARIZATION=true` (or `MACOS_SKIP_NOTARISATION`).
+
 ### Linux
 
 ```shell
@@ -45,6 +45,6 @@ npm run package-linux
 
 ## Settings
 
-By default the application is configured to access a `GoShimmer` nodes API running on your local machine at `http://127.0.0.1:8080`. To make it communicate with another node you can change the endpoint in the settings page.
+By default the application is configured to access a `GoShimmer` nodes API at `http://nodes.nectar.iota.cafe`. To make it communicate with another node you can change the endpoint in the settings page.
 
-![Pollen Wallet](images/pollen-settings.png)
+![IOTA 2.0 DevNet Wallet](images/devnet-settings.png)

entitlements.mac.plist

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+	<true/>
+	<key>com.apple.security.files.user-selected.read-write</key>
+	<true/>
+</dict>
+</plist>

package.json

@@ -1,7 +1,7 @@
 {
-    "name": "pollen-wallet",
-    "description": "IOTA Pollen Wallet",
-    "version": "0.6.2",
+    "name": "iota-devnet-wallet",
+    "description": "IOTA 2.0 DevNet Wallet",
+    "version": "0.7.0",
     "author": "Martyn Janes <[email protected]>",
     "repository": {
         "type": "git",
@@ -58,6 +58,7 @@
         "cross-env": "^7.0.3",
         "electron": "^12.0.7",
         "electron-builder": "^22.11.4",
+        "electron-notarize": "^1.0.0",
         "husky": "^6.0.0",
         "node-sass": "^6.0.0",
         "sass-lint": "^1.13.1",
@@ -72,8 +73,8 @@
     "homepage": "./",
     "main": "./public/electron.js",
     "build": {
-        "productName": "IOTA Pollen Wallet",
-        "artifactName": "pollen-wallet-${version}.${ext}",
+        "productName": "IOTA DevNet Wallet",
+        "artifactName": "iota-devnet-wallet-${version}.${ext}",
         "copyright": "IOTA Foundation",
         "directories": {
             "output": "./out"
@@ -90,8 +91,23 @@
             "node_modules/blakejs/**/*.js"
         ],
         "appId": "org.iota.pollen-wallet",
+        "afterSign": "./scripts/notarize.macos.js",
         "win": {
             "icon": "./public/logo.png"
+        },
+        "mac": {
+            "entitlements": "./entitlements.mac.plist",
+            "entitlementsInherit": "./entitlements.mac.plist",
+            "hardenedRuntime": true,
+            "gatekeeperAssess": false,
+            "asarUnpack": [
+                "**/*.node"
+            ],
+            "icon": "./public/icon.icns"
+        },
+        "dmg": {
+            "title": "${productName}",
+            "sign": false
         }
     }
 }

public/electron.js

@@ -25,7 +25,7 @@ function createWindow() {
       height: mainWindowState.height,
       backgroundColor: '#f6f8fc',
       frame: false,
-      title: "Pollen Wallet",
+      title: "IOTA 2.0 DevNet Wallet",
       webPreferences: {
         nodeIntegration: true,
         contextIsolation: false,

public/index.html

@@ -6,12 +6,12 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <meta name="apple-mobile-web-app-title" content="Pollen Wallet" />
-    <meta name="application-name" content="Pollen Wallet" />
+    <meta name="apple-mobile-web-app-title" content="IOTA 2.0 DevNet Wallet" />
+    <meta name="application-name" content="IOTA 2.0 DevNet Wallet" />
     <meta name="msapplication-TileColor" content="#ffffff" />
     <meta name="theme-color" content="#ffffff" />
     <meta name="author" content="Martyn Janes">
-    <title>IOTA Pollen Wallet</title>
+    <title>IOTA 2.0 DevNet Wallet</title>
     <link href="https://webassets.iota.org/fonts/css/inter.css" rel="stylesheet" type="text/css" media="all">
     <link href="https://webassets.iota.org/fonts/css/metropolis.css" rel="stylesheet" type="text/css" media="all">
   </head>

scripts/notarize.macos.js

@@ -0,0 +1,27 @@
+const { notarize } = require('electron-notarize');
+const path = require('path');
+
+exports.default = async () => {
+    if (process.platform !== 'darwin' || process.env.MACOS_SKIP_NOTARIZATION || process.env.MACOS_SKIP_NOTARISATION) {
+        return true;
+    }
+
+    const APPLE_ID = process.env.POLLEN_APPLE_ID;
+    const APPLE_ID_PASSWORD = process.env.POLLEN_APPLE_ID_PASSWORD;
+
+    if (!APPLE_ID) {
+        throw Error('Notarization failed: Environment variable "POLLEN_APPLE_ID" is not defined');
+    }
+
+    if (!APPLE_ID_PASSWORD) {
+        throw Error('Notarization failed: Environment variable "POLLEN_APPLE_ID_PASSWORD" is not defined');
+    }
+
+    await notarize({
+        appBundleId: 'org.iota.pollen-wallet',
+        appPath: path.resolve(__dirname, '../out/mac/IOTA DevNet Wallet.app'),
+        appleId: APPLE_ID,
+        appleIdPassword: APPLE_ID_PASSWORD,
+        ascProvider: 'UG77RJKZHH',
+    });
+};