Skip to content
This repository has been archived by the owner on Apr 17, 2023. It is now read-only.

Commit

Permalink
Merge pull request #148 from blockstack/web-0.2
Browse files Browse the repository at this point in the history
Web 0.2
  • Loading branch information
shea256 committed Jan 22, 2017
2 parents ff7fef4 + cc81bc6 commit f94cb1a
Show file tree
Hide file tree
Showing 66 changed files with 4,704 additions and 307 deletions.
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,7 @@ __coverage__

.elasticbeanstalk/

unused
unused

tmp

42 changes: 25 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,30 @@ The Blockstack Browser allows you to explore the Blockstack internet.

---

### Getting up and running
## Developing Locally

1. Clone this repo from `https://github.com/blockstack/blockstack-browser.git`
2. Run `npm install` from the root directory
3. Run `gulp proxy` which starts the CORS proxy on port 1337
4. In another terminal, run `gulp dev` (may require installing Gulp globally `npm install gulp -g`)
5. Your browser will automatically be opened and directed to the browser-sync proxy address
6. To prepare assets for production, run the `npm run build` task (Note: the production task does not fire up the browser-sync server, and won't provide you with browser-sync's live reloading. Simply use `gulp dev` during development. More information below)
1. Run `npm install` from the root directory
1. Run `npm run dev` to run locally

Now that `gulp dev` is running, the server is up as well and serving files from the `/build` directory. Any changes in the `/app` directory will be automatically processed by Gulp and the changes will be injected to any open browsers pointed at the proxy address.
*Note: When you do `npm run dev` you're running two concurrent processes. One starts a CORS proxy on port 1337. The other runs a BrowserSync process that watches the assets in `/app`, then builds them and places them in `/build`, and in turn serves them up on port 3000. Anytime changes are made to the original files, they are rebuilt and resynced to the browser frames you have open.*

---
## Building for the Web

1. Make sure you've cloned the repo and installed all npm assets (as shown above)
1. Run `npm run web`

## Building for macOS

1. Make sure you have a working installation of Xcode 8 or higher
1. Run `npm install nexe -g` to install the "node to native" binary tool globally
1. Run `npm run mac`

*Note: You only need to run `nexe` once but the first build will take a while as `nexe` downloads and compiles a source copy of node. Then it creates and copies the needed proxy binaries into place and copies a built version of the browser web app into the source tree.*

*Note: This has only been tested on macOS Sierra 10.12.*

## Tech Stack

This app uses the latest versions of the following libraries:

Expand All @@ -33,16 +45,12 @@ This app uses the latest versions of the following libraries:

Along with many Gulp libraries (these can be seen in either `package.json`, or at the top of each task in `/gulp/tasks/`).

---

### Running tests
## Testing

1. If you haven't already, follow steps 1 & 2 above
2. If you haven't already run `gulp dev` or `npm run build` at least once, run `npm run build`
3. Run all tests in the `tests/` directory with the `gulp test` command
* A single file can be run by specifing an `-f` flag: `gulp test -f <PATH_TO_TEST_FILE>`
2. If you haven't already run `npm run dev` or `npm run build` at least once, run `npm run build`
3. Run all tests in the `tests/` directory with the `npm run test` command
* A single file can be run by specifing an `-f` flag: `npm run test -f <PATH_TO_TEST_FILE>`
* In the `PATH_TO_TEST_FILE`, it is possible to omit the `tests/` prefix, as well as the `.test.js` suffix. They will be automatically added if not detected.

##### Code coverage

