{"id":28482,"date":"2022-03-23T22:57:59","date_gmt":"2022-03-23T22:57:59","guid":{"rendered":"http:\/\/Making-a-User-Interface-for-DApps"},"modified":"2022-03-23T22:57:59","modified_gmt":"2022-03-23T22:57:59","slug":"making-a-user-interface-for-dapps","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/","title":{"rendered":"Making a User Interface for DApps"},"content":{"rendered":"

As much of a buzz term as blockchain has become, it\u2019s still a great technology. To take some of the magic out of it, blockchain is essentially a distributed database. A blockchain is made of blocks that contain data and those blocks are chained together across multiple machines, which make up the distributed network.<\/p>\n

In this article, we\u2019ll build a distributed app in the Redwood framework that handles video data. We\u2019ll make a smart contract to handle our blockchain interactions. Then we\u2019ll set up the Redwood distributed app that will work with the blockchain.<\/p>\n

Background on DApps<\/h2>\n

A DApp is very similar to a regular app. The only difference is that the back-end runs on a decentralized network instead of a central server that might host APIs or other services. It uses the Ethereum<\/a> blockchain to store data and it has smart contracts to handle the business logic.<\/p>\n

By using smart contracts, DApps don\u2019t have an owner. A smart contract is like a set of rules that every part of the network has to follow. Once the smart contract has been deployed to Ethereum, you can\u2019t change it. That means no companies or individuals can change the instructions for that set of rules in any way.<\/p>\n

Ethereum<\/h3>\n

For a little context, Ethereum is a decentralized, open-source blockchain that has smart contract functionality. This is used as the network to host smart contracts. Anybody can join an Ethereum network and they will automatically follow the rules in the smart contract.<\/p>\n

Setting up a Redwood app<\/h2>\n

Now that we have a little background on what we\u2019ll be making, let\u2019s start by making the Redwood app. To do this, open a terminal and run:<\/p>\n

yarn create redwood-app user-dapp\n<\/code><\/span><\/pre>\n
This will generate new directories and files for the project that covers everything from the front-end to the back-end, including a database. Even when you\u2019re working with a DApp, there might be reasons you want to track data in a more common way, like easier data processing.<\/p>\n
With the app created, you should see two main directories: api<\/code> and web<\/code>. The api<\/code> folder holds all of the logic for the GraphQL back-end and the code to manage the database transactions. The web<\/code> folder, which is where we\u2019ll be focused, holds all of the front-end logic and user interface.<\/p>\n
Some Installations<\/h2>\n
You\u2019ll need to download Ganache<\/a> to set up a local Ethereum network that you can develop on. Once you have it installed, you can use the \u201cQuickstart\u201d option.<\/p>\n
You\u2019ll also need to install Truffle with the following command in the web<\/code> directory.<\/p>\n
yarn add truffle\n<\/code><\/span><\/pre>\n
This is how we\u2019ll deploy the smart contract to the local Ethereum network.<\/p>\n
There are a few dependencies that need to be installed too. In the web<\/code> directory run:<\/p>\n
yarn add truffle truffle-contract web3\n<\/code><\/span><\/pre>\n
This gives us everything we need for the smart contract.<\/p>\n
Initializing the Truffle project<\/h2>\n
Now run the following in the web<\/code> directory:<\/p>\n
yarn truffle init\n<\/code><\/span><\/pre>\n
This will create an initial migration and the smart contract for it in the web<\/code> directory. Now we\u2019ll jump straight into some code since we have everything set up.<\/p>\n
Writing the smart contract<\/h2>\n
Inside the web > contracts<\/code> directory, add a new file called VideoList.sol<\/code>. This is where we\u2019ll write some Solidity<\/a> code to define the rules for this contract. It looks very similar to JavaScript, but it\u2019s not the same language. Copy and paste the following code into this new file.<\/p>\n
pragma solidity ^0.5<\/span>.0<\/span>;\n\ncontract VideoList {\n  uint public videoCount = 0<\/span>;\n\n  struct Video {\n    uint id;\n    string url;\n  }\n\n  mapping(uint<\/span> =><\/span> Video) public videos;\n\n  constructor<\/span>() public {\n    createVideo(\"https:\/\/res.cloudinary.com\/milecia\/video\/upload\/c_pad,h_360,w_480,q_70,du_10\/elephant_herd.mp4\"<\/span>);\n  }\n\n  function<\/span> createVideo<\/span>(string memory _content<\/span>) public<\/span> <\/span>{\n    videoCount ++;\n    videos[videoCount] = Video(videoCount, _content);\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s walk through what happened here. We start by defining the version of Solidity we want to work with. Then we create the definition for the contract. In this example, the contract is called VideoList<\/code>.<\/p>\n
In the contract, we have a publically exposed videoCount<\/code> variable that holds how many videos have been added to the blockchain.<\/p>\n
Next, there\u2019s a struct<\/code> that defines a Video<\/code> record. It has an integer id<\/code> value and a string url<\/code> value. Then we map all of the videos into a public videos<\/code> array.<\/p>\n
Using the constructor<\/code>, we add a default video to the blockchain when the smart contract is deployed. Lastly, we have a function that will let us add new videos to the blockchain.<\/p>\n
This is the whole smart contract! All that\u2019s left to do is create a migration for it and deploy it to the local blockchain.<\/p>\n
Migrations and deploys<\/h3>\n
Before we actually do the migration and deploy, there\u2019s a little config file we need to add. In the web<\/code> directory, add a new file called truffle-config.js<\/code>. Inside the file, paste 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> \/\/ so it can match any network id<\/span>\n    }\n  },\n  solc<\/span>: {\n    optimizer<\/span>: {\n      enabled<\/span>: true<\/span>,\n      runs<\/span>: 200<\/span>\n    }\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is how we connect to the local Ethereum blockchain that\u2019s running through Ganache. These are the default values in Ganache and you can see them directly in the app.<\/p>\n
\"Ganache<\/p>\n
Then we\u2019ll need to add a new migration file to the migrations<\/code> folder. Create a new migration file called 2_deploy_contracts.js<\/code>. We put the number at the beginning of the migration file so the network knows which order they should be run in.<\/p>\n
Open this file and add the following code.<\/p>\n
const<\/span> VideoList = artifacts.require(\".\/VideoList.sol\"<\/span>);\n\nmodule<\/span>.exports = function<\/span>(deployer<\/span>) <\/span>{\n  deployer.deploy(VideoList);\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is how we deploy the VideoList<\/code> smart contract we created.<\/p>\n
With this in place, we can run the migration for the smart contract. In the web<\/code> directory, run:<\/p>\n
truffle migrate\n<\/code><\/span><\/pre>\n
You should see that the migration has run successfully. Now let\u2019s take a look at the smart contract in the Truffle console. We\u2019ll need the address of the smart contract for a later part of this article, so let\u2019s grab it while we\u2019re here.<\/p>\n
In the web<\/code> directory, run:<\/p>\n
truffle console<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This should bring you to an instance of the smart contract we deployed with the migration. Let\u2019s run so code in the console to get an instance of the contract with a function.<\/p>\n
videoList = await<\/span> VideoList.deployed()\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We have to interact with the blockchain in an async manner, that\u2019s why we\u2019re using the await<\/code> keyword in the Truffle console. Now let\u2019s get the address for this contract because we\u2019ll need it in the DApp.<\/p>\n
videoList<\/span>.address<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
This should return a string similiar to this:<\/p>\n
0x82293fe0BE6cCbA6Eb9bd6d5824fC6ACeB6d3957<\/code><\/p>\n
Since we have the smart contract built and deployed, we can turn our attention to the DApp which uses the data from the blockchain.<\/p>\n
Working on the front-end<\/h2>\n
We\u2019ll take advantage of a Redwood command to get started on the front-end. We need a page that lets users interact with the DApp. Leave the web<\/code> directory and go to the project root in the terminal and run the following command.<\/p>\n
yarn rw g page dapp \/\n<\/code><\/span><\/pre>\n
This will generate the page component, a Storybook component for the page, and a test for the page. It\u2019ll also add the route for this new page to the Routes.tsx<\/code> file. Since we added the \/<\/code> in the generate command above, it makes this new page the root page for the app.<\/p>\n
Back in the web<\/code> directory, take a look inside src > pages > DappPage<\/code>. This has all the files we talked about. Our focus will be on DappPage.tsx<\/code>. Open this file and delete everything out of it.<\/p>\n
Connecting to the Ethereum blockchain with Web3.js<\/h3>\n
The first thing we need to do is make a new file called config.tsx<\/code> in the web > src<\/code> directory. This is where we\u2019ll add some config values that let the front-end connect to the blockchain network we have running with Ganache.<\/p>\n
Remember that address we got for our smart contract earlier? It\u2019s ok if you don\u2019t. All you have to do is open a terminal in the web<\/code> directory and run the following commands to get that address again.<\/p>\n
truffle console<\/span>\nvideoList = await<\/span> VideoList.deployed()\nvideoList.address\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the config.tsx<\/code> file, add the following line with your own smart contract address.<\/p>\n
export<\/span> const<\/span> VIDEO_LIST_ADDRESS = '0x82293fe0BE6cCbA6Eb9bd6d5824fC6ACeB6d3957'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, you\u2019ll have to get an array of values for the ABI of the smart contract. This describes the smart contract behavior and functionality to the front-end. You\u2019ll find this in web > build > contracts > VideoList.json<\/code>. In the json file, you\u2019ll see a key-value pair named "abi"<\/code>. Copy that whole array and add the following code to config.tsx<\/code> like this.<\/p>\n
export<\/span> const<\/span> VIDEO_LIST_ABI: any = [\n  {\n    \"constant\"<\/span>: true<\/span>,\n    \"inputs\"<\/span>: [],\n    \"name\"<\/span>: \"videoCount\"<\/span>,\n    \"outputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"\"<\/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>: \"0xc61b5f4c\"<\/span>\n  },\n  {\n    \"constant\"<\/span>: true<\/span>,\n    \"inputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      }\n    ],\n    \"name\"<\/span>: \"videos\"<\/span>,\n    \"outputs\"<\/span>: [\n      {\n        \"name\"<\/span>: \"id\"<\/span>,\n        \"type\"<\/span>: \"uint256\"<\/span>\n      },\n      {\n        \"name\"<\/span>: \"url\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      }\n    ],\n    \"payable\"<\/span>: false<\/span>,\n    \"stateMutability\"<\/span>: \"view\"<\/span>,\n    \"type\"<\/span>: \"function\"<\/span>,\n    \"signature\"<\/span>: \"0xe6821bf5\"<\/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>: \"_content\"<\/span>,\n        \"type\"<\/span>: \"string\"<\/span>\n      }\n    ],\n    \"name\"<\/span>: \"createVideo\"<\/span>,\n    \"outputs\"<\/span>: [],\n    \"payable\"<\/span>: false<\/span>,\n    \"stateMutability\"<\/span>: \"nonpayable\"<\/span>,\n    \"type\"<\/span>: \"function\"<\/span>,\n    \"signature\"<\/span>: \"0x8e878969\"<\/span>\n  }\n]\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With this config file in place, let\u2019s import a few things in DappPage.tsx<\/code>.<\/p>\n
import<\/span> { useState, useEffect } from<\/span> 'react'<\/span>\nimport<\/span> Web3 from<\/span> 'web3'<\/span>\nimport<\/span> { VIDEO_LIST_ABI, VIDEO_LIST_ADDRESS } from<\/span> '..\/..\/config'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now let\u2019s build the DappPage<\/code> component. We\u2019ll start with just the outline of the component and a few states.<\/p>\n
export<\/span> const<\/span> DappPage = ()<\/span> =><\/span> {\n  const<\/span> [account, setAccount] = useState<string>(''<\/span>)\n  const<\/span> [videoList, setVideoList] = useState<any>()\n  const<\/span> [videos, setVideos] = useState([])\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we\u2019ll call the function that will connect to the Ethereum network. We\u2019re using the useEffect<\/code> hook here because we only want this to happen when the page initially loads. So right below the states we defined, add this code.<\/p>\n
useEffect(()<\/span> =><\/span> {\n  loadData()\n}, [])\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Let\u2019s jump into writing the loadData<\/code> method. This is where we\u2019ll actually connect to the network and read data from the blockchain.<\/p>\n
const<\/span> loadData = async<\/span> () => {\n  const<\/span> web3 = new<\/span> Web3('http:\/\/localhost:7545'<\/span>)\n\n  const<\/span> accounts = await<\/span> web3.eth?.getAccounts()\n\n  setAccount(accounts[0<\/span>])\n\n  const<\/span> videoList = new<\/span> web3.eth.Contract(VIDEO_LIST_ABI, VIDEO_LIST_ADDRESS)\n  setVideoList(videoList)\n\n  const<\/span> videoCount = await<\/span> videoList.methods.videoCount().call()\n\n  for<\/span> (var<\/span> i = 1<\/span>; i <= videoCount; i++) {\n    const<\/span> video = await<\/span> videoList.methods.videos(i).call()\n    setVideos([...videos, video])\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is an async function because we want to wait for the blockchain to handle the request. We make a new instance of Web3<\/code> that connects to the local Ethereum blockchain we have running. Then we get the accounts associated with this blockchain and grab the first one. We\u2019ll need this a little later.<\/p>\n
Next, we pass in the config values we wrote earlier to interact with the smart contract. We\u2019re getting the videoList<\/code> contract and fetching the videoCount<\/code> to see how many videos are available.<\/p>\n
Then we loop through all of the videos in the blockchain and save them to the app\u2019s state.<\/p>\n
Now we can return a view to the page that displays the smart contract id and the videos we\u2019ve fetched from the blockchain. Right below the loadData<\/code> method, add the following return statement.<\/p>\n
return<\/span> (\n  <div<\/span>><\/span>\n    Dapp account id: {account}\n    <ul<\/span> id<\/span>=\"videoList\"<\/span>><\/span>\n      {videos.map((video, key) => {\n        return (\n          <div<\/span> key<\/span>={key}<\/span>><\/span>\n            <label<\/span>><\/span>\n              <video<\/span> src<\/span>={video.url}<\/span>><\/span><\/video<\/span>><\/span>\n            <\/label<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        )\n      })}\n    <\/ul<\/span>><\/span>\n  <\/div<\/span>><\/span><\/span>\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
If you go to the root of the project in a terminal and run yarn rw dev<\/code>, you should see something similar to this in the browser.<\/p>\n
\"Dapp<\/p>\n
You\u2019ve officially connected an app to an Ethereum blockchain using a smart contract you wrote! All that\u2019s left is adding a way for users to add new videos to the blockchain.<\/p>\n
Adding the videos to the blockchain<\/h2>\n
For the last bit of functionality, we\u2019ll use the Cloudinary upload widget to add videos directly to the blockchain.<\/p>\n
We need to add the react-cloudinary-upload-widget<\/code> package in a terminal in the web<\/code> directory.<\/p>\n
yarn add react-cloudinary-upload-widget\n<\/code><\/span><\/pre>\n
Then we\u2019ll add another import line to DappPage.tsx<\/code> below the others.<\/p>\n
import<\/span> { WidgetLoader, Widget } from<\/span> 'react-cloudinary-upload-widget'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we can write the function to add a video to the blockchain. After the loadData<\/code> function, add this code.<\/p>\n
const<\/span> createVideo = (content<\/span>) =><\/span> {\n  videoList.methods.createVideo(content).send({ from<\/span>: account, gas<\/span>: 4712388<\/span> })\n    .once('receipt'<\/span>, (receipt) => {\n      console<\/span>.log(receipt)\n    })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is how we use the createVideo<\/code> method we defined in the smart contract. One thing to note is that we need to send a certain amount of gas with this request. The amount of gas you have is tied to the account you\u2019re connected with. Each transaction in a smart contract has a gas price, but since we didn\u2019t change any default values 4712388<\/code> is what the contract expects as a gas payment.<\/p>\n
Now we\u2019ll define the callback that will give us a response from Cloudinary when the video has successfully uploaded. Right below the createVideo<\/code> function we just wrote, add this.<\/p>\n
const<\/span> successCallBack = (results<\/span>) =><\/span> {\n  const<\/span> videoInfo = results.info\n  const<\/span> url = videoInfo.url\n\n  createVideo(url)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This will be called in the Widget<\/code> when we get a success response from Cloudinary. It\u2019ll take the URL from Cloudinary and add it to the blockchain. That means it\u2019s finally time to add that widget to the return statement. Below the line that displays the account id, add the following code.<\/p>\n
<WidgetLoader \/>\n<Widget\n  sources={['local'<\/span>, 'camera'<\/span>]}\n  cloudName={'test_name'<\/span>}\n  uploadPreset={'fwe9ewffw'<\/span>}\n  buttonText={'Open'<\/span>}\n  style={{\n    color: 'white'<\/span>,\n    border: 'none'<\/span>,\n    width: '120px'<\/span>,\n    backgroundColor: 'green'<\/span>,\n    borderRadius: '4px'<\/span>,\n    height: '25px'<\/span>,\n  }}\n  folder={'test0'<\/span>}\n  onSuccess={successCallBack}\n\/>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This is how we connect to Cloudinary and get URLs for videos we upload. You\u2019ll need to log in to your Cloudinary account and get the cloudName<\/code> and uploadPreset<\/code> name from the dashboard. Now you should see a new \u201cOpen\u201d button in the browser.<\/p>\n
\"video<\/p>\n
If you click that button, you\u2019ll see the upload widget.<\/p>\n
\"upload<\/p>\n
Go ahead and upload a new video and then reload the page. You should see your new video similar to this.<\/p>\n
\"second<\/p>\n
You have a fully functioning DApp now! Feel free to add more functionality to the smart contract!<\/p>\n
Finished code<\/h2>\n
You can check out some of the code in this Code Sandbox<\/a> or clone the project from the user-dapp<\/code> folder of this repo<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
DApps are a cool way to interact with blockchains. Some good next steps would be learning more about Solidity and smart contracts or just making more DApps with other frameworks!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28483,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,246,371,303],"class_list":["post-28482","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nMaking a User Interface for DApps<\/title>\n<meta name=\"description\" content=\"There are a lot of cool uses for blockchain. So let's take a look at what tracking videos might look like.\" \/>\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\/making-a-user-interface-for-dapps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Making a User Interface for DApps\" \/>\n<meta property=\"og:description\" content=\"There are a lot of cool uses for blockchain. So let's take a look at what tracking videos might look like.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:57:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"5568\" \/>\n\t<meta property=\"og:image:height\" content=\"3712\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Making a User Interface for DApps\",\"datePublished\":\"2022-03-23T22:57:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/\",\"name\":\"Making a User Interface for DApps\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA\",\"datePublished\":\"2022-03-23T22:57:59+00:00\",\"description\":\"There are a lot of cool uses for blockchain. So let's take a look at what tracking videos might look like.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA\",\"width\":5568,\"height\":3712},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Making a User Interface for DApps\"}]},{\"@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":"Making a User Interface for DApps","description":"There are a lot of cool uses for blockchain. So let's take a look at what tracking videos might look like.","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\/making-a-user-interface-for-dapps\/","og_locale":"en_US","og_type":"article","og_title":"Making a User Interface for DApps","og_description":"There are a lot of cool uses for blockchain. So let's take a look at what tracking videos might look like.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:57:59+00:00","og_image":[{"width":5568,"height":3712,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/"},"author":{"name":"","@id":""},"headline":"Making a User Interface for DApps","datePublished":"2022-03-23T22:57:59+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA","keywords":["Guest Post","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/","name":"Making a User Interface for DApps","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA","datePublished":"2022-03-23T22:57:59+00:00","description":"There are a lot of cool uses for blockchain. So let's take a look at what tracking videos might look like.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA","width":5568,"height":3712},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/making-a-user-interface-for-dapps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Making a User Interface for DApps"}]},{"@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\/v1681924406\/Web_Assets\/blog\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e\/064ea11510012851a05f980b82cf2a89aeb652e5-5568x3712-1_284832354e.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28482","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=28482"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28482\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28483"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28482"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28482"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28482"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}