-
- {!chosenWallet && }
- {(chosenWallet && !active) && }
- {(chosenWallet && active) && }
-
+const ChooseAccount = ({ wallet, availableAccounts, active, onAccountSelect }) => {
+ if(wallet.isHardwareWallet && availableAccounts.length !== 0 && !active) {
+ return (
+ <>
+
Select account
+ {availableAccounts.map(account => (
+
onAccountSelect(account)}>
+ {account}
+
+ ))}
+
+ )
+ }
+
+ return null
+}
+
+const ConnectedView = ({ wallet, account }) => {
+ return
+
Wallet connected
+
+
{wallet.name}
+
Account: {account}
+}
+
+const ErrorConnecting = ({ wallet, error, onTryAgainClick }) => {
+ return <>
+
Connect to a wallet
+
Error connecting to {wallet.name} wallet...
+
+ Try Again
+
+ { error &&
{error}
}
+
}
\ No newline at end of file
diff --git a/src/components/lib/Web3Status.js b/src/components/lib/Web3Status.js
index 7bcaebb6..23d86195 100644
--- a/src/components/lib/Web3Status.js
+++ b/src/components/lib/Web3Status.js
@@ -23,13 +23,16 @@ export const Web3Status = (props) => {
}
else if(active) {
- body =
+ body =
setShowConnectWallet(true)}>
Connected
}
return
- setShowConnectWallet(false)} shown={showConnectWallet} />
+ setShowConnectWallet(false)}
+ onClose={() => setShowConnectWallet(false)}
+ shown={showConnectWallet} />
{body}
}
diff --git a/src/connectors/config.json b/src/connectors/config.json
new file mode 100644
index 00000000..0f572332
--- /dev/null
+++ b/src/connectors/config.json
@@ -0,0 +1,11 @@
+{
+ "1101": {
+ "wsURL": "ws://eth-tx-node.default.svc.cluster.local:8546"
+ },
+ "3": {
+ "wsURL": "wss://ropsten.infura.io/ws/v3/59fb36a36fa4474b890c13dd30038be5"
+ },
+ "1": {
+ "wsURL": "wss://mainnet.infura.io/ws/v3/59fb36a36fa4474b890c13dd30038be5"
+ }
+}
\ No newline at end of file
diff --git a/src/connectors/ledger.js b/src/connectors/ledger.js
new file mode 100644
index 00000000..909fcd74
--- /dev/null
+++ b/src/connectors/ledger.js
@@ -0,0 +1,109 @@
+import TransportU2F from "@ledgerhq/hw-transport-u2f"
+import AppEth from '@ledgerhq/hw-app-eth'
+import { AbstractConnector } from '@web3-react/abstract-connector'
+import Web3ProviderEngine from 'web3-provider-engine'
+import { LedgerSubprovider } from './ledger_subprovider'
+import CacheSubprovider from 'web3-provider-engine/subproviders/cache.js'
+import WebsocketSubprovider from 'web3-provider-engine/subproviders/websocket'
+
+/**
+ * An implementation of a LedgerConnector for web3-react, based on the original
+ * `@web3-react/ledger-connector`.
+ *
+ * Some differences:
+ *
+ * 1. The original doesn't expose the LedgerJS client API.
+ * We will probably want access to this in future, eg. signing BTC transactions
+ *
+ * 2. The original doesn't work with event subscriptions, as it assumes a HTTP RPC
+ * endpoint. Event subscriptions use `eth_subscribe`, which Ganache does not
+ * support out-of-the-box. Assuming a Websocket provider is simpler for our case.
+ */
+export class LedgerConnector extends AbstractConnector {
+ defaultAccount = ""
+
+ constructor({
+ chainId,
+ url,
+ pollingInterval,
+ requestTimeoutMs,
+ accountFetchingConfigs,
+ baseDerivationPath
+ }) {
+ super({ supportedChainIds: [chainId] })
+
+ this.chainId = chainId
+ this.url = url
+ this.pollingInterval = pollingInterval
+ this.requestTimeoutMs = requestTimeoutMs
+ this.accountFetchingConfigs = accountFetchingConfigs
+ this.baseDerivationPath = baseDerivationPath
+ }
+
+ /**
+ * @return {Promise
}
+ */
+ async activate() {
+ if (!this.provider) {
+ let ledgerEthereumClientFactoryAsync = async () => {
+ const ledgerConnection = await TransportU2F.create()
+ // Ledger will automatically timeout the U2F "sign" request after `exchangeTimeout` ms.
+ // The default is set at an annoyingly low threshold, of 10,000ms, wherein the connection breaks
+ // and throws this cryptic error:
+ // `{name: "TransportError", message: "Failed to sign with Ledger device: U2F DEVICE_INELIGIBLE", ...}`
+ // Here we set it to 3hrs, to avoid this occurring, even if the user leaves the tab
+ // open and comes back to it later.
+ ledgerConnection.setExchangeTimeout(10800000)
+ const ledgerEthClient = new AppEth(ledgerConnection)
+ return ledgerEthClient
+ }
+
+ const engine = new Web3ProviderEngine({ pollingInterval: this.pollingInterval })
+ engine.addProvider(
+ new LedgerSubprovider({
+ chainId: this.chainId,
+ ledgerEthereumClientFactoryAsync,
+ accountFetchingConfigs: this.accountFetchingConfigs,
+ baseDerivationPath: this.baseDerivationPath
+ })
+ )
+ engine.addProvider(new CacheSubprovider())
+ engine.addProvider(new WebsocketSubprovider({ rpcUrl: this.url }))
+ this.provider = engine
+ }
+
+ this.provider.start()
+
+ return { provider: this.provider, chainId: this.chainId }
+ }
+
+ /**
+ * @return {Promise}
+ */
+ async getProvider() {
+ return this.provider
+ }
+
+ /**
+ * @return {Promise}
+ */
+ async getChainId() {
+ return this.chainId
+ }
+
+ async getAccount() {
+ return this.defaultAccount
+ }
+
+ async getAccounts(numberOfAccounts = 15) {
+ return await this.provider._providers[0].getAccountsAsync(numberOfAccounts)
+ }
+
+ setDefaultAccount(account) {
+ this.defaultAccount = account
+ }
+
+ deactivate() {
+ this.provider.stop()
+ }
+}
\ No newline at end of file
diff --git a/src/connectors/ledger_subprovider.js b/src/connectors/ledger_subprovider.js
new file mode 100644
index 00000000..5898b7fd
--- /dev/null
+++ b/src/connectors/ledger_subprovider.js
@@ -0,0 +1,81 @@
+import { LedgerSubprovider as LedgerSubprovider0x } from '@0x/subproviders/lib/src/subproviders/ledger' // https://github.com/0xProject/0x-monorepo/issues/1400
+import web3Utils from 'web3-utils';
+import { hexToPaddedBuffer, buildTransactionForChain } from './utils';
+
+/**
+ * A custom Ledger subprovider, inheriting from the 0x Subprovider.
+ *
+ * Supports chains with a chainId > 255, and mitigates some issues with the
+ * LedgerJS library.
+ */
+class LedgerSubprovider extends LedgerSubprovider0x {
+ chainId
+
+ constructor(config) {
+ super(config)
+ this.chainId = config.chainId
+ }
+
+ async signTransactionAsync(txParams) {
+ LedgerSubprovider._validateTxParams(txParams)
+ if (txParams.from === undefined || !web3Utils.isAddress(txParams.from)) {
+ throw new Error('Invalid address')
+ }
+ const initialDerivedKeyInfo = await this._initialDerivedKeyInfoAsync();
+ const derivedKeyInfo = this._findDerivedKeyInfoForAddress(initialDerivedKeyInfo, txParams.from);
+
+ this._ledgerClientIfExists = await this._createLedgerClientAsync();
+
+ try {
+ const fullDerivationPath = derivedKeyInfo.derivationPath
+ const tx = buildTransactionForChain(txParams, this.chainId)
+
+ // Set the EIP155 bits
+ const vIndex = 6;
+ tx.raw[vIndex] = hexToPaddedBuffer(this.chainId.toString(16), 4) // v
+ const rIndex = 7;
+ tx.raw[rIndex] = Buffer.from([]); // r
+ const sIndex = 8;
+ tx.raw[sIndex] = Buffer.from([]); // s
+
+ const response = await this._ledgerClientIfExists.signTransaction(
+ fullDerivationPath,
+ tx.serialize().toString('hex')
+ )
+
+ // Ledger computes the signature over the full 4 bytes of `v`, but the transport layer
+ // only returns the lower 2 bytes. The returned `v` will be wrong for chainId's < 255,
+ // and has to be recomputed by the client [1] [2].
+ // [1]: https://github.com/LedgerHQ/ledgerjs/issues/168
+ // [2]: https://github.com/LedgerHQ/ledger-app-eth/commit/8260268b0214810872dabd154b476f5bb859aac0
+ const ledgerSignedV = parseInt(response.v, 16)
+
+ // Recompute `v` according to the algorithm detailed in EIP155 [1].
+ // [1] https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md
+ const eip155Constant = 35
+ let signedV = (this.chainId * 2) + eip155Constant
+ if(ledgerSignedV % 2 === 0) {
+ signedV += 1
+ }
+
+ // Verify signature `v` value returned from Ledger.
+ if ((signedV & 0xff) !== ledgerSignedV) {
+ throw new Error('Invalid chainID')
+ }
+
+ // Store signature in transaction.
+ tx.v = hexToPaddedBuffer(signedV.toString(16), 4)
+ tx.r = Buffer.from(response.r, 'hex')
+ tx.s = Buffer.from(response.s, 'hex')
+
+ const signedTxHex = `0x${tx.serialize().toString('hex')}`
+ await this._destroyLedgerClientAsync();
+ return signedTxHex;
+ } catch (err) {
+ await this._destroyLedgerClientAsync();
+ throw err;
+ }
+ }
+}
+
+export { LedgerSubprovider }
\ No newline at end of file
diff --git a/src/connectors/trezor.js b/src/connectors/trezor.js
new file mode 100644
index 00000000..8a809c04
--- /dev/null
+++ b/src/connectors/trezor.js
@@ -0,0 +1,85 @@
+import WebsocketSubprovider from 'web3-provider-engine/subproviders/websocket'
+import { AbstractConnector } from '@web3-react/abstract-connector'
+import Web3ProviderEngine from 'web3-provider-engine'
+import CacheSubprovider from 'web3-provider-engine/subproviders/cache.js'
+import { TrezorSubprovider } from './trezor_subprovider'
+import TrezorConnect from 'trezor-connect'
+
+/**
+ * An implementation of a TrezorConnector for web3-react, based on the original
+ * `@web3-react/trezor-connector`.
+ *
+ * Some differences:
+ *
+ * 1. The original doesn't work with event subscriptions, as it assumes a HTTP RPC
+ * endpoint. Event subscriptions use `eth_subscribe`, which Ganache does not
+ * support out-of-the-box. Assuming a Websocket provider is simpler for our case.
+ */
+export class TrezorConnector extends AbstractConnector {
+ defaultAccount = ""
+
+ constructor({
+ chainId,
+ url,
+ pollingInterval,
+ requestTimeoutMs,
+ config = {},
+ manifestEmail,
+ manifestAppUrl
+ }) {
+ super({
+ supportedChainIds: [chainId],
+ })
+
+ this.chainId = chainId
+ this.url = url
+ this.pollingInterval = pollingInterval
+ this.requestTimeoutMs = requestTimeoutMs
+ this.config = config
+ this.manifestEmail = manifestEmail
+ this.manifestAppUrl = manifestAppUrl
+ }
+
+ async activate() {
+ if (!this.provider) {
+ TrezorConnect.manifest({
+ email: this.manifestEmail,
+ appUrl: this.manifestAppUrl
+ })
+
+ const engine = new Web3ProviderEngine({ pollingInterval: this.pollingInterval })
+ engine.addProvider(new TrezorSubprovider({ trezorConnectClientApi: TrezorConnect, ...this.config }))
+ engine.addProvider(new CacheSubprovider())
+ engine.addProvider(new WebsocketSubprovider({ rpcUrl: this.url }))
+ this.provider = engine
+ }
+
+ this.provider.start()
+
+ return { provider: this.provider, chainId: this.chainId }
+ }
+
+ async getProvider() {
+ return this.provider
+ }
+
+ async getChainId() {
+ return this.chainId
+ }
+
+ async getAccount() {
+ return this.defaultAccount
+ }
+
+ async getAccounts(numberOfAccounts = 15) {
+ return await this.provider._providers[0].getAccountsAsync(numberOfAccounts)
+ }
+
+ setDefaultAccount(account) {
+ this.defaultAccount = account
+ }
+
+ deactivate() {
+ this.provider.stop()
+ }
+}
\ No newline at end of file
diff --git a/src/connectors/trezor_subprovider.js b/src/connectors/trezor_subprovider.js
new file mode 100644
index 00000000..461bcbc3
--- /dev/null
+++ b/src/connectors/trezor_subprovider.js
@@ -0,0 +1,65 @@
+import { TrezorSubprovider as TrezorSubprovider0x } from '@0x/subproviders/lib/src/subproviders/trezor'
+import web3Utils from 'web3-utils'
+import { getChainIdFromSignedV, buildTransactionForChain, hexToPaddedBuffer } from './utils'
+
+export class TrezorSubprovider extends TrezorSubprovider0x {
+ chainId
+
+ constructor({ chainId, trezorConnectClientApi }) {
+ super({
+ trezorConnectClientApi,
+ networkId: chainId
+ })
+
+ this.chainId = chainId
+ }
+
+ async signTransactionAsync(txData) {
+ if (txData.from === undefined || !web3Utils.isAddress(txData.from)) {
+ throw new Error('Invalid address')
+ }
+ txData.value = txData.value || '0x0'
+ txData.data = txData.data || '0x'
+ txData.gas = txData.gas || '0x0'
+ txData.gasPrice = txData.gasPrice || '0x0'
+
+ const initialDerivedKeyInfo = await this._initialDerivedKeyInfoAsync()
+ const derivedKeyInfo = this._findDerivedKeyInfoForAddress(initialDerivedKeyInfo, txData.from)
+ const fullDerivationPath = derivedKeyInfo.derivationPath
+
+ const response = await this._trezorConnectClientApi.ethereumSignTransaction({
+ path: fullDerivationPath,
+ transaction: {
+ to: txData.to,
+ value: txData.value,
+ data: txData.data,
+ chainId: this.chainId,
+ nonce: txData.nonce,
+ gasLimit: txData.gas,
+ gasPrice: txData.gasPrice,
+ },
+ })
+
+ if (!response.success) {
+ throw new Error(response)
+ }
+
+ const { payload: { v, r, s } } = response
+
+ // Validate `v`.
+ const chainIdFromV = getChainIdFromSignedV(v)
+ if (chainIdFromV !== this.chainId) {
+ throw new Error('Invalid chainID')
+ }
+
+ const tx = buildTransactionForChain(txData, this.chainId)
+
+ // Store signature in transaction.
+ // Pad `v` in case the chainId encodes as an odd number of hex digits.
+ tx.v = hexToPaddedBuffer(v, 4)
+ tx.r = Buffer.from(r.slice(2), 'hex')
+ tx.s = Buffer.from(s.slice(2), 'hex')
+
+ return `0x${tx.serialize().toString('hex')}`
+ }
+}
\ No newline at end of file
diff --git a/src/connectors/utils.js b/src/connectors/utils.js
new file mode 100644
index 00000000..d2e3731c
--- /dev/null
+++ b/src/connectors/utils.js
@@ -0,0 +1,67 @@
+import Common from 'ethereumjs-common'
+import { Transaction } from 'ethereumjs-tx'
+import { getNetworkIdFromArtifact } from '@keep-network/tbtc.js'
+import config from './config.json'
+
+/**
+ * Builds a Transaction object for a custom chain.
+ * @param {*} txData The transaction data
+ * @param {number} chainId The custom chain's ID.
+ * @return {Transaction} The Ethereum transaction
+ */
+export const buildTransactionForChain = (txData, chainId) => {
+ const common = Common.forCustomChain(
+ 'mainnet',
+ {
+ name: 'keep-dev',
+ chainId: chainId,
+ },
+ 'petersburg', ['petersburg']
+ )
+ return new Transaction(txData, { common })
+}
+
+/**
+ * Gets the `chainId` from a signed `v`.
+ * @param {string} v Hex string for `v`
+ */
+export const getChainIdFromSignedV = (v) => {
+ // After a transaction is signed, the `v` component of the signature (v,r,s)
+ // is set according to this algorithm, specified in EIP155 [1]:
+ // v = CHAIN_ID * 2 + 35
+ // Reformulating, we can calculate `chainId`:
+ // CHAIN_ID = (v - 35) / 2
+ // [1] https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md
+ v = parseInt(v, 16)
+ const chainId = Math.floor((v - 35) / 2)
+ return chainId < 0 ? 0 : chainId
+}
+
+/**
+ * Pads a hex string with zeroes, and returns a buffer.
+ * @param {string} hexString The hex string, with/without the 0x prefix.
+ * @param {number} padLength Length to pad string to, in bytes.
+ * @return {Buffer} The padded hex as a Buffer.
+ */
+export function hexToPaddedBuffer(hexString, padLength) {
+ hexString = hexString.startsWith('0x') ? hexString.slice(2) : hexString
+ hexString = hexString.padStart(padLength, '0')
+ return new Buffer(hexString, 'hex')
+}
+
+export const getChainId = () => {
+ if (process.env.NODE_ENV === "development") {
+ // private chains (default), change if you use a different one
+ return 1337
+ }
+ // For KEEP internal testnet, ropsten and mainnet `chainId == networkId`
+ return Number(getNetworkIdFromArtifact())
+}
+
+export const getWsUrl = () => {
+ if (process.env.NODE_ENV === "development") {
+ // Ganache web socket url, change if you use a different one
+ return "ws://localhost:8545"
+ }
+ return config[getChainId()].wsURL
+}
diff --git a/src/css/app.scss b/src/css/app.scss
index a41e2e61..7693d9d5 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -14,7 +14,7 @@
@import 'prove.scss';
@import 'congratulations.scss';
@import 'confirming.scss';
-
+@import 'commons.scss';
html, body, #root {
margin: 0;
diff --git a/src/css/commons.scss b/src/css/commons.scss
new file mode 100644
index 00000000..de2f0a9e
--- /dev/null
+++ b/src/css/commons.scss
@@ -0,0 +1,24 @@
+$sides: (top, bottom, left, right);
+
+.cursor {
+ &-pointer {
+ cursor: pointer;
+ }
+}
+
+@for $value from 1 through 5 {
+ @each $side in $sides {
+ .m#{str-slice($side, 0, 1)} {
+ &-#{$value} {
+ margin-#{$side}: #{$value}rem;
+ }
+ }
+
+ .p#{str-slice($side, 0, 1)} {
+ &-#{$value} {
+ padding-#{$side}: #{$value}rem;
+ }
+ }
+ }
+}
+
\ No newline at end of file
diff --git a/src/wrappers/web3.js b/src/wrappers/web3.js
index 6d92798d..382c76c3 100644
--- a/src/wrappers/web3.js
+++ b/src/wrappers/web3.js
@@ -43,9 +43,7 @@ export let TBTCLoaded = TBTCLoadedDeferred.promise
const initializeContracts = async (web3, connector, onTBTCLoaded) => {
// Initialise default account.
- const accounts = await web3.eth.getAccounts()
- web3.eth.defaultAccount = accounts[0]
-
+ web3.eth.defaultAccount = await connector.getAccount()
// Log the netId/chainId.
const netId = await web3.eth.net.getId()
const chainId = await web3.eth.getChainId()