[Portal] added agglayer and erc-20 guide (#6492)

CORE-0000

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the documentation for deploying ERC-20 and Agglayer module contracts, providing step-by-step guides and visual aids for users.

### Detailed summary
- Added a new section for "Tutorials" in the `sidebar` with a link to "Deploy ERC-20 Core."
- Introduced a tutorial on deploying an ERC-20 Core contract, including steps and images.
- Created a guide for adding the Agglayer module to modular contracts, detailing prerequisites and steps.
- Included images for each step in both tutorials for better understanding.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: saminacodes

apps/portal/src/app/contracts/modular-contracts/module-contracts/cross-chain/agglayer/assets/agglayer-module.png

@@ -0,0 +1,86 @@
+import { Step, Steps, DocImage, OpenSourceCard, Callout } from "@doc";
+import RestrictTransfer from './assets/restrict-transfers.png';
+import ApproveFunction from './assets/approve-function.png';
+import AgglayerModule from './assets/agglayer-module.png';
+import GrantMinter from './assets/grant-minter.png';   
+import MintTokens from './assets/mint-tokens.png';
+
+# Agglayer Module Contract
+
+We created a module which leverages Agglayer, an interoperability protocol. This module may be added to any ERC-20 modular contract to construct a cross-chain 
+interoperable smart contract for trustless and secure transfers across any chain. [Learn more about Agglayer.](https://github.com/AggLayer)
+
+<OpenSourceCard title="Agglayer Module Contract" href="https://thirdweb.com/thirdweb.eth/AgglayerCrossChain" />
+
+## Get Started
+
+Learn how to add the Agglayer module to your modular contract and enable cross-chain transfers.
+
+### Prerequisites
+
+- [Deployed ERC-20 Base Contract](/contracts/modular-contracts/tutorials/deploy-erc20-core)
+
+<Steps>
+
+<Step title="Add Agglayer module">
+
+On your deployed contract dashboard, navigate to the Modules section to add the Agglayer module. Paste the following parameters then select Install. 
+1. Publisher: `0xdd99b75f095d0c4d5112aCe938e4e6ed962fb024`
+2. Module Name: `AgglayerCrossChain`
+3. Module Version: `Latest`
+4. Router: `0x2311BFA86Ae27FC10E1ad3f805A2F9d22Fc8a6a1`
+
+<DocImage src={AgglayerModule} alt="Agglayer Module" />
+
+When completed, you will see your module under the installed modules section. 
+
+</Step>
+
+<Step title="Grant minter role">
+Next, navigate to the Explorer tab and locate grantRoles under the Write functions to grant your wallet the minter role then select Execute.
+1. User: `your-wallet-address`
+2. Roles: `1`
+3. Native Token Value: `0`
+<DocImage src={GrantMinter} alt="Grant Minter Role" />
+
+<Callout variant="info" title="Modular Contract Roles">
+Non-admin roles are disabled by default on modular contracts and must be enabled through the contract.
+</Callout>
+</Step>
+
+<Step title="Mint tokens">
+Navigate back to the modules section and mint tokens to your wallet or a recipient's wallet using the mintable module.
+
+<DocImage src={MintTokens} alt="Mint Tokens" />
+</Step>
+
+<Step title="Approve transfers on contract">
+Navigate back to Explorer and find the Approve write function. Paste in the following parameters and select Execute. 
+1. Spender: `your-contract-address`
+2. Amount: `your-desired-amount`
+
+<DocImage src={ApproveFunction} alt="Approve Function" />
+
+<Callout variant="info" title="Modular Contract Approvals">
+This step enables the contract to have approval to transfer user's tokens to the bridge.
+</Callout>
+</Step>
+
+<Step title="Approve transfers on module">
+Navigate back to the modules view and disable Restrict Transfers on the TransferableERC20 module to allow any token holders to transfer tokens. Select Update to confirm.
+
+<DocImage src={RestrictTransfer} alt="Restrict Transfer" />
+</Step>
+
+<Step title="Bridge tokens">
+Navigate back to Explorer and locate the `bridgeTokens` function. Select Execute to confirm the transaction.
+1. Destination Network: `chain-to-send`
+2. Call Address: `your-wallet-address`
+3. Amount: `amount-of-tokens`
+
+
+
+</Step>
+
+</Steps>
+

apps/portal/src/app/contracts/modular-contracts/module-contracts/cross-chain/agglayer/assets/approve-function.png

@@ -0,0 +1,41 @@
+import {Steps, Step, DocImage} from "@doc";
+import ModularContracts from './assets/modular-contracts.png';
+import ERC20Base from './assets/erc-20-base.png';
+import ContractMetadata from './assets/contract-metadata.png';
+import DeployedContract from './assets/deployed-contract.png';
+
+# Deploy ERC-20 Core Contract
+
+Learn how to deploy an ERC-20 Core Contract. This contract serves as the foundation for creating a modular contract with additional features and functionalities.
+
+<Steps>
+<Step title="Navigate to Explore">
+Navigate to the Explore section of your dashboard. This is where you can find and deploy various contracts.
+<DocImage src={ModularContracts} alt="Modular Contracts" />
+</Step>
+
+<Step title="Select ERC-20 Core">
+Select the ERC-20 Core contract from the list of available contracts. This contract will serve as the base for your modular contract.
+
+<DocImage src={ERC20Base} alt="ERC-20 Base" />
+</Step>
+
+<Step title="Contract Metadata">
+Fill out the contract metadata and parameters to your desired preference. 
+
+<DocImage src={ContractMetadata} alt="Contract Metadata" /> 
+</Step>
+
+<Step title="Deploy Contract">
+Optionally, you may add your contract to an existing project. Select a chain then select Deploy Now.  
+
+</Step>
+
+<Step title="Manage Contract">
+Once deployed, select View Contract to be redirected to your contract’s management dashboard.
+
+<DocImage src={DeployedContract} alt="Deployed Contract" />
+
+</Step>
+
+</Steps>

apps/portal/src/app/contracts/modular-contracts/module-contracts/cross-chain/agglayer/assets/grant-minter.png

@@ -237,7 +237,6 @@ export const sidebar: SideBar = {
 
     { separator: true },
     // modular contracts
-
     {
       name: "Modular Contract Framework",
       isCollapsible: false,
@@ -268,6 +267,15 @@ export const sidebar: SideBar = {
             },
           ],
         },
+        {
+          name: "Tutorials",
+          links: [
+            {
+              name: "Deploy ERC-20 Core",
+              href: `${modularContractsSlug}/tutorials/deploy-erc20-core`,
+            },
+          ],
+        },
         // core contracts
         {
           name: "Core Contracts",
@@ -413,6 +421,15 @@ export const sidebar: SideBar = {
                 },
               ],
             },
+            {
+              name: "Cross-Chain",
+              links: [
+                {
+                  name: "Agglayer",
+                  href: `${modulesContractsSlug}/cross-chain/agglayer`,
+                },
+              ],
+            },
           ],
         },
       ],