Isc Restructure - EVM how tos - basic contract, ERC20 , ERC721 and de…

…ploy (#1454)

* saving working state

* re-merge EVM and WASM

* apply suggestions by @jlvandenhout

* add simplified explanations in Learn

* add and update get funds
add tabs to tools
delete magic  contract how tos for the time being
add introduction

* first draft deploy a smart contract using remix or hardhat
@todo add images and merge with tools section.

* normalized how we call the ShimmerEVM testnet

* fix links
fix numbering

* rebased on ISC/restructure
saving working state
@todo add dummy value to images
@todo review ERC721 texts and update images

* add how to mint the nft.
create admonition for priorknowledge and remix ide\
delete unnecessary images
align images in ERC20
update sample ERC721 contract

docs/build/isc/v1.0.0-rc.6/docs/_admonitions/_EVM-required-prior-knowledge.md

@@ -0,0 +1,14 @@
+:::note Required Prior Knowledge
+
+This guide assumes you are familiar with the concept
+of [tokens](https://en.wikipedia.org/wiki/Cryptocurrency#Crypto_token)
+in [blockchain](https://en.wikipedia.org/wiki/Blockchain),
+[Ethereum Request for Comments (ERCs)](https://eips.ethereum.org/erc)(also known as Ethereum Improvement Proposals (
+EIP))
+, [NFTs](/learn/protocols/stardust/core-concepts/multi-asset-ledger#non-fungible-tokens-nfts), [Smart Contracts](/learn/smart-contracts/introduction)
+and have already tinkered with [Solidity](https://docs.soliditylang.org/en/v0.8.16/).
+
+You should also have basic knowledge on how to [create](../how-tos/EVM/create-a-basic-contract.md) and [deploy](../how-tos/EVM/deploy-a-smart-contract.mdx)
+a smart contract.
+
+:::

docs/build/isc/v1.0.0-rc.6/docs/_admonitions/_deploy_with_hardhat.md

@@ -0,0 +1,5 @@
+:::tip Deploy a Smart Contract with Hardhat
+
+Deploy a Solidity Smart Contract using Hardhat following our [how-to Deploy a Smart Contract guide](/isc/how-tos/EVM/deploy-a-smart-contract#hardhat).
+
+:::

docs/build/isc/v1.0.0-rc.6/docs/_admonitions/_deploy_with_remix.md

@@ -0,0 +1,5 @@
+:::tip Deploy a Smart Contract with Remix
+
+Deploy a Solidity Smart Contract using Remix following our [how-to Deploy a Smart Contract guide](/isc/how-tos/EVM/deploy-a-smart-contract#remix).
+
+:::

docs/build/isc/v1.0.0-rc.6/docs/_admonitions/_remix-IDE.md

@@ -0,0 +1,6 @@
+:::tip Remix
+
+This guide will use the [Remix IDE](https://remix.ethereum.org/), but you can use this contract with any IDE you are
+familiar with.
+
+:::

docs/build/isc/v1.0.0-rc.6/docs/getting-started/tools.mdx

@@ -19,6 +19,8 @@ tags:
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import {AddToMetaMaskButton, EVMNetworks} from '@theme/AddToMetaMaskButton';
+import DeployWithRemix from '../_admonitions/_deploy_with_remix.md';
+import DeployWithHardhat from '../_admonitions/_deploy_with_hardhat.md';
 import { ChainId } from '@theme/ChainId';
 
 # Compatible Tools
@@ -95,6 +97,8 @@ the `Environment` dropdown.
 
 ![Select Injected Provider from the Environment dropdown](/img/evm/remix-injected-provider-metamask.png)
 
+<DeployWithRemix/>
+
 Metamask will ask to connect to Remix, and once connected, it will set the `Environment` to `Injected Web3` with
 the "Custom (<ChainId url='https://json-rpc.evm.shimmer.network'/>) network" or "Custom (<ChainId url='https://json-rpc.evm.testnet.shimmer.network'/>) network".
 
@@ -140,6 +144,8 @@ networks: {
 </TabItem>
 </Tabs>
 
+<DeployWithHardhat/>
+
 :::caution
 
 Currently, there is no validation service available for EVM/Solidity smart contracts on IOTA Smart Contracts, which is

docs/build/isc/v1.0.0-rc.6/docs/how-tos/EVM/ERC20.md

@@ -12,41 +12,34 @@ tags:
   - how to
 ---
 
-# ERC20 Example
+import DeployWithRemix from '../../_admonitions/_deploy_with_remix.md';
+import PriorKnowledge from '../../_admonitions/_EVM-required-prior-knowledge.md';
+import RemixIDE from '../../_admonitions/_remix-IDE.md';
 
-## Prerequisites
+# Create ERC20 Custom Tokens
 
-- [Remix IDE](https://remix.ethereum.org/).
-- [A Metamask Wallet](https://metamask.io/).
-- [Connect your MetaMask with the public Testnet](../../getting-started/tools.mdx#metamask).
+## Required Prior Knowledge
 
-### Required Prior Knowledge
+<PriorKnowledge />
+
+## About ERC20
 
-This guide assumes you are familiar with [tokens](https://en.wikipedia.org/wiki/Cryptocurrency#Crypto_token)
-in [blockchain](https://en.wikipedia.org/wiki/Blockchain),
-[Ethereum Request for Comments (ERCs)](https://eips.ethereum.org/erc)(also known as Ethereum Improvement Proposals (EIP))
-, [NFTs](learn/protocols/stardust/core-concepts/multi-asset-ledger#non-fungible-tokens-nfts), [Smart Contracts](/learn/smart-contracts/introduction) and have
-already tinkered with [Solidity](https://docs.soliditylang.org/en/v0.8.16/).
 ERC20 is a standard for fungible tokens and is defined in
 the [EIP-20 Token Standard](https://eips.ethereum.org/EIPS/eip-20) by Ethereum.
 
-## About ERC20
-
 With the ERC20 standard, you can create your own tokens and transfer them to the EVM on IOTA Smart Contracts without
 fees.
 
-You can use the [Remix IDE](https://remix.ethereum.org/) to deploy any regular Solidity Smart Contract.
-
-Set the environment to `Injected Web3` and connect Remix with your MetaMask wallet.
-If you haven’t already, please follow the instructions
-on [how to connect your MetaMask with the public Testnet.](../../getting-started/tools.mdx#metamask).
+<RemixIDE />
 
-## 1. Create a Smart Contract
+## 1. Create the Smart Contract
 
 Create a new Solidity file, for example, `ERC20.sol` in the contracts folder of
 your [Remix IDE](https://remix.ethereum.org/) and add this code snippet:
 
 ```solidity
+// SPDX-License-Identifier: MIT
+
 pragma solidity ^0.8.7;
 
 import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
@@ -58,46 +51,43 @@ contract ExampleERC20Token is ERC20 {
 }
 ```
 
-This imports all functions from the OpenZeppelin smart contract and creates a new ERC20 token with your name and Symbol.
-OpenZeppelin provides many audited smart contracts and is a good point to start and learn.
-
-You can change the token name `ExampleERC20Token` and the token symbol `EET`.
+This imports all functions from the [OpenZeppelin ERC20](https://docs.openzeppelin.com/contracts/4.x/erc20) smart
+contract and creates a new ERC20 token with your name and Symbol.
 
-## 2. Compile Your Smart Contract
+:::tip OpenZeppelin
 
-Go to the second tab and compile your smart contract with the **Compile ERC20.sol** button.
+OpenZeppelin provides many audited smart contracts and is a good point to start and learn.
 
-![Compile ERC20.sol](/img/evm/examples/compile.png)
+:::
 
-## 3. Deploy Your Smart Contract
+:::note Customize Your Token
 
-1. Go to the next tab and select `Injected Web3` as your environment. Ensure that your MetaMask is installed and set up
-   correctly.
+You can change the token name `ExampleERC20Token` and the token symbol `EET` for anything you want.
 
-2. Choose your ´ExampleERC20Token´ smart contract in the contract dropdown.
+:::
 
-3. Press the "Deploy" button. Your MetaMask wallet will pop up, and you will need to accept the deployment.
+<DeployWithRemix/>
 
-![Deploy ERC20.sol](/img/evm/examples/deploy.png)
+## 2. Add Your Custom Tokens to MetaMask
 
-4. Your MetaMask browser extension will open automatically - press **confirm**.
+Once you have deployed your contract, you can add your new custom token to your Metamask account.
 
-![Confirm in MetaMask](/img/evm/examples/deploy-metamask.png)
+1. Open Metamask, and click on the transaction that created the contract. From there, you can simply click
+   on `View on block explorer` to visit the transaction details. Alternatively, you can copy the transaction ID and
+   visit the [ShimmerEVM Explorer](https://explorer.evm.testnet.shimmer.network/)
+   or  [ShimmerEVM Testnet Explorer](https://explorer.evm.testnet.shimmer.network/) and use the search bar to find transaction.
 
-## 4. Add Your Token to MetaMask
+!['View on block explorer](/img/evm/how-tos/ERC20/metamask-get-transaction-or-go-to-block-explorer.png)
 
-1. Get the `contract address` from the transaction after the successful deployment. You can click on the latest
-   transaction in your MetaMask Activity tab. If you have configured your MetaMask correctly,
-   the [ShimmerEVM Explorer](https://explorer.evm.shimmer.network) will open the transaction.
-2. Copy the contract address and import your token into MetaMask.
+2. Copy the contract address from the transaction details, and import your custom ERC20 tokens into MetaMask.
 
-![Copy contract address](/img/evm/examples/explorer-contract-address.png)
+![Copy contract address](/img/evm/how-tos/ERC20/metamask-import-tokens.png)
 
-## 5. Have some Fun
+## 3. Have some Fun
 
 Now you should see your token in MetaMask. You can send them to your friends without any fees or gas costs.
 
-![Copy contract address](/img/evm/examples/erc20-balance.png)
+![Copy contract address](/img/evm/how-tos/ERC20/metamask-erc20-balance.png)
 
 You also can ask in the [Discord Chat Server](https://discord.iota.org) to send them around and discover what the
 community is building on IOTA Smart Contracts.