Allow PIN Entry for TREZOR One in App (#1971)

* Create popup window for TREZOR pin.

* Address PR feedback. Move pin template into its own file loaded via raw-loader.

* Fix PIN not unlocking

* Dont minify electron main code
This commit is contained in:
William O'Beirne 2018-06-25 15:27:27 -04:00 committed by Daniel Ternyak
parent 1ab0d819d0
commit 3074e50909
9 changed files with 342 additions and 54 deletions

View File

@ -12,3 +12,8 @@ declare module '*.png' {
const content: any;
export default content;
}
declare module '*.html' {
const content: string;
export default content;
}

View File

@ -2,7 +2,7 @@
// Types are only based off of what's mentioned in the API
// https://github.com/trezor/trezor.js/blob/master/API.md
declare module 'mycrypto-trezor.js' {
declare module 'trezor.js' {
import { EventEmitter } from 'events';
import { Transport, TrezorDeviceInfoWithSession as DeviceDescriptor } from 'trezor-link';

View File

@ -22,8 +22,7 @@
"classnames": "2.2.5",
"electron-updater": "2.21.10",
"ethereum-blockies-base64": "1.0.1",
"ethereumjs-abi":
"git://github.com/ethereumjs/ethereumjs-abi.git#09c3c48fd3bed143df7fa8f36f6f164205e23796",
"ethereumjs-abi": "git://github.com/ethereumjs/ethereumjs-abi.git#09c3c48fd3bed143df7fa8f36f6f164205e23796",
"ethereumjs-tx": "1.3.4",
"ethereumjs-util": "5.1.5",
"ethereumjs-wallet": "0.6.0",
@ -37,7 +36,6 @@
"moment-timezone": "0.5.14",
"mycrypto-eth-exists": "1.0.0",
"mycrypto-shepherd": "1.4.0",
"mycrypto-trezor.js": "6.17.5",
"normalizr": "3.2.4",
"qrcode": "1.2.0",
"qrcode.react": "0.8.0",
@ -60,6 +58,7 @@
"rskjs-util": "1.0.3",
"scryptsy": "2.0.0",
"semver": "5.5.0",
"trezor.js": "6.17.5",
"uuid": "3.2.1",
"wallet-address-validator": "0.1.6",
"whatwg-fetch": "2.0.3",
@ -120,12 +119,13 @@
"lint-staged": "7.0.4",
"mini-css-extract-plugin": "0.4.0",
"minimist": "1.2.0",
"node-hid": "0.7.2",
"mycrypto-nano-result": "0.0.1",
"node-hid": "0.7.2",
"node-sass": "4.8.3",
"nodemon": "1.17.3",
"null-loader": "0.1.1",
"prettier": "1.11.1",
"raw-loader": "0.5.1",
"react-hot-loader": "4.0.0",
"react-test-renderer": "16.3.2",
"redux-devtools-extension": "2.13.2",
@ -167,19 +167,13 @@
"prebuild": "check-node-version --package",
"build:downloadable": "webpack --mode=production --config webpack_config/webpack.html.js",
"prebuild:downloadable": "check-node-version --package",
"build:electron":
"webpack --config webpack_config/webpack.electron-prod.js && node webpack_config/buildElectron.js",
"build:electron:osx":
"webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=osx node webpack_config/buildElectron.js",
"build:electron:windows":
"webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=windows node webpack_config/buildElectron.js",
"build:electron:linux":
"webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=linux node webpack_config/buildElectron.js",
"build:electron": "webpack --config webpack_config/webpack.electron-prod.js && node webpack_config/buildElectron.js",
"build:electron:osx": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=osx node webpack_config/buildElectron.js",
"build:electron:windows": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=windows node webpack_config/buildElectron.js",
"build:electron:linux": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=linux node webpack_config/buildElectron.js",
"prebuild:electron": "check-node-version --package",
"jenkins:build:linux":
"webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=JENKINS_LINUX node webpack_config/buildElectron.js",
"jenkins:build:mac":
"webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=JENKINS_MAC node webpack_config/buildElectron.js",
"jenkins:build:linux": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=JENKINS_LINUX node webpack_config/buildElectron.js",
"jenkins:build:mac": "webpack --config webpack_config/webpack.electron-prod.js && ELECTRON_OS=JENKINS_MAC node webpack_config/buildElectron.js",
"jenkins:upload": "node jenkins/upload",
"test:coverage": "jest --config=jest_config/jest.config.json --coverage",
"test": "jest --config=jest_config/jest.config.json",
@ -192,16 +186,13 @@
"predev": "check-node-version --package",
"dev:https": "HTTPS=true node webpack_config/devServer.js",
"predev:https": "check-node-version --package",
"dev:electron":
"concurrently --kill-others --names 'webpack,electron' 'BUILD_ELECTRON=true node webpack_config/devServer.js' 'webpack --config webpack_config/webpack.electron-dev.js && electron dist/electron-js/main.js'",
"dev:electron": "concurrently --kill-others --names 'webpack,electron' 'BUILD_ELECTRON=true node webpack_config/devServer.js' 'webpack --config webpack_config/webpack.electron-dev.js && electron dist/electron-js/main.js'",
"tslint": "tslint --project . --exclude common/vendor/**/*",
"tscheck": "tsc --noEmit",
"start": "npm run dev",
"precommit": "lint-staged",
"formatAll":
"find ./common/ -name '*.ts*' | xargs prettier --write --config ./.prettierrc --config-precedence file-override",
"prettier:diff":
"prettier --write --config ./.prettierrc --list-different \"common/**/*.ts\" \"common/**/*.tsx\"",
"formatAll": "find ./common/ -name '*.ts*' | xargs prettier --write --config ./.prettierrc --config-precedence file-override",
"prettier:diff": "prettier --write --config ./.prettierrc --list-different \"common/**/*.ts\" \"common/**/*.tsx\"",
"prepush": "npm run tslint && npm run tscheck",
"update:tokens": "ts-node scripts/update-tokens",
"postinstall": "electron-rebuild --force"

View File

@ -0,0 +1,226 @@
<html>
<head>
<title>TREZOR - Enter PIN</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-$scriptNonce'; style-src 'unsafe-inline'">
</head>
<body>
<h1>Enter your PIN</h1>
<h2>Look at your device for the number positions</h2>
<div class="pin-buttons">
<button class="pin-button" data-number="7"></button>
<button class="pin-button" data-number="8"></button>
<button class="pin-button" data-number="9"></button>
<button class="pin-button" data-number="4"></button>
<button class="pin-button" data-number="5"></button>
<button class="pin-button" data-number="6"></button>
<button class="pin-button" data-number="1"></button>
<button class="pin-button" data-number="2"></button>
<button class="pin-button" data-number="3"></button>
</div>
<div class="pin-controls">
<input class="pin-input" type="password" readonly/>
<button class="pin-clear">
<svg viewPort="0 0 8 8" width="8" height="8" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="7" x2="7" y2="1" stroke="white" stroke-width="2"/>
<line x1="1" y1="1" x2="7" y2="7" stroke="white" stroke-width="2"/>
</svg>
</button>
<button class="pin-unlock">
Unlock
</button>
</div>
<button class="close">
<svg viewPort="0 0 12 12" width="12" height="12" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="11" x2="11" y2="1" stroke="white" stroke-width="2"/>
<line x1="1" y1="1" x2="11" y2="11" stroke="white" stroke-width="2"/>
</svg>
</button>
<!-- SCRIPT -->
<script nonce="$scriptNonce">
var ipcRenderer = require('electron').ipcRenderer;
var remote = require('electron').remote;
var pin = [];
var pinButtons = document.querySelectorAll('.pin-button');
var input = document.querySelector('.pin-input');
var unlock = document.querySelector('.pin-unlock');
var clear = document.querySelector('.pin-clear');
var close = document.querySelector('.close');
pinButtons.forEach(function(el) {
el.addEventListener('click', function(ev) {
pin.push(ev.currentTarget.getAttribute('data-number'));
input.value = pin.join('');
});
});
clear.addEventListener('click', function() {
pin = [];
input.value = '';
});
unlock.addEventListener('click', function() {
if (!pin.length) return;
ipcRenderer.send('$EVENT', pin.join(''));
});
close.addEventListener('click', function() {
var window = remote.getCurrentWindow();
window.close();
});
</script>
<!-- STYLES -->
<style>
body {
color: #FFF;
padding: 20px;
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
body * {
box-sizing: inherit;
}
h1,
h2 {
text-align: center;
}
h1 {
font-size: 28px;
font-weight: 100;
margin-bottom: 3px;
letter-spacing: 1.2px;
}
h2 {
opacity: 0.5;
font-size: 13px;
font-weight: 400;
}
.pin-buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 auto;
width: 180px;
height: 180px;
}
.pin-button {
position: relative;
width: 54px;
height: 54px;
border-radius: 4px;
border: 1px solid #FFF;
background: rgba(255, 255, 255, 0.1);
transition: all 120ms ease;
opacity: 0.4;
}
.pin-button:hover {
opacity: 0.8;
}
.pin-button:active {
opacity: 1;
}
.pin-button:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
background: #FFF;
}
.pin-controls {
position: relative;
width: 180px;
margin: 0 auto;
}
.pin-input {
width: 100%;
background: none;
border: none;
border-bottom: 1px solid #FFF;
opacity: 0.7;
font-size: 32px;
padding: 0 4px;
margin-bottom: 10px;
letter-spacing: 3px;
color: #FFF;
}
.pin-clear {
position: absolute;
right: 0;
top: 11px;
padding: 4px;
border-radius: 100%;
border: 2px solid;
opacity: 0.6;
}
.pin-clear:hover {
opacity: 0.8;
}
.pin-clear:active {
opacity: 1;
}
.pin-unlock {
width: 100%;
padding: 6px;
opacity: 0.6;
text-align: center;
font-size: 10px;
border: 1px solid #FFF;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 1.2px;
}
.pin-unlock:hover {
opacity: 0.8;
}
.pin-unlock:active {
opacity: 1;
}
.close {
position: absolute;
top: 10px;
right: 10px;
width: 14px;
height: 14px;
opacity: 0.3;
overflow: hidden;
}
.close:hover,
.close:focus {
opacity: 1;
}
button {
display: block;
background: none;
border: none;
padding: 0;
cursor: pointer;
color: #FFF;
outline: none;
}
</style>
</body>
</html>

View File

@ -0,0 +1,40 @@
import { BrowserWindow, ipcMain, IpcMessageEvent } from 'electron';
import template from './pin.html';
const EVENT = 'enclave:pin';
export function showPinPrompt(): Promise<string> {
return new Promise((resolve, reject) => {
const scriptNonce = Math.floor(Math.random() * 1000000000000);
const html = template
.replace(/\$scriptNonce/g, scriptNonce.toString())
.replace(/\$EVENT/g, EVENT);
let hasResolved = false;
const window = new BrowserWindow({
width: 320,
height: 380,
frame: false,
backgroundColor: '#21252B',
darkTheme: true
});
window.on('closed', () => {
if (hasResolved) {
return;
}
reject(new Error('ENCLAVE_TREZOR_CANCELED'));
});
ipcMain.once(EVENT, (_: IpcMessageEvent, pin: string) => {
resolve(pin);
hasResolved = true;
window.close();
});
window.loadURL(`data:text/html;charset=UTF-8,${encodeURIComponent(html)}`);
window.show();
window.focus();
});
}

View File

@ -1,12 +1,12 @@
import BN from 'bn.js';
import { DeviceList, Session } from 'mycrypto-trezor.js';
import { DeviceList, Session } from 'trezor.js';
import mapValues from 'lodash/mapValues';
import { addHexPrefix } from 'ethereumjs-util';
import EthTx from 'ethereumjs-tx';
import { WalletLib } from 'shared/enclave/types';
import { padLeftEven } from 'libs/values';
import { stripHexPrefixAndLower } from 'libs/formatters';
import { showPinPrompt } from '../views/pin';
const deviceList = new DeviceList({ debug: false });
@ -25,6 +25,16 @@ async function getSession() {
currentSession = null;
}
});
device.on('pin', (_, cb: (err?: Error, pin?: string) => void) => {
showPinPrompt()
.then(pin => {
cb(undefined, pin);
})
.catch(err => {
console.error('PIN entry failed', err);
cb(err);
});
});
currentSession = session;
return currentSession;

