├── .coveralls.yml
├── .editorconfig
├── .env
├── .esdoc.js
├── .gitignore
├── .storybook
    ├── addons.js
    ├── config.js
    └── webpack.config.js
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── manifest.json
├── src
    ├── actions
    │   └── wallet.js
    ├── bootstrap
    │   ├── app.js
    │   ├── app.scss
    │   ├── configure-store.js
    │   ├── dapp-api.js
    │   ├── initializer.js
    │   ├── register-service-worker.js
    │   └── setup-integration-test.js
    ├── components
    │   ├── __snapshots__
    │   │   └── storyshots.test.js.snap
    │   ├── button
    │   │   ├── button.scss
    │   │   └── index.js
    │   ├── identicon
    │   │   ├── identicon.scss
    │   │   └── index.js
    │   ├── page-not-found
    │   │   ├── index.js
    │   │   └── page-not-found.scss
    │   ├── requires-meta-mask
    │   │   ├── index.js
    │   │   └── require-meta-mask.scss
    │   ├── storyshots.test.js
    │   └── text-input
    │   │   ├── index.js
    │   │   └── text-input.scss
    ├── constants
    │   ├── error.js
    │   └── testing.js
    ├── containers
    │   └── balance
    │   │   ├── balance.scss
    │   │   ├── balance.test.js
    │   │   └── index.js
    ├── index.js
    ├── reducers
    │   ├── index.js
    │   └── wallet.js
    ├── sagas
    │   ├── index.js
    │   ├── index.test.js
    │   └── wallet.js
    ├── setupTests.js
    ├── styles
    │   ├── _colors.scss
    │   └── _form.scss
    └── utils
    │   ├── action.js
    │   ├── form-generator.js
    │   ├── form-generator.test.js
    │   ├── functional.js
    │   ├── functional.test.js
    │   ├── saga.js
    │   ├── string.js
    │   ├── string.test.js
    │   └── validation.js
├── stories
    ├── button.js
    ├── identicon.js
    ├── index.js
    ├── page-not-found.js
    ├── requires-meta-mask.js
    └── text-input.js
└── yarn.lock


/.coveralls.yml:
--------------------------------------------------------------------------------
1 | repo_token: $COVERALLS_REPO_TOKEN
2 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 
14 | [*.js]
15 | max_line_length = 80
16 | indent_brace_style = 1TBS
17 | spaces_around_operators = true
18 | quote_type = single
19 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | # Development
2 | REACT_APP_DEV_ETHEREUM_PROVIDER=http://localhost:8545
3 | 
4 | # Production
5 | REACT_APP_PROD_ETHEREUM_PROVIDER=<provider>
6 | 


--------------------------------------------------------------------------------
/.esdoc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   source: './src',
3 |   destination: './docs',
4 |   plugins: [
5 |     { name: 'esdoc-standard-plugin' },
6 |     { name: 'esdoc-ecmascript-proposal-plugin', option: { all: true } }
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # Dependencies
 4 | /node_modules/
 5 | 
 6 | # Styles
 7 | /src/**/*.css
 8 | 
 9 | # Testing
10 | /coverage/
11 | 
12 | # Documentation
13 | /docs/
14 | 
15 | # Production
16 | /build/
17 | 
18 | # Logs
19 | /yarn-debug.log*
20 | /yarn-error.log*
21 | 
22 | # Editors
23 | /.vscode/
24 | /.idea/*
25 | 
26 | # Misc
27 | /.DS_Store
28 | 


--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register'
2 | import '@dump247/storybook-state/register'
3 | 


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { configure, addDecorator } from '@storybook/react'
 3 | import { host } from 'storybook-host'
 4 | import { combineReducers, applyMiddleware, createStore } from 'redux'
 5 | import { Provider } from 'react-redux'
 6 | import { MemoryRouter } from 'react-router-dom'
 7 | 
 8 | import '../src/bootstrap/app.css'
 9 | 
10 | // Storybook Host
11 | addDecorator(
12 |   host({
13 |     title: 'Dapp Front Boilerplate UI-Kit',
14 |     align: 'center middle'
15 |   })
16 | )
17 | 
18 | // Integration Wrapper
19 | const store = createStore(
20 |   combineReducers({}),
21 |   applyMiddleware(store => next => action => {
22 |     console.log(action)
23 |     return next(action)
24 |   })
25 | )
26 | addDecorator(story => (
27 |   <Provider store={store}>
28 |     <div>
29 |       {console.log(store.getState())}
30 |       <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
31 |     </div>
32 |   </Provider>
33 | ))
34 | 
35 | // Configure
36 | configure(() => require('../stories/index.js'), module)
37 | 


--------------------------------------------------------------------------------
/.storybook/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const { join } = require('path')
 2 | 
 3 | module.exports = {
 4 |   module: {
 5 |     rules: [
 6 |       {
 7 |         test: /\.css$/,
 8 |         use: ['style-loader', 'css-loader']
 9 |       },
10 |       {
11 |         test: /\.(woff|woff2|png)$/,
12 |         use: ['url-loader']
13 |       }
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - v9.4.0
 4 | cache:
 5 |   directories:
 6 |     - node_modules
 7 |   yarn: true
 8 | install: yarn install --pure-lockfile
 9 | script:
10 |   - yarn run build:scss
11 |   - yarn run lint
12 |   - yarn test
13 |   - if [ -n "$COVERALLS_REPO_TOKEN" ]; then yarn run test:coveralls; fi
14 |   - yarn run build
15 | notifications:
16 |   slack: 'kleros:Ub8n81EgKJ3iRrMDyWyQIVJp'
17 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | <a name="0.2.0"></a>
 6 | 
 7 | # [0.2.0](https://github.com/kleros/dapper/compare/v0.1.0...v0.2.0) (2018-03-14)
 8 | 
 9 | ### Bug Fixes
10 | 
11 | * **create-reducer:** check that reducer owns resource before reacting ([ac8c2ac](https://github.com/kleros/dapper/commit/ac8c2ac))
12 | * **validation:** fix number validation ([4b440e1](https://github.com/kleros/dapper/commit/4b440e1))
13 | 
14 | ### Features
15 | 
16 | * **app:** handle 404 routes ([a7f3d78](https://github.com/kleros/dapper/commit/a7f3d78)), closes [#14](https://github.com/kleros/dapper/issues/14)
17 | * **components:** pad Requires MetaMask ([d381578](https://github.com/kleros/dapper/commit/d381578))
18 | * **create-form-generator:** implement wizard form ([e81e81f](https://github.com/kleros/dapper/commit/e81e81f))
19 | * **dapp-api:** remove kleros-api ([801f4e2](https://github.com/kleros/dapper/commit/801f4e2))
20 | * **skip:** get ethereum balance ([682a905](https://github.com/kleros/dapper/commit/682a905))
21 | * add new redux utils and dapp-api flow ([ba86ecb](https://github.com/kleros/dapper/commit/ba86ecb))
22 | * add travis badge ([84ba037](https://github.com/kleros/dapper/commit/84ba037))
23 | * update with new storybook config and file names ([aec7b90](https://github.com/kleros/dapper/commit/aec7b90))
24 | 
25 | <a name="0.1.0"></a>
26 | 
27 | # 0.1.0 (2018-01-21)
28 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | See [kleros.md](https://kleros.gitbooks.io/kleros-md).
2 | 
3 | Additionally, This project also uses [lessdux](https://github.com/kleros/lessdux) and [create-redux-form](https://github.com/kleros/create-redux-form).
4 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Smart Contract Solutions, Inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining
 6 | a copy of this software and associated documentation files (the
 7 | "Software"), to deal in the Software without restriction, including
 8 | without limitation the rights to use, copy, modify, merge, publish,
 9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included
14 | in all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
17 | OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
20 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
22 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <b style="font-size: 32px;">dapper</b>
 3 | </p>
 4 | 
 5 | <p align="center">
 6 |   <a href="https://standardjs.com"><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="JavaScript Style Guide"></a>
 7 |   <a href="https://travis-ci.org/kleros/dapper"><img src="https://travis-ci.org/kleros/dapper.svg?branch=master" alt="Build Status"></a>
 8 |   <a href="https://david-dm.org/kleros/dapper"><img src="https://david-dm.org/kleros/dapper.svg" alt="Dependencies"></a>
 9 |   <a href="https://david-dm.org/kleros/dapper?type=dev"><img src="https://david-dm.org/kleros/dapper/dev-status.svg" alt="Dev Dependencies"></a>
10 |   <a href="https://github.com/facebook/jest"><img src="https://img.shields.io/badge/tested_with-jest-99424f.svg" alt="Tested with Jest"></a>
11 |   <a href="https://coveralls.io/github/kleros/dapper?branch=master"><img src="https://coveralls.io/repos/github/kleros/dapper/badge.svg?branch=master" alt="Coverage Status"></a>
12 |   <a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="Conventional Commits"></a>
13 |   <a href="http://commitizen.github.io/cz-cli/"><img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitizen Friendly"></a>
14 |   <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" alt="Styled with Prettier"></a>
15 | </p>
16 | 
17 | A boilerplate for Ethereum dapps.
18 | 
19 | ## Get Started
20 | 
21 | 1. Clone this repo.
22 | 2. Install and set up the [MetaMask](https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en) chrome extension.
23 | 3. Configure MetaMask on the Kovan Test Network.
24 | 4. Run `yarn` to install dependencies and then `yarn start` to start the dev server.
25 | 
26 | ## Other Scripts
27 | 
28 | * `yarn run prettify` - Apply prettier to the entire project.
29 | * `yarn run lint:scss` - Lint the entire project's .scss files.
30 | * `yarn run lint:js` - Lint the entire project's .js files.
31 | * `yarn run lint:scss --fix` - Fix fixable linting errors in .scss files.
32 | * `yarn run lint:js --fix` - Fix fixable linting errors in .js files.
33 | * `yarn run lint` - Lint the entire project's .scss and .js files.
34 | * `yarn test` - Run the jest test suites + storyshots.
35 | * `yarn run storybook` - Start the storybook.
36 | * `yarn run cz` - Run commitizen.
37 | * `yarn run build` - Create a production build.
38 | * `yarn run build:analyze` - Analyze the production build using source-map-explorer.
39 | 
40 | ## Testing
41 | 
42 | Storybook Storyshots for `components` and jest integration tests for `containers`.
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "dapper",
  3 |   "version": "0.2.0",
  4 |   "description": "A boilerplate for Ethereum dapps.",
  5 |   "keywords": [
  6 |     "blockchain",
  7 |     "ethereum",
  8 |     "dapp",
  9 |     "boilerplate",
 10 |     "frontend"
 11 |   ],
 12 |   "repository": "https://github.com/kleros/dapper",
 13 |   "author": "Kleros",
 14 |   "license": "MIT",
 15 |   "private": true,
 16 |   "scripts": {
 17 |     "prettify": "kleros-scripts prettify",
 18 |     "lint:scss": "kleros-scripts lint:scss",
 19 |     "lint:js": "kleros-scripts lint:js",
 20 |     "lint": "yarn run lint:scss && yarn run lint:js",
 21 |     "test": "react-scripts test --env=jsdom --coverage",
 22 |     "test:coveralls": "coveralls < ./coverage/lcov.info",
 23 |     "precommit": "kleros-scripts precommit",
 24 |     "commitmsg": "kleros-scripts commitmsg",
 25 |     "cz": "kleros-scripts cz",
 26 |     "start:scss": "yarn run build:scss && yarn run build:scss --watch",
 27 |     "start:js": "react-scripts start",
 28 |     "start:storybook": "start-storybook -p 9001 -c .storybook",
 29 |     "storybook": "run-p start:scss start:storybook",
 30 |     "build:scss": "node-sass-chokidar ./src -o ./src",
 31 |     "build:js": "react-scripts build",
 32 |     "start": "run-p start:scss start:js",
 33 |     "build": "yarn run build:scss && yarn run build:js",
 34 |     "build:analyze": "source-map-explorer build/static/js/main.*"
 35 |   },
 36 |   "jest": {
 37 |     "collectCoverageFrom": [
 38 |       "src/**/*.js",
 39 |       "!src/*.js",
 40 |       "!src/bootstrap/**/*.js",
 41 |       "!src/components/identicon/index.js",
 42 |       "!**/node_modules/**"
 43 |     ]
 44 |   },
 45 |   "commitlint": {
 46 |     "extends": [
 47 |       "@commitlint/config-conventional"
 48 |     ]
 49 |   },
 50 |   "devDependencies": {
 51 |     "@dump247/storybook-state": "^1.2.1",
 52 |     "@storybook/addon-actions": "^3.3.11",
 53 |     "@storybook/addon-storyshots": "^3.3.10",
 54 |     "@storybook/addons": "^3.3.11",
 55 |     "@storybook/react": "^3.3.10",
 56 |     "@storybook/storybook-deployer": "^2.2.0",
 57 |     "coveralls": "^3.0.0",
 58 |     "enzyme": "^3.3.0",
 59 |     "enzyme-adapter-react-16": "^1.1.1",
 60 |     "esdoc": "^1.0.4",
 61 |     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
 62 |     "esdoc-standard-plugin": "^1.0.0",
 63 |     "eslint-plugin-react": "^7.6.1",
 64 |     "ganache-cli": "^6.1.0",
 65 |     "husky": "^0.14.3",
 66 |     "jest-enzyme": "^6.0.0",
 67 |     "kleros-scripts": "^0.6.0",
 68 |     "node-sass-chokidar": "^1.2.2",
 69 |     "npm-run-all": "^4.1.2",
 70 |     "prettier": "^1.10.2",
 71 |     "prop-types": "^15.6.0",
 72 |     "react-test-renderer": "^16.2.0",
 73 |     "redux-immutable-state-invariant": "^2.1.0",
 74 |     "redux-unhandled-action": "^1.3.0",
 75 |     "sass-loader": "^6.0.6",
 76 |     "standard-version": "^4.3.0",
 77 |     "storybook-host": "^4.1.5",
 78 |     "timezone-mock": "^0.0.7"
 79 |   },
 80 |   "dependencies": {
 81 |     "create-redux-form": "^0.1.2",
 82 |     "history": "^4.7.2",
 83 |     "lessdux": "^0.7.3",
 84 |     "normalize.css": "^8.0.0",
 85 |     "react": "^16.2.0",
 86 |     "react-addons-css-transition-group": "^15.6.2",
 87 |     "react-blockies": "^1.2.2",
 88 |     "react-dom": "^16.2.0",
 89 |     "react-helmet": "^5.2.0",
 90 |     "react-redux": "^5.0.6",
 91 |     "react-router-dom": "^4.2.2",
 92 |     "react-router-redux": "^5.0.0-alpha.9",
 93 |     "react-scripts": "1.1.1",
 94 |     "redux": "^3.7.2",
 95 |     "redux-form": "^7.2.3",
 96 |     "redux-saga": "^0.16.0",
 97 |     "web3": "^1.0.0-beta.34"
 98 |   }
 99 | }
100 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kleros/dapper/c3eda47d256c4133d6ffb6f985a31f34e4c106a4/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |   <meta name="theme-color" content="#000000">
 8 |   <!--
 9 |       manifest.json provides metadata used when your web app is added to the
10 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11 |     -->
12 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13 |   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14 |   <!--
15 |       Notice the use of %PUBLIC_URL% in the tags above.
16 |       It will be replaced with the URL of the `public` folder during the build.
17 |       Only files inside the `public` folder can be referenced from the HTML.
18 | 
19 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20 |       work correctly both with client-side routing and a non-root public URL.
21 |       Learn how to configure a non-root public URL by running `npm run build`.
22 |     -->
23 |   <title>Dapp Front Boilerplate</title>
24 | </head>
25 | 
26 | <body>
27 |   <noscript>
28 |     You need to enable JavaScript to run this app.
29 |   </noscript>
30 |   <div id="root"></div>
31 |   <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "Dapp Front Boilerplate",
 3 |   "name": "Dapp Front Boilerplate",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/actions/wallet.js:
--------------------------------------------------------------------------------
 1 | import { createActions } from 'lessdux'
 2 | 
 3 | /* Actions */
 4 | 
 5 | // Accounts
 6 | export const accounts = createActions('ACCOUNTS')
 7 | 
 8 | // Balance
 9 | export const balance = createActions('BALANCE')
10 | 
11 | /* Action Creators */
12 | 
13 | // Accounts
14 | export const fetchAccounts = () => ({ type: accounts.FETCH })
15 | 
16 | // Balance
17 | export const fetchBalance = () => ({ type: balance.FETCH })
18 | 


--------------------------------------------------------------------------------
/src/bootstrap/app.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { Helmet } from 'react-helmet'
 4 | import { Provider } from 'react-redux'
 5 | import { ConnectedRouter } from 'react-router-redux'
 6 | import { Switch, Route } from 'react-router-dom'
 7 | 
 8 | import Balance from '../containers/balance'
 9 | import PageNotFound from '../components/page-not-found'
10 | 
11 | import Initializer from './initializer'
12 | 
13 | import './app.css'
14 | 
15 | const App = ({ store, history, testElement }) => (
16 |   <Provider store={store}>
17 |     <Initializer>
18 |       <ConnectedRouter history={history}>
19 |         <div id="router-root">
20 |           <Helmet>
21 |             <title>Dapper</title>
22 |           </Helmet>
23 |           <div id="scroll-root">
24 |             <Switch>
25 |               <Route exact path="/" component={Balance} />
26 |               <Route component={PageNotFound} />
27 |             </Switch>
28 |           </div>
29 |           {testElement}
30 |         </div>
31 |       </ConnectedRouter>
32 |     </Initializer>
33 |   </Provider>
34 | )
35 | 
36 | App.propTypes = {
37 |   // State
38 |   store: PropTypes.shape({}).isRequired,
39 |   history: PropTypes.shape({}).isRequired,
40 | 
41 |   // Testing
42 |   testElement: PropTypes.element
43 | }
44 | 
45 | App.defaultProps = {
46 |   // Testing
47 |   testElement: null
48 | }
49 | 
50 | export default App
51 | 


--------------------------------------------------------------------------------
/src/bootstrap/app.scss:
--------------------------------------------------------------------------------
 1 | @import '~normalize.css';
 2 | @import '~create-redux-form/animations/carousel.css';
 3 | @import '../styles/_colors.scss';
 4 | @import '../styles/_form.scss';
 5 | 
 6 | // Global Overrides
 7 | * {
 8 |   box-sizing: border-box !important;
 9 |   font-family: 'Roboto', sans-serif !important;
10 |   scroll-behavior: smooth !important;
11 | }
12 | 
13 | // Document Root
14 | html {
15 |   color: $text;
16 |   font-size: 16px;
17 | }
18 | 
19 | // App Containers
20 | html,
21 | body,
22 | #root,
23 | #router-root,
24 | #scroll-root {
25 |   border: 0;
26 |   height: 100%;
27 |   margin: 0;
28 |   padding: 0;
29 |   width: 100%;
30 | }
31 | 
32 | // Scroll Root
33 | #scroll-root {
34 |   background: $background;
35 |   display: flex;
36 |   flex-direction: column;
37 |   overflow: scroll;
38 |   position: relative;
39 | }
40 | 
41 | /* Element Overrides */
42 | 
43 | // Horizontal Rule
44 | hr {
45 |   border: 1px solid $light3;
46 | }
47 | 


