Tutorials on Ethereum

Photo by Radek Grzybowski on Unsplash In this tutorial, we'll create a simple single-page etherscan in reactjs. For the clean UI, we are going to use the amazing semantic-ui-react which is the official react integration for semantic-ui . Without wasting any time let's build it. I am assuming that you have a basic understanding of reactjs and components. We are using create-react-app as a boilerplate. Follow this link to learn more about it. Open a terminal and run etherscan-react is the name of the project. You can name it anything you like. Once it is installed, open the terminal in the project and run npm start . Go to localhost:3000 . You can see the boilerplate homepage. Now, our react boilerplate is ready. Following packages are required in this project. To make http request we are using axios . We are going to use Etherscan API to get the ethereum blockchain data like the latest block details, transaction detail, ether price etc. Follow this link to register for an Etherscan account. Sign in if you already registered. Go to the API-Keys section on the left side. Create a new api key token. Give eth-react as the app name. You can give it any name. Note down the API-KEY. Open the public/index.html in the editor. Import the semantic-ui cdn in the head of the index.html . You can check the latest version of semantic-ui from this link . Change the title of the application. Open the project in your favourite code editor. I am using VS Code. Create a components folder inside the src . Inside the components create the following components. The directory structure of the Header Open the Header.jsx in the editor and paste the below code. Here we are creating a function component by name AppDashboard and then we are exporting it at line 16. To learn more about the Header component, check out the official documentation . Open the header.css and paste the below css. Open the index.js . From the index.js we will export the Header.jsx . Instead of updating the app.js at once, we'll update as it required. Now, Open the app.js in the editor and paste the below code. Open the terminal in the project's root directory and run npm start . Go to browser, you will see the Header. The directory structure of the Eth-Overview Open the Eth-Overview.jsx in the editor and paste the below code. Don't panic, let me breakdown the code for you so that you can understand. Open the index.js . From the index.js we will export the Eth-Overview.jsx . The directory structure of the Latest-Blocks Open the Latest-Blocks.jsx in the code editor and paste the below code. This component will fetch the latest 5 blocks from the etherscan and returns the table. You can increase the no. of blocks to fetch inline 29. Open the index.js . From the index.js we will export the Latest-Blocks.jsx . The directory structure of the Latest-Txs Open the Latest-Txs.jsx in the code editor and paste the below code. This component will fetch the latest 5 transactions of the latest block from the etherscan and returns the table. You can increase the no. of transactions to fetch inline 36. Open the index.js . From the index.js we will export the Latest-Blocks.jsx . Now, Open the app.js in the editor and paste the below code. Open the terminal in the project's root directory and run npm start . Go to the browser and run localhost:3000 . Congratulations, you just created your own etherscan dashboard. Now, you can integrate other etherscan api and add more feature to your etherscan dashboard. You can find the complete code in the GitHub . Check out my other articles and tutorials on my blog . If you like my work and want to support me. You can buy me a coffee.

