This simplifies the process of onboarding users to your application, since they don't have to manually add the network themselves.

In this article, I'll show you how to use JavaScript to programmatically add custom networks to Metamask. Let's begin!

Step 1: Check if Metamask is Installed

The first thing you need to do is check if the Metamask plugin is installed in the user's browser. Fortunately, Metamask makes this easy by injecting an ethereum object into websites that have it installed.

To check for the presence of Metamask, you can simply try to access the ethereum object. You can do this using the following code:

if (typeof window.ethereum !== 'undefined') {  
 console.log("Metamask is installed")
} else {
  console.log("Metamask is not installed")
}

Step 2: Add a Custom Network to Metamask

To programmatically add a custom network to Metamask, you can use the request method of the ethereum object, passing it the wallet_addEthereumChain property.

For example, the following code demonstrates how to add the Matic Network (Polygon) to Metamask:

window.ethereum.request({
  method: "wallet_addEthereumChain",
  params: [{
    chainId: "0x89",
    rpcUrls: ["https://polygon-rpc.com/"],
    chainName: "Matic Mainnet",
    nativeCurrency: {
      name: "MATIC",
      symbol: "MATIC",
      decimals: 18
    },
    blockExplorerUrls: ["https://polygonscan.com/"]
  }]
});

The window.ethereum.request() method takes an object as an argument with the method and params properties. The method property should be set to wallet_addEthereumChain, and the params property should be an array containing an object with the following properties:

• chainId: The chain ID of the custom network which is a 0x-prefixed hexadecimal string.

• rpcUrls: An array of RPC URLs for the custom network.

• chainName: The name of the custom network.

• nativeCurrency: An object with the properties name, symbol, and decimals, representing the name, symbol, and number of decimals of the native currency of the custom network.

• blockExplorerUrls: An array of block explorer URLs for the custom network.

This code will send a request to Metamask to add the Polygon (Matic) Network to the user's wallet. If the request to add the network is successful, window.ethereum.request() will return null. If not successful, it will return an error.

Demo

To demonstrate how you can use this code, let's write a simple function that adds the Matic network when called.

