Merge pull request #577 from oceanprotocol/matic-bridge-guide

Polygon Bridge Docs

content/concepts/networks.md

@@ -3,11 +3,11 @@ title: Supported Networks
 description: All the public networks the Ocean Protocol contracts are deployed to, and additional core components deployed to them.
 ---
 
-Ocean Protocol contracts are deployed on multiple public Ethereum networks. You can always find the most up-to-date deployment addresses for all individual contracts in the [address.json](https://github.com/oceanprotocol/contracts/blob/master/artifacts/address.json) artifact.
+Ocean Protocol contracts are deployed on multiple public networks. You can always find the most up-to-date deployment addresses for all individual contracts in the [address.json](https://github.com/oceanprotocol/contracts/blob/master/artifacts/address.json) artifact.
 
 In each network, you’ll need ETH to pay for gas, and OCEAN for certain Ocean actions. Because the Ethereum mainnet is a network for production settings, ETH and OCEAN tokens have real value on there. The ETH and OCEAN tokens in each test network don’t have real value and are used for testing-purposes only. They can be obtained with _faucets_ to dole out ETH and OCEAN.
 
-## Mainnet
+## Ethereum Mainnet
 
 The Ethereum Mainnet is Ocean’s production network.
 
@@ -29,6 +29,42 @@ MetaMask and other ERC20 wallets default to Ethereum mainnet, therefore your wal
 | Aquarius     | `https://aquarius.mainnet.oceanprotocol.com` |
 | Subgraph     | `https://subgraph.mainnet.oceanprotocol.com` |
 
+## Polygon (ex Matic) Mainnet
+
+The Polygon Mainnet is another of the Ocean's production networks.
+
+Polygon is an external network that you might not find as a predefined one inside your wallet. Thus you'll need to connect to it manually using the information below:
+
+| What               | Value                                    |
+|--------------------|------------------------------------------|
+| Network Name       | `Matic Mainnet`                          |
+| RPC                | `https://rpc.polygon.oceanprotocol.com/` |
+| Chain Id           | `137`                                    |
+| Currency Symbol    | `MATIC`                                  |
+| Block Explorer URL | `https://explorer.matic.network/`        |
+  
+Follow our guide to learn how to use those values to [set up a custom network in MetaMask](/tutorials/metamask-setup/#set-up-custom-network).
+
+**Get Tokens**
+
+- Polygon (MATIC): [Exchanges to purchase](https://www.coingecko.com/en/coins/polygon#markets)
+- OCEAN:
+  - Token address: `0x282d8efCe846A88B159800bd4130ad77443Fa1A1`
+
+**Additional Components**
+
+| What         | URL                                                                   |
+|--------------|-----------------------------------------------------------------------|
+| Explorer     | `https://explorer-mainnet.maticvigil.com`                             |
+| Ocean Market | Point wallet to Polygon network, at `https://market.oceanprotocol.com`|
+| Provider     | `https://provider.polygon.oceanprotocol.com`                          |
+| Aquarius     | `https://aquarius.polygon.oceanprotocol.com`                          |
+| Subgraph     | `https://subgraph.polygon.oceanprotocol.com`                          |
+
+**Bridge**
+
+Check our [Polygon Bridge guide](/tutorials/polygon-bridge/) to learn how you can deposit, withdraw and send tokens.
+
 ## Ropsten
 
 Ropsten is a test network.

content/tutorials/metamask-setup.md

@@ -5,22 +5,48 @@ description: Tutorial about how to set up MetaMask for Chrome.
 
 > MetaMask can also be used with a TREZOR or Ledger hardware wallet but we don't cover those options below; see [the MetaMask documentation](https://metamask.zendesk.com/hc/en-us/articles/360020394612-How-to-connect-a-Trezor-or-Ledger-Hardware-Wallet).
 
+## MetaMask Set Up Steps
+
 1. Go to the [Chrome Web Store for extensions](https://chrome.google.com/webstore/category/extensions) and search for MetaMask.
 
    ![metamask-chrome-store](images/metamask-chrome-extension.png)
 
-2. Install MetaMask. It will get added as a browser extension in the top right corner of your browser. Read through and accept the terms and conditions. Create a username and password in the next step.
+- Install MetaMask. The wallet provides a friendly user interface that will help you through each step. MetaMask gives you two options: importing an existing wallet or creating a new one. Choose to `Create a Wallet`:
 
-   ![tandc-metamask](images/metamask-create-username-password.png)
+   ![Create a wallet](images/create-new-metamask-wallet.png)
 
-3. MetaMask will generate a secret backup phrase for you. Write it down, store it in a safe place, and click next.
+- In the next step create a new password for your wallet. Read through and accept the terms and conditions. After that, MetaMask will generate Secret Backup Phrase for you. Write it down and store it in a safe place.
 
-   ![backup](images/metamask-secret-passcode.png)
+   ![Secret Backup Phrase](images/secret-backup-phrase.png)
 
-4. Confirm your secret backup phrase and finish your MetaMask wallet setup.
+- Continue forward. On the next page, MetaMask will ask you to confirm the backup phrase. Select the words in the correct sequence:
 
-   ![setup-final-metamask](images/metamask_view-account-options.png)
+   ![Confirm secret backup phrase](images/confirm-backup-phrase.png)
+   
+- Voila! Your account is now created. You can access MetaMask via the browser extension in the top right corner of your browser. 
 
-5. Voila! Your account is now created. You can now manage Ether and Ocean Tokens with your wallet. You can copy your account address to clipboard from the options. When you want someone to send Ether or Ocean Tokens to you, you will have to give them that address. It's not a secret.
+   ![MetaMask browser extension](images/metamask-browser-extension.png)
+
+- You can now manage Ether and Ocean Tokens with your wallet. You can copy your account address to the clipboard from the options. When you want someone to send Ether or Ocean Tokens to you, you will have to give them that address. It's not a secret.
+
+   ![Manage tokens](images/manage-tokens.png)
 
 You can also watch our [tutorial video snippets](https://www.youtube.com/playlist?list=PL_dn0wVs9kWolBCbtHaFxsi408cumOeth) if you want more help setting up MetaMask.
+
+## Set Up Custom Network
+
+Sometimes it is required to use custom or external networks in MetaMask. We can add a new one through MetaMask's Settings. 
+
+Open the Settings menu and find the `Networks` option. When you open it, you'll be able to see all available networks your MetaMask wallet currently use. Click the `Add Network` button. 
+
+![Add custom/external network](images/metamask-add-network.png)
+
+There are a few empty inputs we need to fill:
+
+- **Network Name:** this is the name that MetaMask is going to use to differentiate your network from the rest.
+- **New RPC URL:** to operate with a network we need an endpoint (RPC). This can be a public or private URL.
+- **Chain Id:** each chain has an Id
+- **Currency Symbol:** it's the currency symbol MetaMask uses for your network
+- **Block Explorer URL:** MetaMask uses this to provide a direct link to the network block explorer when a new transaction happens
+
+When all the inputs are filled just click `Save`. MetaMask will automatically switch to the new network.

content/tutorials/polygon-bridge.md

@@ -0,0 +1,57 @@
+---
+title: Polygon (ex Matic)
+description: 
+---
+
+
+## Links
+
+- [Matic Wallet](https://wallet.matic.network)
+- [Matic Bridge](https://wallet.matic.network/bridge)
+- [How to set up a custom network in MetaMask](/tutorials/metamask-setup/#set-up-custom-network)
+
+## Intro to Polygon's Bridge
+
+The Polygon Network (ex Matic) provide us with a bridge (connecting Ethereum & Polygon blockchains), and a dedicated [wallet](https://wallet.matic.network) that simplify the steps of transferring digital assets between the two networks. The wallet connects to your account via Metamask (or any of the other supported wallets). 
+
+When you open the wallet link, the wallet will ask to log in. Select your preferred way of connecting and confirm the action. In our guide we'll use Metamask.
+
+![Login options](images/login-options.png)
+
+In some places, the Polygon Network is still using its old brand Matic. Either you run into Matic or Polygon - it's the exact same thing. For the purpose of this guide, we'll use Matic in the next few paragraphs since the interfaces you're going to use still use the old brand.
+
+## Deposit Tokens
+
+On the main page of the wallet, you can see all tokens you own on the Matic Mainnet. To deposit tokens (transfer them from the Ethereum Mainnet) you can either use the “deposit” button for a selected token or use “Move funds to Matic Mainnet”. 
+
+![Main wallet page](images/main-wallet-page.png)
+
+Both options will redirect you to the bridge interface. In case you chose the second one, use the dropdown and select the token you want to transfer from the Ethereum Mainnet.
+
+![Bridge interface](images/matic-bridge.png)
+
+Choose the amount to transfer and click the “Transfer” button. Matic’s bridge interface will guide you through the whole process and the different steps that will occur. You’ll need to sign two transactions on the Ethereum Mainnet. The first being the approval for your token to be traded on the Matic’s bridge and the second one being the deposit.
+
+![Transferring process](images/transferring-process.png)
+
+## Withdraw Tokens
+
+The withdrawing tokens process uses the same bridge interface. The only difference being that the withdraw happens from the Matic to the Ethereum Mainnet. 
+
+Again the bridge interface will guide you through the different steps. 
+
+For more in dept explanation of the deposit and withdraw actions check [the official Polygon (ex Matic) docs](vhttps://docs.matic.network/docs/develop/ethereum-matic/pos/getting-started).
+
+## Sending Tokens
+
+While in the first two cases, the transactions are signed on the Ethereum Mainnet, transferring tokens between two Matic addresses happens on the Matic Mainnet. Thus it’s required for you to connect to the Matic network to sign the transactions. You can use the following parameters to set the network in Metamask:
+
+| What               | Value                                    |
+|--------------------|------------------------------------------|
+| Network Name       | `Matic Mainnet`                          |
+| RPC                | `https://rpc.polygon.oceanprotocol.com/` |
+| Chain Id           | `137`                                    |
+| Currency Symbol    | `MATIC`                                  |
+| Block Explorer URL | `https://explorer.matic.network/`        |
+
+Follow our guide to learn how to use those values to [set up a custom network in MetaMask](/tutorials/metamask-setup/#set-up-custom-network).

data/sidebars/tutorials.yml

@@ -12,6 +12,11 @@
     - title: Use Your Wallet to Manage OCEAN Tokens
       link: /tutorials/wallets-and-ocean-tokens/
 
+- group: Bridges
+  items:
+    - title: Polygon (ex Matic)
+      link: /tutorials/polygon-bridge/
+
 - group: Marketplaces
   items:
     - title: Set Up a Marketplace

package-lock.json

@@ -24574,7 +24574,6 @@
           "version": "2.3.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
           "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "optional": true,
           "requires": {
             "arr-flatten": "^1.1.0",
             "array-unique": "^0.3.2",
@@ -24592,7 +24591,6 @@
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -24623,7 +24621,6 @@
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
           "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "optional": true,
           "requires": {
             "extend-shallow": "^2.0.1",
             "is-number": "^3.0.0",
@@ -24635,7 +24632,6 @@
               "version": "2.0.1",
               "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
               "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "optional": true,
               "requires": {
                 "is-extendable": "^0.1.0"
               }
@@ -24686,7 +24682,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           },
@@ -24695,7 +24690,6 @@
               "version": "3.2.2",
               "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
               "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "optional": true,
               "requires": {
                 "is-buffer": "^1.1.5"
               }
@@ -24705,14 +24699,12 @@
         "isobject": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "optional": true
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
         },
         "micromatch": {
           "version": "3.1.10",
           "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
           "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "optional": true,
           "requires": {
             "arr-diff": "^4.0.0",
             "array-unique": "^0.3.2",
@@ -24744,7 +24736,6 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
           "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-          "optional": true,
           "requires": {
             "is-number": "^3.0.0",
             "repeat-string": "^1.6.1"