Merge pull request #1003 from oasisprotocol/rube/866-document-sapphir…

…e-and-remix docs: remix section in tools
oasisprotocol · Nov 4, 2024 · 9e97bb1 · 9e97bb1
2 parents 294ce13 + 20d8d81
commit 9e97bb1
Show file tree

Hide file tree

Showing 20 changed files with 132 additions and 78 deletions.
diff --git a/docs/dapp/emerald/network.mdx b/docs/dapp/emerald/network.mdx
@@ -90,4 +90,4 @@ and wish to be added to these docs, open an issue at
 
 :::
 
-[github.com/oasisprotocol/docs]: https://github.com/oasisprotocol/docs
+[github.com/oasisprotocol/docs]: https://github.com/oasisprotocol/docs
diff --git a/docs/dapp/emerald/writing-dapps-on-emerald.mdx b/docs/dapp/emerald/writing-dapps-on-emerald.mdx
@@ -5,12 +5,18 @@ import {findSidebarItem} from '@site/src/sidebarUtils';
 
 This tutorial will show you how to set up dApp development environment for
 Emerald to be able to write and deploy dApps on Oasis Emerald.
-
-We will walk you through the Hardhat configuration and - for those who prefer
-a simpler web-only interface - the Remix IDE.
-Oasis Emerald exposes an EVM-compatible interface so writing dApps isn't much
+Oasis Emerald exposes an **EVM-compatible** interface so writing dApps isn't much
 different compared to the original Ethereum Network!
 
+We will walk you through the Hardhat configuration.
+
+Those who prefer a simpler web-only interface can also use the Remix IDE. Check out our
+general [Remix guide]. Just remember to use the Emerald [networks]
+when selecting *Inject Web3* environment and connecting to MetaMask.
+
+[Remix guide]: ../tools/remix.md
+[networks]: ./network.mdx#rpc-endpoints
+
 ## Oasis Consensus Layer and Emerald ParaTime
 
 Oasis Network consists of the consensus layer and a number of Layer 2 chains
@@ -248,55 +254,6 @@ Greeter deployed to: 0x6e8e9e0DBCa4EF4a65eBCBe4032e7C2a6fb7C623
 [Node.js]: https://nodejs.org
 [ethers.js]: https://docs.ethers.io/v5/
 
