Browse Source

Information architecture updates (in scope of Clarity) (#542)

* Remove app mining docs

* remove browser / "use blockchain apps" docs

* Fixing refs for define

* Update information architecture

* Adding new layout for smart contract category

* Quick title fix

* Core > Stack Blockchain, title fixes

* Langauge fixes based on feedback
feat/clarity-updates
Alexander Graebe 5 years ago
committed by GitHub
parent
commit
245706f576
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 34
      README.md
  2. 7
      _android/tutorial.md
  3. 1
      _browser/.svn/entries
  4. 1
      _browser/.svn/format
  5. BIN
      _browser/.svn/pristine/04/04f3a32b0bc311047a20e12c72428e50812cdbd9.svn-base
  6. 330
      _browser/.svn/pristine/07/0760488b80dc376bd96b4dd0ec94f4e79292cf9b.svn-base
  7. BIN
      _browser/.svn/pristine/08/085c1a3260d4d04fcd82252787ba093d06446210.svn-base
  8. BIN
      _browser/.svn/pristine/12/1284f902d27c0fdb01787c315fa61ee525538d65.svn-base
  9. BIN
      _browser/.svn/pristine/28/28885ce546124804666f1c735f1fb916582a1a98.svn-base
  10. BIN
      _browser/.svn/pristine/2c/2cb66479d94646ba1c3c651f26dbd9683e929114.svn-base
  11. BIN
      _browser/.svn/pristine/2e/2e837afccc4a402a90dc0b7e580109e49e3252e2.svn-base
  12. BIN
      _browser/.svn/pristine/2f/2f00af279deecacd5b47bdc32a0106e23b2a2f64.svn-base
  13. BIN
      _browser/.svn/pristine/30/30473db14d0ed5ac772c32ab2e89375faa2b0133.svn-base
  14. 27
      _browser/.svn/pristine/30/30e89a5d274e5137e687939f31ca471aea7462a3.svn-base
  15. BIN
      _browser/.svn/pristine/33/33f4fbc3c99fe5df9c5eb23cc4aaf25165722419.svn-base
  16. BIN
      _browser/.svn/pristine/37/373b7d67a3d5c2de4723fcd45470854cf0c5ca6e.svn-base
  17. BIN
      _browser/.svn/pristine/3f/3f89163556affc6e77a6630136bf6897bc9ae8f6.svn-base
  18. BIN
      _browser/.svn/pristine/42/423c91a747d0f3570fb0d63199c9adcbe6baef1d.svn-base
  19. 328
      _browser/.svn/pristine/49/49a137f4f026b72e9ba4af3fd546fe8baff34c09.svn-base
  20. BIN
      _browser/.svn/pristine/55/5500a797259a620714f1c576c579f117982590db.svn-base
  21. 288
      _browser/.svn/pristine/63/630ab4b5cbd3ff99dde5761ac5f475eb39dc3c9b.svn-base
  22. BIN
      _browser/.svn/pristine/63/6326880dd17c45162090e3bb4902adefbccfcb15.svn-base
  23. 812
      _browser/.svn/pristine/64/6462fdc5109daa02e29fbf38f8602f7425387275.svn-base
  24. 812
      _browser/.svn/pristine/65/65ae54036b4f6a2a5c29057ecf62cd91b4b3f506.svn-base
  25. 210
      _browser/.svn/pristine/66/6621d9feb3a2a15035193f6c0c393c822241ec8f.svn-base
  26. BIN
      _browser/.svn/pristine/6c/6cf236705739b3dc1eaa714fab9bace84b283e8b.svn-base
  27. BIN
      _browser/.svn/pristine/7d/7d026a516855c1ccedf5ee6a2fe63126d09c8e26.svn-base
  28. BIN
      _browser/.svn/pristine/7e/7e40e7b1ee5b4f12d441e53a6ab89e94ad1fca90.svn-base
  29. BIN
      _browser/.svn/pristine/85/85996c7ad7783aa09fc9583b4befe746d24be5e5.svn-base
  30. BIN
      _browser/.svn/pristine/88/880a628c402d072057a35178bbbc13b8437c46bb.svn-base
  31. BIN
      _browser/.svn/pristine/89/8917230875187dc926ba9f5a9a86e781975585ad.svn-base
  32. BIN
      _browser/.svn/pristine/8e/8e3163bec841bf2fb8cc6ecbbf49f02e64b1e2d8.svn-base
  33. BIN
      _browser/.svn/pristine/94/9400d6428e2bb287e9c7385bedb6ee563f5829d0.svn-base
  34. BIN
      _browser/.svn/pristine/a3/a388e8949737a271d80b69b8dfcf48d77dddb890.svn-base
  35. BIN
      _browser/.svn/pristine/a8/a8348770072ebc93d3d6669efb8fb2225bbb39de.svn-base
  36. BIN
      _browser/.svn/pristine/b0/b0150507ba3e8a583e83ad2c29256231c8b58373.svn-base
  37. BIN
      _browser/.svn/pristine/b7/b719720c84e885f3d96f0c0b14534214d6683f18.svn-base
  38. BIN
      _browser/.svn/pristine/b9/b974564d6e487b3c718c87a3c3fa821b4ac3d833.svn-base
  39. BIN
      _browser/.svn/pristine/bf/bfa77ea6b63530fb7273cc51c462f37d9479a75b.svn-base
  40. BIN
      _browser/.svn/pristine/ca/ca6de58cdaf847ead67cc9893c73b040cdd6fb08.svn-base
  41. 81
      _browser/.svn/pristine/cf/cfe2a40e44a14cf0e7be26fed8c2430dc0d259e2.svn-base
  42. BIN
      _browser/.svn/pristine/d0/d085d6df138e87cfea31a57a1e732327fbe01244.svn-base
  43. BIN
      _browser/.svn/pristine/d6/d6e6a8f19612c2353e5ff02ac49dc06762f7127c.svn-base
  44. BIN
      _browser/.svn/pristine/db/db11f02ca2f4fd6473c082112db7fd86c19d2039.svn-base
  45. BIN
      _browser/.svn/pristine/eb/ebb5e5f52918709d42ea6cbba0df6b008039e281.svn-base
  46. BIN
      _browser/.svn/pristine/ec/ec3db3fa698c68b7eb55535729ca0bf5306d33ba.svn-base
  47. BIN
      _browser/.svn/pristine/f1/f110c7b263eda5b8f71f1426dd9829625a5b1b31.svn-base
  48. BIN
      _browser/.svn/pristine/f2/f2da2a06b1ae6cece6cb9389f80dd5bb11cd7a98.svn-base
  49. BIN
      _browser/.svn/pristine/f7/f7d8196207101d3fd6bf9efa91cb074dcbea011d.svn-base
  50. BIN
      _browser/.svn/pristine/fe/feb47456df368ff71ac8c50b94702abec6bf2619.svn-base
  51. BIN
      _browser/.svn/pristine/ff/ff4ec7f9dcc8b70af2d527b508b30c47a5386514.svn-base
  52. BIN
      _browser/.svn/wc.db
  53. 0
      _browser/.svn/wc.db-journal
  54. 27
      _browser/README.md
  55. 6
      _browser/blockstack_storage.md
  56. 86
      _browser/browser-introduction.md
  57. 18
      _browser/browser-nav.md
  58. 19
      _browser/faq_general.md
  59. 44
      _browser/hello-blockstack.md
  60. 220
      _browser/ids-introduction.md
  61. BIN
      _browser/images/blockstack-bar.png
  62. BIN
      _browser/images/browser-on-mac-1.png
  63. BIN
      _browser/images/browser-on-mac.png
  64. BIN
      _browser/images/browser-uninstall.png
  65. BIN
      _browser/images/create-id-0.png
  66. BIN
      _browser/images/create-id-1.png
  67. BIN
      _browser/images/create-id-2.png
  68. BIN
      _browser/images/create-id-3.png
  69. BIN
      _browser/images/create-id-4.png
  70. BIN
      _browser/images/create-id-5.png
  71. BIN
      _browser/images/defaultstorage.png
  72. BIN
      _browser/images/deletedprofile.png
  73. BIN
      _browser/images/deleteme.png
  74. BIN
      _browser/images/display-complete.png
  75. BIN
      _browser/images/dmg-notice.png
  76. BIN
      _browser/images/eject-blockstack.png
  77. BIN
      _browser/images/existing-id.png
  78. BIN
      _browser/images/hello-authd.png
  79. BIN
      _browser/images/hw-loggedin.png
  80. BIN
      _browser/images/initial-app.png
  81. BIN
      _browser/images/login-choice.png
  82. BIN
      _browser/images/login-no-auth.png
  83. BIN
      _browser/images/login.gif
  84. BIN
      _browser/images/login.png
  85. BIN
      _browser/images/make-a-list.png
  86. BIN
      _browser/images/multi-player-storage-status.png
  87. BIN
      _browser/images/multiple-lists.png
  88. BIN
      _browser/images/navigation-top.png
  89. BIN
      _browser/images/network-connections.gif
  90. BIN
      _browser/images/new-prompt.gif
  91. BIN
      _browser/images/on-your-mind.gif
  92. BIN
      _browser/images/osx-dmg.png
  93. BIN
      _browser/images/publish-data-perm.png
  94. BIN
      _browser/images/quit-blockstack.png
  95. BIN
      _browser/images/recovery-code.png
  96. BIN
      _browser/images/recovery-key.png
  97. BIN
      _browser/images/sample-code.png
  98. BIN
      _browser/images/saving-status.png
  99. BIN
      _browser/images/secret-key-recovery.png
  100. BIN
      _browser/images/status-in.gif

34
README.md

@ -20,16 +20,16 @@ Blockstack is a ecosystem build around a platform. There are several types of us
<td>Users who make use of applications built on the Blockstack platform. These users have a Blockstack identity and typically use the Blockstack Browser at some point.</td>
</tr>
<tr>
<th>Dapp developers or DApp miners</th>
<td>Users who develop applications on the Blockstack platform. These users may be application miners but are not always. Special content exists for developers that are also miners.</td>
<th>Dapp developers</th>
<td>Users who develop applications on the Blockstack platform.</td>
</tr>
<tr>
<th>Hub Providers</th>
<td>Users who sell or maintain a Gai services are hub providers. They may also be application miners but need not be. These users may be more devops user types as opposed to developers.</td>
<td>Users who sell or maintain a Gai services are hub providers. These users may be more devops user types as opposed to developers.</td>
</tr>
<tr>
<th>Core service programmers</th>
<td>These are users that provide Blockstack CORE servers or who write Clarity contracts. These are also users who build wallets or explorers into the Blockstack platform.</td>
<td>These are users that run Stacks node or who write Clarity contracts. These are also users who build wallets or explorers into the Blockstack platform.</td>
</tr>
</table>
@ -77,7 +77,7 @@ Directories that contain information used to build content.
</tr>
<tr>
<td>_develop</td>
<td>Information for application miners covers using the Javascript library, our mobile SDKs, and the concepts hat support them. Navigation controlled by <a href="https://github.com/blockstack/docs.blockstack/blob/master/_data/navigation_learn.yml">developer menu</a> </td>
<td>Information for application developers covers using the Javascript library, our mobile SDKs, and the concepts hat support them. Navigation controlled by <a href="https://github.com/blockstack/docs.blockstack/blob/master/_data/navigation_learn.yml">developer menu</a> </td>
<td>This information was never associated with a single repo. Much of it does rely heavily on <a href="https://github.com/blockstack/blockstack.js">https://github.com/blockstack/blockstack.js</a>.</td>
</tr>
<tr>
@ -260,13 +260,13 @@ As of 8/12/19 Clarity is in the [develop](https://github.com/blockstack/blocksta
You can view [the source code](https://github.com/blockstack/blockstack-core/blob/develop/src/clarity.rs).
1. Pull the Blockstack core clarity-developer-preview image from Docker Hub.
1. Pull the Stacks Node clarity-developer-preview image from Docker Hub.
```bash
$ docker pull blockstack/blockstack-core:clarity-developer-preview
```
2. Start the Blockstack Core test environment with a Bash shell.
2. Start the Stacks Node test environment with a Bash shell.
```bash
$ docker run -it -v $HOME/blockstack-dev-data:/data/ blockstack/blockstack-core:clarity-developer-preview bash
@ -295,12 +295,11 @@ You can view [the source code](https://github.com/blockstack/blockstack-core/blo
## Understand how the shared FAQs work
The FAQ system servers single-sourced content that support the FAQs that appear in blockstack.org, app.co, and stacks.com site. We have FAQs that fall into these categories:
The FAQ system servers single-sourced content that support the FAQs that appear in blockstack.org, and stackstoken.com site. We have FAQs that fall into these categories:
* general
* appusers
* dappdevs
* appminers
* coredevs
* opensource
* miscquest
@ -331,12 +330,7 @@ FAQs are usually written internally by a team that are unfamiliar with markdown
<tr>
<td>_faqs/allfaqs.json</td>
<td>Liquid to generate JSON from theFAQS.json</td>
<td>Serves up the FAQs that are consumed by the blockstack.org and stacks.com sites.</td>
</tr>
<tr>
<td>_develop/faq-data.json</td>
<td>Liquid to generate JSON from appFAQ.json.</td>
<td>Serves up the FAQs that are consumed by the app.co site. <br><br>NOTE: App.co was never changed to pull from the same file as blockstack.org. </td>
<td>Serves up the FAQs that are consumed by the blockstack.org and stackstoken.com sites.</td>
</tr>
<tr>
<td>_faqs/allFAQs.md</td>
@ -348,16 +342,6 @@ FAQs are usually written internally by a team that are unfamiliar with markdown
<td>JSON for the FAQS.</td>
<td>Source file for all the FAQs.</td>
</tr>
<tr>
<td>_data/appFAQ.json</td>
<td>JSON for the app mining FAQs.</td>
<td>Source file for the application mining FAQs.</td>
</tr>
<tr>
<td>_develop/appMiningFAQ.md</td>
<td>Liquid to extract the app mining FAQs from the allFAQs.json file.</td>
<td>Display just the app mining FAQs in the docs.</td>
</tr>
</table>

7
_android/tutorial.md

@ -3,7 +3,7 @@ layout: learn
description: Learn about the Android SDK
permalink: /:collection/:path.html
---
# Android SDK Tutorial (Pre-release)
# Android DApps
{:.no_toc}
This tutorial is written for readers who are new to either or both Blockstack
@ -701,9 +701,6 @@ Now that you have created your initial project and verified it running in an emu
## Where to go next
Congratulations, you've completed your Android app using the new, pre-release
Blockstack Android SDK. Thank you for trying this pre-release. Please let us
know about your experience by tweeting to
[@blockstack](https://twitter.com/blockstack).
Congratulations, you've completed your Android app using the Blockstack Android SDK.
Learn more about Blockstack by [trying another tutorial](https://blockstack.org/tutorials).

1
_browser/.svn/entries

@ -1 +0,0 @@
12

1
_browser/.svn/format

@ -1 +0,0 @@
12

BIN
_browser/.svn/pristine/04/04f3a32b0bc311047a20e12c72428e50812cdbd9.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

330
_browser/.svn/pristine/07/0760488b80dc376bd96b4dd0ec94f4e79292cf9b.svn-base

@ -1,330 +0,0 @@
---
layout: learn
permalink: /:collection/:path.html
---
# Hello, Blockstack Tutorial
In this tutorial, you generate a simple application on Blockstack. The application
is a single-page application (SPA) that runs completely client-side. The
application has no backend API to talk to, other than the identity and storage
API that the user provides. In this sense, the application is a completely
decentralized, server-less application. You work through the following sections:
* TOC
{:toc}
## About this tutorial and the prerequisites you need
For this tutorial, we will use the following tools:
- `npm` to manage dependencies and scripts
- `browserify` to compile node code into browser-ready code
- `blockstack.js` to authenticate the user and work with the user's identity/profile information
At minimum, Blockstack requires macOS High Sierra. This tutorial was written for
a user running macOS High Sierra 10.13.4. The application you build is a
React.js application that is completely decentralized and server-less. While
not strictly required to follow along, basic familiarity with React.js is
helpful.
When complete, the app is capable of the following:
- authenticating users using Blockstack
- posting new statuses
- displaying statuses in the user profile
- looking up the profiles and statuses of other users
The basic identity and storage services are provided by `blockstack.js`. To test
the application, you need to have already registered a Blockstack ID.
The tutorial relies on the `npm` dependency manager. Before you begin, verify
you have installed `npm` using the `which` command to verify.
```bash
$ which npm
/usr/local/bin/npm
```
If you don't find `npm` in your system, [install
it](https://www.npmjs.com/get-npm).
Finally, make sure you have [created at least one Blockstack ID]({{ site.baseurl }}/browser/ids-introduction.html#create-an-initial-blockstack-id). You'll use this ID to interat with the application.
## Use npm to install Yeoman and the Blockstack App Generator
You use `npm` to install Yeoman. Yeoman is a generic scaffolding system that
helps users rapidly start new projects and streamline the maintenance of
existing projects.
1. Install Yeoman.
```bash
npm install -g yo
```
2. Install the Blockstack application generator.
```bash
npm install -g generator-blockstack
```
## Generate an initial Blockstack application
In this section, you build an initial React.js application called `hello-world-tutorial`.
1. Create the `hello-world-tutorial` directory.
```bash
mkdir hello-world-tutorial
```
2. Change into your new directory.
```bash
cd hello-world-tutorial
```
3. Use Yeoman and the Blockstack application generator to create your initial `hello-world-tutorial` application.
```bash
yo blockstack
```
You should see several interactive prompts.
```bash
$ yo blockstack
_-----_ ╭──────────────────────────╮
| | │ Welcome to the │
|--(o)--| │ Blockstack app │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? Are you ready to build a Blockstack app in React? (Y/n)
```
4. Respond to the prompts to populate the initial app.
After the process completes successfully, you see a prompt similar to the following:
```bash
...
create public/icon-192x192.png
create public/index.html
create public/robots.txt
create public/manifest.json
I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.
```
Depending on your environment you may have some problems with the `npm` packages. Go ahead and fix these before continuing to the next section.
## Review the basic application structure
The initial application you create is a generic Javascript application you run
with a local express node. Before you continue, take a moment to examine the
structure of this generic application structure:
| File | Description |
|------------------|-----------------------------------|
| .editorconfig | Sets universal values for editor. |
| .gitignore | Git configuration file. |
| firebase.json | Configuragion for mobile application.|
| package.json | Specifies required packages. |
| requires.js | A Javascript module loader. |
| server.js | Simple static server configuration.|
In the `public` folder you find these files:
| File | Description |
|------------------|-----------------------------------|
| app.css | Contains application styles. |
| app.js | Main application file. |
| boostrap.min.css | Minifield css for production. |
| icon-192x192.png | Application icon |
| index.html | Single page. |
| manifest.json | Tells the browser about the application and how it should behave.|
| robots.txt | Configures crawling and indexing. |
The simple static file server in the `server.js`file serves all of the files in
the `/public` directory, including `index.html`, `app.js`, `bootstrap.min.css`
and `app.css`. The main file of the application is in the `app.js`. It contains
the majority of the application logic.
## Start the server and view the application
When you start the server, it will create a Node.js server, start it locally,
and open your browser 'http://localhost:5000'. From the root of your new application directory:
1. Start the application server.
```bash
npm start
```
The first time you run it, your system prompts you to accept incoming connections.
![Network Connection](images/network-connections.gif)
2. Choose **Allow**.
3. Open your browser to `http://localhost:8080`.
You should see a simple application:
![](images/initial-app.gif)
4. Choose **Sign In with Blockstack**.
The application detects whether the user has the Blockstack client edition installed or
not. This is done automatically by the Blockstack API, more about this later.
What the browser displays depends on the users' current state.
| Using web app | Has client edition installed |
|------------------|-----------------------------------|
| ![](images/login-choice.png) | ![](images/login.gif) |
If the user logged into the Blockstack Browser but not reset it, the user can
simply use the exiting identity.
![](images/login-no-auth.png)
If the user chooses **Deny**, the Blockstack Browser displays its
**Home** page but the user is not logged into the sample application.
5. Leave your new application running and move onto the next section.
## Understand the generated application code
In this section, you look at the basic application generated with the `yo
blockstack` command. The generated code contains simple authentication methods
that allow a user to log into the browser. The main application code is located
in the `public/app.css` file. Open this file now.
All of the code in the file is wrapped in an event
listener.
```js
document.addEventListener("DOMContentLoaded", function(event) {
})
```
This listener that waits until the DOM content is loaded. Then, it creates an auth request and redirects the user to sign in:
```js
document.getElementById('signin-button').addEventListener('click', function() {
blockstack.redirectUserToSignIn()
})
```
You can find the `redirectUserToSignIn()` function is part of the [Blockstack Javascript documentation](https://blockstack.github.io/blockstack.js/). There is also a sign out button handler. This handler deletes the local user data and signs the user out:
```js
document.getElementById('signout-button').addEventListener('click', function() {
blockstack.signUserOut(window.location.origin)
})
```
The handlers are followed by a `showProfile()` function for showing the user's profile:
```js
function showProfile(profile) {
var person = new blockstack.Person(profile)
document.getElementById('heading-name').innerHTML = person.name() ? person.name() : "Nameless Person"
if(person.avatarUrl()) {
document.getElementById('avatar-image').setAttribute('src', person.avatarUrl())
}
document.getElementById('section-1').style.display = 'none'
document.getElementById('section-2').style.display = 'block'
}
```
Each `getElementById()` function refers to elemments in the `index.html` file.
Once a user is successfully signed in, there is logic for loading the user
profile and displaying the application. As illustrated earlier, there are
several states the user can be in:
- The user is already signed in
- The user has a pending sign in request
- The user is signed out
The application handles these situtations as followed:
```js
if (blockstack.isUserSignedIn()) {
var profile = blockstack.loadUserData().profile
showProfile(profile)
} else if (blockstack.isSignInPending()) {
blockstack.handlePendingSignIn().then(function(userData) {
window.location = window.location.origin
})
}
```
When the user is signed in, Blockstack loads the user data from local storage
and displays the profile with the `showProfile()` function. When the user has a
pending sign in request, the appplication signs the user in and redirects the
user back to the home page.
### Application manifest
The application's `/public/manifest.json` file configures your app. The
configurations dictate how the application is displayed in auth views and on
user home screens. The contents are very simple:
```json
{
"name": "Hello, Blockstack",
"start_url": "localhost:5000",
"description": "A simple demo of Blockstack Auth",
"icons": [{
"src": "https://helloblockstack.com/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}]
}
```
Keep it as is or fill it in with new information that describes your app.
### Save your application code
Complete the tutorial by storing your app code on GitHub. Before you begin, make sure you have a GitHub account and have configured your environment to use it.
1. Initialize the application code as a Git repo.
```bash
git init
```
2. Add and commit all of the files:
```bash
git add . && git commit -m "first commit"
```
3. In GitHub, create a `hello-blockstack` repository.
4. Back in your termininal window, add a remote for GitHub.
Make sure to fill in your username:
```bash
git remote add origin git@github.com:YOUR_USERNAME_HERE/hello-blockstack.git
```
5. Push your new code to the master branch of the remote repo:
```
git push origin master
```
You're done! You just built your first Blockstack app and shipped the code.
You're well on your way to becoming a Blockstack app legend.

BIN
_browser/.svn/pristine/08/085c1a3260d4d04fcd82252787ba093d06446210.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
_browser/.svn/pristine/12/1284f902d27c0fdb01787c315fa61ee525538d65.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
_browser/.svn/pristine/28/28885ce546124804666f1c735f1fb916582a1a98.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

BIN
_browser/.svn/pristine/2c/2cb66479d94646ba1c3c651f26dbd9683e929114.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
_browser/.svn/pristine/2e/2e837afccc4a402a90dc0b7e580109e49e3252e2.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 105 KiB

BIN
_browser/.svn/pristine/2f/2f00af279deecacd5b47bdc32a0106e23b2a2f64.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
_browser/.svn/pristine/30/30473db14d0ed5ac772c32ab2e89375faa2b0133.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

27
_browser/.svn/pristine/30/30e89a5d274e5137e687939f31ca471aea7462a3.svn-base

@ -1,27 +0,0 @@
# Tutorials
**Note: This data is being digested by blockstack.org. Do not change the formatting of this list unless you first make an adjustment to the code on blockstack.org.**
### Multi-player Storage
- urlSlug: multi-player-storage
- image: /images/tutorials/multi-player-storage.png
- description: Build a decentralized micro-blogging app using multi-player Gaia storage.
### Managing Data with Gaia
- urlSlug: managing-data-with-gaia
- image: /images/tutorials/managing-data-with-gaia.png
- description: This series will focus on teaching you to think like a Blockstack developer working with Gaia.
### Blockstack Todo
- urlSlug: todo-list
- image: /images/tutorials/todo-list.png
- description: Walk through creating a basic Todo application with Blockstack. Learn about Sign In flow and Gaia storage.
### Hello Blockstack
- urlSlug: hello-blockstack
- image: /images/tutorials/hello-blockstack.jpg
- description: Build a simple single-page JavaScript application that runs completely client-side without any servers.

BIN
_browser/.svn/pristine/33/33f4fbc3c99fe5df9c5eb23cc4aaf25165722419.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

BIN
_browser/.svn/pristine/37/373b7d67a3d5c2de4723fcd45470854cf0c5ca6e.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

BIN
_browser/.svn/pristine/3f/3f89163556affc6e77a6630136bf6897bc9ae8f6.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
_browser/.svn/pristine/42/423c91a747d0f3570fb0d63199c9adcbe6baef1d.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

328
_browser/.svn/pristine/49/49a137f4f026b72e9ba4af3fd546fe8baff34c09.svn-base

@ -1,328 +0,0 @@
---
title: Tour of a Blockstack application
description: Walk through creating a basic Todo application with Blockstack. Learn about Sign In flow and Gaia storage.
image: /images/article-photos/chalkboard.jpg
youtube: https://www.youtube.com/embed/oyvg-h0obFw
---
In this tutorial, you build the code for and run a single-page application (SPA)
with Blockstack and Vue.js. Once the application is running, you take a tour
through the applications' Blockstack functionality. You'll learn how it manages
authentiation using a Blockstack ID and how it stores information associated
with that ID using Blockstack Storage (Gaia).
## Prerequisites
Make sure you have [created at least one Blockstack ID](ids-introduction#create-an-initial-blockstack-id). You'll use this ID to Finteract with the Todo application.
The applicaton code relies on both the `npm` and the `yarn` package managers.
Before you begin, verify you have these tools `npm` using the `which` command to
verify.
```bash
$ which npm
/usr/local/bin/npm
$ which yarn
/usr/local/bin/yarn
```
[Install npm](https://www.npmjs.com/get-npm), [install
yarn](https://yarnpkg.com/lang/en/docs/install/#mac-stable), or both as needed. You
While it stands alone, this tour does on the information from the [Hello
Blockstack tutorial](hello-blockstack). If you haven't worked through that
tutorial, you may want to do that before continuing.
## Install the applicaton code and retrieve the dependencies
You can clone the source code with `git` or [download and unzip the code from
the
repository](https://github.com/blockstack/blockstack-todos/archive/master.zip).
These instructions assume you are cloning.
1. Install the code by cloning it.
```
$ git clone git@github.com:blockstack/blockstack-todos.git
```
2. Change to directory to the root of the code.
```
$ cd blockstack-todos
```
2. Use yarn to install the dependencies.
```
$ yarn install
yarn install v1.9.2
info No lockfile found.
...
[4/5] 🔗 Linking dependencies...
[5/5] 📃 Building fresh packages...
success Saved lockfile.
✨ Done in 19.90s.
```
## Understand the important application files
The Todo application has a basic Vue.js structure. There are several configuration files but the central programming files are in the `src` directory:
| File | Description |
|-----------------|-------------|
| `main.js` | Application initialization. |
| `App.vue ` | Code for handling the `authResponse`. |
| `Landing.vue ` | Code for the initial sign on page. |
| `Dashboard.vue` | Application data storage and user sign out. |
The example application runs in a node server on your local host. In the next section, you start the application and interact with it.
1. Start the application.
```
$ npm run start
```
You should see a simple application:
![](images/todo-sign-in.png)
2. Choose **Sign In with Blockstack**.
## Understand the sign in process
At startup, the Todo application detects whether the user has the Blockstack client edition
installed or not. This is done automatically by the Blockstack API, more
about this later. What the authenticator displays depends on which whether the user has installed the Blockstack Authenticator client edition or not.
| Client edition installed | Not installed |
|------------------|-----------------------------------|
| ![](images/login.gif) | ![](images/login-choice.png)|
If the user was logged into the Blockstack authenticator (web or client) but
did not reset it, the web application to use the current identity:
![](images/login-no-auth.png)
If the user chooses **Deny**, the Blockstack authenticator opens but the user
is not logged into the sample application.
![](images/windows-browser.png)
If the login to the application is successful, the user is presented with the application:
![](images/todo-app.png)
Clicking the **Sign In With Blockstack** button brings up a modal that prompts
you to use an existing ID's session, create a new ID, or reset the browser with
another ID. When Blockstack is provided an ID, it generates an _ephemeral key_
within the application. An ephemeral key is generated for each execution of a
key establishment process. This key is just used for the particular instance of
the application, in this case to sign a **Sign In** request.
Blockstack also generates a public key token which is sent to the authenticator
as an `authRequest` from the authenticator to your local blockstack-core node.
The signed authentication request is sent to Blockstack through a JSON Web
Token. The JWT is passed in via a URL query string in the `authRequest`
parameter:
`https://browser.blockstack.org/auth?authRequest=j902120cn829n1jnvoa...`. To
decode the token and see what information it holds:
1. Copy the `authRequest` string from the URL.
2. Navigate to [jwt.io](http://jwt.io/).
3. Paste the full token there.
The output should look similar to below:
```json
{
"jti": "3i96e3ad-0626-4e32-a316-b243154212e2",
"iat": 1533136622,
"exp": 1533140228,
"iss": "did:btc-addr:1Nh8oQTunbEQWjrL666HBx2qMc81puLmMt",
"public_keys": [
"0362173da080c6e1dec0653fa9a3eff5f5660546e387ce6c24u04a90c2fe1fdu73"
],
"domain_name": "http://localhost:8080",
"manifest_uri": "http://localhost:8080/manifest.json",
"redirect_uri": "http://localhost:8080/",
"version": "1.2.0",
"do_not_include_profile": true,
"supports_hub_url": true,
"scopes": [
"store_write"
]
}
```
>**Note**:
> 1. The `iss` property is a decentralized identifier or `did`. This identifies you and your name to the application. The specific `did` is a `btc-addr`.
> 2. The Blockstack JWT implementation is different from other implementations because of the underlying cryptography we employ. There are libraries in [Javascript](https://github.com/blockstack/jsontokens-js) and [Ruby](https://github.com/blockstack/ruby-jwt-blockstack) available on the Blockstack Github to allow you to work with these tokens.
When the blockstack-core receives the `authRequest`, it generates a session token and
returns an authentication response to the application. This response is similar
to the `authRequest` above in that the `authResponse` includes a private key
intended only for the application. This allows the application to encrypt data
on your personal Blockstack storage.
You are now logged into the Todo application!
## Undder the covers in the sign in code
Now, go to the underlying `blockstack-todo` code you cloned or downloaded. Sign
in and sign out is handled in each of these files:
| File | Description |
|-----------------|-------------|
| `App.vue ` | Handles the `authResponse`. |
| `Landing.vue ` | Generates the `authRequest`. |
| `Dashboard.vue` | Handles sign out. |
The `src/components/Landing.vue` code calls a [`redirectToSignIn()`](https://blockstack.github.io/blockstack.js#redirectToSignIn) function which generates the `authRequest` and redirects the user to the Blockstack authenticator:
```js
signIn () {
const blockstack = this.blockstack
blockstack.redirectToSignIn()
}
```
Once the user authenticates, the application handles the `authResponse` in the `src/App.vue` file. :
```js
if (blockstack.isUserSignedIn()) {
this.user = blockstack.loadUserData().profile
} else if (blockstack.isSignInPending()) {
blockstack.handlePendingSignIn()
.then((userData) => {
window.location = window.location.origin
})
}
```
If [`blockstack.isUserSignedIn()`](https://blockstack.github.io/blockstack.js/#isusersignedin) is true, the user was previously signed in so Blockstack pulls the data from the browser and uses it in our application. If the check on [`blockstack.isSignInPending()`](https://blockstack.github.io/blockstack.js/#issigninpending) is true, a previous `authResponse` was sent to the application but hasn't been processed yet. The `handlePendingSignIn()` function processes any pending sign in.
Signout is handled in `src/components/Dashboard.vue`.
```js
signOut () {
this.blockstack.signUserOut(window.location.href)
}
```
The method allows the application creator to decide where to redirect the user upon Sign Out:
## Working with the application
Now trying adding a few todos using the application. For example, try making a list of applications you want to see built on top of Blockstack:
![](images/make-a-list.png)
Each list is immediately stored in the Gaia Hub linked to your Blockstack ID.
For more information about the Gaia hub, see the [hub
repository](https://github.com/blockstack/gaia). You can fetch the `todos.json`
file you just added by opening the Javascript console and running the following
command:
```Javascript
blockstack.getFile("todos.json", { decrypt: true }).then((file) => {console.log(file)})
```
You should see a JSON with the todos you just added:
```json
[
{
"id":2,
"text":"Software package manager secured by the blockchain",
"completed":false
},
{
"id":1,
"text":"Mutable torrents with human readable names",
"completed":false
},
{
"id":0,
"text":"Decentralized twitter",
"completed":false
}
]
```
Now, add another todo and check it off. When you fetch the newly generated file
using the Javascript console it will reflect the change look for `"completed":true`:
```json
[
{
"id":3,
"text":"Blockstack Todo",
"completed":true
},
{
"id":2,
"text":"Software package manager secured by the blockchain",
"completed":false
},
...
]
```
Now that you have seen the application in action, dig into how it works.
## Implementing storage
Now, go to the underlying `blockstack-todo` code you cloned or downloaded. The
application interactions with your Gaia Hub originate in the
`src/components/Dashboard.vue` file. First lets see where the changes to the
Todos are processed:
```js
todos: {
handler: function (todos) {
const blockstack = this.blockstack
// encryption is now enabled by default
return blockstack.putFile(STORAGE_FILE, JSON.stringify(todos))
},
deep: true
}
```
Tje `todos` JSON object is passed in and the [`blockstack.putFile()`](https://blockstack.github.io/blockstack.js/#putfile) method to store it in our Gaia Hub.
The code needs to read the Todo items from the storage with the [`blockstack.getFile()`](https://blockstack.github.io/blockstack.js/#getfile) method which returns a promise:
```js
fetchData () {
const blockstack = this.blockstack
blockstack.getFile(STORAGE_FILE) // decryption is enabled by default
.then((todosText) => {
var todos = JSON.parse(todosText || '[]')
todos.forEach(function (todo, index) {
todo.id = index
})
this.uidCount = todos.length
this.todos = todos
})
},
```
The `todos` data is retrieved from the promise.
## Summary
You now have everything you need to construct complex applications complete with authentication and storage on the Decentralized Internet. Why not try coding [a sample application that accesses multiple profiles](multi-player-storage.md).
If you would like to explore the Blockstack APIs, you can visit the [Blockstack Core API](https://core.blockstack.org/) documentation or the [Blockstack JS API](https://blockstack.github.io/blockstack.js).
Go forth and build!

BIN
_browser/.svn/pristine/55/5500a797259a620714f1c576c579f117982590db.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

288
_browser/.svn/pristine/63/630ab4b5cbd3ff99dde5761ac5f475eb39dc3c9b.svn-base

@ -1,288 +0,0 @@
---
layout: usenew
permalink: /:collection/:path.html
---
# Use the Blockstack Browser
{:.no_toc}
The Blockstack Browser gives users the ability to explore and use the
decentralized applications (dapps). The decentralized applications are a new way
to interact with the internet. Dapps give users control of their data. Data
about them personally, name, birthdate, phone number and data about what they do
such as visiting a website or buying an item.
* TOC
{:toc}
## Understand the Blockstack Browser
Through the Blockstack browser application you can create an identity. An identity
represents you as you interact with others through Dapps. The Blockstack
Browser is itself, a simple Dapp. It allows you to:
* create one or more identities
* send and receive bitcoin
* manage the storage of your profile and application data
* find and launch Dapps
There are editorions of the Blockstack Browser, the web edition is an
application you access through your web browser by simply [visit the
applications' address](https://browser.blockstack.org/) in your computer's
browser. You can also install the browser as a client application on your
computer.
If all you want to do is create, manage, and fund an identity and then interact
with Dapps, you can simply use the web edition. If you have concerns about net
censorship, hightened security concerns, or develop a Dapp yourself, you may
want to download and install the browser's client edition.
## Using the Browser on public computers
Before you use the web application, it is important to note that once you log
into the application with the brower, your session does not expire until you
choose **Settings > RESET BROWSER**. For this reason, you should be careful
when using the browser on public computers.
If you are in a library, for example, and log into the browser, simply
closing the tab or even rebooting the computer does not log you out. Instead,
you should be sure to choose **Settings > RESET BROWSER** before leaving the web
application.
For more informatin about your identity and the browser, see [Get and use a Blockstack IDs](ids-introduction).
## Install the client edition
Remember, for most users the Blockstack Browser web application should
suffice. You only need to install the client if you have additional, advanced
concerns about Internet or identity. Though not required, some Dapp developrs
may find it useful to install the client edition.
The Blockstack Browser installer is a _multiple-context_ installer. If you
run it as a user, the installation is avalable only for that user. If you
install as administrator, the installation installs for all users. To find an
installer for your operating system, visit [the Blockstack install
page](https://blockstack.org/install).
### On Mac
Installation requires that you have macOS High Sierra 10.12 or higher. Do the following to install:
1. Download the OSX installer from [the browser installation page](https://blockstack.org/install).
2. Double-click the downloaded DMG file to launch the installer.
![](images/ubuntu-browser.png)
3. Drag the Blockstack.app to the `Applications` folder.
4. Double-click the Blockstack.app to launch it.
The system displays a notice about opening the file:
![](images/dmg-notice.png)
5. Choose **Open**.
The system opens your default browser with the Blockstack Browser
application, running from your machine (localhost). You'll also see the
Blockstack icon in your machine's
![](images/browser-on-mac.png)
If you have loaded an identity already via the Blockstack web application,
you are already logged into the local application:
![](images/browser-on-mac-1.png)
### On Windows
Installation requires that you have Windows 10 or higher. Do the following to
install:
1. Download the Windows installer from from [the browser installation page](https://blockstack.org/install).
2. Double-click the installer package to launch it.
![](images/windows-installer.png)
3. Open the Wiindows **Start** menu and click on the recently added **Blockstack Browser**.
![](images/windows-start.png)
The system displays a Windows Security Alert.
![](images/windows-security.png)
4. Choose to **Allow access**.
The system opens in the Blockstack Browser application.
![](images/windows-browser.png)
### On Linux
The Blockstack installation on Linux requires Docker. Before installing
Blockstack, [install the version of Docker appropriate for your operating system](https://docs.docker.com/install/).
>**Note**: The Blockstack script used in this procedure runs `docker` commands. Depending on how you installed and configure Dockered on your system, it may or may not be necessary to have `root` or `sudo` privileges. For this reason, the commands below show the use of `sudo` when interacting with the script or the `docker` executable. If your installation allows running Docker with lower privileges, you can omit it.
1. Download the Linux installer from from [the browser installation page](https://blockstack.org/install).
This downloads a `Blockstack-for-Linux-v0.30.0.sh` script to your local drive.
2. Open a terminal and navigate to the directory containing the downloaded script.
When the script downloads, it is not executable.
3. Set the executable bit on the file.
```bash
$ chmod u+x Blockstack-for-Linux-v0.309.0.0.sh
```
4. Enter the command without any arguments to see the available subcommands.
```bash
$ sudo ./Blockstack-for-Linux-v0.309.0.0.sh
blockstack docker launcher commands:
Install-protocol-handler -> install a protocol handler for blockstack:// links
...
```
5. Use the script to `pull` the Blockstack Docker images you need.
```bash
$ sudo ./Blockstack-for-Linux-v0.309.0.0.sh pull
```
Depending on your network speed, this can take some time.
7. Use the `docker image ls` command to confirm you have the image.
```bash
$ sudo docker image Is
REPOSITORY TAG IMAGE ID CREATED
quay.io/blockstack/blockstack-browser v0.30.0 ad05fd844f59 2 days ago
```
8. Install the protocol handler
```bash
$ sudo ./Blockstack-for-Linux-vO.30.0.sh install-protocol-handler

Registering protocol handler
```
9. Start the Blockstack containers.
```bash
$ sudo ./Blockstack-for-Linux-vO.30.0.sh start
c3092592e59abe3559fdb49d070a7aa5e99165c7d9f2flla20ecaf4e0dfc2f46

cd92f61ae473d54398da987f5023f5462b29c03f08584ebb3c9fIbb4cd790c69

Registering protocol handler
```
The system launches the Blockstack Browser application for you.
![](images/ubuntu-browser.png)
Until you stop the Blockstack containers, the application will continue to run
on your system. To display the status of the Blockstack containers, you can use
the `docker container ls` command.
{% raw %}
```bash
$ sudo docker container ls --format '{{.ID}}\t{{.Image}}\t{{.Status}}\t{{.Ports}}\t{{.Names}}'
```
{% endraw %}
Use `./Blockstack-for-Linux-vO.30.0.sh stop` to stop the Blockstack Browser and its containers.
## Uninstall the browser
If you installed the browser using an installer, follow the instructions for
your operating system.
### On Mac
1. Quit the Blockstack application if it is running.
![](images/quit-blockstack.png)
2. Check if you have a Blockstack device and eject it if you do.
![](images/eject-blockstack.png)
3. Use the Finder to open the **Applications** folder.
4. Locate the Blockstack application.
5. Open your `Applications` folder and locate the **Blockstack.app**.
6. Drag the appliation to the trash.
7. Delete the `/Users/USERNAME/Library/Application Support/Blockstack` folder.
From the command line:
```bash
$ rm -r /Users/moxiegirl/Library/Application\ Support/Blockstack
```
### On Windows
1. Open the **Start** menu.
2. Click **Settings > System**.
3. Open for the **Apps & features** item.
![](images/eject-blockstack.png)
4. Locate the **Blockstack Browser** and choose **Uninstall**.
![](images/browser-uninstall.png)
### On Linux
Your Blockstack instalaltion relies on Docker containers and their associated
images. It also includes a supporting protocol handler you must remove. If you
installed Docker so that you can run Blockstack, you can uninstall Docker as well,
but that is not explained here.
Do the following to uninstall Blockstack:
1. Stop and remove the Docker containers if they are running.
```bash
$ sudo ./Blockstack-for-Linux-vO.30.0.sh stop
stopping the running blockstack-browser containers
69a686799d4f
56fc6189ff97
69a686799d4f
56fc6189ff97
```
2. Remove the associated Blockstack images.
```bash
$ sudo docker image ls
REPOSITORY TAG IMAGE ID CREATED
quay.io/blockstack/blockstack-browser v0.30.0 ad05fd844f59 3 days ago
$ sudo docker image rm ad05fd844f59

Untagged : quay.io/blockstack/blockstack- browser :vO.30.0
Untagged: quay.io/blockstack/blockstack-browser@sha256:b20c9514c56b99398fd4946af39e7537b807e85694943ac3b8807dlb3625833b
Deleted: Sha256:ad05fd844f5948blee06a0a09228df946478393c0a7588cbc65dlb8817f5b34e
Deleted: Sha256:7c3d0043f2ba01cf285f3fe09701b086c349b6380c2e42f25b31ac65c6626ec8
Deleted: sha256:54ea2aa7d7d000e7483f299eeca9e5466fa86231f4cd4cld3c3096d97e61c5df
Deleted: sha256:38e61054355adefc3c2de031462114a9946cfc0e44444a38a27d0f115aba0da2
....
```
3. Use the script to remove the protocol handler
```bash
$ sudo ./Blockstack-for-Linux-vO.30.0.sh remove-protocol-handler
```
4. Delete the script.
```bash
$ rm Blockstack-for-Linux-vO.30.0.sh
```

BIN
_browser/.svn/pristine/63/6326880dd17c45162090e3bb4902adefbccfcb15.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

812
_browser/.svn/pristine/64/6462fdc5109daa02e29fbf38f8602f7425387275.svn-base

@ -1,812 +0,0 @@
---
layout: learn
permalink: /:collection/:path.html
---
# Blockstack Storage Tutorial
{:.no_toc}
In this tutorial, you build a micro-blogging application using multi-player Gaia
storage. Gaia is Blockstack's [decentralized high-performance storage
system](https://github.com/blockstack/gaia). The tutorial contains the following
topics:
* TOC
{:toc}
This tutorial does not teach you about authentication. That is covered in depth [in the hello-blockstack tutorial](hello-blockstack).
<!--TODO: authentication tutorial-->
<!--Strictly speaking not sure it is necessary here to send them out-->
## About this tutorial and the prerequisites you need
At minimum, Blockstack requires macOS High Sierra. This tutorial was written for
a user running macOS High Sierra 10.13.4. The application you build is a
React.js application that is completely decentralized and server-less. While
not strictly required to follow along, basic familiarity with React.js is
helpful.
When complete, the app is capable of the following:
- authenticating users using Blockstack
- posting new statuses
- displaying statuses in the user profile
- looking up the profiles and statuses of other users
The basic identity and storage services are provided by `blockstack.js`. To test
the application, you need to have already [registered a Blockstack ID](ids-introduction).
The tutorial relies on the `npm` dependency manager. Before you begin, verify
you have installed `npm` using the `which` command.
```bash
$ which npm
/usr/local/bin/npm
```
If you don't find `npm` in your system, [install
it](https://www.npmjs.com/get-npm). Finally, if you get stuck at any point
while working on the tutorial, the completed [source code is available for
you](https://github.com/larrysalibra/publik) to check your work against.
## Use npm to install Yeoman and the Blockstack App Generator
You use `npm` to install Yeoman. Yeoman is a generic scaffolding system that
helps users rapidly start new projects and streamline the maintenance of
existing projects.
1. Install Yeoman.
```bash
npm install -g yo
```
2. Install the Blockstack application generator.
```bash
npm install -g generator-blockstack
```
<!-- Need to find out if user is required to have React installed before running Yeoman. Doesn't appear to be the case. -->
## Generate and launch the public application
In this section, you build an initial React.js application called Publik.
1. Create a the `publik` directory.
```bash
mkdir publik
```
2. Change into your new directory.
```bash
cd publik
```
3. Use Yeoman and the Blockstack application generator to create your initial `publik` application.
```bash
yo blockstack:react
```
You should see several interactive prompts.
```bash
$ yo blockstack:react
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No
_-----_ ╭──────────────────────────╮
| | │ Welcome to the │
|--(o)--| │ Blockstack app │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? Are you ready to build a Blockstack app in React? (Y/n)
```
4. Respond to the prompts to populate the initial app.
After the process completes successfully, you see a prompt similar to the following:
```bash
[fsevents] Success:
"/Users/theuser/repos/publik/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node"
is installed via remote npm notice created a lockfile as package-lock.json.
You should commit this file. added 1060 packages in 26.901s
```
5. Run the initial application.
```bash
npm start
```
The system prompts you to accept incoming connections.
![Network Connection](./images/network-connections.gif)
6. Choose **Allow**.
7. Open your browser to `http://localhost:8080`.
You should see a simple React app.
![](images/initial-app.gif)
8. Choose **Sign In with Blockstack**.
The application tells you it will **Read your basic info**.
![](images/login.png)
Leave your new application running and move onto the next section.
## Add the `publish_data` scope to sign in requests
Every app that uses Gaia storage must add itself to the user's `profile.json`
file. The Blockstack browser does this automatically when the `publish_data`
scope is requested during authentication. For this application, the user files
stored on Gaia are made visible to others via the `apps` property in the user's
`profile.json` file.
Modify your authentication request to include the `publish_data` scope.
1. Open `src/components/App.jsx` file.
2. Locate the `handleSignIn` handler method.
```javascript
handleSignIn(e) {
e.preventDefault();
redirectToSignIn();
}
```
2. Modify the method to this:
```javascript
handleSignIn(e) {
e.preventDefault();
const origin = window.location.origin
redirectToSignIn(origin, origin + '/manifest.json', ['store_write', 'publish_data'])
}
```
By default, authentication requests include the `store_write` scope which
enables storage. This is what allows you to store information to Gaia.
3. Save your changes.
4. Go back to your app at `http://localhost:8080/`.
5. Log out and sign in again.
The authentication request now prompts the user for permission to **Publish
data stored for the app**.
![](images/publish-data-perm.png)
## Understand Gaia storage methods
Once you authenticate a user with `store_write` and `publish_data`, you can
begin to manage data for your users. Blockstack JS provides two methods
`getFile()` and `putFile()` for interacting with Gaia storage. The storage
methods support all file types. This means you can store SQL, Markdown, JSON, or
even a custom format.
You can create a meaningful and complex data layer using these two methods.
Before creating an application, consider fundamental data architecture and make
some decisions about how you’re modeling data. For example, consider building a
simple grocery list app. A user should be able to create, read, update, and
delete grocery lists.
A single file collection stores items as an array nested inside each grocery
list:
```js
// grocerylists.json
{
"3255": {
"items": [
"1 Head of Lettuce",
"Haralson apples"
]
},
// ...more lists with items
}
```
This is conceptually the simplest way to manage grocery lists. When you read a
`/grocerylists.json` file with `getFile()`, you get back one or more grocery
lists and their items. When you write a single list, the `putFile()` method
overwrites the entire list. So, a write operation for a new or updated grocery
list must submit all existings lists as well.
Further, because this runs on the client where anything can go wrong. If the
client-side code encounters a parsing error with a user-input value and you
could overwrite the entire file with:
`line 6: Parsing Error: Unexpected token.`
Further, a single file makes pagination impossible and if your app stores a
single file for all list you have less control over file permissions. To avoid
these issues, you can create an index file that stores an array of IDs. These
IDs point to a name of another file in a `grocerylists` folder.
![](images/multiple-lists.png)
This design allows you to get only the files you need and avoid accidentally
overwriting all lists. Further, you’re only updating the index file when you add
or remove a grocery list; updating a list has no impact.
## Add support for user status submission and lookup
In this step, you add three `blockstack.js` methods that support posting of "statuses". These are the `putFile()`, `getFile()`, and `lookupProfile()` methods.
1. Open the `src/components/Profile.jsx` file.
2. Expand the `import from blockstack` statement with data methods.
The `Person` object holds a Blockstack profile. Add `putFile`, `getFile`,
and `lookupProfile` after `Person`.
When you are done, the import statement should look like the following:
```javascript
import {
isSignInPending,
loadUserData,
Person,
getFile,
putFile,
lookupProfile
} from 'blockstack';
```
3. Replace the `constructor()` initial state so that it holds the key properties required by the app.
This code constructs a Blockstack `Person` object to hold the profile. Your constructor should look like this:
```javascript
constructor(props) {
super(props);
this.state = {
person: {
name() {
return 'Anonymous';
},
avatarUrl() {
return avatarFallbackImage;
},
},
username: "",
newStatus: "",
statuses: [],
statusIndex: 0,
isLoading: false
};
}
```
4. Locate the `render()` method.
5. Modify the `render()` method to add a text input and submit button to the application.
The following code echos the `person.name` and `person.avatarURL`
properties from the profile on the display:
```javascript
render() {
const { handleSignOut } = this.props;
const { person } = this.state;
const { username } = this.state;
return (
!isSignInPending() && person ?
<div className="container">
<div className="row">
<div className="col-md-offset-3 col-md-6">
<div className="col-md-12">
<div className="avatar-section">
<img
src={ person.avatarUrl() ? person.avatarUrl() : avatarFallbackImage }
className="img-rounded avatar"
id="avatar-image"
/>
<div className="username">
<h1>
<span id="heading-name">{ person.name() ? person.name()
: 'Nameless Person' }</span>
</h1>
<span>{username}</span>
<span>
&nbsp;|&nbsp;
<a onClick={ handleSignOut.bind(this) }>(Logout)</a>
</span>
</div>
</div>
</div>
<div className="new-status">
<div className="col-md-12">
<textarea className="input-status"
value={this.state.newStatus}
onChange={e => this.handleNewStatusChange(e)}
placeholder="Enter a status"
/>
</div>
<div className="col-md-12">
<button
className="btn btn-primary btn-lg"
onClick={e => this.handleNewStatusSubmit(e)}
>
Submit
</button>
</div>
</div>
</div>
</div>
</div> : null
);
}
```
This code allows the application to post statuses. It also displays the
user's Blockstack ID. To display this, your app must extract the ID from the
user profile data.
6. Locate the `componentWillMount()` method.
7. Add the `username` property below the `person` property.
You'll use the Blockstack `loadUserData()` method to access the `username`.
```javascript
componentWillMount() {
this.setState({
person: new Person(loadUserData().profile),
username: loadUserData().username
});
}
```
7. Add two methods to handle the status input events:
```javascript
handleNewStatusChange(event) {
this.setState({newStatus: event.target.value})
}
handleNewStatusSubmit(event) {
this.saveNewStatus(this.state.newStatus)
this.setState({
newStatus: ""
})
}
```
8. Add a `saveNewStatus()` method to save the new statuses.
```javascript
saveNewStatus(statusText) {
let statuses = this.state.statuses
let status = {
id: this.state.statusIndex++,
text: statusText.trim(),
created_at: Date.now()
}
statuses.unshift(status)
const options = { encrypt: false }
putFile('statuses.json', JSON.stringify(statuses), options)
.then(() => {
this.setState({
statuses: statuses
})
})
}
```
9. Save the `Profile.jsk` file.
After the application compiles successfully, your application should appears as follows:
![](images/display-complete.png)
10. Enter your status in the text box and press the **Submit** button.
At this point, nothing is blogged. In the next section you add code to display
the statuses back to the user as a blog entry.
## Fetch and display statuses
Update `Profile.jsx` again.
1. Go back to the `render()` method.
2. Locate the `<div className="new-status">` containing the text input and **Submit** button.
3. Right after this opening `div` element, add this block.
```javascript
<div className="col-md-12 statuses">
{this.state.isLoading && <span>Loading...</span>}
{this.state.statuses.map((status) => (
<div className="status" key={status.id}>
{status.text}
</div>
)
)}
</div>
```
This loads existing state. Your code needs to fetch statuses on page load.
4. Add a new method called `fetchData()` after the `statuses.unshift(status)` section.
```javascript
fetchData() {
this.setState({ isLoading: true })
const options = { decrypt: false }
getFile('statuses.json', options)
.then((file) => {
var statuses = JSON.parse(file || '[]')
this.setState({
person: new Person(loadUserData().profile),
username: loadUserData().username,
statusIndex: statuses.length,
statuses: statuses,
})
})
.finally(() => {
this.setState({ isLoading: false })
})
}
```
5. Call `fetchData()` from the `componentDidMount()` method
```javascript
componentDidMount() {
this.fetchData()
}
```
6. Save the file.
After the application compiles successfully, users are able to **Submit**
multiple statuses and review them in the app.
![](images/saving-status.png)
## Change the style
1. Edit the `src/styles/style.css` file.
2. Replace the content with the following:
```css
/* Globals */
a,a:focus,a:hover{color:#fff;}
html,body{height:100%;text-align:center;background-color:#191b22;}
body{color:#fff}
.hide{display:none;}
.landing-heading{font-family:'Lato',Sans-Serif;font-weight:400;}
/* Buttons */
.btn{font-family:'Lato',Sans-Serif;padding:0.5625rem 2.5rem;font-size:0.8125rem;font-weight:400;line-height:1.75rem;border-radius:0!important;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.btn-lg{font-size:1.5rem;padding:0.6875rem 3.4375rem;line-height:2.5rem;}
.btn:focus,.btn:active:focus,.btn.active:focus{outline:none;}
.btn-primary{color:#fff;border:1px solid #2C96FF;background-color:#2C96FF;}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{color:#fff;border:1px solid #1a6ec0;background-color:#1a6ec0;}
/* Avatar */
.avatar{width:100px;height:100px;}
.avatar-section{margin-bottom:25px;display:flex;text-align:left;}
.username{margin-left:20px;}
/* Scaffolding */
.site-wrapper{display:table;width:100%;height:100vh;min-height:100%;}
.site-wrapper-inner{display:flex;flex-direction:column;justify-content:center;margin-right:auto;margin-left:auto;width:100%;height:100vh;}
.panel-authed{padding:0 0 0 0;}
/* Home button */
.btn-home-hello{position:absolute;font-family:'Source Code Pro',monospace;font-size:11px;font-weight:400;color:rgba(255,255,255,0.85);top:15px;left:15px;padding:3px 20px;background-color:rgba(255,255,255,0.15);border-radius:6px;-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);-moz-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);}
/* Input */
input, textarea{color:#000;padding:10px;}
.input-status{width:100%;height:70px;border-radius:6px;}
.new-status{text-align:right;}
/* Statuses */
.statuses{padding-top:30px;}
.status{margin:15px 0px;padding:20px;background-color:#2e2e2e;border-radius:6px}
```
3. Save and close the `src/styles/style.css` file.
After the application compiles, you should see the following:
![Multi-reader storage authentication](images/multi-player-storage-status.png)
At this point, you have a basic micro-blogging app that users can use to post and
view statuses. However, there's no way to view other users' statuses. You'll add
that in the next section.
## Lookup user profiles
Let's now modify the `Profile.jsx` file to display profiles of other users. You'll
be using the `lookupProfile()` method that you added to the `import` statement
earlier. `lookupProfile()` takes a single parameter that is the Blockstack ID of
the profile and returns a profile object.
### Add a new route
Make some changes to the routing structure of your app so that users can view
other users' profiles by visiting `http://localhost:8080/other_user.id`
1. Make sure you are in the root of your `publik` project.
2. Install `react-router`:
```bash
npm install --save react-router-dom
```
3. Edit `src/index.js` file.
4. Add an `import` to the file at the top:
```javascript
import { BrowserRouter } from 'react-router-dom'
```
5. Change the `ReactDOM.render()` method in `src/index.js` to:
```javascript
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));
```
6. Save and close the `src/index.js` file.
7. Edit the `src/components/App.jsx` file.
8. Add the new route by importing the `Switch` and `Route` components from `react-router-dom`:
```javascript
import { Switch, Route } from 'react-router-dom'
```
9. Locate this line below in the `render()` method:
```javascript
: <Profile handleSignOut={ this.handleSignOut } />
```
10. Replace it with the following:
```javascript
:
<Switch>
<Route
path='/:username?'
render={
routeProps => <Profile handleSignOut={ this.handleSignOut } {...routeProps} />
}
/>
</Switch>
```
This sets up a route and captures the route parameter the app will use as the profile lookup username.
11. Save and close the the `src/components/App.jsx` file.
### Add a rule to process URL paths with . (dot)
You also need to add a rule to your webpack config so that you can properly
process URL paths that contain the `.` (dot) character for example,
`http://localhost:8080/other_user.id`
**NOTE**: In a production app, you must ensure the web server is configured to handle this.
1. Open `webpack.config.js` in the root project directory and locate the following line:
```javascript
historyApiFallback: true,
```
2. Replace it with this:
```javascript
historyApiFallback: {
disableDotRule: true
},
```
You will need to run `npm start` again for this change to take effect. Don't
worry, there is a later step for that to remind you.
3. Save and close the `webpack.config.js` file.
4. Edit the `src/components/Profile.jsx` file.
5. Add a single method that determines if the app is viewing the local user's profile or another user's profile.
```javascript
isLocal() {
return this.props.match.params.username ? false : true
}
```
You use `isLocal()` to check if the user is viewing the local user profile or another user's profile. If it's the local user profile, the app runs the `getFile()` function you added in an earlier step. Otherwise, the app looks up the profile belonging to the `username` using the `lookupProfile()` method.
6. Modify the `fetchData()` method like so:
```javascript
fetchData() {
this.setState({ isLoading: true })
if (this.isLocal()) {
const options = { decrypt: false }
getFile('statuses.json', options)
.then((file) => {
var statuses = JSON.parse(file || '[]')
this.setState({
person: new Person(loadUserData().profile),
username: loadUserData().username,
statusIndex: statuses.length,
statuses: statuses,
})
})
.finally(() => {
this.setState({ isLoading: false })
})
} else {
const username = this.props.match.params.username
lookupProfile(username)
.then((profile) => {
this.setState({
person: new Person(profile),
username: username
})
})
.catch((error) => {
console.log('could not resolve profile')
})
}
}
```
**NOTE**: For `https` deployments, the default Blockstack Core API endpoint for name
lookups should be changed to point to a core API served over `https`.
Otherwise, name lookups fail due to browsers blocking mixed content.
Refer to the [Blockstack.js
documentation](http://blockstack.github.io/blockstack.js/#getfile) for
details.
7. Add the following block to `fetchData()` right after the call to `lookupProfile(username)... catch((error)=>{..}` block:
```javascript
const options = { username: username, decrypt: false }
getFile('statuses.json', options)
.then((file) => {
var statuses = JSON.parse(file || '[]')
this.setState({
statusIndex: statuses.length,
statuses: statuses
})
})
.catch((error) => {
console.log('could not fetch statuses')
})
.finally(() => {
this.setState({ isLoading: false })
})
```
This fetches the user statuses.
Finally, you must conditionally render the logout button, status input textbox, and submit button so they don't show up when viewing another user's profile.
8. Replace the `render()` method with the following:
```javascript
render() {
const { handleSignOut } = this.props;
const { person } = this.state;
const { username } = this.state;
return (
!isSignInPending() && person ?
<div className="container">
<div className="row">
<div className="col-md-offset-3 col-md-6">
<div className="col-md-12">
<div className="avatar-section">
<img
src={ person.avatarUrl() ? person.avatarUrl() : avatarFallbackImage }
className="img-rounded avatar"
id="avatar-image"
/>
<div className="username">
<h1>
<span id="heading-name">{ person.name() ? person.name()
: 'Nameless Person' }</span>
</h1>
<span>{username}</span>
{this.isLocal() &&
<span>
&nbsp;|&nbsp;
<a onClick={ handleSignOut.bind(this) }>(Logout)</a>
</span>
}
</div>
</div>
</div>
{this.isLocal() &&
<div className="new-status">
<div className="col-md-12">
<textarea className="input-status"
value={this.state.newStatus}
onChange={e => this.handleNewStatusChange(e)}
placeholder="What's on your mind?"
/>
</div>
<div className="col-md-12 text-right">
<button
className="btn btn-primary btn-lg"
onClick={e => this.handleNewStatusSubmit(e)}
>
Submit
</button>
</div>
</div>
}
<div className="col-md-12 statuses">
{this.state.isLoading && <span>Loading...</span>}
{this.state.statuses.map((status) => (
<div className="status" key={status.id}>
{status.text}
</div>
)
)}
</div>
</div>
</div>
</div> : null
);
}
```
### This checks to ensure that users are viewing their own profile, by wrapping the **Logout** button and inputs with the `{isLocal() && ...}` condition.
### Put it all together
1. Stop the running application by sending a CTL-C.
2. Restart the application so that the disabling of the `.` (dot) rule takes effect.
```bash
npm start
```
3. Point your browser to `http://localhost:8080/your_blockstack.id` to see the final application.
## Wrapping up
Congratulations, you are all done! We hope you've enjoyed learning a bit more
about Blockstack. To use a working version of the app go
[here](http://publik.ykliao.com).

812
_browser/.svn/pristine/65/65ae54036b4f6a2a5c29057ecf62cd91b4b3f506.svn-base

@ -1,812 +0,0 @@
---
layout: learn
permalink: /:collection/:path.html
---
# Manage Data with Gaia
{:.no_toc}
In this tutorial, you build a micro-blogging application using multi-player Gaia
storage. Gaia is Blockstack's [decentralized high-performance storage
system](https://github.com/blockstack/gaia). The tutorial contains the following
topics:
* TOC
{:toc}
This tutorial does not teach you about authentication. That is covered in depth [in the hello-blockstack tutorial](hello-blockstack.md).
<!--TODO: authentication tutorial-->
<!--Strictly speaking not sure it is necessary here to send them out-->
## About this tutorial and the prerequisites you need
At minimum, Blockstack requires macOS High Sierra. This tutorial was written for
a user running macOS High Sierra 10.13.4. The application you build is a
React.js application that is completely decentralized and server-less. While
not strictly required to follow along, basic familiarity with React.js is
helpful.
When complete, the app is capable of the following:
- authenticating users using Blockstack
- posting new statuses
- displaying statuses in the user profile
- looking up the profiles and statuses of other users
The basic identity and storage services are provided by `blockstack.js`. To test
the application, you need to have already [registered a Blockstack ID](ids-introduction.md).
The tutorial relies on the `npm` dependency manager. Before you begin, verify
you have installed `npm` using the `which` command.
```bash
$ which npm
/usr/local/bin/npm
```
If you don't find `npm` in your system, [install
it](https://www.npmjs.com/get-npm). Finally, if you get stuck at any point
while working on the tutorial, the completed [source code is available for
you](https://github.com/larrysalibra/publik) to check your work against.
## Use npm to install Yeoman and the Blockstack App Generator
You use `npm` to install Yeoman. Yeoman is a generic scaffolding system that
helps users rapidly start new projects and streamline the maintenance of
existing projects.
1. Install Yeoman.
```bash
npm install -g yo
```
2. Install the Blockstack application generator.
```bash
npm install -g generator-blockstack
```
<!-- Need to find out if user is required to have React installed before running Yeoman. Doesn't appear to be the case. -->
## Generate and launch the public application
In this section, you build an initial React.js application called Publik.
1. Create a the `publik` directory.
```bash
mkdir publik
```
2. Change into your new directory.
```bash
cd publik
```
3. Use Yeoman and the Blockstack application generator to create your initial `publik` application.
```bash
yo blockstack:react
```
You should see several interactive prompts.
```bash
$ yo blockstack:react
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No
_-----_ ╭──────────────────────────╮
| | │ Welcome to the │
|--(o)--| │ Blockstack app │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? Are you ready to build a Blockstack app in React? (Y/n)
```
4. Respond to the prompts to populate the initial app.
After the process completes successfully, you see a prompt similar to the following:
```bash
[fsevents] Success:
"/Users/theuser/repos/publik/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node"
is installed via remote npm notice created a lockfile as package-lock.json.
You should commit this file. added 1060 packages in 26.901s
```
5. Run the initial application.
```bash
npm start
```
The system prompts you to accept incoming connections.
![Network Connection](./images/network-connections.gif)
6. Choose **Allow**.
7. Open your browser to `http://localhost:8080`.
You should see a simple React app.
![](images/initial-app.gif)
8. Choose **Sign In with Blockstack**.
The application tells you it will **Read your basic info**.
![](images/login.png)
Leave your new application running and move onto the next section.
## Add the `publish_data` scope to sign in requests
Every app that uses Gaia storage must add itself to the user's `profile.json`
file. The Blockstack browser does this automatically when the `publish_data`
scope is requested during authentication. For this application, the user files
stored on Gaia are made visible to others via the `apps` property in the user's
`profile.json` file.
Modify your authentication request to include the `publish_data` scope.
1. Open `src/components/App.jsx` file.
2. Locate the `handleSignIn` handler method.
```javascript
handleSignIn(e) {
e.preventDefault();
redirectToSignIn();
}
```
2. Modify the method to this:
```javascript
handleSignIn(e) {
e.preventDefault();
const origin = window.location.origin
redirectToSignIn(origin, origin + '/manifest.json', ['store_write', 'publish_data'])
}
```
By default, authentication requests include the `store_write` scope which
enables storage. This is what allows you to store information to Gaia.
3. Save your changes.
4. Go back to your app at `http://localhost:8080/`.
5. Log out and sign in again.
The authentication request now prompts the user for permission to **Publish
data stored for the app**.
![](images/publish-data-perm.png)
## Understand Gaia storage methods
Once you authenticate a user with `store_write` and `publish_data`, you can
begin to manage data for your users. Blockstack JS provides two methods
`getFile()` and `putFile()` for interacting with Gaia storage. The storage
methods support all file types. This means you can store SQL, Markdown, JSON, or
even a custom format.
You can create a meaningful and complex data layer using these two methods.
Before creating an application, consider fundamental data architecture and make
some decisions about how you’re modeling data. For example, consider building a
simple grocery list app. A user should be able to create, read, update, and
delete grocery lists.
A single file collection stores items as an array nested inside each grocery
list:
```js
// grocerylists.json
{
"3255": {
"items": [
"1 Head of Lettuce",
"Haralson apples"
]
},
// ...more lists with items
}
```
This is conceptually the simplest way to manage grocery lists. When you read a
`/grocerylists.json` file with `getFile()`, you get back one or more grocery
lists and their items. When you write a single list, the `putFile()` method
overwrites the entire list. So, a write operation for a new or updated grocery
list must submit all existings lists as well.
Further, because this runs on the client where anything can go wrong. If the
client-side code encounters a parsing error with a user-input value and you
could overwrite the entire file with:
`line 6: Parsing Error: Unexpected token.`
Further, a single file makes pagination impossible and if your app stores a
single file for all list you have less control over file permissions. To avoid
these issues, you can create an index file that stores an array of IDs. These
IDs point to a name of another file in a `grocerylists` folder.
![](images/multiple-lists.png)
This design allows you to get only the files you need and avoid accidentally
overwriting all lists. Further, you’re only updating the index file when you add
or remove a grocery list; updating a list has no impact.
## Add support for user status submission and lookup
In this step, you add three `blockstack.js` methods that support posting of "statuses". These are the `putFile()`, `getFile()`, and `lookupProfile()` methods.
1. Open the `src/components/Profile.jsx` file.
2. Expand the `import from blockstack` statement with data methods.
The `Person` object holds a Blockstack profile. Add `putFile`, `getFile`,
and `lookupProfile` after `Person`.
When you are done, the import statement should look like the following:
```javascript
import {
isSignInPending,
loadUserData,
Person,
getFile,
putFile,
lookupProfile
} from 'blockstack';
```
3. Replace the `constructor()` initial state so that it holds the key properties required by the app.
This code constructs a Blockstack `Person` object to hold the profile. Your constructor should look like this:
```javascript
constructor(props) {
super(props);
this.state = {
person: {
name() {
return 'Anonymous';
},
avatarUrl() {
return avatarFallbackImage;
},
},
username: "",
newStatus: "",
statuses: [],
statusIndex: 0,
isLoading: false
};
}
```
4. Locate the `render()` method.
5. Modify the `render()` method to add a text input and submit button to the application.
The following code echos the `person.name` and `person.avatarURL`
properties from the profile on the display:
```javascript
render() {
const { handleSignOut } = this.props;
const { person } = this.state;
const { username } = this.state;
return (
!isSignInPending() && person ?
<div className="container">
<div className="row">
<div className="col-md-offset-3 col-md-6">
<div className="col-md-12">
<div className="avatar-section">
<img
src={ person.avatarUrl() ? person.avatarUrl() : avatarFallbackImage }
className="img-rounded avatar"
id="avatar-image"
/>
<div className="username">
<h1>
<span id="heading-name">{ person.name() ? person.name()
: 'Nameless Person' }</span>
</h1>
<span>{username}</span>
<span>
&nbsp;|&nbsp;
<a onClick={ handleSignOut.bind(this) }>(Logout)</a>
</span>
</div>
</div>
</div>
<div className="new-status">
<div className="col-md-12">
<textarea className="input-status"
value={this.state.newStatus}
onChange={e => this.handleNewStatusChange(e)}
placeholder="Enter a status"
/>
</div>
<div className="col-md-12">
<button
className="btn btn-primary btn-lg"
onClick={e => this.handleNewStatusSubmit(e)}
>
Submit
</button>
</div>
</div>
</div>
</div>
</div> : null
);
}
```
This code allows the application to post statuses. It also displays the
user's Blockstack ID. To display this, your app must extract the ID from the
user profile data.
6. Locate the `componentWillMount()` method.
7. Add the `username` property below the `person` property.
You'll use the Blockstack `loadUserData()` method to access the `username`.
```javascript
componentWillMount() {
this.setState({
person: new Person(loadUserData().profile),
username: loadUserData().username
});
}
```
7. Add two methods to handle the status input events:
```javascript
handleNewStatusChange(event) {
this.setState({newStatus: event.target.value})
}
handleNewStatusSubmit(event) {
this.saveNewStatus(this.state.newStatus)
this.setState({
newStatus: ""
})
}
```
8. Add a `saveNewStatus()` method to save the new statuses.
```javascript
saveNewStatus(statusText) {
let statuses = this.state.statuses
let status = {
id: this.state.statusIndex++,
text: statusText.trim(),
created_at: Date.now()
}
statuses.unshift(status)
const options = { encrypt: false }
putFile('statuses.json', JSON.stringify(statuses), options)
.then(() => {
this.setState({
statuses: statuses
})
})
}
```
9. Save the `Profile.jsk` file.
After the application compiles successfully, your application should appears as follows:
![](images/display-complete.png)
10. Enter your status in the text box and press the **Submit** button.
At this point, nothing is blogged. In the next section you add code to display
the statuses back to the user as a blog entry.
## Fetch and display statuses
Update `Profile.jsx` again.
1. Go back to the `render()` method.
2. Locate the `<div className="new-status">` containing the text input and **Submit** button.
3. Right after this opening `div` element, add this block.
```javascript
<div className="col-md-12 statuses">
{this.state.isLoading && <span>Loading...</span>}
{this.state.statuses.map((status) => (
<div className="status" key={status.id}>
{status.text}
</div>
)
)}
</div>
```
This loads existing state. Your code needs to fetch statuses on page load.
4. Add a new method called `fetchData()` after the `statuses.unshift(status)` section.
```javascript
fetchData() {
this.setState({ isLoading: true })
const options = { decrypt: false }
getFile('statuses.json', options)
.then((file) => {
var statuses = JSON.parse(file || '[]')
this.setState({
person: new Person(loadUserData().profile),
username: loadUserData().username,
statusIndex: statuses.length,
statuses: statuses,
})
})
.finally(() => {
this.setState({ isLoading: false })
})
}
```
5. Call `fetchData()` from the `componentDidMount()` method
```javascript
componentDidMount() {
this.fetchData()
}
```
6. Save the file.
After the application compiles successfully, users are able to **Submit**
multiple statuses and review them in the app.
![](images/saving-status.png)
## Change the style
1. Edit the `src/styles/style.css` file.
2. Replace the content with the following:
```css
/* Globals */
a,a:focus,a:hover{color:#fff;}
html,body{height:100%;text-align:center;background-color:#191b22;}
body{color:#fff}
.hide{display:none;}
.landing-heading{font-family:'Lato',Sans-Serif;font-weight:400;}
/* Buttons */
.btn{font-family:'Lato',Sans-Serif;padding:0.5625rem 2.5rem;font-size:0.8125rem;font-weight:400;line-height:1.75rem;border-radius:0!important;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.btn-lg{font-size:1.5rem;padding:0.6875rem 3.4375rem;line-height:2.5rem;}
.btn:focus,.btn:active:focus,.btn.active:focus{outline:none;}
.btn-primary{color:#fff;border:1px solid #2C96FF;background-color:#2C96FF;}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{color:#fff;border:1px solid #1a6ec0;background-color:#1a6ec0;}
/* Avatar */
.avatar{width:100px;height:100px;}
.avatar-section{margin-bottom:25px;display:flex;text-align:left;}
.username{margin-left:20px;}
/* Scaffolding */
.site-wrapper{display:table;width:100%;height:100vh;min-height:100%;}
.site-wrapper-inner{display:flex;flex-direction:column;justify-content:center;margin-right:auto;margin-left:auto;width:100%;height:100vh;}
.panel-authed{padding:0 0 0 0;}
/* Home button */
.btn-home-hello{position:absolute;font-family:'Source Code Pro',monospace;font-size:11px;font-weight:400;color:rgba(255,255,255,0.85);top:15px;left:15px;padding:3px 20px;background-color:rgba(255,255,255,0.15);border-radius:6px;-webkit-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);-moz-box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15);}
/* Input */
input, textarea{color:#000;padding:10px;}
.input-status{width:100%;height:70px;border-radius:6px;}
.new-status{text-align:right;}
/* Statuses */
.statuses{padding-top:30px;}
.status{margin:15px 0px;padding:20px;background-color:#2e2e2e;border-radius:6px}
```
3. Save and close the `src/styles/style.css` file.
After the application compiles, you should see the following:
![Multi-reader storage authentication](images/multi-player-storage-status.png)
At this point, you have a basic micro-blogging app that users can use to post and
view statuses. However, there's no way to view other users' statuses. You'll add
that in the next section.
## Lookup user profiles
Let's now modify the `Profile.jsx` file to display profiles of other users. You'll
be using the `lookupProfile()` method that you added to the `import` statement
earlier. `lookupProfile()` takes a single parameter that is the Blockstack ID of
the profile and returns a profile object.
### Add a new route
Make some changes to the routing structure of your app so that users can view
other users' profiles by visiting `http://localhost:8080/other_user.id`
1. Make sure you are in the root of your `publik` project.
2. Install `react-router`:
```bash
npm install --save react-router-dom
```
3. Edit `src/index.js` file.
4. Add an `import` to the file at the top:
```javascript
import { BrowserRouter } from 'react-router-dom'
```
5. Change the `ReactDOM.render()` method in `src/index.js` to:
```javascript
ReactDOM.render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));
```
6. Save and close the `src/index.js` file.
7. Edit the `src/components/App.jsx` file.
8. Add the new route by importing the `Switch` and `Route` components from `react-router-dom`:
```javascript
import { Switch, Route } from 'react-router-dom'
```
9. Locate this line below in the `render()` method:
```javascript
: <Profile handleSignOut={ this.handleSignOut } />
```
10. Replace it with the following:
```javascript
:
<Switch>
<Route
path='/:username?'
render={
routeProps => <Profile handleSignOut={ this.handleSignOut } {...routeProps} />
}
/>
</Switch>
```
This sets up a route and captures the route parameter the app will use as the profile lookup username.
11. Save and close the the `src/components/App.jsx` file.
### Add a rule to process URL paths with . (dot)
You also need to add a rule to your webpack config so that you can properly
process URL paths that contain the `.` (dot) character for example,
`http://localhost:8080/other_user.id`
**NOTE**: In a production app, you must ensure the web server is configured to handle this.
1. Open `webpack.config.js` in the root project directory and locate the following line:
```javascript
historyApiFallback: true,
```
2. Replace it with this:
```javascript
historyApiFallback: {
disableDotRule: true
},
```
You will need to run `npm start` again for this change to take effect. Don't
worry, there is a later step for that to remind you.
3. Save and close the `webpack.config.js` file.
4. Edit the `src/components/Profile.jsx` file.
5. Add a single method that determines if the app is viewing the local user's profile or another user's profile.
```javascript
isLocal() {
return this.props.match.params.username ? false : true
}
```
You use `isLocal()` to check if the user is viewing the local user profile or another user's profile. If it's the local user profile, the app runs the `getFile()` function you added in an earlier step. Otherwise, the app looks up the profile belonging to the `username` using the `lookupProfile()` method.
6. Modify the `fetchData()` method like so:
```javascript
fetchData() {
this.setState({ isLoading: true })
if (this.isLocal()) {
const options = { decrypt: false }
getFile('statuses.json', options)
.then((file) => {
var statuses = JSON.parse(file || '[]')
this.setState({
person: new Person(loadUserData().profile),
username: loadUserData().username,
statusIndex: statuses.length,
statuses: statuses,
})
})
.finally(() => {
this.setState({ isLoading: false })
})
} else {
const username = this.props.match.params.username
lookupProfile(username)
.then((profile) => {
this.setState({
person: new Person(profile),
username: username
})
})
.catch((error) => {
console.log('could not resolve profile')
})
}
}
```
**NOTE**: For `https` deployments, the default Blockstack Core API endpoint for name
lookups should be changed to point to a core API served over `https`.
Otherwise, name lookups fail due to browsers blocking mixed content.
Refer to the [Blockstack.js
documentation](http://blockstack.github.io/blockstack.js/#getfile) for
details.
7. Add the following block to `fetchData()` right after the call to `lookupProfile(username)... catch((error)=>{..}` block:
```javascript
const options = { username: username, decrypt: false }
getFile('statuses.json', options)
.then((file) => {
var statuses = JSON.parse(file || '[]')
this.setState({
statusIndex: statuses.length,
statuses: statuses
})
})
.catch((error) => {
console.log('could not fetch statuses')
})
.finally(() => {
this.setState({ isLoading: false })
})
```
This fetches the user statuses.
Finally, you must conditionally render the logout button, status input textbox, and submit button so they don't show up when viewing another user's profile.
8. Replace the `render()` method with the following:
```javascript
render() {
const { handleSignOut } = this.props;
const { person } = this.state;
const { username } = this.state;
return (
!isSignInPending() && person ?
<div className="container">
<div className="row">
<div className="col-md-offset-3 col-md-6">
<div className="col-md-12">
<div className="avatar-section">
<img
src={ person.avatarUrl() ? person.avatarUrl() : avatarFallbackImage }
className="img-rounded avatar"
id="avatar-image"
/>
<div className="username">
<h1>
<span id="heading-name">{ person.name() ? person.name()
: 'Nameless Person' }</span>
</h1>
<span>{username}</span>
{this.isLocal() &&
<span>
&nbsp;|&nbsp;
<a onClick={ handleSignOut.bind(this) }>(Logout)</a>
</span>
}
</div>
</div>
</div>
{this.isLocal() &&
<div className="new-status">
<div className="col-md-12">
<textarea className="input-status"
value={this.state.newStatus}
onChange={e => this.handleNewStatusChange(e)}
placeholder="What's on your mind?"
/>
</div>
<div className="col-md-12 text-right">
<button
className="btn btn-primary btn-lg"
onClick={e => this.handleNewStatusSubmit(e)}
>
Submit
</button>
</div>
</div>
}
<div className="col-md-12 statuses">
{this.state.isLoading && <span>Loading...</span>}
{this.state.statuses.map((status) => (
<div className="status" key={status.id}>
{status.text}
</div>
)
)}
</div>
</div>
</div>
</div> : null
);
}
```
### This checks to ensure that users are viewing their own profile, by wrapping the **Logout** button and inputs with the `{isLocal() && ...}` condition.
### Put it all together
1. Stop the running application by sending a CTL-C.
2. Restart the application so that the disabling of the `.` (dot) rule takes effect.
```bash
npm start
```
3. Point your browser to `http://localhost:8080/your_blockstack.id` to see the final application.
## Wrapping up
Congratulations, you are all done! We hope you've enjoyed learning a bit more
about Blockstack. To use a working version of the app go
[here](http://publik.ykliao.com).

210
_browser/.svn/pristine/66/6621d9feb3a2a15035193f6c0c393c822241ec8f.svn-base

@ -1,210 +0,0 @@
---
layout: usenew
permalink: /:collection/:path.html
---
# Get and use a Blockstack ID
{:.no_toc}
Through the Blockstack browser you can create an identity. Your identity is a
point of contact as you interact with others through Dapps. Others may be
individual users or companies or software. Unless you allow it, none of these
others have access to anything other than your identity label, for example
`moxiegirl.id.blockstack`. To learn more about you, others must ask and you can
choose to share -- or not.
This document explains one type of identity, the Blockstack ID. You learn how to
create them, as well as when and how to restore them. It contains the following sections:
* TOC
{:toc}
## Understand Blockstack IDs
Interacting within the decentralized internet requires that you have at least
one identity, though you can create several. Your identity is created through a
registrar. Blockstack maintains a registrar for creating identities that you
can use to interact with distributed applications (Dapps).
To use the Blockstack Browser or to develop a decentralized application you
require a Blockstack ID, for example `moxiegirl.id.blockstack`. A Blockstack ID
is a digital identity that is registered With Blockstack. Your personal data and
storage are built around this ID. Decentralized applications that want to access
your data need your identity and your permission.
When you first sign up through the Blockstack browser, you create an initial
human-readable identity in the `id.blockstack` domain. This initial identity has
the format:
_`USERNAME`_`.id.blockstack`
The _`USERNAME`_ portion must be unique. You enter an email and password to
create the initial identity. Blockstack uses the password to:
* seed a _recovery code_ an encrypted string, for example `36mWivFdy0YPH2z31EflpQz/Y0UMrOrJ++lH=0EI7c3mop2JuRBm5W1P0BwXxSTazJsUjOAmC55rFUWINqDqGccLio0iwzGclAhaHGZQ5M52`
* seed a _recovery key_ which is a squence of words `applied binge crisp pictorial fiery dancing agreeable frogs light finish ping apple`
The email is provided to allow either Blockstack or a decentralized application
to communicate information to you. In Blockstacks' case, the email is used to
send you reovery information.
While Blockstack registers your human readable ID and the recovery key. _You_ must
record the:
* recovery key
* recovery code (in the order the words apepar)
* initial password
Blockstack does not store them, so it can't give them to you later if they are
lost.
Your initial ID is created in the `id.blockstack` domain. The initial identity
remains primary, and you need this primary ID and its associated information
(recovery code, recovery key, and password) to use the browser again.
Finally, the `id.blockstack` domain is sponsored by the Blockstack registrar and
identities on it are free. Once you are using the Blockstack Browser, you can
create additional identities outside of this domain and controlled by other
registrars. Coin is required to purchase identities on other domains.
## Create an initial Blockstack ID
To create an inititial Blockstack ID, do the following:
1. Open the [Blockstack web application in your browser](https://browser.blockstack.org/sign-up?redirect=%2F).
The application prompts you for an email address.
![](images/create-id-0.png)
Blockstack uses this email address to send you recovery information.
2. Enter an email address and press **Next**.
The application prompts you to enter a password. Blockstack users this
password to encrypt your recovery code. You must record and save this
initial password.
**NOTE**:The Blockstack team cannot restore your password for you.
3. Enter a password, confirm it, and press **Next**.
![](images/create-id-1.png)
The browser prompts you to register a unique username in the `id.blockstack`
domain. This is your identity in the decentralized internet. The format of the id
is:
_`username`_`.id.blockstack`
You'll use this initial ID to access the Blockstack Browser.
3. Enter a unique username and press **Check Availability**.
![](images/create-id-2.png)
When you choose an ID that is available, the system responds with the following:
![](images/create-id-3.png)
4. Press **Continue**.
The system prompts you to save your **recovery code**. A recovery code is a
sequence of words. These words allow you to recover an `id.blockstack`
that you've created. You should store the words along with their order, for
example, `#1 applied` and so forth.
5. Click **I have written down all the words** when you are done.
The system places you in the Blockstack browser. You can begin exploring and
using Dapps.
## Restore a Blockstack ID
When you return to the Blockstack Browser, the browser prompts you to create a
new Blockstack ID or restore an existing Blockstack ID. If you have a
Blockstack identity, you can open the browser by restoring the identity. To
restore an identity, there are two available methods.
Method 1: Supply the identity recovery code (`36mWivFdy0YPH2z31E...`) and the
password you provided when you _initially_ created your identity. Method 2:
Supply the recovery key which is a sequence of words (`applied binge ...`)
If you loose either the recovery code or the password you provided when you
_initially_ created your identity, you can no longer use method 1 to restore
your identity. If you lose the recovery key, you can no longer use method 2.
Once you no longer have access to either method, your identity is estranged and
not accessible by anyone.
### Restore with a recovery key
1. Open the [Blockstack web application in your browser](https://browser.blockstack.org/sign-up?redirect=%2F).
2. Choose **Restore a Blockstack ID**.
The system displays a dialog where you can enter your recovery code or a
recovery key.
3. Enter the recovery key.
The recovery key is a squence of words.
![](images/recovery-code.png)
4. Press **Next**.
The system prompts you for an email address. This email can be one you
entered previously or an entirely new one. Blockstack doesn't store this
address; it is used during your current Blockstack browser interaction to communicate
important information with you.
5. Enter an email and press **Next**.
The system prompts you for an password and its confirmation. This password
can be one you entered previously or an entirely new one. Write this password
down. You can use the password during your current Blockstack browser
interaction to reveal your keychain or change your password. Blockstack does
not store this information past the session.
6. Enter a password and press **Next**.
The system welcomes you back.
![](images/welcome-back.png)
At this point, you can go onto work with Dapps or you can review your recovery key.
### Restore with a recovery code and original password
1. Open the [Blockstack web application in your browser](https://browser.blockstack.org/sign-up?redirect=%2F).
2. Choose **Restore a Blockstack ID**.
The system displays a dialog where you can enter your recovery code or a
recovery key.
3. Enter your recovery code.
The recovery code is an encrypted string.
![](images/recovery-code.png)
4. Press **Next**.
The system prompts you for an email address. This email can be one you
entered previously or an entirely new one. Blockstack doesn't store this
address; it is used during your current Blockstack browser interaction to
communicate important information with you.
5. Enter an email and press **Next**.
The system prompts you for an password. This must be the password entered
when you first created your identity. If you have forgetten this passowrd,
Blockstack cannot provide it to you. Instead, you must switch to using your
recovery key rather than your code to restore your identity.
6. Enter your origin password and press **Next**.
The system welcomes you back.
![](images/welcome-back.png)
At this point, you can go work with Dapps or you can review your recovery key.

BIN
_browser/.svn/pristine/6c/6cf236705739b3dc1eaa714fab9bace84b283e8b.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

BIN
_browser/.svn/pristine/7d/7d026a516855c1ccedf5ee6a2fe63126d09c8e26.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

BIN
_browser/.svn/pristine/7e/7e40e7b1ee5b4f12d441e53a6ab89e94ad1fca90.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
_browser/.svn/pristine/85/85996c7ad7783aa09fc9583b4befe746d24be5e5.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
_browser/.svn/pristine/88/880a628c402d072057a35178bbbc13b8437c46bb.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

BIN
_browser/.svn/pristine/89/8917230875187dc926ba9f5a9a86e781975585ad.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

BIN
_browser/.svn/pristine/8e/8e3163bec841bf2fb8cc6ecbbf49f02e64b1e2d8.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
_browser/.svn/pristine/94/9400d6428e2bb287e9c7385bedb6ee563f5829d0.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

BIN
_browser/.svn/pristine/a3/a388e8949737a271d80b69b8dfcf48d77dddb890.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
_browser/.svn/pristine/a8/a8348770072ebc93d3d6669efb8fb2225bbb39de.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
_browser/.svn/pristine/b0/b0150507ba3e8a583e83ad2c29256231c8b58373.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
_browser/.svn/pristine/b7/b719720c84e885f3d96f0c0b14534214d6683f18.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

BIN
_browser/.svn/pristine/b9/b974564d6e487b3c718c87a3c3fa821b4ac3d833.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.1 KiB

BIN
_browser/.svn/pristine/bf/bfa77ea6b63530fb7273cc51c462f37d9479a75b.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
_browser/.svn/pristine/ca/ca6de58cdaf847ead67cc9893c73b040cdd6fb08.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

81
_browser/.svn/pristine/cf/cfe2a40e44a14cf0e7be26fed8c2430dc0d259e2.svn-base

@ -1,81 +0,0 @@
---
layout: usenew
description: Use a Blockstack ID with a DApp
permalink: /:collection/:path.html
---
# Users Frequently Asked Questions (FAQ)
{:.no_toc}
This is a general FAQ intended for users of decentralized applications. If you are a developer, refer to the [technical FAQ].
* TOC
{:toc}
## What is the decentralized internet?
The Blockstack ecosystem enables the new decentralized internet. Decentralization means authority moving from central authority to local authority. Simply put, in a decentralized interent, you your data, not the applications or services you use.
Blockstack envisions a world where users control their own data, and power flows back to the users. For example, when you buy something from an online company, that company collects and stores data about you:
* your name
* the information about the product you bought
* the number on your credit card
In the decentralied internet, that information stays with you and it isn't
collected or stored by anyone. Applications that operate in the decentralized
internet are called _decentralized applications_ or Dapps for short.
## What is Blockstack?
Blockstack is an ecosystem to support both Dapp users and Dapp developers. For
users, Blockstack makes software to create Blockstack identities and find Dapps.
For developers, Blockstack develops an ecosystem of software and services that developrs can use to build Dapps.
Blockstack through its
## How do Dapps differ applications I typically use?
Dapps differ from Web applications in two ways:
* **Users have identities not accounts**. The user brings their identity to the
applications; applications do not require the user to create accounts and
passwords.
* **Users own their data**. Users control access to their data. Users decide where to store their data and which applications can read or write to your. Companies and their decentralized applications don't keep or save your data.
## Where is my identity kept?
Your identity is a unique string you and other people can read such as `moxiegirl.id`. A private key is a string of letters only you know. When you create an identity, a **hash** is made of your id and your private key registered with Blockstack.
Your personal data storage is built around this ID. Apps that want to access your data use your permission and identity to find it.
You have to remember and keep your private key in a safe place like a password manager. If you lose a private key, _no one else, no person, no software, can help you get your identity back_.
## Can Blockstack control my data or ID when I use it?
No. When you're using a Blockstack client you control your data and ID with a
private key. As long as no one gets access to your private key, no one can
control your data or ID. When you use Blockstack, by design, your private keys
are never sent to any remote servers.
## Do Dapps uwork with a regular browser?
Yes! Dapps run in the web browsers (Chrome, Safari, Internet Explorer, etc.) you know and love.
## What is the Blockstack Browser?
The Blockstack Browser is the Dapp users use to create and manage their identities and configure their data storage. The browser is also where users can go to discover and use apps using Blockstack.
The Blockstack Browser also handles login requests from Dapps that allow their users to log in with Blockstack. When a user clicks a **Log In with Blockstack** button, they are redirected to the Blockstack Browser to approve the request before being logged into the app.
## Are Blockstack applications usable today?
Yes! Blockstack applications are as easy to use as normal Web applications, if
not easier. Moreover, they are just as performant if not more so.
If you install the [Blockstack
Browser](https://github.com/blockstack/blockstack-browser), or use our
[Web-hosted Blockstack Browser](https://browser.blockstack.org), you can get
started with them right away.

BIN
_browser/.svn/pristine/d0/d085d6df138e87cfea31a57a1e732327fbe01244.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

BIN
_browser/.svn/pristine/d6/d6e6a8f19612c2353e5ff02ac49dc06762f7127c.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

BIN
_browser/.svn/pristine/db/db11f02ca2f4fd6473c082112db7fd86c19d2039.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
_browser/.svn/pristine/eb/ebb5e5f52918709d42ea6cbba0df6b008039e281.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
_browser/.svn/pristine/ec/ec3db3fa698c68b7eb55535729ca0bf5306d33ba.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

BIN
_browser/.svn/pristine/f1/f110c7b263eda5b8f71f1426dd9829625a5b1b31.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
_browser/.svn/pristine/f2/f2da2a06b1ae6cece6cb9389f80dd5bb11cd7a98.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 123 KiB

BIN
_browser/.svn/pristine/f7/f7d8196207101d3fd6bf9efa91cb074dcbea011d.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

BIN
_browser/.svn/pristine/fe/feb47456df368ff71ac8c50b94702abec6bf2619.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

BIN
_browser/.svn/pristine/ff/ff4ec7f9dcc8b70af2d527b508b30c47a5386514.svn-base

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

BIN
_browser/.svn/wc.db

Binary file not shown.

0
_browser/.svn/wc.db-journal

27
_browser/README.md

@ -1,27 +0,0 @@
# Tutorials
**Note: This data is being digested by blockstack.org. Do not change the formatting of this list unless you first make an adjustment to the code on blockstack.org.**
### Multi-player Storage
- urlSlug: multi-player-storage
- image: /images/tutorials/multi-player-storage.png
- description: Build a decentralized micro-blogging app using multi-player Gaia storage.
### Managing Data with Gaia
- urlSlug: managing-data-with-gaia
- image: /images/tutorials/managing-data-with-gaia.png
- description: This series will focus on teaching you to think like a Blockstack developer working with Gaia.
### Blockstack Todo
- urlSlug: todo-list
- image: /images/tutorials/todo-list.png
- description: Walk through creating a basic Todo application with Blockstack. Learn about Sign In flow and Gaia storage.
### Hello Blockstack
- urlSlug: hello-blockstack
- image: /images/tutorials/hello-blockstack.jpg
- description: Build a simple single-page JavaScript application that runs completely client-side without any servers.

6
_browser/blockstack_storage.md

@ -3,7 +3,7 @@ layout: learn
description: Learn how to implement Gaia in a DApp
permalink: /:collection/:path.html
---
# Blockstack Storage Tutorial
# Storage
{:.no_toc}
In this tutorial, you build a micro-blogging application using multi-player Gaia
@ -623,7 +623,7 @@ process URL paths that contain the `.` (dot) character for example,
}
```
**NOTE**: For `https` deployments, the default Blockstack Core API endpoint for name
**NOTE**: For `https` deployments, the default Stacks Node API endpoint for name
lookups should be changed to point to a core API served over `https`.
Otherwise, name lookups fail due to browsers blocking mixed content.
Refer to the [Blockstack.js
@ -746,4 +746,4 @@ about Blockstack.
[Complete source code](https://github.com/yknl/publik)
[Live demo](https://publik.test-blockstack.com)
[Live demo](https://publik.test-blockstack.com)

86
_browser/browser-introduction.md

@ -1,86 +0,0 @@
---
layout: usenew
description: Use a Blockstack ID with a DApp
permalink: /:collection/:path.html
---
# Introduction to the Blockstack Browser
{:.no_toc}
The Blockstack Browser gives users the ability to explore and use the
decentralized applications (DApps). DApps are a new way to interact with the
internet. DApps give users control of their data. Data about them personally,
name, birthdate, phone number and data about what they do such as visiting a
website or buying an item.
* TOC
{:toc}
## Understand the Blockstack Browser
Through the Blockstack Browser application you can create an identity. An identity
represents you as you interact with others through DApps. The Blockstack
Browser is itself, a simple DApp. It allows you to:
* create one or more identities
* send and receive bitcoin
* manage the storage of your profile and application data
* find and launch DApps
There are two editions of the Blockstack Browser, the web edition is an
application you access through your web browser by simply <a
href="https://browser.blockstack.org/" target="\_blank">visiting the application's
address</a> in your computer's browser. You can also install the browser as a
client application on your computer.
If all you want to do is create, manage, and fund an identity and then interact
with DApps, you can simply use the web edition. If you have concerns about net
censorship, heightened security concerns, or want to develop a DApp yourself, you may
want to download and install the browser's client edition.
To use the web application to create an identity,
## Using the Browser on public computers
Before you use the web application, it is important to note that once you log
into the application with the brower, your session does not expire until you
choose **Settings > RESET BROWSER**. For this reason, you should be careful
when using the browser on public computers.
If you are in a library, for example, and log into the browser, simply
closing the tab or even rebooting the computer does not log you out. Instead,
you should be sure to choose **Settings > RESET BROWSER** before leaving the web
application.
For more informatin about your identity and the browser, see [Get and use a Blockstack ID](ids-introduction).
## Overview of the browser functions
The Blockstack Browser allows you to use the new internet. Toward this end, the Browser navigation has the following areas:
![](images/navigation-top.png)
<table class="uk-table">
<thead>
<th>Item</th>
<th>Purpose</th>
</thead>
<tbody>
<tr>
<td>Home</td>
<td>Takes you to the initial page. This page contains a list of the available applications. You can also find available applications at the <a href="https://app.co/blockstack" target="\_blank">App.co</a> site.</td>
</tr>
<tr>
<td>IDs</td>
<td>Allows you to establish the identity of your primary ID. You also go here to create additional, sub identities.</td>
</tr>
<tr>
<td>Wallet</td>
<td>Allows you to send and receive Bitcoin.</td>
</tr>
<tr>
<td>Settings</td>
<td>Configure settings for storage, change session password, reset the Browser, and more.</td>
</tr>
</tbody>
</table>

18
_browser/browser-nav.md

@ -1,18 +0,0 @@
---
layout: usenew
description: Use a Blockstack ID with a DApp
permalink: /:collection/:path.html
---
On this page, you learn more about working with **IDs**, the **Wallet**, and **Settings**.
## Working with IDS
Blockstack allows you to create one free identity in the Blockstack
_namespace_. A namespace a top-level category in the Blockstack Ecosystem. A
namespace is similar to the domains you are familiar with from using the web,
`google.com` is domain and so is the `gouvernement.fr` domain. An identity in
the `.blockstack` namespace has the _`username`_`.id.blockstack` format.
You can also purchase your own identity (`.id`) using bitcoin (BTC). A name's price depends on its length in characters and the current Bitcoin fees. For example, ranges such as .00831 and .001943 BTC 20-80 US dollars is not unusual.

19
_browser/faq_general.md

@ -1,19 +0,0 @@
---
layout: usenew
description: Use a Blockstack ID with a DApp
permalink: /:collection/:path.html
---
# Users Frequently Asked Questions (FAQ)
{:.no_toc}
This is a FAQ intended for users of decentralized applications. A comprehensive list of FAQs that touch on general, technical, and App Mining questions is [also available]({{site.baseurl}}/faqs/allFAQS.html).
* TOC
{:toc}
{% for faq in site.data.theFAQs.faqs %}
{% if faq.category == 'appusers' %}
### {{ faq.question }}
{{ faq.answer }}
{% endif %}
{% endfor %}

44
_browser/hello-blockstack.md

@ -3,7 +3,7 @@ layout: learn
description: Simple Blockstack web App
permalink: /:collection/:path.html
---
# Hello, Blockstack Tutorial
# Hello, Blockstack
In this tutorial, you generate a simple application on Blockstack. The application
is a single-page application (SPA) that runs completely client-side. The
@ -99,24 +99,24 @@ The initial application you create is a generic Javascript application you run
with a local express node. Before you continue, take a moment to examine the
scaffolding of this generic application structure. In the `/` (root) of the generated sample you have the following files:
| File/folder | Description |
|------------------|-----------------------------------|
| `.gitignore` | Git configuration file. |
| `package.json` | Specifies required packages. |
| `cors` | Configuration for cross-domain origin support.|
| `node_modules` | Package files installed by `npm`.|
| `src` | Application source code.|
| `public` | Starter web app code.|
| File/folder | Description |
| -------------- | ---------------------------------------------- |
| `.gitignore` | Git configuration file. |
| `package.json` | Specifies required packages. |
| `cors` | Configuration for cross-domain origin support. |
| `node_modules` | Package files installed by `npm`. |
| `src` | Application source code. |
| `public` | Starter web app code. |
In the `public` folder you find these files:
| File | Description |
|------------------|-----------------------------------|
| `favicon.ico` | Web app site icon. |
| `index.html` | Single page. |
| `manifest.json` | Tells the browser about the application and how it should behave.|
| `white-logo.svg` | Configures crawling and indexing. |
| File | Description |
| ---------------- | ----------------------------------------------------------------- |
| `favicon.ico` | Web app site icon. |
| `index.html` | Single page. |
| `manifest.json` | Tells the browser about the application and how it should behave. |
| `white-logo.svg` | Configures crawling and indexing. |
## Start the server and view the application
@ -132,8 +132,6 @@ and open your browser 'http://localhost:5000'. From the root of your new applic
The first time you run it, your system may prompt you to accept incoming connections.
![Network Connection](images/network-connections.gif)
2. Choose **Allow**.
The system opens your browser to `http://127.0.0.1:3000`.
@ -142,15 +140,15 @@ and open your browser 'http://localhost:5000'. From the root of your new applic
![](images/initial-app.png)
4. Choose **Sign In with Blockstack**.
3. Choose **Sign In with Blockstack**.
The application detects whether the user has the Blockstack client edition installed or
not. This is done automatically by the Blockstack API, more about this later.
What the browser displays depends on the users' current state.
| Using web app | Has client edition installed |
|------------------|-----------------------------------|
| ![](images/login-choice.png) | ![](images/login.gif) |
| Using web app | Has client edition installed |
| ---------------------------- | ---------------------------- |
| ![](images/login-choice.png) | ![](images/login.gif) |
If the user logged into the Blockstack Browser but not reset it, the user can
simply use the exiting identity.
@ -160,7 +158,7 @@ and open your browser 'http://localhost:5000'. From the root of your new applic
If the user chooses **Deny**, the Blockstack Browser displays its
**Home** page but the user is not logged into the sample application.
5. Leave your new application running and move onto the next section.
4. Leave your new application running and move onto the next section.
## Understand the generated application code
@ -293,4 +291,4 @@ Keep it as is or fill it in with new information that describes your app.
### Congratulations you are all done!
You're done! You just built your first Blockstack app and shipped the code. You're well on your way to becoming a Blockstack app legend. If you want to save your code, you can upload it to GitHub or similar code repository.
You're done! You just built your first Blockstack app and shipped the code. You're well on your way to becoming a Blockstack app legend. If you want to save your code, you can upload it to GitHub or similar code repository.

220
_browser/ids-introduction.md

@ -1,220 +0,0 @@
---
layout: usenew
description: Use a Blockstack ID with a DApp
permalink: /:collection/:path.html
---
# Get and use a Blockstack ID
{:.no_toc}
Through the Blockstack Browser you can create an identity. You use this single identity to log into applications that allow you to **Login with Blockstack**. Your identity is also your
point of contact as you interact with others through DApps. Others may be
individual users or companies or software. Unless you allow it, none of these
others have access to anything other than your identity, for example
`meepers.id.blockstack`. Typically, others must ask to learn more about you,
and you can choose to share &ndash; or not.
This document explains the free Blockstack ID, though there are others you can get for fee. You learn how to
create a Blockstack ID, how to sign in with an ID, and how to delete data associated with an ID. This page contains the following sections:
* TOC
{:toc}
## Understand how identities function in the Blockstack Ecosystem
In this section, you learn about identity so you can use it securely.
### Why is an identity not an account
In today's Internet, an account you create to use an applications stays with the company providing that app. This company keeps data you enter about yourself and collects data about how you use their application. This data is valuable and companies use your data to attract advertises. If you stop using that application and close your account, the company retains your data because even old data has value.
Companies combine data from different applications you visit to build a profile of you. This profile lets them target you for particular information and craft your experience of it. For example, an advertiser can determine if you might be interested in a product and _how much they can charge you for it_. In return for allowing this subtle messaging to you and lack of privacy, you receive a free application or service.
A decentralized identity is a new way to use applications without surrendering your data. A, _decentralized identity_ is a combination of username and key. The data associated with that identity stays with it, this means big companies, their applications or central authorities cannot build data profiles about you. You remain private.
A Blockstack ID is a decentralized identity. You use this single identity to log into decentralized applications (DApps) that present the **Login with Blockstack** button. A single identity gives you access to 100s of applications. When you log into a DApp, you create data but that data is encrypted and stored with your identity. When you log out of an application, the application no longer can read that data so it can't make use of it to build up a profile of you or sell your data to other companies. Your privacy is preserved.
### How do you get a Blockstack identity
Think of the ID as a form of identification, like a drivers license. Like drivers' licenses, each identity is unique, but this license identifies you on the virtual internet highway. An identity is created through a registrar of which there are many. When you create a Blockstack ID, your registrar records the identity creation on the Stacks blockchain.
The Blockstack Browser allows new users to create free IDs. These free IDs have included the word `blockstack` in the ID, like this `meepers.id.blockstack`. The additional `blockstack` portion of the name is called a _namespace_. It just means all the names belong to a particular entity. You don't have to use a free `id.blockstack` identity.
This first Blockstack ID you create is a _primary ID_. Once you create a primary identity, you can add other, sub-identities to it. Sub-identities can have the `id.blockstack` or the `.id` format. You might created sub-identities for the same reason you have a work and home email.
If you want a primary identity without the `blockstack` namespace in it, you can buy one. An example of purchased ID is the `larry.id` ID. The `.id` designation is required, the `larry` portion is a unique string.
### What is a key?
Blockstack IDs have keys. These key unlock your identity like opening the door to a private
home. You should keep your ID secret and in a safe place. Blocktack creates your identity key for you. There are two pieces of important information associated with your key:
* The key itself also called the _magic recovery key_ which is a sequence of words `applied binge crisp pictorial fiery dancing agreeable frogs light finish ping apple`
* The _secret recovery code_ an encrypted string, for example, `36mWivFdy0YPH2z31EflpQz/Y0UMrOrJ++lH=0EI7c3mop2JuRBm5W1P0BwXxSTazJsUjOAmC55rFUWINqDqGccLio0iwzGclAhaHGZQ5M52`
When you create Blockstack ID, Blockstack sends you an email with a recovery code you can use to view your key. You receive the recovery code only once. When you get this email, You should
**View Secret Recovery Key** immediately and save to a secure location such as a
password manager.
<div class="uk-card uk-card-default uk-card-body">
<p>When Blockstack registers your human-readable ID and the recovery key. _You_ must
record the:
</p>
<ul>
<li>secret recovery key</li>
<li>magic recovery code (in the order the words appear)</li>
<li>initial password (the password lasts until you <strong>RESET</strong> the browser)</li>
</ul>
<p>Blockstack does not store the key or recover code, so it can't give them to you later if you lose them.</p>
</div>
### Where can you use a Blockstack ID
You can use your Blockstack ID with every DApp in the Blockstack Ecosystem. To
create an ID, you use a DApp called the Blockstack Browser. Any DApp data you
create is linked to this ID.
For example, if you add a picture to a DApp, the picture appears in the DApp, but
the picture's bits and bytes are stored in your personal storage. When you log
into another DApp with your ID, that application can ask for access to your
storage.
Visit the <a href="https://app.co/" target="_blank">App.co, the Universal DApp Store</a> to find apps you can use with your Blockstack ID.
## Create an initial Blockstack ID
{% include create_id.md %}
## Sign in with an existing a Blockstack ID
When you return to the Blockstack Browser, the browser prompts you to create a
new Blockstack ID or signing in with an existing Blockstack ID. When you do this the system provides you with this prompt:
![](images/existing-id.png)
From this dialog you can choose between these two methods:
* Method 1: Supply the secret recovery key which is a sequence of words (`applied binge ...`)
* Method 2: Supply the magic recovery code (`36mWivFdy0YPH2z31E...`) and the password you used when you created the identity
If you loose either the magic recovery code or the password you provided when you
_initially_ created your identity, you can no longer use method 1 to sign into
your identity. If you lose the secret recovery key, you can no longer use method 2.
Once you no longer have access to either method, your identity is estranged and
not accessible by anyone, not even Blockstack.
### Sign in with a secret recovery key
1. Open the [Blockstack web application in your browser](https://browser.blockstack.org/sign-up?redirect=%2F).
2. Choose **Sign in with an existing ID**.
The system displays a dialog where you can enter your recovery code or a
recovery key.
3. Enter the recovery key.
The recovery key is a sequence of words.
![](images/recovery-key.png)
4. Press **Next**.
The system prompts you for an email address. This email can be one you
entered previously or an entirely new one. Blockstack doesn't store this
address; it is used during your current Blockstack Browser interaction to communicate
important information with you.
5. Enter an email and press **Next**.
The system prompts you for a password and its confirmation. This password
can be one you entered previously or an entirely new one. Write this password
down. You can use the password during your current Blockstack Browser
interaction to reveal your keychain or change your password. Blockstack does
not store this information past the session.
6. Enter a password and press **Next**.
The system welcomes you back.
![](images/welcome-back.png)
At this point, you can go onto work with DApps or you can review your recovery key.
### Sign in with a magic recovery code and original password
1. Open the [Blockstack web application in your browser](https://browser.blockstack.org/sign-up?redirect=%2F).
2. Choose **Sign in with an existing ID**.
The system displays a dialog where you can enter your recovery code or a
recovery key.
3. Enter your magic recovery code.
The recovery code is an encrypted string.
![](images/recovery-code.png)
4. Press **Next**.
The system prompts you for an email address. This email can be one you
entered previously or an entirely new one. Blockstack doesn't store this
address; it is used during your current Blockstack Browser interaction to
communicate important information with you.
5. Enter an email and press **Next**.
The system prompts you for a password. **This must be the password entered
when you first created your identity.** If you have forgotten this password,
Blockstack cannot provide it to you. Instead, you must switch to using your
recovery key rather than your code to sign into your identity.
6. Enter your origin password and press **Next**.
The system welcomes you back.
![](images/welcome-back.png)
At this point, you can go work with DApps or you can review your recovery key.
## Can you delete a Blockstack ID?
An ID is recorded on the Blockstack's blockchain; For this reason, once you create an identity, you can’t delete it. You can abandon or simply stop using your ID. Estranged identities like this can’t be used by another person or organization because only you have access to the ID's 12 word recovery phrase.
However, you **can delete** the data associated with your ID. Storage deletion is *only possible* if you used that ID with the default Blockstack Gaia storage hub. If your ID used your own or another Gaia storage hub, Blockstack cannot delete the data, instead, you should contact your storage hub provider for that service.
Do the following to delete the default storage provided with your ID.
1. Log into the Blockstack Browser.
2. Choose <a href="https://browser.blockstack.org/profiles/i/all" target="_blank"><strong>Identity > More page</strong></a>.
This page lists your **Default ID** and any other IDs associated with it. Each ID has a Gaia storage location associated with it. You may just have one ID, that is typical.
3. Make sure you are using <a hreg="https://browser.blockstack.org/account/storage" target="_blank">the default storage hub</a>.
If you are using the default hub, the page looks like this:
![](images/defaultstorage.png)
4. Visit the <a href="https://browser.blockstack.org/profiles" target="_blank"><strong>Identity</strong></a> page on your browser.
5. Enter `Delete Me` and the date you made the request for the **Full Name** and the **Short Bio**.
![](images/deleteme.png)
6. Press **Save**.
7. Email the list of IDs to <a href='mailto:support@blockstack.com'>support@blockstack.com</a>, the content of your email should contain details similar to the following:
```txt
Please delete the Gaia storage associated with the following ids:
- user1.id.blockstack
- user2.id
- user3.id.blockstack
All of these IDs used the Gaia default storage.
```
The support team will respond with an email confirming your data was deleted.
8. To confirm your data was deleted, navigate to <a href="https://explorer.blockstack.org/" target="_blank">the Blockstack Explorer</a> and enter your ID into the search bar.
You should see something similar to the following:
![](images/deletedprofile.png)

BIN
_browser/images/blockstack-bar.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
_browser/images/browser-on-mac-1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

BIN
_browser/images/browser-on-mac.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 123 KiB

BIN
_browser/images/browser-uninstall.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
_browser/images/create-id-0.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 125 KiB

BIN
_browser/images/create-id-1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
_browser/images/create-id-2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 118 KiB

BIN
_browser/images/create-id-3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 107 KiB

BIN
_browser/images/create-id-4.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 135 KiB

BIN
_browser/images/create-id-5.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

BIN
_browser/images/defaultstorage.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
_browser/images/deletedprofile.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 73 KiB

BIN
_browser/images/deleteme.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

BIN
_browser/images/display-complete.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
_browser/images/dmg-notice.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
_browser/images/eject-blockstack.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
_browser/images/existing-id.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

BIN
_browser/images/hello-authd.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
_browser/images/hw-loggedin.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
_browser/images/initial-app.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
_browser/images/login-choice.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

BIN
_browser/images/login-no-auth.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 KiB

BIN
_browser/images/login.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
_browser/images/login.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

BIN
_browser/images/make-a-list.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

BIN
_browser/images/multi-player-storage-status.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

BIN
_browser/images/multiple-lists.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 93 KiB

BIN
_browser/images/navigation-top.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 112 KiB

BIN
_browser/images/network-connections.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

BIN
_browser/images/new-prompt.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
_browser/images/on-your-mind.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

BIN
_browser/images/osx-dmg.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
_browser/images/publish-data-perm.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 KiB

BIN
_browser/images/quit-blockstack.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
_browser/images/recovery-code.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
_browser/images/recovery-key.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

BIN
_browser/images/sample-code.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

BIN
_browser/images/saving-status.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 48 KiB

BIN
_browser/images/secret-key-recovery.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

BIN
_browser/images/status-in.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.1 KiB

Some files were not shown because too many files changed in this diff

Loading…
Cancel
Save