Bruno
7 years ago
commit
3dd58463ca
@ -1,3 +1,6 @@ |
|||||||
{ |
{ |
||||||
"exceptions": ["https://nodesecurity.io/advisories/566"] |
"exceptions": [ |
||||||
|
"https://nodesecurity.io/advisories/566", |
||||||
|
"https://nodesecurity.io/advisories/157" |
||||||
|
] |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,10 @@ |
|||||||
|
# Storybook |
||||||
|
We're currently using [Storybook](https://storybook.js.org/) as part of our design system. To run Storybook and test some of our UI components, clone the repo and run the following: |
||||||
|
``` |
||||||
|
npm install |
||||||
|
npm run storybook |
||||||
|
``` |
||||||
|
You should then see: |
||||||
|
> info Storybook started on => http://localhost:6006/ |
||||||
|
|
||||||
|
In your browser, navigate to http://localhost:6006/ to see the Storybook application. From here, you'll be able to easily view components and even modify some of their properties. |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
import '@storybook/addon-knobs/register' |
||||||
|
import '@storybook/addon-actions/register' |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
import { configure } from '@storybook/react' |
||||||
|
import '../ui/app/css/index.scss' |
||||||
|
|
||||||
|
const req = require.context('../ui/app/components', true, /\.stories\.js$/) |
||||||
|
|
||||||
|
function loadStories () { |
||||||
|
require('./decorators') |
||||||
|
req.keys().forEach((filename) => req(filename)) |
||||||
|
} |
||||||
|
|
||||||
|
configure(loadStories, module) |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import React from 'react' |
||||||
|
import { addDecorator } from '@storybook/react' |
||||||
|
import { withInfo } from '@storybook/addon-info' |
||||||
|
import { withKnobs } from '@storybook/addon-knobs/react' |
||||||
|
|
||||||
|
const styles = { |
||||||
|
height: '100vh', |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'center', |
||||||
|
alignItems: 'center', |
||||||
|
} |
||||||
|
|
||||||
|
const CenterDecorator = story => ( |
||||||
|
<div style={styles}> |
||||||
|
{ story() } |
||||||
|
</div> |
||||||
|
) |
||||||
|
|
||||||
|
addDecorator((story, context) => withInfo()(story)(context)) |
||||||
|
addDecorator(withKnobs) |
||||||
|
addDecorator(CenterDecorator) |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
const path = require('path') |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
module: { |
||||||
|
rules: [ |
||||||
|
{ |
||||||
|
test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/, |
||||||
|
loaders: [{ |
||||||
|
loader: 'file-loader', |
||||||
|
options: { |
||||||
|
name: '[name].[ext]', |
||||||
|
outputPath: 'fonts/', |
||||||
|
}, |
||||||
|
}], |
||||||
|
}, |
||||||
|
{ |
||||||
|
test: /\.scss$/, |
||||||
|
loaders: [ |
||||||
|
'style-loader', |
||||||
|
'css-loader', |
||||||
|
'resolve-url-loader', |
||||||
|
{ |
||||||
|
loader: 'sass-loader', |
||||||
|
options: { |
||||||
|
sourceMap: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
resolve: { |
||||||
|
alias: { |
||||||
|
'./fonts/Font_Awesome': path.resolve(__dirname, '../fonts/Font_Awesome'), |
||||||
|
}, |
||||||
|
}, |
||||||
|
} |
||||||
@ -0,0 +1,96 @@ |
|||||||
|
# Send screen QA checklist: |
||||||
|
|
||||||
|
This checklist can be to guide QA of the send screen. It can also be used to guide e2e tests for the send screen. |
||||||
|
|
||||||
|
Once all of these are QA verified on master, resolutions to any bugs related to the send screen should include and update to this list. |
||||||
|
|
||||||
|
Additional features or functionality on the send screen should include an update to this list. |
||||||
|
|
||||||
|
## Send Eth mode |
||||||
|
- [ ] **Header** _It should:_ |
||||||
|
- [ ] have title "Send ETH" |
||||||
|
- [ ] have sub title "Only send ETH to an Ethereum address." |
||||||
|
- [ ] return user to main screen when top right X is clicked |
||||||
|
- [ ] **From row** _It should:_ |
||||||
|
- [ ] show the currently selected account by default |
||||||
|
- [ ] show a dropdown with all of the users accounts |
||||||
|
- [ ] contain the following info for each account: identicon, account name, balance in ETH, balance in current currency |
||||||
|
- [ ] change the account selected in the dropdown (but not the app-wide selected account) when one in the dropdown is clicked |
||||||
|
- [ ] close the dropdown, without changing the dropdown selected account, when the dropdown is open and then a click happens outside it |
||||||
|
- [ ] **To row** _It should:_ |
||||||
|
- [ ] Show a placeholder with the text 'Recipient Address' by default |
||||||
|
- [ ] Show, when clicked, a dropdown list of all 'to accounts': the users accounts, plus any other accounts they have previously sent to |
||||||
|
- [ ] Show account address, and account name if it exists, of each item in the dropdown list |
||||||
|
- [ ] Show a dropdown list of all to accounts (see above) whose address matches an address currently being typed in |
||||||
|
- [ ] Set the input text to the address of an account clicked in the dropdown list, and also hide the dropdown |
||||||
|
- [ ] Hide the dropdown without changing what is in the input if the user clicks outside the dropdown list while it is open |
||||||
|
- [ ] Select the text in the input (i.e. the address) if an address is displayed and then clicked |
||||||
|
- [ ] Show a 'required' error if the dropdown is opened but no account is selected |
||||||
|
- [ ] Show an 'invalid address' error if text is entered in the input that cannot be a valid hex address or ens address |
||||||
|
- [ ] Support ens names. (enter dinodan.eth on mainnet) After entering the plain text address, the hex address should appear in the input with a green checkmark beside |
||||||
|
- [ ] Should show a 'no such address' error if a non-existent ens address is entered |
||||||
|
- [ ] **Amount row** _It should:_ |
||||||
|
- [ ] allow user to enter any rational number >= 0 |
||||||
|
- [ ] allow user to copy and paste into the field |
||||||
|
- [ ] show an insufficient funds error if an amount > balance - gas fee |
||||||
|
- [ ] display 'ETH' after the number amount. The position of 'ETH' should change as the length of the input amount text changes |
||||||
|
- [ ] display the value of the amount of ETH in the current currency, formatted in that currency |
||||||
|
- [ ] show a 'max' but if amount < balance - gas fee |
||||||
|
- [ ] show no max button or error if amount === balance - gas fee |
||||||
|
- [ ] set the amount to balance - gas fee if the 'max' button is clicked |
||||||
|
- [ ] **Gas Fee Display row** _It should:_ |
||||||
|
- [ ] Default to the fee given by the estimated gas price |
||||||
|
- [ ] display the fee in ETH and the current currency |
||||||
|
- [ ] update when changes are made using the customize gas modal |
||||||
|
- [ ] **Cancel button** _It should:_ |
||||||
|
- [ ] Take the user back to the main screen |
||||||
|
- [ ] **submit button** _It should:_ |
||||||
|
- [ ] be disabled if no recipient address is provided or if any field is in error |
||||||
|
- [ ] sign a transaction with the info in the above form, and display the details of that transaction on the confirm screen |
||||||
|
|
||||||
|
## Send token mode |
||||||
|
- [ ] **Header** _It should:_ |
||||||
|
- [ ] have title "Send Tokens" |
||||||
|
- [ ] have sub title "Only send [token symbol] to an Ethereum address." |
||||||
|
- [ ] return user to main screen when top right X is clicked |
||||||
|
- [ ] **From row** _It should:_ |
||||||
|
- [ ] Behave the same as 'Send ETH mode' (see above) |
||||||
|
- [ ] **To row** _It should:_ |
||||||
|
- [ ] Behave the same as 'Send ETH mode' (see above) |
||||||
|
- [ ] **Amount row** _It should:_ |
||||||
|
- [ ] allow user to enter any rational number >= 0 |
||||||
|
- [ ] allow user to copy and paste into the field |
||||||
|
- [ ] show an 'insufficient tokens' error if an amount > token balance |
||||||
|
- [ ] show an 'insufficient funds' error if an gas fee > eth balance |
||||||
|
- [ ] display [token symbol] after the number amount. The position of [token symbol] should change as the length of the input amount text changes |
||||||
|
- [ ] display the value of the amount of tokens in the current currency, formatted in that currency |
||||||
|
- [ ] show a 'max' but if amount < token balance |
||||||
|
- [ ] show no max button or error if amount === token balance |
||||||
|
- [ ] set the amount to token balance if the 'max' button is clicked |
||||||
|
- [ ] **Gas Fee Display row** _It should:_ |
||||||
|
- [ ] Behave the same as 'Send ETH mode' (see above) |
||||||
|
- [ ] **Cancel button** _It should:_ |
||||||
|
- [ ] Take the user back to the main screen |
||||||
|
- [ ] **submit button** _It should:_ |
||||||
|
- [ ] be disabled if no recipient address is provided or if any field is in error |
||||||
|
- [ ] sign a token transaction with the info in the above form, and display the details of that transaction on the confirm screen |
||||||
|
|
||||||
|
## Edit send Eth mode |
||||||
|
- [ ] Say 'Editing transaction' in the header |
||||||
|
- [ ] display a button to go back to the confirmation screen without applying update |
||||||
|
- [ ] say 'update transaction' on the submit button |
||||||
|
- [ ] update the existing transaction, instead of signing a new one, when clicking the submit button |
||||||
|
- [ ] Otherwise, behave the same as 'Send ETH mode' (see above) |
||||||
|
|
||||||
|
## Edit send token mode |
||||||
|
- [ ] Behave the same as 'Edit send Eth mode' (see above) |
||||||
|
|
||||||
|
## Specific cases to test |
||||||
|
- [ ] Send eth to a hex address |
||||||
|
- [ ] Send eth to an ENS address |
||||||
|
- [ ] Donate to the faucet at https://faucet.metamask.io/ and edit the transaction before confirming |
||||||
|
- [ ] Send a token that is available on the 'Add Token' screen search to a hex address |
||||||
|
- [ ] Create a custom token at https://tokenfactory.surge.sh/ and send it to a hex address |
||||||
|
- [ ] Send a token to an ENS address |
||||||
|
- [ ] Create a token transaction using https://tokenfactory.surge.sh/#/, and edit the transaction before confirming |
||||||
|
- [ ] Send each of MKR, EOS and ICON using myetherwallet, and edit the transaction before confirming |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,314 @@ |
|||||||
|
const fs = require('fs') |
||||||
|
const mkdirp = require('mkdirp') |
||||||
|
const path = require('path') |
||||||
|
const assert = require('assert') |
||||||
|
const pify = require('pify') |
||||||
|
const webdriver = require('selenium-webdriver') |
||||||
|
const until = require('selenium-webdriver/lib/until') |
||||||
|
const By = webdriver.By |
||||||
|
const { delay, buildChromeWebDriver } = require('../func') |
||||||
|
|
||||||
|
describe('Metamask popup page', function () { |
||||||
|
let driver, accountAddress, tokenAddress, extensionId |
||||||
|
|
||||||
|
this.timeout(0) |
||||||
|
|
||||||
|
before(async function () { |
||||||
|
const extPath = path.resolve('dist/chrome') |
||||||
|
driver = buildChromeWebDriver(extPath) |
||||||
|
await driver.get('chrome://extensions') |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
afterEach(async function () { |
||||||
|
if (this.currentTest.state === 'failed') { |
||||||
|
await verboseReportOnFailure(this.currentTest) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
after(async function () { |
||||||
|
await driver.quit() |
||||||
|
}) |
||||||
|
|
||||||
|
describe('Setup', function () { |
||||||
|
|
||||||
|
it('switches to Chrome extensions list', async function () { |
||||||
|
const tabs = await driver.getAllWindowHandles() |
||||||
|
await driver.switchTo().window(tabs[0]) |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it(`selects MetaMask's extension id and opens it in the current tab`, async function () { |
||||||
|
extensionId = await getExtensionId() |
||||||
|
await driver.get(`chrome-extension://${extensionId}/popup.html`) |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('sets provider type to localhost', async function () { |
||||||
|
await driver.wait(until.elementLocated(By.css('#app-content')), 300) |
||||||
|
await setProviderType('localhost') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('Account Creation', () => { |
||||||
|
|
||||||
|
it('matches MetaMask title', async () => { |
||||||
|
const title = await driver.getTitle() |
||||||
|
assert.equal(title, 'MetaMask', 'title matches MetaMask') |
||||||
|
}) |
||||||
|
|
||||||
|
it('shows privacy notice', async () => { |
||||||
|
await driver.wait(async () => { |
||||||
|
const privacyHeader = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-center.flex-grow > h3')).getText() |
||||||
|
assert.equal(privacyHeader, 'PRIVACY NOTICE', 'shows privacy notice')
|
||||||
|
return privacyHeader === 'PRIVACY NOTICE' |
||||||
|
}, 300) |
||||||
|
await driver.findElement(By.css('button')).click() |
||||||
|
}) |
||||||
|
|
||||||
|
it('show terms of use', async () => { |
||||||
|
await driver.wait(async () => { |
||||||
|
const terms = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-center.flex-grow > h3')).getText() |
||||||
|
assert.equal(terms, 'TERMS OF USE', 'shows terms of use') |
||||||
|
return terms === 'TERMS OF USE' |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
it('checks if the TOU button is disabled', async () => { |
||||||
|
const button = await driver.findElement(By.css('button')).isEnabled() |
||||||
|
assert.equal(button, false, 'disabled continue button') |
||||||
|
const element = await driver.findElement(By.linkText('Attributions')) |
||||||
|
await driver.executeScript('arguments[0].scrollIntoView(true)', element) |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('allows the button to be clicked when scrolled to the bottom of TOU', async () => { |
||||||
|
const button = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-center.flex-grow > button')) |
||||||
|
const buttonEnabled = await button.isEnabled() |
||||||
|
assert.equal(buttonEnabled, true, 'enabled continue button') |
||||||
|
await button.click() |
||||||
|
}) |
||||||
|
|
||||||
|
it('accepts password with length of eight', async () => { |
||||||
|
const passwordBox = await driver.findElement(By.id('password-box')) |
||||||
|
const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm')) |
||||||
|
const button = await driver.findElements(By.css('button')) |
||||||
|
|
||||||
|
await passwordBox.sendKeys('123456789') |
||||||
|
await passwordBoxConfirm.sendKeys('123456789') |
||||||
|
await button[0].click() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('shows value was created and seed phrase', async () => { |
||||||
|
await delay(300) |
||||||
|
const seedPhrase = await driver.findElement(By.css('.twelve-word-phrase')).getText() |
||||||
|
assert.equal(seedPhrase.split(' ').length, 12) |
||||||
|
const continueAfterSeedPhrase = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > button:nth-child(4)')) |
||||||
|
assert.equal(await continueAfterSeedPhrase.getText(), `I'VE COPIED IT SOMEWHERE SAFE`) |
||||||
|
await continueAfterSeedPhrase.click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('shows account address', async function () { |
||||||
|
accountAddress = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div > div:nth-child(1) > flex-column > div.flex-row > div')).getText() |
||||||
|
}) |
||||||
|
|
||||||
|
it('logs out of the vault', async () => { |
||||||
|
await driver.findElement(By.css('.sandwich-expando')).click() |
||||||
|
await delay(500) |
||||||
|
const logoutButton = await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)')) |
||||||
|
assert.equal(await logoutButton.getText(), 'Log Out') |
||||||
|
await logoutButton.click() |
||||||
|
}) |
||||||
|
|
||||||
|
it('accepts account password after lock', async () => { |
||||||
|
await delay(500) |
||||||
|
await driver.findElement(By.id('password-box')).sendKeys('123456789') |
||||||
|
await driver.findElement(By.css('button')).click() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('shows QR code option', async () => { |
||||||
|
await delay(300) |
||||||
|
await driver.findElement(By.css('.fa-ellipsis-h')).click() |
||||||
|
await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(1) > flex-column > div.name-label > div > span > i > div > div > li:nth-child(3)')).click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('checks QR code address is the same as account details address', async () => { |
||||||
|
const QRaccountAddress = await driver.findElement(By.css('.ellip-address')).getText() |
||||||
|
assert.equal(accountAddress.toLowerCase(), QRaccountAddress) |
||||||
|
await driver.findElement(By.css('.fa-arrow-left')).click() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('Import Ganache seed phrase', function () { |
||||||
|
it('logs out', async function () { |
||||||
|
await driver.findElement(By.css('.sandwich-expando')).click() |
||||||
|
await delay(200) |
||||||
|
const logOut = await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)')) |
||||||
|
assert.equal(await logOut.getText(), 'Log Out') |
||||||
|
await logOut.click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('restores from seed phrase', async function () { |
||||||
|
const restoreSeedLink = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div.flex-row.flex-center.flex-grow > p')) |
||||||
|
assert.equal(await restoreSeedLink.getText(), 'Restore from seed phrase') |
||||||
|
await restoreSeedLink.click() |
||||||
|
await delay(100) |
||||||
|
}) |
||||||
|
|
||||||
|
it('adds seed phrase', async function () { |
||||||
|
const testSeedPhrase = 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent' |
||||||
|
const seedTextArea = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > textarea')) |
||||||
|
await seedTextArea.sendKeys(testSeedPhrase) |
||||||
|
|
||||||
|
await driver.findElement(By.id('password-box')).sendKeys('123456789') |
||||||
|
await driver.findElement(By.id('password-box-confirm')).sendKeys('123456789') |
||||||
|
await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div > button:nth-child(2)')).click() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('balance renders', async function () { |
||||||
|
await delay(200) |
||||||
|
const balance = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div.flex-row > div.ether-balance.ether-balance-amount > div > div > div:nth-child(1) > div:nth-child(1)')) |
||||||
|
assert.equal(await balance.getText(), '100.000') |
||||||
|
await delay(200) |
||||||
|
}) |
||||||
|
|
||||||
|
it('sends transaction', async function () { |
||||||
|
const sendButton = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div.flex-row > button:nth-child(4)')) |
||||||
|
assert.equal(await sendButton.getText(), 'SEND') |
||||||
|
await sendButton.click() |
||||||
|
await delay(200) |
||||||
|
}) |
||||||
|
|
||||||
|
it('adds recipient address and amount', async function () { |
||||||
|
const sendTranscationScreen = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > h3:nth-child(2)')).getText() |
||||||
|
assert.equal(sendTranscationScreen, 'SEND TRANSACTION') |
||||||
|
const inputAddress = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(3) > div > input')) |
||||||
|
const inputAmmount = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(4) > input')) |
||||||
|
await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970') |
||||||
|
await inputAmmount.sendKeys('10') |
||||||
|
await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(4) > button')).click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('confirms transaction', async function () { |
||||||
|
await delay(300) |
||||||
|
await driver.findElement(By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input')).click() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('finds the transaction in the transactions list', async function () { |
||||||
|
const tranasactionAmount = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > section > section > div > div > div > div.ether-balance.ether-balance-amount > div > div > div > div:nth-child(1)')) |
||||||
|
assert.equal(await tranasactionAmount.getText(), '10.0') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('Token Factory', function () { |
||||||
|
|
||||||
|
it('navigates to token factory', async function () { |
||||||
|
await driver.get('http://tokenfactory.surge.sh/') |
||||||
|
}) |
||||||
|
|
||||||
|
it('navigates to create token contract link', async function () { |
||||||
|
const createToken = await driver.findElement(By.css('#bs-example-navbar-collapse-1 > ul > li:nth-child(3) > a')) |
||||||
|
await createToken.click() |
||||||
|
}) |
||||||
|
|
||||||
|
it('adds input for token', async function () { |
||||||
|
const totalSupply = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(5) > input')) |
||||||
|
const tokenName = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(6) > input')) |
||||||
|
const tokenDecimal = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(7) > input')) |
||||||
|
const tokenSymbol = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(8) > input')) |
||||||
|
const createToken = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > button')) |
||||||
|
|
||||||
|
await totalSupply.sendKeys('100') |
||||||
|
await tokenName.sendKeys('Test') |
||||||
|
await tokenDecimal.sendKeys('0') |
||||||
|
await tokenSymbol.sendKeys('TST') |
||||||
|
await createToken.click() |
||||||
|
await delay(1000) |
||||||
|
}) |
||||||
|
|
||||||
|
it('confirms transaction in MetaMask popup', async function () { |
||||||
|
const windowHandles = await driver.getAllWindowHandles() |
||||||
|
await driver.switchTo().window(windowHandles[windowHandles.length - 1]) |
||||||
|
const metamaskSubmit = await driver.findElement(By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input')) |
||||||
|
await metamaskSubmit.click() |
||||||
|
await delay(1000) |
||||||
|
}) |
||||||
|
|
||||||
|
it('switches back to Token Factory to grab the token contract address', async function () { |
||||||
|
const windowHandles = await driver.getAllWindowHandles() |
||||||
|
await driver.switchTo().window(windowHandles[0]) |
||||||
|
const tokenContactAddress = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > span:nth-child(3)')) |
||||||
|
tokenAddress = await tokenContactAddress.getText() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('navigates back to MetaMask popup in the tab', async function () { |
||||||
|
await driver.get(`chrome-extension://${extensionId}/popup.html`) |
||||||
|
await delay(700) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('Add Token', function () { |
||||||
|
it('switches to the add token screen', async function () { |
||||||
|
const tokensTab = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section > div > div.inactiveForm.pointer')) |
||||||
|
assert.equal(await tokensTab.getText(), 'TOKENS') |
||||||
|
await tokensTab.click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('navigates to the add token screen', async function () { |
||||||
|
const addTokenButton = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section > div.full-flex-height > div > button')) |
||||||
|
assert.equal(await addTokenButton.getText(), 'ADD TOKEN') |
||||||
|
await addTokenButton.click() |
||||||
|
}) |
||||||
|
|
||||||
|
it('checks add token screen rendered', async function () { |
||||||
|
const addTokenScreen = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.section-title.flex-row.flex-center > h2')) |
||||||
|
assert.equal(await addTokenScreen.getText(), 'ADD TOKEN') |
||||||
|
}) |
||||||
|
|
||||||
|
it('adds token parameters', async function () { |
||||||
|
const tokenContractAddress = await driver.findElement(By.css('#token-address')) |
||||||
|
await tokenContractAddress.sendKeys(tokenAddress) |
||||||
|
await delay(300) |
||||||
|
await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-justify-center.flex-grow.select-none > div > button')).click() |
||||||
|
await delay(100) |
||||||
|
}) |
||||||
|
|
||||||
|
it('checks the token balance', async function () { |
||||||
|
const tokenBalance = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > section > div.full-flex-height > ol > li:nth-child(2) > h3')) |
||||||
|
assert.equal(await tokenBalance.getText(), '100 TST') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
async function getExtensionId () { |
||||||
|
const extension = await driver.executeScript('return document.querySelector("extensions-manager").shadowRoot.querySelector("extensions-view-manager extensions-item-list").shadowRoot.querySelector("extensions-item:nth-child(2)").getAttribute("id")') |
||||||
|
return extension |
||||||
|
} |
||||||
|
|
||||||
|
async function setProviderType (type) { |
||||||
|
await driver.executeScript('window.metamask.setProviderType(arguments[0])', type) |
||||||
|
} |
||||||
|
|
||||||
|
async function verboseReportOnFailure (test) { |
||||||
|
const artifactDir = `./test-artifacts/chrome/${test.title}` |
||||||
|
const filepathBase = `${artifactDir}/test-failure` |
||||||
|
await pify(mkdirp)(artifactDir) |
||||||
|
// capture screenshot
|
||||||
|
const screenshot = await driver.takeScreenshot() |
||||||
|
await pify(fs.writeFile)(`${filepathBase}-screenshot.png`, screenshot, { encoding: 'base64' }) |
||||||
|
// capture dom source
|
||||||
|
const htmlSource = await driver.getPageSource() |
||||||
|
await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource) |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
@ -0,0 +1,323 @@ |
|||||||
|
const fs = require('fs') |
||||||
|
const mkdirp = require('mkdirp') |
||||||
|
const path = require('path') |
||||||
|
const assert = require('assert') |
||||||
|
const pify = require('pify') |
||||||
|
const webdriver = require('selenium-webdriver') |
||||||
|
const Command = require('selenium-webdriver/lib/command').Command |
||||||
|
const By = webdriver.By |
||||||
|
const { delay, buildFirefoxWebdriver } = require('../func') |
||||||
|
|
||||||
|
describe('', function () { |
||||||
|
let driver, accountAddress, tokenAddress, extensionId |
||||||
|
|
||||||
|
this.timeout(0) |
||||||
|
|
||||||
|
before(async function () { |
||||||
|
const extPath = path.resolve('dist/firefox') |
||||||
|
driver = buildFirefoxWebdriver() |
||||||
|
installWebExt(driver, extPath) |
||||||
|
await delay(700) |
||||||
|
}) |
||||||
|
|
||||||
|
afterEach(async function () { |
||||||
|
if (this.currentTest.state === 'failed') { |
||||||
|
await verboseReportOnFailure(this.currentTest) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
after(async function () { |
||||||
|
await driver.quit() |
||||||
|
}) |
||||||
|
|
||||||
|
describe('Setup', function () { |
||||||
|
|
||||||
|
it('switches to Firefox addon list', async function () { |
||||||
|
await driver.get('about:debugging#addons') |
||||||
|
await delay(1000) |
||||||
|
}) |
||||||
|
|
||||||
|
it(`selects MetaMask's extension id and opens it in the current tab`, async function () { |
||||||
|
const tabs = await driver.getAllWindowHandles() |
||||||
|
await driver.switchTo().window(tabs[0]) |
||||||
|
extensionId = await driver.findElement(By.css('dd.addon-target-info-content:nth-child(6) > span:nth-child(1)')).getText() |
||||||
|
await driver.get(`moz-extension://${extensionId}/popup.html`) |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('sets provider type to localhost', async function () { |
||||||
|
await setProviderType('localhost') |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('Account Creation', () => { |
||||||
|
|
||||||
|
it('matches MetaMask title', async () => { |
||||||
|
const title = await driver.getTitle() |
||||||
|
assert.equal(title, 'MetaMask', 'title matches MetaMask') |
||||||
|
}) |
||||||
|
|
||||||
|
it('shows privacy notice', async () => { |
||||||
|
await delay(300) |
||||||
|
const privacy = await driver.findElement(By.css('.terms-header')).getText() |
||||||
|
assert.equal(privacy, 'PRIVACY NOTICE', 'shows privacy notice') |
||||||
|
await driver.findElement(By.css('button')).click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('show terms of use', async () => { |
||||||
|
await delay(300) |
||||||
|
const terms = await driver.findElement(By.css('.terms-header')).getText() |
||||||
|
assert.equal(terms, 'TERMS OF USE', 'shows terms of use') |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('checks if the TOU button is disabled', async () => { |
||||||
|
const button = await driver.findElement(By.css('button')).isEnabled() |
||||||
|
assert.equal(button, false, 'disabled continue button') |
||||||
|
const element = await driver.findElement(By.linkText('Attributions')) |
||||||
|
await driver.executeScript('arguments[0].scrollIntoView(true)', element) |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('allows the button to be clicked when scrolled to the bottom of TOU', async () => { |
||||||
|
const button = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-center.flex-grow > button')) |
||||||
|
await delay(300) |
||||||
|
const buttonEnabled = await button.isEnabled() |
||||||
|
assert.equal(buttonEnabled, true, 'enabled continue button') |
||||||
|
await delay(200) |
||||||
|
await button.click() |
||||||
|
}) |
||||||
|
|
||||||
|
it('accepts password with length of eight', async () => { |
||||||
|
const passwordBox = await driver.findElement(By.id('password-box')) |
||||||
|
const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm')) |
||||||
|
const button = await driver.findElements(By.css('button')) |
||||||
|
|
||||||
|
await passwordBox.sendKeys('123456789') |
||||||
|
await passwordBoxConfirm.sendKeys('123456789') |
||||||
|
await button[0].click() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('shows value was created and seed phrase', async () => { |
||||||
|
await delay(300) |
||||||
|
const seedPhrase = await driver.findElement(By.css('.twelve-word-phrase')).getText() |
||||||
|
assert.equal(seedPhrase.split(' ').length, 12) |
||||||
|
const continueAfterSeedPhrase = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > button:nth-child(4)')) |
||||||
|
assert.equal(await continueAfterSeedPhrase.getText(), `I'VE COPIED IT SOMEWHERE SAFE`) |
||||||
|
await continueAfterSeedPhrase.click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('shows account address', async function () { |
||||||
|
accountAddress = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div > div:nth-child(1) > flex-column > div.flex-row > div')).getText() |
||||||
|
}) |
||||||
|
|
||||||
|
it('logs out of the vault', async () => { |
||||||
|
await driver.findElement(By.css('.sandwich-expando')).click() |
||||||
|
await delay(500) |
||||||
|
const logoutButton = await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)')) |
||||||
|
assert.equal(await logoutButton.getText(), 'Log Out') |
||||||
|
await logoutButton.click() |
||||||
|
}) |
||||||
|
|
||||||
|
it('accepts account password after lock', async () => { |
||||||
|
await delay(500) |
||||||
|
await driver.findElement(By.id('password-box')).sendKeys('123456789') |
||||||
|
await driver.findElement(By.id('password-box')).sendKeys(webdriver.Key.ENTER) |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('shows QR code option', async () => { |
||||||
|
await delay(300) |
||||||
|
await driver.findElement(By.css('.fa-ellipsis-h')).click() |
||||||
|
await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(1) > flex-column > div.name-label > div > span > i > div > div > li:nth-child(3)')).click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('checks QR code address is the same as account details address', async () => { |
||||||
|
const QRaccountAddress = await driver.findElement(By.css('.ellip-address')).getText() |
||||||
|
assert.equal(accountAddress.toLowerCase(), QRaccountAddress) |
||||||
|
await driver.findElement(By.css('.fa-arrow-left')).click() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('Import Ganache seed phrase', function () { |
||||||
|
it('logs out', async function () { |
||||||
|
await driver.findElement(By.css('.sandwich-expando')).click() |
||||||
|
await delay(200) |
||||||
|
const logOut = await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)')) |
||||||
|
assert.equal(await logOut.getText(), 'Log Out') |
||||||
|
await logOut.click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('restores from seed phrase', async function () { |
||||||
|
const restoreSeedLink = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div.flex-row.flex-center.flex-grow > p')) |
||||||
|
assert.equal(await restoreSeedLink.getText(), 'Restore from seed phrase') |
||||||
|
await restoreSeedLink.click() |
||||||
|
await delay(100) |
||||||
|
}) |
||||||
|
|
||||||
|
it('adds seed phrase', async function () { |
||||||
|
const testSeedPhrase = 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent' |
||||||
|
const seedTextArea = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > textarea')) |
||||||
|
await seedTextArea.sendKeys(testSeedPhrase) |
||||||
|
|
||||||
|
await driver.findElement(By.id('password-box')).sendKeys('123456789') |
||||||
|
await driver.findElement(By.id('password-box-confirm')).sendKeys('123456789') |
||||||
|
await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > div > button:nth-child(2)')).click() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('balance renders', async function () { |
||||||
|
await delay(200) |
||||||
|
const balance = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div.flex-row > div.ether-balance.ether-balance-amount > div > div > div:nth-child(1) > div:nth-child(1)')) |
||||||
|
assert.equal(await balance.getText(), '100.000') |
||||||
|
await delay(200) |
||||||
|
}) |
||||||
|
|
||||||
|
it('sends transaction', async function () { |
||||||
|
const sendButton = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div.flex-row > button:nth-child(4)')) |
||||||
|
assert.equal(await sendButton.getText(), 'SEND') |
||||||
|
await sendButton.click() |
||||||
|
await delay(200) |
||||||
|
}) |
||||||
|
|
||||||
|
it('adds recipient address and amount', async function () { |
||||||
|
const sendTranscationScreen = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > h3:nth-child(2)')).getText() |
||||||
|
assert.equal(sendTranscationScreen, 'SEND TRANSACTION') |
||||||
|
const inputAddress = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(3) > div > input')) |
||||||
|
const inputAmmount = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(4) > input')) |
||||||
|
await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970') |
||||||
|
await inputAmmount.sendKeys('10') |
||||||
|
await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section:nth-child(4) > button')).click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('confirms transaction', async function () { |
||||||
|
await delay(300) |
||||||
|
await driver.findElement(By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input')).click() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('finds the transaction in the transactions list', async function () { |
||||||
|
const tranasactionAmount = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > section > section > div > div > div > div.ether-balance.ether-balance-amount > div > div > div > div:nth-child(1)')) |
||||||
|
assert.equal(await tranasactionAmount.getText(), '10.0') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('Token Factory', function () { |
||||||
|
|
||||||
|
it('navigates to token factory', async function () { |
||||||
|
await driver.get('http://tokenfactory.surge.sh/') |
||||||
|
}) |
||||||
|
|
||||||
|
it('navigates to create token contract link', async function () { |
||||||
|
const createToken = await driver.findElement(By.css('#bs-example-navbar-collapse-1 > ul > li:nth-child(3) > a')) |
||||||
|
await createToken.click() |
||||||
|
}) |
||||||
|
|
||||||
|
it('adds input for token', async function () { |
||||||
|
const totalSupply = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(5) > input')) |
||||||
|
const tokenName = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(6) > input')) |
||||||
|
const tokenDecimal = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(7) > input')) |
||||||
|
const tokenSymbol = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > div:nth-child(8) > input')) |
||||||
|
const createToken = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > div > button')) |
||||||
|
|
||||||
|
await totalSupply.sendKeys('100') |
||||||
|
await tokenName.sendKeys('Test') |
||||||
|
await tokenDecimal.sendKeys('0') |
||||||
|
await tokenSymbol.sendKeys('TST') |
||||||
|
await createToken.click() |
||||||
|
await delay(1000) |
||||||
|
}) |
||||||
|
|
||||||
|
// There is an issue with blank confirmation window, but the button is still there and the driver is able to clicked (?.?)
|
||||||
|
it('confirms transaction in MetaMask popup', async function () { |
||||||
|
const windowHandles = await driver.getAllWindowHandles() |
||||||
|
await driver.switchTo().window(windowHandles[windowHandles.length - 1]) |
||||||
|
const metamaskSubmit = await driver.findElement(By.css('#pending-tx-form > div.flex-row.flex-space-around.conf-buttons > input')) |
||||||
|
await metamaskSubmit.click() |
||||||
|
await delay(1000) |
||||||
|
}) |
||||||
|
|
||||||
|
it('switches back to Token Factory to grab the token contract address', async function () { |
||||||
|
const windowHandles = await driver.getAllWindowHandles() |
||||||
|
await driver.switchTo().window(windowHandles[0]) |
||||||
|
const tokenContactAddress = await driver.findElement(By.css('#main > div > div > div > div:nth-child(2) > span:nth-child(3)')) |
||||||
|
tokenAddress = await tokenContactAddress.getText() |
||||||
|
await delay(500) |
||||||
|
}) |
||||||
|
|
||||||
|
it('navigates back to MetaMask popup in the tab', async function () { |
||||||
|
await driver.get(`moz-extension://${extensionId}/popup.html`) |
||||||
|
await delay(700) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('Add Token', function () { |
||||||
|
it('switches to the add token screen', async function () { |
||||||
|
const tokensTab = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section > div > div.inactiveForm.pointer')) |
||||||
|
assert.equal(await tokensTab.getText(), 'TOKENS') |
||||||
|
await tokensTab.click() |
||||||
|
await delay(300) |
||||||
|
}) |
||||||
|
|
||||||
|
it('navigates to the add token screen', async function () { |
||||||
|
const addTokenButton = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > section > div.full-flex-height > div > button')) |
||||||
|
assert.equal(await addTokenButton.getText(), 'ADD TOKEN') |
||||||
|
await addTokenButton.click() |
||||||
|
}) |
||||||
|
|
||||||
|
it('checks add token screen rendered', async function () { |
||||||
|
const addTokenScreen = await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.section-title.flex-row.flex-center > h2')) |
||||||
|
assert.equal(await addTokenScreen.getText(), 'ADD TOKEN') |
||||||
|
}) |
||||||
|
|
||||||
|
it('adds token parameters', async function () { |
||||||
|
const tokenContractAddress = await driver.findElement(By.css('#token-address')) |
||||||
|
await tokenContractAddress.sendKeys(tokenAddress) |
||||||
|
await delay(300) |
||||||
|
await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div.flex-column.flex-justify-center.flex-grow.select-none > div > button')).click() |
||||||
|
await delay(100) |
||||||
|
}) |
||||||
|
|
||||||
|
it('checks the token balance', async function () { |
||||||
|
const tokenBalance = await driver.findElement(By.css('#app-content > div > div.app-primary.from-left > div > section > div.full-flex-height > ol > li:nth-child(2) > h3')) |
||||||
|
assert.equal(await tokenBalance.getText(), '100 TST') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
async function setProviderType(type) { |
||||||
|
await driver.executeScript('window.metamask.setProviderType(arguments[0])', type) |
||||||
|
} |
||||||
|
|
||||||
|
async function verboseReportOnFailure(test) { |
||||||
|
const artifactDir = `./test-artifacts/firefox/${test.title}` |
||||||
|
const filepathBase = `${artifactDir}/test-failure` |
||||||
|
await pify(mkdirp)(artifactDir) |
||||||
|
// capture screenshot
|
||||||
|
const screenshot = await driver.takeScreenshot() |
||||||
|
await pify(fs.writeFile)(`${filepathBase}-screenshot.png`, screenshot, { encoding: 'base64' }) |
||||||
|
// capture dom source
|
||||||
|
const htmlSource = await driver.getPageSource() |
||||||
|
await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource) |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
|
||||||
|
async function installWebExt (driver, extension) { |
||||||
|
const cmd = await new Command('moz-install-web-ext') |
||||||
|
.setParameter('path', path.resolve(extension)) |
||||||
|
.setParameter('temporary', true) |
||||||
|
|
||||||
|
await driver.getExecutor() |
||||||
|
.defineCommand(cmd.getName(), 'POST', '/session/:sessionId/moz/addon/install') |
||||||
|
|
||||||
|
return await driver.schedule(cmd, 'installWebExt(' + extension + ')') |
||||||
|
} |
||||||
|
|
||||||
@ -1,145 +0,0 @@ |
|||||||
const fs = require('fs') |
|
||||||
const mkdirp = require('mkdirp') |
|
||||||
const path = require('path') |
|
||||||
const assert = require('assert') |
|
||||||
const pify = require('pify') |
|
||||||
const webdriver = require('selenium-webdriver') |
|
||||||
const By = webdriver.By |
|
||||||
const { delay, buildWebDriver } = require('./func') |
|
||||||
|
|
||||||
describe('Metamask popup page', function () { |
|
||||||
let driver |
|
||||||
this.seedPhase |
|
||||||
this.accountAddress |
|
||||||
this.timeout(0) |
|
||||||
|
|
||||||
before(async function () { |
|
||||||
const extPath = path.resolve('dist/chrome') |
|
||||||
driver = buildWebDriver(extPath) |
|
||||||
await driver.get('chrome://extensions-frame') |
|
||||||
const elems = await driver.findElements(By.css('.extension-list-item-wrapper')) |
|
||||||
const extensionId = await elems[1].getAttribute('id') |
|
||||||
await driver.get(`chrome-extension://${extensionId}/popup.html`) |
|
||||||
await delay(500) |
|
||||||
}) |
|
||||||
|
|
||||||
afterEach(async function () { |
|
||||||
if (this.currentTest.state === 'failed') { |
|
||||||
await verboseReportOnFailure(this.currentTest) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
after(async function () { |
|
||||||
await driver.quit() |
|
||||||
}) |
|
||||||
|
|
||||||
describe('#onboarding', () => { |
|
||||||
it('should open Metamask.io', async function () { |
|
||||||
const tabs = await driver.getAllWindowHandles() |
|
||||||
await driver.switchTo().window(tabs[0]) |
|
||||||
await delay(300) |
|
||||||
await setProviderType('localhost') |
|
||||||
await delay(300) |
|
||||||
}) |
|
||||||
|
|
||||||
it('should match title', async () => { |
|
||||||
const title = await driver.getTitle() |
|
||||||
assert.equal(title, 'MetaMask', 'title matches MetaMask') |
|
||||||
}) |
|
||||||
|
|
||||||
it('should show privacy notice', async () => { |
|
||||||
const privacy = await driver.findElement(By.css('.terms-header')).getText() |
|
||||||
assert.equal(privacy, 'PRIVACY NOTICE', 'shows privacy notice') |
|
||||||
driver.findElement(By.css('button')).click() |
|
||||||
await delay(300) |
|
||||||
}) |
|
||||||
|
|
||||||
it('should show terms of use', async () => { |
|
||||||
await delay(300) |
|
||||||
const terms = await driver.findElement(By.css('.terms-header')).getText() |
|
||||||
assert.equal(terms, 'TERMS OF USE', 'shows terms of use') |
|
||||||
await delay(300) |
|
||||||
}) |
|
||||||
|
|
||||||
it('should be unable to continue without scolling throught the terms of use', async () => { |
|
||||||
const button = await driver.findElement(By.css('button')).isEnabled() |
|
||||||
assert.equal(button, false, 'disabled continue button') |
|
||||||
const element = driver.findElement(By.linkText( |
|
||||||
'Attributions' |
|
||||||
)) |
|
||||||
await driver.executeScript('arguments[0].scrollIntoView(true)', element) |
|
||||||
await delay(300) |
|
||||||
}) |
|
||||||
|
|
||||||
it('should be able to continue when scrolled to the bottom of terms of use', async () => { |
|
||||||
const button = await driver.findElement(By.css('button')) |
|
||||||
const buttonEnabled = await button.isEnabled() |
|
||||||
await delay(500) |
|
||||||
assert.equal(buttonEnabled, true, 'enabled continue button') |
|
||||||
await button.click() |
|
||||||
await delay(300) |
|
||||||
}) |
|
||||||
|
|
||||||
it('should accept password with length of eight', async () => { |
|
||||||
const passwordBox = await driver.findElement(By.id('password-box')) |
|
||||||
const passwordBoxConfirm = await driver.findElement(By.id('password-box-confirm')) |
|
||||||
const button = driver.findElement(By.css('button')) |
|
||||||
|
|
||||||
passwordBox.sendKeys('123456789') |
|
||||||
passwordBoxConfirm.sendKeys('123456789') |
|
||||||
await delay(500) |
|
||||||
await button.click() |
|
||||||
}) |
|
||||||
|
|
||||||
it('should show value was created and seed phrase', async () => { |
|
||||||
await delay(700) |
|
||||||
this.seedPhase = await driver.findElement(By.css('.twelve-word-phrase')).getText() |
|
||||||
const continueAfterSeedPhrase = await driver.findElement(By.css('button')) |
|
||||||
await continueAfterSeedPhrase.click() |
|
||||||
await delay(300) |
|
||||||
}) |
|
||||||
|
|
||||||
it('should show lock account', async () => { |
|
||||||
await driver.findElement(By.css('.sandwich-expando')).click() |
|
||||||
await delay(500) |
|
||||||
await driver.findElement(By.css('#app-content > div > div:nth-child(3) > span > div > li:nth-child(3)')).click() |
|
||||||
}) |
|
||||||
|
|
||||||
it('should accept account password after lock', async () => { |
|
||||||
await delay(500) |
|
||||||
await driver.findElement(By.id('password-box')).sendKeys('123456789') |
|
||||||
await driver.findElement(By.css('button')).click() |
|
||||||
await delay(500) |
|
||||||
}) |
|
||||||
|
|
||||||
it('should show QR code option', async () => { |
|
||||||
await delay(300) |
|
||||||
await driver.findElement(By.css('.fa-ellipsis-h')).click() |
|
||||||
await driver.findElement(By.css('#app-content > div > div.app-primary.from-right > div > div > div:nth-child(1) > flex-column > div.name-label > div > span > i > div > div > li:nth-child(3)')).click() |
|
||||||
await delay(300) |
|
||||||
}) |
|
||||||
|
|
||||||
it('should show the account address', async () => { |
|
||||||
this.accountAddress = await driver.findElement(By.css('.ellip-address')).getText() |
|
||||||
await driver.findElement(By.css('.fa-arrow-left')).click() |
|
||||||
await delay(500) |
|
||||||
}) |
|
||||||
}) |
|
||||||
|
|
||||||
async function setProviderType(type) { |
|
||||||
await driver.executeScript('window.metamask.setProviderType(arguments[0])', type) |
|
||||||
} |
|
||||||
|
|
||||||
async function verboseReportOnFailure(test) { |
|
||||||
const artifactDir = `./test-artifacts/${test.title}` |
|
||||||
const filepathBase = `${artifactDir}/test-failure` |
|
||||||
await pify(mkdirp)(artifactDir) |
|
||||||
// capture screenshot
|
|
||||||
const screenshot = await driver.takeScreenshot() |
|
||||||
await pify(fs.writeFile)(`${filepathBase}-screenshot.png`, screenshot, { encoding: 'base64' }) |
|
||||||
// capture dom source
|
|
||||||
const htmlSource = await driver.getPageSource() |
|
||||||
await pify(fs.writeFile)(`${filepathBase}-dom.html`, htmlSource) |
|
||||||
} |
|
||||||
|
|
||||||
}) |
|
||||||
@ -1,26 +1,129 @@ |
|||||||
const assert = require('assert') |
const assert = require('assert') |
||||||
const clone = require('clone') |
|
||||||
const txStateHistoryHelper = require('../../app/scripts/controllers/transactions/lib/tx-state-history-helper') |
const txStateHistoryHelper = require('../../app/scripts/controllers/transactions/lib/tx-state-history-helper') |
||||||
|
const testVault = require('../data/v17-long-history.json') |
||||||
|
|
||||||
describe('deepCloneFromTxMeta', function () { |
describe ('Transaction state history helper', function () { |
||||||
it('should clone deep', function () { |
|
||||||
const input = { |
describe('#snapshotFromTxMeta', function () { |
||||||
foo: { |
it('should clone deep', function () { |
||||||
bar: { |
const input = { |
||||||
bam: 'baz' |
foo: { |
||||||
|
bar: { |
||||||
|
bam: 'baz' |
||||||
|
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
const output = txStateHistoryHelper.snapshotFromTxMeta(input) |
||||||
const output = txStateHistoryHelper.snapshotFromTxMeta(input) |
assert('foo' in output, 'has a foo key') |
||||||
assert('foo' in output, 'has a foo key') |
assert('bar' in output.foo, 'has a bar key') |
||||||
assert('bar' in output.foo, 'has a bar key') |
assert('bam' in output.foo.bar, 'has a bar key') |
||||||
assert('bam' in output.foo.bar, 'has a bar key') |
assert.equal(output.foo.bar.bam, 'baz', 'has a baz value') |
||||||
assert.equal(output.foo.bar.bam, 'baz', 'has a baz value') |
}) |
||||||
|
|
||||||
|
it('should remove the history key', function () { |
||||||
|
const input = { foo: 'bar', history: 'remembered' } |
||||||
|
const output = txStateHistoryHelper.snapshotFromTxMeta(input) |
||||||
|
assert(typeof output.history, 'undefined', 'should remove history') |
||||||
|
}) |
||||||
}) |
}) |
||||||
|
|
||||||
it('should remove the history key', function () { |
describe('#migrateFromSnapshotsToDiffs', function () { |
||||||
const input = { foo: 'bar', history: 'remembered' } |
it('migrates history to diffs and can recover original values', function () { |
||||||
const output = txStateHistoryHelper.snapshotFromTxMeta(input) |
testVault.data.TransactionController.transactions.forEach((tx, index) => { |
||||||
assert(typeof output.history, 'undefined', 'should remove history') |
const newHistory = txStateHistoryHelper.migrateFromSnapshotsToDiffs(tx.history) |
||||||
|
newHistory.forEach((newEntry, index) => { |
||||||
|
if (index === 0) { |
||||||
|
assert.equal(Array.isArray(newEntry), false, 'initial history item IS NOT a json patch obj') |
||||||
|
} else { |
||||||
|
assert.equal(Array.isArray(newEntry), true, 'non-initial history entry IS a json patch obj') |
||||||
|
} |
||||||
|
const oldEntry = tx.history[index] |
||||||
|
const historySubset = newHistory.slice(0, index + 1) |
||||||
|
const reconstructedValue = txStateHistoryHelper.replayHistory(historySubset) |
||||||
|
assert.deepEqual(oldEntry, reconstructedValue, 'was able to reconstruct old entry from diffs') |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('#replayHistory', function () { |
||||||
|
it('replaying history does not mutate the original obj', function () { |
||||||
|
const initialState = { test: true, message: 'hello', value: 1 } |
||||||
|
const diff1 = [{ |
||||||
|
"op": "replace", |
||||||
|
"path": "/message", |
||||||
|
"value": "haay", |
||||||
|
}] |
||||||
|
const diff2 = [{ |
||||||
|
"op": "replace", |
||||||
|
"path": "/value", |
||||||
|
"value": 2, |
||||||
|
}] |
||||||
|
const history = [initialState, diff1, diff2] |
||||||
|
|
||||||
|
const beforeStateSnapshot = JSON.stringify(initialState) |
||||||
|
const latestState = txStateHistoryHelper.replayHistory(history) |
||||||
|
const afterStateSnapshot = JSON.stringify(initialState) |
||||||
|
|
||||||
|
assert.notEqual(initialState, latestState, 'initial state is not the same obj as the latest state') |
||||||
|
assert.equal(beforeStateSnapshot, afterStateSnapshot, 'initial state is not modified during run') |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
describe('#generateHistoryEntry', function () { |
||||||
|
|
||||||
|
function generateHistoryEntryTest(note) { |
||||||
|
|
||||||
|
const prevState = { |
||||||
|
someValue: 'value 1', |
||||||
|
foo: { |
||||||
|
bar: { |
||||||
|
bam: 'baz' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const nextState = { |
||||||
|
newPropRoot: 'new property - root', |
||||||
|
someValue: 'value 2', |
||||||
|
foo: { |
||||||
|
newPropFirstLevel: 'new property - first level', |
||||||
|
bar: { |
||||||
|
bam: 'baz' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const before = new Date().getTime() |
||||||
|
const result = txStateHistoryHelper.generateHistoryEntry(prevState, nextState, note) |
||||||
|
const after = new Date().getTime() |
||||||
|
|
||||||
|
assert.ok(Array.isArray(result)) |
||||||
|
assert.equal(result.length, 3) |
||||||
|
|
||||||
|
const expectedEntry1 = { op: 'add', path: '/foo/newPropFirstLevel', value: 'new property - first level' } |
||||||
|
assert.equal(result[0].op, expectedEntry1.op) |
||||||
|
assert.equal(result[0].path, expectedEntry1.path) |
||||||
|
assert.equal(result[0].value, expectedEntry1.value) |
||||||
|
assert.equal(result[0].value, expectedEntry1.value) |
||||||
|
if (note)
|
||||||
|
assert.equal(result[0].note, note) |
||||||
|
|
||||||
|
assert.ok(result[0].timestamp >= before && result[0].timestamp <= after) |
||||||
|
|
||||||
|
const expectedEntry2 = { op: 'replace', path: '/someValue', value: 'value 2' } |
||||||
|
assert.deepEqual(result[1], expectedEntry2) |
||||||
|
|
||||||
|
const expectedEntry3 = { op: 'add', path: '/newPropRoot', value: 'new property - root' } |
||||||
|
assert.deepEqual(result[2], expectedEntry3) |
||||||
|
} |
||||||
|
|
||||||
|
it('should generate history entries', function () { |
||||||
|
generateHistoryEntryTest() |
||||||
|
}) |
||||||
|
|
||||||
|
it('should add note to first entry', function () { |
||||||
|
generateHistoryEntryTest('custom note') |
||||||
|
})
|
||||||
}) |
}) |
||||||
}) |
}) |
||||||
@ -1,46 +0,0 @@ |
|||||||
const assert = require('assert') |
|
||||||
const txStateHistoryHelper = require('../../app/scripts/controllers/transactions/lib/tx-state-history-helper') |
|
||||||
const testVault = require('../data/v17-long-history.json') |
|
||||||
|
|
||||||
|
|
||||||
describe('tx-state-history-helper', function () { |
|
||||||
it('migrates history to diffs and can recover original values', function () { |
|
||||||
testVault.data.TransactionController.transactions.forEach((tx, index) => { |
|
||||||
const newHistory = txStateHistoryHelper.migrateFromSnapshotsToDiffs(tx.history) |
|
||||||
newHistory.forEach((newEntry, index) => { |
|
||||||
if (index === 0) { |
|
||||||
assert.equal(Array.isArray(newEntry), false, 'initial history item IS NOT a json patch obj') |
|
||||||
} else { |
|
||||||
assert.equal(Array.isArray(newEntry), true, 'non-initial history entry IS a json patch obj') |
|
||||||
} |
|
||||||
const oldEntry = tx.history[index] |
|
||||||
const historySubset = newHistory.slice(0, index + 1) |
|
||||||
const reconstructedValue = txStateHistoryHelper.replayHistory(historySubset) |
|
||||||
assert.deepEqual(oldEntry, reconstructedValue, 'was able to reconstruct old entry from diffs') |
|
||||||
}) |
|
||||||
}) |
|
||||||
}) |
|
||||||
|
|
||||||
it('replaying history does not mutate the original obj', function () { |
|
||||||
const initialState = { test: true, message: 'hello', value: 1 } |
|
||||||
const diff1 = [{ |
|
||||||
"op": "replace", |
|
||||||
"path": "/message", |
|
||||||
"value": "haay", |
|
||||||
}] |
|
||||||
const diff2 = [{ |
|
||||||
"op": "replace", |
|
||||||
"path": "/value", |
|
||||||
"value": 2, |
|
||||||
}] |
|
||||||
const history = [initialState, diff1, diff2] |
|
||||||
|
|
||||||
const beforeStateSnapshot = JSON.stringify(initialState) |
|
||||||
const latestState = txStateHistoryHelper.replayHistory(history) |
|
||||||
const afterStateSnapshot = JSON.stringify(initialState) |
|
||||||
|
|
||||||
assert.notEqual(initialState, latestState, 'initial state is not the same obj as the latest state') |
|
||||||
assert.equal(beforeStateSnapshot, afterStateSnapshot, 'initial state is not modified during run') |
|
||||||
}) |
|
||||||
|
|
||||||
}) |
|
||||||
@ -0,0 +1,140 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import classnames from 'classnames' |
||||||
|
import { matchPath } from 'react-router-dom' |
||||||
|
|
||||||
|
const { |
||||||
|
ENVIRONMENT_TYPE_NOTIFICATION, |
||||||
|
ENVIRONMENT_TYPE_POPUP, |
||||||
|
} = require('../../../../app/scripts/lib/enums') |
||||||
|
const { DEFAULT_ROUTE, INITIALIZE_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('../../routes') |
||||||
|
const Identicon = require('../identicon') |
||||||
|
const NetworkIndicator = require('../network') |
||||||
|
|
||||||
|
class AppHeader extends Component { |
||||||
|
static propTypes = { |
||||||
|
history: PropTypes.object, |
||||||
|
location: PropTypes.object, |
||||||
|
network: PropTypes.string, |
||||||
|
provider: PropTypes.object, |
||||||
|
networkDropdownOpen: PropTypes.bool, |
||||||
|
showNetworkDropdown: PropTypes.func, |
||||||
|
hideNetworkDropdown: PropTypes.func, |
||||||
|
toggleAccountMenu: PropTypes.func, |
||||||
|
selectedAddress: PropTypes.string, |
||||||
|
isUnlocked: PropTypes.bool, |
||||||
|
} |
||||||
|
|
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
handleNetworkIndicatorClick (event) { |
||||||
|
event.preventDefault() |
||||||
|
event.stopPropagation() |
||||||
|
|
||||||
|
const { networkDropdownOpen, showNetworkDropdown, hideNetworkDropdown } = this.props |
||||||
|
|
||||||
|
return networkDropdownOpen === false |
||||||
|
? showNetworkDropdown() |
||||||
|
: hideNetworkDropdown() |
||||||
|
} |
||||||
|
|
||||||
|
isConfirming () { |
||||||
|
const { location } = this.props |
||||||
|
|
||||||
|
return Boolean(matchPath(location.pathname, { |
||||||
|
path: CONFIRM_TRANSACTION_ROUTE, exact: false, |
||||||
|
})) |
||||||
|
} |
||||||
|
|
||||||
|
renderAccountMenu () { |
||||||
|
const { isUnlocked, toggleAccountMenu, selectedAddress } = this.props |
||||||
|
|
||||||
|
return isUnlocked && ( |
||||||
|
<div |
||||||
|
className={classnames('account-menu__icon', { |
||||||
|
'account-menu__icon--disabled': this.isConfirming(), |
||||||
|
})} |
||||||
|
onClick={() => this.isConfirming() || toggleAccountMenu()} |
||||||
|
> |
||||||
|
<Identicon |
||||||
|
address={selectedAddress} |
||||||
|
diameter={32} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
hideAppHeader () { |
||||||
|
const { location } = this.props |
||||||
|
|
||||||
|
const isInitializing = Boolean(matchPath(location.pathname, { |
||||||
|
path: INITIALIZE_ROUTE, exact: false, |
||||||
|
})) |
||||||
|
|
||||||
|
if (isInitializing) { |
||||||
|
return true |
||||||
|
} |
||||||
|
|
||||||
|
if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) { |
||||||
|
return true |
||||||
|
} |
||||||
|
|
||||||
|
if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_POPUP && this.isConfirming()) { |
||||||
|
return true |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { |
||||||
|
network, |
||||||
|
provider, |
||||||
|
history, |
||||||
|
location, |
||||||
|
isUnlocked, |
||||||
|
} = this.props |
||||||
|
|
||||||
|
if (this.hideAppHeader()) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}> |
||||||
|
<div className="app-header__contents"> |
||||||
|
<div |
||||||
|
className="app-header__logo-container" |
||||||
|
onClick={() => history.push(DEFAULT_ROUTE)} |
||||||
|
> |
||||||
|
<img |
||||||
|
className="app-header__metafox" |
||||||
|
src="/images/metamask-fox.svg" |
||||||
|
height={42} |
||||||
|
width={42} |
||||||
|
/> |
||||||
|
<div className="flex-row"> |
||||||
|
<h1>{ this.context.t('appName') }</h1> |
||||||
|
<div className="app-header__beta-label"> |
||||||
|
{ this.context.t('beta') } |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="app-header__account-menu-container"> |
||||||
|
<div className="network-component-wrapper"> |
||||||
|
<NetworkIndicator |
||||||
|
network={network} |
||||||
|
provider={provider} |
||||||
|
onClick={event => this.handleNetworkIndicatorClick(event)} |
||||||
|
disabled={location.pathname === CONFIRM_TRANSACTION_ROUTE} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{ this.renderAccountMenu() } |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default AppHeader |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import { connect } from 'react-redux' |
||||||
|
import { withRouter } from 'react-router-dom' |
||||||
|
import { compose } from 'recompose' |
||||||
|
|
||||||
|
import AppHeader from './app-header.component' |
||||||
|
const actions = require('../../actions') |
||||||
|
|
||||||
|
const mapStateToProps = state => { |
||||||
|
const { appState, metamask } = state |
||||||
|
const { networkDropdownOpen } = appState |
||||||
|
const { |
||||||
|
network, |
||||||
|
provider, |
||||||
|
selectedAddress, |
||||||
|
isUnlocked, |
||||||
|
} = metamask |
||||||
|
|
||||||
|
return { |
||||||
|
networkDropdownOpen, |
||||||
|
network, |
||||||
|
provider, |
||||||
|
selectedAddress, |
||||||
|
isUnlocked, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => { |
||||||
|
return { |
||||||
|
showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), |
||||||
|
hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), |
||||||
|
toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default compose( |
||||||
|
withRouter, |
||||||
|
connect(mapStateToProps, mapDispatchToProps) |
||||||
|
)(AppHeader) |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
import AppHeader from './app-header.container' |
||||||
|
module.exports = AppHeader |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
const { Component } = require('react') |
||||||
|
const h = require('react-hyperscript') |
||||||
|
const PropTypes = require('prop-types') |
||||||
|
const classnames = require('classnames') |
||||||
|
|
||||||
|
const SECONDARY = 'secondary' |
||||||
|
const CLASSNAME_PRIMARY = 'btn-primary' |
||||||
|
const CLASSNAME_PRIMARY_LARGE = 'btn-primary--lg' |
||||||
|
const CLASSNAME_SECONDARY = 'btn-secondary' |
||||||
|
const CLASSNAME_SECONDARY_LARGE = 'btn-secondary--lg' |
||||||
|
|
||||||
|
const getClassName = (type, large = false) => { |
||||||
|
let output = type === SECONDARY ? CLASSNAME_SECONDARY : CLASSNAME_PRIMARY |
||||||
|
|
||||||
|
if (large) { |
||||||
|
output += ` ${type === SECONDARY ? CLASSNAME_SECONDARY_LARGE : CLASSNAME_PRIMARY_LARGE}` |
||||||
|
} |
||||||
|
|
||||||
|
return output |
||||||
|
} |
||||||
|
|
||||||
|
class Button extends Component { |
||||||
|
render () { |
||||||
|
const { type, large, className, ...buttonProps } = this.props |
||||||
|
|
||||||
|
return ( |
||||||
|
h('button', { |
||||||
|
className: classnames(getClassName(type, large), className), |
||||||
|
...buttonProps, |
||||||
|
}, this.props.children) |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
Button.propTypes = { |
||||||
|
type: PropTypes.string, |
||||||
|
large: PropTypes.bool, |
||||||
|
className: PropTypes.string, |
||||||
|
children: PropTypes.string, |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = Button |
||||||
|
|
||||||
@ -0,0 +1,41 @@ |
|||||||
|
import React from 'react' |
||||||
|
import { storiesOf } from '@storybook/react' |
||||||
|
import { action } from '@storybook/addon-actions' |
||||||
|
import Button from './' |
||||||
|
import { text } from '@storybook/addon-knobs/react' |
||||||
|
|
||||||
|
storiesOf('Button', module) |
||||||
|
.add('primary', () => |
||||||
|
<Button |
||||||
|
onClick={action('clicked')} |
||||||
|
type="primary" |
||||||
|
> |
||||||
|
{text('text', 'Click me')} |
||||||
|
</Button> |
||||||
|
) |
||||||
|
.add('secondary', () => ( |
||||||
|
<Button |
||||||
|
onClick={action('clicked')} |
||||||
|
type="secondary" |
||||||
|
> |
||||||
|
{text('text', 'Click me')} |
||||||
|
</Button> |
||||||
|
)) |
||||||
|
.add('large primary', () => ( |
||||||
|
<Button |
||||||
|
onClick={action('clicked')} |
||||||
|
type="primary" |
||||||
|
large |
||||||
|
> |
||||||
|
{text('text', 'Click me')} |
||||||
|
</Button> |
||||||
|
)) |
||||||
|
.add('large secondary', () => ( |
||||||
|
<Button |
||||||
|
onClick={action('clicked')} |
||||||
|
type="secondary" |
||||||
|
large |
||||||
|
> |
||||||
|
{text('text', 'Click me')} |
||||||
|
</Button> |
||||||
|
)) |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
const Button = require('./button.component') |
||||||
|
module.exports = Button |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
const LoadingScreen = require('./loading-screen.component') |
||||||
|
module.exports = LoadingScreen |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
import UnlockPage from './unlock-page.container' |
||||||
|
module.exports = UnlockPage |
||||||
@ -0,0 +1,180 @@ |
|||||||
|
import React, { Component } from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import Button from 'material-ui/Button' |
||||||
|
import TextField from '../../text-field' |
||||||
|
|
||||||
|
const { ENVIRONMENT_TYPE_POPUP } = require('../../../../../app/scripts/lib/enums') |
||||||
|
const { getEnvironmentType } = require('../../../../../app/scripts/lib/util') |
||||||
|
const getCaretCoordinates = require('textarea-caret') |
||||||
|
const EventEmitter = require('events').EventEmitter |
||||||
|
const Mascot = require('../../mascot') |
||||||
|
const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../../routes') |
||||||
|
|
||||||
|
class UnlockPage extends Component { |
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
constructor (props) { |
||||||
|
super(props) |
||||||
|
|
||||||
|
this.state = { |
||||||
|
password: '', |
||||||
|
error: null, |
||||||
|
} |
||||||
|
|
||||||
|
this.animationEventEmitter = new EventEmitter() |
||||||
|
} |
||||||
|
|
||||||
|
componentWillMount () { |
||||||
|
const { isUnlocked, history } = this.props |
||||||
|
|
||||||
|
if (isUnlocked) { |
||||||
|
history.push(DEFAULT_ROUTE) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
tryUnlockMetamask (password) { |
||||||
|
const { tryUnlockMetamask, history } = this.props |
||||||
|
tryUnlockMetamask(password) |
||||||
|
.then(() => history.push(DEFAULT_ROUTE)) |
||||||
|
.catch(({ message }) => this.setState({ error: message })) |
||||||
|
} |
||||||
|
|
||||||
|
handleSubmit (event) { |
||||||
|
event.preventDefault() |
||||||
|
event.stopPropagation() |
||||||
|
|
||||||
|
const { password } = this.state |
||||||
|
const { tryUnlockMetamask, history } = this.props |
||||||
|
|
||||||
|
if (password === '') { |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
this.setState({ error: null }) |
||||||
|
|
||||||
|
tryUnlockMetamask(password) |
||||||
|
.then(() => history.push(DEFAULT_ROUTE)) |
||||||
|
.catch(({ message }) => this.setState({ error: message })) |
||||||
|
} |
||||||
|
|
||||||
|
handleInputChange ({ target }) { |
||||||
|
this.setState({ password: target.value, error: null }) |
||||||
|
|
||||||
|
// tell mascot to look at page action
|
||||||
|
const element = target |
||||||
|
const boundingRect = element.getBoundingClientRect() |
||||||
|
const coordinates = getCaretCoordinates(element, element.selectionEnd) |
||||||
|
this.animationEventEmitter.emit('point', { |
||||||
|
x: boundingRect.left + coordinates.left - element.scrollLeft, |
||||||
|
y: boundingRect.top + coordinates.top - element.scrollTop, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
renderSubmitButton () { |
||||||
|
const style = { |
||||||
|
backgroundColor: '#f7861c', |
||||||
|
color: 'white', |
||||||
|
marginTop: '20px', |
||||||
|
height: '60px', |
||||||
|
fontWeight: '400', |
||||||
|
boxShadow: 'none', |
||||||
|
borderRadius: '4px', |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Button |
||||||
|
type="submit" |
||||||
|
style={style} |
||||||
|
disabled={!this.state.password} |
||||||
|
fullWidth |
||||||
|
variant="raised" |
||||||
|
size="large" |
||||||
|
onClick={event => this.handleSubmit(event)} |
||||||
|
disableRipple |
||||||
|
> |
||||||
|
{ this.context.t('login') } |
||||||
|
</Button> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { error } = this.state |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="unlock-page__container"> |
||||||
|
<div className="unlock-page"> |
||||||
|
<div className="unlock-page__mascot-container"> |
||||||
|
<Mascot |
||||||
|
animationEventEmitter={this.animationEventEmitter} |
||||||
|
width="120" |
||||||
|
height="120" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<h1 className="unlock-page__title"> |
||||||
|
{ this.context.t('welcomeBack') } |
||||||
|
</h1> |
||||||
|
<div>{ this.context.t('unlockMessage') }</div> |
||||||
|
<form |
||||||
|
className="unlock-page__form" |
||||||
|
onSubmit={event => this.handleSubmit(event)} |
||||||
|
> |
||||||
|
<TextField |
||||||
|
id="password" |
||||||
|
label="Password" |
||||||
|
type="password" |
||||||
|
value={this.state.password} |
||||||
|
onChange={event => this.handleInputChange(event)} |
||||||
|
error={error} |
||||||
|
autoFocus |
||||||
|
autoComplete="current-password" |
||||||
|
fullWidth |
||||||
|
/> |
||||||
|
</form> |
||||||
|
{ this.renderSubmitButton() } |
||||||
|
<div className="unlock-page__links"> |
||||||
|
<div |
||||||
|
className="unlock-page__link" |
||||||
|
onClick={() => { |
||||||
|
this.props.markPasswordForgotten() |
||||||
|
this.props.history.push(RESTORE_VAULT_ROUTE) |
||||||
|
|
||||||
|
if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { |
||||||
|
global.platform.openExtensionInBrowser() |
||||||
|
} |
||||||
|
}} |
||||||
|
> |
||||||
|
{ this.context.t('restoreFromSeed') } |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className="unlock-page__link unlock-page__link--import" |
||||||
|
onClick={() => { |
||||||
|
this.props.markPasswordForgotten() |
||||||
|
this.props.history.push(RESTORE_VAULT_ROUTE) |
||||||
|
|
||||||
|
if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { |
||||||
|
global.platform.openExtensionInBrowser() |
||||||
|
} |
||||||
|
}} |
||||||
|
> |
||||||
|
{ this.context.t('importUsingSeed') } |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
UnlockPage.propTypes = { |
||||||
|
forgotPassword: PropTypes.func, |
||||||
|
tryUnlockMetamask: PropTypes.func, |
||||||
|
markPasswordForgotten: PropTypes.func, |
||||||
|
history: PropTypes.object, |
||||||
|
isUnlocked: PropTypes.bool, |
||||||
|
t: PropTypes.func, |
||||||
|
useOldInterface: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
export default UnlockPage |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
import { connect } from 'react-redux' |
||||||
|
import { withRouter } from 'react-router-dom' |
||||||
|
import { compose } from 'recompose' |
||||||
|
|
||||||
|
const { |
||||||
|
tryUnlockMetamask, |
||||||
|
forgotPassword, |
||||||
|
markPasswordForgotten, |
||||||
|
} = require('../../../actions') |
||||||
|
|
||||||
|
import UnlockPage from './unlock-page.component' |
||||||
|
|
||||||
|
const mapStateToProps = state => { |
||||||
|
const { metamask: { isUnlocked } } = state |
||||||
|
return { |
||||||
|
isUnlocked, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => { |
||||||
|
return { |
||||||
|
forgotPassword: () => dispatch(forgotPassword()), |
||||||
|
tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), |
||||||
|
markPasswordForgotten: () => dispatch(markPasswordForgotten()), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default compose( |
||||||
|
withRouter, |
||||||
|
connect(mapStateToProps, mapDispatchToProps) |
||||||
|
)(UnlockPage) |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
.unlock-page { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: flex-start; |
||||||
|
align-items: center; |
||||||
|
width: 357px; |
||||||
|
padding: 30px; |
||||||
|
font-weight: 400; |
||||||
|
color: $silver-chalice; |
||||||
|
|
||||||
|
&__container { |
||||||
|
background: $white; |
||||||
|
display: flex; |
||||||
|
align-self: stretch; |
||||||
|
justify-content: center; |
||||||
|
flex: 1 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
&__mascot-container { |
||||||
|
margin-top: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
&__title { |
||||||
|
margin-top: 5px; |
||||||
|
font-size: 2rem; |
||||||
|
font-weight: 800; |
||||||
|
color: $tundora; |
||||||
|
} |
||||||
|
|
||||||
|
&__form { |
||||||
|
width: 100%; |
||||||
|
margin: 56px 0 8px; |
||||||
|
} |
||||||
|
|
||||||
|
&__links { |
||||||
|
margin-top: 25px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
&__link { |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&--import { |
||||||
|
color: $ecstasy; |
||||||
|
} |
||||||
|
|
||||||
|
&--use-classic { |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1,194 +0,0 @@ |
|||||||
const { Component } = require('react') |
|
||||||
const PropTypes = require('prop-types') |
|
||||||
const connect = require('../../metamask-connect') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const { withRouter } = require('react-router-dom') |
|
||||||
const { compose } = require('recompose') |
|
||||||
const { |
|
||||||
tryUnlockMetamask, |
|
||||||
forgotPassword, |
|
||||||
markPasswordForgotten, |
|
||||||
setNetworkEndpoints, |
|
||||||
setFeatureFlag, |
|
||||||
} = require('../../actions') |
|
||||||
const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums') |
|
||||||
const { getEnvironmentType } = require('../../../../app/scripts/lib/util') |
|
||||||
const getCaretCoordinates = require('textarea-caret') |
|
||||||
const EventEmitter = require('events').EventEmitter |
|
||||||
const Mascot = require('../mascot') |
|
||||||
const { OLD_UI_NETWORK_TYPE } = require('../../../../app/scripts/controllers/network/enums') |
|
||||||
const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../routes') |
|
||||||
|
|
||||||
class UnlockScreen extends Component { |
|
||||||
constructor (props) { |
|
||||||
super(props) |
|
||||||
|
|
||||||
this.state = { |
|
||||||
error: null, |
|
||||||
} |
|
||||||
|
|
||||||
this.animationEventEmitter = new EventEmitter() |
|
||||||
} |
|
||||||
|
|
||||||
componentWillMount () { |
|
||||||
const { isUnlocked, history } = this.props |
|
||||||
|
|
||||||
if (isUnlocked) { |
|
||||||
history.push(DEFAULT_ROUTE) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
componentDidMount () { |
|
||||||
const passwordBox = document.getElementById('password-box') |
|
||||||
|
|
||||||
if (passwordBox) { |
|
||||||
passwordBox.focus() |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
tryUnlockMetamask (password) { |
|
||||||
const { tryUnlockMetamask, history } = this.props |
|
||||||
tryUnlockMetamask(password) |
|
||||||
.then(() => history.push(DEFAULT_ROUTE)) |
|
||||||
.catch(({ message }) => this.setState({ error: message })) |
|
||||||
} |
|
||||||
|
|
||||||
onSubmit (event) { |
|
||||||
const input = document.getElementById('password-box') |
|
||||||
const password = input.value |
|
||||||
this.tryUnlockMetamask(password) |
|
||||||
} |
|
||||||
|
|
||||||
onKeyPress (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
this.submitPassword(event) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
submitPassword (event) { |
|
||||||
var element = event.target |
|
||||||
var password = element.value |
|
||||||
// reset input
|
|
||||||
element.value = '' |
|
||||||
this.tryUnlockMetamask(password) |
|
||||||
} |
|
||||||
|
|
||||||
inputChanged (event) { |
|
||||||
// tell mascot to look at page action
|
|
||||||
var element = event.target |
|
||||||
var boundingRect = element.getBoundingClientRect() |
|
||||||
var coordinates = getCaretCoordinates(element, element.selectionEnd) |
|
||||||
this.animationEventEmitter.emit('point', { |
|
||||||
x: boundingRect.left + coordinates.left - element.scrollLeft, |
|
||||||
y: boundingRect.top + coordinates.top - element.scrollTop, |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
const { error } = this.state |
|
||||||
return ( |
|
||||||
h('.unlock-screen', [ |
|
||||||
|
|
||||||
h(Mascot, { |
|
||||||
animationEventEmitter: this.animationEventEmitter, |
|
||||||
}), |
|
||||||
|
|
||||||
h('h1', { |
|
||||||
style: { |
|
||||||
fontSize: '1.4em', |
|
||||||
textTransform: 'uppercase', |
|
||||||
color: '#7F8082', |
|
||||||
}, |
|
||||||
}, this.props.t('appName')), |
|
||||||
|
|
||||||
h('input.large-input', { |
|
||||||
type: 'password', |
|
||||||
id: 'password-box', |
|
||||||
placeholder: 'enter password', |
|
||||||
style: { |
|
||||||
background: 'white', |
|
||||||
}, |
|
||||||
onKeyPress: this.onKeyPress.bind(this), |
|
||||||
onInput: this.inputChanged.bind(this), |
|
||||||
}), |
|
||||||
|
|
||||||
h('.error', { |
|
||||||
style: { |
|
||||||
display: error ? 'block' : 'none', |
|
||||||
padding: '0 20px', |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, error), |
|
||||||
|
|
||||||
h('button.primary.cursor-pointer', { |
|
||||||
onClick: this.onSubmit.bind(this), |
|
||||||
style: { |
|
||||||
margin: 10, |
|
||||||
}, |
|
||||||
}, this.props.t('login')), |
|
||||||
|
|
||||||
h('p.pointer', { |
|
||||||
onClick: () => { |
|
||||||
this.props.markPasswordForgotten() |
|
||||||
this.props.history.push(RESTORE_VAULT_ROUTE) |
|
||||||
|
|
||||||
if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { |
|
||||||
global.platform.openExtensionInBrowser() |
|
||||||
} |
|
||||||
}, |
|
||||||
style: { |
|
||||||
fontSize: '0.8em', |
|
||||||
color: 'rgb(247, 134, 28)', |
|
||||||
textDecoration: 'underline', |
|
||||||
}, |
|
||||||
}, this.props.t('restoreFromSeed')), |
|
||||||
|
|
||||||
h('p.pointer', { |
|
||||||
onClick: () => { |
|
||||||
this.props.useOldInterface() |
|
||||||
.then(() => this.props.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)) |
|
||||||
}, |
|
||||||
style: { |
|
||||||
fontSize: '0.8em', |
|
||||||
color: '#aeaeae', |
|
||||||
textDecoration: 'underline', |
|
||||||
marginTop: '32px', |
|
||||||
}, |
|
||||||
}, this.props.t('classicInterface')), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.propTypes = { |
|
||||||
forgotPassword: PropTypes.func, |
|
||||||
tryUnlockMetamask: PropTypes.func, |
|
||||||
markPasswordForgotten: PropTypes.func, |
|
||||||
history: PropTypes.object, |
|
||||||
isUnlocked: PropTypes.bool, |
|
||||||
t: PropTypes.func, |
|
||||||
useOldInterface: PropTypes.func, |
|
||||||
setNetworkEndpoints: PropTypes.func, |
|
||||||
} |
|
||||||
|
|
||||||
const mapStateToProps = state => { |
|
||||||
const { metamask: { isUnlocked } } = state |
|
||||||
return { |
|
||||||
isUnlocked, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => { |
|
||||||
return { |
|
||||||
forgotPassword: () => dispatch(forgotPassword()), |
|
||||||
tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), |
|
||||||
markPasswordForgotten: () => dispatch(markPasswordForgotten()), |
|
||||||
useOldInterface: () => dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')), |
|
||||||
setNetworkEndpoints: type => dispatch(setNetworkEndpoints(type)), |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = compose( |
|
||||||
withRouter, |
|
||||||
connect(mapStateToProps, mapDispatchToProps) |
|
||||||
)(UnlockScreen) |
|
||||||
@ -0,0 +1,2 @@ |
|||||||
|
const Spinner = require('./spinner.component') |
||||||
|
module.exports = Spinner |
||||||
@ -0,0 +1,78 @@ |
|||||||
|
import React from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
|
||||||
|
const Spinner = ({ className = '', color = '#000000' }) => { |
||||||
|
return ( |
||||||
|
<div className={`spinner ${className}`}> |
||||||
|
<svg className="lds-spinner" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style={{background: 'none'}}> |
||||||
|
<g transform="rotate(0 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(30 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(60 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.75s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(90 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(120 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(150 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(180 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(210 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(240 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.25s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(270 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(300 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
<g transform="rotate(330 50 50)"> |
||||||
|
<rect x={45} y={0} rx={0} ry={0} width={10} height={30} fill={color}> |
||||||
|
<animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" /> |
||||||
|
</rect> |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
Spinner.propTypes = { |
||||||
|
className: PropTypes.string, |
||||||
|
color: PropTypes.string, |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = Spinner |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
import TextField from './text-field.component' |
||||||
|
module.exports = TextField |
||||||
@ -0,0 +1,59 @@ |
|||||||
|
import React from 'react' |
||||||
|
import PropTypes from 'prop-types' |
||||||
|
import { withStyles } from 'material-ui/styles' |
||||||
|
import { default as MaterialTextField } from 'material-ui/TextField' |
||||||
|
|
||||||
|
const styles = { |
||||||
|
cssLabel: { |
||||||
|
'&$cssFocused': { |
||||||
|
color: '#aeaeae', |
||||||
|
}, |
||||||
|
'&$cssError': { |
||||||
|
color: '#aeaeae', |
||||||
|
}, |
||||||
|
fontWeight: '400', |
||||||
|
color: '#aeaeae', |
||||||
|
}, |
||||||
|
cssFocused: {}, |
||||||
|
cssUnderline: { |
||||||
|
'&:after': { |
||||||
|
backgroundColor: '#f7861c', |
||||||
|
}, |
||||||
|
}, |
||||||
|
cssError: {}, |
||||||
|
} |
||||||
|
|
||||||
|
const TextField = props => { |
||||||
|
const { error, classes, ...textFieldProps } = props |
||||||
|
|
||||||
|
return ( |
||||||
|
<MaterialTextField |
||||||
|
error={Boolean(error)} |
||||||
|
helperText={error} |
||||||
|
InputLabelProps={{ |
||||||
|
FormLabelClasses: { |
||||||
|
root: classes.cssLabel, |
||||||
|
focused: classes.cssFocused, |
||||||
|
error: classes.cssError, |
||||||
|
}, |
||||||
|
}} |
||||||
|
InputProps={{ |
||||||
|
classes: { |
||||||
|
underline: classes.cssUnderline, |
||||||
|
}, |
||||||
|
}} |
||||||
|
{...textFieldProps} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
TextField.defaultProps = { |
||||||
|
error: null, |
||||||
|
} |
||||||
|
|
||||||
|
TextField.propTypes = { |
||||||
|
error: PropTypes.string, |
||||||
|
classes: PropTypes.object, |
||||||
|
} |
||||||
|
|
||||||
|
export default withStyles(styles)(TextField) |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
import React from 'react' |
||||||
|
import { storiesOf } from '@storybook/react' |
||||||
|
import TextField from './' |
||||||
|
|
||||||
|
storiesOf('TextField', module) |
||||||
|
.add('text', () => |
||||||
|
<TextField |
||||||
|
label="Text" |
||||||
|
type="text" |
||||||
|
/> |
||||||
|
) |
||||||
|
.add('password', () => |
||||||
|
<TextField |
||||||
|
label="Password" |
||||||
|
type="password" |
||||||
|
/> |
||||||
|
) |
||||||
|
.add('error', () => |
||||||
|
<TextField |
||||||
|
type="text" |
||||||
|
label="Name" |
||||||
|
error="Invalid value" |
||||||
|
/> |
||||||
|
) |
||||||
@ -1,3 +1,3 @@ |
|||||||
@import './unlock.scss'; |
|
||||||
|
|
||||||
@import './reveal-seed.scss'; |
@import './reveal-seed.scss'; |
||||||
|
|
||||||
|
@import '../../../../components/pages/unlock-page/unlock-page.scss'; |
||||||
|
|||||||
@ -1,9 +0,0 @@ |
|||||||
.unlock-page { |
|
||||||
box-shadow: none; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
background: rgb(247, 247, 247); |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
@ -1,59 +1,60 @@ |
|||||||
.welcome-screen { |
.welcome-screen { |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-family: Roboto; |
||||||
|
font-weight: 400; |
||||||
|
width: 100%; |
||||||
|
flex: 1 0 auto; |
||||||
|
padding: 70px 0; |
||||||
|
background: $white; |
||||||
|
|
||||||
|
@media screen and (max-width: 575px) { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&__info { |
||||||
display: flex; |
display: flex; |
||||||
flex-flow: column; |
flex-flow: column; |
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
font-family: Roboto; |
|
||||||
font-weight: 400; |
|
||||||
width: 100%; |
width: 100%; |
||||||
flex: 1 0 auto; |
height: 100%; |
||||||
padding: 70px 0; |
align-items: center; |
||||||
background: $white; |
justify-content: center; |
||||||
|
|
||||||
@media screen and (max-width: 575px) { |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
&__info { |
|
||||||
display: flex; |
|
||||||
flex-flow: column; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
&__header { |
|
||||||
font-size: 1.65em; |
|
||||||
margin-bottom: 14px; |
|
||||||
|
|
||||||
@media screen and (max-width: 575px) { |
|
||||||
font-size: 1.5em; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&__copy { |
&__header { |
||||||
font-size: 1em; |
font-size: 1.65em; |
||||||
width: 400px; |
margin-bottom: 14px; |
||||||
max-width: 90vw; |
|
||||||
text-align: center; |
|
||||||
|
|
||||||
@media screen and (max-width: 575px) { |
@media screen and (max-width: 575px) { |
||||||
font-size: 0.9em; |
font-size: 1.5em; |
||||||
} |
} |
||||||
} |
|
||||||
} |
} |
||||||
|
|
||||||
&__button { |
&__copy { |
||||||
height: 54px; |
font-size: 1em; |
||||||
width: 198px; |
width: 400px; |
||||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14); |
max-width: 90vw; |
||||||
color: #FFFFFF; |
|
||||||
font-size: 20px; |
|
||||||
font-weight: 500; |
|
||||||
line-height: 26px; |
|
||||||
text-align: center; |
text-align: center; |
||||||
text-transform: uppercase; |
|
||||||
margin: 35px 0 14px; |
@media screen and (max-width: 575px) { |
||||||
transition: 200ms ease-in-out; |
font-size: .9em; |
||||||
background-color: rgba(247, 134, 28, 0.9); |
} |
||||||
} |
} |
||||||
|
} |
||||||
|
|
||||||
|
&__button { |
||||||
|
height: 54px; |
||||||
|
width: 198px; |
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14); |
||||||
|
color: #fff; |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 26px; |
||||||
|
text-align: center; |
||||||
|
text-transform: uppercase; |
||||||
|
margin: 35px 0 14px; |
||||||
|
transition: 200ms ease-in-out; |
||||||
|
background-color: rgba(247, 134, 28, .9); |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,141 +0,0 @@ |
|||||||
const inherits = require('util').inherits |
|
||||||
const Component = require('react').Component |
|
||||||
const PropTypes = require('prop-types') |
|
||||||
const h = require('react-hyperscript') |
|
||||||
const connect = require('react-redux').connect |
|
||||||
const actions = require('./actions') |
|
||||||
const getCaretCoordinates = require('textarea-caret') |
|
||||||
const EventEmitter = require('events').EventEmitter |
|
||||||
const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/controllers/network/enums') |
|
||||||
const { getEnvironmentType } = require('../../app/scripts/lib/util') |
|
||||||
const { ENVIRONMENT_TYPE_POPUP } = require('../../app/scripts/lib/enums') |
|
||||||
|
|
||||||
const Mascot = require('./components/mascot') |
|
||||||
|
|
||||||
UnlockScreen.contextTypes = { |
|
||||||
t: PropTypes.func, |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(UnlockScreen) |
|
||||||
|
|
||||||
|
|
||||||
inherits(UnlockScreen, Component) |
|
||||||
function UnlockScreen () { |
|
||||||
Component.call(this) |
|
||||||
this.animationEventEmitter = new EventEmitter() |
|
||||||
} |
|
||||||
|
|
||||||
function mapStateToProps (state) { |
|
||||||
return { |
|
||||||
warning: state.appState.warning, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.render = function () { |
|
||||||
const state = this.props |
|
||||||
const warning = state.warning |
|
||||||
return ( |
|
||||||
h('.unlock-screen', [ |
|
||||||
|
|
||||||
h(Mascot, { |
|
||||||
animationEventEmitter: this.animationEventEmitter, |
|
||||||
}), |
|
||||||
|
|
||||||
h('h1', { |
|
||||||
style: { |
|
||||||
fontSize: '1.4em', |
|
||||||
textTransform: 'uppercase', |
|
||||||
color: '#7F8082', |
|
||||||
}, |
|
||||||
}, this.context.t('appName')), |
|
||||||
|
|
||||||
h('input.large-input', { |
|
||||||
type: 'password', |
|
||||||
id: 'password-box', |
|
||||||
placeholder: 'enter password', |
|
||||||
style: { |
|
||||||
background: 'white', |
|
||||||
}, |
|
||||||
onKeyPress: this.onKeyPress.bind(this), |
|
||||||
onInput: this.inputChanged.bind(this), |
|
||||||
}), |
|
||||||
|
|
||||||
h('.error', { |
|
||||||
style: { |
|
||||||
display: warning ? 'block' : 'none', |
|
||||||
padding: '0 20px', |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, warning), |
|
||||||
|
|
||||||
h('button.primary.cursor-pointer', { |
|
||||||
onClick: this.onSubmit.bind(this), |
|
||||||
style: { |
|
||||||
margin: 10, |
|
||||||
}, |
|
||||||
}, this.context.t('login')), |
|
||||||
|
|
||||||
h('p.pointer', { |
|
||||||
onClick: () => { |
|
||||||
this.props.dispatch(actions.markPasswordForgotten()) |
|
||||||
if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { |
|
||||||
global.platform.openExtensionInBrowser() |
|
||||||
} |
|
||||||
}, |
|
||||||
style: { |
|
||||||
fontSize: '0.8em', |
|
||||||
color: 'rgb(247, 134, 28)', |
|
||||||
textDecoration: 'underline', |
|
||||||
}, |
|
||||||
}, this.context.t('restoreFromSeed')), |
|
||||||
|
|
||||||
h('p.pointer', { |
|
||||||
onClick: () => { |
|
||||||
this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')) |
|
||||||
.then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE))) |
|
||||||
}, |
|
||||||
style: { |
|
||||||
fontSize: '0.8em', |
|
||||||
color: '#aeaeae', |
|
||||||
textDecoration: 'underline', |
|
||||||
marginTop: '32px', |
|
||||||
}, |
|
||||||
}, this.context.t('classicInterface')), |
|
||||||
]) |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.componentDidMount = function () { |
|
||||||
document.getElementById('password-box').focus() |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.onSubmit = function (event) { |
|
||||||
const input = document.getElementById('password-box') |
|
||||||
const password = input.value |
|
||||||
this.props.dispatch(actions.tryUnlockMetamask(password)) |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.onKeyPress = function (event) { |
|
||||||
if (event.key === 'Enter') { |
|
||||||
this.submitPassword(event) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.submitPassword = function (event) { |
|
||||||
var element = event.target |
|
||||||
var password = element.value |
|
||||||
// reset input
|
|
||||||
element.value = '' |
|
||||||
this.props.dispatch(actions.tryUnlockMetamask(password)) |
|
||||||
} |
|
||||||
|
|
||||||
UnlockScreen.prototype.inputChanged = function (event) { |
|
||||||
// tell mascot to look at page action
|
|
||||||
var element = event.target |
|
||||||
var boundingRect = element.getBoundingClientRect() |
|
||||||
var coordinates = getCaretCoordinates(element, element.selectionEnd) |
|
||||||
this.animationEventEmitter.emit('point', { |
|
||||||
x: boundingRect.left + coordinates.left - element.scrollLeft, |
|
||||||
y: boundingRect.top + coordinates.top - element.scrollTop, |
|
||||||
}) |
|
||||||
} |
|
||||||
Loading…
Reference in new issue