From 6929f128023e1f697cea020d43f4e1e062eaf71c Mon Sep 17 00:00:00 2001
From: Richard Ramos <info@richardramos.me>
Date: Thu, 12 Jul 2018 16:01:08 -0400
Subject: [PATCH] Docs regarding buying tokens

---
 tutorial/3-listing-buying-tokens.md | 84 ++++++++++++++++++++---------
 1 file changed, 59 insertions(+), 25 deletions(-)

diff --git a/tutorial/3-listing-buying-tokens.md b/tutorial/3-listing-buying-tokens.md
index c1c20d3..55f351d 100644
--- a/tutorial/3-listing-buying-tokens.md
+++ b/tutorial/3-listing-buying-tokens.md
@@ -90,37 +90,71 @@ render(){
 
 
 ## Buying the tokens
-    buyFromStore = () => {
-        const { buySpaceship } = SpaceshipToken.methods;
-        const toSend = buySpaceship(this.props.id)
 
-        this.setState({isSubmitting: true});
+[IMAGE_HERE]
 
-        toSend.estimateGas({value: this.props.price })
-            .then(estimatedGas => {
-                return toSend.send({from: web3.eth.defaultAccount,
-                                    value: this.props.price,
-                                    gas: estimatedGas + 1000000});
-            })
-            .then(receipt => {
-                console.log(receipt);
+As you can see, each spaceship has a buy button. Clicking this button should generate a transaction in which we send the value in wei of the token, and this token is transferred to our address. The `SpaceshipToken` contract has a `buySpaceship` function we can use for such purposes. 
 
-                console.log("Updating ships");
-                this.props.onAction();
+Let's start by implementing the functionality of the `buyFromStore` method. Disable the button and extract the `buySpaceship` function to its own variable:
 
-                // TODO: show success
-                return true;
-            })
-            .catch((err) => {
-                console.error(err);
-                // TODO: show error blockchain
-            })
-            .finally(() => {
-                this.setState({isSubmitting: false});
-            });
-    }
+```
+buyFromStore = () => {
+    this.setState({isSubmitting: true});
 
+    const { buySpaceship } = SpaceshipToken.methods;
+}
+```
 
+The next step is to estimate the gas to invoke the contract function. For this case in particular, we need the token id (`this.props.id`), and, since this transaction involves sending ether, we need to specify the value. We can obtain it from `this.props.price`. Notice we also have a `catch` and `finally` blocks:
+
+```
+buyFromStore = () => {
+    this.setState({isSubmitting: true});
+
+    const { buySpaceship } = SpaceshipToken.methods;
+
+    const toSend = buySpaceship(this.props.id)
+
+    toSend.estimateGas({value: this.props.price })
+    .then(estimatedGas => {
+        console.log(estimatedGas);
+    })
+    .catch((err) => {
+        console.error(err);
+    })
+    .finally(() => {
+        this.setState({isSubmitting: false});
+    });
+}
+```
+
+Then, with the `estimatedGas` variable, we generate the transaction. Since buying the spaceship means that the ship will be transferred from the store to your wallet, it's a good idea to reload the different sections of the index page. You can use `this.props.onAction();` for this.
+
+```
+buyFromStore = () => {
+    this.setState({isSubmitting: true});
+
+    const { buySpaceship } = SpaceshipToken.methods;
+
+    const toSend = buySpaceship(this.props.id)
+
+    toSend.estimateGas({value: this.props.price })
+    .then(estimatedGas => {
+        return toSend.send({value: this.props.price,
+                            gas: estimatedGas + 1000000});
+    })
+    .then(receipt => {
+        console.log(receipt);
+        this.props.onAction();
+    })
+    .catch((err) => {
+        console.error(err);
+    })
+    .finally(() => {
+        this.setState({isSubmitting: false});
+    });
+}
+```
 
 ## Listing our tokens
 index.js