{"id":27884,"date":"2022-03-23T22:37:18","date_gmt":"2022-03-23T22:37:18","guid":{"rendered":"http:\/\/Handling-Orders-using-Web3-and-Ethereum"},"modified":"2022-03-23T22:37:18","modified_gmt":"2022-03-23T22:37:18","slug":"handling-orders-using-web3-and-ethereum","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/","title":{"rendered":"Handling Orders using Web3 and Ethereum"},"content":{"rendered":"

One of the big draws to blockchain is that you can execute large financial transactions in minutes instead of days or weeks. One day, you could be able to sell your house in 15 minutes and all of the ownership information will be stored securely on the blockchain.<\/p>\n

That\u2019s why we\u2019re going to build a small ordering Dapp to show how this concept works. We\u2019ll create a Dapp that lets users create orders on the blockchain, including payments. All of this will be neatly wrapped in a Redwood app and use Cloudinary for our image hosting.<\/p>\n

Setting up the Tools<\/h2>\n

There are a few things we need to install before we touch the code. First, you\u2019ll need to install Ganache<\/a>. This is a free app that lets us develop smart contracts and Dapps against a local Ethereum network. That way we don\u2019t have to worry about paying for transactions on the blockchain.<\/p>\n

Next, we\u2019ll actually create the Redwood app we\u2019ll use for our Dapp. In a terminal, run the following command:<\/p>\n

$ yarn create redwood-app order-dapp\n<\/code><\/span><\/pre>\n
This will generate the front-end code in the web<\/code> directory and back-end code in the api<\/code> directory we\u2019ll need to make this app. There are just a couple more things we need to install. In your terminal, go to the web<\/code> directory and install these packages.<\/p>\n
$ yarn add truffle truffle-contract web3\n<\/code><\/span><\/pre>\n
These three packages are going to help us interact with the local Ethereum network with our smart contract and also the front-end. Now we have everything installed and set up so we can dive into writing a smart contract.<\/p>\n
Writing a Smart Contract with Solidity<\/h2>\n
We\u2019re going to use Truffle to set up our smart contract. So in your terminal go to the web<\/code> directory and run the following command:<\/p>\n
$ truffle init\n<\/code><\/span><\/pre>\n
This will create a new contracts<\/code> folder inside the web<\/code> directory. If you take a look in the contracts<\/code> folder, you\u2019ll see an initial smart contract called Migrations.sol<\/code>.<\/p>\n
It sets the owner of the smart contract to the address that deploys it and gives us access to some restricted functionality for the smart contract.<\/p>\n
Now we\u2019ll be making our own smart contract with the functionality to handle the orders users want to make. That way you\u2019ll see some of the differences in blockchain development instead of back-end development.<\/p>\n
We need to make a config file to handle the connections to the local EVM. In the web<\/code> directory add or update the truffle-config.js<\/code> file. In this file, add the following code:<\/p>\n
module<\/span>.exports = {\n  networks<\/span>: {\n    development<\/span>: {\n      host<\/span>: \"127.0.0.1\"<\/span>,\n      port<\/span>: 7545<\/span>,\n      network_id<\/span>: \"*\"<\/span>,\n    },\n  },\n  compilers<\/span>: {\n    solc<\/span>: {\n      optimizer<\/span>: {\n        enabled<\/span>: true<\/span>,\n        runs<\/span>: 200<\/span>\n      },\n    }\n  },\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The networks<\/code> object defines the connection to the local EVM network. You can get all of this info from the server settings in Ganache, but these are the default values. We have enabled the optimizer for the compiler to make our smart contract run smoother.<\/p>\n
That\u2019s all we need to connect to the network!<\/p>\n
Working with a smart contract on the Ethereum network<\/h2>\n
In the contracts<\/code> folder, add a new file called OrderMaker.sol<\/code>. This is where we\u2019ll define the function to add orders to the blockchain and make orders accessible to our Dapp.<\/p>\n
Open this file and add the following line:<\/p>\n
pragma<\/span> solidity<\/span> ^0.5<\/span>.0<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Every smart contract starts with the version we\u2019re using for the compiler. Then we\u2019ll define the contract itself.<\/p>\n
contract<\/span> OrderMaker<\/span> {\n\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
There are some similarities between Solidity and JavaScript and a little C++. You\u2019ll see them as we fill in this contract. Inside the contract, let\u2019s add a struct that defines the order.<\/p>\n
struct Order {\n  string itemName;\n  uint256 price;\n  uint256 quantity;\n}\n<\/code><\/span><\/pre>\n
This is very similar to an interface in TypeScript. It\u2019s a type that defines the data we expect in an order. Next, we\u2019ll initialize a global array that holds all of the orders for the smart contract.<\/p>\n
Order<\/span>[]<\/span> private<\/span> orders<\/span>;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
This is a private<\/code> variable which means it can\u2019t be accessed outside of the contract. Then we\u2019ll add a constructor that creates an initial order on the blockchain.<\/p>\n
constructor<\/span>() public {\n  _createOrder('Jalapeno'<\/span>, 9<\/span>, 3<\/span>);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
A constructor in a smart contract only gets executed one time, when the contract is deployed to the network. There are a few things that we\u2019ll define before we get to the _createOrder<\/code>, but it\u2019s coming up.<\/p>\n
For now, let\u2019s define a couple of mappings for the orders that can be accessed outside of the contract like in our Dapp.<\/p>\n
mapping(address<\/span> =><\/span> Order) public ordersByUser;\nmapping(uint256<\/span> =><\/span> Order) public ordersById;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
A mapping in Solidity is like an object in JavaScript. An example of the ordersById<\/code> mapping would look like this in JavaScript.<\/p>\n
let<\/span> ordersById = {\n  1<\/span>: {\n    itemName<\/span>: 'Jalapeno'<\/span>,\n    price<\/span>: 9<\/span>,\n    quantity<\/span>: 4<\/span>\n  },\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
After these mappings, we need to make a helper function to get the price of the items in the orders users make. This will introduce an interesting thing with Solidity.<\/p>\n
function<\/span> _lookupPrice<\/span>(string memory _itemName<\/span>)\n  private<\/span>\n  pure<\/span>\n  returns<\/span> (uint256 price<\/span>)\n<\/span>{\n  if<\/span> (\n    keccak256(abi.encodePacked(_itemName)) ==\n    keccak256(abi.encodePacked('Jalapeno'<\/span>))\n  ) {\n    return<\/span> 9<\/span>;\n  } else<\/span> if<\/span> (\n    keccak256(abi.encodePacked(_itemName)) ==\n    keccak256(abi.encodePacked('Feta'<\/span>))\n  ) {\n    return<\/span> 12<\/span>;\n  } else<\/span> if<\/span> (\n    keccak256(abi.encodePacked(_itemName)) ==\n    keccak256(abi.encodePacked('Water'<\/span>))\n  ) {\n    return<\/span> 18<\/span>;\n  } else<\/span> if<\/span> (\n    keccak256(abi.encodePacked(_itemName)) ==\n    keccak256(abi.encodePacked('Lemon'<\/span>))\n  ) {\n    return<\/span> 15<\/span>;\n  } else<\/span> {\n    return<\/span> 5<\/span>;\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
If you take a look, we\u2019re comparing strings to decide what price to return. In Solidity, there\u2019s no direct way to handle string comparison. That\u2019s why we have all of the keccak256(abi.encodePacked(_itemName)) == keccak256(abi.encodePacked('Jalapeno'))<\/code> statements. It compares the hashes of the strings and is how we handle string comparison in Solidity smart contracts.<\/p>\n
Now<\/em> we can define that function we called in the constructor to add an initial order.<\/p>\n
function<\/span> _createOrder<\/span>(\n  string memory _itemName,\n  uint256 _quantity,\n  uint256 _price\n<\/span>) internal<\/span> <\/span>{\n  orders.push(Order(_itemName, _price, _quantity));\n\n  uint256 id = orders.length;\n\n  ordersByUser[msg.sender] = orders[id - 1<\/span>];\n\n  ordersById[id] = orders[id - 1<\/span>];\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is an internal function which means only this contract and contracts that inherit this one can call this _createOrder<\/code> function. We pass in the three inputs needed to make a new order. Then we add the new order to the private orders<\/code> array, get an id, and add the order to our public mappings.<\/p>\n
The last thing to add is the function that lets users create orders from our Dapp.<\/p>\n
function<\/span> createOrder<\/span>(string memory _itemName, uint256 _quantity<\/span>) public<\/span> payable<\/span> <\/span>{\n  require<\/span>(msg.value == 0.001<\/span> ether);\n  uint256 itemPrice = _lookupPrice(_itemName);\n  _createOrder(_itemName, _quantity, itemPrice);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
One important thing to note is that this function has the payable<\/code> modifier. That means a user is able to send a payment along with their request. This is part of what makes blockchain technology so interesting. It\u2019s the only way to securely send money with online transactions.<\/p>\n
Can you imagine trying to send money along with an API request? That\u2019s one of the problems blockchain solves.<\/p>\n
Deploying the Smart Contract to the Local EVM<\/h3>\n
We have the truffle-config.js<\/code> file in web<\/code> which sets up the connection to the local Ethereum network. If you\u2019re running Ganache like we set up earlier, these are the network defaults. This is also where you would define connections to test networks or the real Ethereum network.<\/p>\n
With this config file updated and the smart contracts written, we can deploy these contracts to the local EVM. In your terminal in the web<\/code> directory, run this command:<\/p>\n
$ truffle migrate\n<\/code><\/span><\/pre>\n
You should see some output in your terminal that tells you about the smart contracts you just deployed. Make sure that you get the contract address<\/code> for the OrderMaker<\/code> contract. We\u2019ll need that to connect the Dapp to this smart contract.<\/p>\n
You\u2019ve deployed a smart contract to the EVM! All that\u2019s left is creating the front-end code and giving users access to the functionality of the smart contract.<\/p>\n
Building the Front-end<\/h2>\n
In your terminal, go to the root of the project and run the following command:<\/p>\n
$ yarn redwood generate page order\n<\/code><\/span><\/pre>\n
This will create a new directory called OrderPage<\/code> in web > src > pages<\/code>. In this new folder, you\u2019ll see several files: a test file, a Storybook<\/a> story, and the component file. Open the OrderPage.tsx<\/code> file. This is where we\u2019ll make the user interface.<\/p>\n
Before we do that, there\u2019s one more config file we need to set up to access the smart contract on our local Ethereum network.<\/p>\n
Adding the Config File<\/h3>\n
In the web > src<\/code> directory, add a new file called config.tsx<\/code>. We\u2019ll have two variables in this file. The first will be the address for the smart contract we deployed. At the top of your file, add the following code but be sure to use your contract address:<\/p>\n
export<\/span> const<\/span> ORDER_MAKER_ADDRESS = '0x369B41C6951B712e0Cb9c3e13E2737999Ef202c2'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The next variable we need to add is the ABI (application binary interface) for the smart contract. When you deployed the smart contract a couple of steps back, the web > build > contracts<\/code> directory was added. In this directory, you\u2019ll find OrderMaker.json<\/code>.<\/p>\n
Open that file and copy the abi<\/code> value and add it to the config.tsx<\/code> file with our address. The code will look like this:<\/p>\n
export<\/span> const<\/span> ORDER_MAKER_ABI: any = [\n  {\n    \"constant\"<\/span>: true<\/span>,\n    \"inputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      }\n    ],\n    \"name\"<\/span>: \"ordersById\"<\/span>,\n    \"outputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"itemName\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"price\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"quantity\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      }\n    ],\n    \"payable\"<\/span>: false<\/span>,\n    \"stateMutability\"<\/span>: \"view\"<\/span>,\n    \"type\"<\/span>: \"function\"<\/span>,\n    \"signature\"<\/span>: \"0x2c4cb11a\"<\/span>\n  },\n  {\n    \"constant\"<\/span>: true<\/span>,\n    \"inputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"\"<\/span>,\n        \"type\"<\/span>: \"address\"<\/span>\n      }\n    ],\n    \"name\"<\/span>: \"ordersByUser\"<\/span>,\n    \"outputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"itemName\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"price\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"quantity\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      }\n    ],\n    \"payable\"<\/span>: false<\/span>,\n    \"stateMutability\"<\/span>: \"view\"<\/span>,\n    \"type\"<\/span>: \"function\"<\/span>,\n    \"signature\"<\/span>: \"0x933f7ae8\"<\/span>\n  },\n  {\n    \"inputs\"<\/span>: [],\n    \"payable\"<\/span>: false<\/span>,\n    \"stateMutability\"<\/span>: \"nonpayable\"<\/span>,\n    \"type\"<\/span>: \"constructor\"<\/span>,\n    \"signature\"<\/span>: \"constructor\"<\/span>\n  },\n  {\n    \"constant\"<\/span>: false<\/span>,\n    \"inputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"_itemName\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"_quantity\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      }\n    ],\n    \"name\"<\/span>: \"createOrder\"<\/span>,\n    \"outputs\"<\/span>: [],\n    \"payable\"<\/span>: true<\/span>,\n    \"stateMutability\"<\/span>: \"payable\"<\/span>,\n    \"type\"<\/span>: \"function\"<\/span>,\n    \"signature\"<\/span>: \"0x97de706f\"<\/span>\n  }\n]\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Think of the contract address as the API we would connect to and the ABI is like the definition for the functions and parameters we\u2019re able to interact with. Now we can work on the OrderPage<\/code> component.<\/p>\n
Making the Order Page<\/h2>\n
We generated our page earlier so you can open the OrderPage.tsx<\/code> file and delete all of the existing code. We\u2019ll start fresh by adding the imports we\u2019ll need to make this Dapp work. At the top of your file, add the following code:<\/p>\n
import<\/span> { useEffect, useState } from<\/span> 'react'<\/span>\nimport<\/span> Web3 from<\/span> 'web3'<\/span>\n\nimport<\/span> { ORDER_MAKER_ABI, ORDER_MAKER_ADDRESS } from<\/span> '..\/..\/config'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then we can add the shell for the OrderPage<\/code> component. Add this code to your file:<\/p>\n
const<\/span> OrderPage = ()<\/span> =><\/span> {\n\n}\n\nexport<\/span> default<\/span> OrderPage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we can start filling in this component to finish the logic and UI for users to work with.<\/p>\n
Adding the Blockchain Calls<\/h3>\n
We\u2019ll add the states that we need to handle rendering. Inside the component, add this code:<\/p>\n
const<\/span> [account, setAccount] = useState<string>(''<\/span>)\nconst<\/span> [order, setOrder] = useState(null<\/span>)\nconst<\/span> [orderMaker, setOrderMaker] = useState(null<\/span>)\n\nconst<\/span> web3 = new<\/span> Web3('http:\/\/localhost:7545'<\/span>)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The main thing to note is that we\u2019re creating a new instance of Web3<\/code> that connects to the local EVM. This is similar to how you might define a connection to an API.<\/p>\n
Then we need to set the states for our component based on the data we get from our blockchain connection. To do that, add this code below the EVM connection.<\/p>\n
useEffect(()<\/span> =><\/span> {\n  loadData()\n}, [])\n\nconst<\/span> loadData = async<\/span> () => {\n  const<\/span> accounts = await<\/span> web3.eth?.getAccounts()\n  setAccount(accounts[0<\/span>])\n\n  const<\/span> orderMaker = new<\/span> web3.eth.Contract(\n    ORDER_MAKER_ABI,\n    ORDER_MAKER_ADDRESS\n  )\n  setOrderMaker(orderMaker)\n\n  const<\/span> order = await<\/span> orderMaker.methods.ordersById(1<\/span>).call()\n  setOrder(order)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re calling this loadData<\/code> function in the useEffect<\/code> hook one time when the component is loaded to get the values we need from the EVM.<\/p>\n
Then we define the loadData<\/code> function. This starts by getting all of the account addresses that are on the network and we\u2019re taking the first one to work with. In a production Dapp, you\u2019d have a more sophisticated way to work with addresses.<\/p>\n
Next, we create an object that lets us access the methods and parameters available from the OrderMaker<\/code> smart contract we deployed. We do that by using the contract address and ABI from our configs to connect to this specific smart contract on the network. This is like calling a specific endpoint on an API.<\/p>\n
After that, we get the first order from the smart contract. This was created in the constructor function so we\u2019d have something to read from the blockchain initially. We call the ordersById<\/code> mapping with an id value.<\/p>\n
One thing to note is that we use the call<\/code> method for read requests from the blockchain. This will be an important difference when you see what it looks like to create a new order. We\u2019ll add the function to handle this below the loadData<\/code> function.<\/p>\n
const<\/span> createOrder = async<\/span> (event) => {\n  event.preventDefault()\n\n  const<\/span> { itemName, quantity } = event.target.elements\n\n  await<\/span> orderMaker.methods.createOrder(itemName.value, quantity.value).send({\n    from<\/span>: account,\n    gas<\/span>: 4712388<\/span>,\n    value<\/span>: web3.utils.toWei(\"0.001\"<\/span>)\n  })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This createOrder<\/code> function will take the values from a form submission and store the user\u2019s order on the blockchain. The main thing to note is how we make this call to the smart contract.<\/p>\n
We\u2019re passing the values from the form as the parameters. Then we call the send<\/code> method to execute this transaction on the blockchain. The user\u2019s account address is passed into the send<\/code> method so we know who executed the request.<\/p>\n
Since this is a write request, we need to send some gas with the request. That\u2019s why we\u2019re working with a local EVM so that we do have to spend real Ether.<\/p>\n
We also need to send a payment with the request because we are calling the payable<\/code> function from the smart contract. We\u2019re using toWei<\/code> because this smallest Ether unit and is the standard for working with payments.<\/p>\n
All that\u2019s left is adding the UI. You are welcome to make something far nicer than what we\u2019re about to create, but all of the core functionality will be in place.<\/p>\n
Making the Interface<\/h3>\n
We\u2019ll finish this component by adding the return statement with the elements we want to show the user. Add this code below the createOrder<\/code> function.<\/p>\n
return (\n  <><\/span>\n    <h1<\/span>><\/span>Order from EVM<\/h1<\/span>><\/span>\n    {order &&\n      <><\/span>\n        <div<\/span>><\/span>Item: {order.itemName}<\/div<\/span>><\/span>\n        <div<\/span>><\/span>Price: {order.price}<\/div<\/span>><\/span>\n        <div<\/span>><\/span>Quantity: {order.quantity}<\/div<\/span>><\/span>\n      <\/><\/span>\n    }\n    <form<\/span> onSubmit<\/span>={createOrder}<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>='itemName'<\/span>><\/span>Item Name:<\/label<\/span>><\/span>\n        <input<\/span> name<\/span>='itemName'<\/span> type<\/span>='text'<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>='quantity'<\/span>><\/span>Amount:<\/label<\/span>><\/span>\n        <input<\/span> name<\/span>='quantity'<\/span> type<\/span>='number'<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <button<\/span> type<\/span>='submit'<\/span>><\/span>Submit<\/button<\/span>><\/span>\n    <\/form<\/span>><\/span>\n  <\/><\/span>\n)\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
If we have an order<\/code> set in the component, it\u2019ll render the info directly from the blockchain. We also have a form that will allow us to make new orders on the blockchain by calling the function from our smart contract.<\/p>\n
Here\u2019s what that page should look like when you run your app. In a terminal, go to the root of your project and run the following command:<\/p>\n
$ yarn redwood dev\n<\/code><\/span><\/pre>\n
This will start the dev server and you should see something like this in your browser.<\/p>\n
\"order<\/p>\n
Now you have a fully functional Dapp that stores new info on the blockchain and reads existing info into the browser for your users to see!<\/p>\n
Finished Code<\/h2>\n
You can find the complete code in the order-dapp<\/code> folder of this repo<\/a>.<\/p>\n
You can also check out the front-end code in this Code Sandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
Blockchain technology is just starting to gain traction so there are a lot of differences in jargon and programming workflows that will take time to adjust to. Now is a great time to start learning so that you can be one of the early developers!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27885,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,177,246,371],"class_list":["post-27884","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nHandling Orders using Web3 and Ethereum<\/title>\n<meta name=\"description\" content=\"Learning how to work with smart contracts using tech stacks that you already know is a great way to get started. As long as you're familiar with the concepts of front-end development and how API work, you can pick up the specifics of working with the blockchain. In this tutorial, we'll walk through making a distributed app that lets users pay for orders with one request to the blockchain.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Handling Orders using Web3 and Ethereum\" \/>\n<meta property=\"og:description\" content=\"Learning how to work with smart contracts using tech stacks that you already know is a great way to get started. As long as you're familiar with the concepts of front-end development and how API work, you can pick up the specifics of working with the blockchain. In this tutorial, we'll walk through making a distributed app that lets users pay for orders with one request to the blockchain.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:37:18+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Handling Orders using Web3 and Ethereum\",\"datePublished\":\"2022-03-23T22:37:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/\",\"name\":\"Handling Orders using Web3 and Ethereum\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA\",\"datePublished\":\"2022-03-23T22:37:18+00:00\",\"description\":\"Learning how to work with smart contracts using tech stacks that you already know is a great way to get started. As long as you're familiar with the concepts of front-end development and how API work, you can pick up the specifics of working with the blockchain. In this tutorial, we'll walk through making a distributed app that lets users pay for orders with one request to the blockchain.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA\",\"width\":6000,\"height\":4000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Handling Orders using Web3 and Ethereum\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Handling Orders using Web3 and Ethereum","description":"Learning how to work with smart contracts using tech stacks that you already know is a great way to get started. As long as you're familiar with the concepts of front-end development and how API work, you can pick up the specifics of working with the blockchain. In this tutorial, we'll walk through making a distributed app that lets users pay for orders with one request to the blockchain.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/","og_locale":"en_US","og_type":"article","og_title":"Handling Orders using Web3 and Ethereum","og_description":"Learning how to work with smart contracts using tech stacks that you already know is a great way to get started. As long as you're familiar with the concepts of front-end development and how API work, you can pick up the specifics of working with the blockchain. In this tutorial, we'll walk through making a distributed app that lets users pay for orders with one request to the blockchain.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:37:18+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/"},"author":{"name":"","@id":""},"headline":"Handling Orders using Web3 and Ethereum","datePublished":"2022-03-23T22:37:18+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA","keywords":["Guest Post","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/","name":"Handling Orders using Web3 and Ethereum","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA","datePublished":"2022-03-23T22:37:18+00:00","description":"Learning how to work with smart contracts using tech stacks that you already know is a great way to get started. As long as you're familiar with the concepts of front-end development and how API work, you can pick up the specifics of working with the blockchain. In this tutorial, we'll walk through making a distributed app that lets users pay for orders with one request to the blockchain.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA","width":6000,"height":4000},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/handling-orders-using-web3-and-ethereum\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Handling Orders using Web3 and Ethereum"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925998\/Web_Assets\/blog\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4\/7a1fb0ccd538abe8e409492878fdc400e3f6de91-6000x4000-1_27885121e4.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27884"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27884\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27885"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27884"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27884"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}