├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── box-img-lg.png ├── box-img-sm.png ├── config ├── env.js ├── jest │ ├── cssTransform.js │ └── fileTransform.js ├── paths.js ├── polyfills.js ├── webpack.config.dev.js └── webpack.config.prod.js ├── contracts ├── Migrations.sol └── SimpleStorage.sol ├── migrations ├── 1_initial_migration.js └── 2_deploy_contracts.js ├── package.json ├── public ├── favicon.ico └── index.html ├── scripts ├── build.js ├── start.js └── test.js ├── src ├── App.css ├── App.js ├── App.test.js ├── css │ ├── open-sans.css │ ├── oswald.css │ └── pure-min.css ├── fonts │ ├── Open-Sans-regular │ │ ├── LICENSE.txt │ │ ├── Open-Sans-regular.eot │ │ ├── Open-Sans-regular.svg │ │ ├── Open-Sans-regular.ttf │ │ ├── Open-Sans-regular.woff │ │ └── Open-Sans-regular.woff2 │ ├── Oswald-300 │ │ ├── LICENSE.txt │ │ ├── Oswald-300.eot │ │ ├── Oswald-300.svg │ │ ├── Oswald-300.ttf │ │ ├── Oswald-300.woff │ │ └── Oswald-300.woff2 │ └── Oswald-regular │ │ ├── LICENSE.txt │ │ ├── Oswald-regular.eot │ │ ├── Oswald-regular.svg │ │ ├── Oswald-regular.ttf │ │ ├── Oswald-regular.woff │ │ └── Oswald-regular.woff2 ├── img │ └── uport-logo.svg ├── index.css ├── index.js ├── layouts │ ├── dashboard │ │ └── Dashboard.js │ └── home │ │ └── Home.js ├── reducer.js ├── store.js ├── user │ ├── layouts │ │ └── profile │ │ │ └── Profile.js │ ├── ui │ │ ├── loginbutton │ │ │ ├── LoginButton.js │ │ │ ├── LoginButtonActions.js │ │ │ └── LoginButtonContainer.js │ │ └── logoutbutton │ │ │ ├── LogoutButton.js │ │ │ ├── LogoutButtonActions.js │ │ │ └── LogoutButtonContainer.js │ └── userReducer.js └── util │ ├── connectors.js │ └── wrappers.js ├── test ├── TestSimpleStorage.sol └── simplestorage.js ├── truffle-box.json ├── truffle-config.js └── truffle.js /.gitattributes: -------------------------------------------------------------------------------- 1 | *.sol linguist-language=Solidity 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | coverage 8 | 9 | # production 10 | build 11 | build_webpack 12 | 13 | # misc 14 | .DS_Store 15 | .env 16 | npm-debug.log 17 | .truffle-solidity-loader 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Truffle 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ⚠️ **No new changes will be made to this box! There's good news though: [🤘 the uPort team maintains an official uPort Connect Truffle Box!](https://github.com/uport-project/react-uport-box). We recommend using that instead.** 2 | 3 | # React, Redux and UPort Authentication Truffle Box 4 | 5 | In addition to Webpack and React, this box adds: react-router, redux and redux-auth-wrapper for authentication powered by UPort. The easiest way to get started with UPort. 6 | 7 | ## Installation 8 | 9 | 1. Install Truffle globally. 10 | ```javascript 11 | npm install -g truffle 12 | ``` 13 | 14 | 2. Download the box. This also takes care of installing the necessary dependencies. 15 | ```javascript 16 | truffle unbox react-uport 17 | ``` 18 | 19 | 3. Run the development console. 20 | ```javascript 21 | truffle develop 22 | ``` 23 | 24 | 4. Compile and migrate the smart contracts. Note inside the development console we don't preface commands with `truffle`. 25 | ```javascript 26 | compile 27 | migrate 28 | ``` 29 | 30 | 5. Run the webpack server for front-end hot reloading (outside the development console). Smart contract changes must be manually recompiled and migrated. 31 | ```javascript 32 | // Serves the front-end on http://localhost:3000 33 | npm run start 34 | ``` 35 | 36 | 6. Truffle can run tests written in Solidity or JavaScript against your smart contracts. Note the command varies slightly if you're in or outside of the development console. 37 | ```javascript 38 | // If inside the development console. 39 | test 40 | 41 | // If outside the development console.. 42 | truffle test 43 | ``` 44 | 45 | 7. Jest is included for testing React components. Compile your contracts before running Jest, or you may receive some file not found errors. 46 | ```javascript 47 | // Run Jest outside of the development console for front-end component tests. 48 | npm run test 49 | ``` 50 | 51 | 8. To build the application for production, use the build command. A production build will be in the build_webpack folder. 52 | ```javascript 53 | npm run build 54 | ``` 55 | 56 | ## FAQ 57 | 58 | * __How do I use this with the EthereumJS TestRPC?__ 59 | 60 | It's as easy as modifying the config file! [Check out our documentation on adding network configurations](http://truffleframework.com/docs/advanced/configuration#networks). 61 | 62 | * __Why is there both a truffle.js file and a truffle-config.js file?__ 63 | 64 | `truffle-config.js` is a copy of `truffle.js` for compatibility with Windows development environments. Feel free to it if it's irrelevant to your platform. 65 | 66 | * __Where is my production build?__ 67 | 68 | The production build will be in the build_webpack folder. This is because Truffle outputs contract compilations to the build folder. 69 | 70 | * __Where can I find more documentation?__ 71 | 72 | This box is a marriage of [Truffle](http://truffleframework.com/) and a React setup created with [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md). Either one would be a great place to start! 73 | -------------------------------------------------------------------------------- /box-img-lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/truffle-box/react-uport-box/f4f1a4c47988bd087cbfc79456fcc57e61a276ad/box-img-lg.png -------------------------------------------------------------------------------- /box-img-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/truffle-box/react-uport-box/f4f1a4c47988bd087cbfc79456fcc57e61a276ad/box-img-sm.png -------------------------------------------------------------------------------- /config/env.js: -------------------------------------------------------------------------------- 1 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be 2 | // injected into the application via DefinePlugin in Webpack configuration. 3 | 4 | var REACT_APP = /^REACT_APP_/i; 5 | 6 | function getClientEnvironment(publicUrl) { 7 | var processEnv = Object 8 | .keys(process.env) 9 | .filter(key => REACT_APP.test(key)) 10 | .reduce((env, key) => { 11 | env[key] = JSON.stringify(process.env[key]); 12 | return env; 13 | }, { 14 | // Useful for determining whether we’re running in production mode. 15 | // Most importantly, it switches React into the correct mode. 16 | 'NODE_ENV': JSON.stringify( 17 | process.env.NODE_ENV || 'development' 18 | ), 19 | // Useful for resolving the correct path to static assets in `public`. 20 | // For example, . 21 | // This should only be used as an escape hatch. Normally you would put 22 | // images into the `src` and `import` them in code to get their paths. 23 | 'PUBLIC_URL': JSON.stringify(publicUrl) 24 | }); 25 | return {'process.env': processEnv}; 26 | } 27 | 28 | module.exports = getClientEnvironment; 29 | -------------------------------------------------------------------------------- /config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | // This is a custom Jest transformer turning style imports into empty objects. 2 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 3 | 4 | module.exports = { 5 | process() { 6 | return 'module.exports = {};'; 7 | }, 8 | getCacheKey(fileData, filename) { 9 | // The output is always the same. 10 | return 'cssTransform'; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | // This is a custom Jest transformer turning file imports into filenames. 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 5 | 6 | module.exports = { 7 | process(src, filename) { 8 | return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'; 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /config/paths.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var fs = require('fs'); 3 | 4 | // Make sure any symlinks in the project folder are resolved: 5 | // https://github.com/facebookincubator/create-react-app/issues/637 6 | var appDirectory = fs.realpathSync(process.cwd()); 7 | function resolveApp(relativePath) { 8 | return path.resolve(appDirectory, relativePath); 9 | } 10 | 11 | // We support resolving modules according to `NODE_PATH`. 12 | // This lets you use absolute paths in imports inside large monorepos: 13 | // https://github.com/facebookincubator/create-react-app/issues/253. 14 | 15 | // It works similar to `NODE_PATH` in Node itself: 16 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders 17 | 18 | // We will export `nodePaths` as an array of absolute paths. 19 | // It will then be used by Webpack configs. 20 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box. 21 | 22 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. 23 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. 24 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 25 | 26 | var nodePaths = (process.env.NODE_PATH || '') 27 | .split(process.platform === 'win32' ? ';' : ':') 28 | .filter(Boolean) 29 | .filter(folder => !path.isAbsolute(folder)) 30 | .map(resolveApp); 31 | 32 | // config after eject: we're in ./config/ 33 | module.exports = { 34 | // Changed from build to build_webpack so smart contract compilations are not overwritten. 35 | appBuild: resolveApp('build_webpack'), 36 | appPublic: resolveApp('public'), 37 | appHtml: resolveApp('public/index.html'), 38 | appIndexJs: resolveApp('src/index.js'), 39 | appPackageJson: resolveApp('package.json'), 40 | appSrc: resolveApp('src'), 41 | yarnLockFile: resolveApp('yarn.lock'), 42 | testsSetup: resolveApp('src/setupTests.js'), 43 | appNodeModules: resolveApp('node_modules'), 44 | ownNodeModules: resolveApp('node_modules'), 45 | nodePaths: nodePaths 46 | }; 47 | -------------------------------------------------------------------------------- /config/polyfills.js: -------------------------------------------------------------------------------- 1 | if (typeof Promise === 'undefined') { 2 | // Rejection tracking prevents a common issue where React gets into an 3 | // inconsistent state due to an error, but it gets swallowed by a Promise, 4 | // and the user has no idea what causes React's erratic future behavior. 5 | require('promise/lib/rejection-tracking').enable(); 6 | window.Promise = require('promise/lib/es6-extensions.js'); 7 | } 8 | 9 | // fetch() polyfill for making API calls. 10 | require('whatwg-fetch'); 11 | 12 | // Object.assign() is commonly used with React. 13 | // It will use the native implementation if it's present and isn't buggy. 14 | Object.assign = require('object-assign'); 15 | -------------------------------------------------------------------------------- /config/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | var autoprefixer = require('autoprefixer'); 2 | var webpack = require('webpack'); 3 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); 5 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 6 | var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); 7 | var getClientEnvironment = require('./env'); 8 | var paths = require('./paths'); 9 | 10 | 11 | 12 | // Webpack uses `publicPath` to determine where the app is being served from. 13 | // In development, we always serve from the root. This makes config easier. 14 | var publicPath = '/'; 15 | // `publicUrl` is just like `publicPath`, but we will provide it to our app 16 | // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. 17 | // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. 18 | var publicUrl = ''; 19 | // Get environment variables to inject into our app. 20 | var env = getClientEnvironment(publicUrl); 21 | 22 | // This is the development configuration. 23 | // It is focused on developer experience and fast rebuilds. 24 | // The production configuration is different and lives in a separate file. 25 | module.exports = { 26 | // You may want 'eval' instead if you prefer to see the compiled output in DevTools. 27 | // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. 28 | devtool: 'cheap-module-source-map', 29 | // These are the "entry points" to our application. 30 | // This means they will be the "root" imports that are included in JS bundle. 31 | // The first two entry points enable "hot" CSS and auto-refreshes for JS. 32 | entry: [ 33 | // Include an alternative client for WebpackDevServer. A client's job is to 34 | // connect to WebpackDevServer by a socket and get notified about changes. 35 | // When you save a file, the client will either apply hot updates (in case 36 | // of CSS changes), or refresh the page (in case of JS changes). When you 37 | // make a syntax error, this client will display a syntax error overlay. 38 | // Note: instead of the default WebpackDevServer client, we use a custom one 39 | // to bring better experience for Create React App users. You can replace 40 | // the line below with these two lines if you prefer the stock client: 41 | // require.resolve('webpack-dev-server/client') + '?/', 42 | // require.resolve('webpack/hot/dev-server'), 43 | require.resolve('react-dev-utils/webpackHotDevClient'), 44 | // We ship a few polyfills by default: 45 | require.resolve('./polyfills'), 46 | // Finally, this is your app's code: 47 | paths.appIndexJs 48 | // We include the app code last so that if there is a runtime error during 49 | // initialization, it doesn't blow up the WebpackDevServer client, and 50 | // changing JS code would still trigger a refresh. 51 | ], 52 | output: { 53 | // Next line is not used in dev but WebpackDevServer crashes without it: 54 | path: paths.appBuild, 55 | // Add /* filename */ comments to generated require()s in the output. 56 | pathinfo: true, 57 | // This does not produce a real file. It's just the virtual path that is 58 | // served by WebpackDevServer in development. This is the JS bundle 59 | // containing code from all our entry points, and the Webpack runtime. 60 | filename: 'static/js/bundle.js', 61 | // This is the URL that app is served from. We use "/" in development. 62 | publicPath: publicPath 63 | }, 64 | resolve: { 65 | // This allows you to set a fallback for where Webpack should look for modules. 66 | // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. 67 | // We use `fallback` instead of `root` because we want `node_modules` to "win" 68 | // if there any conflicts. This matches Node resolution mechanism. 69 | // https://github.com/facebookincubator/create-react-app/issues/253 70 | fallback: paths.nodePaths, 71 | // These are the reasonable defaults supported by the Node ecosystem. 72 | // We also include JSX as a common component filename extension to support 73 | // some tools, although we do not recommend using it, see: 74 | // https://github.com/facebookincubator/create-react-app/issues/290 75 | extensions: ['.js', '.json', '.jsx', ''], 76 | alias: { 77 | // Support React Native Web 78 | // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 79 | 'react-native': 'react-native-web' 80 | } 81 | }, 82 | 83 | module: { 84 | // First, run the linter. 85 | // It's important to do this before Babel processes the JS. 86 | preLoaders: [ 87 | { 88 | test: /\.(js|jsx)$/, 89 | loader: 'eslint', 90 | include: paths.appSrc, 91 | } 92 | ], 93 | loaders: [ 94 | // Default loader: load all assets that are not handled 95 | // by other loaders with the url loader. 96 | // Note: This list needs to be updated with every change of extensions 97 | // the other loaders match. 98 | // E.g., when adding a loader for a new supported file extension, 99 | // we need to add the supported extension to this loader too. 100 | // Add one new line in `exclude` for each loader. 101 | // 102 | // "file" loader makes sure those assets get served by WebpackDevServer. 103 | // When you `import` an asset, you get its (virtual) filename. 104 | // In production, they would get copied to the `build` folder. 105 | // "url" loader works like "file" loader except that it embeds assets 106 | // smaller than specified limit in bytes as data URLs to avoid requests. 107 | // A missing `test` is equivalent to a match. 108 | { 109 | exclude: [ 110 | /\.html$/, 111 | /\.(js|jsx)$/, 112 | /\.css$/, 113 | /\.json$/, 114 | /\.woff$/, 115 | /\.woff2$/, 116 | /\.(ttf|svg|eot)$/ 117 | ], 118 | loader: 'url', 119 | query: { 120 | limit: 10000, 121 | name: 'static/media/[name].[hash:8].[ext]' 122 | } 123 | }, 124 | // Process JS with Babel. 125 | { 126 | test: /\.(js|jsx)$/, 127 | include: paths.appSrc, 128 | loader: 'babel', 129 | query: { 130 | 131 | // This is a feature of `babel-loader` for webpack (not Babel itself). 132 | // It enables caching results in ./node_modules/.cache/babel-loader/ 133 | // directory for faster rebuilds. 134 | cacheDirectory: true 135 | } 136 | }, 137 | // "postcss" loader applies autoprefixer to our CSS. 138 | // "css" loader resolves paths in CSS and adds assets as dependencies. 139 | // "style" loader turns CSS into JS modules that inject Asset 1 -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Router, Route, IndexRoute, browserHistory } from 'react-router' 4 | import { Provider } from 'react-redux' 5 | import { syncHistoryWithStore } from 'react-router-redux' 6 | import { UserIsAuthenticated } from './util/wrappers.js' 7 | 8 | // Layouts 9 | import App from './App' 10 | import Home from './layouts/home/Home' 11 | import Dashboard from './layouts/dashboard/Dashboard' 12 | import Profile from './user/layouts/profile/Profile' 13 | 14 | // Redux Store 15 | import store from './store' 16 | 17 | const history = syncHistoryWithStore(browserHistory, store) 18 | 19 | ReactDOM.render(( 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | ), 30 | document.getElementById('root') 31 | ) 32 | -------------------------------------------------------------------------------- /src/layouts/dashboard/Dashboard.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | class Dashboard extends Component { 4 | constructor(props, { authData }) { 5 | super(props) 6 | authData = this.props 7 | } 8 | 9 | render() { 10 | return( 11 |
12 |
13 |
14 |

