From 6e0e598249762f4e1b6faa00c48d09e748a93497 Mon Sep 17 00:00:00 2001 From: Hank Stoever Date: Mon, 11 May 2020 07:36:21 -0700 Subject: [PATCH 01/28] feat: add docs for neon mining (#588) * feat: add docs for mining * fix: small feedback on mining docs --- _core/smart/neon-node.md | 74 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 73 insertions(+), 1 deletion(-) diff --git a/_core/smart/neon-node.md b/_core/smart/neon-node.md index 681dd94d..54d20e97 100644 --- a/_core/smart/neon-node.md +++ b/_core/smart/neon-node.md @@ -47,7 +47,7 @@ cd stacks-blockchain Install the Stacks node by running: ```bash -cargo install --path ./testnet +cargo install --path ./testnet/stacks-node ``` ### Run your node @@ -68,6 +68,78 @@ INFO [1588108047.585] [src/chainstate/stacks/index/marf.rs:732] First-ever block Awesome! Your node is now connected to the Neon network. Your node will receive new blocks when they are produced, and you can use your [node's RPC API](/core/smart/rpc-api) to send transactions, fetch information for contracts and accounts, and more. +### Running a miner + +Once you've followed the above steps to run a node, it's only a few more steps to run a Proof-of-burn miner on the Neon testnet. + +First, we need to generate a keychain. With this keychain, we'll get some testnet BTC from a faucet, and then use that BTC to start mining. + +To get a keychain, the simplest way is to use the `blockstack-cli`. We'll use the `make_keychain` command, and pass `-t` to indicate that we want a testnet keychain. + +```bash +npx blockstack-cli@1.1.0-beta.1 make_keychain -t +``` + +After this runs, you'll probably see some installation logs, and at the end you should see some JSON that looks like this: + +```json +{ + "mnemonic": "exhaust spin topic distance hole december impulse gate century absent breeze ostrich armed clerk oak peace want scrap auction sniff cradle siren blur blur", + "keyInfo": { + "privateKey": "2033269b55026ff2eddaf06d2e56938f7fd8e9d697af8fe0f857bb5962894d5801", + "address": "STTX57EGWW058FZ6WG3WS2YRBQ8HDFGBKEFBNXTF", + "btcAddress": "mkRYR7KkPB1wjxNjVz3HByqAvVz8c4B6ND", + "index": 0 + } +} +``` + +We need to get some testnet BTC to that address. Grab the `btcAddress` field, and head over to [the Stacks testnet website](https://testnet.blockstack.org/faucet). In the BTC faucet section, past in your `btcAddress`, and submit. You'll be sent 0.5 testnet BTC to that address. **Don't lose this information** - we'll need to use the `privateKey` field later on. + +Now, we need to configure out node to use this Bitcoin keychain. In the `stacks-blockchain` folder, create a new file called `testnet/stacks-node/conf/neon-miner-conf.toml`. + +Paste in the following configuration: + +```toml +[node] +rpc_bind = "0.0.0.0:20443" +p2p_bind = "0.0.0.0:20444" +bootstrap_node = "048dd4f26101715853533dee005f0915375854fd5be73405f679c1917a5d4d16aaaf3c4c0d7a9c132a36b8c5fe1287f07dad8c910174d789eb24bdfb5ae26f5f27@neon.blockstack.org:20444" +# Enter your private key here! +seed = "replace-with-your-private-key" +miner = true + +[burnchain] +chain = "bitcoin" +mode = "neon" +peer_host = "neon.blockstack.org" +rpc_port = 18443 +peer_port = 18444 + +[[mstx_balance]] +address = "STB44HYPYAT2BB2QE513NSP81HTMYWBJP02HPGK6" +amount = 10000000000000000 +[[mstx_balance]] +address = "ST11NJTTKGVT6D1HY4NJRVQWMQM7TVAR091EJ8P2Y" +amount = 10000000000000000 +[[mstx_balance]] +address = "ST1HB1T8WRNBYB0Y3T7WXZS38NKKPTBR3EG9EPJKR" +amount = 10000000000000000 +[[mstx_balance]] +address = "STRYYQQ9M8KAF4NS7WNZQYY59X93XEKR31JP64CP" +amount = 10000000000000000 +``` + +Now, grab your `privateKey` from earlier, when you ran the `make_keychain` command. Replace the `seed` field with your private key. Save and close this configuration file. + +To run your miner, run this in the command line: + +```bash +stacks-node start --config=./testnet/stacks-node/conf/neon-miner-conf.toml +``` + +Your node should start. It will take some time to sync, and then your miner will be running! + ### Creating an optimized binary The steps above are great for trying to run a node temporarily. If you want to host a node on a server somewhere, you might want to generate an optimized binary. To do so, use the same configuration as above, but run: From 5fa0240cb6267d75807f8cdd1034478ff4a74a6c Mon Sep 17 00:00:00 2001 From: Reed Rosenbluth Date: Tue, 12 May 2020 13:07:05 -0600 Subject: [PATCH 02/28] fix: various prose / wording --- _core/smart/overview.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/_core/smart/overview.md b/_core/smart/overview.md index 7ee6b245..5a33e271 100644 --- a/_core/smart/overview.md +++ b/_core/smart/overview.md @@ -6,18 +6,18 @@ permalink: /:collection/:path.html # Introduction to Clarity {:.no_toc} -Clarity is a smart contracting language for use with the Stacks 2.0 blockchain. It supports programmatic control over digital assets. +Clarity is a programming langauge for writing smart contracts on the Stacks 2.0 blockchain. It supports programmatic control over digital assets. * TOC {:toc} ## Smart contracts -Smart contracts encode and enforce the rules for modifying a particular set of data as shared among people and entities who don't necessarily trust each other. For example, a smart contract could allow creators to add a new tv show to a streaming service, but require that users first pay for a decryption key before viewing it. To do this, the smart contract could be written such that the movie creator had to publicly disclose the decryption key in order to receive payment. The movie creators would therefore be incentivized to work on tv show episodes that people want to watch, based on the viewers' upfront payments that are locked-in until the creator releases the episode and the decryption key. +Smart contracts encode and enforce rules for modifying a particular set of data that is shared among people and entities who don't necessarily trust each other. For example, a smart contract could allow creators to add a new tv show to a streaming service, but require that users first pay for a decryption key before viewing it. To do this, the smart contract could be written such that the movie creator had to publicly disclose the decryption key in order to receive payment. The movie creators would therefore be incentivized to work on tv show episodes that people want to watch, based on the viewers' upfront payments that are locked-in until the creator releases the episode and the decryption key. -Because smart contracts run on top of a blockchain, anyone can query them, and anyone can submit transactions to execute them. A smart contract execution can result in new transactions being written to the blockchain. +Because smart contracts are programs that exist in a blockchain, anyone can query them, and anyone can submit transactions to execute them. A smart contract execution can result in new transactions being written to the blockchain. -Apps use the blockchain to manage a global state that is visible to the public. To get back to the streaming service example, the global state could include a list of user that paid for a specific tv show episode. This is possible because the blockchain stores the history of all accepted transactions. +Apps can use the blockchain to manage a global state that is visible to the public. To get back to the streaming service example, the global state could include a list of user that paid for a specific tv show episode. This is possible because the blockchain stores the history of all accepted transactions. Anyone can audit the blockchain in order to independently verify that an app's global shared state has been managed correctly according to the smart contract's rules. @@ -44,12 +44,12 @@ A Clarity smart contract is composed of two parts — a data space and a set Note some of the key Clarity language rules and limitations. -* The only atomic types are booleans, integers, fixed length buffers, and principals -* Recursion is illegal and there is no lambda function. +* The only primitive types are booleans, integers, buffers, and principals +* Recursion is illegal and there are no anonymous functions. * Looping may only be performed via `map`, `filter`, or `fold` -* There is support for lists of the atomic types, however, the only variable length lists in the language appear as function inputs; There is no support for list operations like append or join. -* Variables are created via `let` binding and there is no support for mutating functions like `set`. +* There is support for lists, however, the only variable length lists in the language appear as function inputs; There is no support for list operations like append or join. +* Variables are immutable. ## Learning Clarity -You can try a [Hello World tutorial](tutorial.html) or jump right into the [language reference](clarityRef.html). \ No newline at end of file +You can try a [Hello World tutorial](tutorial.html) or jump right into the [language reference](clarityRef.html). From afb8142d7a82af6a7a5d59dd9cfd426d95c925a8 Mon Sep 17 00:00:00 2001 From: Reed Rosenbluth Date: Tue, 12 May 2020 13:20:09 -0600 Subject: [PATCH 03/28] fix: simplify contract examples --- _core/smart/overview.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/_core/smart/overview.md b/_core/smart/overview.md index 5a33e271..7b43968b 100644 --- a/_core/smart/overview.md +++ b/_core/smart/overview.md @@ -13,13 +13,11 @@ Clarity is a programming langauge for writing smart contracts on the Stacks 2.0 ## Smart contracts -Smart contracts encode and enforce rules for modifying a particular set of data that is shared among people and entities who don't necessarily trust each other. For example, a smart contract could allow creators to add a new tv show to a streaming service, but require that users first pay for a decryption key before viewing it. To do this, the smart contract could be written such that the movie creator had to publicly disclose the decryption key in order to receive payment. The movie creators would therefore be incentivized to work on tv show episodes that people want to watch, based on the viewers' upfront payments that are locked-in until the creator releases the episode and the decryption key. +Smart contracts encode and enforce rules for modifying a particular set of data that is shared among people and entities who don't necessarily trust each other. For example, a smart contract can hold funds in escrow until multiple parties agree to release them, create its own ledger and keep track of its own novel tokens (fungible or non-fungible), and even help make supply chains more transparent. Because smart contracts are programs that exist in a blockchain, anyone can query them, and anyone can submit transactions to execute them. A smart contract execution can result in new transactions being written to the blockchain. -Apps can use the blockchain to manage a global state that is visible to the public. To get back to the streaming service example, the global state could include a list of user that paid for a specific tv show episode. This is possible because the blockchain stores the history of all accepted transactions. - -Anyone can audit the blockchain in order to independently verify that an app's global shared state has been managed correctly according to the smart contract's rules. +Apps can take advantage of smart contracts to manage a global state that is visible to the public. Anyone can audit the blockchain in order to independently verify that an app's global shared state has been managed correctly according to the smart contract's rules. ## Use cases From fa11f3370f02acdfccd378d4d87f31cca3022b34 Mon Sep 17 00:00:00 2001 From: Yutaka Nishimura Date: Wed, 13 May 2020 09:13:18 +0900 Subject: [PATCH 04/28] fix typo Radiks --- _develop/radiks-intro.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_develop/radiks-intro.md b/_develop/radiks-intro.md index 77ef98ad..453e64fe 100644 --- a/_develop/radiks-intro.md +++ b/_develop/radiks-intro.md @@ -29,7 +29,7 @@ Radiks consists of a database, a pre-built server, and a client. A developer add 2. Saves a raw JSON of this encrypted data in the user's Gaia storage. 3. Stores the encrypted data on the Radiks server. -Radiks can store both public and sensitive, non-public data since all data is encrypted by default before it leaves the client. Your application can query Radiks for public data and then decrypt the sensitive information on the client. Radix servers can only return queries for unencrypted data. +Radiks can store both public and sensitive, non-public data since all data is encrypted by default before it leaves the client. Your application can query Radiks for public data and then decrypt the sensitive information on the client. Radiks servers can only return queries for unencrypted data. ## How Radiks authorizes writes From cb19210e29c5c2514900a87d68b3f3f25e702577 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 12 May 2020 22:16:37 -0400 Subject: [PATCH 05/28] Updates for iOS SDK tutorial --- _ios/tutorial.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/_ios/tutorial.md b/_ios/tutorial.md index fbb73cf0..11a7ced5 100644 --- a/_ios/tutorial.md +++ b/_ios/tutorial.md @@ -71,14 +71,14 @@ $ which npm npx If you don't have these installed, take a moment to install or upgrade as needed. -### Install the CocoaPods 1.6.0.beta.1 dependency manager +### Install the CocoaPods 1.6.0 dependency manager The sample application only runs on devices with iOS 11.0 or higher. You install the Blockstack iOS SDK through the CocoaPods. Cocoapods is a dependency manager for Swift and Objective-C Cocoa projects. It’s a simple, user friendly way to use libraries from the community in your project. -You must use the `1.6.0.beta.1` version of CocoaPods or newer to avoid an +You must use the `1.6.0` version of CocoaPods or newer to avoid an incapability between Cocoapods and XCode. Before starting the tutorial, confirm you have installed CocoaPods. @@ -500,7 +500,7 @@ Rather than have you build up your own UI in the interface builder, this section defines the graphical elements, and their functionality will be defined in a respective `.swift` file. -3. Within the `` element, replace the existing `` subelement with the following: +3. Within the `` element, replace the existing `` sub-element with the following: ```xml @@ -619,7 +619,7 @@ registred it with Blockstack and the app would be available on the Web. This example skips this registration step and uses an example application we've already created for you: -`https://heuristic-brown-7a88f8.netlify.com/redirect.html` +`https://heuristic-brown-7a88f8.netlify.app/redirect.html` This web application already has a redirect in place for you. You'll reference this application in your mobile add for now. In XCode, do the following; @@ -687,8 +687,8 @@ this application in your mobile add for now. In XCode, do the following; } else { print("Currently signed out so signing in.") // Address of deployed example web app - Blockstack.shared.signIn(redirectURI: URL(string: "https://heuristic-brown-7a88f8.netlify.com/redirect.html")!, - appDomain: URL(string: "https://heuristic-brown-7a88f8.netlify.com")!) { authResult in + Blockstack.shared.signIn(redirectURI: URL(string: "https://heuristic-brown-7a88f8.netlify.app/redirect.html")!, + appDomain: URL(string: "https://heuristic-brown-7a88f8.netlify.app")!) { authResult in switch authResult { case .success(let userData): print("Sign in SUCCESS", userData.profile?.name as Any) From e800d8002617fc841a9dbaf95c5efaa69194a0ae Mon Sep 17 00:00:00 2001 From: Ken Liao Date: Wed, 13 May 2020 10:28:19 -0400 Subject: [PATCH 06/28] Update iOS tutorial wording based on suggestion Co-authored-by: kyranjamie --- _ios/tutorial.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_ios/tutorial.md b/_ios/tutorial.md index 11a7ced5..2ae15247 100644 --- a/_ios/tutorial.md +++ b/_ios/tutorial.md @@ -78,8 +78,8 @@ the Blockstack iOS SDK through the CocoaPods. Cocoapods is a dependency manager for Swift and Objective-C Cocoa projects. It’s a simple, user friendly way to use libraries from the community in your project. -You must use the `1.6.0` version of CocoaPods or newer to avoid an -incapability between Cocoapods and XCode. Before starting the tutorial, confirm +You must use CocoaPods version `1.6.0` or newer to avoid an +incompatibility between Cocoapods and XCode. Before starting the tutorial, confirm you have installed CocoaPods. ```bash From 5b5b8bd121a2c66bb563524a1fcf8a14053d3193 Mon Sep 17 00:00:00 2001 From: Ken Liao Date: Wed, 13 May 2020 10:43:22 -0400 Subject: [PATCH 07/28] fix: Blockstack CLI ref nav title (#595) --- _develop/cliDocs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_develop/cliDocs.md b/_develop/cliDocs.md index c078c79e..466cc1ea 100644 --- a/_develop/cliDocs.md +++ b/_develop/cliDocs.md @@ -2,6 +2,6 @@ layout: learn permalink: /:collection/:path.html --- -# blockstack_cli reference +# Blockstack CLI Reference {% include commandline.md %} From b9ce2ef6064c168fe898e6ea06b55ffa21763e27 Mon Sep 17 00:00:00 2001 From: Alexander Graebe Date: Wed, 13 May 2020 12:54:36 -0700 Subject: [PATCH 08/28] Update stacks node api docs (#583) * Update stacks node api docs * Improvements based on feedback * Update _common/core_ref.md Co-authored-by: kyranjamie * Update _common/core_ref.md Co-authored-by: kyranjamie * Update based on most recent feedback * Update _common/core_ref.md Co-authored-by: kyranjamie * Update naming Co-authored-by: kyranjamie --- _common/core_ref.md | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/_common/core_ref.md b/_common/core_ref.md index 79249daf..9c11a12e 100644 --- a/_common/core_ref.md +++ b/_common/core_ref.md @@ -1,5 +1,18 @@ --- -layout: externalurl -redirect_url: https://core.blockstack.org/ -title: "Stacks Node API" +layout: core +title: "Stacks Blockchain APIs" +description: Interacting with the Stacks 2.0 Blockchain +permalink: /:collection/:path.html --- + +With the launch of Stacks 2.0, a new version of the Blockstack blockchain was released. There are two ways of interacting with the blockchain, either using the Stacks Blockchain API or by making RPC calls to a Stacks Core directly. + +## Stacks Core API +The Stacks 2.0 blockchain's Rust implementation exposes RPC endpoints (in JSON format), which can be used to interface with the Stacks blockchain. [You can find the RPC API references here](https://docs.blockstack.org/core/smart/rpc-api.html). + +## Stacks Blockchain API +The Stacks Blockchain API was built to maintain pageable materialized views of the Stacks 2.0 Blockchain. It is a server that exposes a RESTful JSON API, hosted by PBC. It introduces aidditonal functionality (e.g. get all transactions), as well as proxies calls directly to Stacks Node. [You can find the OpenAPI specification and documentation here](https://blockstack.github.io/stacks-blockchain-sidecar/). + +*Note: Using this API requires you to trust the server, but provides a faster onboarding experience. It also addresses performance issues for which querying a node itself would be too slow or difficult.* + +{% include note.html content="If you are looking for the Stacks 1.0 RPC endpoint references, please follow this link." %} From 833da15fd10be7e2f44a633a9e6337c8993e257c Mon Sep 17 00:00:00 2001 From: Hank Stoever Date: Thu, 14 May 2020 10:30:27 -0700 Subject: [PATCH 09/28] feat: docs for handling redirect with connect (#586) * feat: docs for handling redirect with connect * fix: updates from feedback on connect redirect --- _develop/connect/get-started.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/_develop/connect/get-started.md b/_develop/connect/get-started.md index 853afd9a..2ec64fff 100644 --- a/_develop/connect/get-started.md +++ b/_develop/connect/get-started.md @@ -142,4 +142,24 @@ Then, you can use API methods under the `blockstackConnect` global variable: ```javascript const authOptions = { /** See docs above for options */ }; blockstackConnect.showBlockstackConnect(authOptions); +``` + +## Handling redirect fallbacks + +Connect is built to use popups with the [`window.postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) API, which provides a much better and seamless user experience. However, there are times when this flow can fail. For example, the popup may be blocked, or the `window.postMessage` API might not work properly (which often happens on mobile browsers). + +To make sure your app handles this gracefully, you'll need to handle the case where authentication is performed through regular HTTP redirects. With redirects, your users will be sent back to your app at a URL like: + +`${authOptions.redirectTo}?authResponse=....` + +To finalize authentication with this flow, you'll need to utilize the `UserSession` methods `isSignInPending()` and `handlePendingSignIn()`. For more information, check out the [blockstack.js API reference](https://blockstack.github.io/blockstack.js/). + +```js +const userSession = new UserSession(appConfig); + +// ... call this code on page load +if (userSession.isSignInPending()) { + const userData = await userSession.handlePendingSignIn(); + // your user is now logged in. +} ``` \ No newline at end of file From ae2a3b79f4ed721fc38e5d6209174c72ea66673a Mon Sep 17 00:00:00 2001 From: Reed Rosenbluth Date: Thu, 14 May 2020 14:10:22 -0600 Subject: [PATCH 10/28] fix: typo (#596) --- _core/smart/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_core/smart/overview.md b/_core/smart/overview.md index 7b43968b..10ee7f17 100644 --- a/_core/smart/overview.md +++ b/_core/smart/overview.md @@ -6,7 +6,7 @@ permalink: /:collection/:path.html # Introduction to Clarity {:.no_toc} -Clarity is a programming langauge for writing smart contracts on the Stacks 2.0 blockchain. It supports programmatic control over digital assets. +Clarity is a programming language for writing smart contracts on the Stacks 2.0 blockchain. It supports programmatic control over digital assets. * TOC {:toc} From 5d84a489e4bbaab53b3a0722dede7dede3925e61 Mon Sep 17 00:00:00 2001 From: Hank Stoever Date: Mon, 18 May 2020 22:25:35 -0700 Subject: [PATCH 11/28] Connect docs for general release (#585) * feat: add connect to todo-list * feat: updates storage tutorial with connect * fix: broken links and missing images --- _browser/blockstack_storage.md | 257 +++++++----------- _browser/images/display-complete.png | Bin 0 -> 45162 bytes _browser/images/initial-app.png | Bin 0 -> 23732 bytes _browser/images/login-choice.png | Bin 0 -> 51999 bytes _browser/images/login-no-auth.png | Bin 0 -> 111506 bytes _browser/images/login.gif | Bin 0 -> 21829 bytes _browser/images/login.png | Bin 0 -> 98194 bytes _browser/images/make-a-list.png | Bin 0 -> 72721 bytes .../images/multi-player-storage-status.png | Bin 0 -> 57014 bytes _browser/images/multiple-lists.png | Bin 0 -> 95240 bytes _browser/images/network-connections.gif | Bin 0 -> 10283 bytes _browser/images/publish-data-perm.png | Bin 0 -> 102987 bytes _browser/images/saving-status.png | Bin 0 -> 49632 bytes _browser/images/todo-app.png | Bin 0 -> 39568 bytes _browser/images/todo-sign-in.png | Bin 0 -> 41803 bytes _browser/todo-list.md | 28 +- _includes/sign_in.md | 4 +- 17 files changed, 113 insertions(+), 176 deletions(-) create mode 100644 _browser/images/display-complete.png create mode 100644 _browser/images/initial-app.png create mode 100644 _browser/images/login-choice.png create mode 100644 _browser/images/login-no-auth.png create mode 100644 _browser/images/login.gif create mode 100644 _browser/images/login.png create mode 100644 _browser/images/make-a-list.png create mode 100644 _browser/images/multi-player-storage-status.png create mode 100644 _browser/images/multiple-lists.png create mode 100644 _browser/images/network-connections.gif create mode 100644 _browser/images/publish-data-perm.png create mode 100644 _browser/images/saving-status.png create mode 100644 _browser/images/todo-app.png create mode 100644 _browser/images/todo-sign-in.png diff --git a/_browser/blockstack_storage.md b/_browser/blockstack_storage.md index b4dd68cd..0af48f88 100644 --- a/_browser/blockstack_storage.md +++ b/_browser/blockstack_storage.md @@ -14,7 +14,7 @@ topics: * TOC {:toc} -This tutorial does not teach you about authentication. That is covered in depth [in the hello-blockstack tutorial](hello-blockstack). +This tutorial does not teach you about authentication. That is covered in depth [in the guide to Blockstack Connect](/develop/connect/get-started). @@ -32,8 +32,7 @@ to follow along, basic familiarity with React.js is helpful. When complete, the - 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 basic identity and storage services are provided by `blockstack.js`. For this tutorial, you will use the following tools: @@ -220,48 +219,36 @@ These are the `UserSession.putFile`, `UserSession.getFile`, and `lookupProfile` 1. Open the `src/components/Profile.js` file. -2. Replace the initial state in the `constructor()` method so that it holds the key properties required by the app. +2. Replace the initial state in the component method 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: + This code constructs a Blockstack `Person` object to hold the profile. Your component 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 - }; + export const Profile = ({ userData, handleSignOut }) => { + const [newStatus, setNewStatus] = React.useState(''); + const [statuses, setStatuses] = React.useState([]); + const [statusIndex, setStatusIndex] = React.useState(0); + const [isLoading, setLoading] = React.useState(false); + const [username, setUsername] = React.useState(userData.username); + const [person, setPerson] = React.useState(new Person(userData.profile)); + const { authOptions } = useConnect(); + const { userSession } = authOptions; + // ... } ``` -3. Locate the `render()` method. -4. Modify the `render()` method to add a text input and submit button to the +3. Modify the rendered result to add a text input and submit button to the by replacing it with the code below: The following code renders the `person.name` and `person.avatarURL` properties from the profile on the display: ```javascript - render() { - const { handleSignOut, userSession } = this.props; - const { person } = this.state; - const { username } = this.state; + export const Profile = ({ userData, handleSignOut }) => { + // ... state setup from before return ( - !userSession.isSignInPending() && person ?
@@ -289,15 +276,15 @@ These are the `UserSession.putFile`, `UserSession.getFile`, and `lookupProfile`