When running tests, code coverage will be automatically calculated and output to an HTML file using the [Istanbul](https://github.com/gotwarlost/istanbul) library. These files can be seen in the generated `coverage/` directory.
*Note: When running tests, code coverage will be automatically calculated and output to an HTML file using the [Istanbul](https://github.com/gotwarlost/istanbul) library. These files can be seen in the generated `coverage/` directory.*
Empty file added api
Empty file.
Binary file added app/images/app-blockstack.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/images/app-hello-blockstack.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/images/app-identity.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/images/app-settings.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 11 additions & 49 deletions app/js/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,21 @@ import { connect } from 'react-redux'

import Sidebar from './components/Sidebar'
import Navbar from './components/Navbar'
import { AccountActions } from './store/account'

function mapStateToProps(state) {
return {
accountCreated: state.account.accountCreated
}
}

class MainScreen extends Component {
static propTypes = {
children: PropTypes.element.isRequired
}

render() {
return (
<div className="body-main">
<Sidebar />
<div className="content-section" style={{ height: '100%' }}>
<Navbar />
{this.props.children}
</div>
</div>
)
}
}

class WelcomeScreen extends Component {
render() {
return (
<div className="body-landing" style={{ backgroundColor: '#1b1e21' }}>
{this.props.children}
</div>
)
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(AccountActions, dispatch)
}

class App extends Component {
static propTypes = {
children: PropTypes.element.isRequired,
accountCreated: PropTypes.bool.isRequired
initializeWallet: PropTypes.func.isRequired,
}

static contextTypes = {
Expand All @@ -52,36 +28,22 @@ class App extends Component {

constructor(props) {
super(props)
this.state = {}
}

componentHasNewProps(accountCreated) {
if (!accountCreated) {
this.context.router.push('/account/create')
}
}

componentWillMount() {
this.componentHasNewProps(this.props.accountCreated)
}

componentWillReceiveProps(nextProps) {
if (nextProps.accountCreated !== this.props.accountCreated) {
this.componentHasNewProps(nextProps.accountCreated)
}
this.props.initializeWallet("password", null)
}

render() {
if (this.props.accountCreated) {
return (<MainScreen children={this.props.children} />)
} else {
return (<WelcomeScreen children={this.props.children} />)
}
return (
<div className="body-main">
{this.props.children}
</div>
)
}
}


export default connect(mapStateToProps)(App)
export default connect(mapStateToProps, mapDispatchToProps)(App)

/*
{
Expand Down
15 changes: 0 additions & 15 deletions app/js/components/Navbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { Component, PropTypes } from 'react'
import { Link } from 'react-router'
import BackButton from '../components/BackButton'
import ForwardButton from '../components/ForwardButton'
import AddressBar from './AddressBar'

class Navbar extends Component {
static propTypes = {
Expand Down Expand Up @@ -33,20 +32,6 @@ class Navbar extends Component {
</div>
</Link>
</div>
<div className="nav-item nav-link">
<Link to="/account/settings">
<div className="icon-labels">
<img src="/images/icon-cog.svg"/>
<span className="icon-label-wrap">Account</span>
</div>
</Link>
</div>

</div>
<div className="nav-search">
<div className="nav-link">
<AddressBar placeholder="Search for people, apps & more…" />
</div>
</div>
</div>
</nav>
Expand Down
45 changes: 28 additions & 17 deletions app/js/pages/DashboardPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,30 +24,41 @@ class DashboardPage extends Component {
   return (
<div className="">
<section>
<div className="container-fluid">
<h6 className="text-xs-center text-feat-dash">Featured Apps, coming soon...</h6>
</div>
<div className="container-fluid no-padding">
<div className="col-sm-12 app-container no-padding">
<div className="col-sm-4 no-padding app-box-container">
<img className="app-box" src="/images/app-box-chord@2x.png" />
<div className="col-sm-4">
<Link to="/identity" className="app-box-container">
<div className="app-box">
<img src="/images/app-identity.png" />
</div>
</Link>
<div className="app-text-container">
<h3>Profiles</h3>
</div>
</div>
<div className="col-sm-4 no-padding app-box-container">
<img className="app-box" src="/images/app-box-greenleaf@2x.png" />
<div className="col-sm-4">
<Link to="/account/settings" className="app-box-container">
<div className="app-box">
<img src="/images/app-settings.png" />
</div>
</Link>
<div className="app-text-container">
<h3>Settings</h3>
</div>
</div>
<div className="col-sm-4 no-padding app-box-container">
<img className="app-box" src="/images/app-box-guild@2x.png" />
<div className="col-sm-4">
<a href="https://blockstack-hello-world.firebaseapp.com/"
className="app-box-container">
<div className="app-box">
<img src="/images/app-hello-blockstack.png" />
</div>
</a>
<div className="app-text-container">
<h3>Hello, Blockstack</h3>
</div>
</div>
</div>
</div>
<div className="container-fluid">
<h1 className="clean-font text-xs-center p-t-3">Browse the decentralized web</h1>
</div>
<div className="container-fluid">
<div className="col-sm-6 offset-sm-3 text-xs-center">
<h5>Blockstack browser is the world’s first browser that enables you to browse the decentralized web</h5>
</div>
</div>
</section>
</div>
   )
Expand Down
103 changes: 103 additions & 0 deletions app/js/pages/IdentityPage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { Person } from 'blockstack-profiles'

import AddressBar from '../components/AddressBar'
import { IdentityItem } from '../components/index'
import { IdentityActions } from '../store/identities'
import { AccountActions } from '../store/account'

function mapStateToProps(state) {
return {
localIdentities: state.identities.localIdentities,
lastNameLookup: state.identities.lastNameLookup,
identityAddresses: state.account.identityAccount.addresses,
addressLookupUrl: state.settings.api.addressLookupUrl || ''
}
}

function mapDispatchToProps(dispatch) {
return bindActionCreators(Object.assign({}, IdentityActions, AccountActions), dispatch)
}

class IdentityPage extends Component {
static propTypes = {
localIdentities: PropTypes.object.isRequired,
createNewIdentity: PropTypes.func.isRequired,
refreshIdentities: PropTypes.func.isRequired,
addressLookupUrl: PropTypes.string.isRequired,
lastNameLookup: PropTypes.array.isRequired
}

constructor(props) {
super(props)

this.state = {
localIdentities: this.props.localIdentities
}
}

componentWillMount() {
this.props.refreshIdentities(
this.props.identityAddresses,
this.props.addressLookupUrl,
this.props.localIdentities,
this.props.lastNameLookup
)
}

componentWillReceiveProps(nextProps) {
this.setState({
localIdentities: nextProps.localIdentities
})
}

render() {
return (
<div>
<nav className="navbar navbar-light bg-faded">
<div className="nav navbar-nav">
<div className="nav-search">
<div className="nav-link">
<AddressBar placeholder="Search for people, apps & more…" />
</div>
</div>
</div>
</nav>

<div className="m-b-2">
<h3>Personas</h3>
</div>
<div className="m-b-2">
<Link to="/names/register" className="btn btn-side-emphasis btn-side-pull-left" >
Register
</Link>
<Link to="/names/import" className="btn btn-side-secondary">
Import
</Link>
</div>
<div className="m-b-2">
<ul className="nav sidebar-list">
{Object.keys(this.state.localIdentities).map((domainName) => {
const identity = this.state.localIdentities[domainName],
person = new Person(identity.profile)
if (identity.domainName) {
return (
<IdentityItem key={identity.domainName}
label={identity.domainName}
pending={!identity.registered}
avatarUrl={person.avatarUrl() || ''}
url={`/profile/local/${identity.domainName}`} />
)
}
})}
</ul>
</div>
</div>
)
}
}

export default connect(mapStateToProps, mapDispatchToProps)(IdentityPage)

0 comments on commit f94cb1a

Please sign in to comment.