React Native has established itself as one of the leading frameworks for hybrid mobile development. According to statista.com the global average of mobile users is currently at 70% with mobile devices accounting for about half of web page views. Mobile apps are becoming (if not already) the means for us connecting with each other across the world, and thus this has serious implications for how we conduct our finance. Special thanks to fmsouza developing a scaffold for this implementation. Ethereum is a global, open-source platform for decentralized applications . On Ethereum, we can write code that controls digital value and essentially program our money . So let's jump right into it. 🚀 We are going to build React Native dApp that can For reference here's the repo : I am currently in the process of upgrading a number of packages that are old in this project, as well as migrating to React Hooks but in the interim, this should get people started. I will write a separate article with the refactored code. I'll be using react-native init to create this project. I am using React Native version 0.59.9 , because there have been issues integrating with React Native 0.6+. I will address those in a separate article. Run the following command this will, of course, add all the necessary dependencies to create a basic functioning react native app. I'll be using a variety of different packages to build this app, in particular: I will utilize other dependencies and dev dependencies which I will mention at particular snippets, but for the purposes of this article, I chose to highlight the main packages. So if you have any familiarity with redux then you may already understand what a store is, for those of of you who don't, The main responsibility of stores is to move logic and state out of your components into a standalone testable unit. You can read more here we use the @action decorator on any action that is going to modify an observable . Here we a variety of functions related to the manipulation of a particular instance of wallet's state. Here we deal with pending transactions, updating wallet history and reseting our stores. These make specific modifications on our state but are not directly called from components, which just adds another layer of modularization and follows general Flux architecture. Our Actions will be responsible for this. This store is responsible for dealing with our conversion to FIAT, here we set the various conversion rates that we would like to display to the user. These interact with our external providers, such as ethers.js or any http requests (to get our crypto rates or blockchain transactions), using axios , as well as persistent storage (for storing our private 🔑 . For example we get our prices and blockchain transactions from our api.js service, our getPrice gets the FIAT rates returned as a json object. Here's another example where we actually send the ether to another address. So these files wrap it all together, and are slightly distinguished from typical actions in a flux architecture in that these are responsible for changing state, calling services (which are more than likely asynchronous) and returning the result. They are called directly from components and I think it allows for more testable units when they are segregated in this way. Here's an example of how our transactions actions file. Here we handle sending ether to another wallet. As you can see we make calls to the @actions that we defined in our stores whilst making calls to our services such as TransactionsService which handles the actual sending of the ether from Address A to Address B using ethers.js as well as some other error handling. After we send that ether, we want to update our wallet to reflect that transaction in our history, and the wait for it to be confirmed i.e. for a Transaction receipt once the transactionHash has been mined, then notify our user that is has been confirmed. Here's an example now, of how this type of modularity makes testing easy I can call send a ether essentially from loading a wallet, creating a transaction and then awaiting it to be confirmed, and if I have issues I know that I won't have to debug my loadWalletFromPrivateKey or createTransaction function, nor the instantiation of a wallet. So as you can tell from the package.json I used NativeBase components to make life a bit easier, rather than completely solely custom components. On the home page, we want to load the wallets a user may have, but if they have not created any, then we want to prompt them to do so. We use a FlatList to list the existing wallets and our NoWallet component handles the initial step of the Wallet creation process. On ComponentDidMount we call the populate function which dispatches the loadWallets and getPrice functions, that will load the wallets and display their total unspent outputs or 'value' in FIAT. This component is pretty straightforward, we have a FAB to add a new wallet, which then takes them to the CreateWalletPage where we actually handle the creation of a wallet. This page handles the initial phase of creating a wallet, here we inform the user that they will be given a sequence of words known as mnemonic phrase which they will use to recover their wallet if they want to transfer it to another device. Here we use a utility function we built which relies on ethers to generate a mnemonic for the user that will be sufficiently strong to generate a binary seed which can be used for a deterministic wallet as well as easy enough to remember by a human, as outlined in bip-0039 spec . We then reveal it to the user, store it, and then request that the user confirm it on the ConfirmMnemonic page. Once they confirm it accurately, we store the mnemonic which can then use to create an HDNode Once the user has confirmed their mnemonic on the ConfirmMnemonic page , then we re-direct them to the wallets overview page so that they can see there newly created wallet! 🥳 Now we will go through the various pages involved in sending ether to another address from the wallet that has been created. The user would be on the WalletsOverview page, where they could then select a wallet, which would carry them to the WalletDetails page where they could then select the option to SendCoins which would then allow them to enter the amount, they then go to SelectDestination where they enter the recipient wallet's address (via manual or QR code) and then confirm the transaction. They enter the amount then ago ahead to select destination. Here the user may enter a destination address via a QR Code Input or select one of the Recently added addresses. The main component here is the custom Camera component which I will show below, which scans the QR Code then vibrates to let the user know it's successful. Once we have acquired the address we store it in the state so the user can then confirm the transaction. Now it's time for the user to confirm the transaction, then actually send the ether On ComponentDidMount we want to create a transaction so that if the user has confirmed that everything is ok, we call can call the onPressSend function which will call our TransactionActions to then send the ether to the recipient wallet. We want to generate a QR Code that another user may scan to send us Ether, and then this will be displayed to the user once the transaction hash is confirmed on the blockchain and loaded on our WalletOverview so our ReceiveCoins component handles this. We use react-native-qrcode-svg to generate this QR code and also allow the user to copy the address to their clipboard (in the case there is no QR Scanner) using Clipboard . And that's it! A very basic implementation of a wallet to get started building more complex dApps on React Native. Hope you enjoyed this tutorial and look out for more!