Dashboard

15 |

Congratulations {this.props.authData.name}! If you're seeing this page, you've logged in with UPort successfully.

16 |
17 |
18 |
19 | ) 20 | } 21 | } 22 | 23 | export default Dashboard 24 | -------------------------------------------------------------------------------- /src/layouts/home/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | class Home extends Component { 4 | render() { 5 | return( 6 |
7 |
8 |
9 |

Good to Go!

10 |

Your Truffle Box is installed and ready.

11 |

UPort Authentication

12 |

This particular box comes with UPort authentication built-in.

13 |

NOTE: To interact with your smart contracts through UPort's web3 instance, make sure they're deployed to the Ropsten testnet.

14 |

In the upper-right corner, you'll see a login button. Click it to login with UPort. There is an authenticated route, "/dashboard", that displays the UPort user's name once authenticated.

15 |

Redirect Path

16 |

This example redirects home ("/") when trying to access an authenticated route without first authenticating. You can change this path in the failureRedirectUrl property of the UserIsAuthenticated wrapper on line 9 of util/wrappers.js.

17 |

Accessing User Data

18 |

Once authenticated, any component can access the user's data by assigning the authData object to a component's props.

19 | 

20 |               {"// In component's constructor."}

21 |               {"constructor(props, { authData }) {"}

22 |               {"  super(props)"}

23 |               {"  authData = this.props"}

24 |               {"}"}


25 |               {"// Use in component."}

26 |               {"Hello { this.props.authData.name }!"}
27 |
28 |

Further Reading

29 |

The React/Redux portions of the authentication fuctionality are provided by mjrussell/redux-auth-wrapper.

30 |
31 |
32 |
33 | ) 34 | } 35 | } 36 | 37 | export default Home 38 | -------------------------------------------------------------------------------- /src/reducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import { routerReducer } from 'react-router-redux' 3 | import userReducer from './user/userReducer' 4 | 5 | const reducer = combineReducers({ 6 | routing: routerReducer, 7 | user: userReducer 8 | }) 9 | 10 | export default reducer 11 | -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import { browserHistory } from 'react-router' 2 | import { createStore, applyMiddleware, compose } from 'redux' 3 | import thunkMiddleware from 'redux-thunk' 4 | import { routerMiddleware } from 'react-router-redux' 5 | import reducer from './reducer' 6 | 7 | // Redux DevTools 8 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 9 | 10 | const routingMiddleware = routerMiddleware(browserHistory) 11 | 12 | const store = createStore( 13 | reducer, 14 | composeEnhancers( 15 | applyMiddleware( 16 | thunkMiddleware, 17 | routingMiddleware 18 | ) 19 | ) 20 | ) 21 | 22 | export default store 23 | -------------------------------------------------------------------------------- /src/user/layouts/profile/Profile.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | 3 | class Profile extends Component { 4 | constructor(props, { authData }) { 5 | super(props) 6 | authData = this.props 7 | } 8 | 9 | render() { 10 | return( 11 |
12 |
13 |
14 |

