poanetwork
/
nifty-wallet
mirror of https://github.com/poanetwork/nifty-wallet.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'develop' into e2e-tests

This commit is contained in:
Thomas 2018-05-08 13:10:26 -07:00
parent d59105299a c3079ff160
commit 26c6bddebf
23 changed files with 3195 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.storybook/README.md Normal file
View File

@ -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.

2
.storybook/addons.js Normal file
View File

@ -0,0 +1,2 @@
import '@storybook/addon-knobs/register'
import '@storybook/addon-actions/register'

11
.storybook/config.js Normal file
View File

@ -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)

21
.storybook/decorators.js Normal file
View File

@ -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)

37
.storybook/webpack.config.js Normal file
View File

@ -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'),
},
},
}

3009
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -44,7 +44,8 @@
"announce": "node development/announcer.js",
"version:bump": "node development/run-version-bump.js",
"generateNotice": "node notices/notice-generator.js",
"deleteNotice": "node notices/notice-delete.js"
"deleteNotice": "node notices/notice-delete.js",
"storybook": "start-storybook -p 6006 -c .storybook"
},
"browserify": {
"transform": [
@ -194,6 +195,9 @@
},
"devDependencies": {
"@sentry/cli": "^1.30.3",
"@storybook/addon-info": "^3.4.2",
"@storybook/addon-knobs": "^3.4.2",
"@storybook/react": "^3.4.2",
"babel-core": "^6.24.1",
"babel-eslint": "^8.0.0",
"babel-plugin-transform-async-to-generator": "^6.24.1",
@ -211,6 +215,7 @@
"compression": "^1.7.1",
"coveralls": "^3.0.0",
"cross-env": "^5.1.4",
"css-loader": "^0.28.11",
"deep-freeze-strict": "^1.1.1",
"del": "^3.0.0",
"envify": "^4.0.0",
@ -221,6 +226,7 @@
"eslint-plugin-mocha": "^5.0.0",
"eslint-plugin-react": "^7.4.0",
"eth-json-rpc-middleware": "^1.6.0",
"file-loader": "^1.1.11",
"fs-promise": "^2.0.3",
"ganache-cli": "^6.1.0",
"ganache-core": "^2.1.0",

43
ui/app/components/button/button.component.js Normal file
View File

@ -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

41
ui/app/components/button/button.stories.js Normal file
View File

@ -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>
))

2
ui/app/components/button/index.js Normal file
View File

@ -0,0 +1,2 @@
const Button = require('./button.component')
module.exports = Button

3
ui/app/css/itcss/components/account-dropdown.scss
View File

@ -33,7 +33,7 @@
margin-top: 4px;
position: relative;
}
&__account-name {
font-size: 16px;
margin-left: 8px;
@ -50,7 +50,6 @@
font-family: Roboto;
line-height: 16px;
font-size: 12px;
font-weight: 300;
}
&__account-primary-balance {

3
ui/app/css/itcss/components/account-menu.scss
View File

@ -40,7 +40,6 @@
font-size: 12px;
line-height: 23px;
padding: 0 24px;
font-weight: 300;
}
&__item-icon {
@ -113,7 +112,6 @@
&__name {
color: $white;
font-size: 18px;
font-weight: 300;
}
&__balance {
@ -124,7 +122,6 @@
&__action {
font-size: 16px;
line-height: 18px;
font-weight: 300;
cursor: pointer;
}
}

1
ui/app/css/itcss/components/add-token.scss
View File

@ -377,7 +377,6 @@
&__amount {
color: $scorpion;
font-size: 43px;
font-weight: 300;
line-height: 43px;
margin-right: 8px;
}

1
ui/app/css/itcss/components/buttons.scss
View File

@ -18,6 +18,7 @@
padding: 0 20px;
min-width: 140px;
text-transform: uppercase;
outline: none;
}
.btn-primary,

4
ui/app/css/itcss/components/confirm.scss
View File

