Merge branch 'develop' of github.com:MetaMask/metamask-extension into scsaba-transaction-history-timestamps
kumavis
7 years ago
commit
44f31f9a7e
@ -1,3 +1,6 @@ |
||||
{ |
||||
"exceptions": ["https://nodesecurity.io/advisories/566"] |
||||
"exceptions": [ |
||||
"https://nodesecurity.io/advisories/566", |
||||
"https://nodesecurity.io/advisories/157" |
||||
] |
||||
} |
||||
|
||||
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) |
||||
} |
||||
|
||||
}) |
||||
@ -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,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 @@ |
||||
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 '../../../../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 { |
||||
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; |
||||
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; |
||||
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; |
||||
} |
||||
} |
||||
height: 100%; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
&__copy { |
||||
font-size: 1em; |
||||
width: 400px; |
||||
max-width: 90vw; |
||||
text-align: center; |
||||
&__header { |
||||
font-size: 1.65em; |
||||
margin-bottom: 14px; |
||||
|
||||
@media screen and (max-width: 575px) { |
||||
font-size: 0.9em; |
||||
} |
||||
} |
||||
@media screen and (max-width: 575px) { |
||||
font-size: 1.5em; |
||||
} |
||||
} |
||||
|
||||
&__button { |
||||
height: 54px; |
||||
width: 198px; |
||||
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14); |
||||
color: #FFFFFF; |
||||
font-size: 20px; |
||||
font-weight: 500; |
||||
line-height: 26px; |
||||
&__copy { |
||||
font-size: 1em; |
||||
width: 400px; |
||||
max-width: 90vw; |
||||
text-align: center; |
||||
text-transform: uppercase; |
||||
margin: 35px 0 14px; |
||||
transition: 200ms ease-in-out; |
||||
background-color: rgba(247, 134, 28, 0.9); |
||||
|
||||
@media screen and (max-width: 575px) { |
||||
font-size: .9em; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__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