-## Create dApp on Emerald with Remix - Ethereum IDE
-
-[Remix] is a popular web IDE for swift development, deployment and testing
-smart contracts on the Ethereum Network. We will use it in combination with
-MetaMask to access the network settings and your wallet to sign and submit the
-transactions.
-
-If you haven't done it yet, first [install the MetaMask extension for your
-browser][metamask]. Import your wallet and configure Emerald Testnet and
-Mainnet Networks. If you wish to connect to the Emerald [localnet] container,
-configure the local network as well.
-
-When you open Remix for the first time, it automatically creates an example
-project. Let's open one of the contracts and compile it in the "Solidity
-compiler" tab.
-
-![The initial example project in Remix - Ethereum IDE](../images/emerald/remix1.png)
-
-![Solidity compiler tab](../images/emerald/remix2.png)
-
-Next, in the "Deploy and Run Transactions" tab, select the "Injected Web3"
-environment. A MetaMask popup will appear and you will have to connect one or
-more accounts with Remix. Once the connection succeeds, click on the "Deploy"
-button. The MetaMask popup appears again and you will have to review the
-transaction, the gas options and finally confirm the transaction.
-
-![Metamask transaction confirmation](../images/emerald/remix3.png)
-
-If everything goes well, your transaction will be deployed using the selected
-account in the MetaMask and the corresponding Emerald Network.
-
-![Successful contract deployment on Emerald Testnet with Remix](../images/emerald/remix4.png)
-
-:::info
-
-Sometimes the gas limit estimation function might compute a slightly lower
-value from the required one. In this case, try increasing the gas limit
-manually by 10% or 20%.
-
-:::
-
-Congratulations! Now you can start developing your own smart contracts on the
-Oasis Emerald blockchain! Should you have any questions, do not hesitate to
-share them with us on the [#emerald-paratime Discord channel][discord].
-
-[Remix]: https://remix.ethereum.org
-[metamask]: ../../general/manage-tokens/README.mdx#check-your-account
-[discord]: https://oasis.io/discord
-
 ## Troubleshooting
 
 ### Truffle Support

diff --git a/docs/dapp/images/emerald/remix1.png b/docs/dapp/images/emerald/remix1.png
diff --git a/docs/dapp/images/emerald/remix2.png b/docs/dapp/images/emerald/remix2.png
diff --git a/docs/dapp/images/emerald/remix3.png b/docs/dapp/images/emerald/remix3.png
diff --git a/docs/dapp/images/emerald/remix4.png b/docs/dapp/images/emerald/remix4.png
diff --git a/docs/dapp/images/remix/remix01.png b/docs/dapp/images/remix/remix01.png
diff --git a/docs/dapp/images/remix/remix02.png b/docs/dapp/images/remix/remix02.png
diff --git a/docs/dapp/images/remix/remix03.png b/docs/dapp/images/remix/remix03.png
diff --git a/docs/dapp/images/remix/remix04.png b/docs/dapp/images/remix/remix04.png
diff --git a/docs/dapp/images/remix/sourcify.png b/docs/dapp/images/remix/sourcify.png
diff --git a/docs/dapp/opl/celer/README.md b/docs/dapp/opl/celer/README.md
@@ -58,7 +58,7 @@ It performs two main functions:
   destination chain.
 
 It is necessary a [Message Executor] runs for you dapp. To set up an executor,
-you have two options 
+you have two options:
 
 - Follow the [documentation] to set up your own executor.
 - Fill out this [form][celer-form] for Celer to set up a hosted executor

diff --git a/docs/dapp/opl/celer/networks.md b/docs/dapp/opl/celer/networks.md
@@ -46,9 +46,3 @@ description: Supported networks on Celer IM
 | Sapphire Testnet | 23295 | 0x5aff | sapphire-testnet |
 | Scroll Alpha Testnet | 534353 | 0x82751 | scroll-testnet |
 | Shibuya Testnet | 81 | 0x51 | shibuya-testnet |
-
-In the following sections we will look at a concrete example on how to build a
-confidential, cross-chain DAO-voting dApp from scratch using the Oasis Privacy Layer!
-
-
-
diff --git a/docs/dapp/opl/celer/ping-example.md b/docs/dapp/opl/celer/ping-example.md
@@ -22,7 +22,7 @@ The only prerequisite is a set-up Metamask account.
 If you're new to Remix, follow our basic guide for using Remix
 [here][dapp-remix].
 
-[dapp-remix]: /dapp/emerald/writing-dapps-on-emerald#create-dapp-on-emerald-with-remix---ethereum-ide
+[dapp-remix]: /dapp/tools/remix.md
 
 :::
 
@@ -123,11 +123,11 @@ For compatibility with Sapphire, compile the contract using compiler version
 
 You can also use Celer's framework contracts and interfaces by importing them
 
-```solidity
-import "sgn-v2-contracts/contracts/message/framework/MessageBusAddress.sol";
-import "sgn-v2-contracts/contracts/message/framework/MessageReceiverApp.sol";
-import "sgn-v2-contracts/contracts/message/interfaces/IMessageBus.sol";
-```
+    ```solidity
+    import "sgn-v2-contracts/contracts/message/framework/MessageBusAddress.sol";
+    import "sgn-v2-contracts/contracts/message/framework/MessageReceiverApp.sol";
+    import "sgn-v2-contracts/contracts/message/interfaces/IMessageBus.sol";
+    ```
 
 but this will limit you to use only Solidity version **`0.8.9`**.
 
@@ -173,7 +173,7 @@ You'll need the following three parameters:
   destination chain which you just deployed.
 - `_dstChainId`: The chain id of the the destination chain. Which is in our
   example `Sapphire Testnet` - `23295`.
-- `message`: The encoded message. e.g. "Hello from BSC" - 
+- `message`: The encoded message. e.g. "Hello from BSC" -
   `0x48656c6c6f2066726f6d20425343000000000000000000000000000000000000`.
 
 Additionally you'll have to pay a fee which you send as value. For sending the
@@ -183,11 +183,12 @@ ping 0.001 tBNB (1000000 gwei) will be enough.
 
 For the `Sapphire Testnet` an executor is running to relay the messages every
 few mintues. If you deploy on mainnet please refer to the [Executor chapter].
+
 :::
 
-[Executor chapter]:  ./README.md#executor
+[Executor chapter]: ./README.md#executor
 
-## Checking execution 
+## Checking execution
 
 To see if you successfully send a ping message cross-chain you can watch for
 new transactions at the [MessageBus address] from Celer or your deployed

diff --git a/docs/dapp/opl/opl-sdk/README.md b/docs/dapp/opl/opl-sdk/README.md
@@ -13,7 +13,7 @@ future Web3 applications.
 [sapphire-contracts]: https://www.npmjs.com/package/@oasisprotocol/sapphire-contracts
 [Sapphire]: https://oasisprotocol.org/sapphire
 
-## Overview 
+## Overview
 
 ![Transaction Flow](../../diagrams/opl-contract-flow.mmd.svg)
 
@@ -107,4 +107,4 @@ the shared Message Executor or how to set up your own executor.
 
 :::
 
-[celer-executor]: ../celer/README.md#executor
+[celer-executor]: ../celer/README.md#executor
diff --git a/docs/dapp/opl/opl-sdk/ping-example.md b/docs/dapp/opl/opl-sdk/ping-example.md
@@ -23,7 +23,7 @@ The only prerequisite is a set-up Metamask account.
 If you're new to Remix, follow our basic guide for using Remix
 [here][dapp-remix].
 
-[dapp-remix]: /dapp/emerald/writing-dapps-on-emerald#create-dapp-on-emerald-with-remix---ethereum-ide
+[dapp-remix]: /dapp/tools/remix.md
 
 :::
 
@@ -197,7 +197,7 @@ cross-chain.
 
 You'll need the following parameter for `startPing`:
 
-- `_message`: The encoded message. e.g. "Hello from BSC" - 
+- `_message`: The encoded message. e.g. "Hello from BSC" -
   `0x48656c6c6f2066726f6d20425343000000000000000000000000000000000000`.
 
 Additionally you'll have to pay a fee which you send as `value`. For sending the
@@ -213,7 +213,7 @@ few mintues. If you deploy on mainnet please refer to the [Executor chapter].
 
 [Executor chapter]:  ../celer/README.md#executor
 
-## Checking execution 
+## Checking execution
 
 To see if you successfully send a ping message cross-chain you can watch for
 new transactions at the [MessageBus address] from Celer or your deployed

diff --git a/docs/dapp/opl/router-protocol/pingpong-example.md b/docs/dapp/opl/router-protocol/pingpong-example.md
@@ -22,7 +22,7 @@ The only prerequisite is a set-up Metamask account.
 If you're new to Remix, follow our basic guide for using Remix
 [here][dapp-remix].
 
-[dapp-remix]: /dapp/emerald/writing-dapps-on-emerald#create-dapp-on-emerald-with-remix---ethereum-ide
+[dapp-remix]: /dapp/tools/remix.md
 
 :::
 

diff --git a/docs/dapp/tools/README.mdx b/docs/dapp/tools/README.mdx
@@ -9,7 +9,7 @@ developers using [Remix] (*unencrypted transactions only*), [Sourcify],
 [Discord][discord] if you are using a tool that has problems integrating with
 Oasis.
 
-[Remix]: https://remix.run/docs/en/main
+[Remix]: remix.md
 [Sourcify]: /dapp/sapphire/verification
 [localnet]: ./localnet.mdx
 [Band]: ./band.md
@@ -21,4 +21,5 @@ Oasis.
   findSidebarItem('/dapp/sapphire/verification'),
   findSidebarItem('/dapp/tools/localnet'),
   findSidebarItem('/dapp/tools/band'),
-]} />
+  findSidebarItem('/dapp/tools/remix'),
+]} />
diff --git a/docs/dapp/tools/remix.md b/docs/dapp/tools/remix.md
@@ -0,0 +1,100 @@
+---
+description: Remix web IDE
+---
+
+# Remix
+
+## Intro
+
+[Remix] is a web-based Integrated Development Environment (IDE) designed for
+developing, testing, and deploying smart contracts on the Ethereum Network.
+This guide will show you how to use Remix in conjunction with MetaMask on the
+Sapphire Network.
+
+:::info
+
+For comprehensive details about Remix's features, consult the
+[Remix documentation].
+
+:::
+
+## Prerequisites
+
+1. Install the [MetaMask browser extension][metamask]
+2. Configure your networks:
+   - Add Sapphire Mainnet or Testnet to MetaMask using the `Add to MetaMask` button on
+  our [network page]
+   - (Optional) Configure local network settings if you're using the Sapphire
+  [localnet]
+
+## Getting Started
+
+When you first launch Remix, it creates a default project structure.
+Navigate to the `contracts` folder and open `1_Storage.sol` to begin.
+
+![The initial example project in Remix - Ethereum IDE](../images/remix/remix01.png)
+
+## Contract Compilation
+
+1. Navigate to the **Solidity Compiler** tab
+2. Configure the compiler settings:
+
+   - Compiler version: **`0.8.24`**
+   - EVM version: **`paris`** (found under Advanced Configuration)
+
+3. Click `Compile 1_Storage.sol`
+
+:::info Compiler Version
+
+The Sapphire uses the [Rust Ethereum EVM][rust-evm]. This implementation is
+compatible with Solidity versions up to **0.8.24**. However, it does not yet
+support some transaction types introduced in Solidity **0.8.25**, such as those
+mentioned in [rust-ethereum/evm#277][revm-277], pending release of the next version.
+
+:::
+
+:::info EVM Version
+
+EVM versions after **paris** (shanghai and upwards) include the PUSH0 opcode which
+isn't supported on Sapphire.
+
+:::
+
+[rust-evm]:https://github.com/rust-ethereum/evm
+[revm-277]: https://github.com/rust-ethereum/evm/issues/277
+
+![Solidity compiler tab](../images/remix/remix02.png)
+
+## Contract Deployment
+
+1. Open the **Deploy and Run Transactions** tab.
+2. Select `Injected Web3` as environment.
+3. Accept in MetaMask the account connection to Remix.
+
+![MetaMask connection confirmation](../images/remix/remix03.png)
+
+4. Click `Deploy`.
+5. Review and confirm the transaction in MetaMask.
+
+![Metamask transaction confirmation](../images/remix/remix04.png)
+
+If everything goes well, your transaction will be deployed using the selected
+account in the MetaMask and the corresponding Sapphire Network.
+
+## Working with Confidential Features
+
+Note that Remix operates without a Sapphire client, meaning transactions and
+queries are unencrypted and unsigned by default. To make use of Sapphire's
+confidential features, refer to our [Quickstart Tutorial].
+
+[Quickstart Tutorial]: https://docs.oasis.io/dapp/sapphire/quickstart
+
+Should you have any questions, do not hesitate to share them with us on the
+[#dev-central Discord channel][discord].
+
+[localnet]: ./localnet.mdx
+[network page]: https://docs.oasis.io/dapp/sapphire/network#rpc-endpoints
+[Remix]: https://remix.ethereum.org
+[Remix documentation]: https://remix-ide.readthedocs.io/en/latest/
+[metamask]: ../../general/manage-tokens/README.mdx#metamask
+[discord]: https://oasis.io/discord
diff --git a/sidebarDapp.ts b/sidebarDapp.ts
@@ -124,6 +124,7 @@ export const sidebarDapp: SidebarsConfig = {
       items: [
         'dapp/tools/band',
         'dapp/tools/localnet',
+        'dapp/tools/remix'
       ],
     },
   ],
Original file line number	Diff line number	Diff line change
Expand Up		@@ -90,4 +90,4 @@ and wish to be added to these docs, open an issue at

		:::

		[github.com/oasisprotocol/docs]: https://github.com/oasisprotocol/docs
		[github.com/oasisprotocol/docs]: https://github.com/oasisprotocol/docs