View File

@ -12,7 +12,14 @@ const electronConfig = {
preload: path.join(config.path.electron, 'preload/index.ts')
},
module: {
rules: [config.typescriptRule]
rules: [
config.typescriptRule,
// HTML as string
{
test: /\.html$/,
use: 'raw-loader',
}
]
},
resolve: {
extensions: ['.ts', '.js', '.json'],

View File

@ -23,6 +23,11 @@ electronConfig.plugins = [
new DelayPlugin(500)
];
// Many native node modules don't like being uglified since they often aren't
// for most use cases, and this way logging is a lot easier too.
electronConfig.devtool = undefined;
electronConfig.optimization = {
minimize: false
};
module.exports = [electronConfig, jsConfig];

View File

@ -7635,34 +7635,6 @@ mycrypto-shepherd@1.4.0:
remote-redux-devtools "^0.5.12"
url-search-params "^0.10.0"
mycrypto-trezor-link@1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/mycrypto-trezor-link/-/mycrypto-trezor-link-1.5.1.tgz#1d0b13bd854022dcd9960062d04f8d9e7b4c67c0"
dependencies:
bigi "^1.4.1"
bitcoinjs-lib-zcash "^3.0.0"
ecurve "^1.0.3"
json-stable-stringify "^1.0.1"
node-fetch "^1.6.0"
object.values "^1.0.3"
protobufjs-old-fixed-webpack "3.8.5"
semver-compare "^1.0.0"
whatwg-fetch "0.11.0"
mycrypto-trezor.js@6.17.5:
version "6.17.5"
resolved "https://registry.yarnpkg.com/mycrypto-trezor.js/-/mycrypto-trezor.js-6.17.5.tgz#f92cf11e614aa813814f8e444f459f02bf7ce906"
dependencies:
bchaddrjs "^0.2.1"
bitcoinjs-lib-zcash "^3.3.2"
ecurve "^1.0.2"
mycrypto-trezor-link "1.5.1"
node-fetch "^1.6.0"
randombytes "^2.0.1"
semver-compare "1.0.0"
unorm "^1.3.3"
whatwg-fetch "0.11.0"
nan@^2.0.5, nan@^2.0.8, nan@^2.10.0, nan@^2.2.1, nan@^2.3.0, nan@^2.6.2:
version "2.10.0"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
@ -9207,6 +9179,10 @@ raw-body@2.3.2:
iconv-lite "0.4.19"
unpipe "1.0.0"
raw-loader@0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
rc-align@2.x:
version "2.3.6"
resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-2.3.6.tgz#35046d2ac25771b1e5cbd600eae8f862c450f9e6"
@ -11299,6 +11275,34 @@ tree-kill@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.0.tgz#5846786237b4239014f05db156b643212d4c6f36"
trezor-link@1.5.2:
version "1.5.2"
resolved "https://registry.yarnpkg.com/trezor-link/-/trezor-link-1.5.2.tgz#a87defc5ea4d0e882c5a8623b554673d62cdabbb"
dependencies:
bigi "^1.4.1"
bitcoinjs-lib-zcash "^3.0.0"
ecurve "^1.0.3"
json-stable-stringify "^1.0.1"
node-fetch "^1.6.0"
object.values "^1.0.3"
protobufjs-old-fixed-webpack "3.8.5"
semver-compare "^1.0.0"
whatwg-fetch "0.11.0"
trezor.js@6.17.5:
version "6.17.5"
resolved "https://registry.yarnpkg.com/trezor.js/-/trezor.js-6.17.5.tgz#cc080fce430c0ad921474ef210da2eceab8ec1f1"
dependencies:
bchaddrjs "^0.2.1"
bitcoinjs-lib-zcash "^3.3.2"
ecurve "^1.0.2"
node-fetch "^1.6.0"
randombytes "^2.0.1"
semver-compare "1.0.0"
trezor-link "1.5.2"
unorm "^1.3.3"
whatwg-fetch "0.11.0"
trim-newlines@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"