Profile

15 |

Change these details in UPort to see them reflected here.

16 |

17 | Name
18 | {this.props.authData.name} 19 |

20 |
21 |
22 |
23 | ) 24 | } 25 | } 26 | 27 | export default Profile 28 | -------------------------------------------------------------------------------- /src/user/ui/loginbutton/LoginButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | // Images 4 | import uPortLogo from '../../../img/uport-logo.svg' 5 | 6 | const LoginButton = ({ onLoginUserClick }) => { 7 | return( 8 |
  • 9 | onLoginUserClick(event)}>UPort LogoLogin with UPort 10 |
    • 11 | ) 12 | } 13 | 14 | export default LoginButton 15 | -------------------------------------------------------------------------------- /src/user/ui/loginbutton/LoginButtonActions.js: -------------------------------------------------------------------------------- 1 | import { uport } from './../../../util/connectors.js' 2 | import { browserHistory } from 'react-router' 3 | 4 | export const USER_LOGGED_IN = 'USER_LOGGED_IN' 5 | function userLoggedIn(user) { 6 | return { 7 | type: USER_LOGGED_IN, 8 | payload: user 9 | } 10 | } 11 | 12 | export function loginUser() { 13 | return function(dispatch) { 14 | // UPort and its web3 instance are defined in ./../../../util/wrappers. 15 | // Request uPort persona of account passed via QR 16 | uport.requestCredentials().then((credentials) => { 17 | dispatch(userLoggedIn(credentials)) 18 | 19 | // Used a manual redirect here as opposed to a wrapper. 20 | // This way, once logged in a user can still access the home page. 21 | var currentLocation = browserHistory.getCurrentLocation() 22 | 23 | if ('redirect' in currentLocation.query) 24 | { 25 | return browserHistory.push(decodeURIComponent(currentLocation.query.redirect)) 26 | } 27 | 28 | return browserHistory.push('/dashboard') 29 | }) 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/user/ui/loginbutton/LoginButtonContainer.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux' 2 | import LoginButton from './LoginButton' 3 | import { loginUser } from './LoginButtonActions' 4 | 5 | const mapStateToProps = (state, ownProps) => { 6 | return {} 7 | } 8 | 9 | const mapDispatchToProps = (dispatch) => { 10 | return { 11 | onLoginUserClick: (event) => { 12 | event.preventDefault(); 13 | 14 | dispatch(loginUser()) 15 | } 16 | } 17 | } 18 | 19 | const LoginButtonContainer = connect( 20 | mapStateToProps, 21 | mapDispatchToProps 22 | )(LoginButton) 23 | 24 | export default LoginButtonContainer 25 | -------------------------------------------------------------------------------- /src/user/ui/logoutbutton/LogoutButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const LogoutButton = ({ onLogoutUserClick }) => { 4 | return( 5 |
  • 6 | onLogoutUserClick(event)}>Logout 7 |
    • 8 | ) 9 | } 10 | 11 | export default LogoutButton 12 | -------------------------------------------------------------------------------- /src/user/ui/logoutbutton/LogoutButtonActions.js: -------------------------------------------------------------------------------- 1 | import { browserHistory } from 'react-router' 2 | 3 | export const USER_LOGGED_OUT = 'USER_LOGGED_OUT' 4 | function userLoggedOut(user) { 5 | return { 6 | type: USER_LOGGED_OUT, 7 | payload: user 8 | } 9 | } 10 | 11 | export function logoutUser() { 12 | return function(dispatch) { 13 | // Logout user. 14 | dispatch(userLoggedOut()) 15 | 16 | // Redirect home. 17 | return browserHistory.push('/') 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/user/ui/logoutbutton/LogoutButtonContainer.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux' 2 | import LogoutButton from './LogoutButton' 3 | import { logoutUser } from './LogoutButtonActions' 4 | 5 | const mapStateToProps = (state, ownProps) => { 6 | return {} 7 | } 8 | 9 | const mapDispatchToProps = (dispatch) => { 10 | return { 11 | onLogoutUserClick: (event) => { 12 | event.preventDefault(); 13 | 14 | dispatch(logoutUser()) 15 | } 16 | } 17 | } 18 | 19 | const LogoutButtonContainer = connect( 20 | mapStateToProps, 21 | mapDispatchToProps 22 | )(LogoutButton) 23 | 24 | export default LogoutButtonContainer 25 | -------------------------------------------------------------------------------- /src/user/userReducer.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | data: null 3 | } 4 | 5 | const userReducer = (state = initialState, action) => { 6 | if (action.type === 'USER_LOGGED_IN') 7 | { 8 | return Object.assign({}, state, { 9 | data: action.payload 10 | }) 11 | } 12 | 13 | if (action.type === 'USER_LOGGED_OUT') 14 | { 15 | return Object.assign({}, state, { 16 | data: null 17 | }) 18 | } 19 | 20 | return state 21 | } 22 | 23 | export default userReducer 24 | -------------------------------------------------------------------------------- /src/util/connectors.js: -------------------------------------------------------------------------------- 1 | import { Connect } from 'uport-connect' 2 | 3 | export let uport = new Connect('TruffleBox') 4 | export const web3 = uport.getWeb3() 5 | -------------------------------------------------------------------------------- /src/util/wrappers.js: -------------------------------------------------------------------------------- 1 | import { UserAuthWrapper } from 'redux-auth-wrapper' 2 | import { routerActions } from 'react-router-redux' 3 | 4 | // Layout Component Wrappers 5 | 6 | export const UserIsAuthenticated = UserAuthWrapper({ 7 | authSelector: state => state.user.data, 8 | redirectAction: routerActions.replace, 9 | failureRedirectPath: '/', // '/login' by default. 10 | wrapperDisplayName: 'UserIsAuthenticated' 11 | }) 12 | 13 | export const UserIsNotAuthenticated = UserAuthWrapper({ 14 | authSelector: state => state.user, 15 | redirectAction: routerActions.replace, 16 | failureRedirectPath: (state, ownProps) => ownProps.location.query.redirect || '/dashboard', 17 | wrapperDisplayName: 'UserIsNotAuthenticated', 18 | predicate: user => user.data === null, 19 | allowRedirectBack: false 20 | }) 21 | 22 | // UI Component Wrappers 23 | 24 | export const VisibleOnlyAuth = UserAuthWrapper({ 25 | authSelector: state => state.user, 26 | wrapperDisplayName: 'VisibleOnlyAuth', 27 | predicate: user => user.data, 28 | FailureComponent: null 29 | }) 30 | 31 | export const HiddenOnlyAuth = UserAuthWrapper({ 32 | authSelector: state => state.user, 33 | wrapperDisplayName: 'HiddenOnlyAuth', 34 | predicate: user => user.data === null, 35 | FailureComponent: null 36 | }) 37 | -------------------------------------------------------------------------------- /test/TestSimpleStorage.sol: -------------------------------------------------------------------------------- 1 | pragma solidity ^0.4.2; 2 | 3 | import "truffle/Assert.sol"; 4 | import "truffle/DeployedAddresses.sol"; 5 | import "../contracts/SimpleStorage.sol"; 6 | 7 | contract TestSimpleStorage { 8 | 9 | function testItStoresAValue() public { 10 | SimpleStorage simpleStorage = SimpleStorage(DeployedAddresses.SimpleStorage()); 11 | 12 | simpleStorage.set(89); 13 | 14 | uint expected = 89; 15 | 16 | Assert.equal(simpleStorage.get(), expected, "It should store the value 89."); 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /test/simplestorage.js: -------------------------------------------------------------------------------- 1 | var SimpleStorage = artifacts.require("./SimpleStorage.sol"); 2 | 3 | contract('SimpleStorage', function(accounts) { 4 | 5 | it("...should store the value 89.", function() { 6 | return SimpleStorage.deployed().then(function(instance) { 7 | simpleStorageInstance = instance; 8 | 9 | return simpleStorageInstance.set(89, {from: accounts[0]}); 10 | }).then(function() { 11 | return simpleStorageInstance.get.call(); 12 | }).then(function(storedData) { 13 | assert.equal(storedData, 89, "The value 89 was not stored."); 14 | }); 15 | }); 16 | 17 | }); 18 | -------------------------------------------------------------------------------- /truffle-box.json: -------------------------------------------------------------------------------- 1 | { 2 | "ignore": [ 3 | "README.md", 4 | ".gitignore" 5 | ], 6 | "commands": { 7 | "Compile": "truffle compile", 8 | "Migrate": "truffle migrate", 9 | "Test contracts": "truffle test", 10 | "Test dapp": "npm test", 11 | "Run dev server": "npm run start", 12 | "Build for production": "npm run build" 13 | }, 14 | "hooks": { 15 | "post-unpack": "npm install" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /truffle-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // See 3 | // to customize your Truffle configuration! 4 | }; 5 | -------------------------------------------------------------------------------- /truffle.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // See 3 | // to customize your Truffle configuration! 4 | }; 5 | --------------------------------------------------------------------------------