diff --git a/content/tutorials/images/login-options.png b/content/tutorials/images/login-options.png new file mode 100644 index 00000000..187f2446 Binary files /dev/null and b/content/tutorials/images/login-options.png differ diff --git a/content/tutorials/images/main-wallet-page.png b/content/tutorials/images/main-wallet-page.png new file mode 100644 index 00000000..bbae9830 Binary files /dev/null and b/content/tutorials/images/main-wallet-page.png differ diff --git a/content/tutorials/images/matic-bridge.png b/content/tutorials/images/matic-bridge.png new file mode 100644 index 00000000..2c35cbdb Binary files /dev/null and b/content/tutorials/images/matic-bridge.png differ diff --git a/content/tutorials/images/metamask-add-network.png b/content/tutorials/images/metamask-add-network.png new file mode 100644 index 00000000..7b756c36 Binary files /dev/null and b/content/tutorials/images/metamask-add-network.png differ diff --git a/content/tutorials/images/transferring-process.png b/content/tutorials/images/transferring-process.png new file mode 100644 index 00000000..f131fc78 Binary files /dev/null and b/content/tutorials/images/transferring-process.png differ diff --git a/content/tutorials/metamask-setup.md b/content/tutorials/metamask-setup.md index 46c2c2fc..8e6d709f 100644 --- a/content/tutorials/metamask-setup.md +++ b/content/tutorials/metamask-setup.md @@ -5,6 +5,8 @@ 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) @@ -24,3 +26,21 @@ description: Tutorial about how to set up MetaMask for Chrome. 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. 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. diff --git a/content/tutorials/polygon-bridge.md b/content/tutorials/polygon-bridge.md new file mode 100644 index 00000000..2d778bcb --- /dev/null +++ b/content/tutorials/polygon-bridge.md @@ -0,0 +1,50 @@ +--- +title: Polygon (ex Matic) +description: +--- + +## 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 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 this [link](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: + +- Network Name: `Matic Mainnet` +- RPC: `https://rpc-mainnet.maticvigil.com/` +- Chain Id: `137` +- Currency Symbol: `MATIC` +- Block Explorer URL: `https://explorer.matic.network/` + +For a guide how to setup a custom (or external) network in Metamask follow the steps [here](/tutorials/metamask-setup/#set-up-custom-network). + +To send tokens to another Matic address use the `Send` button. diff --git a/data/sidebars/tutorials.yml b/data/sidebars/tutorials.yml index e07049ef..b354a73e 100644 --- a/data/sidebars/tutorials.yml +++ b/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 diff --git a/package-lock.json b/package-lock.json index 64493758..33dc35f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24511,7 +24511,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", @@ -24529,7 +24528,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" } @@ -24560,7 +24558,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", @@ -24572,7 +24569,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 +24619,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" }, @@ -24632,7 +24627,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" } @@ -24642,14 +24636,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", @@ -24681,7 +24673,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"