async function addMaticNetwork() {
  try {
    const result = await window.ethereum.request({
      method: "wallet_addEthereumChain",
      params: [{
        chainId: "0x89",
        rpcUrls: ["https://polygon-rpc.com/"],
        chainName: "Matic Mainnet",
        nativeCurrency: {
          name: "MATIC",
          symbol: "MATIC",
          decimals: 18
        },
        blockExplorerUrls: ["https://polygonscan.com/"]
      }]
    });
  } catch (error){
    console.log(error)
  }

The addMaticNetwork function, when called, will invoke the request to add the matic network. This function uses the async/await syntax to handle the request asynchronously, and includes a try/catch block to handle any errors that may occur.

Note: It's important to note that you should never automatically prompt the user to add a network without their explicit consent. Instead, this request should only be made in response to a direct user action, such as clicking a button.

This ensures that the user is fully aware of the change being made to their wallet and can choose to proceed or cancel the operation as they see fit..

Wrapping Up

In this article, you have learned how to programmatically add custom networks to MetaMask using JavaScript.

By implementing these steps in your own DApp, you can provide a seamless onboarding experience for your users and improve their overall experience with your application.

I hope this article was helpful. Remember, the world is your code oyster.

In the cryptoverse, a lot of attention is laid on Bitcoin. But don't let that overshadow the growing interest in Ethereum, which is revolutionizing the way we think of applications.

So, what is a Dapp? A Dapp, or decentralized application, is a software application that runs on a distributed network. It's not hosted on a centralized server, but instead on a peer-to-peer decentralized network.

Alright, that's the short version, but there's a lot more to unpack. Let's dive into the world of Dapps, more specifically those built on the Ethereum protocol.

What is Ethereum?

To understand what a Dapp is, you first need to understand what Ethereum is. Now, there are other protocols that are used to build Dapps, like EOS, NEO, Stellar, Tron, and Cardano, but the big dog is Ethereum.

Ethereum is a network protocol that allows users to create and run smart contracts over a decentralized network. A smart contract contains code that runs specific operations and interacts with other smart contracts, which has to be written by a developer. Unlike Bitcoin which stores a number, Ethereum stores executable code.

So, why should you care?

Because Ethereum removes the need for a third party to handle transactions between peers. Since the middle man is replaced by code, all kinds of costs are reduced, including time and money.

Just like Bitcoin removes the need for someone to hold your money, Ethereum removes the need for someone to broker a deal.

Now you might be wondering, where are all these smart contracts? Well, they're essentially hosted on multiple computer nodes all across the world.

These nodes contain all of the information of all the world's smart contracts, including code, transactions, etc. They're constantly working to keep this information up-to-date so they all have the exact same copy. This what makes smart contracts, and cryptocurrencies in general, decentralized.

And since all of the nodes have the same information and are spread across the world, the removal of a node won't interrupt the execution of any smart contract. Redundancy ensures uptime.

What is a Dapp?

Now that we have a good idea of what Ethereum and smart contracts are, we can start diving into the details of what a Dapp is.

Just to be clear, a Dapp is just like any other software application you use. It could be a website or an app on your phone. What makes a Dapp different than a traditional app is that it's built on a decentralized network, like Ethereum.

When you're creating your own Ethereum smart contracts, you're actually writing a piece of the backend code for your Dapp. And while your Dapp will have a user interface like a traditional app, either all or part of the backend is built on top of Ethereum.

Dapp = frontend + smart contract backend

This backend code is written in an Ethereum-specific language, including Solidity (the most popular), Serpent, and Vyper. Below is an example of a simple "Hello World" contract written in Solidity.

pragma solidity ^0.4.22;

contract helloWorld {
 function printHelloWorld () public pure returns (string) {
   return 'Hello World!';
 }
}

If the smart contract is deployed onto Ethereum's mainnet (i.e., production) or even a local testnet, your Dapp can execute the code in the smart contract by calling the function printHelloWorld().

But what about the frontend? Is there any specific language you need to use for your Dapp?

Nope! You can use whatever frontend language/framework you want. But it is possible to host your frontend code on decentralized storage nodes to make both your frontend and backend decentralized.

Take a look at technologies like Swarm and IPFS to learn more about decentralized storage.

OK, so Dapps are just applications that have some or all of their backend decentralized and possibly even have a decentralized frontend. Why should you care?

The development of Dapps is another step toward a future of the Internet that's commonly referred to as Web 3.0.

Ethereum Dapps: The Backbone of Web 3.0

Since the creation of the Internet, the amount of information and human interaction has exploded. We're able to produce and consume information at near infinite levels.

Unfortunately, the ability to control this information has become heavily centralized over time. This includes information about your social life, health, finances, and much more. Those who control this information are the ultimate owners of it and can use it as they see fit.

These are essentially middle men that hold your information on their centralized servers so they can provide you with services, like holding your money, hosting you website, connecting with family and friends, etc. And at the push of a button, they can completely remove you from accessing this (your?) information and all related services.

This is a monopoly on the information you produce and consume as well as the services you use. Thankfully, Web 3.0 changes all of that and Ethereum Dapps are playing a central role.

Web 3.0 is a lot of things, but at its core is a technology based on decentralization. By decentralizing information and services, large corporations and governments won't be able to control users of the Internet through monopolistic, authoritarian tactics.

Ethereum Dapps, with their ability to decentralize information and services, gives Web 3.0 a platform to deliver a completely free (as in freedom) and accessible Internet for everyone. No longer will there be a central point of control because there won't be middle men to facilitate the flow of information and services.

Some of the most promising Ethereum tokens and Dapps are laying the foundation for the future of the Internet, including:

• Basic Attention Token (BAT): used to improve privacy and value transfer between users, publishers, and advertisers. Used in the Brave browser.
• Golem (GNT): used to run code on one or many distributed compute nodes.
• Minds: a social media platform that improves value transfer between content creators and consumers.
• TokenSets: used to manage cryptocurrency assets via tokenized automated asset management strategies.
• Aave: used to earn interest on cryptocurrency deposits and borrow cryptocurrency assets.
• IDEX: a decentralized cryptocurrency exchange.

Closing Thoughts

Since the creation of Bitcoin, the first cryptocurrency, there's been a massive growth in the cryptoverse.

Being able to store data in a decentralized way was a necessary stepping stone to the decentralization of code execution. With Ethereum, it's now possible to deploy smart contracts across the world to power the backend for existing and future Dapps.

And as more and more Dapps are launched, we'll get closer and closer to a more free, fair, and accessible Internet.

I’m Grant and I’m a freelance SEO and content professional. If you’re looking to grow your brand's organic search traffic, I can help with your fintech SEO. Cheers!

You'll learn how to build 5 Ethereum Dapps. For each of them, this course demonstrates how to:

• develop smart contracts,
• test smart contracts,
• and build a web frontend to interact with the smart contract.

The course covers:

• The architecture of Dapps
• Solidity, the programming language for Ethereum smart contract
• Remix, the online IDE for Solidity
• Truffle, the framework for Solidity smart contracts
• Ganache, the local development Blockchain
• Web3, the JS library to integrate a Dapp frontend
• Metamask, the Ethereum wallet used by most Dapps (browser extension)
• Deployment to public testnet (Ropsten) and mainnet, using Infura API

Watch the full course below or on the freeCodeCamp YouTube channel (5 hour watch).

I started investing in cryptocurrencies last year, and just kept going down the blockchain rabbit hole from there. Where I live especially, much of the blockchain community is focused on things like trading and investing in cryptocurrencies. Although it was fun to invest at first, I wasn’t so interested in that. So I started my own local meetup group to focus on blockchain development.

The meetup group allowed me to connect and learn alongside members of the community, and I’ve used that to compile a list of resources that I, and the other members, have found useful. These resources are arranged from the most basic blockchain explanations to the underlying systems as well as building applications on top of the blockchain.

There is a lot of noise out there. I hope this helps you make sense of it all if you are interested in becoming a blockchain professional.

Table of Contents:

1. Learn the basics
2. Dapp Development with Ethereum
3. Game Theory
4. Cryptography
5. Audio/Supplementary Materials
6. Other Types of Blockchain Development
7. Research

The Basics — How Blockchain Technologies Work

It can take a minute to wrap your head around the complexities of blockchain technologies. This technology encompasses so many different fields: computer science, game theory, cryptography, and economics just to name a few. Thus it’s difficult to initially learn the ins and outs of how it all works.

Here are a few resources that I think give a good, clear overview of how blockchain really works.

1. Start with this video breaking down how it works:

2. Watch both videos here (there is some overlap with the prior resource, but it will cement the concepts in your mind) and play around with the demo on the site:

Blockchain Demo
_A live blockchain demo in a browser._anders.com

3. Read the Chapter “What is Ethereum” from the GitHub book, “Mastering Ethereum”

Dapp Development with Ethereum

There are many different blockchains now that allow you to create applications and smart contracts. Ethereum is by far the most popular option, with Solidity being its dominant programming language. I suggest trying out building dapps with these technologies first.

By far the best way to learn to code with Solidity is Cryptozombies. It’s an interactive coding environment that teaches you how to program Solidity step by step while building a zombie game! It’s kept up to date with new versions of Solidity too, which is hard to come by in the ever-changing blockchain space.

If you want something in addition to Cryptozombies, here are two other recommendations I have for learning solidity:

1. Youtube video series for dapp development — This channel explains things very well, but the syntax isn’t totally up to date so you might have to google some things if you are getting errors. The Remix editor he uses will give you hints about what you need to change, so you should be fine.
2. Stephen Grider on Udemy — this is a paid course, but you can get a deal for ~$9.99 USD and it has good examples and content.

After you finish Cryptozombies, it’s a good idea to learn how to use the Remix IDE for creating, debugging, and deploying contracts. The docs have a quick start and lots of step-by-step instructions with screenshots to get you going.

You should also learn about Ethereum clients and wallets. Those links will explain everything you need to know. Metamask is a browser plugin and a great way to get started (it’s for Chrome or Firefox, but the Chrome one seems to work much better).

Next, learn more advanced smart contract development. Start by reading the Solidity documentation. It goes into more advanced concepts and has some good example dapps, too. Ethereum.org also had some good dapp examples to look through like this one. You can copy the examples straight into the Remix IDE and test them out for yourself.

After you have a good grasp on Solidity and smart contracts, start looking through some open source examples. The default go-to seems to be Crypto Kitties (you can see the contract code at any Ethereum address at etherscan.io), but there are many more that can be great learning tools. You can search GitHub and Etherscan to find more.

There is a lot of development going on in the Ethereum space around developer tools and security. Here are some awesome libraries and tools along those lines that you can check out:

• Open Zeppelin
• Truffle Development Framework
• ConsenSys — Smart Contract Best Practices

Game Theory

Some of the problems that blockchain aims to solve are from game theory, most notably The Byzantine Generals Problem. This problem deals with consensus between many different parties without having to trust that any individual is not malicious.

The Great Courses Plus offers an excellent lecture series on various topics in game theory. They have a monthly subscription model with a two-week free trial. The 24 30-minute lectures cover a broad range of topics in game theory, and I think it’s great for an overall understanding of the subject.

Cryptography

I am definitely not an expert here, but I am continuously learning about how cryptography works and how it can be applied to blockchain. This area does get really deep into the math, as Ethereum and many other blockchains use Eliptical Curve Cryptography.

As a noob in this space, here are some resources I have found useful:

• Coursera Cryptography I — Free to audit the course; paid if you want a certificate.
• Chapter on Cryptography in the Ethereum Mastery book

Audio Supplementary Material

• Podcast: Software Engineering Daily, Blockchain — This is my favorite blockchain podcast. They do a very good job at explaining complex topics and have a variety of industry leaders on the show.
• Podcast: CryptoDisrupted — The host brings in a lot of guests from interesting projects in the blockchain space. I’ve enjoyed most of what I’ve listened to with this podcast.

Other Types of Blockchain Development

The Ethereum community has, by far, the most developers and learning resources, so it’s a good place to get started with blockchain development. I think you would be remiss if you did not explore other innovation in the space, however. Below are some interesting projects.

Lisk — Makes blockchain development more accessible, as everything is built in JavaScript.

EOS — The creator, Dan Larimer, had built several other successful blockchain solutions before starting this project. EOS is supposed to solve some of the problems with Ethereum, like scaling and security. It’s sometimes called, “The Ethereum Killer”.

Interchain Protocols — These are some solutions that help facilitate transactions between different blockchains and also have interesting solutions to help blockchain scale:

1. Cosmos
2. Polkadot
3. Interledger

Hyperledger — An open source collaborative effort created to advance cross-industry blockchain technologies. It’s hosted by The Linux Foundation.

Holo — A post-blockchain technology that attempts to solve the issues of scalability and centralization in today’s blockchain technologies.

Research & Current Development

Once you learn the basics, it’s so important to read research papers to achieve mastery in the blockchain space. Here are some places where I have had success:

• The Morning Paper — Blockchain Articles
• Collection of whitepapers from ICOs
• http://blockchain.mit.edu/
• https://www.blockchainresearchinstitute.org/

Conclusion

I will be continuously studying blockchain development and trying to find new and interesting solutions. Please leave a comment or message me if I am missing anything here.

Right now, I am planning more articles about companies, projects, and people of interest in the blockchain space. Follow me if you are interested in any of these things.

A fun guide to getting started with browser-based ĐApps on IPFS

_[“If you can read this, congratulations—the archive you’re using still knows about the mouseover text”!](https://xkcd.com/1683/" rel="noopener" target="blank" title=")

ĐApps, or decentralized apps, are all the rage right now, particularly over on the Etherium blockchain. But did you know that ĐApps can also run on the Interplanatary File System (IPFS)? You bet, and it’s a lot easier than you might think to get one up and going quickly.

In this post, we’re going to go through the steps required to get an IPFS-based ĐApp going quickly, and easily. We’re going to take advantage of some cool new IPFS browser tools, and my favorite online comic. In doing so, we’re going to help archive a precious resource (xkcd!) for future visitors. So this post has it all: intrigue, excitement, and a commitment to the future of the web!

Archiving the gems of the web

The goal for this tutorial is to create a distributed web ‘clone’ of the xkcd website. We’re going to use IPFS to fetch images from an archive of xkcd comics, and display them in a form familiar to fans of xkcd.

There are several reasons why we might want to do something like this. One, I like xkcd comics, and am always looking for an excuse to play around with them. Two, xkcd, along with several other archived resources, are available via the IPFS archives, which make them a handy example. Three, and this one is important, building content-based ĐApp on top of IPFS can help to archive the web!

What do I mean by that? Well, trends change, interests wain, and the Internet is a fickle place. Couple this with the increasing costs of maintaining servers, updating infrastructure, and keeping up with the latest trends, and you’ve got a recipe for dead links. IPFS and the distributed web is a great way to help combat link rot.

Take our xkcd ĐApp for example. In a moment, we’re going to write some very simple JavaScript that will load a random xkcd comic each time our ĐApp is accessed. And so every time someone visits the ĐApp, the peer running in their browser fetches that comic, and temporarily caches that item, making it possible for others to retrieve it as well. In fact, the more we use the ĐApp, the better it is able to distribute and archive xkcd.

The more we access and use things on the distributed web via IPFS, the more likely they are to stick around long-term — tweet it

This is a really powerful idea: the more we access and use things on the distributed web via IPFS, the more likely they are to stick around long-term. And what about things that are important but less popular (like historical documents)? This is where things like Filecoin will help to pick up the slack. In the filecoin world, rather than relying on popularity to preserve documents and files, you can pay the network to store these things for you. It’s a very cool idea.

Getting started

For those of you who can’t wait, the full ĐApp is available from the Textile GitHub repo. Feel free to clone that, and follow along with the code to make getting started easier. And since you’ve just saved yourself some time, why not watch this great video on the IPFS vision by Juan Benet before moving on. You can also check out a ‘live’ version here.

For those of you who want a step-by-step approach, here are a few setup steps to get you started.

First, clone our vanilla IPFS Dapp Template, and change into the new directory:

git clone https://github.com/textileio/dapp-template.git xkcd-dappcd xkcd-dapp

This template is pretty simple, and has fairly minimal dependencies. Most of the dev dependencies are just for transpiling JavaScript so that we can run our ĐApp in the browser. For details on all those packages, refer to their respective GitHub repos, or get in touch to ask a question or two.

So first things first, check out the README.md file from the repo. You’ll notice it says this app works best with window.ipfs, and that you can install the IPFS Companion web extension by clicking on one of the links.

The IPFS Companion is a browser extension that simplifies access to IPFS resources by running a JavaScript IPFS peer in your browser. Even better than this, it can expose an embedded IPFS node as window.ipfs on every webpage! This makes it possible for our ĐApp to detect if window.ipfs exists and opt-in to use it instead of creating our own one-off js-ipfs node. It is not required for running ĐApps, but it does make them run better (faster), and I highly recommend installing it.

But, we can’t expect the users of our ĐApp to install a browser extension before being able to use our ĐApp. So there is a nice JavaScript module called [window.ipfs-fallback](https://github.com/tableflip/window.ipfs-fallback), which will detect the presence of window.ipfs and automatically fall back to downloading the latest version of IPFS from the CDN if it’s unavailable. So when building a ĐApp, it’s always a good idea to include this — and you get window.ipfs for free if available. Nice!

Ok, so just to make sure things are working nicely, let’s go ahead and install our required dependencies, and build and run our ĐApp locally. Enter the following into your terminal:

yarn installyarn buildyarn start

You should see a pretty minimal (blank page) ĐApp with a footer and not much else. Now go ahead and open your Javascript developer console (Chrome:Ctl+Shift+J(Command+Option+Jon Mac), Firefox: Ctrl+Shift+K(Command+Option+Kon Mac), Safari: Command+Option+I). You should see something like running js-ipfs/0.29.2 with ID Qm{hash} where Qm{hash} is a long alphanumeric hash that represents your peer id.

Congrats, you are successfully running a ĐApp on the decentralized web! Now let’s make it do something interesting…

Fetching data on the distributed web

Ok, let’s add some functionality to our ĐApp. We’ll start by simply fetching a random xkcd comic and displaying it on a blank page. Simple enough right? First, rather than yarn starting our app, let’s yarn watch it so that any changes we make to the JavaScript will automatically be reflected when we refresh our browser window.

Now, you can go ahead and modify the setup function in src/main.js with the following code:

There’s a lot to parse there, but basically what is happening is:

• Lines 3 & 5 are defining which random comic to fetch (from our archive)
• Lines 8 & 10 are initializing an IPFS peer node, and connecting to a peer known to be pinning the xkcd archive (this second step isn’t always required, but I added it here to help bootstrap the ĐApp)
• Line 14 is really the IPFS ‘magic’…it is fetching the files at the given CID and returning a promise, which we await and then do some work with in lines 15 to 27…
• Lines 15 & 16 simply loop through the binary objects returned from the previous step, and look for the actual png image
• Lines 18 & 20 convert the binary image data to a base64 encode string
• And finally, lines 22 through 27 create an image element and add it to the ‘main’ div for display.

Done!

Cleaning things up

From here, any additional changes are simply to make the ĐApp look and feel more like the original xkcd comic webpage.

I won’t go into the details in this post, but you can take a look in the xkcd-dapp-demo repo for the full code example. There, I’ve added the nav buttons and styling from the xkcd website, along with some links to proper attribution, license information, and other goodies. We even have the fun hover comments! It’s almost all vanilla ES6 JavaScript, and I take good advantage of async/await patterns to make the code nice and readable.

So as you can see, it is relatively easy to get started making ĐApps on IPFS. Our xkcd ĐApp works best when run a) locally (via yarn start for example), and b) with the IPFS Companion browser extension enabled. If you want, you can actually fire up a local IPFS daemon, and run ipfs add -r dist/, to add the whole ĐApp to IPFS. Now, you can test it through your local IPFS gateway: http://localhost:5001/ipfs/Qm{hash}/(if your code isn’t identical to mine, your CID hash might differ, use the one output from the above ipfs add command).

Wrapping up

We hope that our template will provide a quick and easy means to bootstrap additional ĐApps, and that the community of IPFS-based ĐApps will continue to grow. At Textile, we’d really like to support a community of ĐApps around IPFS, so if you decide to use our template, let us know, and we’d be happy to add a link to our template repo. We’ll also keep an eye out for forks and try to promote them as best we can.

We hope you enjoyed our quick introduction to ĐApps on IPFS. If you enjoyed this, come check us out and learn more about what we’re up to. While you’re at it, jump on the Textile Photos waitlist to request early access to a whole new way to control your photos, that also runs on IPFS and the permanent web.