--------------------------------------------------------------------------------
/src/bootstrap/configure-store.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable global-require */
 2 | import { applyMiddleware, compose, createStore } from 'redux'
 3 | import createSagaMiddleware from 'redux-saga'
 4 | import { routerMiddleware } from 'react-router-redux'
 5 | import createHistory from 'history/createBrowserHistory'
 6 | 
 7 | import rootReducer from '../reducers'
 8 | import rootSaga from '../sagas'
 9 | 
10 | let store
11 | let sagaMiddleware
12 | let rootSagaTask
13 | 
14 | /**
15 |  * Sets up the redux store.
16 |  * @param {object} [initialState={}] - The initial state for the redux store, defaults to an empty object.
17 |  * @param {{ dispatchSpy: function }} [integrationTestParams=[]] - Parameters necessary to setup integration tests.
18 |  * @returns {{ store: object, history: object }} - An object with the store and the history objects.
19 |  */
20 | export default function configureStore(
21 |   initialState = {},
22 |   { dispatchSpy } = {}
23 | ) {
24 |   sagaMiddleware = createSagaMiddleware()
25 |   const history = createHistory()
26 |   const enhancers = []
27 |   const middleware = []
28 |   const composeEnhancers =
29 |     process.env.NODE_ENV === 'development' &&
30 |     window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
31 |       ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
32 |       : compose
33 | 
34 |   // Development Tools
35 |   if (process.env.NODE_ENV === 'development') {
36 |     const reduxImmutableState = require('redux-immutable-state-invariant')
37 |       .default
38 |     const reduxUnhandledAction = require('redux-unhandled-action').default
39 |     middleware.push(
40 |       reduxImmutableState(),
41 |       reduxUnhandledAction(action =>
42 |         console.error(
43 |           `${action} didn't lead to creation of a new state object`,
44 |           action
45 |         )
46 |       )
47 |     )
48 |   }
49 | 
50 |   // Testing Tools
51 |   if (dispatchSpy) {
52 |     middleware.push(_store => next => action => {
53 |       dispatchSpy(action)
54 |       return next(action)
55 |     })
56 |   }
57 | 
58 |   middleware.push(sagaMiddleware, routerMiddleware(history))
59 |   enhancers.unshift(applyMiddleware(...middleware))
60 |   store = createStore(rootReducer, initialState, composeEnhancers(...enhancers))
61 |   rootSagaTask = sagaMiddleware.run(rootSaga)
62 |   return { store, history }
63 | }
64 | 
65 | if (module.hot) {
66 |   module.hot.accept('../reducers', () => {
67 |     store.replaceReducer(rootReducer)
68 |   })
69 |   module.hot.accept('../sagas', () => {
70 |     rootSagaTask.cancel()
71 |     rootSagaTask.done.then(() => (rootSagaTask = sagaMiddleware.run(rootSaga)))
72 |   })
73 | }
74 | 


--------------------------------------------------------------------------------
/src/bootstrap/dapp-api.js:
--------------------------------------------------------------------------------
 1 | import Web3 from 'web3'
 2 | 
 3 | const env = process.env.NODE_ENV === 'production' ? 'PROD' : 'DEV'
 4 | const ETHEREUM_PROVIDER = process.env[`REACT_APP_${env}_ETHEREUM_PROVIDER`]
 5 | 
 6 | let web3
 7 | if (process.env.NODE_ENV === 'test')
 8 |   web3 = new Web3(require('ganache-cli').provider())
 9 | else if (window.web3 && window.web3.currentProvider)
10 |   web3 = new Web3(window.web3.currentProvider)
11 | else web3 = new Web3(new Web3.providers.HttpProvider(ETHEREUM_PROVIDER))
12 | 
13 | const network =
14 |   web3.eth &&
15 |   web3.eth.net
16 |     .getId()
17 |     .then(networkID => {
18 |       switch (networkID) {
19 |         case 1:
20 |           return 'main'
21 |         case 3:
22 |           return 'ropsten'
23 |         case 4:
24 |           return 'rinkeby'
25 |         case 42:
26 |           return 'kovan'
27 |         default:
28 |           return null
29 |       }
30 |     })
31 |     .catch(() => null)
32 | 
33 | const ETHAddressRegExpCaptureGroup = '(0x[a-fA-F0-9]{40})'
34 | const ETHAddressRegExp = /0x[a-fA-F0-9]{40}/
35 | const strictETHAddressRegExp = /^0x[a-fA-F0-9]{40}$/
36 | 
37 | export {
38 |   web3,
39 |   network,
40 |   ETHAddressRegExpCaptureGroup,
41 |   ETHAddressRegExp,
42 |   strictETHAddressRegExp
43 | }
44 | 


--------------------------------------------------------------------------------
/src/bootstrap/initializer.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { connect } from 'react-redux'
 4 | import { RenderIf } from 'lessdux'
 5 | 
 6 | import * as walletSelectors from '../reducers/wallet'
 7 | import * as walletActions from '../actions/wallet'
 8 | import RequiresMetaMask from '../components/requires-meta-mask'
 9 | 
10 | import { web3 } from './dapp-api'
11 | 
12 | class Initializer extends PureComponent {
13 |   static propTypes = {
14 |     // Redux State
15 |     accounts: walletSelectors.accountsShape.isRequired,
16 | 
17 |     // Action Dispatchers
18 |     fetchAccounts: PropTypes.func.isRequired,
19 | 
20 |     // State
21 |     children: PropTypes.oneOfType([
22 |       PropTypes.element,
23 |       PropTypes.arrayOf(PropTypes.element.isRequired)
24 |     ]).isRequired
25 |   }
26 | 
27 |   componentDidMount() {
28 |     const { fetchAccounts } = this.props
29 |     fetchAccounts()
30 |   }
31 | 
32 |   render() {
33 |     const { accounts, children } = this.props
34 | 
35 |     return (
36 |       <RenderIf
37 |         resource={accounts}
38 |         loading="Loading..."
39 |         done={children}
40 |         failedLoading={<RequiresMetaMask needsUnlock={web3.eth} />}
41 |         extraValues={[accounts.data && accounts.data[0]]}
42 |         extraFailedValues={[!web3.eth]}
43 |       />
44 |     )
45 |   }
46 | }
47 | 
48 | export default connect(
49 |   state => ({
50 |     accounts: state.wallet.accounts
51 |   }),
52 |   { fetchAccounts: walletActions.fetchAccounts }
53 | )(Initializer)
54 | 


--------------------------------------------------------------------------------
/src/bootstrap/register-service-worker.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable require-jsdoc */
  2 | // In production, we register a service worker to serve assets from local cache.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on the "N+1" visit to a page, since previously
  7 | // cached resources are updated in the background.
  8 | 
  9 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 10 | // This link also includes instructions on opting out of this behavior.
 11 | 
 12 | const isLocalhost = Boolean(
 13 |   window.location.hostname === 'localhost' ||
 14 |     // [::1] is the IPv6 localhost address.
 15 |     window.location.hostname === '[::1]' ||
 16 |     // 127.0.0.1/8 is considered localhost for IPv4.
 17 |     window.location.hostname.match(
 18 |       /^127(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/
 19 |     )
 20 | )
 21 | 
 22 | function registerValidSW(swUrl) {
 23 |   navigator.serviceWorker
 24 |     .register(swUrl)
 25 |     .then(registration => {
 26 |       registration.onupdatefound = () => {
 27 |         const installingWorker = registration.installing
 28 |         installingWorker.onstatechange = () => {
 29 |           if (installingWorker.state === 'installed') {
 30 |             if (navigator.serviceWorker.controller) {
 31 |               // At this point, the old content will have been purged and
 32 |               // the fresh content will have been added to the cache.
 33 |               // It's the perfect time to display a "New content is
 34 |               // available; please refresh." message in your web app.
 35 |               console.log('New content is available; please refresh.')
 36 |             } else {
 37 |               // At this point, everything has been precached.
 38 |               // It's the perfect time to display a
 39 |               // "Content is cached for offline use." message.
 40 |               console.log('Content is cached for offline use.')
 41 |             }
 42 |           }
 43 |         }
 44 |       }
 45 |     })
 46 |     .catch(err => {
 47 |       console.error('Error during service worker registration:', err)
 48 |     })
 49 | }
 50 | 
 51 | function checkValidServiceWorker(swUrl) {
 52 |   // Check if the service worker can be found. If it can't reload the page.
 53 |   fetch(swUrl)
 54 |     .then(response => {
 55 |       // Ensure service worker exists, and that we really are getting a JS file.
 56 |       if (
 57 |         response.status === 404 ||
 58 |         response.headers.get('content-type').indexOf('javascript') === -1
 59 |       ) {
 60 |         // No service worker found. Probably a different app. Reload the page.
 61 |         navigator.serviceWorker.ready.then(registration => {
 62 |           registration.unregister().then(() => {
 63 |             window.location.reload()
 64 |           })
 65 |         })
 66 |       } else {
 67 |         // Service worker found. Proceed as normal.
 68 |         registerValidSW(swUrl)
 69 |       }
 70 |     })
 71 |     .catch(() => {
 72 |       console.log(
 73 |         'No internet connection found. App is running in offline mode.'
 74 |       )
 75 |     })
 76 | }
 77 | 
 78 | export default function registerServiceWorker() {
 79 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 80 |     // The URL constructor is available in all browsers that support SW.
 81 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
 82 |     if (publicUrl.origin !== window.location.origin) {
 83 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 84 |       // from what our page is served on. This might happen if a CDN is used to
 85 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 86 |       return
 87 |     }
 88 | 
 89 |     window.addEventListener('load', () => {
 90 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 91 | 
 92 |       if (isLocalhost) {
 93 |         // This is running on localhost. Lets check if a service worker still exists or not.
 94 |         checkValidServiceWorker(swUrl)
 95 | 
 96 |         // Add some additional logging to localhost, pointing developers to the
 97 |         // service worker/PWA documentation.
 98 |         navigator.serviceWorker.ready.then(() => {
 99 |           console.log(
100 |             'This web app is being served cache-first by a service ' +
101 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
102 |           )
103 |         })
104 |       } else {
105 |         // Is not local host. Just register service worker
106 |         registerValidSW(swUrl)
107 |       }
108 |     })
109 |   }
110 | }
111 | 
112 | export function unregisterServiceWorker() {
113 |   if ('serviceWorker' in navigator) {
114 |     navigator.serviceWorker.ready.then(registration => {
115 |       registration.unregister()
116 |     })
117 |   }
118 | }
119 | 


