Learn to build on Polygon with Figment Learn

Polygon 101

Matic was mostly a scaling solution (“Layer 2”) for Ethereum until it rebranded to Polygon and became a much more ambitious blockchain interoperability project (like Polkadot and Cosmos). Polygon seeks to broaden the horizons of cryptocurrency adoption by ensuring that transactions are affordable and fast, compatible with a variety of scaling solutions.

Polygon

< 1 hour

1 hour

1.5 hours

2 hours +

Beginner

Intermediate

JS/TS

Solidity

EVM compatibility

High Throughput

React

NodeJS

Smart contracts

Truffle

Javascript

Metamask

Remix

IPFS

Hardhat

Next.js

Tools & Infra

Time Commitment

Difficulty

Programming Language

Feature

Technology

# Ethers.js

To manage our connection with Polygon and interact with smart contracts, we can use a popular and [well-tested](https://docs.ethers.io/v5/testing/) JavaScript library called [**ethers.js**](https://docs.ethers.io/v5/api/). We can connect to and perform operations with Polygon using ethers' API with only a few lines of code. 

In ethers, a **provider** is a read-only abstraction to access the blockchain data. A **signer** is an abstraction of an Ethereum Account, which can be used to sign messages and transactions, and send signed transactions to the network.

The ethers library has some helpful functions that will make this a snap! Read the ethers.js[ API documentation](https://docs.ethers.io/v5/api/) to learn more about its various functions. 

{% hint style="info" %}
_It is important to note that throughout the Pathway, we will refer to the_ ethers.js _library only as "_ethers_"._
{% endhint %}

-------------------------------------

# Challenge

{% hint style="tip" %}
**Imagine this scenario:** You're a fresh Web3 developer who just landed a sweet role at a promising new startup, eager to show off your skills. You've been asked to show users of our dApp which network they are connected to (to avoid any confusion) and store the account currently selected address in Metamask (so that we can reference it later). In **`components/protocols/polygon/components/steps/Connect.tsx`**, implement the`checkConnection` function.
{% endhint %}

**Take a few minutes to figure this out.**

```typescript
const checkConnection = async () => {
  const provider = await detectEthereumProvider();

  if (provider) {
    // TODO
    // Connect to Polygon using Web3Provider and Metamask
    // Define address and network
    const web3provider = undefined;
    const address = undefined;
    const network = undefined;

    setAccount(address);
    setNetwork(network);
  } else {
    alert("Please install Metamask at https://metamask.io");
  }
}
```

* **Connect to Polygon** using ethers' Web3Provider and the Metamask wallet  
  * [Ethers' docs for creating a Web3Provider instance](https://docs.ethers.io/v5/api/providers/other/#Web3Provider)  
  * [StackOverflow post about connecting Metamask to Ethers](https://stackoverflow.com/questions/60785630/how-to-connect-ethers-js-with-metamask)  
* **Display the connected network**  
  * [Get the Network from a Ethers provider](https://docs.ethers.io/v5/api/providers/)

{% hint style="info" %}
You can [**join us on Discord**](https://discord.gg/fszyM7K), if you have questions or want help completing the tutorial.
{% endhint %}

Still not sure how to do this? No problem! The solution is below so you don't get stuck.

----------------------------------

# Solution

```typescript
// solution
//...
  if (provider) {
    // Connect to Polygon using Web3Provider and Metamask
    // @ts-ignore
    await provider.request({method: 'eth_requestAccounts'});
    const web3provider = new ethers.providers.Web3Provider(
      window.ethereum,
      'any',
    );
    const signer = web3provider.getSigner();

    // Define address and network
    const address = await signer.getAddress();
    const network = ethers.providers.getNetwork(await signer.getChainId());

    setNetwork(network);
    setAddress(address);
  } else {
    alert('Please install Metamask at https://metamask.io');
  }
//...
```

**What happened in the code above?**

* First, we need to define the provider by calling `Web3Provider` method of `providers`.
* We need to ensure that Metamask connects to the page, and that we can query the currently selected account in Metamask. This is done by using the method `request` on the provider, to send the `eth_requestAccounts` query. This will bring up a Metamask dialog, asking the user to unlock their Metamask if it is locked, or to connect an account to the page if Metamask is unlocked - this account functions as a `signer`.
* As said above the `signer` represents the current connected account. Then, calling the `getAddress` method will do the job of querying the address of the current connected account.
* Again, using `signer` we can retrieve the current **chainId**, pass it to the `getNetwork` method and then deduce the network we are connected to.
  * Mumbai has a chainId of `80001`.


-------------------------------------

# Make sure it works

Once the code above save you can click on **Check Metamask Connection** and let's the magic happen.

![](../../../.gitbook/assets/pathways/polygon/polygon-connect.gif)

-------------------------------------

# Addresses, Wallets, and Mnemonics

Every account on Polygon or Ethereum has a private key, a public key, and a mnemonic associated with it (referred to as a "[Secret Recovery Phrase](https://community.metamask.io/t/what-is-a-secret-recovery-phrase-and-how-to-keep-your-crypto-wallet-secure/3440)" by Metamask as of Q2 2021 - you will likely encounter a lot of documentation which still refers to "mnemonic seed phrase"). 

The format of all Polygon addresses match those on Ethereum. For example:`0x333314441798b549F0d4F952E61b4A1383F43104` exists on both Polygon and Ethereum. Each address is 42 characters in length - `0x` indicating that the following string is comprised of hexadecimal characters, and then the 40 hexadecimal characters representing the last 20 bytes of the account's public key. Sometimes people refer to an address as a public key, but they are not interchangeable in this case.

A **wallet** refers to either a piece of software used to manage cryptographic keys and the contents of associated addresses, such as Metamask or Trust Wallet, or _the address itself_. You may sometimes hear users refer to their address as their wallet.  

Generating a new address in Metamask is not the same as generating a new secret recovery phrase/mnemonic. However, [`ethers.Wallet.createRandom()`](https://docs.ethers.io/v5/api/signer/#Wallet-createRandom) can be used to make new accounts and mnemonics.   
The 12 words of a secret recovery phrase are taken from a specific wordlist. They give control of the entire contents of any address generated with them. For this reason it is vitally important that you protect your private keys and mnemonic seed phrases. _Never share them with anyone_. 

{% hint style="info" %}
This is an important topic to be comfortable with as both a user and blockchain developer. Spend some time experimenting with providers, signers and wallets to get acquainted with these fundamental blockchain concepts. There are many good explanations of the workings of [Hierarchical Deterministic](https://weteachblockchain.org/courses/bitcoin-for-developers/3/hd-wallets) (HD) wallets available online, just know that a secret recovery phrase/mnemonic is a critical piece of information which should be kept secret and secure at all times. 
{% endhint %}

-------------------------------------

# Conclusion

Now that we have a connected to Polygon, we can use ethers to query information from the blockchain.  
In the next tutorial, we will cover how to query Polygon and display the information.


Learn how to connect to Polygon using Metamask and ethers.js

Connect to Polygon (Matic)

Learn how to build a Social Media dApp similar to Instagram and deploy it on Polygon

Create a Social Media dApp on Polygon

Learn how to build a Social Media dApp like YouTube & how to deploy it on the Polygon mumbai testnet

Build a Social Media dApp & Deploy it on Polygon

Learn how to create a universal To-Do dApp with the Flutter framework and deploy it on Polygon.

Create a To-Do dApp with Flutter

# Introduction
In this tutorial, we will go through the process of transferring an ERC-20 custom token to the Polygon (Matic) chain, using the Polygon PoS SDK.  
We will use the **Ethereum Goerli** testnet and **Polygon Mumbai** testnet, and a custom ERC-20 token that has been deployed and had its source code verified on Etherscan. There is [a step by step guide](https://github.com/mlibre/blockchain/tree/master/Ethereum/ERC20) written by the author of this tutorial.  
The Polygon Proof of Stake (PoS) Bridge is a mechanism and set of contracts on both Ethereum and Polygon that will help us in moving assets between the **root** chain and **child** chain.    
In contrast with the [Plasma Bridge](https://docs.matic.network/docs/develop/ethereum-matic/plasma/getting-started/), the Polygon PoS bridge is much faster and makes it a better option for dApps that are looking for faster withdrawals.

# Prerequisites
In this tutorial, We will use Metamask as our wallet. If you are not familiar with it or don't know how to use it, check [this video on youtube](https://www.youtube.com/watch?v=Af_lQ1zUnoM).  
When you are creating a Metamask wallet, it gives you a Secret Recovery Phrase (Seed). With this seed, you can recover **all** of your accounts in Metamask.  
We will use this seed later in this tutorial. here is an article about [How to reveal your Secret Recovery Phrase](https://metamask.zendesk.com/hc/en-us/articles/360015290032-How-to-reveal-your-Secret-Recovery-Phrase)  

# Requirements

* [**Metamask**](https://metamask.io/)
* [**Nodejs**](https://nodejs.org/en/download/) v14.17.6 LTS or higher installed
* [**Geth**](https://geth.ethereum.org/docs/install-and-build/installing-geth): version 1.10.8

# Getting started
1. In order to transfer assets between **root** (Ethereum) and **child** (Polygon) contracts, they should be mapped first. This is a process by which an existing token contract is mirrored between the root and child chain.  
If the token you intend to transfer already exists on **Polygon**, this means you don't need to perform the **mapping**.  
Check the [official docs](https://docs.matic.network/docs/develop/ethereum-matic/submit-mapping-request) to learn about the mapping process.
2. Now that contracts are mapped. it's time to transfer the assets. We can either use the [Polygon Wallet UI](https://wallet.polygon.technology/login/) or the [Polygon SDK](https://polygon.technology/polygon-sdk/)
	* We use the SDK for our ERC-20 token that is deployed on the  **Goerli** testnet
	* We use the [Polygon Wallet UI](https://wallet.polygon.technology/login/) for tokens that are deployed on Ethereum mainnet

# Setting up Metamask
Before we get into the details of moving the tokens, let's set up **Metamask** so we can check our **ETH**, **MATIC** and **MLB** token balances.

## Goerli
The Goerli testnet is pre-configured in Metamask's list of available networks. You can select it from the dropdown list at the top of the Metamask interface.  

You can fund your account with testnet Ether from the [Goerli Authenticated faucet](https://faucet.goerli.mudit.blog/) as long as you are willing to make a post on a valid Twitter or Facebook account. If this is not something you wish to do, there is an alternative faucet at [goerli-faucet.slock.it](https://goerli-faucet.slock.it/)

## Mumbai
You can either open [mumbai.polygonscan.com](https://mumbai.polygonscan.com/) and click on "Add Mumbai Network" in the footer at the bottom of the page, *or* add it manually using the following information:

* **Network Name:** Polygon Mumbai testnet
* **RPC URL:** https://rpc-mumbai.maticvigil.com/
* **Chain ID:** 80001
* **Currency Symbol:** MATIC
* **Block Explorer URL:** https://mumbai.polygonscan.com/

![mumbai](../../../.gitbook/assets/erc20-pos-mumbai.png)

You can fund your **Mumbai** account with MATIC [here](https://faucet.polygon.technology)


# MLB ERC20 Contract
**MLB** is the symbol of the token (deployed on the Goerli testnet) that we'll map and transfer, which is a standard OpenZeppelin ERC-20 token.  
You can find a step by step guide to creating an ERC-20 token [here](https://github.com/mlibre/blockchain/tree/master/Ethereum/ERC20)  

Token info:

```text
Name: Mlibre
Symbol: MLB
Owner: 0xD8f24D419153E5D03d614C5155f900f4B5C8A65C
Contract Address: 0xd2d40892B3EebdA85e4A2742A97CA787559BF92f
Goerli etherscan: https://goerli.etherscan.io/address/0xd2d40892B3EebdA85e4A2742A97CA787559BF92f
```

Gather this information for the token you intend to map.

# Mapping
Now that everything is ready. Let's map our `MLB` token.
* Go to [mapper.matic.today](https://mapper.matic.today/map/) and complete the form
* Make sure the token you want to map has had its [contract verfied](https://etherscan.io/verifyContract) on Etherscan
* Choose **Gorli Testnet -> Mumbai testnet**

	![map image](../../../.gitbook/assets/erc20-pos-map.png)

* At this time the mapping process is not immediate, it can take up to 3 days to be confirmed.  

Then open [mapper.matic.today](https://mapper.matic.today/), and enter the contract address to see if it has been added.

![mapped image](../../../.gitbook/assets/erc20-pos-mapped.png)

As you may notice, the contract address in Goerli and Mumbai are not the same. Let's remember to add it to Metamask so it shows up when we are connected to Mumbai as well.

1. Open Metamask
2. Select the Mumbai testnet from the list of available networks
3. Add Token
4. Paste the contract address there (`0x0F6886ca4476D3aAb965F2D1b9185F2dd857E653`)

Now it should be something like:

![metamask after map](../../../.gitbook/assets/erc20-pos-metamask-after-map.png)

We don't yet have any MLB tokens on Mumbai. We can transfer some across the bridge and check our Metamask balance again afterward.

# Transfer using SDK
Let's take a look at the workflow for transferring tokens with the SDK:

1. **Approve:** The owner of the token has to approve the **Ethereum Predicate Contract** which will **lock** the amount of token they want to transfer to Polygon.
2. **Deposit:** Then a function has to be called on the `RootChainManger` contract which will trigger the `ChildChainManager` contract on the Mumbai testnet. The `ChildChainManager` contract will then call the **deposit** function of the `Child token` contract.  
**Child** contract is the copy of the **Goerli** token contract in **Mumbai**.  

## Providers
To Interact with **Goerli** and **Mumbai** we can either run a local node (which is slightly more difficult) or use the RPC endpoints of infrastructure providers like DataHub or Infura (which is much simpler).

For **Goerli**, we will run a local Geth node. You can also use [infura](https://infura.io).  
For **Mumbai**, we will use [DataHub](https://datahub.figment.io/)

### Goerli
[Install the Geth client](https://geth.ethereum.org/docs/install-and-build/installing-geth), if you have not installed it already, then run:

```text
geth --goerli --http --syncmode=light --http.api="eth,net,web3,personal,txpool" --allow-insecure-unlock  --http.corsdomain "*"
```

The default endpoint is `127.0.0.1:8545`.  
You can get attached and see if everything is fine:

```text
geth attach http://127.0.0.1:8545
eth.getBalance("0xD8f24D419153E5D03d614C5155f900f4B5C8A65C")
```

### Mumbai
* Sign up for a [DataHub](https://datahub.figment.io/) 
* Choose the Polygon service from the [DataHub Services Dashboard](https://datahub.figment.io/services/Polygon/)
* Scroll down to see the Polygon endpoint URLs
* Copy the Mumbai Testnet JSONRPC URL. It is probably located [here](https://datahub.figment.io/services/Polygon/matic-mumbai--jsonrpc)
* Form the URL like so, replacing the text YOUR_API_KEY with the API key you got from DataHub:
`https://matic-mumbai--jsonrpc.datahub.figment.io/apikey/YOUR_API_KEY/`

# Installing helpers
Now that we have the information we need and the other important pieces in place, we can write some useful code using the maticjs client library and the HDWalletProvider class from Truffle.  
We will need to install both of these packages on the commandline with the node package manager. Use these commands to install the packages and save them in the project manifest, `package.json`:

```text
npm install @maticnetwork/maticjs --save
npm install @truffle/hdwallet-provider --save
```

## Approve
To **approve** the **Ethereum Predicate Contract** we just need to call the `approveERC20ForDeposit` function. The code for this is straightforward: 

```javascript
await maticPOSClient.approveERC20ForDeposit(rootToken, amount.toString(), {
	from,
	gasPrice: "10000000000"
});
```

## Deposit
Next, we would call the `depositERC20ForUser` function of the **Ethereum Predicate Contract**:

```javascript
await maticPOSClient.depositERC20ForUser(rootToken, from, amount.toString(), {
	from,
	gasPrice: "10000000000",
});
```

To bring it all together in JavaScript that can be executed either in a web browser or on the commandline, we can add some constants and use an external file to hold the sensitive API keys and wallet seed phrases. This is a complete example of how to use maticjs and the HDWalletProvider class to communicate with a deployed smart contract on Polygon. Use the following code as a guide for building your own solution!

```javascript
// main.js
import { HDWalletProvider } from '@truffle/hdwallet-provider';
import { MaticPOSClient } from '@maticnetwork/maticjs');
import { secrets } from './secrets.json'

const from = "0xD8f24D419153E5D03d614C5155f900f4B5C8A65C";
const rootToken = "0xd2d40892B3EebdA85e4A2742A97CA787559BF92f";
const amount = 999 * (10 ** 18);

const parentProvider = new HDWalletProvider(secrets.seed, 'http://127.0.0.1:8545'); // Local Geth client address
const maticProvider = new HDWalletProvider(secrets.seed, secrets.mumbai)  // DataHub Mumbai Testnet JSONRPC URL

const maticPOSClient = new MaticPOSClient({
  network: "testnet",
  version: "mumbai",
  parentProvider,
  maticProvider,
});

(async () => {
  try {
    let result = await maticPOSClient.approveERC20ForDeposit(
      rootToken,
      amount.toString(),
      {
        from,
        gasPrice: "10000000000",
      }
    );
    let result_2 = await maticPOSClient.depositERC20ForUser(
      rootToken,
      from,
      amount.toString(),
      {
        from,
        gasPrice: "10000000000",
      }
    );
    console.log(result);
    console.log(result_2);
  } catch (error) {
    console.log(error);
  }
})();
```

Expected output for **approveERC20ForDeposit** is something like this:

```javascript
{
  blockHash: '0x9616fab5f19fb93580fe5dc71da9062168f1f1f5a4a5297094cad0b2b3e2dceb',
  blockNumber: 5513011,
  contractAddress: null,
  cumulativeGasUsed: 46263,
  effectiveGasPrice: '0x2540be400',
  from: '0xd8f24d419153e5d03d614c5155f900f4b5c8a65c',
  gasUsed: 46263,
  logsBloom: '0x0000000000000000000000000000000000000000000000800000000000000000000080000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000010000000000000000000000',
  status: true,
  to: '0xd2d40892b3eebda85e4a2742a97ca787559bf92f',
  transactionHash: '0x3aba80ae8938ed1abbb18560cb061f4915d202a731e5e2ec443aded67169e28a',
  transactionIndex: 0,
  type: '0x0',
  events: {
    Approval: {
      address: '0xd2d40892B3EebdA85e4A2742A97CA787559BF92f',
      blockNumber: 5513011,
      transactionHash: '0x3aba80ae8938ed1abbb18560cb061f4915d202a731e5e2ec443aded67169e28a',
      transactionIndex: 0,
      blockHash: '0x9616fab5f19fb93580fe5dc71da9062168f1f1f5a4a5297094cad0b2b3e2dceb',
      logIndex: 0,
      removed: false,
      id: 'log_0e714fbf',
      returnValues: [Result],
      event: 'Approval',
      signature: '0x8c5be1e5ebec7d5bd14f71427d1e84f3dd0314c0f7b2291e5b200ac8c7c3b925',
      raw: [Object]
    }
  }
}
```

And for **depositERC20ForUser**:

```javascript
{
  blockHash: '0x622989e0d1097ea59c557663bf4fa19b3064cfb858706021a6eecb11bb1c19b2',
  blockNumber: 5513012,
  contractAddress: null,
  cumulativeGasUsed: 89761,
  effectiveGasPrice: '0x2540be400',
  from: '0xd8f24d419153e5d03d614c5155f900f4b5c8a65c',
  gasUsed: 89761,
  logsBloom: '0x0200000000000000000000000000000800000040000000800000000000000000000080000000000000040008000000000000200000000000008000100020000000000000000000001000000a000000000000000000000100000000000000000000000000000008000000000400000014000000000000000000000010200000000000000000000000000000000200000000000000000000000000020000080000020000000200008000000000000000040000000000000800000000000000000000000002000000000000000000000002000000140000000000200000000000000010000000000000000000000000000000000000010000000000000000000000',
  status: true,
  to: '0xbbd7cbfa79faee899eaf900f13c9065bf03b1a74',
  transactionHash: '0x58a7f01edc2b9772f87fca57789f0912152615813e6231ab137e4759c8f6415f',
  transactionIndex: 0,
  type: '0x0',
  events: {
    '0': {
      address: '0xdD6596F2029e6233DEFfaCa316e6A95217d4Dc34',
      blockNumber: 5513012,
      transactionHash: '0x58a7f01edc2b9772f87fca57789f0912152615813e6231ab137e4759c8f6415f',
      transactionIndex: 0,
      blockHash: '0x622989e0d1097ea59c557663bf4fa19b3064cfb858706021a6eecb11bb1c19b2',
      logIndex: 0,
      removed: false,
      id: 'log_20b9b372',
      returnValues: Result {},
      event: undefined,
      signature: null,
      raw: [Object]
    },
    '1': {
      .
      .
      .
```

Just a few things to mention:
* `secrets.json`: contains **Seed**, **privateKey** of the address (0xd8f2). And **Mumbai API URL**. ex:

```json
{
	"privateKey": "This should be the private key of an account specifically made for use on the Goerli testnet",
	"seed": "This should be a Secret Recovery Phrase from Metamask and ONLY used on Ethereum testnets",
	"mumbai": "https://matic-mumbai--jsonrpc.datahub.figment.io/apikey/YOUR_API_KEY/"
}
```

* `@truffle/hdwallet-provider`: Handles signing transactions proccess
* `from`: The Goerli address we created token and want to send transactions with
* `rootToken`: The ERC-20 contract address on the Goerli testnet
* `amount`: the amount of **token** we want transfer. By default, **open zeppelin** V4 `ERC20` contract uses a value of **18** for **decimals**. That is why **999** is multiplied by **(10 ** 18)**

## Not able to run main.js 
* If you are facing an error message like

```text
Error: execution reverted: ERC20: approve to the zero address
```

The contract probably has not mapped yet.

* If you have not run Geth, you will get an error like this

```text
(node:3962) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:3962) [DEP0018] DeprecationWarning: Unhandled terminate the Node.js process with a non-zero exit code.
node_modules/safe-event-emitter/index.js:74
      throw err
      ^

Error: PollingBlockTracker - encountered an error while attempting to update latest block:
Error: connect ECONNREFUSED 127.0.0.1:8545
```

* If you get an error like this

```javascript
{
  code: -32000,
  message: 'getDeleteStateObject (0000000000000000000000000000000000000000) error: no suitable peers available'
}
```

Wait a bit and try again

## Sync & Confirmation

It takes up to 5 minutes for Mumbai to read data from the Goerli chain and sync itself. Once it has synced, then we can check the token balance in Metamask.

![MLB Metamask](../../../.gitbook/assets/erc20-MLB-token.png)

# Transfer using Web UI
Transferring assets through **Web UI** is pretty simple.  
**Note** that we can't use **Goerli** to **Mumbai** here. Because **Web UI** only supports Ethereum and Polygon **mainnets**.  
So I am going to transfer some **real tokens** from my **Ethereum** account to **Polygon** and pay the fees. You may just follow the images below to see how the process works.

1. Open [wallet.polygon.technology](https://wallet.polygon.technology/login)
2. Make sure Ethereum Mainnet is selected in Metamask

	![Metamask Ethereum](../../../.gitbook/assets/erc20-pos-metamask-eth-mainnet.png)

3. Click on **Metamask**. first login option
4. You will be asked to sign a **Signature Request** to make sure you have access to the wallet. It costs no fees

	![pos web ui login](../../../.gitbook/assets/erc20-pos-web-ui-login.png)
	
5. I chose `DAI` token from Ethereum

	![DAI](../../../.gitbook/assets/erc20-pos-web-ui-dai.png)

6. Click on **Transfer**
7. Then review the transaction details, like gas fees and the smart contract you are sending tokens to - before clicking on **Confirm**

	![transfer](../../../.gitbook/assets/erc20-pos-web-ui-transfer.png)

8. Once the transaction is mined, the process is complete! It takes about 7 minutes to complete the transfer, as mentioned before Polygon needs about 5 minutes to sync.

# Conclusion
Congratulations! By completing this tutorial you learned how to use the **Polygon PoS Bridge**. We have configured **Metamask** and **Geth**, to communicate with the **Goerli** testnet and the **Mumbai** testnet. We then **mapped** an **ERC-20** token between the networks so it can be transferred via the bridge. Finally, we called functions on the PoS Bridge contracts, and moved our assets from Ethereum to Polygon.

# About The Author
I'm mlibre, a random guy from the solar galaxy. I am interested in blockchain tech and find it very useful in lots of things.  
Feel free to check my [Github](https://github.com/mlibre)


Learn how to move tokens between Polygon and Ethereum using the Proof of Stake bridge.

Transferring tokens with the Polygon PoS bridge

At this point, we have deployed a smart contract on the Polygon testnet & set the value of its storage. We have a client-side application that's ready to fetch some data from it. We just need to wire up that last part.

-------------------------------------

# Challenge

{% hint style="tip" %}
In the file `components/protocols/polygon/components/steps/Getter.tsx`, implement the `getValue` function.   
{% endhint %}

**Take a few minutes to figure this out.**

```typescript
  const getValue = async () => {
    try {
      setFetching(true);
      const provider = new ethers.providers.Web3Provider(window.ethereum);
		  // try to figure out the expected parameters
      const contract = new ethers.Contract(undefined);
			// try to figure out the expected method 
      const storage = undefined;
      setContractNumber(storage.toString());
      setFetching(false);
    } catch (error) {
      console.log(error);
      setFetching(false);
    }
  };
```

Need some help? Check out these two tips/links  
* [**Create a Contract using ethers**](https://docs.ethers.io/v5/api/contract/contract/#Contract--creating) 
	* You can **console.log `SimpleStorageJson`** to find the contract's `abi` and `address` (through the property `networks`)  
* [**How to call a contract's methods on a ethers Contract object**](https://docs.ethers.io/v5/api/contract/contract/#Contract-functionsCall)  
* To read from the blockchain you don't need to spend any tokens so you can just use a provider to create a Contract instance. But to write you will need to create and sign a transaction through Metamask. Use a `signer` to create the Contract object!

{% hint style="info" %}
You can [**join us on Discord**](https://discord.gg/fszyM7K), if you have questions or want help completing the tutorial.
{% endhint %}

Still not sure how to do this? No problem! The solution is below so you don't get stuck.

-------------------------------------

# Solution

```typescript
// solution
  const getValue = async () => {
    try {
      setFetching(true);
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const contract = new ethers.Contract(
        SimpleStorageJson.networks['80001'].address,
        SimpleStorageJson.abi,
        provider,
      );
      const storage = await contract.get();
      setContractNumber(storage.toString());
      setFetching(false);
    } catch (error) {
      console.log(error);
      setFetching(false);
    }
  };
```

**What happened in the code above?**

* We create `Contract` objects using
  * The contract json's address
  * The contract json's abi
  * A web3 provider
* We then call the functions `get()` on this Contract object to operate our decentralized code. The names of the functions must match the ones we defined in our Solidity smart contract, otherwise how would we know which code to execute? 

-----------------------------

# Make sure it works

Once the code above save you can click and this is what the UI should look like!

![](../../../.gitbook/assets/pathways/polygon/polygon-getter.gif)

-------------------------------------

# Conclusion

Now that we know how to interact with a smart contract we are going to learn how to retore an account from its mnemonic.


Get the Smart Contract's Storage

Transferring some token is one of the major feature of Web 3. In this challenge, we're going to learn how to transfer a known amount of **MATIC** to a chosen recipient. Each time a transfer occurs, we're going to re-query the new balance of our account.

-------------------------------------

# Challenge

{% hint style="tip" %}
**Imagine this scenario:** You know you have a big balance and you want to eat some pizza. Then, you need to transfer **0.1** MATIC to buy one! In `components/protocols/polygon/components/steps/Transfer.tsx`, implement the `transfer` function.
{% endhint %}

**Take a few minutes to figure this out.**

```typescript
  const transfer = async () => {
    setFetching(true);
    setError(null);
    try {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const send_account = provider.getSigner().getAddress();

      const currentGasPrice = await provider.getGasPrice();
      const gas_price = ethers.utils.hexlify(
        parseInt(currentGasPrice.toString()),
      );

      const transaction = undefined;

      const hash =undefined;
      const receipt = await hash.wait();
      setHash(receipt.transactionHash);
    } catch (error) {
      setError(error.message);
    } finally {
      setFetching(false);
    }
  };
```

**Need some help?** Check out these two links  
* [**A short tutorial**](https://ethereum.org/en/developers/tutorials/send-token-etherjs/) on using ethers  
* [**send and sign a transaction**](https://docs.ethers.io/v5/api/signer/#Signer-sendTransaction)

{% hint style="info" %}
You can [**join us on Discord**](https://discord.gg/fszyM7K), if you have questions or want help completing the tutorial.
{% endhint %}

Still not sure how to do this? No problem! The solution is below so you don't get stuck.

-------------------------------------

# Solution

```typescript
// solution
  const transfer = async () => {
    setFetching(true);
    setError(null);
    try {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const send_account = provider.getSigner().getAddress();

      const currentGasPrice = await provider.getGasPrice();
      const gas_price = ethers.utils.hexlify(
        parseInt(currentGasPrice.toString()),
      );

      const transaction = {
        from: send_account,
        to: recipient,
        value: ethers.utils.parseEther('0.1'),
        nonce: provider.getTransactionCount(send_account, 'latest'),
        gasLimit: ethers.utils.hexlify(100000),
        gasPrice: gas_price,
      };
      const hash = await provider.getSigner().sendTransaction(transaction);
      const receipt = await hash.wait();
      setHash(receipt.transactionHash);
    } catch (error) {
      setError(error.message);
    } finally {
      setFetching(false);
    }
  };
```

**What happened in the code above?**

* First, we need to fill our transaction object with:
    * An address to send `from` (the sender).
    * An address to send `to` (the recipient).
    * The `value`, an amount which has been converted into a BigNumber (`ethers.utils.parseEther` is perfect for this)
    * A `nonce`, meaning "a number used once". This value is incremented by one for every transaction sent by an address.
    * A default `gasLimit`.
    * The current `gasPrice`.
* Finally we sign and send our transaction and wait for it to be confirmed.

-------------------------------------

# Make sure it works

Once the code above has been saved, enter an amount to transfer and click **Transfer**:

![](../../../.gitbook/assets/pathways/polygon/polygon-transfer.gif)

-------------------------------------

# Conclusion

Now that we have a funded Polygon account, we can use our MATIC tokens to deploy a smart contract. In the next tutorial we will cover writing, testing and deploying the Solidity code using Truffle which is a smart contract development suite.


Transfer some MATIC 

# Install Metamask

Make sure the [Metamask](https://metamask.io/) browser extension is installed!

# Safety disclaimers

{% hint style="info" %}
If you **ALREADY** have Metamask installed and are using it for a hot wallet, we _**strongly recommend**_ creating an entirely new wallet in Metamask for the purposes of these tutorials. Figment Learn wants nothing to do with your personal keys. We do not want any accidents involving anybody's cryptocurrency! Again, you _must not continue_ until you take care of this.  
{% endhint %}

{% hint style="danger" %}
If you **DO NOT** already have Metamask installed, welcome to the wonderful world of web3!   
The first piece of advice we will give you is to make _absolutely sure that you write down the_ [**Secret Recovery Phrase**](https://community.metamask.io/t/what-is-a-secret-recovery-phrase-and-how-to-keep-your-crypto-wallet-secure/3440) that is generated during Metamask's initial setup. Do not store it in a digital format. Do not share it with anybody. Please do keep it accessible to yourself, because we will be using it during the pathway. 
{% endhint %}

-------------------------------------

# Add the Mumbai testnet to Metamask

The first task is to connect to the Polygon Mumbai testnet by adding it to the list of RPC endpoints in Metamask. Click on the Fox head icon in your web browser to open the popup, and then follow this workflow to complete the process :

* Click on the current network at the top of the Metamask popup (by default is says "Ethereum Mainnet")
* Scroll down and click on "Custom RPC"
* Fill in the form:
  * Network Name: `Polygon Mumbai`
  * New RPC URL: `https://rpc-mumbai.maticvigil.com/`
  * Chain ID: `80001`
  * Currency Symbol: `MATIC`
  * Block Explorer URL : `https://mumbai.polygonscan.com`
* Double check the information, then click on the Save button.

![](../../../.gitbook/assets/add_mumbai.png)

We use the testnet for development before moving into production on the main network or "mainnet".

-------------------------------------

# Set your Datahub API key

The value for `DATAHUB_POLYGON_API_KEY` can be found on the [**DataHub Services Dashboard**](https://datahub.figment.io/services/Polygon). Click on the **Polygon** icon in the list of available protocols and then copy your key as shown below. You can now paste your personal API key into `.env.local`. This will authenticate you and enable you to make JSON-RPC requests to Polygon via DataHub.

![](../../../.gitbook/assets/pathways/polygon/polygon-setup.gif)

{% hint style="info" %}
[**Join us on Discord**](https://discord.gg/fszyM7K), if you encounter any issues with the tutorial or have any questions!**
{% endhint %}

-------------------------------------

# Next

You can now move ahead to the next step by clicking on the "Next" button below on the right. There are also links to the instructions for each step on the UI.


Project Setup

Learn how to bridge ERC-1155 tokens between networks using the Polygon Proof-of-Stake SDK

Transfer ERC-1155 tokens between Polygon & Ethereum

In this tutorial, we will acquire some free **MATIC** on the testnet so that we can deploy a smart contract and interact with it. Before dealing with actual value on the Polygon mainnet, it is wise to practice using the Polygon testnet (called Mumbai).

Click on the icon in the upper-right corner of the page to copy the hexadecimal address of the Metamask account to the clipboard:

![](../../../.gitbook/assets/click_to_copy.png)

Visit [https://faucet.matic.network/](https://faucet.matic.network/) and paste the address from your selected account in Metamask into the textinput. It is OK to leave the default options for **MATIC** tokens and the Mumbai network selected. Click the Submit button, then click again below to confirm the transaction.

{% hint style="warning" %}
Sometimes the transaction response on the faucet website returns an `[Object object]` - when this happens, simply refresh the page and try again.
{% endhint %}

Once this transaction is confirmed, you will have 1 **MATIC** on the Mumbai testnet!  

-------------------------------------

# Challenge

{% hint style="tip" %}
**Imagine this scenario:** You know you have a big balance. You need to show that balance so you can brag about it to all your awesome Web 3 developer friends! In `components/protocols/polygon/components/steps/Balance.tsx`, implement the`checkBalance` function :
{% endhint %}

**Take a few minutes to figure this out.**

```typescript
  const checkBalance = async () => {
    setFetching(true);
    try {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const selectedAddress = window.ethereum.selectedAddress;
      const selectedAddressBalance = undefined;
      const balanceToDisplay = undefined;
      setBalance(balanceToDisplay);
    } catch (error) {
      setError(error.message);
    } finally {
      setFetching(false);
    }
  };
```

**Need some help?** Check out these two links  
Get an [**account balance**](https://docs.ethers.io/v5/api/providers/provider/#Provider-getBalance) using ethers  
Format the balance using [**ethers.utils.formatEther**](https://docs.ethers.io/v5/api/utils/display-logic/#unit-conversion)

{% hint style="info" %}
You can [**join us on Discord**](https://discord.gg/fszyM7K), if you have questions or want help completing the tutorial.
{% endhint %}

Still not sure how to do this? No problem! The solution is below so you don't get stuck.

-------------------------------------

# Solution

```typescript
// solution
  const checkBalance = async () => {
    setFetching(true);
    try {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const selectedAddress = window.ethereum.selectedAddress;
      const selectedAddressBalance = await provider.getBalance(selectedAddress);
      const balanceToDisplay = ethers.utils.formatEther(
        selectedAddressBalance.toString(),
      );
      setBalance(balanceToDisplay);
    } catch (error) {
      setError(error.message);
    } finally {
      setFetching(false);
    }
  };
```

**What happened in the code above?**

* For the duration of this function, `fetching` will be true so that we can conditionally render our UI. 
* We await `provider.getBalance` because it returns a Promise. That Promise returns a BigNumber, which is a specific data type for handling numbers which fall [outside the range of safe values](https://docs.ethers.io/v5/api/utils/bignumber/#BigNumber--notes-safenumbers) in JavaScript. A BigNumber cannot be displayed in the same way as a normal number. We must therefore format the balance to transform it into a string for display, using `ethers.utils.formatEther`.
* Before we exit the function, set `fetching` to false, which effects the conditional rendering happening in the return function of `Balance.tsx`.

-------------------------------------

# Make sure it works

When you have completed the code, the **Check Balance** button will function. Click it to view the balance of the connected account:

![](../../../.gitbook/assets/pathways/polygon/polygon-balance.gif)

-------------------------------------

# Conclusion

Now that we have an account that has been funded with **MATIC** tokens, we are ready to make a transfer to another account!



Fund a Polygon Account

At the beginning of this journey into Polygon, we generated a mnemonic. Now we're going to learn how to restore a wallet from a mnemonic and how to derive the address and the private key when the wallet has been restored.

-------------------------------------

# Challenge

{% hint style="tip" %}
In the file `components/protocols/polygon/components/steps/Restore.tsx`, implement the `restore` function. Using `ethers`, look for `Wallet`, then when the wallet has been regenerated try to deduce which property we're going to call in order to display the address and the private key, finally verify than the generated key matches the existing one.   
{% endhint %}

**Take a few minutes to figure this out.**

```tsx
  const restore = () => {
    try {
      const wallet = undefined;
      const selectedAddress = window.ethereum.selectedAddress;
      if (undefined === selectedAddress) {
        setAddress(undefined);
        setSecret(undefined);
      } else {
        setError('Unable to restore account');
      }
    } catch (error) {
      setAddress(null);
      setSecret(null);
      setError('Invalid mnemonic');
    }
  };
```

Need some help? Check out these two tips/links  
* [**Create Wallet using ethers**](https://docs.ethers.io/v5/api/signer/#Wallet) 
* [**Properties of a Wallet**](https://docs.ethers.io/v5/api/signer/#Wallet--properties) 

{% hint style="info" %}
You can [**join us on Discord**](https://discord.gg/fszyM7K), if you have questions or want help completing the tutorial.
{% endhint %}

Still not sure how to do this? No problem! The solution is below so you don't get stuck.

-------------------------------------

# Solution

```javascript
// solution
  const restore = () => {
    try {
      const wallet = ethers.Wallet.fromMnemonic(value.trim());
      const selectedAddress = window.ethereum.selectedAddress;
      if (wallet && wallet.address.toLocaleLowerCase() === selectedAddress) {
        setAddress(wallet.address.toLocaleLowerCase());
        setSecret(wallet.privateKey.toLocaleLowerCase());
      } else {
        setError('Unable to restore account');
      }
    } catch (error) {
      setAddress(null);
      setSecret(null);
      setError('Invalid mnemonic');
    }
  };
```

**What happened in the code above?**

* First, we need to call `fromMnemonic` method of `Wallet` class.
* Next, we compare if the restored address matches the existing one.
* Next, we store the address in the component state using `setAddress` to display it in the UI.
* Finally, we do the same for the private key - storing it in the component state with `setSecret`.
* **IMPORTANT**: If you have selected any address in Metamask other than the first address, the if statement will be false.

-------------------------------------

# Make sure it works

When you have completed the code:
* Copy-Paste your **mnemonic**
* Click on **Restore Account**

![](../../../.gitbook/assets/pathways/polygon/polygon-restore.gif)

-------------------------------------

# Conclusion


Congratulations! We have gone from zero to **Polygon**, covering all the most fundamental concepts needed for developers to succeed in using **Polygon**. From connecting to the network to interacting with smart contracts, you have completed coding challenges and created a functional yet basic dApp.   

From here, there are many ways to increase your skills with Web 3 development. We recommend following some of the other Tutorials and Pathways on Figment Learn, to discover what makes the other network protocols unique.

If you are an experienced developer, you are welcome to contribute tutorials for **Polygon** and earn some **MATIC** tokens! Check out our tutorial [contribution guidelines](../../../other/tutorial-guidelines/) to get started.

If you had any difficulties following this tutorial or simply want to discuss Polygon with other developers you can join [our Discord](https://discord.gg/fszyM7K) or head over to our [community forums](https://community.figment.io).


Restore an Account from Mnemonic

# Introduction
This tutorial will introduce you to generating random numbers in Solidity smart contracts using Chainlink VRF ([Verifiable Random Function](https://docs.chain.link/docs/chainlink-vrf/#generate-random-numbers-in-your-smart-contracts)). Chainlink VRF is used as a verifiable source of randomness on-chain. We will be using the Polygon (Matic) Mumbai testnet and the Remix IDE.

# Why use Chainlink VRF?
Solidity contracts are deterministic, therefore anyone who figures out how your contract produces randomness could predict its results. Chainlink VRF generates a random number off-chain with a cryptographic proof used to verify the result.

# Prerequisites
To follow this tutorial, you should have a basic understanding of Solidity [smart contracts](https://solidity-by-example.org/) & the [Remix IDE](https://remix.ethereum.org/). You should also complete the [Polygon (Matic) Pathway](https://learn.figment.io/network-documentation/matic/polygon-matic-pathway).

# Requirements
* You will need to have the [MetaMask](https://metamask.io) browser extension installed.

# Using Chainlink VRF 

## Getting testnet tokens
You will need some testnet MATIC and LINK. These can be acquired from the [Polygon Faucet](https://faucet.polygon.technology/). MATIC token will be used to pay for contract deployment and making transactions. LINK token will be used to pay the Chainlink oracle for randomness.

Open your Metamask and change the active network to Polygon (Matic) Mumbai testnet and copy your wallet address by clicking on it in the Metamask window. If you do not have the Mumbai testnet set up in your Metamask, read the article [Configure Polygon on Metamask](https://docs.matic.network/docs/develop/metamask/config-polygon-on-metamask). Make sure you select the Mumbai Testnet tab to see the configuration details.

Go to the [Polygon Faucet](https://faucet.polygon.technology/) to get some MATIC and LINK testnet tokens by pasting your wallet address and clicking on "Submit".

You can go to this URL [https://mumbai.polygonscan.com/](https://mumbai.polygonscan.com/) to check your balances by entering your address on the search bar.

You can view your current MATIC and LINK balances in Metamask or by going to [https://mumbai.polygonscan.com/](https://mumbai.polygonscan.com/) & entering your address in the search bar.

To see LINK tokens in your Metamask:
1) Click on the Add Token button
2) Enter `0x326C977E6efc84E512bB9C30f76E30c160eD06FB` in the Token Contract Address text field. Token Symbol and Token Decimal text fields will be pre-filled when you enter the Token Contract Address.
3) Click the Next button
4) Click the Confirm button to add LINK tokens to your list of assets in Metamask
![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img1.png)

## Using the Remix IDE
We will use the Remix IDE - an online development environment for smart contracts, provided by the Ethereum Foundation.

Head over to [https://remix.ethereum.org](https://remix.ethereum.org/). Click on the File Icon to create a new file and name it `RandomNumber.sol`.

![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img2.png)

## Creating the smart contract
In `RandomNumber.sol`, copy the entire smart contract code below and paste it into the Remix editor panel.

```javascript
// SPDX-License-Identifier: MIT
pragma solidity 0.6.6;

import "@chainlink/contracts/src/v0.6/VRFConsumerBase.sol";

contract RandomNumber is VRFConsumerBase {
    bytes32 internal keyHash;
    uint256 internal fee;
    
    uint256 public randomResult;
    
    /**
     * Constructor inherits VRFConsumerBase
     * 
     * Network: Polygon (Matic) Mumbai Testnet
     * Chainlink VRF Coordinator address: 0x8C7382F9D8f56b33781fE506E897a4F1e2d17255
     * LINK token address:                0x326C977E6efc84E512bB9C30f76E30c160eD06FB
     * Key Hash: 0x6e75b569a01ef56d18cab6a8e71e6600d6ce853834d4a5748b720d06f878b3a4
     */
    constructor() 
        VRFConsumerBase(
            0x8C7382F9D8f56b33781fE506E897a4F1e2d17255, // VRF Coordinator
            0x326C977E6efc84E512bB9C30f76E30c160eD06FB  // LINK Token
        ) public
    {
        keyHash = 0x6e75b569a01ef56d18cab6a8e71e6600d6ce853834d4a5748b720d06f878b3a4;
        fee = 0.0001 * 10 ** 18; // 0.0001 LINK
    }
    
    /** 
     * Requests randomness 
     */
    function getRandomNumber() public returns (bytes32 requestId) {
        require(LINK.balanceOf(address(this)) > fee, "Not enough LINK - fill contract with faucet");
        return requestRandomness(keyHash, fee);
    }

    /**
     * Callback function used by VRF Coordinator
     */
    function fulfillRandomness(bytes32 requestId, uint256 randomness) internal override {
        randomResult = randomness;
    }
}
```

This will inherit from the VRFConsumerBase contract. The VRFConsumerBase constructor takes two parameters: An address for the VRF Coordinator and an address for the LINK Token. We will use `0x8C7382F9D8f56b33781fE506E897a4F1e2d17255` for VRF Coordinator and `0x326C977E6efc84E512bB9C30f76E30c160eD06FB` for the LINK Token which will work on the Mumbai testnet.

We will use the contract hash `0x6e75b569a01ef56d18cab6a8e71e6600d6ce853834d4a5748b720d06f878b3a4` to specify the Chainlink oracle to use and set the fee to 0.0001 LINK to pay the oracle for its verifiable random output.

```javascript
constructor() 
    VRFConsumerBase(
        0x8C7382F9D8f56b33781fE506E897a4F1e2d17255, // VRF Coordinator
        0x326C977E6efc84E512bB9C30f76E30c160eD06FB  // LINK Token
    ) public
{
    keyHash = 0x6e75b569a01ef56d18cab6a8e71e6600d6ce853834d4a5748b720d06f878b3a4;
    fee = 0.0001 * 10 ** 18; // 0.0001 LINK
}
```

This will get a random number from the chainlink oracle. `requestRandomness()` comes from the `VRFConsumerBase` contract that we imported at the top of our smart contract.

```javascript
function getRandomNumber() public returns (bytes32 requestId) {
    require(LINK.balanceOf(address(this)) > fee, "Not enough LINK - fill contract with faucet");
    return requestRandomness(keyHash, fee);
}
```

This is a callback function used by the VRF Coordinator to determine if the number is actually random.

```javascript
function fulfillRandomness(bytes32 requestId, uint256 randomness) internal override {
    randomResult = randomness;
}
```

## Deploy the contract with Remix
In Remix, click on the Solidity Compiler icon on the sidebar:

![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img3.png)

Select `0.6.6+commit.6c089d02` as the compiler and click the "Compile RandomNumber.sol" button to compile the contract. Once compiled, it is ready to be deployed onto the Mumbai testnet.

Click the Solidity Compiler icon on the sidebar again:

![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img4.png)

Select "Injected Web3" as the environment in the dropdown. It will connect to your Metamask and find the network ID and account address. 80001 is the network ID for the Mumbai testnet.

Now, select `RandomNumberConsumer - RandomNumber.sol` as the contract in the dropdown and click the Deploy button.

Metamask should popup, allowing you to click the Confirm button to complete the transaction. This should deploy the contract to the Mumbai testnet.

![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img5.png)

![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img6.png)

## Fund the contract with LINK
You will need to fund your contract with LINK tokens to pay the Chainlink oracle for VRF to work. Click on the Copy Icon to copy your contract address.

![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img7.png)

Go to your Metamask:
1. Click on the LINK token
2. Click the Send button
3. Paste your contract address into the search bar
4. Set Amount to 1 LINK
5. Click on the Next button
6. Click the Confirm button to confirm the transaction

You can go to the Mumbai block explorer [https://mumbai.polygonscan.com/](https://mumbai.polygonscan.com/) to check your contract balances by entering your contract address in the search bar.

![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img8.png)

## Using the contract
Click on the Arrow Icon to see your contract methods

![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img9.png)

Click on the "getRandomNumber" button. You should see a Metamask popup. Click on Confirm to confirm the transaction.

When the transaction is successful, click on the "randomResult" button and you should see a random number that is not zero!

**Note:** It may take around 1 min for random number to change.

![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img10.png)

# Possible errors & solutions
If you get this error, it means that your contract does not have enough LINK token to pay the oracle fee. To solve this, you should send some LINK token to your contract address.

![](../../../.gitbook/assets/matic-chainlinkvrf-tutorial-img11.png)

# Conclusion
Congratulations! This tutorial introduced you to Chainlink Verifiable Random Function (VRF). Now you can generate random numbers in your smart contracts using the Chainlink oracle.

To learn more about Chainlink VRF, visit the [Chainlink docs](https://docs.chain.link/docs/chainlink-vrf/).

# About The Author
This tutorial was created by [You Song Hou](https://github.com/ysongh) who is a full stack developer.

# References
- Chainlink VRF Documentation: https://docs.chain.link/docs/chainlink-vrf/
- Polygon (Matic) Documentation: https://docs.matic.network/docs/develop/getting-started


Learn how to use the Chainlink Oracle for verifiable randomness in your Polygon (Matic) smart contracts

Using the Chainlink Oracle for Randomness on Polygon

Learn how to create a donation dApp on Polygon to award your favorite content creator with MATIC tokens.

Create a donation dApp on Polygon

Learn how to build an NFT marketplace smart contract and deploy it on Polygon using HardHat

Build an NFT marketplace on Polygon using HardHat

# Ethers API Queries

In order to gather information from the blockchain, we will use ethers again. For basic interaction with Polygon, the [provider](https://docs.ethers.io/v5/api/providers/provider/) methods are often most useful. 

In the file `components/protocols/polygon/components/steps/Query.tsx` we have already written the `getQuery` function which will send a network request to the node server. [By convention of Next.js routing](https://nextjs.org/docs/api-routes/introduction), a client-side request to `http://localhost:3000/api/polygon/query` will get routed to the file `query.js` in `/pages/api/polygon` and be executed by the default imported function.

-------------------------------------

# Challenge

{% hint style="tip" %}
**Imagine this scenario:** As the lead developer of a cool new dApp, you need to create a way to query information from the blockchain and then display it on the UI. You know that Next.js has some nice features for creating custom API routes, and that by using TypeScript it is easy to pass complex data types as JSON. Now you just need to wire it up to Polygon to take advantage of the impressive transaction throughput! In **`pages/api/polygon/query.ts`**, assign values to the following variables : `chainId` , `blockHeight` , `gasPriceAsGwei` , `blockInfo`.
{% endhint %}

**Take a few minutes to figure this out.**

```typescript
//...
 try {
    const networkName = await provider.getNetwork().then(res => { return res.name })

    // TODO: Define the variables below
    const chainId = undefined;
    const blockHeight = undefined;
    const gasPriceAsGwei = undefined;
    const blockInfo = undefined;

    res.status(200).json({
      networkName,
      chainId,
      blockHeight,
      gasPriceAsGwei,
      blockInfo,
    });
  }
//...
```

**Need some help?** Check out these links  
[Getting the network's chainId](https://ethereum.stackexchange.com/questions/82365/how-get-network-id-with-ethers-js).
How to get a [block number (or block height) from ethers](https://docs.ethers.io/v5/api/providers/provider/#Provider-getBlockNumber).  
What is [gas price and gwei](https://gwei.io/)? And how to [get it from ethers](https://docs.ethers.io/v5/api/providers/provider/#Provider-getGasPrice).  
[Formatting units](https://docs.ethers.io/v5/api/utils/display-logic/#utils-formatUnits) from BigNumber to gwei.

{% hint style="info" %}
You can [**join us on Discord**](https://discord.gg/fszyM7K), if you have questions or want help completing the tutorial.
{% endhint %}

Still not sure how to do this? No problem! The solution is below so you don't get stuck.

-------------------------------------

# Solution

```typescript
// solution
//...
  try {
    const networkName = await provider.getNetwork().then((res) => {
      return res.name;
    });

    const chainId = provider.network.chainId;
    const blockHeight = await provider.getBlockNumber();
    const gasPriceAsGwei = await provider.getGasPrice().then((res) => {
      return ethers.utils.formatUnits(res, 'gwei');
    });
    const blockInfo = await provider.getBlockWithTransactions(blockHeight);

    res.status(200).json({
      networkName,
      chainId,
      blockHeight,
      gasPriceAsGwei,
      blockInfo,
    });
  }
//...
```

**What happened in the code above?**

* The default export of this TypeScript file is an asynchronous function named `query`, for which we have defined the data types of the request as well as the response. `res: NextApiResponse<PolygonQueryResponse>` is providing a type definition of `PolygonQueryResponse`, which means that the response generated by this API must conform to that overall data type. 
* The `networkName` awaits `provider.getNetwork` because it returns a Promise, and then we will return the name property of the response object.
* We can get the `chainId` as a property of `provider.network`.
* `blockHeight` can be taken directly from the returned value of `getBlockNumber` 
* `gasPriceAsGwei` gets the current gas price and then formats the value into a human-friendly number with the ethers utility function `formatUnits`.
* `blockInfo` must be a BlockWithTransactions type, which is what the function `getBlockWithTransactions` returns.

-------------------------------------

# Make sure it works

Once the code above save you can click on **Query Polygon** and let's the magic happen.

![](../../../.gitbook/assets/pathways/polygon/polygon-query.gif)

-------------------------------------

# Conclusion

Now that we have queried Polygon and retrieved information from the blockchain, we will want to get **MATIC** tokens into our wallet so we can pay the fees to deploy a smart contract. In the next tutorial, we will cover how to fund an account with **MATIC** through the official faucet.


Learn how to query information from Polygon

Query Polygon

Learn how to create your own NFT smart contract using HardHat

Create an NFT smart contract with HardHat

---
description: Learn how to transfer tokens between Ethereum and Polygon (Matic)
---

# Using Metamask with Matic.js

\*\*\*\*[**The original tutorial can be found on Polygon $Matic$'s official documentation here.**](https://docs.matic.network/docs/develop/pos-using-metamask) _\*\*_

## What this tutorial covers

This tutorial is a brief introduction on how to transfer tokens between Ethereum and Polygon $Matic$ on PoS bridge using _**matic.js SDK and Metamask**_. Polygon $Matic$-Ethereum bridge provides a cross-chain channel using which users can transfer tokens from Ethereum to Polygon $Matic$ and vice-versa. More details on using the bridge can be found [here](https://docs.matic.network/docs/develop/ethereum-matic/pos/getting-started). This **tutorial mainly focuses on using the bridge from a front end perspective**. We will be using Metamask for this purpose.

The most important thing to be understood from this tutorial is the **proper usage of the web3 provider in the matic.js instance** we create. Whether using PoS or Plasma, certain actions need to be performed on Polygon $Matic$ and some on Ethereum. Due to this reason, **different providers are required in different scenarios. Hence correctly setting the providers is very necessary.**

1. An **example react app that demonstrates the usage of the Plasma and PoS bridge** can be found [here](https://github.com/maticnetwork/pos-plasma-tutorial) .
2. Install the dependencies using `npm install` .
3. Replace the token addresses in src/config.json with your corresponding token addresses

```javascript
posRootERC20: ERC20 root token address on pos bridge
posChildERC20: ERC20 child token address on pos bridge
posWETH: PoS Weth
rootChainWETH: WETH deployed on root chain
plasmaWETH: Plasma WETH
plasmaRootERC20: ERC20 root token deployed on plasma
plasmaChildERC20: ERC20 child token deployed on plasma
MATIC_RPC: RPC for child chain,
ETHEREUM_RPC: RPC for root chain,
VERSION: network version,
NETWORK: "testnet" or "mainnet"
MATIC_CHAINID: Chain ID of child chain,
ETHEREUM_CHAINID: Chain ID of root chain
```

* The configuration and key values for matic mainnet and mumbai testnet can be found here 1. [Mumbai Testnet Config](https://static.matic.network/network/testnet/mumbai/index.json) 2. [Polygon $Matic$ Mainnet Config](https://static.matic.network/network/mainnet/v1/index.json)
* Run the project using `npm start` .

## Example using PoS ERC20 Test Token

> NOTE: For the mainnet, Ethereum is the root chain and Polygon $Matic$ Mainnet is the child chain and for the testnet, Goerli is the root chain and Mumbai is the child chain. The values in config.json file should be set accordingly. Goerli and Mumbai networks are used as the root and child chain in this tutorial.
>
> posClientParent and posClientChild is used to initialize the root and child chain matic.js object for PoS bridge. Code snippets mention below under each step can be found in the [tutorial](https://github.com/maticnetwork/pos-plasma-tutorial) repo as well.

### Deposit

To deposit ERC20 tokens, an approve function call has to be made before calling the deposit function. Upon clicking the deposit button, metamask will first ask to approve the transfer of a specified number of tokens and after the confirmation of the approval transaction, metamask will ask to confirm the deposit transaction. Make sure the root chain network is selected in metamask for deposit functionality.

```javascript
await maticPoSClient.approveERC20ForDeposit(config.posRootERC20, x1, {
  from: account,
});
await maticPoSClient.depositERC20ForUser(config.posRootERC20, account, amount, {
  from: account,
});
```

During deposit of ERC20 tokens, the providers are specified as below

`maticProvider: maticprovider`

`parentProvider: window.web3`

> NOTE: Deposits from Ethereum to Polygon $Matic$ happen using a state sync mechanism and takes about ~5-7 minutes. After waiting for this time interval, it is recommended to check the balance using web3.js/matic.js library or using Metamask. The explorer will show the balance only if at least one asset transfer has happened on the child chain. This [link](https://docs.matic.network/docs/develop/ethereum-matic/pos/deposit-withdraw-event-pos/) explains how to track the deposit events.

![](https://docs.matic.network/img/pos-using-metamask/deposit.png)

### Transfer

Once deposited, the token can be transferred to any other account on the Polygon $Matic$ chain.

During Transfer, only the `maticProvider` needs to be set as `window.web3`

```javascript
await maticPoSClient.transferERC20Tokens(
  config.posChildERC20,
  account,
  amount,
  {
    from: account,
  }
);
```

### Burn

For withdrawing tokens back to root chain,tokens have to be first burnt on child chain. Make sure child chain network is selected in metamask.

```javascript
await maticPoSClient.burnERC20(config.posChildERC20, amount, {
  from: account,
});
```

During the burning of ERC20 tokens, providers are specified as below

`maticProvider: window.web3`

`parentProvider: ethereumprovider`

![](https://docs.matic.network/img/pos-using-metamask/burn.png)

### Exit

The exit process takes place on ethereum and upon confirmation, equivalent amount of tokens that were burnt on child chain are released to the users address on root chain. Make sure the root chain network is selected in metamask. The burn hash obtained after burning of tokens is given as the input. Wait for the checkpointing to complete before doing this exit process. Checkpoint time is usually ~10 minutes.

During exit of ERC20 tokens, the providers are specified as below

`maticProvider: maticprovider`

`parentProvider: window.web3`

The _**exitERC20**_ function in PoS bridge involves block proof generation by querying the child chain multiple times and hence it may take 4-5 seconds for Metamask to popup as it consumes time to build the transaction object.

```javascript
await maticPoSClient.exitERC20(burnTxHash, {
  from: account,
});
```

![](https://docs.matic.network/img/pos-using-metamask/exit.png)

If you had any difficulties following this tutorial or simply want to discuss Polygon $Matic$ and DataHub tech with us you can [join our community](https://discord.gg/Chhuv5zHy3) today!



Learn how to transfer tokens between Ethereum and Polygon (Matic)

Using Metamask with Matic.js

Solidity is a high level language. It is partly designed after ECMAScript and therefore it is said to be **similar to JavaScript**. The similarity ends there because it gets compiled (not interpreted) and usually deployed on blockchains that understand the Ethereum Virtual Machine (EVM), like Polygon! When a smart contract is deployed, it becomes immutable. This has both benefits and drawbacks, which we will discuss below. 

We can use [HardHat](https://hardhat.org) or [Truffle](https://trufflesuite.com) to ease development and deployment of our Solidity code. There are several existing guides for other EVM compatible networks available on Figment Learn (check out the tutorials for [Celo and Truffle](https://learn.figment.io/tutorials/deploying-smart-contracts-on-celo-with-truffle), or [Celo and HardHat](https://learn.figment.io/tutorials/celo-hardhat-deploy-and-nft-app) for example). We will focus on using Truffle in this tutorial. 

Run the following commands to get started: 

```bash
npm install -g truffle
cd contracts/polygon/SimpleStorage
yarn
```

{% hint style="warning" %}
Also be sure to rename the file **`contracts/polygon/SimpleStorage/.secret.example`** to **`.secret`** before continuing. This file is where we will store the secret recovery phrase used later in this step to deploy the smart contract. You will need to replace the text "your recovery phrase goes here" with your Metamask secret recovery phrase.
{% endhint %}

# The SimpleStorage Solidity contract

One of the most basic, non-trivial, types of smart contract is a **simple storage contract**.   
This example was adapted from the [Solidity documentation](https://solidity.readthedocs.io/en/develop/introduction-to-smart-contracts.html).

```javascript
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract SimpleStorage {
    uint storedData;

    constructor() {
  		  storedData = 0;
  	}

    function set(uint x) public {
        storedData = x;
    }

    function get() public view returns (uint) {
        return storedData;
    }
}
```

The first line of a Solidity file should contain a comment which describes the type of license governing the source code. The `SPDX-License-Identifier` will most commonly be the MIT licence, although a comprehensive list can be found at [https://spdx.org/licenses/](https://spdx.org/licenses/). The Solidity compiler will issue a [warning](https://docs.soliditylang.org/en/v0.8.6/security-considerations.html#take-warnings-seriously) if this line is not present at compilation time.

The next line specifies the version of the Solidity compiler to be used when compiling this contract. Using [semantic versioning](https://semver.org/), it is possible to prevent a Solidity file from being compiled by incompatible versions - most often in the case of breaking changes between major versions. We are using one of the newer versions of the compiler, but not the most recent $[`0.8.6`](https://docs.soliditylang.org/en/v0.8.6/installing-solidity.html) at the time of this writing$.

Next we define our contract name, `SimpleStorage` - The contract name can be anything, but should be descriptive of the functionality. The naming convention for Solidity is that the filename should match the UpperCamelCase contract name, hence `SimpleStorage.sol`.

The `constructor()` is called only once, when the contract is deployed. The constructor is the place to assign default values to any variables, and performs an initial configuration of the app state. We will set the initial value of the `storedData` variable to `0`.

Next we declare a function signature for the `set()` function, which has a [visibility](https://docs.soliditylang.org/en/v0.8.6/contracts.html#visibility-and-getters) of public. `set` takes a single argument `x`, an unsigned integer $[uint](https://docs.soliditylang.org/en/v0.8.6/types.html#integers)$. The function body is a single line, which assigns the value passed via `x` to the `storedData` state variable.

The `get()` function signature is slightly different, in that there is no argument being passed. It also has a visibility of public, is a [view](https://docs.soliditylang.org/en/v0.8.6/types.html?highlight=view#function-types) type of function, and specifies a return type of `uint`. Its function body will simply return the current value of `storedData`.

# Test the smart contract

This test uses the Truffle-provided `Assert` and `DeployedAddresses` contracts. These are built in to Truffle and the development blockchain. It is also important that we import the Solidity file we want to test! 

Because deployed bytecode is immutable, it is best to work with security and best practices in mind. Prevent accidentally deploying code with errors by always _testing prior to deployment_. We will test our SimpleStorage contract with Truffle. 

```javascript
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "truffle/Assert.sol";
import "truffle/DeployedAddresses.sol";
import "../contracts/SimpleStorage.sol";

contract TestSimpleStorage {

  function testInitialStoredDataUsingDeployedContract() public {
    SimpleStorage store = SimpleStorage(DeployedAddresses.SimpleStorage());
    Assert.equal(store.get(), 0, "storedData should be 0 initially");
  }

  function testSettingStoredData() public {
    SimpleStorage store = new SimpleStorage();
    uint expected = 10000;
    store.set(expected);
    Assert.equal(store.get(), expected, "storedData should equal 10000");
  }

}
```

The first test will be run against a freshly deployed version of the SimpleStorage code every time, which is why the initial test for `storedData` should always equal zero.

The second test sets the value of `storedData` to `10000` and then queries it from the blockchain in the same manner as the first test, asserting that it will be equal to `10000`. 

Simple functionality, simple tests!  
Before running the tests, we must ensure we are running a local blockchain with Truffle. Open a separate terminal window and run the command:

```text
truffle develop
```

With this local blockchain running, we can test the SimpleStorage contract with the command:

```text
truffle test
```

This will compile the contract before deploying it to the Truffle development chain and performing the tests. You should see similar output in your terminal:

```text
Using network 'development'.

Compiling your contracts...
===========================
> Compiling ./test/TestSimpleStorage.sol
> Artifacts written to /var/folders/xc/jxvcxfc901nd0jmqv594w8sw0000gn/T/test--89605-BscbjjTFIYq2
> Compiled successfully using:
   - solc: 0.8.0+commit.c7dfd78e.Emscripten.clang

  TestSimpleStorage
    ✓ testInitialStoredDataUsingDeployedContract (60ms)
    ✓ testSettingStoredData (56ms)

  2 passing (6s)
```

{% hint style="warning" %}
If there is an error : `Error: Cannot find module '@truffle/hdwallet-provider'`. You need to install the dependencies in this sub-module with `yarn` as mentioned at the beginning of the tutorial.
{% endhint %}

# Deploy the smart contract

{% hint style="tip" %}
Before we deploy, there is one last thing to prepare. Put the secret recovery phrase $also known as a mnemonic seed phrase$ of the active Metamask account into the file **`contracts/polygon/SimpleStorage/.secret`**.  
{% endhint %}

It should look like this, with all 12 words on a single line, no quotation marks :

{% code title="/contracts/polygon/SimpleStorage/.secret" %}
```text
airport battle cargo daughter educate focus green honey immune jelly kick language
```
{% endcode %}


Compiling Solidity with Truffle is a straightforward process, just make sure that your preferred configuration is set in `truffle-config.js` $paths, compilers, networks, etc.$ and then run the command:

```bash
truffle compile
```

Deploying Migrations with Truffle is quite similar to deploying, but provides more flexibility for custom workflows. A full explanation of migrations is beyond the scope of this tutorial, but please do read the Truffle [documentation](https://www.trufflesuite.com/docs/truffle/getting-started/running-migrations) on the subject. To deploy the SimpleStorage contract to Polygon, run this command :

```bash
truffle migrate --network matic
```

The flag `--network matic` lets Truffle know which network we want to deploy our migrations to. The configuration for each network is set inside of `truffle-config.js`. 

For this step to work, we will also need to make sure there is a valid secret recovery phrase inside of the `.secret` file, and that the account has some MATIC tokens. If you have followed the tutorial steps so far, these conditions should be satisfied. 

-------------------------------------

# Using the Application Binary Interface (ABI):

[The Solidity Contract ABI Specification](https://docs.soliditylang.org/en/v0.8.6/abi-spec.html) explains that an ABI is a standard way to interact with contracts in the Ethereum ecosystem, both from outside the blockchain and for contract-to-contract interaction. Data is encoded according to its type, as described in the specification. The encoding is not self describing and thus requires a schema in order to decode.

The ABI is considered an "[artifact](https://trufflesuite.github.io/artifact-updates/background.html#what-are-artifacts)" in relation to a compiled Solidity contract. Most commonly, developers will interact with an ABI in JSON format. Read more about [what this means](https://docs.soliditylang.org/en/v0.8.6/abi-spec.html#json).

-------------------------------------

# Conclusion

Truffle is only one of several different ways to deploy smart contracts on Polygon. It is also possible to use the Ethereum [Remix IDE](https://remix.ethereum.org), or another smart contract development tool called [HardHat](https://hardhat.org). Now that we have a deployed and functioning smart contract on Polygon, let's interact with it!


Learn how to write, test and deploy Solidity on Polygon using Truffle

Deploy a Solidity Smart Contract

# Introduction

In this tutorial, you will learn how to deploy smart contracts to the Polygon (Matic) Mumbai test network.
We'll also cover some of the possible errors which might occur during the deployment, and how to fix them.
So, grab a cup of coffee ☕️ and follow along!

# Prerequisites

This tutorial assumes that you have some beginner-level experience in programming & blockchain understanding.

# Requirements

* [Truffle](https://www.trufflesuite.com/)
* [MetaMask](https://metamask.io)

# Getting started

To be able to interact with the Mumbai testnet via MetaMask, you first have to add an RPC endpoint to your MetaMask wallet. This will allow you to view your MATIC balance, also to send and receive MATIC tokens. Open the extension in your browser by clicking on the Fox icon, then click on the Identicon at the top right of the extension window, then click through `Settings -> Networks -> Add network`. When you have entered the information as shown in the image below, click on **Save** to complete the process.

![<img src="../../../.gitbook/assets/deploy-&-debug-on-polygon-1.png" width="80" />](../../../.gitbook/assets/deploy-&-debug-on-polygon-1.png)

To get Mumbai MATIC tokens so that you can pay the gas fees for smart contract deployment and testing, go to the Matic Faucet at [https://faucet.matic.network](https://faucet.matic.network). Select the Mumbai network, paste your account address into the textinput and click on **Submit**.

When you are done, open MetaMask and check your wallet - you'll see the MATIC tokens there. Keep in mind that MATIC tokens on the Mumbai testnet have no value, and cannot be exchanged with Mainnet MATIC.

![](../../../.gitbook/assets/deploy-&-debug-on-polygon-2.png)

# truffle-config

The truffle-config file is an important file to understand. In this file, we must configure the paths to the Solidity files (`contracts_directory`) and the contract Application Binary Interface (`contracts_build_directory`). We also need to define the available **networks**.

```javascript
const HDWalletProvider = require("@truffle/hdwallet-provider")
require('dotenv').config(); // Load .env file

module.exports = {
  networks: {
   // For Ganache, your personal blockchain
   development: {
      host: "127.0.0.1",     // Localhost (default: none)
      port: 8545,            // Standard Ethereum port 
      network_id: "*",       // Any network (default: none)
    },
  },
  contracts_directory: './src/contracts/', // Path to smart contracts
  contracts_build_directory: './src/abis/', // Path to ABIs
  compilers: {
    solc: {
      optimizer: {
        enabled: true,
        runs: 200
      }
    }
  }
}
```

Ensure you create an `.env` file in your project root directory and paste into it the 12 word Secret Recovery Phrase of your (_preferably newly generated and testnet-only_) MetaMask wallet with the variable name `MNEMONIC`. This will be loaded by truffle at runtime, and the environment variable can then be accessed with `process.env.MNEMONIC`.

```text
MNEMONIC=for example put your twelve word BIP39 secret recovery phrase here
```

Now, let's add the `matic` network in the `truffle-config.js` file which will contain our environment variable MNEMONIC and the RPC endpoint URL we want to use.
The network ID for Mumbai is `80001`. Here you can also set the gas limit and gas price for faster transactions.

```javascript
    matic: {
      provider: () => new HDWalletProvider(process.env.MNEMONIC, 
      `https://rpc-mumbai.matic.today`),
      network_id: 80001,
      confirmations: 2,
      timeoutBlocks: 200,
      skipDryRun: true,
      gas: 6000000,
      gasPrice: 10000000000,
    },
```

# Deploy smart contracts with Truffle

* Command: `truffle migrate --network matic`

If you're deploying a contract multiple times, then deploy with the `--reset` flag to avoid JSON errors.

* Command: `truffle migrate --network matic --reset`

If everything worked fine, you'll see something like this:

```text
2_deploy_contracts.js
=====================

   Replacing 'MyContract'
   ------------------
   > transaction hash:    0x1c94d095a2f629521344885910e6a01076188fa815a310765679b05abc09a250
   > Blocks: 5            Seconds: 5
   > contract address:    0xbFa33D565Fcb81a9CE8e7a35B61b12B04220A8EB
   > block number:        2371252
   > block timestamp:     1578238698
   > account:             0x9fB29AAc15b9A4B7F17c3385939b007540f4d791
   > balance:             79.409358061899298312
   > gas used:            1896986
   > gas price:           0 gwei
   > value sent:          0 ETH
   > total cost:          0 ETH

   Pausing for 2 confirmations...
   ------------------------------
   > confirmation number: 5 (block: 2371262) initialized!

   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:                   0 ETH


Summary
=======
> Total deployments:   2
> Final cost:          0 ETH
```

# Deployment errors and solutions
If you encounter any of these errors, follow the instructions to solve them:

**Error:**

```text
Error: PollingBlockTracker - encountered an error while attempting to update latest block:
```

**Solution:**

Change the RPC endpoint URL in `truffle-config` from 'https://rpc-mumbai.matic.today' to a [DataHub RPC endpoint](https://datahub.figment.io/services/Polygon). This will require you to register for an DataHub account and get a Polygon API key. If you already have a DataHub account, add your API key to the `.env` file as something descriptive such as `DATAHUB_POLYGON_API_KEY`.

```javascript
    matic: {
      provider: () => new HDWalletProvider(process.env.MNEMONIC, 
      `https://matic-mumbai--jsonrpc.datahub.figment.io/apikey/${process.env.DATAHUB_POLYGON_API_KEY}`),
      network_id: 80001,
      confirmations: 2,
      timeoutBlocks: 200,
      skipDryRun: true,
    },
```

**Error:**

```text
*** Deployment Failed ***

"Migrations" -- only replay-protected (EIP-155) transactions allowed over RPC.
```

**Solution:**

Truffle's `hdwallet-provider` version 1.4.0 will fix this error.

You will need to run `npm install @truffle/hdwallet-provider@1.4.0` (or `yarn add @truffle/hdwallet-provider@1.4.0` if your project is using `yarn` instead of `npm`)

**Error:**

```text
Error:  *** Deployment Failed ***

"Migrations" -- Transaction was not mined within 750 seconds, please make sure your transaction was properly sent. Be aware that it might still be mined!
```

**Solution:**

Just add `networkCheckTimeout: 100000`:

```javascript
    matic: {
      provider: () => new HDWalletProvider(process.env.MNEMONIC, 
      `https://matic-mumbai--jsonrpc.datahub.figment.io/apikey/${process.env.DATAHUB_POLYGON_API_KEY}`),
      network_id: 80001,
      confirmations: 2,
      timeoutBlocks: 200,
      skipDryRun: true,
      networkCheckTimeout: 100000,
    },
```

*If you discover any new errors and If you know the solution for it, then feel free to make a PR, we'll add your Error-Fix here.*

# Conclusion

After this tutorial you will be able to:
* Deploy smart contracts on Polygon (Matic) Mumbai testnet using Truffle.
* Solve any errors that occur while deploying the smart contracts.

# About the Author

Akhilesh Thite is an Indian tech enthusiast with a passion for Software Development, Open-Source & Decentralization. You can connect with him on [GitHub](https://github.com/AkhileshThite).

# References
* Truffle docs: https://www.trufflesuite.com/docs/truffle/overview
* Polygon (Matic) docs: https://docs.matic.network/docs/develop/getting-started


Learn how to deploy smart contracts to the Polygon Mumbai testnet and how to debug them

Deploying and Debugging Smart Contracts on Polygon

[**The original tutorial can be found on Polygon $Matic$'s official documentation here.**](https://docs.matic.network/docs/develop/full-stack-dapp-with-pos)
# Introduction

This tutorial is a brief introduction to Full Stack DApp deployed on Polygon $Matic$ with Proof of Stake Security. As a DApp developer, to build on PoS security, the procedure is as simple as taking your smart contract and deploying it on Polygon $Matic$. This is possible because of the account**-**based architecture enabling an EVM-compatible sidechain.

# Prerequisites

- Node 8.10+

```text
node -v
v12.16.0
```

If you need to update node:

```text
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash nvm install --ltsnvm use lts
```

- Metamask: You can download the Metamask extension from the official website: [https://metamask.io/](https://metamask.io/)

# What are we building?

We plan to build a Decentralized Airbnb that incorporates three main functionalities:

* Rent out a space
* View available spaces
* Rent a space

Go ahead and clone the [repository](https://github.com/maticnetwork/ethindia-workshop) and install dependencies and then run `npm install`

# Setup

## Setting up Data Structures

We’d like a property with a name, description, owner and a price to be rented.

So we’d like a structure named ‘property’ that would include a name, description, price, owner, boolean flag denoting if its active or not, and a boolean array denoting the booked days of the property.

```javascript
struct Property { 
  string name;
  string description;
  bool isActive;      // is property active
  uint256 price;      // per day price in wei (1 ether = 10^18 wei)
  address owner;      // Owner of the property
  bool[] isBooked;
  // Is the property booked on a particular day,
  // For the sake of simplicity, we assign 0 to Jan 1, 1 to Jan 2 and so on
  // so isBooked[31] will denote whether the property is booked for Feb 1
}
```

We’d also like to keep track of the Property object we just created by mapping a unique property id to each new Property object.

For this, we first declare a variable propertyId followed by a mapping of propertyId to property, called properties.

```javascript
uint256 public propertyId;
// mapping of propertyId to Property object
mapping(uint256 => Property) public properties;
```

Having a property we’d also like to keep track of all the bookings made to date.

We can do that by creating another structure for a Booking with properties such as: propertyId, check in and check out date and the user who made the booking.

```javascript
struct Booking {
  uint256 propertyId;
  uint256 checkInDate;
  uint256 checkoutDate;
  address user;
}
```

Similar to what we did to keep track of each property, we can do to keep track of each booking - by mapping each booking id to a particular booking object.

```javascript
uint256 public bookingId;
// mapping of bookingId to Booking object
mapping(uint256 => Booking)
public bookings;
```

## Defining events

Next, we would want to add some logic to the flow of data and the working of the smart contract. For this, we add functions.

On the whole, we require three basic functions:

* To put up a property for rent on Airbnb market - `rentOutproperty`
* To make a booking - `rentProperty`
* To take down a property from the market - `markPropertyAsInactive`

## Defining functions

`renOutProperty`

```javascript
function rentOutproperty(string memory name, string memory description, uint256 price) public {
Property memory property = Property(name, description, true /* isActive */, price, msg.sender /* owner */, new bool[](365));

// Persist `property` object to the "permanent" storage
properties[propertyId] = property;

// emit an event to notify the clients
emit NewProperty(propertyId++);
```

`rentProperty`

```javascript
function rentProperty(uint256 _propertyId, uint256 checkInDate, uint256 checkoutDate) public payable {
// Retrieve `property` object from the storage
Property storage property = properties[_propertyId];

// Assert that property is active
require(
  property.isActive == true,
  "property with this ID is not active"
);

// Assert that property is available for the dates
for (uint256 i = checkInDate; i < checkoutDate; i++) {
  if (property.isBooked[i] == true) {
    // if property is booked on a day, revert the transaction
    revert("property is not available for the selected dates");
  }
}
```

`markPropertyAsInactive`

```javascript
function markPropertyAsInactive(uint256 _propertyId) public {
require(
  properties[_propertyId].owner == msg.sender,
  "THIS IS NOT YOUR PROPERTY"
);
properties[_propertyId].isActive = false;
}
```

We used two functions `_sendFunds` and `_createBooking` in the `rentProperty` function. These two functions are internal functions and as the naming convention in Solidity goes, they are prefixed with an underscore. We require these to be internal for we won’t want anyone to be able to send funds to their own account or create a booking on an inactive property.

These two functions are defined as:

`_sendFunds` You can read more about the particular transfer function we’ve used [here](https://solidity.readthedocs.io/en/v0.5.10/050-breaking-changes.html?highlight=address%20payable#explicitness-requirements).

```javascript
function _sendFunds (address beneficiary, uint256 value) internal {
  address(uint160(beneficiary)).transfer(value);
}
```

`_createBooking`

```javascript
function _createBooking(uint256 _propertyId, uint256 checkInDate, uint256 checkoutDate) internal {
// Create a new booking object
bookings[bookingId] = Booking(_propertyId, checkInDate, checkoutDate, msg.sender);

// Retrieve `property` object from the storage
Property storage property = properties[_propertyId];

// Mark the property booked on the requested dates
for (uint256 i = checkInDate; i < checkoutDate; i++) {
  property.isBooked[i] = true;
}

// Emit an event to notify clients
emit NewBooking(_propertyId, bookingId++);

}
```

You can view the entire code [here](https://github.com/maticnetwork/ethindia-workshop/blob/master/contracts/Airbnb.sol).

Once you have the contract code ready, next steps would be to deploy the code on a testnet and test its working.

# Deploy and Test

For this, we use the Remix IDE - an online IDE to develop smart contracts.

* Head over to [https://remix.ethereum.org](https://remix.ethereum.org/) If you’re new to Remix, You’ll first need to activate two modules: Solidity Compiler and Deploy and Run Transactions.

![](https://docs.matic.network/img/solidity/remix-plugin-manager.png)

If not already activated, you will need to activate plugins such as `Deploy & Run Transactions` and `Solidity Complier`

Your left menu should look something like this:

![](https://docs.matic.network/img/solidity/remix-left-menu.png)

* Create a new file, Airbnb.sol
* Copy the entire smart contract code and paste it in the editor

```javascript
pragma solidity ^0.5.7;

contract Airbnb {

  // Property to be rented out on Airbnb
  struct Property {
    string name;
    string description;
    bool isActive; // is property active
    uint256 price; // per day price in wei (1 ether = 10^18 wei)
    address owner; // Owner of the property
    bool[] isBooked;
    // Is the property booked on a particular day,
    // For the sake of simplicity, we assign 0 to Jan 1, 1 to Jan 2 and so on
    // so isBooked[31] will denote whether the property is booked for Feb 1
  }

  uint256 public propertyId;

  // mapping of propertyId to Property object
  mapping(uint256 => Property) public properties;

  // Details of a particular booking
  struct Booking {
    uint256 propertyId;
    uint256 checkInDate;
    uint256 checkoutDate;
    address user;
  }

  uint256 public bookingId;

  // mapping of bookingId to Booking object
  mapping(uint256 => Booking) public bookings;

  // This event is emitted when a new property is put up for sale
  event NewProperty (
    uint256 indexed propertyId
  );

  // This event is emitted when a NewBooking is made
  event NewBooking (
    uint256 indexed propertyId,
    uint256 indexed bookingId
  );

  /**
   * @dev Put up an Airbnb property in the market
   * @param name Name of the property
   * @param description Short description of your property
   * @param price Price per day in wei (1 ether = 10^18 wei)
   */
  function rentOutproperty(string memory name, string memory description, uint256 price) public {
    Property memory property = Property(name, description, true /* isActive */, price, msg.sender /* owner */, new bool[](365));

    // Persist `property` object to the "permanent" storage
    properties[propertyId] = property;

    // emit an event to notify the clients
    emit NewProperty(propertyId++);
  }

  /**
   * @dev Make an Airbnb booking
   * @param _propertyId id of the property to rent out
   * @param checkInDate Check-in date
   * @param checkoutDate Check-out date
   */
  function rentProperty(uint256 _propertyId, uint256 checkInDate, uint256 checkoutDate) public payable {
    // Retrieve `property` object from the storage
    Property storage property = properties[_propertyId];

    // Assert that property is active
    require(
      property.isActive == true,
      "property with this ID is not active"
    );

    // Assert that property is available for the dates
    for (uint256 i = checkInDate; i < checkoutDate; i++) {
      if (property.isBooked[i] == true) {
        // if property is booked on a day, revert the transaction
        revert("property is not available for the selected dates");
      }
    }

    // Check the customer has sent an amount equal to (pricePerDay * numberOfDays)
    require(
      msg.value == property.price * (checkoutDate - checkInDate),
      "Sent insufficient funds"
    );

    // send funds to the owner of the property
    _sendFunds(property.owner, msg.value);

    // conditions for a booking are satisfied, so make the booking
    _createBooking(_propertyId, checkInDate, checkoutDate);
  }

  function _createBooking(uint256 _propertyId, uint256 checkInDate, uint256 checkoutDate) internal {
    // Create a new booking object
    bookings[bookingId] = Booking(_propertyId, checkInDate, checkoutDate, msg.sender);

    // Retrieve `property` object from the storage
    Property storage property = properties[_propertyId];

    // Mark the property booked on the requested dates
    for (uint256 i = checkInDate; i < checkoutDate; i++) {
      property.isBooked[i] = true;
    }

    // Emit an event to notify clients
    emit NewBooking(_propertyId, bookingId++);
  }

  function _sendFunds (address beneficiary, uint256 value) internal {
    // address(uint160()) is a weird solidity quirk
    // Read more here: https://solidity.readthedocs.io/en/v0.5.10/050-breaking-changes.html?highlight=address%20payable#explicitness-requirements
    address(uint160(beneficiary)).transfer(value);
  }

  /**
   * @dev Take down the property from the market
   * @param _propertyId Property ID
   */
  function markPropertyAsInactive(uint256 _propertyId) public {
    require(
      properties[_propertyId].owner == msg.sender,
      "THIS IS NOT YOUR PROPERTY"
    );
    properties[_propertyId].isActive = false;
  }
}
```

* Select `0.5.7+commit.6da8b019` as the compiler and compile the smart contract
* Once compiled, the smart contract is ready to be deployed onto the testnet/mainnet.
* Copy the generated ABI - we would be needing that for our next steps

![](https://docs.matic.network/img/solidity/remix-abi.png)

* Select Javascript VM as the environment in the dropdown - this connects remix to a simple blockchain environment via your browser - we'll learn more about deploying on Polygon $Matic$'s test network in the next tutorial \[link\]

![](https://docs.matic.network/img/solidity/remix-contract-test-functions.png)

Once Metamask is connected to Remix, the ‘Deploy’ transaction would generate another metamask popup that requires transaction confirmation.

![](https://docs.matic.network/img/solidity/remix-metamask-tx-confirm.png)

* Click Deploy
* And once the contract is deployed you can test the functions

# Setting up our DApp

Inside the cloned repository, navigate to `plugins` directory inside `dapp-ui`

Paste the contract address copied in previous step to the `airbnbContractAddress` variable present in `utils.js`.

Get the ABI copied from the previous step

* Navigate to `dapp-ui/plugins/airbnbABI.json` and add the following:

```javascript
{"abi":}
```

* Paste the ABI as the value of the 'abi' key just defined
* It should look something like this:

```javascript
{"abi": [{"constant": true,"inputs": [],"name": "bookingId","outputs": [{"name": "","type": "uint256"}],"payable": false,"stateMutability": "view","type": "function"},.................................]}
```

## Connect UI to Metamask

Next, we’d like the UI to be connected with Metamask. For this we follow the following two steps:

First, add the `setProvider()` method inside `mounted()` method in `dapp-ui/pages/index.vue`

> Note: You might face indentation issues after pasting it.

```javascript
// init Metamask
await setProvider()
// fetch all properties
const properties = await fetchAllProperties()this.posts = properties
```

Next we’d like to inject metamask instance - for this we define the `setProvider()` method in `dapp-ui/plugins/utils.js`

```javascript
if (window.ethereum)
{
  metamaskWeb3 = new Web3(ethereum);
  try{
  // Request account access if needed
  await ethereum.enable();
  }
  catch (error){
  // User denied account access...
  }
}
else if (window.web3){
    metamaskWeb3 = new Web3(web3.currentProvider);
}
account = await metamaskWeb3.eth.getAccounts()
```

## Defining components and functions

Once we have connected metamask, we’d next want to be able to communicate with the deployed contract. For this, we’ll create a new contract object - that represents our airbnb smart contract

Inside `dapp-ui/plugins/utils.js` create the following function that instantiates and returns the `airbnbContract`

```javascript
function getAirbnbContract(){
  airbnbContract = airbnbContract || new metamaskWeb3.eth.Contract(AirbnbABI.abi, airbnbContractAddress)
  return airbnbContract
}
```

With metamask connected and contract initiated we can go forward with interacting with our contract

The `dapp-ui` folder structure looks something like this:

![](https://docs.matic.network/img/dapp/folder-structure.png)

Inside the `dapp-ui/components` directory, we have the separate components that make up our app interface.

The three main functions we’d like our app to support are:

* Post a new property - or rent out space
* View all available properties
* Rent a new property from all available spaces

We’ll first set up our property form - which is used to rent out a property - on the backend it interacts with the `rentOutProperty` function of our Airbnb smart contract

Navigate to `dapp-ui/components/propertyForm.vue` and add the following code inside `postAd()` method. The `postAd()` method should look something like this:

```javascript
// convert price from ETH to Wei
const weiValue = web3().utils.toWei(this.price, 'ether');
// call utils.postProperty
postProperty(this.title, this.description, weiValue);
```

The `postProperty` function is to be defined inside `dapp-ui/plugins/utils.js`. Which should look something like this:

```javascript
const prop = await getAirbnbContract().methods.rentOutproperty(name, description, price).send(
  {from: account[0]
})
alert('Property Posted Successfully')
```

Next, to incorporate booking of a new property, we’ll define the `book()` function in `dapp-ui/components/detailsModal.vue`. Copy the code snippet inside the `book()`

```javascript
// get Start date
const startDay = this.getDayOfYear(this.startDate)
// get End date
const endDay = this.getDayOfYear(this.endDate)
// price calculation
const totalPrice = web3().utils.toWei(this.propData.price, 'ether') * (endDay - startDay)
// call utils.bookProperty
bookProperty(this.propData.id, startDay, endDay, totalPrice)
```

The `bookProperty()` function is to be defined inside `utils.js` and should look something like this:

```javascript
const prop = await getAirbnbContract().methods.rentProperty(spaceId, checkInDate, checkOutDate).send(
  {from: account[0],value: totalPrice,})
  alert('Property Booked Successfully')
```

Copy the code snippet inside the `bookProperty()`

The next and final functionality to add is fetching and displaying all available spaces. `fetchAllProperties()` function is invoked inside `index.vue` and defined inside `utils.js`

Navigate to `dapp-ui/plugins/utils.js` and add the following code to the `fetchAllProperties()` method:

```javascript
const propertyId = await getAirbnbContract().methods.propertyId().call()
// iterate till property Id
const properties = []for (let i = 0; i < propertyId; i++){
  const p = await airbnbContract.methods.properties(i).call()
  properties.push(
    {id: i,name: p.name,description: p.description,price: metamaskWeb3.utils.fromWei(p.price)}
  )}
  return properties
```

# Run and Test

And this marks the end of our DApp tutorial! We know it’s been a long one.

Execute `npm run dev` to view and interact with your decentralized application.

![](https://docs.matic.network/img/dapp/rent-your-property.png)

Click on ‘Rent your Property’ button on top right, it displays a dialogue box requiring title, description and price. The submit button sends these values to the function ‘rentOutProperty’ on the smart contract in the form of a transaction. Since it ‘transacts’ with the blockchain it would create a metamask popup requiring you to sign the transaction, shown below.

![](https://docs.matic.network/img/dapp/dapp-metamask-tx-confirm.png)

The Metamask popup displays the gas price for the transaction.

![](https://docs.matic.network/img/dapp/dapp-rent-success.png)

![](https://docs.matic.network/img/dapp/rent-out-success.png)

After the transaction is confirmed, the property lives on the blockchain and since it is available to be booked, it is displayed on the homepage.

If you had any difficulties following this tutorial or simply want to discuss Polygon $Matic$ and DataHub tech with us you can [join our community](https://discord.gg/Chhuv5zHy3) today!


Learn to build a full-stack dApp deployed on Polygon (Matic) with Proof of Stake Security.

Build a decentralized AirBnB on Polygon (Matic)

# What is Polygon?

{% hint style="info" %}
"_Polygon is a protocol and a framework for building and connecting Ethereum compatible blockchain networks. Aggregating scalable solutions on Ethereum, supporting a multi-chain Ethereum ecosystem._"
{% endhint %}

**Polygon** is designed to interoperate with and solve some of Ethereum's limitations: Scaling, the speed of transaction throughput - and poor user experience such as the high cost of transactions. Polygon's testnets can currently reach over 7000 transactions per second and the low cost of the MATIC token means cheap transaction fees!  
  
Matic, the predecessor of **Polygon**, utilized a single scaling solution known as [Plasma](https://education.district0x.io/general-topics/understanding-ethereum/understanding-plasma/) which allows for 'child' blockchains to move transaction bloat off of the main Ethereum network. A Plasma chain can have different conditions to the main network, and can be specifically tuned to satisfy certain needs. Sidechains based on Plasma offer cheap and rapid transactions that are ultimately settled in batches on the main chain, so they benefit from the security of the main chain without compromising performance.

Today, **Polygon** operates a Proof-of-Stake (PoS) sidechain. **Polygon** will grow to include other scaling solutions like [zero knowledge proofs](https://consensys.net/blog/blockchain-explained/zero-knowledge-proofs-starks-vs-snarks/) and [optimistic rollups](https://blog.polygon.technology/polygon-research-ethereum-scaling-with-rollups-8a2c221bf644) in the future, and allow developers to choose how best to scale their dApps. Currently, connecting to Polygon purely from a user perspective means using a compatible wallet such as Metamask, and being aware of the difference between Polygon and Ethereum.

[**MATIC**](https://coinmarketcap.com/currencies/polygon/) is the native token of **Polygon**, as [ETH](https://coinmarketcap.com/currencies/ethereum/) is the native token of Ethereum. MATIC is used to pay transaction (gas) fees on **Polygon**. It is also used to secure the network via staking and to pay out staking rewards. Holding MATIC allows users to take part in the decentralized governance of the protocol by voting on [Polygon Improvement Proposals](https://forum.matic.network/t/polygon-improvement-proposals/630).

Check out [Awesome Polygon](https://awesomepolygon.com/dapps/) for many examples of what is being built on **Polygon**! [This article](https://finematics.com/polygon-commit-chain-explained/) on Finematics is also worth a look.

There are a few important sites that will be of interest to users of **Polygon**

* [For bridging assets between **Polygon** and Ethereum](https://wallet.matic.network)
* [For knowledge!](https://docs.matic.network/) 
* [For free testnet assets](https://faucet.matic.network/)

-------------------------------------

## Heimdall & Bor

For **Polygon**, the node is designed with a two layer implementation with Heimdall (the Validator layer) & Bor (the Block Producer layer) :

* **Heimdall** uses Proof-of-Stake verification and is responsible for checkpoint blocks on Ethereum mainnet. It also handles the Validators and rewards management. The role of Validators is to run a full node, produce blocks, validate and participate in consensus and commit checkpoints on the Ethereum Mainnet. Heimdall ensures synchronization with Ethereum.
  * On DataHub, the RPC endpoint is used to access Heimdall. 
* **Bor** is compatible with the Ethereum Virtual Machine (EVM), it is a fork of the [Geth client](https://geth.ethereum.org/docs/) with customized consensus algorithms. User interaction on **Polygon** takes place on this chain, it also makes available the functionality and compatibility of Ethereum developer tooling and applications.  Read more about the [core concepts](https://docs.matic.network/docs/contribute/bor/core_concepts) of Bor.
  * On DataHub, the JSON-RPC endpoint is used to access Bor.

-------------------------------------

## Bridging Polygon & Ethereum

Polygon's Validators continuously monitor a contract on Ethereum's mainnet called _**StateSender**_. Each time a registered contract on Ethereum calls this contract, it emits an event. Using this event, Polygon validators relay the data to another contract on the **Polygon** chain. This _**StateSync**_ mechanism is used to send data from Ethereum to **Polygon**.

Validators also periodically submit a hash of all transactions on the **Polygon** chain to the Ethereum chain. This is the mechanism which enables two way data $state$ transfer between **Polygon** and Ethereum. The [_**Checkpoint**_](https://docs.matic.network/docs/contribute/heimdall/checkpoint) can be used to verify any transaction that happened on **Polygon**. Once a transaction is verified to have happened on **Polygon** chain, action can be taken accordingly on Ethereum. 

It is possible to process many transactions on **Polygon** and use relatively little MATIC for gas fees. This helps reduce friction for onboarding new users, because there is a much lower barrier to entry in terms of raw cost as compared to settling the same number of transactions on Ethereum.

In summary, **Polygon** is an attractive solution for developers who wish to keep much of the tooling and community of Ethereum, while leveraging the best scaling for their decentralized applications.

-------------------------------------

# Next Steps

Now that we gave you a quick overview of Polygon ecosystem, we still need to set up our environment.


Introduction

At this point we have deployed a smart contract on the Polygon testnet and we have a client side application that's ready to interact with it. We just need to wire up the last part! We built a simple page on the last step to help you interact with the smart contract. Since the contract has only two methods (`set` and `get`) that's all the UI will do: set a number through the smart contract.

As simple as it sounds, what's happening in the background is actually very powerful: we're using the Polygon blockchain to store information (in this example, a number) and we're using a smart contract as an interface to read and write that information to the blockchain. What's crucial is that all this is happening without having to spin up a database and an API... So let's go!

-------------------------------------

# Challenge

{% hint style="tip" %}
In the file `components/protocols/polygon/components/steps/Setter.tsx`, implement the `setValue` function.    
{% endhint %}

**Take a few minutes to figure this out.**

```typescript
  const setValue = async () => {
    setFetchingSet(true);
    setTxHash(null);

    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();

    // Try to figure out the expected parameters
    // @ts-ignore
    const contract = new ethers.Contract(undefined);

    try {
      // Try to figure out the expected method
      // @ts-ignore
      const transactionResult = undefined;

      setFetchingSet(false);
      setInputNumber(0);
      setConfirming(true);
      const receipt = await transactionResult.wait();
      setTxHash(receipt.transactionHash);
      setConfirming(false);
    } catch (error) {
      setFetchingSet(false);
    }
  };
```


Need some help? Check out these two tips/links  
* [**Create a Contract using ethers**](https://docs.ethers.io/v5/api/contract/contract/#Contract--creating) 
	* You can **console.log `SimpleStorageJson`** to find the contract's `abi` and `address` (through the property `networks`)  
* [**How to call a contract's methods on a ethers Contract object**](https://docs.ethers.io/v5/api/contract/contract/#Contract-functionsCall)  
* To read from the blockchain you don't need to spend any tokens so you can just use a provider to create a Contract instance. But to write you will need to create and sign a transaction through Metamask. Use a `signer` to create the Contract object!

{% hint style="info" %}
You can [**join us on Discord**](https://discord.gg/fszyM7K), if you have questions or want help completing the tutorial.
{% endhint %}

Still not sure how to do this? No problem! The solution is below so you don't get stuck.

-------------------------------------

# Solution

```typescript
// solution
  const setValue = async () => {
    setFetchingSet(true);
    setTxHash(null);

    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(
      SimpleStorageJson.networks['80001'].address,
      SimpleStorageJson.abi,
      signer,
    );
    try {
      const transactionResult = await contract.set(inputNumber);
      setFetchingSet(false);
      setInputNumber(0);
      setConfirming(true);
      const receipt = await transactionResult.wait();
      setTxHash(receipt.transactionHash);
      setConfirming(false);
    } catch (error) {
      setFetchingSet(false);
    }
  };
```

**What happened in the code above?**

* We create Contract objects using
  * The contract JSON's address.
  * The contract JSON's ABI.
  * A signer, from the ethers web3 provider.
* We then call the function `set` on this Contract object to operate on our decentralized code. The names of the functions must match the ones we defined in our Solidity smart contract. These are available via the ABI.

-----------------------------

# Make sure it works

Once the code above has been saved, you can click and this is what the UI should look like!

![](../../../.gitbook/assets/pathways/polygon/polygon-setter.gif)

-------------------------------------

# Conclusion

Now that we've set the storage of our contract, we can read it. We're going to learn how to do this in the final tutorial of the pathway.


Learn how to set a smart contract's storage