@ -175,7 +175,6 @@
margin-top: 12px;
text-align: center;
font-size: 40px;
font-weight: 300;
line-height: 53px;
flex: 0 0 auto;
}
@ -235,7 +234,6 @@ section .confirm-screen-account-number,
padding-left: 35px;
font-size: 16px;
line-height: 22px;
font-weight: 300;
&:not(:last-of-type) {
border-bottom: 1px solid $alto;
@ -336,7 +334,6 @@ section .confirm-screen-account-number,
border-width: 0;
box-shadow: none;
flex: 1 0 auto;
font-weight: 300;
margin: 0 5px;
}
@ -353,6 +350,5 @@ section .confirm-screen-account-number,
box-shadow: none;
cursor: pointer;
flex: 1 0 auto;
font-weight: 300;
margin: 0 5px;
}

1
ui/app/css/itcss/components/currency-display.scss
View File

@ -7,7 +7,6 @@
color: $scorpion;
font-family: Roboto;
font-size: 16px;
font-weight: 300;
padding: 8px 10px;
position: relative;

1
ui/app/css/itcss/components/menu.scss
View File

@ -11,7 +11,6 @@
flex-flow: row nowrap;
align-items: center;
position: relative;
font-weight: 300;
z-index: 201;
@media screen and (max-width: 575px) {

2
ui/app/css/itcss/components/modal.scss
View File

@ -368,7 +368,6 @@
resize: none;
padding: 9px 13px 8px;
text-transform: uppercase;
font-weight: 300;
}
@ -796,7 +795,6 @@
.simple-dropdown {
color: #5B5D67;
font-size: 16px;
font-weight: 300;
line-height: 21px;
border: 1px solid #D8D8D8;
background-color: #FFFFFF;

2
ui/app/css/itcss/components/newui-sections.scss
View File

@ -117,7 +117,6 @@ $wallet-view-bg: $alabaster;
font-size: 14px;
line-height: 12px;
padding: 4px 12px;
font-weight: 300;
cursor: pointer;
flex: 0 0 auto;
@ -264,7 +263,6 @@ $wallet-view-bg: $alabaster;
// wallet view
.account-name {
font-size: 24px;
font-weight: 300;
color: $black;
margin-top: 8px;
margin-bottom: .9rem;

2
ui/app/css/itcss/components/request-signature.scss
View File

@ -48,7 +48,6 @@
color: #5B5D67;
font-family: Roboto;
font-size: 22px;
font-weight: 300;
line-height: 29px;
z-index: 3;
}
@ -125,7 +124,6 @@
color: $tundora;
font-family: Roboto;
font-size: 18px;
font-weight: 300;
line-height: 24px;
text-align: center;
margin-top: 20px;

3
ui/app/css/itcss/components/send.scss
View File

@ -507,7 +507,6 @@
&__copy {
color: $gray;
font-size: 14px;
font-weight: 300;
line-height: 19px;
text-align: center;
margin-top: 10px;
@ -641,7 +640,6 @@
font-family: Roboto;
font-size: 16px;
line-height: 21px;
font-weight: 300;
}
}
@ -832,7 +830,6 @@
color: $tundora;
font-family: Roboto;
font-size: 20px;
font-weight: 300;
line-height: 26px;
margin-top: 17px;
}

2
ui/app/css/itcss/generic/index.scss
View File

@ -12,7 +12,7 @@ html,
body {
font-family: Roboto, Arial;
color: #4d4d4d;
font-weight: 300;
font-weight: 400;
background: #f7f7f7;
width: 100%;
height: 100%;

11
ui/app/send-v2.js
View File

@ -31,6 +31,7 @@ const {
} = require('./components/send/send-utils')
const { isValidAddress } = require('./util')
const { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } = require('./routes')
const Button = require('./components/button')
SendTransactionScreen.contextTypes = {
t: PropTypes.func,
@ -497,13 +498,19 @@ SendTransactionScreen.prototype.renderFooter = function () {
const noErrors = !amountError && toError === null
return h('div.page-container__footer', [
h('button.btn-secondary--lg.page-container__footer-button', {
h(Button, {
type: 'secondary',
large: true,
className: 'page-container__footer-button',
onClick: () => {
clearSend()
history.push(DEFAULT_ROUTE)
},
}, this.context.t('cancel')),
h('button.btn-primary--lg.page-container__footer-button', {
h(Button, {
type: 'primary',
large: true,
className: 'page-container__footer-button',
disabled: !noErrors || !gasTotal || missingTokenBalance,
onClick: event => this.onSubmit(event),
}, this.context.t('next')),