--------------------------------------------------------------------------------
/src/bootstrap/setup-integration-test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { mount } from 'enzyme'
 3 | 
 4 | import configureStore from './configure-store'
 5 | import App from './app'
 6 | 
 7 | /**
 8 |  * Wait for all promises to resolve in a test environment and update the app.
 9 |  * @param {object} app - The app wrapper to update.
10 |  * @returns {Promise<number>} - A promise that resolves when the timeout handler is called.
11 |  */
12 | export function flushPromises(app) {
13 |   return new Promise(resolve =>
14 |     setTimeout(() => {
15 |       app.update()
16 |       resolve()
17 |     }, 1000)
18 |   )
19 | }
20 | 
21 | /**
22 |  * Sets up an integration test environment.
23 |  * @param {object} [initialState={}] - The initial state.
24 |  * @returns {{ store: object, history: object, dispatchSpy: function, mountApp: function }} - Utilities for testing.
25 |  */
26 | export default function setupIntegrationTest(initialState = {}) {
27 |   const dispatchSpy = jest.fn(() => ({}))
28 |   const { store, history } = configureStore(initialState, {
29 |     dispatchSpy
30 |   })
31 |   const mountApp = testElement =>
32 |     mount(<App store={store} history={history} testElement={testElement} />)
33 | 
34 |   return { store, history, dispatchSpy, mountApp }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/__snapshots__/storyshots.test.js.snap:
--------------------------------------------------------------------------------
   1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
   2 | 
   3 | exports[`Storyshots Button disabled 1`] = `
   4 | <div>
   5 |   <div
   6 |     data-radium={true}
   7 |     style={
   8 |       Object {
   9 |         "background": "rgb(255, 255, 255)",
  10 |         "bottom": 0,
  11 |         "display": "flex",
  12 |         "flexDirection": "column",
  13 |         "left": 0,
  14 |         "position": "absolute",
  15 |         "right": 0,
  16 |         "top": 0,
  17 |       }
  18 |     }
  19 |   >
  20 |     <div
  21 |       data-radium={true}
  22 |       style={
  23 |         Object {
  24 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
  25 |           "marginLeft": 15,
  26 |           "marginRight": 15,
  27 |           "marginTop": 15,
  28 |           "paddingBottom": 15,
  29 |           "paddingTop": 2,
  30 |         }
  31 |       }
  32 |     >
  33 |       <h2
  34 |         data-radium={true}
  35 |         style={
  36 |           Object {
  37 |             "color": "rgba(0, 0, 0, 0.6)",
  38 |             "fontSize": 20,
  39 |             "fontWeight": 200,
  40 |             "margin": 0,
  41 |             "padding": 0,
  42 |           }
  43 |         }
  44 |       >
  45 |         Dapp Front Boilerplate UI-Kit
  46 |       </h2>
  47 |     </div>
  48 |     <div
  49 |       data-radium={true}
  50 |       style={
  51 |         Object {
  52 |           "boxSizing": "border-box",
  53 |           "flex": 1,
  54 |           "margin": 50,
  55 |           "position": "relative",
  56 |         }
  57 |       }
  58 |     >
  59 |       <div
  60 |         data-radium={true}
  61 |         style={
  62 |           Object {
  63 |             "alignItems": "center",
  64 |             "bottom": 0,
  65 |             "display": "flex",
  66 |             "flexDirection": "column",
  67 |             "justifyContent": "center",
  68 |             "left": 0,
  69 |             "position": "absolute",
  70 |             "right": 0,
  71 |             "top": 0,
  72 |           }
  73 |         }
  74 |       >
  75 |         <div
  76 |           data-radium={true}
  77 |           style={
  78 |             Object {
  79 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
  80 |               "boxSizing": "border-box",
  81 |               "height": "auto",
  82 |               "position": "relative",
  83 |               "width": "auto",
  84 |             }
  85 |           }
  86 |         >
  87 |           <div
  88 |             className="Button is-disabled "
  89 |             onClick={[Function]}
  90 |           >
  91 |             <h5
  92 |               className="Button-label "
  93 |             >
  94 |               CLICK ME
  95 |             </h5>
  96 |           </div>
  97 |           <div
  98 |             data-radium={true}
  99 |             style={
 100 |               Object {
 101 |                 "bottom": "auto",
 102 |                 "height": 20,
 103 |                 "left": -19,
 104 |                 "position": "absolute",
 105 |                 "right": "auto",
 106 |                 "top": -19,
 107 |                 "width": 20,
 108 |               }
 109 |             }
 110 |           >
 111 |             <div
 112 |               data-radium={true}
 113 |               style={
 114 |                 Object {
 115 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 116 |                   "bottom": 0,
 117 |                   "left": 0,
 118 |                   "position": "absolute",
 119 |                   "right": 5,
 120 |                   "top": undefined,
 121 |                 }
 122 |               }
 123 |             />
 124 |             <div
 125 |               data-radium={true}
 126 |               style={
 127 |                 Object {
 128 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 129 |                   "bottom": 5,
 130 |                   "left": "auto",
 131 |                   "position": "absolute",
 132 |                   "right": 0,
 133 |                   "top": 0,
 134 |                 }
 135 |               }
 136 |             />
 137 |           </div>
 138 |           <div
 139 |             data-radium={true}
 140 |             style={
 141 |               Object {
 142 |                 "bottom": "auto",
 143 |                 "height": 20,
 144 |                 "left": "auto",
 145 |                 "position": "absolute",
 146 |                 "right": -19,
 147 |                 "top": -19,
 148 |                 "width": 20,
 149 |               }
 150 |             }
 151 |           >
 152 |             <div
 153 |               data-radium={true}
 154 |               style={
 155 |                 Object {
 156 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 157 |                   "bottom": 0,
 158 |                   "left": 5,
 159 |                   "position": "absolute",
 160 |                   "right": 0,
 161 |                   "top": "auto",
 162 |                 }
 163 |               }
 164 |             />
 165 |             <div
 166 |               data-radium={true}
 167 |               style={
 168 |                 Object {
 169 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 170 |                   "bottom": 5,
 171 |                   "left": 0,
 172 |                   "position": "absolute",
 173 |                   "right": "auto",
 174 |                   "top": 0,
 175 |                 }
 176 |               }
 177 |             />
 178 |           </div>
 179 |           <div
 180 |             data-radium={true}
 181 |             style={
 182 |               Object {
 183 |                 "bottom": -19,
 184 |                 "height": 20,
 185 |                 "left": -19,
 186 |                 "position": "absolute",
 187 |                 "right": "auto",
 188 |                 "top": "auto",
 189 |                 "width": 20,
 190 |               }
 191 |             }
 192 |           >
 193 |             <div
 194 |               data-radium={true}
 195 |               style={
 196 |                 Object {
 197 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 198 |                   "bottom": "auto",
 199 |                   "left": 0,
 200 |                   "position": "absolute",
 201 |                   "right": 5,
 202 |                   "top": 0,
 203 |                 }
 204 |               }
 205 |             />
 206 |             <div
 207 |               data-radium={true}
 208 |               style={
 209 |                 Object {
 210 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 211 |                   "bottom": 0,
 212 |                   "left": "auto",
 213 |                   "position": "absolute",
 214 |                   "right": 0,
 215 |                   "top": 5,
 216 |                 }
 217 |               }
 218 |             />
 219 |           </div>
 220 |           <div
 221 |             data-radium={true}
 222 |             style={
 223 |               Object {
 224 |                 "bottom": -19,
 225 |                 "height": 20,
 226 |                 "left": "auto",
 227 |                 "position": "absolute",
 228 |                 "right": -19,
 229 |                 "top": undefined,
 230 |                 "width": 20,
 231 |               }
 232 |             }
 233 |           >
 234 |             <div
 235 |               data-radium={true}
 236 |               style={
 237 |                 Object {
 238 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 239 |                   "bottom": "auto",
 240 |                   "left": 5,
 241 |                   "position": "absolute",
 242 |                   "right": 0,
 243 |                   "top": 0,
 244 |                 }
 245 |               }
 246 |             />
 247 |             <div
 248 |               data-radium={true}
 249 |               style={
 250 |                 Object {
 251 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 252 |                   "bottom": 0,
 253 |                   "left": 0,
 254 |                   "position": "absolute",
 255 |                   "right": "auto",
 256 |                   "top": 5,
 257 |                 }
 258 |               }
 259 |             />
 260 |           </div>
 261 |         </div>
 262 |       </div>
 263 |     </div>
 264 |   </div>
 265 | </div>
 266 | `;
 267 | 
 268 | exports[`Storyshots Button primary 1`] = `
 269 | <div>
 270 |   <div
 271 |     data-radium={true}
 272 |     style={
 273 |       Object {
 274 |         "background": "rgb(255, 255, 255)",
 275 |         "bottom": 0,
 276 |         "display": "flex",
 277 |         "flexDirection": "column",
 278 |         "left": 0,
 279 |         "position": "absolute",
 280 |         "right": 0,
 281 |         "top": 0,
 282 |       }
 283 |     }
 284 |   >
 285 |     <div
 286 |       data-radium={true}
 287 |       style={
 288 |         Object {
 289 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 290 |           "marginLeft": 15,
 291 |           "marginRight": 15,
 292 |           "marginTop": 15,
 293 |           "paddingBottom": 15,
 294 |           "paddingTop": 2,
 295 |         }
 296 |       }
 297 |     >
 298 |       <h2
 299 |         data-radium={true}
 300 |         style={
 301 |           Object {
 302 |             "color": "rgba(0, 0, 0, 0.6)",
 303 |             "fontSize": 20,
 304 |             "fontWeight": 200,
 305 |             "margin": 0,
 306 |             "padding": 0,
 307 |           }
 308 |         }
 309 |       >
 310 |         Dapp Front Boilerplate UI-Kit
 311 |       </h2>
 312 |     </div>
 313 |     <div
 314 |       data-radium={true}
 315 |       style={
 316 |         Object {
 317 |           "boxSizing": "border-box",
 318 |           "flex": 1,
 319 |           "margin": 50,
 320 |           "position": "relative",
 321 |         }
 322 |       }
 323 |     >
 324 |       <div
 325 |         data-radium={true}
 326 |         style={
 327 |           Object {
 328 |             "alignItems": "center",
 329 |             "bottom": 0,
 330 |             "display": "flex",
 331 |             "flexDirection": "column",
 332 |             "justifyContent": "center",
 333 |             "left": 0,
 334 |             "position": "absolute",
 335 |             "right": 0,
 336 |             "top": 0,
 337 |           }
 338 |         }
 339 |       >
 340 |         <div
 341 |           data-radium={true}
 342 |           style={
 343 |             Object {
 344 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
 345 |               "boxSizing": "border-box",
 346 |               "height": "auto",
 347 |               "position": "relative",
 348 |               "width": "auto",
 349 |             }
 350 |           }
 351 |         >
 352 |           <div
 353 |             className="Button  "
 354 |             onClick={[Function]}
 355 |           >
 356 |             <h5
 357 |               className="Button-label "
 358 |             >
 359 |               CLICK ME
 360 |             </h5>
 361 |           </div>
 362 |           <div
 363 |             data-radium={true}
 364 |             style={
 365 |               Object {
 366 |                 "bottom": "auto",
 367 |                 "height": 20,
 368 |                 "left": -19,
 369 |                 "position": "absolute",
 370 |                 "right": "auto",
 371 |                 "top": -19,
 372 |                 "width": 20,
 373 |               }
 374 |             }
 375 |           >
 376 |             <div
 377 |               data-radium={true}
 378 |               style={
 379 |                 Object {
 380 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 381 |                   "bottom": 0,
 382 |                   "left": 0,
 383 |                   "position": "absolute",
 384 |                   "right": 5,
 385 |                   "top": undefined,
 386 |                 }
 387 |               }
 388 |             />
 389 |             <div
 390 |               data-radium={true}
 391 |               style={
 392 |                 Object {
 393 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 394 |                   "bottom": 5,
 395 |                   "left": "auto",
 396 |                   "position": "absolute",
 397 |                   "right": 0,
 398 |                   "top": 0,
 399 |                 }
 400 |               }
 401 |             />
 402 |           </div>
 403 |           <div
 404 |             data-radium={true}
 405 |             style={
 406 |               Object {
 407 |                 "bottom": "auto",
 408 |                 "height": 20,
 409 |                 "left": "auto",
 410 |                 "position": "absolute",
 411 |                 "right": -19,
 412 |                 "top": -19,
 413 |                 "width": 20,
 414 |               }
 415 |             }
 416 |           >
 417 |             <div
 418 |               data-radium={true}
 419 |               style={
 420 |                 Object {
 421 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 422 |                   "bottom": 0,
 423 |                   "left": 5,
 424 |                   "position": "absolute",
 425 |                   "right": 0,
 426 |                   "top": "auto",
 427 |                 }
 428 |               }
 429 |             />
 430 |             <div
 431 |               data-radium={true}
 432 |               style={
 433 |                 Object {
 434 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 435 |                   "bottom": 5,
 436 |                   "left": 0,
 437 |                   "position": "absolute",
 438 |                   "right": "auto",
 439 |                   "top": 0,
 440 |                 }
 441 |               }
 442 |             />
 443 |           </div>
 444 |           <div
 445 |             data-radium={true}
 446 |             style={
 447 |               Object {
 448 |                 "bottom": -19,
 449 |                 "height": 20,
 450 |                 "left": -19,
 451 |                 "position": "absolute",
 452 |                 "right": "auto",
 453 |                 "top": "auto",
 454 |                 "width": 20,
 455 |               }
 456 |             }
 457 |           >
 458 |             <div
 459 |               data-radium={true}
 460 |               style={
 461 |                 Object {
 462 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 463 |                   "bottom": "auto",
 464 |                   "left": 0,
 465 |                   "position": "absolute",
 466 |                   "right": 5,
 467 |                   "top": 0,
 468 |                 }
 469 |               }
 470 |             />
 471 |             <div
 472 |               data-radium={true}
 473 |               style={
 474 |                 Object {
 475 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 476 |                   "bottom": 0,
 477 |                   "left": "auto",
 478 |                   "position": "absolute",
 479 |                   "right": 0,
 480 |                   "top": 5,
 481 |                 }
 482 |               }
 483 |             />
 484 |           </div>
 485 |           <div
 486 |             data-radium={true}
 487 |             style={
 488 |               Object {
 489 |                 "bottom": -19,
 490 |                 "height": 20,
 491 |                 "left": "auto",
 492 |                 "position": "absolute",
 493 |                 "right": -19,
 494 |                 "top": undefined,
 495 |                 "width": 20,
 496 |               }
 497 |             }
 498 |           >
 499 |             <div
 500 |               data-radium={true}
 501 |               style={
 502 |                 Object {
 503 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 504 |                   "bottom": "auto",
 505 |                   "left": 5,
 506 |                   "position": "absolute",
 507 |                   "right": 0,
 508 |                   "top": 0,
 509 |                 }
 510 |               }
 511 |             />
 512 |             <div
 513 |               data-radium={true}
 514 |               style={
 515 |                 Object {
 516 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 517 |                   "bottom": 0,
 518 |                   "left": 0,
 519 |                   "position": "absolute",
 520 |                   "right": "auto",
 521 |                   "top": 5,
 522 |                 }
 523 |               }
 524 |             />
 525 |           </div>
 526 |         </div>
 527 |       </div>
 528 |     </div>
 529 |   </div>
 530 | </div>
 531 | `;
 532 | 
 533 | exports[`Storyshots Button with lots of text 1`] = `
 534 | <div>
 535 |   <div
 536 |     data-radium={true}
 537 |     style={
 538 |       Object {
 539 |         "background": "rgb(255, 255, 255)",
 540 |         "bottom": 0,
 541 |         "display": "flex",
 542 |         "flexDirection": "column",
 543 |         "left": 0,
 544 |         "position": "absolute",
 545 |         "right": 0,
 546 |         "top": 0,
 547 |       }
 548 |     }
 549 |   >
 550 |     <div
 551 |       data-radium={true}
 552 |       style={
 553 |         Object {
 554 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 555 |           "marginLeft": 15,
 556 |           "marginRight": 15,
 557 |           "marginTop": 15,
 558 |           "paddingBottom": 15,
 559 |           "paddingTop": 2,
 560 |         }
 561 |       }
 562 |     >
 563 |       <h2
 564 |         data-radium={true}
 565 |         style={
 566 |           Object {
 567 |             "color": "rgba(0, 0, 0, 0.6)",
 568 |             "fontSize": 20,
 569 |             "fontWeight": 200,
 570 |             "margin": 0,
 571 |             "padding": 0,
 572 |           }
 573 |         }
 574 |       >
 575 |         Dapp Front Boilerplate UI-Kit
 576 |       </h2>
 577 |     </div>
 578 |     <div
 579 |       data-radium={true}
 580 |       style={
 581 |         Object {
 582 |           "boxSizing": "border-box",
 583 |           "flex": 1,
 584 |           "margin": 50,
 585 |           "position": "relative",
 586 |         }
 587 |       }
 588 |     >
 589 |       <div
 590 |         data-radium={true}
 591 |         style={
 592 |           Object {
 593 |             "alignItems": "center",
 594 |             "bottom": 0,
 595 |             "display": "flex",
 596 |             "flexDirection": "column",
 597 |             "justifyContent": "center",
 598 |             "left": 0,
 599 |             "position": "absolute",
 600 |             "right": 0,
 601 |             "top": 0,
 602 |           }
 603 |         }
 604 |       >
 605 |         <div
 606 |           data-radium={true}
 607 |           style={
 608 |             Object {
 609 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
 610 |               "boxSizing": "border-box",
 611 |               "height": "auto",
 612 |               "position": "relative",
 613 |               "width": "auto",
 614 |             }
 615 |           }
 616 |         >
 617 |           <div
 618 |             className="Button  "
 619 |             onClick={[Function]}
 620 |           >
 621 |             <h5
 622 |               className="Button-label "
 623 |             >
 624 |               CLICK ME, CLICK ME, CLICK ME
 625 |             </h5>
 626 |           </div>
 627 |           <div
 628 |             data-radium={true}
 629 |             style={
 630 |               Object {
 631 |                 "bottom": "auto",
 632 |                 "height": 20,
 633 |                 "left": -19,
 634 |                 "position": "absolute",
 635 |                 "right": "auto",
 636 |                 "top": -19,
 637 |                 "width": 20,
 638 |               }
 639 |             }
 640 |           >
 641 |             <div
 642 |               data-radium={true}
 643 |               style={
 644 |                 Object {
 645 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 646 |                   "bottom": 0,
 647 |                   "left": 0,
 648 |                   "position": "absolute",
 649 |                   "right": 5,
 650 |                   "top": undefined,
 651 |                 }
 652 |               }
 653 |             />
 654 |             <div
 655 |               data-radium={true}
 656 |               style={
 657 |                 Object {
 658 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 659 |                   "bottom": 5,
 660 |                   "left": "auto",
 661 |                   "position": "absolute",
 662 |                   "right": 0,
 663 |                   "top": 0,
 664 |                 }
 665 |               }
 666 |             />
 667 |           </div>
 668 |           <div
 669 |             data-radium={true}
 670 |             style={
 671 |               Object {
 672 |                 "bottom": "auto",
 673 |                 "height": 20,
 674 |                 "left": "auto",
 675 |                 "position": "absolute",
 676 |                 "right": -19,
 677 |                 "top": -19,
 678 |                 "width": 20,
 679 |               }
 680 |             }
 681 |           >
 682 |             <div
 683 |               data-radium={true}
 684 |               style={
 685 |                 Object {
 686 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 687 |                   "bottom": 0,
 688 |                   "left": 5,
 689 |                   "position": "absolute",
 690 |                   "right": 0,
 691 |                   "top": "auto",
 692 |                 }
 693 |               }
 694 |             />
 695 |             <div
 696 |               data-radium={true}
 697 |               style={
 698 |                 Object {
 699 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 700 |                   "bottom": 5,
 701 |                   "left": 0,
 702 |                   "position": "absolute",
 703 |                   "right": "auto",
 704 |                   "top": 0,
 705 |                 }
 706 |               }
 707 |             />
 708 |           </div>
 709 |           <div
 710 |             data-radium={true}
 711 |             style={
 712 |               Object {
 713 |                 "bottom": -19,
 714 |                 "height": 20,
 715 |                 "left": -19,
 716 |                 "position": "absolute",
 717 |                 "right": "auto",
 718 |                 "top": "auto",
 719 |                 "width": 20,
 720 |               }
 721 |             }
 722 |           >
 723 |             <div
 724 |               data-radium={true}
 725 |               style={
 726 |                 Object {
 727 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 728 |                   "bottom": "auto",
 729 |                   "left": 0,
 730 |                   "position": "absolute",
 731 |                   "right": 5,
 732 |                   "top": 0,
 733 |                 }
 734 |               }
 735 |             />
 736 |             <div
 737 |               data-radium={true}
 738 |               style={
 739 |                 Object {
 740 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 741 |                   "bottom": 0,
 742 |                   "left": "auto",
 743 |                   "position": "absolute",
 744 |                   "right": 0,
 745 |                   "top": 5,
 746 |                 }
 747 |               }
 748 |             />
 749 |           </div>
 750 |           <div
 751 |             data-radium={true}
 752 |             style={
 753 |               Object {
 754 |                 "bottom": -19,
 755 |                 "height": 20,
 756 |                 "left": "auto",
 757 |                 "position": "absolute",
 758 |                 "right": -19,
 759 |                 "top": undefined,
 760 |                 "width": 20,
 761 |               }
 762 |             }
 763 |           >
 764 |             <div
 765 |               data-radium={true}
 766 |               style={
 767 |                 Object {
 768 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 769 |                   "bottom": "auto",
 770 |                   "left": 5,
 771 |                   "position": "absolute",
 772 |                   "right": 0,
 773 |                   "top": 0,
 774 |                 }
 775 |               }
 776 |             />
 777 |             <div
 778 |               data-radium={true}
 779 |               style={
 780 |                 Object {
 781 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 782 |                   "bottom": 0,
 783 |                   "left": 0,
 784 |                   "position": "absolute",
 785 |                   "right": "auto",
 786 |                   "top": 5,
 787 |                 }
 788 |               }
 789 |             />
 790 |           </div>
 791 |         </div>
 792 |       </div>
 793 |     </div>
 794 |   </div>
 795 | </div>
 796 | `;
 797 | 
 798 | exports[`Storyshots Identicon with placeholder seed 1`] = `
 799 | <div>
 800 |   <div
 801 |     data-radium={true}
 802 |     style={
 803 |       Object {
 804 |         "background": "rgb(255, 255, 255)",
 805 |         "bottom": 0,
 806 |         "display": "flex",
 807 |         "flexDirection": "column",
 808 |         "left": 0,
 809 |         "position": "absolute",
 810 |         "right": 0,
 811 |         "top": 0,
 812 |       }
 813 |     }
 814 |   >
 815 |     <div
 816 |       data-radium={true}
 817 |       style={
 818 |         Object {
 819 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 820 |           "marginLeft": 15,
 821 |           "marginRight": 15,
 822 |           "marginTop": 15,
 823 |           "paddingBottom": 15,
 824 |           "paddingTop": 2,
 825 |         }
 826 |       }
 827 |     >
 828 |       <h2
 829 |         data-radium={true}
 830 |         style={
 831 |           Object {
 832 |             "color": "rgba(0, 0, 0, 0.6)",
 833 |             "fontSize": 20,
 834 |             "fontWeight": 200,
 835 |             "margin": 0,
 836 |             "padding": 0,
 837 |           }
 838 |         }
 839 |       >
 840 |         Dapp Front Boilerplate UI-Kit
 841 |       </h2>
 842 |     </div>
 843 |     <div
 844 |       data-radium={true}
 845 |       style={
 846 |         Object {
 847 |           "boxSizing": "border-box",
 848 |           "flex": 1,
 849 |           "margin": 50,
 850 |           "position": "relative",
 851 |         }
 852 |       }
 853 |     >
 854 |       <div
 855 |         data-radium={true}
 856 |         style={
 857 |           Object {
 858 |             "alignItems": "center",
 859 |             "bottom": 0,
 860 |             "display": "flex",
 861 |             "flexDirection": "column",
 862 |             "justifyContent": "center",
 863 |             "left": 0,
 864 |             "position": "absolute",
 865 |             "right": 0,
 866 |             "top": 0,
 867 |           }
 868 |         }
 869 |       >
 870 |         <div
 871 |           data-radium={true}
 872 |           style={
 873 |             Object {
 874 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
 875 |               "boxSizing": "border-box",
 876 |               "height": "auto",
 877 |               "position": "relative",
 878 |               "width": "auto",
 879 |             }
 880 |           }
 881 |         >
 882 |           <div>
 883 |             [Identicon]
 884 |           </div>
 885 |           <div
 886 |             data-radium={true}
 887 |             style={
 888 |               Object {
 889 |                 "bottom": "auto",
 890 |                 "height": 20,
 891 |                 "left": -19,
 892 |                 "position": "absolute",
 893 |                 "right": "auto",
 894 |                 "top": -19,
 895 |                 "width": 20,
 896 |               }
 897 |             }
 898 |           >
 899 |             <div
 900 |               data-radium={true}
 901 |               style={
 902 |                 Object {
 903 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 904 |                   "bottom": 0,
 905 |                   "left": 0,
 906 |                   "position": "absolute",
 907 |                   "right": 5,
 908 |                   "top": undefined,
 909 |                 }
 910 |               }
 911 |             />
 912 |             <div
 913 |               data-radium={true}
 914 |               style={
 915 |                 Object {
 916 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 917 |                   "bottom": 5,
 918 |                   "left": "auto",
 919 |                   "position": "absolute",
 920 |                   "right": 0,
 921 |                   "top": 0,
 922 |                 }
 923 |               }
 924 |             />
 925 |           </div>
 926 |           <div
 927 |             data-radium={true}
 928 |             style={
 929 |               Object {
 930 |                 "bottom": "auto",
 931 |                 "height": 20,
 932 |                 "left": "auto",
 933 |                 "position": "absolute",
 934 |                 "right": -19,
 935 |                 "top": -19,
 936 |                 "width": 20,
 937 |               }
 938 |             }
 939 |           >
 940 |             <div
 941 |               data-radium={true}
 942 |               style={
 943 |                 Object {
 944 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 945 |                   "bottom": 0,
 946 |                   "left": 5,
 947 |                   "position": "absolute",
 948 |                   "right": 0,
 949 |                   "top": "auto",
 950 |                 }
 951 |               }
 952 |             />
 953 |             <div
 954 |               data-radium={true}
 955 |               style={
 956 |                 Object {
 957 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 958 |                   "bottom": 5,
 959 |                   "left": 0,
 960 |                   "position": "absolute",
 961 |                   "right": "auto",
 962 |                   "top": 0,
 963 |                 }
 964 |               }
 965 |             />
 966 |           </div>
 967 |           <div
 968 |             data-radium={true}
 969 |             style={
 970 |               Object {
 971 |                 "bottom": -19,
 972 |                 "height": 20,
 973 |                 "left": -19,
 974 |                 "position": "absolute",
 975 |                 "right": "auto",
 976 |                 "top": "auto",
 977 |                 "width": 20,
 978 |               }
 979 |             }
 980 |           >
 981 |             <div
 982 |               data-radium={true}
 983 |               style={
 984 |                 Object {
 985 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
 986 |                   "bottom": "auto",
 987 |                   "left": 0,
 988 |                   "position": "absolute",
 989 |                   "right": 5,
 990 |                   "top": 0,
 991 |                 }
 992 |               }
 993 |             />
 994 |             <div
 995 |               data-radium={true}
 996 |               style={
 997 |                 Object {
 998 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
 999 |                   "bottom": 0,
1000 |                   "left": "auto",
1001 |                   "position": "absolute",
1002 |                   "right": 0,
1003 |                   "top": 5,
1004 |                 }
1005 |               }
1006 |             />
1007 |           </div>
1008 |           <div
1009 |             data-radium={true}
1010 |             style={
1011 |               Object {
1012 |                 "bottom": -19,
1013 |                 "height": 20,
1014 |                 "left": "auto",
1015 |                 "position": "absolute",
1016 |                 "right": -19,
1017 |                 "top": undefined,
1018 |                 "width": 20,
1019 |               }
1020 |             }
1021 |           >
1022 |             <div
1023 |               data-radium={true}
1024 |               style={
1025 |                 Object {
1026 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1027 |                   "bottom": "auto",
1028 |                   "left": 5,
1029 |                   "position": "absolute",
1030 |                   "right": 0,
1031 |                   "top": 0,
1032 |                 }
1033 |               }
1034 |             />
1035 |             <div
1036 |               data-radium={true}
1037 |               style={
1038 |                 Object {
1039 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1040 |                   "bottom": 0,
1041 |                   "left": 0,
1042 |                   "position": "absolute",
1043 |                   "right": "auto",
1044 |                   "top": 5,
1045 |                 }
1046 |               }
1047 |             />
1048 |           </div>
1049 |         </div>
1050 |       </div>
1051 |     </div>
1052 |   </div>
1053 | </div>
1054 | `;
1055 | 
1056 | exports[`Storyshots Page Not Found default 1`] = `
1057 | <div>
1058 |   <div
1059 |     data-radium={true}
1060 |     style={
1061 |       Object {
1062 |         "background": "rgb(255, 255, 255)",
1063 |         "bottom": 0,
1064 |         "display": "flex",
1065 |         "flexDirection": "column",
1066 |         "left": 0,
1067 |         "position": "absolute",
1068 |         "right": 0,
1069 |         "top": 0,
1070 |       }
1071 |     }
1072 |   >
1073 |     <div
1074 |       data-radium={true}
1075 |       style={
1076 |         Object {
1077 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1078 |           "marginLeft": 15,
1079 |           "marginRight": 15,
1080 |           "marginTop": 15,
1081 |           "paddingBottom": 15,
1082 |           "paddingTop": 2,
1083 |         }
1084 |       }
1085 |     >
1086 |       <h2
1087 |         data-radium={true}
1088 |         style={
1089 |           Object {
1090 |             "color": "rgba(0, 0, 0, 0.6)",
1091 |             "fontSize": 20,
1092 |             "fontWeight": 200,
1093 |             "margin": 0,
1094 |             "padding": 0,
1095 |           }
1096 |         }
1097 |       >
1098 |         Dapp Front Boilerplate UI-Kit
1099 |       </h2>
1100 |     </div>
1101 |     <div
1102 |       data-radium={true}
1103 |       style={
1104 |         Object {
1105 |           "boxSizing": "border-box",
1106 |           "flex": 1,
1107 |           "margin": 50,
1108 |           "position": "relative",
1109 |         }
1110 |       }
1111 |     >
1112 |       <div
1113 |         data-radium={true}
1114 |         style={
1115 |           Object {
1116 |             "alignItems": "center",
1117 |             "bottom": 0,
1118 |             "display": "flex",
1119 |             "flexDirection": "column",
1120 |             "justifyContent": "center",
1121 |             "left": 0,
1122 |             "position": "absolute",
1123 |             "right": 0,
1124 |             "top": 0,
1125 |           }
1126 |         }
1127 |       >
1128 |         <div
1129 |           data-radium={true}
1130 |           style={
1131 |             Object {
1132 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
1133 |               "boxSizing": "border-box",
1134 |               "height": "auto",
1135 |               "position": "relative",
1136 |               "width": "auto",
1137 |             }
1138 |           }
1139 |         >
1140 |           <div
1141 |             className="PageNotFound"
1142 |           >
1143 |             <div
1144 |               className="PageNotFound-message"
1145 |             >
1146 |               404. This is not the page you are looking for.
1147 |             </div>
1148 |           </div>
1149 |           <div
1150 |             data-radium={true}
1151 |             style={
1152 |               Object {
1153 |                 "bottom": "auto",
1154 |                 "height": 20,
1155 |                 "left": -19,
1156 |                 "position": "absolute",
1157 |                 "right": "auto",
1158 |                 "top": -19,
1159 |                 "width": 20,
1160 |               }
1161 |             }
1162 |           >
1163 |             <div
1164 |               data-radium={true}
1165 |               style={
1166 |                 Object {
1167 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1168 |                   "bottom": 0,
1169 |                   "left": 0,
1170 |                   "position": "absolute",
1171 |                   "right": 5,
1172 |                   "top": undefined,
1173 |                 }
1174 |               }
1175 |             />
1176 |             <div
1177 |               data-radium={true}
1178 |               style={
1179 |                 Object {
1180 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1181 |                   "bottom": 5,
1182 |                   "left": "auto",
1183 |                   "position": "absolute",
1184 |                   "right": 0,
1185 |                   "top": 0,
1186 |                 }
1187 |               }
1188 |             />
1189 |           </div>
1190 |           <div
1191 |             data-radium={true}
1192 |             style={
1193 |               Object {
1194 |                 "bottom": "auto",
1195 |                 "height": 20,
1196 |                 "left": "auto",
1197 |                 "position": "absolute",
1198 |                 "right": -19,
1199 |                 "top": -19,
1200 |                 "width": 20,
1201 |               }
1202 |             }
1203 |           >
1204 |             <div
1205 |               data-radium={true}
1206 |               style={
1207 |                 Object {
1208 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1209 |                   "bottom": 0,
1210 |                   "left": 5,
1211 |                   "position": "absolute",
1212 |                   "right": 0,
1213 |                   "top": "auto",
1214 |                 }
1215 |               }
1216 |             />
1217 |             <div
1218 |               data-radium={true}
1219 |               style={
1220 |                 Object {
1221 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1222 |                   "bottom": 5,
1223 |                   "left": 0,
1224 |                   "position": "absolute",
1225 |                   "right": "auto",
1226 |                   "top": 0,
1227 |                 }
1228 |               }
1229 |             />
1230 |           </div>
1231 |           <div
1232 |             data-radium={true}
1233 |             style={
1234 |               Object {
1235 |                 "bottom": -19,
1236 |                 "height": 20,
1237 |                 "left": -19,
1238 |                 "position": "absolute",
1239 |                 "right": "auto",
1240 |                 "top": "auto",
1241 |                 "width": 20,
1242 |               }
1243 |             }
1244 |           >
1245 |             <div
1246 |               data-radium={true}
1247 |               style={
1248 |                 Object {
1249 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1250 |                   "bottom": "auto",
1251 |                   "left": 0,
1252 |                   "position": "absolute",
1253 |                   "right": 5,
1254 |                   "top": 0,
1255 |                 }
1256 |               }
1257 |             />
1258 |             <div
1259 |               data-radium={true}
1260 |               style={
1261 |                 Object {
1262 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1263 |                   "bottom": 0,
1264 |                   "left": "auto",
1265 |                   "position": "absolute",
1266 |                   "right": 0,
1267 |                   "top": 5,
1268 |                 }
1269 |               }
1270 |             />
1271 |           </div>
1272 |           <div
1273 |             data-radium={true}
1274 |             style={
1275 |               Object {
1276 |                 "bottom": -19,
1277 |                 "height": 20,
1278 |                 "left": "auto",
1279 |                 "position": "absolute",
1280 |                 "right": -19,
1281 |                 "top": undefined,
1282 |                 "width": 20,
1283 |               }
1284 |             }
1285 |           >
1286 |             <div
1287 |               data-radium={true}
1288 |               style={
1289 |                 Object {
1290 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1291 |                   "bottom": "auto",
1292 |                   "left": 5,
1293 |                   "position": "absolute",
1294 |                   "right": 0,
1295 |                   "top": 0,
1296 |                 }
1297 |               }
1298 |             />
1299 |             <div
1300 |               data-radium={true}
1301 |               style={
1302 |                 Object {
1303 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1304 |                   "bottom": 0,
1305 |                   "left": 0,
1306 |                   "position": "absolute",
1307 |                   "right": "auto",
1308 |                   "top": 5,
1309 |                 }
1310 |               }
1311 |             />
1312 |           </div>
1313 |         </div>
1314 |       </div>
1315 |     </div>
1316 |   </div>
1317 | </div>
1318 | `;
1319 | 
1320 | exports[`Storyshots Requires MetaMask needs unlock 1`] = `
1321 | <div>
1322 |   <div
1323 |     data-radium={true}
1324 |     style={
1325 |       Object {
1326 |         "background": "rgb(255, 255, 255)",
1327 |         "bottom": 0,
1328 |         "display": "flex",
1329 |         "flexDirection": "column",
1330 |         "left": 0,
1331 |         "position": "absolute",
1332 |         "right": 0,
1333 |         "top": 0,
1334 |       }
1335 |     }
1336 |   >
1337 |     <div
1338 |       data-radium={true}
1339 |       style={
1340 |         Object {
1341 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1342 |           "marginLeft": 15,
1343 |           "marginRight": 15,
1344 |           "marginTop": 15,
1345 |           "paddingBottom": 15,
1346 |           "paddingTop": 2,
1347 |         }
1348 |       }
1349 |     >
1350 |       <h2
1351 |         data-radium={true}
1352 |         style={
1353 |           Object {
1354 |             "color": "rgba(0, 0, 0, 0.6)",
1355 |             "fontSize": 20,
1356 |             "fontWeight": 200,
1357 |             "margin": 0,
1358 |             "padding": 0,
1359 |           }
1360 |         }
1361 |       >
1362 |         Dapp Front Boilerplate UI-Kit
1363 |       </h2>
1364 |     </div>
1365 |     <div
1366 |       data-radium={true}
1367 |       style={
1368 |         Object {
1369 |           "boxSizing": "border-box",
1370 |           "flex": 1,
1371 |           "margin": 50,
1372 |           "position": "relative",
1373 |         }
1374 |       }
1375 |     >
1376 |       <div
1377 |         data-radium={true}
1378 |         style={
1379 |           Object {
1380 |             "alignItems": "center",
1381 |             "bottom": 0,
1382 |             "display": "flex",
1383 |             "flexDirection": "column",
1384 |             "justifyContent": "center",
1385 |             "left": 0,
1386 |             "position": "absolute",
1387 |             "right": 0,
1388 |             "top": 0,
1389 |           }
1390 |         }
1391 |       >
1392 |         <div
1393 |           data-radium={true}
1394 |           style={
1395 |             Object {
1396 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
1397 |               "boxSizing": "border-box",
1398 |               "height": "auto",
1399 |               "position": "relative",
1400 |               "width": "auto",
1401 |             }
1402 |           }
1403 |         >
1404 |           <div
1405 |             className="RequiresMetaMask"
1406 |           >
1407 |             <div
1408 |               className="RequiresMetaMask-message"
1409 |             >
1410 |               <span>
1411 |                 This is a decentralized application. In order to use this site please
1412 |                  
1413 |               </span>
1414 |               unlock 
1415 |               <a
1416 |                 className="RequiresMetaMask-message-link"
1417 |                 href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en"
1418 |               >
1419 |                 MetaMask
1420 |               </a>
1421 |             </div>
1422 |           </div>
1423 |           <div
1424 |             data-radium={true}
1425 |             style={
1426 |               Object {
1427 |                 "bottom": "auto",
1428 |                 "height": 20,
1429 |                 "left": -19,
1430 |                 "position": "absolute",
1431 |                 "right": "auto",
1432 |                 "top": -19,
1433 |                 "width": 20,
1434 |               }
1435 |             }
1436 |           >
1437 |             <div
1438 |               data-radium={true}
1439 |               style={
1440 |                 Object {
1441 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1442 |                   "bottom": 0,
1443 |                   "left": 0,
1444 |                   "position": "absolute",
1445 |                   "right": 5,
1446 |                   "top": undefined,
1447 |                 }
1448 |               }
1449 |             />
1450 |             <div
1451 |               data-radium={true}
1452 |               style={
1453 |                 Object {
1454 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1455 |                   "bottom": 5,
1456 |                   "left": "auto",
1457 |                   "position": "absolute",
1458 |                   "right": 0,
1459 |                   "top": 0,
1460 |                 }
1461 |               }
1462 |             />
1463 |           </div>
1464 |           <div
1465 |             data-radium={true}
1466 |             style={
1467 |               Object {
1468 |                 "bottom": "auto",
1469 |                 "height": 20,
1470 |                 "left": "auto",
1471 |                 "position": "absolute",
1472 |                 "right": -19,
1473 |                 "top": -19,
1474 |                 "width": 20,
1475 |               }
1476 |             }
1477 |           >
1478 |             <div
1479 |               data-radium={true}
1480 |               style={
1481 |                 Object {
1482 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1483 |                   "bottom": 0,
1484 |                   "left": 5,
1485 |                   "position": "absolute",
1486 |                   "right": 0,
1487 |                   "top": "auto",
1488 |                 }
1489 |               }
1490 |             />
1491 |             <div
1492 |               data-radium={true}
1493 |               style={
1494 |                 Object {
1495 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1496 |                   "bottom": 5,
1497 |                   "left": 0,
1498 |                   "position": "absolute",
1499 |                   "right": "auto",
1500 |                   "top": 0,
1501 |                 }
1502 |               }
1503 |             />
1504 |           </div>
1505 |           <div
1506 |             data-radium={true}
1507 |             style={
1508 |               Object {
1509 |                 "bottom": -19,
1510 |                 "height": 20,
1511 |                 "left": -19,
1512 |                 "position": "absolute",
1513 |                 "right": "auto",
1514 |                 "top": "auto",
1515 |                 "width": 20,
1516 |               }
1517 |             }
1518 |           >
1519 |             <div
1520 |               data-radium={true}
1521 |               style={
1522 |                 Object {
1523 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1524 |                   "bottom": "auto",
1525 |                   "left": 0,
1526 |                   "position": "absolute",
1527 |                   "right": 5,
1528 |                   "top": 0,
1529 |                 }
1530 |               }
1531 |             />
1532 |             <div
1533 |               data-radium={true}
1534 |               style={
1535 |                 Object {
1536 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1537 |                   "bottom": 0,
1538 |                   "left": "auto",
1539 |                   "position": "absolute",
1540 |                   "right": 0,
1541 |                   "top": 5,
1542 |                 }
1543 |               }
1544 |             />
1545 |           </div>
1546 |           <div
1547 |             data-radium={true}
1548 |             style={
1549 |               Object {
1550 |                 "bottom": -19,
1551 |                 "height": 20,
1552 |                 "left": "auto",
1553 |                 "position": "absolute",
1554 |                 "right": -19,
1555 |                 "top": undefined,
1556 |                 "width": 20,
1557 |               }
1558 |             }
1559 |           >
1560 |             <div
1561 |               data-radium={true}
1562 |               style={
1563 |                 Object {
1564 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1565 |                   "bottom": "auto",
1566 |                   "left": 5,
1567 |                   "position": "absolute",
1568 |                   "right": 0,
1569 |                   "top": 0,
1570 |                 }
1571 |               }
1572 |             />
1573 |             <div
1574 |               data-radium={true}
1575 |               style={
1576 |                 Object {
1577 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1578 |                   "bottom": 0,
1579 |                   "left": 0,
1580 |                   "position": "absolute",
1581 |                   "right": "auto",
1582 |                   "top": 5,
1583 |                 }
1584 |               }
1585 |             />
1586 |           </div>
1587 |         </div>
1588 |       </div>
1589 |     </div>
1590 |   </div>
1591 | </div>
1592 | `;
1593 | 
1594 | exports[`Storyshots Requires MetaMask not found 1`] = `
1595 | <div>
1596 |   <div
1597 |     data-radium={true}
1598 |     style={
1599 |       Object {
1600 |         "background": "rgb(255, 255, 255)",
1601 |         "bottom": 0,
1602 |         "display": "flex",
1603 |         "flexDirection": "column",
1604 |         "left": 0,
1605 |         "position": "absolute",
1606 |         "right": 0,
1607 |         "top": 0,
1608 |       }
1609 |     }
1610 |   >
1611 |     <div
1612 |       data-radium={true}
1613 |       style={
1614 |         Object {
1615 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1616 |           "marginLeft": 15,
1617 |           "marginRight": 15,
1618 |           "marginTop": 15,
1619 |           "paddingBottom": 15,
1620 |           "paddingTop": 2,
1621 |         }
1622 |       }
1623 |     >
1624 |       <h2
1625 |         data-radium={true}
1626 |         style={
1627 |           Object {
1628 |             "color": "rgba(0, 0, 0, 0.6)",
1629 |             "fontSize": 20,
1630 |             "fontWeight": 200,
1631 |             "margin": 0,
1632 |             "padding": 0,
1633 |           }
1634 |         }
1635 |       >
1636 |         Dapp Front Boilerplate UI-Kit
1637 |       </h2>
1638 |     </div>
1639 |     <div
1640 |       data-radium={true}
1641 |       style={
1642 |         Object {
1643 |           "boxSizing": "border-box",
1644 |           "flex": 1,
1645 |           "margin": 50,
1646 |           "position": "relative",
1647 |         }
1648 |       }
1649 |     >
1650 |       <div
1651 |         data-radium={true}
1652 |         style={
1653 |           Object {
1654 |             "alignItems": "center",
1655 |             "bottom": 0,
1656 |             "display": "flex",
1657 |             "flexDirection": "column",
1658 |             "justifyContent": "center",
1659 |             "left": 0,
1660 |             "position": "absolute",
1661 |             "right": 0,
1662 |             "top": 0,
1663 |           }
1664 |         }
1665 |       >
1666 |         <div
1667 |           data-radium={true}
1668 |           style={
1669 |             Object {
1670 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
1671 |               "boxSizing": "border-box",
1672 |               "height": "auto",
1673 |               "position": "relative",
1674 |               "width": "auto",
1675 |             }
1676 |           }
1677 |         >
1678 |           <div
1679 |             className="RequiresMetaMask"
1680 |           >
1681 |             <div
1682 |               className="RequiresMetaMask-message"
1683 |             >
1684 |               <span>
1685 |                 This is a decentralized application. In order to use this site please
1686 |                  
1687 |               </span>
1688 |               download 
1689 |               <a
1690 |                 className="RequiresMetaMask-message-link"
1691 |                 href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en"
1692 |               >
1693 |                 MetaMask
1694 |               </a>
1695 |             </div>
1696 |           </div>
1697 |           <div
1698 |             data-radium={true}
1699 |             style={
1700 |               Object {
1701 |                 "bottom": "auto",
1702 |                 "height": 20,
1703 |                 "left": -19,
1704 |                 "position": "absolute",
1705 |                 "right": "auto",
1706 |                 "top": -19,
1707 |                 "width": 20,
1708 |               }
1709 |             }
1710 |           >
1711 |             <div
1712 |               data-radium={true}
1713 |               style={
1714 |                 Object {
1715 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1716 |                   "bottom": 0,
1717 |                   "left": 0,
1718 |                   "position": "absolute",
1719 |                   "right": 5,
1720 |                   "top": undefined,
1721 |                 }
1722 |               }
1723 |             />
1724 |             <div
1725 |               data-radium={true}
1726 |               style={
1727 |                 Object {
1728 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1729 |                   "bottom": 5,
1730 |                   "left": "auto",
1731 |                   "position": "absolute",
1732 |                   "right": 0,
1733 |                   "top": 0,
1734 |                 }
1735 |               }
1736 |             />
1737 |           </div>
1738 |           <div
1739 |             data-radium={true}
1740 |             style={
1741 |               Object {
1742 |                 "bottom": "auto",
1743 |                 "height": 20,
1744 |                 "left": "auto",
1745 |                 "position": "absolute",
1746 |                 "right": -19,
1747 |                 "top": -19,
1748 |                 "width": 20,
1749 |               }
1750 |             }
1751 |           >
1752 |             <div
1753 |               data-radium={true}
1754 |               style={
1755 |                 Object {
1756 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1757 |                   "bottom": 0,
1758 |                   "left": 5,
1759 |                   "position": "absolute",
1760 |                   "right": 0,
1761 |                   "top": "auto",
1762 |                 }
1763 |               }
1764 |             />
1765 |             <div
1766 |               data-radium={true}
1767 |               style={
1768 |                 Object {
1769 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1770 |                   "bottom": 5,
1771 |                   "left": 0,
1772 |                   "position": "absolute",
1773 |                   "right": "auto",
1774 |                   "top": 0,
1775 |                 }
1776 |               }
1777 |             />
1778 |           </div>
1779 |           <div
1780 |             data-radium={true}
1781 |             style={
1782 |               Object {
1783 |                 "bottom": -19,
1784 |                 "height": 20,
1785 |                 "left": -19,
1786 |                 "position": "absolute",
1787 |                 "right": "auto",
1788 |                 "top": "auto",
1789 |                 "width": 20,
1790 |               }
1791 |             }
1792 |           >
1793 |             <div
1794 |               data-radium={true}
1795 |               style={
1796 |                 Object {
1797 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1798 |                   "bottom": "auto",
1799 |                   "left": 0,
1800 |                   "position": "absolute",
1801 |                   "right": 5,
1802 |                   "top": 0,
1803 |                 }
1804 |               }
1805 |             />
1806 |             <div
1807 |               data-radium={true}
1808 |               style={
1809 |                 Object {
1810 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1811 |                   "bottom": 0,
1812 |                   "left": "auto",
1813 |                   "position": "absolute",
1814 |                   "right": 0,
1815 |                   "top": 5,
1816 |                 }
1817 |               }
1818 |             />
1819 |           </div>
1820 |           <div
1821 |             data-radium={true}
1822 |             style={
1823 |               Object {
1824 |                 "bottom": -19,
1825 |                 "height": 20,
1826 |                 "left": "auto",
1827 |                 "position": "absolute",
1828 |                 "right": -19,
1829 |                 "top": undefined,
1830 |                 "width": 20,
1831 |               }
1832 |             }
1833 |           >
1834 |             <div
1835 |               data-radium={true}
1836 |               style={
1837 |                 Object {
1838 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1839 |                   "bottom": "auto",
1840 |                   "left": 5,
1841 |                   "position": "absolute",
1842 |                   "right": 0,
1843 |                   "top": 0,
1844 |                 }
1845 |               }
1846 |             />
1847 |             <div
1848 |               data-radium={true}
1849 |               style={
1850 |                 Object {
1851 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1852 |                   "bottom": 0,
1853 |                   "left": 0,
1854 |                   "position": "absolute",
1855 |                   "right": "auto",
1856 |                   "top": 5,
1857 |                 }
1858 |               }
1859 |             />
1860 |           </div>
1861 |         </div>
1862 |       </div>
1863 |     </div>
1864 |   </div>
1865 | </div>
1866 | `;
1867 | 
1868 | exports[`Storyshots Text Input default 1`] = `
1869 | <div>
1870 |   <div
1871 |     data-radium={true}
1872 |     style={
1873 |       Object {
1874 |         "background": "rgb(255, 255, 255)",
1875 |         "bottom": 0,
1876 |         "display": "flex",
1877 |         "flexDirection": "column",
1878 |         "left": 0,
1879 |         "position": "absolute",
1880 |         "right": 0,
1881 |         "top": 0,
1882 |       }
1883 |     }
1884 |   >
1885 |     <div
1886 |       data-radium={true}
1887 |       style={
1888 |         Object {
1889 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1890 |           "marginLeft": 15,
1891 |           "marginRight": 15,
1892 |           "marginTop": 15,
1893 |           "paddingBottom": 15,
1894 |           "paddingTop": 2,
1895 |         }
1896 |       }
1897 |     >
1898 |       <h2
1899 |         data-radium={true}
1900 |         style={
1901 |           Object {
1902 |             "color": "rgba(0, 0, 0, 0.6)",
1903 |             "fontSize": 20,
1904 |             "fontWeight": 200,
1905 |             "margin": 0,
1906 |             "padding": 0,
1907 |           }
1908 |         }
1909 |       >
1910 |         Dapp Front Boilerplate UI-Kit
1911 |       </h2>
1912 |     </div>
1913 |     <div
1914 |       data-radium={true}
1915 |       style={
1916 |         Object {
1917 |           "boxSizing": "border-box",
1918 |           "flex": 1,
1919 |           "margin": 50,
1920 |           "position": "relative",
1921 |         }
1922 |       }
1923 |     >
1924 |       <div
1925 |         data-radium={true}
1926 |         style={
1927 |           Object {
1928 |             "alignItems": "center",
1929 |             "bottom": 0,
1930 |             "display": "flex",
1931 |             "flexDirection": "column",
1932 |             "justifyContent": "center",
1933 |             "left": 0,
1934 |             "position": "absolute",
1935 |             "right": 0,
1936 |             "top": 0,
1937 |           }
1938 |         }
1939 |       >
1940 |         <div
1941 |           data-radium={true}
1942 |           style={
1943 |             Object {
1944 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
1945 |               "boxSizing": "border-box",
1946 |               "height": "auto",
1947 |               "position": "relative",
1948 |               "width": "auto",
1949 |             }
1950 |           }
1951 |         >
1952 |           <div
1953 |             className="TextInput  "
1954 |           >
1955 |             <input
1956 |               className="TextInput-input"
1957 |               onChange={[Function]}
1958 |               type="text"
1959 |               value=""
1960 |             />
1961 |             <div
1962 |               className="TextInput-placeholder"
1963 |             >
1964 |               EMAIL
1965 |             </div>
1966 |           </div>
1967 |           <div
1968 |             data-radium={true}
1969 |             style={
1970 |               Object {
1971 |                 "bottom": "auto",
1972 |                 "height": 20,
1973 |                 "left": -19,
1974 |                 "position": "absolute",
1975 |                 "right": "auto",
1976 |                 "top": -19,
1977 |                 "width": 20,
1978 |               }
1979 |             }
1980 |           >
1981 |             <div
1982 |               data-radium={true}
1983 |               style={
1984 |                 Object {
1985 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
1986 |                   "bottom": 0,
1987 |                   "left": 0,
1988 |                   "position": "absolute",
1989 |                   "right": 5,
1990 |                   "top": undefined,
1991 |                 }
1992 |               }
1993 |             />
1994 |             <div
1995 |               data-radium={true}
1996 |               style={
1997 |                 Object {
1998 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
1999 |                   "bottom": 5,
2000 |                   "left": "auto",
2001 |                   "position": "absolute",
2002 |                   "right": 0,
2003 |                   "top": 0,
2004 |                 }
2005 |               }
2006 |             />
2007 |           </div>
2008 |           <div
2009 |             data-radium={true}
2010 |             style={
2011 |               Object {
2012 |                 "bottom": "auto",
2013 |                 "height": 20,
2014 |                 "left": "auto",
2015 |                 "position": "absolute",
2016 |                 "right": -19,
2017 |                 "top": -19,
2018 |                 "width": 20,
2019 |               }
2020 |             }
2021 |           >
2022 |             <div
2023 |               data-radium={true}
2024 |               style={
2025 |                 Object {
2026 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2027 |                   "bottom": 0,
2028 |                   "left": 5,
2029 |                   "position": "absolute",
2030 |                   "right": 0,
2031 |                   "top": "auto",
2032 |                 }
2033 |               }
2034 |             />
2035 |             <div
2036 |               data-radium={true}
2037 |               style={
2038 |                 Object {
2039 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2040 |                   "bottom": 5,
2041 |                   "left": 0,
2042 |                   "position": "absolute",
2043 |                   "right": "auto",
2044 |                   "top": 0,
2045 |                 }
2046 |               }
2047 |             />
2048 |           </div>
2049 |           <div
2050 |             data-radium={true}
2051 |             style={
2052 |               Object {
2053 |                 "bottom": -19,
2054 |                 "height": 20,
2055 |                 "left": -19,
2056 |                 "position": "absolute",
2057 |                 "right": "auto",
2058 |                 "top": "auto",
2059 |                 "width": 20,
2060 |               }
2061 |             }
2062 |           >
2063 |             <div
2064 |               data-radium={true}
2065 |               style={
2066 |                 Object {
2067 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2068 |                   "bottom": "auto",
2069 |                   "left": 0,
2070 |                   "position": "absolute",
2071 |                   "right": 5,
2072 |                   "top": 0,
2073 |                 }
2074 |               }
2075 |             />
2076 |             <div
2077 |               data-radium={true}
2078 |               style={
2079 |                 Object {
2080 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2081 |                   "bottom": 0,
2082 |                   "left": "auto",
2083 |                   "position": "absolute",
2084 |                   "right": 0,
2085 |                   "top": 5,
2086 |                 }
2087 |               }
2088 |             />
2089 |           </div>
2090 |           <div
2091 |             data-radium={true}
2092 |             style={
2093 |               Object {
2094 |                 "bottom": -19,
2095 |                 "height": 20,
2096 |                 "left": "auto",
2097 |                 "position": "absolute",
2098 |                 "right": -19,
2099 |                 "top": undefined,
2100 |                 "width": 20,
2101 |               }
2102 |             }
2103 |           >
2104 |             <div
2105 |               data-radium={true}
2106 |               style={
2107 |                 Object {
2108 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2109 |                   "bottom": "auto",
2110 |                   "left": 5,
2111 |                   "position": "absolute",
2112 |                   "right": 0,
2113 |                   "top": 0,
2114 |                 }
2115 |               }
2116 |             />
2117 |             <div
2118 |               data-radium={true}
2119 |               style={
2120 |                 Object {
2121 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2122 |                   "bottom": 0,
2123 |                   "left": 0,
2124 |                   "position": "absolute",
2125 |                   "right": "auto",
2126 |                   "top": 5,
2127 |                 }
2128 |               }
2129 |             />
2130 |           </div>
2131 |         </div>
2132 |       </div>
2133 |     </div>
2134 |   </div>
2135 | </div>
2136 | `;
2137 | 
2138 | exports[`Storyshots Text Input error 1`] = `
2139 | <div>
2140 |   <div
2141 |     data-radium={true}
2142 |     style={
2143 |       Object {
2144 |         "background": "rgb(255, 255, 255)",
2145 |         "bottom": 0,
2146 |         "display": "flex",
2147 |         "flexDirection": "column",
2148 |         "left": 0,
2149 |         "position": "absolute",
2150 |         "right": 0,
2151 |         "top": 0,
2152 |       }
2153 |     }
2154 |   >
2155 |     <div
2156 |       data-radium={true}
2157 |       style={
2158 |         Object {
2159 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2160 |           "marginLeft": 15,
2161 |           "marginRight": 15,
2162 |           "marginTop": 15,
2163 |           "paddingBottom": 15,
2164 |           "paddingTop": 2,
2165 |         }
2166 |       }
2167 |     >
2168 |       <h2
2169 |         data-radium={true}
2170 |         style={
2171 |           Object {
2172 |             "color": "rgba(0, 0, 0, 0.6)",
2173 |             "fontSize": 20,
2174 |             "fontWeight": 200,
2175 |             "margin": 0,
2176 |             "padding": 0,
2177 |           }
2178 |         }
2179 |       >
2180 |         Dapp Front Boilerplate UI-Kit
2181 |       </h2>
2182 |     </div>
2183 |     <div
2184 |       data-radium={true}
2185 |       style={
2186 |         Object {
2187 |           "boxSizing": "border-box",
2188 |           "flex": 1,
2189 |           "margin": 50,
2190 |           "position": "relative",
2191 |         }
2192 |       }
2193 |     >
2194 |       <div
2195 |         data-radium={true}
2196 |         style={
2197 |           Object {
2198 |             "alignItems": "center",
2199 |             "bottom": 0,
2200 |             "display": "flex",
2201 |             "flexDirection": "column",
2202 |             "justifyContent": "center",
2203 |             "left": 0,
2204 |             "position": "absolute",
2205 |             "right": 0,
2206 |             "top": 0,
2207 |           }
2208 |         }
2209 |       >
2210 |         <div
2211 |           data-radium={true}
2212 |           style={
2213 |             Object {
2214 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
2215 |               "boxSizing": "border-box",
2216 |               "height": "auto",
2217 |               "position": "relative",
2218 |               "width": "auto",
2219 |             }
2220 |           }
2221 |         >
2222 |           <div
2223 |             className="TextInput is-error "
2224 |           >
2225 |             <input
2226 |               className="TextInput-input"
2227 |               onChange={[Function]}
2228 |               type="text"
2229 |               value=""
2230 |             />
2231 |             <div
2232 |               className="TextInput-placeholder"
2233 |             >
2234 |               EMAIL
2235 |             </div>
2236 |             <div
2237 |               className="TextInput-error"
2238 |             >
2239 |               Please enter a valid email.
2240 |             </div>
2241 |           </div>
2242 |           <div
2243 |             data-radium={true}
2244 |             style={
2245 |               Object {
2246 |                 "bottom": "auto",
2247 |                 "height": 20,
2248 |                 "left": -19,
2249 |                 "position": "absolute",
2250 |                 "right": "auto",
2251 |                 "top": -19,
2252 |                 "width": 20,
2253 |               }
2254 |             }
2255 |           >
2256 |             <div
2257 |               data-radium={true}
2258 |               style={
2259 |                 Object {
2260 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2261 |                   "bottom": 0,
2262 |                   "left": 0,
2263 |                   "position": "absolute",
2264 |                   "right": 5,
2265 |                   "top": undefined,
2266 |                 }
2267 |               }
2268 |             />
2269 |             <div
2270 |               data-radium={true}
2271 |               style={
2272 |                 Object {
2273 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2274 |                   "bottom": 5,
2275 |                   "left": "auto",
2276 |                   "position": "absolute",
2277 |                   "right": 0,
2278 |                   "top": 0,
2279 |                 }
2280 |               }
2281 |             />
2282 |           </div>
2283 |           <div
2284 |             data-radium={true}
2285 |             style={
2286 |               Object {
2287 |                 "bottom": "auto",
2288 |                 "height": 20,
2289 |                 "left": "auto",
2290 |                 "position": "absolute",
2291 |                 "right": -19,
2292 |                 "top": -19,
2293 |                 "width": 20,
2294 |               }
2295 |             }
2296 |           >
2297 |             <div
2298 |               data-radium={true}
2299 |               style={
2300 |                 Object {
2301 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2302 |                   "bottom": 0,
2303 |                   "left": 5,
2304 |                   "position": "absolute",
2305 |                   "right": 0,
2306 |                   "top": "auto",
2307 |                 }
2308 |               }
2309 |             />
2310 |             <div
2311 |               data-radium={true}
2312 |               style={
2313 |                 Object {
2314 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2315 |                   "bottom": 5,
2316 |                   "left": 0,
2317 |                   "position": "absolute",
2318 |                   "right": "auto",
2319 |                   "top": 0,
2320 |                 }
2321 |               }
2322 |             />
2323 |           </div>
2324 |           <div
2325 |             data-radium={true}
2326 |             style={
2327 |               Object {
2328 |                 "bottom": -19,
2329 |                 "height": 20,
2330 |                 "left": -19,
2331 |                 "position": "absolute",
2332 |                 "right": "auto",
2333 |                 "top": "auto",
2334 |                 "width": 20,
2335 |               }
2336 |             }
2337 |           >
2338 |             <div
2339 |               data-radium={true}
2340 |               style={
2341 |                 Object {
2342 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2343 |                   "bottom": "auto",
2344 |                   "left": 0,
2345 |                   "position": "absolute",
2346 |                   "right": 5,
2347 |                   "top": 0,
2348 |                 }
2349 |               }
2350 |             />
2351 |             <div
2352 |               data-radium={true}
2353 |               style={
2354 |                 Object {
2355 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2356 |                   "bottom": 0,
2357 |                   "left": "auto",
2358 |                   "position": "absolute",
2359 |                   "right": 0,
2360 |                   "top": 5,
2361 |                 }
2362 |               }
2363 |             />
2364 |           </div>
2365 |           <div
2366 |             data-radium={true}
2367 |             style={
2368 |               Object {
2369 |                 "bottom": -19,
2370 |                 "height": 20,
2371 |                 "left": "auto",
2372 |                 "position": "absolute",
2373 |                 "right": -19,
2374 |                 "top": undefined,
2375 |                 "width": 20,
2376 |               }
2377 |             }
2378 |           >
2379 |             <div
2380 |               data-radium={true}
2381 |               style={
2382 |                 Object {
2383 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2384 |                   "bottom": "auto",
2385 |                   "left": 5,
2386 |                   "position": "absolute",
2387 |                   "right": 0,
2388 |                   "top": 0,
2389 |                 }
2390 |               }
2391 |             />
2392 |             <div
2393 |               data-radium={true}
2394 |               style={
2395 |                 Object {
2396 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2397 |                   "bottom": 0,
2398 |                   "left": 0,
2399 |                   "position": "absolute",
2400 |                   "right": "auto",
2401 |                   "top": 5,
2402 |                 }
2403 |               }
2404 |             />
2405 |           </div>
2406 |         </div>
2407 |       </div>
2408 |     </div>
2409 |   </div>
2410 | </div>
2411 | `;
2412 | 
2413 | exports[`Storyshots Text Input touched 1`] = `
2414 | <div>
2415 |   <div
2416 |     data-radium={true}
2417 |     style={
2418 |       Object {
2419 |         "background": "rgb(255, 255, 255)",
2420 |         "bottom": 0,
2421 |         "display": "flex",
2422 |         "flexDirection": "column",
2423 |         "left": 0,
2424 |         "position": "absolute",
2425 |         "right": 0,
2426 |         "top": 0,
2427 |       }
2428 |     }
2429 |   >
2430 |     <div
2431 |       data-radium={true}
2432 |       style={
2433 |         Object {
2434 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2435 |           "marginLeft": 15,
2436 |           "marginRight": 15,
2437 |           "marginTop": 15,
2438 |           "paddingBottom": 15,
2439 |           "paddingTop": 2,
2440 |         }
2441 |       }
2442 |     >
2443 |       <h2
2444 |         data-radium={true}
2445 |         style={
2446 |           Object {
2447 |             "color": "rgba(0, 0, 0, 0.6)",
2448 |             "fontSize": 20,
2449 |             "fontWeight": 200,
2450 |             "margin": 0,
2451 |             "padding": 0,
2452 |           }
2453 |         }
2454 |       >
2455 |         Dapp Front Boilerplate UI-Kit
2456 |       </h2>
2457 |     </div>
2458 |     <div
2459 |       data-radium={true}
2460 |       style={
2461 |         Object {
2462 |           "boxSizing": "border-box",
2463 |           "flex": 1,
2464 |           "margin": 50,
2465 |           "position": "relative",
2466 |         }
2467 |       }
2468 |     >
2469 |       <div
2470 |         data-radium={true}
2471 |         style={
2472 |           Object {
2473 |             "alignItems": "center",
2474 |             "bottom": 0,
2475 |             "display": "flex",
2476 |             "flexDirection": "column",
2477 |             "justifyContent": "center",
2478 |             "left": 0,
2479 |             "position": "absolute",
2480 |             "right": 0,
2481 |             "top": 0,
2482 |           }
2483 |         }
2484 |       >
2485 |         <div
2486 |           data-radium={true}
2487 |           style={
2488 |             Object {
2489 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
2490 |               "boxSizing": "border-box",
2491 |               "height": "auto",
2492 |               "position": "relative",
2493 |               "width": "auto",
2494 |             }
2495 |           }
2496 |         >
2497 |           <div
2498 |             className="TextInput  "
2499 |           >
2500 |             <input
2501 |               className="TextInput-input"
2502 |               onChange={[Function]}
2503 |               type="text"
2504 |               value=""
2505 |             />
2506 |             <div
2507 |               className="TextInput-placeholder is-touched"
2508 |             >
2509 |               EMAIL
2510 |             </div>
2511 |           </div>
2512 |           <div
2513 |             data-radium={true}
2514 |             style={
2515 |               Object {
2516 |                 "bottom": "auto",
2517 |                 "height": 20,
2518 |                 "left": -19,
2519 |                 "position": "absolute",
2520 |                 "right": "auto",
2521 |                 "top": -19,
2522 |                 "width": 20,
2523 |               }
2524 |             }
2525 |           >
2526 |             <div
2527 |               data-radium={true}
2528 |               style={
2529 |                 Object {
2530 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2531 |                   "bottom": 0,
2532 |                   "left": 0,
2533 |                   "position": "absolute",
2534 |                   "right": 5,
2535 |                   "top": undefined,
2536 |                 }
2537 |               }
2538 |             />
2539 |             <div
2540 |               data-radium={true}
2541 |               style={
2542 |                 Object {
2543 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2544 |                   "bottom": 5,
2545 |                   "left": "auto",
2546 |                   "position": "absolute",
2547 |                   "right": 0,
2548 |                   "top": 0,
2549 |                 }
2550 |               }
2551 |             />
2552 |           </div>
2553 |           <div
2554 |             data-radium={true}
2555 |             style={
2556 |               Object {
2557 |                 "bottom": "auto",
2558 |                 "height": 20,
2559 |                 "left": "auto",
2560 |                 "position": "absolute",
2561 |                 "right": -19,
2562 |                 "top": -19,
2563 |                 "width": 20,
2564 |               }
2565 |             }
2566 |           >
2567 |             <div
2568 |               data-radium={true}
2569 |               style={
2570 |                 Object {
2571 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2572 |                   "bottom": 0,
2573 |                   "left": 5,
2574 |                   "position": "absolute",
2575 |                   "right": 0,
2576 |                   "top": "auto",
2577 |                 }
2578 |               }
2579 |             />
2580 |             <div
2581 |               data-radium={true}
2582 |               style={
2583 |                 Object {
2584 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2585 |                   "bottom": 5,
2586 |                   "left": 0,
2587 |                   "position": "absolute",
2588 |                   "right": "auto",
2589 |                   "top": 0,
2590 |                 }
2591 |               }
2592 |             />
2593 |           </div>
2594 |           <div
2595 |             data-radium={true}
2596 |             style={
2597 |               Object {
2598 |                 "bottom": -19,
2599 |                 "height": 20,
2600 |                 "left": -19,
2601 |                 "position": "absolute",
2602 |                 "right": "auto",
2603 |                 "top": "auto",
2604 |                 "width": 20,
2605 |               }
2606 |             }
2607 |           >
2608 |             <div
2609 |               data-radium={true}
2610 |               style={
2611 |                 Object {
2612 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2613 |                   "bottom": "auto",
2614 |                   "left": 0,
2615 |                   "position": "absolute",
2616 |                   "right": 5,
2617 |                   "top": 0,
2618 |                 }
2619 |               }
2620 |             />
2621 |             <div
2622 |               data-radium={true}
2623 |               style={
2624 |                 Object {
2625 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2626 |                   "bottom": 0,
2627 |                   "left": "auto",
2628 |                   "position": "absolute",
2629 |                   "right": 0,
2630 |                   "top": 5,
2631 |                 }
2632 |               }
2633 |             />
2634 |           </div>
2635 |           <div
2636 |             data-radium={true}
2637 |             style={
2638 |               Object {
2639 |                 "bottom": -19,
2640 |                 "height": 20,
2641 |                 "left": "auto",
2642 |                 "position": "absolute",
2643 |                 "right": -19,
2644 |                 "top": undefined,
2645 |                 "width": 20,
2646 |               }
2647 |             }
2648 |           >
2649 |             <div
2650 |               data-radium={true}
2651 |               style={
2652 |                 Object {
2653 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2654 |                   "bottom": "auto",
2655 |                   "left": 5,
2656 |                   "position": "absolute",
2657 |                   "right": 0,
2658 |                   "top": 0,
2659 |                 }
2660 |               }
2661 |             />
2662 |             <div
2663 |               data-radium={true}
2664 |               style={
2665 |                 Object {
2666 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2667 |                   "bottom": 0,
2668 |                   "left": 0,
2669 |                   "position": "absolute",
2670 |                   "right": "auto",
2671 |                   "top": 5,
2672 |                 }
2673 |               }
2674 |             />
2675 |           </div>
2676 |         </div>
2677 |       </div>
2678 |     </div>
2679 |   </div>
2680 | </div>
2681 | `;
2682 | 
2683 | exports[`Storyshots Text Input valid 1`] = `
2684 | <div>
2685 |   <div
2686 |     data-radium={true}
2687 |     style={
2688 |       Object {
2689 |         "background": "rgb(255, 255, 255)",
2690 |         "bottom": 0,
2691 |         "display": "flex",
2692 |         "flexDirection": "column",
2693 |         "left": 0,
2694 |         "position": "absolute",
2695 |         "right": 0,
2696 |         "top": 0,
2697 |       }
2698 |     }
2699 |   >
2700 |     <div
2701 |       data-radium={true}
2702 |       style={
2703 |         Object {
2704 |           "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2705 |           "marginLeft": 15,
2706 |           "marginRight": 15,
2707 |           "marginTop": 15,
2708 |           "paddingBottom": 15,
2709 |           "paddingTop": 2,
2710 |         }
2711 |       }
2712 |     >
2713 |       <h2
2714 |         data-radium={true}
2715 |         style={
2716 |           Object {
2717 |             "color": "rgba(0, 0, 0, 0.6)",
2718 |             "fontSize": 20,
2719 |             "fontWeight": 200,
2720 |             "margin": 0,
2721 |             "padding": 0,
2722 |           }
2723 |         }
2724 |       >
2725 |         Dapp Front Boilerplate UI-Kit
2726 |       </h2>
2727 |     </div>
2728 |     <div
2729 |       data-radium={true}
2730 |       style={
2731 |         Object {
2732 |           "boxSizing": "border-box",
2733 |           "flex": 1,
2734 |           "margin": 50,
2735 |           "position": "relative",
2736 |         }
2737 |       }
2738 |     >
2739 |       <div
2740 |         data-radium={true}
2741 |         style={
2742 |           Object {
2743 |             "alignItems": "center",
2744 |             "bottom": 0,
2745 |             "display": "flex",
2746 |             "flexDirection": "column",
2747 |             "justifyContent": "center",
2748 |             "left": 0,
2749 |             "position": "absolute",
2750 |             "right": 0,
2751 |             "top": 0,
2752 |           }
2753 |         }
2754 |       >
2755 |         <div
2756 |           data-radium={true}
2757 |           style={
2758 |             Object {
2759 |               "border": "solid 1px rgba(0, 0, 0, 0.0)",
2760 |               "boxSizing": "border-box",
2761 |               "height": "auto",
2762 |               "position": "relative",
2763 |               "width": "auto",
2764 |             }
2765 |           }
2766 |         >
2767 |           <div
2768 |             className="TextInput is-valid "
2769 |           >
2770 |             <input
2771 |               className="TextInput-input"
2772 |               onChange={[Function]}
2773 |               type="text"
2774 |               value=""
2775 |             />
2776 |             <div
2777 |               className="TextInput-placeholder"
2778 |             >
2779 |               EMAIL
2780 |             </div>
2781 |           </div>
2782 |           <div
2783 |             data-radium={true}
2784 |             style={
2785 |               Object {
2786 |                 "bottom": "auto",
2787 |                 "height": 20,
2788 |                 "left": -19,
2789 |                 "position": "absolute",
2790 |                 "right": "auto",
2791 |                 "top": -19,
2792 |                 "width": 20,
2793 |               }
2794 |             }
2795 |           >
2796 |             <div
2797 |               data-radium={true}
2798 |               style={
2799 |                 Object {
2800 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2801 |                   "bottom": 0,
2802 |                   "left": 0,
2803 |                   "position": "absolute",
2804 |                   "right": 5,
2805 |                   "top": undefined,
2806 |                 }
2807 |               }
2808 |             />
2809 |             <div
2810 |               data-radium={true}
2811 |               style={
2812 |                 Object {
2813 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2814 |                   "bottom": 5,
2815 |                   "left": "auto",
2816 |                   "position": "absolute",
2817 |                   "right": 0,
2818 |                   "top": 0,
2819 |                 }
2820 |               }
2821 |             />
2822 |           </div>
2823 |           <div
2824 |             data-radium={true}
2825 |             style={
2826 |               Object {
2827 |                 "bottom": "auto",
2828 |                 "height": 20,
2829 |                 "left": "auto",
2830 |                 "position": "absolute",
2831 |                 "right": -19,
2832 |                 "top": -19,
2833 |                 "width": 20,
2834 |               }
2835 |             }
2836 |           >
2837 |             <div
2838 |               data-radium={true}
2839 |               style={
2840 |                 Object {
2841 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2842 |                   "bottom": 0,
2843 |                   "left": 5,
2844 |                   "position": "absolute",
2845 |                   "right": 0,
2846 |                   "top": "auto",
2847 |                 }
2848 |               }
2849 |             />
2850 |             <div
2851 |               data-radium={true}
2852 |               style={
2853 |                 Object {
2854 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2855 |                   "bottom": 5,
2856 |                   "left": 0,
2857 |                   "position": "absolute",
2858 |                   "right": "auto",
2859 |                   "top": 0,
2860 |                 }
2861 |               }
2862 |             />
2863 |           </div>
2864 |           <div
2865 |             data-radium={true}
2866 |             style={
2867 |               Object {
2868 |                 "bottom": -19,
2869 |                 "height": 20,
2870 |                 "left": -19,
2871 |                 "position": "absolute",
2872 |                 "right": "auto",
2873 |                 "top": "auto",
2874 |                 "width": 20,
2875 |               }
2876 |             }
2877 |           >
2878 |             <div
2879 |               data-radium={true}
2880 |               style={
2881 |                 Object {
2882 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2883 |                   "bottom": "auto",
2884 |                   "left": 0,
2885 |                   "position": "absolute",
2886 |                   "right": 5,
2887 |                   "top": 0,
2888 |                 }
2889 |               }
2890 |             />
2891 |             <div
2892 |               data-radium={true}
2893 |               style={
2894 |                 Object {
2895 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2896 |                   "bottom": 0,
2897 |                   "left": "auto",
2898 |                   "position": "absolute",
2899 |                   "right": 0,
2900 |                   "top": 5,
2901 |                 }
2902 |               }
2903 |             />
2904 |           </div>
2905 |           <div
2906 |             data-radium={true}
2907 |             style={
2908 |               Object {
2909 |                 "bottom": -19,
2910 |                 "height": 20,
2911 |                 "left": "auto",
2912 |                 "position": "absolute",
2913 |                 "right": -19,
2914 |                 "top": undefined,
2915 |                 "width": 20,
2916 |               }
2917 |             }
2918 |           >
2919 |             <div
2920 |               data-radium={true}
2921 |               style={
2922 |                 Object {
2923 |                   "borderBottom": "solid 1px rgba(0, 0, 0, 0.1)",
2924 |                   "bottom": "auto",
2925 |                   "left": 5,
2926 |                   "position": "absolute",
2927 |                   "right": 0,
2928 |                   "top": 0,
2929 |                 }
2930 |               }
2931 |             />
2932 |             <div
2933 |               data-radium={true}
2934 |               style={
2935 |                 Object {
2936 |                   "borderRight": "solid 1px rgba(0, 0, 0, 0.1)",
2937 |                   "bottom": 0,
2938 |                   "left": 0,
2939 |                   "position": "absolute",
2940 |                   "right": "auto",
2941 |                   "top": 5,
2942 |                 }
2943 |               }
2944 |             />
2945 |           </div>
2946 |         </div>
2947 |       </div>
2948 |     </div>
2949 |   </div>
2950 | </div>
2951 | `;
2952 | 


--------------------------------------------------------------------------------
/src/components/button/button.scss:
--------------------------------------------------------------------------------
 1 | @import '../../styles/_colors.scss';
 2 | 
 3 | /* @define Button */
 4 | .Button {
 5 |   // stylelint-disable-next-line declaration-colon-newline-after
 6 |   background: linear-gradient(
 7 |     0deg,
 8 |     $buttonGradientStart 0%,
 9 |     $buttonGradientEnd 100%
10 |   );
11 |   border-radius: 4px;
12 |   box-shadow: 0 1px 0 0 $buttonBoxShadow;
13 |   cursor: pointer;
14 |   height: 50px;
15 |   min-width: 200px;
16 |   padding: 0 20px;
17 |   text-align: center;
18 | 
19 |   &.is-disabled {
20 |     background: $disabled;
21 |     box-shadow: none;
22 |     cursor: initial;
23 |   }
24 | 
25 |   &-label {
26 |     color: $buttonText;
27 |     line-height: 50px;
28 |     margin: 0;
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/components/button/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | import './button.css'
 5 | 
 6 | const Button = ({
 7 |   children,
 8 |   onClick,
 9 |   disabled,
10 |   className,
11 |   labelClassName,
12 |   ...rest
13 | }) => (
14 |   <div
15 |     className={`Button ${disabled ? 'is-disabled' : ''} ${className}`}
16 |     onClick={onClick}
17 |     {...rest}
18 |   >
19 |     <h5 className={`Button-label ${labelClassName}`}>{children}</h5>
20 |   </div>
21 | )
22 | 
23 | Button.propTypes = {
24 |   // State
25 |   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
26 |     .isRequired,
27 | 
28 |   // Handlers
29 |   onClick: PropTypes.func.isRequired,
30 | 
31 |   // Modifiers
32 |   disabled: PropTypes.bool,
33 |   className: PropTypes.string,
34 |   labelClassName: PropTypes.string
35 | }
36 | 
37 | Button.defaultProps = {
38 |   // Modifiers
39 |   disabled: false,
40 |   className: '',
41 |   labelClassName: ''
42 | }
43 | 
44 | export default Button
45 | 


--------------------------------------------------------------------------------
/src/components/identicon/identicon.scss:
--------------------------------------------------------------------------------
1 | /* @define Identicon */
2 | .Identicon {
3 |   border-radius: 4px;
4 |   overflow: hidden;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/components/identicon/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import Blockies from 'react-blockies'
 4 | 
 5 | import './identicon.css'
 6 | 
 7 | const Identicon = ({ seed, size, scale, className, ...rest }) => {
 8 |   const length = `${size * scale}px`
 9 |   return (
10 |     <div
11 |       className={`Identicon ${className}`}
12 |       style={{ height: length, width: length }}
13 |     >
14 |       <a
15 |         href={`https://etherscan.io/address/${seed}`}
16 |         target="_blank"
17 |         rel="noopener noreferrer"
18 |       >
19 |         <Blockies {...rest} seed={seed} size={size} scale={scale} />
20 |       </a>
21 |     </div>
22 |   )
23 | }
24 | 
25 | Identicon.propTypes = {
26 |   // React Blockies
27 |   seed: PropTypes.number.isRequired,
28 |   size: PropTypes.number,
29 |   scale: PropTypes.number,
30 |   ...Blockies.propTypes,
31 | 
32 |   // Modifiers
33 |   className: PropTypes.string
34 | }
35 | 
36 | Identicon.defaultProps = {
37 |   // React Blockies
38 |   size: 15,
39 |   scale: 4,
40 | 
41 |   // Modifiers
42 |   className: ''
43 | }
44 | 
45 | export default Identicon
46 | 


--------------------------------------------------------------------------------
/src/components/page-not-found/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import './page-not-found.css'
 4 | 
 5 | export default () => (
 6 |   <div className="PageNotFound">
 7 |     <div className="PageNotFound-message">
 8 |       404. This is not the page you are looking for.
 9 |     </div>
10 |   </div>
11 | )
12 | 


--------------------------------------------------------------------------------
/src/components/page-not-found/page-not-found.scss:
--------------------------------------------------------------------------------
 1 | /* @define PageNotFound */
 2 | .PageNotFound {
 3 |   background: #273142;
 4 |   height: 100%;
 5 | 
 6 |   &-message {
 7 |     color: white;
 8 |     font-size: 40px;
 9 |     padding: 70px 50px;
10 |     text-align: center;
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/requires-meta-mask/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | import './require-meta-mask.css'
 5 | 
 6 | const RequiresMetaMask = ({ needsUnlock }) => (
 7 |   <div className="RequiresMetaMask">
 8 |     <div className="RequiresMetaMask-message">
 9 |       <span>
10 |         This is a decentralized application. In order to use this site please{' '}
11 |       </span>
12 |       {needsUnlock ? 'unlock ' : 'download '}
13 |       <a
14 |         className="RequiresMetaMask-message-link"
15 |         href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en"
16 |       >
17 |         MetaMask
18 |       </a>
19 |     </div>
20 |   </div>
21 | )
22 | 
23 | RequiresMetaMask.propTypes = {
24 |   // State
25 |   needsUnlock: PropTypes.bool
26 | }
27 | 
28 | RequiresMetaMask.defaultProps = {
29 |   // State
30 |   needsUnlock: false
31 | }
32 | 
33 | export default RequiresMetaMask
34 | 


--------------------------------------------------------------------------------
/src/components/requires-meta-mask/require-meta-mask.scss:
--------------------------------------------------------------------------------
 1 | /* @define RequiresMetaMask */
 2 | .RequiresMetaMask {
 3 |   background: #273142;
 4 |   height: 100%;
 5 | 
 6 |   &-message {
 7 |     color: white;
 8 |     font-size: 40px;
 9 |     padding: 70px 50px;
10 |     text-align: center;
11 | 
12 |     &-link {
13 |       color: #999;
14 |       text-decoration: none;
15 |     }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/components/storyshots.test.js:
--------------------------------------------------------------------------------
1 | import initStoryshots from '@storybook/addon-storyshots'
2 | 
3 | initStoryshots()
4 | 


--------------------------------------------------------------------------------
/src/components/text-input/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | import './text-input.css'
 5 | 
 6 | const TextInput = ({
 7 |   input: { value, onChange },
 8 |   meta: { touched, valid, error },
 9 |   placeholder,
10 |   type,
11 |   className
12 | }) => (
13 |   <div
14 |     className={`TextInput ${
15 |       error ? 'is-error' : valid ? 'is-valid' : ''
16 |     } ${className}`}
17 |   >
18 |     <input
19 |       type={type}
20 |       className="TextInput-input"
21 |       value={value}
22 |       onChange={onChange}
23 |     />
24 |     {placeholder && (
25 |       <div
26 |         className={`TextInput-placeholder${
27 |           touched || value ? ' is-touched' : ''
28 |         }`}
29 |       >
30 |         {placeholder}
31 |       </div>
32 |     )}
33 |     {error && <div className="TextInput-error">{error}</div>}
34 |   </div>
35 | )
36 | 
37 | TextInput.propTypes = {
38 |   // Redux Form
39 |   input: PropTypes.shape({
40 |     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
41 |     onChange: PropTypes.func.isRequired
42 |   }).isRequired,
43 |   meta: PropTypes.shape({
44 |     touched: PropTypes.bool,
45 |     valid: PropTypes.bool,
46 |     error: PropTypes.string
47 |   }),
48 | 
49 |   // State
50 |   placeholder: PropTypes.oneOfType([PropTypes.element, PropTypes.string])
51 |     .isRequired,
52 | 
53 |   // Modifiers
54 |   type: PropTypes.string,
55 |   className: PropTypes.string
56 | }
57 | 
58 | TextInput.defaultProps = {
59 |   // Redux Form
60 |   meta: {},
61 | 
62 |   // Modifiers
63 |   type: 'text',
64 |   className: ''
65 | }
66 | 
67 | export default TextInput
68 | 


--------------------------------------------------------------------------------
/src/components/text-input/text-input.scss:
--------------------------------------------------------------------------------
 1 | @import '../../styles/_colors.scss';
 2 | 
 3 | /* @define TextInput */
 4 | .TextInput {
 5 |   background: #fff;
 6 |   border: 1px solid #dfe3e9;
 7 |   border-radius: 4px;
 8 |   font-size: 14px;
 9 |   height: 45px;
10 |   margin: 0.5rem;
11 |   position: relative;
12 |   width: 200px;
13 | 
14 |   &.is-error {
15 |     border-color: $error;
16 |   }
17 | 
18 |   &.is-valid {
19 |     border-color: $success;
20 |   }
21 | 
22 |   &-input {
23 |     background: none;
24 |     border: none;
25 |     height: 100%;
26 |     outline: none;
27 |     padding: 0 5px;
28 |     width: 100%;
29 |   }
30 | 
31 |   &-placeholder {
32 |     color: $disabled;
33 |     left: 5px;
34 |     pointer-events: none;
35 |     position: absolute;
36 |     text-transform: uppercase;
37 |     top: 50%;
38 |     transform: translateY(-50%);
39 |     transition: 0.2s font-size, 0.2s transform, 0.2s top;
40 | 
41 |     .TextInput-input:focus + &,
42 |     &.is-touched {
43 |       font-size: 8px;
44 |       line-height: 8px;
45 |       top: 5px;
46 |       transform: none;
47 |     }
48 |   }
49 | 
50 |   &-error {
51 |     bottom: 0;
52 |     color: $error;
53 |     font-size: 8px;
54 |     left: 5px;
55 |     position: absolute;
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/constants/error.js:
--------------------------------------------------------------------------------
1 | export const ETH_NO_ACCOUNTS =
2 |   'web3 accounts not found. Do you have MetaMask installed and unlocked?'
3 | 


--------------------------------------------------------------------------------
/src/constants/testing.js:
--------------------------------------------------------------------------------
1 | export const TEST_ACCOUNT = '0x48c9cb08beb6f859a0544a01a9f2c4db8e5400f1'
2 | 


--------------------------------------------------------------------------------
/src/containers/balance/balance.scss:
--------------------------------------------------------------------------------
 1 | /* @define Balance */
 2 | .Balance {
 3 |   background: #273142;
 4 |   height: 100%;
 5 | 
 6 |   &-message {
 7 |     color: white;
 8 |     font-size: 40px;
 9 |     padding-top: 10%;
10 |     text-align: center;
11 | 
12 |     &-identicon {
13 |       display: inline-block;
14 |     }
15 | 
16 |     &-link {
17 |       color: #999;
18 |       text-decoration: none;
19 |     }
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/containers/balance/balance.test.js:
--------------------------------------------------------------------------------
 1 | import setupIntegrationTest, {
 2 |   flushPromises
 3 | } from '../../bootstrap/setup-integration-test'
 4 | 
 5 | import Balance from '.'
 6 | 
 7 | let integration = {
 8 |   store: null,
 9 |   history: null,
10 |   dispatchSpy: null,
11 |   mountApp: null
12 | }
13 | 
14 | beforeEach(() => {
15 |   integration = setupIntegrationTest({ router: { location: '/' } })
16 | })
17 | 
18 | it('Renders and loads balance correctly.', async () => {
19 |   const app = integration.mountApp()
20 |   await flushPromises(app)
21 |   expect(app.find(Balance).text()).toBe(
22 |     'Hello CryptoWorldWelcome [Identicon], You have 100 ETH.'
23 |   )
24 | })
25 | 


--------------------------------------------------------------------------------
/src/containers/balance/index.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { connect } from 'react-redux'
 4 | import { RenderIf } from 'lessdux'
 5 | 
 6 | import * as walletActions from '../../actions/wallet'
 7 | import * as walletSelectors from '../../reducers/wallet'
 8 | import Identicon from '../../components/identicon'
 9 | 
10 | import './balance.css'
11 | 
12 | class Balance extends PureComponent {
13 |   static propTypes = {
14 |     // Redux State
15 |     balance: walletSelectors.balanceShape.isRequired,
16 | 
17 |     // Action Dispatchers
18 |     fetchBalance: PropTypes.func.isRequired
19 |   }
20 | 
21 |   componentDidMount() {
22 |     const { fetchBalance } = this.props
23 |     fetchBalance()
24 |   }
25 | 
26 |   render() {
27 |     const { balance } = this.props
28 | 
29 |     return (
30 |       <div className="Balance">
31 |         <div className="Balance-message">
32 |           <b>Hello CryptoWorld</b>
33 |         </div>
34 |         <br />
35 |         <br />
36 |         <div className="Balance-message">
37 |           <RenderIf
38 |             resource={balance}
39 |             loading="Loading balance..."
40 |             done={
41 |               balance.data && (
42 |                 <span>
43 |                   Welcome{' '}
44 |                   <Identicon
45 |                     seed="Placeholder"
46 |                     className="Balance-message-identicon"
47 |                   />, You have {balance.data.toString()} ETH.
48 |                 </span>
49 |               )
50 |             }
51 |             failedLoading={
52 |               <span>
53 |                 There was an error fetching your balance. Make sure{' '}
54 |                 <a
55 |                   className="Balance-message-link"
56 |                   href="https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en"
57 |                 >
58 |                   MetaMask
59 |                 </a>{' '}
60 |                 is unlocked and refresh the page.
61 |               </span>
62 |             }
63 |           />
64 |         </div>
65 |       </div>
66 |     )
67 |   }
68 | }
69 | 
70 | export default connect(
71 |   state => ({
72 |     balance: state.wallet.balance
73 |   }),
74 |   {
75 |     fetchBalance: walletActions.fetchBalance
76 |   }
77 | )(Balance)
78 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | 
 4 | import configureStore from './bootstrap/configure-store'
 5 | import App from './bootstrap/app'
 6 | import registerServiceWorker from './bootstrap/register-service-worker'
 7 | 
 8 | const { store, history } = configureStore()
 9 | export default store
10 | 
11 | // Random number is used so hot reloading works with `react-loadable`
12 | const render = Component => {
13 |   ReactDOM.render(
14 |     <Component
15 |       key={process.env.NODE_ENV === 'development' ? Math.random() : undefined}
16 |       store={store}
17 |       history={history}
18 |     />,
19 |     document.getElementById('root')
20 |   )
21 | }
22 | 
23 | render(App)
24 | 
25 | if (module.hot) {
26 |   module.hot.accept('./bootstrap/app', () => {
27 |     render(App)
28 |   })
29 | }
30 | 
31 | registerServiceWorker()
32 | 


--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
 1 | import { combineReducers } from 'redux'
 2 | import { routerReducer as router } from 'react-router-redux'
 3 | import { reducer as form } from 'redux-form'
 4 | 
 5 | import wallet from './wallet'
 6 | 
 7 | // Export root reducer
 8 | export default combineReducers({
 9 |   router,
10 |   form,
11 |   wallet
12 | })
13 | 


--------------------------------------------------------------------------------
/src/reducers/wallet.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types'
 2 | import createReducer, { createResource } from 'lessdux'
 3 | 
 4 | // Shapes
 5 | const {
 6 |   shape: accountsShape,
 7 |   initialState: accountsInitialState
 8 | } = createResource(PropTypes.arrayOf(PropTypes.string.isRequired))
 9 | const {
10 |   shape: balanceShape,
11 |   initialState: balanceInitialState
12 | } = createResource(PropTypes.string)
13 | export { accountsShape, balanceShape }
14 | 
15 | // Reducer
16 | export default createReducer({
17 |   accounts: accountsInitialState,
18 |   balance: balanceInitialState
19 | })
20 | 
21 | // Selectors
22 | export const getAccount = state =>
23 |   state.wallet.accounts.data && state.wallet.accounts.data[0]
24 | 


--------------------------------------------------------------------------------
/src/sagas/index.js:
--------------------------------------------------------------------------------
 1 | import { delay } from 'redux-saga'
 2 | 
 3 | import { spawn, call, all } from 'redux-saga/effects'
 4 | 
 5 | import walletSaga from './wallet'
 6 | 
 7 | /**
 8 |  * Makes a saga restart after an uncaught error.
 9 |  * @param {object} saga - A generator function.
10 |  * @returns {object} - A new generator function with the added functionality.
11 |  */
12 | export function makeRestartable(saga) {
13 |   return function*() {
14 |     // eslint-disable-next-line no-constant-condition
15 |     while (true) {
16 |       try {
17 |         yield call(saga)
18 |         throw new Error(
19 |           `Unexpected root saga termination. The root sagas are supposed to be sagas that live during the whole app lifetime! ${saga}`
20 |         )
21 |       } catch (err) {
22 |         /* istanbul ignore if  */
23 |         if (process.env.NODE_ENV !== 'test')
24 |           console.info(
25 |             'Saga error, the saga will be restarted after 3 seconds.',
26 |             err
27 |           )
28 |         yield call(delay, 3000)
29 |       }
30 |     }
31 |   }
32 | }
33 | 
34 | const rootSagas = [walletSaga].map(makeRestartable)
35 | 
36 | /**
37 |  * The root saga.
38 |  */
39 | export default function* rootSaga() {
40 |   yield all(rootSagas.map(saga => spawn(saga)))
41 | }
42 | 


--------------------------------------------------------------------------------
/src/sagas/index.test.js:
--------------------------------------------------------------------------------
 1 | import { delay } from 'redux-saga'
 2 | 
 3 | import { call } from 'redux-saga/effects'
 4 | 
 5 | import { makeRestartable } from '.'
 6 | 
 7 | it('Restarts terminated sagas.', async () => {
 8 |   const saga = function*() {}
 9 |   const gen = makeRestartable(saga)()
10 |   expect(gen.next().value).toEqual(call(saga))
11 |   expect(gen.next().value).toEqual(call(delay, 3000))
12 |   expect(gen.next().value).toEqual(call(saga))
13 | })
14 | 


--------------------------------------------------------------------------------
/src/sagas/wallet.js:
--------------------------------------------------------------------------------
 1 | import { takeLatest, select, call } from 'redux-saga/effects'
 2 | 
 3 | import * as walletSelectors from '../reducers/wallet'
 4 | import * as walletActions from '../actions/wallet'
 5 | import { web3 } from '../bootstrap/dapp-api'
 6 | import { lessduxSaga } from '../utils/saga'
 7 | import * as errorConstants from '../constants/error'
 8 | 
 9 | /**
10 |  * Fetches the current wallet's accounts.
11 |  * @returns {object[]} - The accounts.
12 |  */
13 | export function* fetchAccounts() {
14 |   const accounts = yield call(web3.eth.getAccounts)
15 |   if (!accounts[0]) throw new Error(errorConstants.ETH_NO_ACCOUNTS)
16 | 
17 |   return accounts
18 | }
19 | 
20 | /**
21 |  * Fetches the current wallet's ethereum balance.
22 |  * @returns {number} - The balance.
23 |  */
24 | export function* fetchBalance() {
25 |   const balance = yield call(
26 |     web3.eth.getBalance,
27 |     yield select(walletSelectors.getAccount)
28 |   )
29 | 
30 |   return web3.utils.fromWei(balance, 'ether')
31 | }
32 | 
33 | /**
34 |  * The root of the wallet saga.
35 |  */
36 | export default function* walletSaga() {
37 |   // Accounts
38 |   yield takeLatest(
39 |     walletActions.accounts.FETCH,
40 |     lessduxSaga,
41 |     'fetch',
42 |     walletActions.accounts,
43 |     fetchAccounts
44 |   )
45 | 
46 |   // Balance
47 |   yield takeLatest(
48 |     walletActions.balance.FETCH,
49 |     lessduxSaga,
50 |     'fetch',
51 |     walletActions.balance,
52 |     fetchBalance
53 |   )
54 | }
55 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
 1 | // eslint-disable-next-line unicorn/filename-case
 2 | import React from 'react'
 3 | import { configure } from 'enzyme'
 4 | import Adapter from 'enzyme-adapter-react-16'
 5 | import timezoneMock from 'timezone-mock'
 6 | import 'jest-enzyme'
 7 | 
 8 | // Configure
 9 | configure({ adapter: new Adapter() })
10 | 
11 | // Mock Modules
12 | jest.mock('./components/identicon', () => () => <div>[Identicon]</div>)
13 | 
14 | // Mock Time
15 | timezoneMock.register('UTC')
16 | Date.now = jest.fn(() => 1516916214006)
17 | 


--------------------------------------------------------------------------------
/src/styles/_colors.scss:
--------------------------------------------------------------------------------
 1 | // Bases
 2 | $light: #fff;
 3 | $light2: #e6eaee;
 4 | $light3: rgba(216, 216, 216, 0.38);
 5 | $dark: #3d464d;
 6 | $dark2: #47525d;
 7 | $dark3: #a3a2a5;
 8 | 
 9 | // States
10 | $disabled: #77909d;
11 | $info: #337ab7;
12 | $warning: #f0ad4e;
13 | $success: #8dc572;
14 | $error: #be6464;
15 | 
16 | // Typography
17 | $heading: $dark;
18 | $text: $dark2;
19 | 
20 | // Backgrounds
21 | $background: #ededed;
22 | $darkBackground: $dark;
23 | 
24 | /* Specifics */
25 | 
26 | // Button
27 | $buttonGradientStart: #0059ab;
28 | $buttonGradientEnd: #0468c4;
29 | $buttonBoxShadow: #024e95;
30 | $buttonText: $light;
31 | 


--------------------------------------------------------------------------------
/src/styles/_form.scss:
--------------------------------------------------------------------------------
 1 | /* @define Form */
 2 | .Form {
 3 |   &-noMargins {
 4 |     margin: 0;
 5 |   }
 6 | 
 7 |   &-noSideMargins {
 8 |     margin-left: 0;
 9 |     margin-right: 0;
10 |   }
11 | }
12 | 
13 | /* @define WizardForm */
14 | .WizardForm {
15 |   &-form {
16 |     &-noMarginsWizard {
17 |       margin: 0;
18 |     }
19 | 
20 |     &-noSideMarginsWizard {
21 |       margin-left: 0;
22 |       margin-right: 0;
23 |     }
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/src/utils/action.js:
--------------------------------------------------------------------------------
1 | export const action = (type, payload, meta) => ({
2 |   type,
3 |   payload,
4 |   meta
5 | })
6 | export const errorAction = (type, err) =>
7 |   console.error(err) || { type, payload: err, error: true }
8 | 


--------------------------------------------------------------------------------
/src/utils/form-generator.js:
--------------------------------------------------------------------------------
1 | import createReduxForm from 'create-redux-form'
2 | 
3 | import TextInput from '../components/text-input'
4 | 
5 | export const { form, wizardForm } = createReduxForm({ text: TextInput })
6 | 


--------------------------------------------------------------------------------
/src/utils/form-generator.test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { submit as reduxFormSubmit } from 'redux-form'
  3 | 
  4 | import setupIntegrationTest, {
  5 |   flushPromises
  6 | } from '../bootstrap/setup-integration-test'
  7 | 
  8 | import { form, wizardForm } from './form-generator'
  9 | import { required, number } from './validation'
 10 | 
 11 | jest.mock('..', () => ({}))
 12 | 
 13 | let integration = {
 14 |   store: null,
 15 |   history: null,
 16 |   dispatchSpy: null,
 17 |   mountApp: null
 18 | }
 19 | 
 20 | beforeEach(() => {
 21 |   integration = setupIntegrationTest({ router: { location: '/' } })
 22 | })
 23 | 
 24 | const schema = {
 25 |   payment: {
 26 |     type: 'text',
 27 |     placeholder: 'Payment (ETH)',
 28 |     validate: [required, number],
 29 |     props: {
 30 |       type: 'number'
 31 |     }
 32 |   },
 33 |   timeout: {
 34 |     type: 'text',
 35 |     visibleIf: 'payment',
 36 |     validate: [required, number],
 37 |     props: {
 38 |       type: 'number'
 39 |     }
 40 |   },
 41 |   partyB: {
 42 |     type: 'text',
 43 |     formValues: 'arbitratorExtraData',
 44 |     visibleIf: 'email'
 45 |   },
 46 |   arbitratorExtraData: {
 47 |     type: 'text',
 48 |     visibleIf: '!payment'
 49 |   },
 50 |   email: {
 51 |     type: 'text'
 52 |   },
 53 |   description: {
 54 |     type: 'text'
 55 |   }
 56 | }
 57 | 
 58 | const schema2 = {
 59 |   payment2: {
 60 |     type: 'text',
 61 |     placeholder: 'Payment (ETH)',
 62 |     props: {
 63 |       type: 'number'
 64 |     }
 65 |   },
 66 |   timeout2: {
 67 |     type: 'text',
 68 |     visibleIf: 'payment',
 69 |     props: {
 70 |       type: 'number'
 71 |     }
 72 |   },
 73 |   partyB2: {
 74 |     type: 'text',
 75 |     formValues: 'arbitratorExtraData',
 76 |     visibleIf: 'email'
 77 |   },
 78 |   arbitratorExtraData2: {
 79 |     type: 'text',
 80 |     visibleIf: '!payment'
 81 |   },
 82 |   email2: {
 83 |     type: 'text'
 84 |   },
 85 |   description2: {
 86 |     type: 'text'
 87 |   }
 88 | }
 89 | 
 90 | const schema3 = {
 91 |   payment3: {
 92 |     type: 'text',
 93 |     placeholder: 'Payment (ETH)',
 94 |     props: {
 95 |       type: 'number'
 96 |     }
 97 |   },
 98 |   timeout3: {
 99 |     type: 'text',
100 |     visibleIf: 'payment',
101 |     props: {
102 |       type: 'number'
103 |     }
104 |   },
105 |   partyB3: {
106 |     type: 'text',
107 |     formValues: 'arbitratorExtraData',
108 |     visibleIf: 'email'
109 |   },
110 |   arbitratorExtraData3: {
111 |     type: 'text',
112 |     visibleIf: '!payment'
113 |   },
114 |   email3: {
115 |     type: 'text'
116 |   },
117 |   description3: {
118 |     type: 'text'
119 |   }
120 | }
121 | 
122 | describe('form', () =>
123 |   it('Takes a schema and returns a form component with utils.', async () => {
124 |     const formName = 'testForm'
125 |     const { Form, isInvalid, submit } = form(formName, schema)
126 |     expect(isInvalid({})).toBe(false)
127 |     expect(submit()).toEqual(reduxFormSubmit(formName))
128 | 
129 |     // Mount form
130 |     const app = integration.mountApp(
131 |       <Form initialValues={{ payment: 'invalid', timeout: 1000 }} />
132 |     )
133 |     await flushPromises(app)
134 |   }))
135 | 
136 | describe('wizardForm', () =>
137 |   it('Takes a nested schema and returns a wizard form component with utils.', async () => {
138 |     const formName = 'testWizardForm'
139 |     const { Form, isInvalid, submit } = wizardForm(formName, {
140 |       step1: schema,
141 |       step2: schema2,
142 |       step3: schema3
143 |     })
144 |     expect(isInvalid({})).toBe(false)
145 |     expect(submit()).toEqual(reduxFormSubmit(formName))
146 | 
147 |     // Handlers
148 |     let backHandlerRef
149 |     const getBackHandlerRef = func => (backHandlerRef = func)
150 |     const onPageChange = jest.fn()
151 |     const handleSubmit = jest.fn()
152 | 
153 |     // Mount wizard form
154 |     const app = integration.mountApp(
155 |       <Form
156 |         initialValues={{ payment: 10, timeout: 1000 }}
157 |         backHandlerRef={getBackHandlerRef} // eslint-disable-line react/jsx-no-bind
158 |         onPageChange={onPageChange}
159 |         onSubmit={handleSubmit}
160 |       />
161 |     )
162 |     await flushPromises(app)
163 |     expect(onPageChange).toHaveBeenCalledTimes(1)
164 | 
165 |     // Go to the next page
166 |     integration.store.dispatch(submit())
167 |     expect(onPageChange).toHaveBeenCalledTimes(2)
168 | 
169 |     // Go back to the previous page
170 |     backHandlerRef()
171 |     expect(onPageChange).toHaveBeenCalledTimes(3)
172 | 
173 |     // Go to the next page
174 |     integration.store.dispatch(submit())
175 |     expect(onPageChange).toHaveBeenCalledTimes(4)
176 | 
177 |     // Go to the next page
178 |     integration.store.dispatch(submit())
179 |     expect(onPageChange).toHaveBeenCalledTimes(5)
180 | 
181 |     // Submit the form
182 |     integration.store.dispatch(submit())
183 |     expect(onPageChange).toHaveBeenCalledTimes(5)
184 |     expect(handleSubmit).toHaveBeenCalledTimes(1)
185 | 
186 |     // destroy() form
187 |     app.unmount()
188 |   }))
189 | 


--------------------------------------------------------------------------------
/src/utils/functional.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Maps object into an array or a new object and optionally transforms keys.
 3 |  * @param {object} obj - The obj to map over.
 4 |  * @param {function} func - The function to call with (value, key).
 5 |  * @param {{ returnObj: boolean, transformKeyFunc: function }} [options={ returnObj: false }] - Options object.
 6 |  * @returns {any[]|object} - An array or object, (with optionally transformed keys), with the results of calling func on every property of obj.
 7 |  */
 8 | export function objMap(
 9 |   obj,
10 |   func,
11 |   { returnObj = false, transformKeyFunc } = {}
12 | ) {
13 |   const keys = Object.keys(obj)
14 |   const keysLen = keys.length
15 |   const result = returnObj ? {} : []
16 | 
17 |   for (let i = 0; i < keysLen; i++) {
18 |     const res = func(obj[keys[i]], keys[i])
19 |     if (returnObj)
20 |       result[
21 |         transformKeyFunc ? transformKeyFunc(obj[keys[i]], keys[i]) : keys[i]
22 |       ] = res
23 |     else result.push(res)
24 |   }
25 | 
26 |   return result
27 | }
28 | 


--------------------------------------------------------------------------------
/src/utils/functional.test.js:
--------------------------------------------------------------------------------
 1 | import { objMap } from './functional'
 2 | 
 3 | describe('objMap', () => {
 4 |   const obj = { a: 1, b: 2, c: 3 }
 5 |   const add1 = value => value + 1
 6 | 
 7 |   const add1Arr = [2, 3, 4]
 8 |   const add1Obj = { a: 2, b: 3, c: 4 }
 9 |   const transformKeyadd1Obj = { a1: 2, b2: 3, c3: 4 }
10 | 
11 |   it('maps objects into arrays.', () =>
12 |     expect(objMap(obj, add1)).toEqual(add1Arr))
13 | 
14 |   it('maps objects into objects.', () =>
15 |     expect(objMap(obj, add1, { returnObj: true })).toEqual(add1Obj))
16 | 
17 |   it('maps objects into objects and transforms their keys.', () =>
18 |     expect(
19 |       objMap(obj, add1, {
20 |         returnObj: true,
21 |         transformKeyFunc: (value, key) => key + value
22 |       })
23 |     ).toEqual(transformKeyadd1Obj))
24 | })
25 | 


--------------------------------------------------------------------------------
/src/utils/saga.js:
--------------------------------------------------------------------------------
 1 | import { call, put } from 'redux-saga/effects'
 2 | 
 3 | import { action as _action, errorAction } from './action'
 4 | 
 5 | /**
 6 |  * Calls a saga with the `lessdux` flow.
 7 |  * @param {string} flow - The `lessdux` flow that should be used, (create, fetch, update, delete).
 8 |  * @param {object} resourceActions - The `lessdux` resource actions object.
 9 |  * @param {object} saga - The saga being called.
10 |  * @param {{ type: string, payload: ?object, meta: ?object }} action - The action object that triggered the saga.
11 |  */
12 | export function* lessduxSaga(flow, resourceActions, saga, action) {
13 |   let receiveWord
14 |   let failWord
15 |   switch (flow) {
16 |     case 'create':
17 |       receiveWord = '_CREATED'
18 |       failWord = '_CREATE'
19 |       break
20 |     case 'fetch':
21 |       receiveWord = ''
22 |       failWord = '_FETCH'
23 |       break
24 |     case 'update':
25 |       receiveWord = '_UPDATED'
26 |       failWord = '_UPDATE'
27 |       yield put(_action(resourceActions.UPDATE)) // Updates are not called directly so call it here to set .updating on the resource
28 |       break
29 |     case 'delete':
30 |       receiveWord = '_DELETED'
31 |       failWord = '_DELETE'
32 |       break
33 |     default:
34 |       throw new TypeError('Invalid lessdux flow.')
35 |   }
36 | 
37 |   try {
38 |     const result = yield call(saga, action)
39 | 
40 |     yield put(
41 |       _action(resourceActions['RECEIVE' + receiveWord], {
42 |         [result.collection ? 'collectionMod' : resourceActions.self]: result
43 |       })
44 |     )
45 |   } catch (err) {
46 |     err.message &&
47 |       console.info(
48 |         'Your connection is unstable, please check your network and refresh the page.'
49 |       )
50 |     yield put(errorAction(resourceActions['FAIL' + failWord], err))
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/utils/string.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Converts a string in constant case to camel case. e.g. HELLO_WORLD => helloWorld. It also ignores characters between $ chars. e.g. $HELLO$_WORLD => HELLOWorld.
 3 |  * @param {string} str - The string to convert.
 4 |  * @param {{ capitalizeFirst: boolean }} [options={ capitalizeFirst: false }] - An options object with sensible defaults.
 5 |  * @returns {string} - The converted string.
 6 |  */
 7 | export function constantToCamelCase(str, { capitalizeFirst = false } = {}) {
 8 |   const newStr = str
 9 |     .toLowerCase()
10 |     .replace(/_./g, match => match[1].toUpperCase())
11 | 
12 |   return (capitalizeFirst
13 |     ? newStr[0].toUpperCase() + newStr.slice(1)
14 |     : newStr
15 |   ).replace(/\$(.+?)\$/g, (_m, p1) => p1.toUpperCase())
16 | }
17 | 
18 | /**
19 |  * Converts a string in camel case to title case. e.g. helloWorld => Hello World.
20 |  * @param {string} str - The string to convert.
21 |  * @returns {string} - The converted string.
22 |  */
23 | export function camelToTitleCase(str) {
24 |   return str.replace(
25 |     /(^[a-z])|([a-z][A-Z])|([A-Z][a-z])/g,
26 |     (_m, p1, p2, p3) =>
27 |       p1 ? p1.toUpperCase() : p2 ? p2[0] + ' ' + p2[1] : ' ' + p3
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/src/utils/string.test.js:
--------------------------------------------------------------------------------
 1 | import { constantToCamelCase, camelToTitleCase } from './string'
 2 | 
 3 | const constant = 'HELLO_CRYPTO_WORLD'
 4 | const camelCase = 'helloCryptoWorld'
 5 | const capitalizeFirstCamelCase = 'HelloCryptoWorld'
 6 | const constantWith$ = '$HELLO$_WORLD'
 7 | const camelCaseWith$ = 'HELLOWorld'
 8 | const titleCase = 'Hello Crypto World'
 9 | 
10 | describe('constantToCamelCase', () => {
11 |   it('converts constant case strings to camel case.', () =>
12 |     expect(constantToCamelCase(constant)).toBe(camelCase))
13 |   it('converts constant case strings to camel case and capitalizes the first letter.', () =>
14 |     expect(constantToCamelCase(constant, { capitalizeFirst: true })).toBe(
15 |       capitalizeFirstCamelCase
16 |     ))
17 |   it('converts constant case strings to camel case and ignores chars between `$` chars.', () =>
18 |     expect(constantToCamelCase(constantWith$)).toBe(camelCaseWith$))
19 | })
20 | 
21 | describe('camelToTitleCase', () =>
22 |   it('converts camel case strings to title case.', () =>
23 |     expect(camelToTitleCase(camelCase)).toBe(titleCase)))
24 | 


--------------------------------------------------------------------------------
/src/utils/validation.js:
--------------------------------------------------------------------------------
1 | export const required = name => v => (v ? undefined : `${name} is required.`)
2 | export const number = name => v =>
3 |   Number.isNaN(Number(v)) ? `${name} must be a number.` : undefined
4 | 


--------------------------------------------------------------------------------
/stories/button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { storiesOf } from '@storybook/react'
 3 | import { action } from '@storybook/addon-actions'
 4 | 
 5 | import Button from '../src/components/button'
 6 | 
 7 | storiesOf('Button', module)
 8 |   .add('primary', () => <Button onClick={action('onClick')}>CLICK ME</Button>)
 9 |   .add('disabled', () => (
10 |     <Button onClick={action('onClick')} disabled>
11 |       CLICK ME
12 |     </Button>
13 |   ))
14 |   .add('with lots of text', () => (
15 |     <Button onClick={action('onClick')}>CLICK ME, CLICK ME, CLICK ME</Button>
16 |   ))
17 | 


--------------------------------------------------------------------------------
/stories/identicon.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { storiesOf } from '@storybook/react'
3 | 
4 | import Identicon from '../src/components/identicon'
5 | 
6 | storiesOf('Identicon', module).add('with placeholder seed', () => (
7 |   <Identicon seed="Placeholder" />
8 | ))
9 | 


--------------------------------------------------------------------------------
/stories/index.js:
--------------------------------------------------------------------------------
1 | import './button'
2 | import './identicon'
3 | import './page-not-found'
4 | import './requires-meta-mask'
5 | import './text-input'
6 | 


--------------------------------------------------------------------------------
/stories/page-not-found.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { storiesOf } from '@storybook/react'
3 | 
4 | import PageNotFound from '../src/components/page-not-found'
5 | 
6 | storiesOf('Page Not Found', module).add('default', () => <PageNotFound />)
7 | 


--------------------------------------------------------------------------------
/stories/requires-meta-mask.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { storiesOf } from '@storybook/react'
3 | 
4 | import RequiresMetaMask from '../src/components/requires-meta-mask'
5 | 
6 | storiesOf('Requires MetaMask', module)
7 |   .add('not found', () => <RequiresMetaMask />)
8 |   .add('needs unlock', () => <RequiresMetaMask needsUnlock />)
9 | 


--------------------------------------------------------------------------------
/stories/text-input.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { storiesOf } from '@storybook/react'
 3 | import { withState } from '@dump247/storybook-state'
 4 | 
 5 | import TextInput from '../src/components/text-input'
 6 | 
 7 | const render = store => (
 8 |   <TextInput
 9 |     {...store.state}
10 |     input={{
11 |       ...store.state.input,
12 |       onChange: event =>
13 |         store.set({
14 |           input: { value: event.currentTarget.value, onChange: null }
15 |         })
16 |     }}
17 |   />
18 | )
19 | 
20 | storiesOf('Text Input', module)
21 |   .add(
22 |     'default',
23 |     withState(
24 |       {
25 |         input: { value: '', onChange: null },
26 |         meta: { valid: undefined, touched: undefined, error: undefined },
27 |         placeholder: 'EMAIL'
28 |       },
29 |       render
30 |     )
31 |   )
32 |   .add(
33 |     'touched',
34 |     withState(
35 |       {
36 |         input: { value: '', onChange: null },
37 |         meta: { valid: undefined, touched: true, error: undefined },
38 |         placeholder: 'EMAIL'
39 |       },
40 |       render
41 |     )
42 |   )
43 |   .add(
44 |     'valid',
45 |     withState(
46 |       {
47 |         input: { value: '', onChange: null },
48 |         meta: { valid: true, touched: undefined, error: undefined },
49 |         placeholder: 'EMAIL'
50 |       },
51 |       render
52 |     )
53 |   )
54 |   .add(
55 |     'error',
56 |     withState(
57 |       {
58 |         input: { value: '', onChange: null },
59 |         meta: {
60 |           valid: undefined,
61 |           touched: undefined,
62 |           error: 'Please enter a valid email.'
63 |         },
64 |         placeholder: 'EMAIL'
65 |       },
66 |       render
67 |     )
68 |   )
69 | 


--------------------------------------------------------------------------------