fix: updates for remix quickstart (#230)

# Description

- Updates code for token contract
- Updates scripts to adapt to new Remix folder structure
- Improves wording on how to run scripts on Remix
- Updates buttons to open the full project on Remix
- 
## Linked Issues

N/A

## Additional context

Merge with PR in template project repo:
zkSync-Community-Hub/zksync-quickstart-remix#2

content/00.build/05.start-coding/05.quick-start/4.erc20-token.md

@@ -17,6 +17,50 @@ This is what you're going to do:
 [you’ve configured the %%zk_testnet_name%% in your wallet](/build/connect-to-zksync).
 2. Have at least 0.5 %%zk_testnet_name%% ETH. If you need more, use [one of the faucets](/ecosystem/network-faucets).
 
+## Custom ERC20 token code
+
+ERC20 tokens are a standard for fungible tokens, which can be traded and represent a fixed value. You’ve used ERC20
+tokens if you’ve transacted with USDC, DAI, USDT, LINK or UNI.
+
+The ERC20 token we’re going to deploy will allow users to mint and burn tokens. The entire smart contract code is as
+follows:
+
+```solidity
+// SPDX-License-Identifier: Unlicensed
+pragma solidity ^0.8.19;
+
+import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
+import "@openzeppelin/contracts/access/Ownable.sol";
+import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Burnable.sol";
+
+contract TestToken is ERC20, Ownable, ERC20Burnable {
+    constructor(string memory name, string memory symbol) ERC20(name, symbol) {
+        _mint(msg.sender, 100 * 10 ** decimals());
+    }
+
+    function mint(address to, uint256 amount) public onlyOwner {
+        _mint(to, amount);
+    }
+}
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+ZKsync Era is [EVM compatible](/build/resources/glossary#evm-compatible), so you can use existing popular libraries like OpenZeppelin.
+::
+
+The most important features are:
+
+- `Ownable` : this extension sets the deployer account as owner of the smart contract. It also introduces the
+  `onlyOwner` modifier that restricts the execution of certain functions to the owner of the contract.
+- `ERC20Burnable`: this extension adds the `burn` and `burnFrom` functions to the smart contract. These functions
+  destroy tokens from a given account.
+- `constructor`: called on deployment, the constructor will assign the given name and symbol to the token and mint 100
+  units of it to the account that deployed the contract.
+- `mint` : this function creates new token units to a given account. It uses the `onlyOwner` modifier so it can only be
+  called from the owner account.
+
+## Deploy and interact with the contract
+
 To complete this tutorial you'll use either Atlas or Remix. Select your preferred tool:
 
 ::content-switcher

content/00.build/05.start-coding/05.quick-start/_deploy_first/_remix_deploy_contract.md

@@ -13,18 +13,21 @@ compatible protocols.
 Click the button below to open the project in Remix and see the contract in the Remix code editor.
 
 :u-button{ icon="i-heroicons-code-bracket" size="lg" color="primary" variant="solid" :trailing="false"
-to="https://remix.ethereum.org/#url=https://github.com/ZKsync-Community-Hub/zksync-quickstart-remix/blob/master/contracts/ZeekMessages.sol"
-target="_blank" label="Open smart contract in Remix"}
+to="https://remix.ethereum.org/?#activate=zkSync&call=zkSync//loadFromGithub//ZKsync-Community-Hub//zksync-quickstart-remix//"
+target="_blank" label="Open project in Remix"}
 
 ### Connect your wallet
 
 Make sure your wallet is currently connected to the %%zk_testnet_name%% as we will use our wallet’s configured
-network to deploy our smart contract. In Remix, under the Environment Section, select “Wallet” and click on
-“Connect Wallet”.
+network to deploy our smart contract. In the ZKsync Remix plugin, under the Environment Section, select “Wallet” and click on
+“Connect Wallet” as shown below:
+
+![Connect wallet in Remix](/images/remix-connect-wallet.gif)
 
 ### Compile the contract
 
-To compile the contract, click on "Compile ZeeksSecretMessages.sol". If you get a popup message requesting permissions to
+To compile the contract, open the `ZeeksSecretMessages.sol` file in the editor, go the ZKsync plugin, and click on "Compile ZeeksSecretMessages.sol".
+If you get a popup message requesting permissions to
 access **`ACCESS TO "WRITEFILE" OF "FILE MANAGER"`,** click on "Accept".
 
 ::callout{icon="i-heroicons-light-bulb"}

content/00.build/05.start-coding/05.quick-start/_erc20_tutorial/_atlas_erc20_tutorial.md

@@ -1,47 +1,6 @@
 ---
 title: ERC20 token with Atlas
 ---
-## Custom ERC20 token code
-
-ERC20 tokens are a standard for fungible tokens, which can be traded and represent a fixed value. You’ve used ERC20
-tokens if you’ve transacted with USDC, DAI, USDT, LINK or UNI.
-
-The ERC20 token we’re going to deploy will allow users to mint and burn tokens. The entire smart contract code is as
-follows:
-
-```solidity
-// SPDX-License-Identifier: Unlicensed
-pragma solidity ^0.8.19;
-
-import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
-import "@openzeppelin/contracts/access/Ownable.sol";
-import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Burnable.sol";
-
-contract TestToken is ERC20, Ownable, ERC20Burnable {
-    constructor(string memory name, string memory symbol) ERC20(name, symbol) {
-        _mint(msg.sender, 100 * 10 ** decimals());
-    }
-
-    function mint(address to, uint256 amount) public onlyOwner {
-        _mint(to, amount);
-    }
-}
-```
-
-::callout{icon="i-heroicons-light-bulb"}
-ZKsync Era is [EVM compatible](/build/resources/glossary#evm-compatible), so you can use existing popular libraries like OpenZeppelin.
-::
-
-The most important features are:
-
-- `Ownable` : this extension sets the deployer account as owner of the smart contract. It also introduces the
-  `onlyOwner` modifier that restricts the execution of certain functions to the owner of the contract.
-- `ERC20Burnable`: this extension adds the `burn` and `burnFrom` functions to the smart contract. These functions
-  destroy tokens from a given account.
-- `constructor`: called on deployment, the constructor will assign the given name and symbol to the token and mint 100
-  units of it to the account that deployed the contract.
-- `mint` : this function creates new token units to a given account. It uses the `onlyOwner` modifier so it can only be
-  called from the owner account.
 
 ## Deploy the smart contract
 

content/00.build/05.start-coding/05.quick-start/_erc20_tutorial/_remix_erc20_tutorial.md

@@ -1,50 +1,6 @@
 ---
 title: ERC20 with Remix
 ---
-## Custom ERC20 token code
-
-ERC20 tokens are a standard for fungible tokens, which can be traded and represent a fixed value. You’ve used ERC20
-tokens if you’ve transacted with USDC, DAI, USDT, LINK or UNI.
-
-The ERC20 token we’re going to deploy will allow users to mint and burn tokens. The entire smart contract code is as
-follows:
-
-```solidity
-// SPDX-License-Identifier: Unlicensed
-pragma solidity ^0.8.19;
-
-import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
-import "@openzeppelin/contracts/access/Ownable.sol";
-import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Burnable.sol";
-
-contract TestToken is ERC20, Ownable, ERC20Burnable {
-    constructor(string memory name, string memory symbol)
-      ERC20(name, symbol) Ownable(msg.sender) {
-        _mint(msg.sender, 100 * 10 ** decimals());
-    }
-
-    function mint(address to, uint256 amount) public onlyOwner {
-        _mint(to, amount);
-    }
-}
-```
-
-::callout{icon="i-heroicons-light-bulb"}
-ZKsync Era is [EVM compatible](/build/resources/glossary#evm-compatible), so you can use existing popular libraries like OpenZeppelin.
-::
-
-The most important features are:
-
-- `Ownable` : this extension sets the deployer account as owner of the smart contract. It also introduces the
-  `onlyOwner` modifier that restricts the execution of certain functions to the owner of the contract.
-- `ERC20Burnable`: this extension adds the `burn` and `burnFrom` functions to the smart contract. These functions
-  destroy tokens from a given account.
-- `constructor`: called on deployment, the constructor will assign the given name and symbol to the token and mint 100
-  units of it to the account that deployed the contract.
-- `mint` : this function creates new token units to a given account. It uses the `onlyOwner` modifier so it can only be
-  called from the owner account.
-
-## Deploy the smart contract
 
 The Remix IDE is an open-source web and desktop application that supports Ethereum smart contract development and
 deployment, offering tools for writing, testing, debugging, and deploying smart contracts written in Solidity to EVM
@@ -54,10 +10,11 @@ compatible protocols.
 
 :display-partial{path="/_partials/_enable-remix-zksync-plugin"}
 
-To open this project in Remix, use the “Clone” option from the file explorer to import it from the following GitHub
-repository:`https://github.com/ZKsync-Community-Hub/zksync-quickstart-remix`
+Click the button below to open the project in Remix and see the contract in the Remix code editor.
 
-![Clone repo in Remix](/images/remix-plugin-clone-repo.gif)
+:u-button{ icon="i-heroicons-code-bracket" size="lg" color="primary" variant="solid" :trailing="false"
+to="https://remix.ethereum.org/?#activate=zkSync&call=zkSync//loadFromGithub//ZKsync-Community-Hub//zksync-quickstart-remix//"
+target="_blank" label="Open project in Remix"}
 
 Once the project is imported, open the `contracts/TestToken.sol` file. To compile the contract, click on the ZKsync
 plugin on the left menu and then "Compile TestToken.sol". If you get a popup message requesting permissions to access
@@ -69,11 +26,19 @@ bytecode.
 [Learn more about ZKsync custom compilers](/zk-stack/components/compiler/toolchain).
 ::
 
-We will use our wallet’s configured network to connect and deploy our smart contract so make sure your wallet is
-currently connected to the %%zk_testnet_name%%. In Remix, under the Environment Section, select “Wallet” and click on
-“Connect Wallet”.
+We will use our wallet’s configured
+network to deploy our smart contract. In the ZKsync Remix plugin, under the Environment Section, select “Wallet” and click on
+“Connect Wallet” as shown below:
+
+![Connect wallet in Remix](/images/remix-connect-wallet.gif)
 
-To deploy the contract, click on “Deploy” and sign the transaction on your wallet. Congratulations, your ERC20 token
+## Deploy the contract
+
+To deploy the contract, select the `TestToken.sol` contract on the on the “Deploy” section, check the "Verify contract" checkbox, and
+click on “Deploy & Verify”.
+Sign the transaction on your wallet and wait a few seconds until the transaction is confirmed.
+
+Congratulations, your ERC20 token
 contract is now deployed on %%zk_testnet_name%%!
 
 ## Interact with the ERC20 contract
@@ -95,7 +60,7 @@ const TOKEN_AMOUNT    = "123.55";
 
   // Note that the script needs the ABI which is generated from the compilation artifact.
   // Make sure contract is compiled for ZKsync and artifacts are generated
-  const artifactsPath = `browser/contracts/artifacts/TestToken.json` // Change this for different path
+  const artifactsPath = `browser/artifacts/contracts/TestToken.sol/TestToken.json`
 
   const metadata = JSON.parse(await remix.call('fileManager', 'getFile', artifactsPath))
 
@@ -128,7 +93,7 @@ const TOKEN_AMOUNT    = "123.55";
 This scripts uses `ethers` to interact with the contract we’ve just deployed.
 
 ::callout{icon="i-heroicons-light-bulb"}
-Existing libraries like `ethers` , `viem` and `web3.js` can be used to interact with smart contracts deployed on ZKsync.
+Existing libraries like `ethers` , `viem` and `web3.js` can be used to interact with smart contracts deployed on ZKsync Era.
 ::
 
 Fill the following variables:
@@ -137,8 +102,13 @@ Fill the following variables:
 - `RECEIVER_WALLET`: address of a different account that will receive new tokens.
 - `TOKEN_AMOUNT`: the amount of tokens we’ll send to the account.
 
-With the `mint-token.ts` file open in the editor, click on the “▶️” button to run the script and see the output in the
-terminal.
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+Open the "Deploy & run transactions" menu in Remix and select "Injected Provider - Metamask"
+from the environment dropdown to target the network selected in your wallet when running scripts.
+::
+
+With the `mint-token.ts` file open in the editor, click on the “▶️” button to run the script.
+Sign the transaction in your wallet and see the output in the terminal.
 
 ![ERC20 interact script in Remix](/images/101-erc20/remix-erc20-interact.png)
 

content/00.build/05.start-coding/05.quick-start/_paymaster_intro/_remix_paymaster_intro.md

@@ -3,13 +3,15 @@ title: Paymaster with Remix
 ---
 
 ::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
-Remix does not support `zksync-ethers` yet so you can not use it to run this script. Use Atlas instead.
+**The Remix provider does not support EIP712 transactions yet, which are required to interact with paymaster contracts.
+Please use Atlas for this part.**
 ::
 
-To open the project in Remix, use the “Clone” option from the file explorer to import it from the following GitHub
-repository:`https://github.com/ZKsync-Community-Hub/zksync-quickstart-remix`
+Click the button below to open the project in Remix and see the contract in the Remix code editor.
 
-![Clone repo in Remix](/images/remix-plugin-clone-repo.gif)
+:u-button{ icon="i-heroicons-code-bracket" size="lg" color="primary" variant="solid" :trailing="false"
+to="https://remix.ethereum.org/?#activate=zkSync&call=zkSync//loadFromGithub//ZKsync-Community-Hub//zksync-quickstart-remix//"
+target="_blank" label="Open project in Remix"}
 
 Once the project is imported, open the `scripts/paymaster-transaction.ts` file, which contains the code to send a
 transaction via the paymaster. Let’s go through the most important parts:
@@ -129,6 +131,11 @@ const TOKEN_CONTRACT_ADDRESS = ""
 const NEW_MESSAGE = "This tx cost me no ETH!";
 ```
 
+::callout{icon="i-heroicons-exclamation-triangle" color="amber"}
+Open the "Deploy & run transactions" menu in Remix and select "Injected Provider - Metamask"
+from the environment dropdown to target the network selected in your wallet when running scripts.
+::
+
 Next, make sure the script file is selected in the Remix editor and click on the “▶️” button. You’ll see the progress in the console.
 
 ![Contract events in ZKsync explorer](/images/101-paymasters/remix-paymaster-tx.png)