# Welcome to Q-Remix IDE's documentation

Q-Remix IDE: A Comprehensive Developer Tool for Smart Contracts and DApps

**Q-Remix IDE** is a powerful, AI-enhanced integrated development environment designed for the full lifecycle of smart contract and decentralized application (DApp) development. Whether you're a seasoned blockchain engineer or an enthusiastic beginner exploring the world of decentralized technologies, Q-Remix provides a seamless, zero-setup experience tailored to users at every skill level.

Built as a core component of the **Quranium Ecosystem**, Q-Remix aligns with Quranium’s broader mission: to transform quantum computing from a potential threat into a collaborative ally for decentralized security and innovation. Q-Remix plays a foundational role in this mission by bridging traditional blockchain development with post-quantum resilience.

### What Sets Q-Remix Apart?

Q-Remix isn't just another web-based IDE—it’s an intelligent, accessible, and secure development environment designed to accelerate and future-proof smart contract development.

#### Zero-Setup, Cross-Platform Development

Start coding instantly—no installations required. Q-Remix is available as both a web application and a desktop app. Just open your browser or launch the app and begin building.

#### AI-Assisted Smart Contract Development

Q-Remix integrates advanced AI tooling throughout the development workflow:

* **Code Completions**: Intelligent, context-aware suggestions accelerate development.
* **Debugging Guidance**: AI-based insights help diagnose and resolve runtime issues.
* **Natural Language Contract Generation**: Describe your contract in plain English—let the AI scaffold a Solidity implementation.

> These features are powered by Quranium’s proprietary AI engine, ensuring privacy, performance, and deep integration with blockchain semantics.

#### Project Builder System

Quickly scaffold, organize, and manage multi-file and multi-contract DApp projects. The builder supports:

* Modular architecture
* Reusable contract templates
* Version tracking and previewing
* Integrated dependency management

#### Intuitive, Accessible User Interface

Q-Remix is built to serve both technical and non-technical users:

* **Developers**: Full-featured editor with syntax highlighting, compiler controls, and live preview.
* **Auditors & PMs**: Visual debugging tools, function-level interactions, and code analysis panels.
* **Learners**: Integrated tutorials, code walkthroughs, and guided workflows.

#### Quantum-Ready by Design

Q-Remix anticipates the next evolution of blockchain security. It supports Quranium’s research-backed standards in **post-quantum cryptography**, helping developers prepare DApps for the quantum era.

### Useful Links

* [Solidity Documentation](https://docs.soliditylang.org/en/v0.8.30/) – Official Solidity language reference
* [AI Prompt Engineering Guide](https://www.promptingguide.ai/) – Learn how to write effective prompts for smart contract generation&#x20;

Q-Remix is more than an IDE—it's a gateway to secure, intelligent, and quantum-resilient decentralized development.


# Navigating Q-Remix

Q-Remix IDE is comprised of three panels and a terminal.

Q-Remix offers a thoughtfully organized user interface that empowers developers, auditors, and creators to work efficiently within a modular, AI-assisted development environment. Here’s a breakdown of the core areas of the interface:

#### Icon Panel

Located on the far left, the **Icon Panel** acts as the primary navigation bar.

* Click on any icon to open its corresponding plugin in the Side Panel.
* You can customize which plugins appear here by enabling/disabling them via the Plugin Manager.
* Hovering reveals tooltips, ensuring discoverability for new users.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fst0dn148IlgCNNbO1Wkl%2Fimage.png?alt=media&amp;token=1432cb0b-a913-466b-b713-4f7455096b47" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FagIerl3zyfHGYkWjRmhS%2Fimage.png?alt=media&amp;token=d73d14db-3c3d-4261-9db5-d9f9c203584e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fc0CozwMoKPlFYfHoKAZT%2Fimage.png?alt=media&amp;token=5bc46e8f-71f9-4e86-a309-0e395c2e4600" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FlMZOBja4ME8oJTWKQvtZ%2Fimage.png?alt=media&amp;token=50184092-68cf-45af-b138-4a1abc20abb6" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fnm9zaBvbL6Uo0DrQOiV1%2Fimage.png?alt=media&amp;token=6871037c-d290-45c9-8b25-89f13960facb" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FR5ODloKa9GEbzmyv6Nwx%2Fimage.png?alt=media&amp;token=2941d19b-f6db-4cb1-8f78-b9f84be85717" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F0m4H1GiybWcjdO56J3O2%2Fimage.png?alt=media&amp;token=ccfe483a-7f1b-42aa-a47f-f2d31a021098" alt=""><figcaption></figcaption></figure>

#### Side Panel

This is where most plugin interfaces live.

* Interact with plugins such as the File Explorer, Compiler, Deployer, and AI Assistant.
* Plugin UIs are compact, collapsible, and modular, making it easy to switch tasks.
* Some plugins (like AI Chat or Analytics) may expand into the Main Panel instead.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FKRe2LTrlpVIXvaWuexZm%2Fimage.png?alt=media&amp;token=84c813b3-4f03-42a9-88c6-df1591fc9b3a" alt=""><figcaption></figcaption></figure>

#### Main Panel

The core workspace for interacting with your project.

* Edit Solidity contracts, view files, or open plugins with extended UIs (like visual debuggers or deployment dashboards).
* Also includes tabs for the **Home Page**, live previews, and AI-generated outputs.
* Supports multiple tabs and panes for multitasking.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FX9QG22tWsoLtI5dWc0oY%2Fimage.png?alt=media&amp;token=fea74efa-6c07-450f-9d79-fa6db10dd110" alt=""><figcaption></figcaption></figure>

#### Terminal

Positioned at the bottom of the screen.

* Displays **transaction receipts**, **compilation output**, **console logs**, and **warnings**.
* Integrated with the Debugger for step-by-step tracing of failed transactions.
* You can resize or detach the terminal for a cleaner view.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FTw0SBED4PxgmcgS4NXwz%2Fimage.png?alt=media&amp;token=100730b0-3eab-4efc-9b82-ce57ba09b275" alt=""><figcaption></figcaption></figure>

### Home Tab

The **Home Page** serves as your landing space when Q-Remix launches.\
It includes:

* Quick links to Q-Remix and Quranium’s social media and documentation.
* Options to explore featured plugins, clone templates, or browse pre-built DApp prototypes.
* Access to **recent workspaces**, tutorials, and onboarding walkthroughs.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FxA5ZyC59g0bwIAEWG41R%2Fimage.png?alt=media&amp;token=0bfc3e9d-31ec-4021-af01-476cf40a902a" alt=""><figcaption></figcaption></figure>

### Default Tools

When Q-Remix loads for the first time, the following tools and plugins are active in the Icon Panel by default:

* **File Explorer** – Manage files and folders in your smart contract project.
* **Solidity Compiler** – Compile contracts with selectable compiler versions.
* **Deployer** – Deploy contracts to testnets or local simulators.
* **AI Assistant** – Interact with the built-in AI to generate, refactor, or debug code.
* **Terminal** – View logs and interact with the runtime output.

> You can always add or remove tools by clicking the Plugin Manager icon at the bottom of the Icon Panel.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fy3iogCNiAGyNLfUduIxQ%2Fimage.png?alt=media&amp;token=e339f5bc-6a4f-43ed-bc39-d35fa8a00876" alt=""><figcaption></figcaption></figure>

**Icon Panel** – Click to choose which plugins appear in the Side Panel.\
**Side Panel** – Displays the interface for most plugins (though not all).\
**Main Panel** – Used for editing files, accessing large-format tools, and viewing the Home tab.\
**Terminal** – Shows transaction receipts and various logs.


# Using Q-Remix Safely

Q-Remix is a free-to-use, zero-setup IDE that welcomes developers of all backgrounds—including those new to blockchain or without formal coding experience. While this openness supports innovation and learning, it also creates opportunities for malicious actors to exploit unsuspecting users.

To maintain a safe and secure development environment, follow these key practices when using Q-Remix:

#### 1. Avoid Blind Copy-Pasting from Untrusted Sources

Copying code from forums, videos, Discord messages, or blogs without verification is a common—and dangerous—mistake.

Even seemingly harmless snippets can include hidden logic designed to:

* Steal funds or tokens from users
* Leak private keys
* Inject backdoor access to your contracts

**Always:**

* Read and understand every line of code you paste
* Ask AI assistants or peers for clarification if unsure
* Prefer official documentation, vetted libraries (e.g., OpenZeppelin), or code you write yourself

#### 2. Double-Check Before Deploying

Before deploying any contract to a live network:

* Manually inspect **all functions, modifiers, and access controls**
* Test thoroughly using a testnet or Remix's built-in VM (virtual machine)
* Be cautious of contracts you didn’t write or fully audit

**Tip:** Use the Q-Remix terminal to simulate interactions before deployment, and monitor all logs during testing.

#### 3. Always Pin Your Imports

When importing contracts or libraries (e.g., from GitHub or OpenZeppelin), use **version-pinned imports** to guarantee predictable and secure builds.

**Avoid**:

```solidity
import "@openzeppelin/contracts/token/ERC20/ERC20.sol"; // version not specified
```

**Use**:

```solidity
import "@openzeppelin/contracts@4.7.3/token/ERC20/ERC20.sol"; // version pinned
```

**Why it matters**:

* Prevents sudden behavioral changes due to library updates
* Ensures that testing and deployment environments are consistent
* Helps auditors and collaborators validate your code with certainty

#### General Safety Tips

* Be skeptical of unsolicited contract templates or advice from anonymous sources.
* Use hardware wallets or secure storage methods for private keys during testing.
* Enable **Read-Only Mode** if auditing or reviewing unknown contracts.

By following these practices, you help protect not just your own development, but the integrity of the broader decentralized ecosystem.


# Q-Remix Links

Explore the tools, documentation, and community resources that support your Q-Remix experience:

#### GitHub Repository

Browse the source code, report issues, or contribute to the development of Q-Remix IDE:\
[**github.com/Quranium/q-remix-ide**](https://github.com/Quranium/q-remix-ide)

* The repository contains the complete codebase for Q-Remix IDE.
* Includes setup instructions for running Remix-IDE locally in your development environment.
* Actively maintained and open for community contributions via pull requests.

#### Useful Documentation & Resources

These links will help you build smarter, safer DApps using Q-Remix:

* [Solidity Documentation](https://docs.soliditylang.org/en/v0.8.30/) – Official Solidity language reference.
* [AI Prompt Engineering Guide](https://www.promptingguide.ai/)  – Learn how to craft effective prompts for AI-assisted smart contract generation.

#### Stay Connected

Follow Quranium for updates, plugin launches, and community events related to Q-Remix:

* **Twitter / X:** [@quranium\_org](https://x.com/quranium_org)
* **Discord:** Join our Developer Community *(*[*Quranium.org*](https://discord.com/channels/1279183690244554782/1279183690244554785)*)*
* **LinkedIn:** [Quranium on LinkedIn](https://www.linkedin.com/company/quranium/)
* **Website:** [quranium.org](https://www.quranium.org/)


# FAQ

***

### General Questions

**1. What is Q-Remix IDE?**\
Q-Remix IDE is a smart contract development platform built for ease and power. It leverages the **Monaco Editor** (the same as VS Code), providing tools for writing, compiling, deploying, and interacting with smart contracts. It’s designed to be beginner-friendly while offering advanced features like AI-assisted coding, real-time feedback, and robust deployment environments.

### Editor and Compilation

**2. What editor does Q-Remix use?**\
Q-Remix uses the **Monaco Editor**, which supports syntax highlighting for Solidity, JavaScript, and more—offering a smooth, intelligent coding experience.

**3. How do I compile a smart contract in Q-Remix?**\
To compile a contract:

* Click the **Compiler Icon 🛠️** in the left sidebar.
* Select the appropriate Solidity version.
* Choose the `.sol` file to compile.
* Click **Compile**.

**4. What happens after a successful compilation?**\
Upon successful compilation, Q-Remix generates:

* **ABI (Application Binary Interface)**
* **Bytecode**

These are stored in the `artifacts/` folder for deployment and interaction.

**5. What should I do if there are errors during compilation?**\
Errors will appear in the compiler panel, highlighting the file, line number, and description of the issue to help you debug efficiently.

### Deployment and Interaction

**6. How do I deploy a contract in Q-Remix?**\
To deploy:

* Click the **Deploy & Run** tab.
* Choose an environment: **Q-Remix VM** or **Injected Provider (MetaMask)**.
* Select the account.
* Choose the compiled contract.
* Click **Deploy**.

Deployment details appear in the terminal, including the contract address and transaction hash.

**7. What environments are supported for deployment?**

* **Q-Remix VM:** A local environment powered by Hardhat, with 20 test accounts (10,000 ETH each). State persists unless the tab is closed.
* **Injected Provider - MetaMask:** Connects to Ethereum Mainnet or Testnets like Goerli or Sepolia via MetaMask.

**8. How do I interact with a deployed contract?**\
Go to the **Deployed Contracts** section:

* Click a contract to expand its functions.
* Input required parameters and click the function’s button to call it.
* Outputs like transaction hash, gas used, and returned values appear in the terminal.

### Settings and Customization

**9. How can I change the theme or language of the IDE?**

* Open the **Settings** panel.
* Use the toggles to switch between **light/dark** themes.
* Select your preferred **language**.
* Click **Reset to Default Settings** to revert to the original setup.

**10. What does the "Reset to Default Settings" button do?**\
It resets:

* **Theme** to Light Mode
* **Language** to English\
  Useful for restoring default preferences.

### Troubleshooting

**11. Why are my contract states resetting when using Q-Remix VM?**\
Contract states are preserved only as long as the **browser tab remains open**. Closing the tab resets the state and test accounts.

**12. Can I deploy a contract on Ethereum Mainnet using MetaMask in Q-Remix?**\
Yes. Use the **Injected Provider - MetaMask** option to deploy to Ethereum Mainnet or supported testnets like **Goerli** or **Sepolia**.

**13. How many deployed contracts can I interact with in Q-Remix?**\
Q-Remix retains the **five most recently deployed contracts**. Deploying additional contracts will push out the oldest one.


# File Explorer

The File Explorer in Q-Remix IDE is located on the left sidebar and serves as the central panel for browsing and managing your project's files and folders. It enables you to:

* Browse and manage project files
* Create and organize folders
* Import files from multiple sources

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FmB2W5tZ6FjlxOORJifJa%2FScreenshot%202025-05-02%20123300.png?alt=media&amp;token=d89fc599-af56-42cb-9773-800ca2a48ccc" alt="" width="368"><figcaption></figcaption></figure>

## File Storage (IndexedDB)

Q-Remix IDE uses **IndexedDB** for storing files locally within your browser. Unlike Google Docs or cloud-based editors, Q-Remix doesn’t store your files on a centralized server.

#### How It Works:

* Q-Remix leverages **browser session-based storage**
* Files and folders are saved **locally in your browser**
* No login or account creation is required to get started

#### Important Notes:

* This storage is **not permanent**. It may be lost due to:
  * Clearing browser data
  * Browser crashes or updates
  * Using incognito/private mode

> **Tip:** Always save your work regularly using `Ctrl + S`.

#### Managing Files in the File Explorer

* **View Imported Files**:
  * The file explorer, located on the left side of the Q-Remix interface, displays all imported files and folders in a tree structure.
  * Files (e.g., hello.sol) appear as individual entries, while folders (e.g., OpenZeppelin contracts) are collapsible directories.
* **Open and Edit Files**:
  * Click on any file in the file explorer to open it in a tab for editing.
  * Multiple files can be opened simultaneously, with each file appearing as a tab at the top of the editor.
* **Organize Files**:
  * Drag and drop files or folders within the file explorer to reorder them.
  * Rename files by right-clicking and selecting "Rename," or delete them using the "Delete" option.
* **Expand/Collapse Folders**:
  * Click the arrow next to a folder to expand or collapse it, keeping your workspace uncluttered.

## Workspaces

**Workspaces** in Q-Remix are like isolated folders for separate projects. Each workspace maintains its own file system, independent of others.

#### Key Points:

* Files in one workspace **cannot be accessed or imported** from another
* You can **create, switch, or delete** workspaces from the File Explorer sidebar

#### Creating a Workspace:

1. Click **"Add Workspace"**
2. A pop-up will appear asking for a **unique name**
3. A new, empty workspace will be created and displayed in the file tree

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FJHyn9JHy22HL1f9W9zXq%2Fimage.png?alt=media&amp;token=3a23f8dc-c65a-447d-9dff-83644af736c8" alt="" width="285"><figcaption><p>Workspace section</p></figcaption></figure>

By clicking on the **Add Workspace** option one can create a new workspace for projects that they need. Then a pop up appears asking for the name of the workspace, the chosen name must be unique in nature

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FgZYb75rcwAe8yws6XZpY%2Fimage.png?alt=media&amp;token=2335f44e-85b2-4945-8f36-f79af50049bb" alt="" width="417"><figcaption><p>New Workspace</p></figcaption></figure>

View all workspaces by clicking on the **Selected Section**. A popup will appear with the available options

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FHFXZe4r7B74QZ6fZGx4f%2Fimage.png?alt=media&amp;token=eb60d315-ccc3-414d-9550-3b16b5c6cc2b" alt="" width="285"><figcaption></figcaption></figure>

Select any workspace option to switch between workspaces, each containing its own set of folders and files.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FwIrGM8bXwMaytMPR6Sb5%2Fimage.png?alt=media&amp;token=fc6689ed-2092-4338-acb9-1e1c63383d33" alt="" width="298"><figcaption></figcaption></figure>

The top workspace represents the currently selected one, while the one below represents the previous workspace, and so on, with each subsequent workspace showing the previous one in the sequence.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fz6zRIANjlgsJoiyCMHmv%2Fimage.png?alt=media&amp;token=de213382-6150-4164-baa6-462e995f8115" alt="" width="258"><figcaption></figcaption></figure>

## Working with Files

There are many options which appear under the workspace session, making it easier for development of the project

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FpNhnid2laj9dbKDOtgWm%2Fimage.png?alt=media&amp;token=c7e663e1-b9d5-4c8a-a226-2391d94663f0" alt=""><figcaption><p>File Working options</p></figcaption></figure>

These options are:

1. **Create File**&#x20;
2. **Create Folder** : Creates a folder at the desired location
3. **File import** : Imports file from local device
4. **Folder import** : Imports folder from local device
5. **Import from IPFS** : Imports files from local device - in later updates
6. **Import github repository** : Imports projects from the given link or pre determined project like openzepellin or Uniswapv4 etc.
7. **Git Integration** : connects github to the current workspace - in later updates

Under each workspace, several actions are available to manage project files effectively:

| Action                   | Description                                                                      |
| ------------------------ | -------------------------------------------------------------------------------- |
| Create File              | Create a `.sol` or other file in the selected folder or root directory           |
| Create Folder            | Create a new folder inside the selected location                                 |
| Import File              | Upload a file from your local machine                                            |
| Import Folder            | Upload a folder from your local machine                                          |
| Import from IPFS         | *(Coming soon)* Import files directly from the InterPlanetary File System        |
| Import GitHub Repository | Import files from a public GitHub repo or a preset template (e.g., OpenZeppelin) |
| Git Integration          | *(Coming soon)* Connect a GitHub repository to your workspace                    |

## Create File

This option is used to create file either in the desired folder (selected folder) or a new file outside any folder. There are two ways of doing this. The above mentioned method allows you to do both of them. Another option is after creating the folder the second icon, similar to the file icon as seen above will appear if you hover over the folder. This option allows you to create a file in that specific folder.

* To create a file inside a folder:
  * Hover over the folder to reveal a small file icon
  * Click the icon to create a file inside that folder
* Files can be **renamed, deleted**, or **dragged to a different folder** for organization.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FdCWhlCc8xl7jsKjwmwC8%2Fimage.png?alt=media&amp;token=3658f7da-9bee-47c5-970c-040d588af3f7" alt=""><figcaption><p>Creating files</p></figcaption></figure>

Other icons on the right are creating folder, rename and delete. Out of these options any file created would also have the option of delete and rename.&#x20;

Both of these options can be used anytime one desires but one must always be aware of the location where the file lands. If the file created is not in the desired folder, the user can drag the file to the desired location, thereby moving it.

## Import Github Repository

This is a new feature mainly for the smart contract developers to use. it comes with two different approaches.  On clicking the link option (number 6 in the above picture), the following screen pops up

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FbQMneynrZdgWUiMiIy4N%2Fimage.png?alt=media&amp;token=d3b37eaf-d748-443b-ab45-de7c197f2274" alt="" width="276"><figcaption><p>Import Github Repository</p></figcaption></figure>

The first option is select a library which allows the user to select between two predetermined libraries mostly used for creating smart contracts, these libraries are **openzepellin and uniswapv4**.&#x20;

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FaUcwXPfRK0NDtUYNiVl8%2Fimage.png?alt=media&amp;token=a237ab30-7311-493f-b0fd-783d6ff48438" alt=""><figcaption></figcaption></figure>

The **GitHub Import** feature is tailored for smart contract developers, especially those who work with popular libraries like **OpenZeppelin** or **Uniswap**.

#### Steps:

1. Click the **Import GitHub Repository** option
2. Choose one of the following:
   * **Preset Libraries**: Choose between:
     * OpenZeppelin
     * Uniswap v4
   * **Custom URL**: Enter the public URL of a GitHub repo
     * Private repos are not supported
3. Once imported:
   * A new folder named `library/` will be created
   * Inside it, the selected repo will be added as a subfolder (e.g., `uniswapv4/`)

#### Notes:

* The import process supports `.sol` and other relevant files
* **Duplicate imports are not allowed**
  * You must delete a previously imported repo before re-importing it

If another project needs to be called, the user can select **Custom url** option. On selecting custom URL the user would be asked to give the link to that repository. The repository must be public in nature otherwise the import would fail.

After giving the URL or selecting any option between openzepellin contracts and uniswapv4, a new folder would be created called library having a folder with the same name as the one getting imported

In this example I imported uniswapv4 using the above option. This is the result

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F5j6NUs2cvGPAhU9RD6xL%2Fimage.png?alt=media&amp;token=d597fbd5-d460-48bc-84e6-21bb062e946d" alt=""><figcaption><p>Import Repo result</p></figcaption></figure>

As you can see all the folders and files which contain smart contracts or any file with .sol extension gets imported. This process can be repeated as many times needed but same repo cant be imported twice until and unless the previous one is deleted.


# Search in Files

The **Search in Files** feature enables users to efficiently search for specific terms across all files within a selected workspace. Integrated into a React-based IDE, this feature provides a user-friendly interface for locating and navigating to search results, enhancing productivity during development, especially for projects involving multiple files like smart contracts.

#### Key Features:

* **Workspace-wide Search**: Runs across every file in the currently selected workspace.
* **User-Friendly Interface**: Seamlessly integrated into Q-Remix’s React-based IDE for an intuitive developer experience.
* **Efficient Navigation**: Clicking a result takes you directly to the corresponding file and line.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FjsF58pxl9bQO0W9BALa6%2FScreenshot%202025-05-07%20112351.png?alt=media&amp;token=73e78a6b-716a-4b94-b53d-9e79f2d8c13f" alt=""><figcaption><p>search bar</p></figcaption></figure>

#### Highlighted Matches

Matches are visually enhanced to improve readability and focus.

* **Implementation**: Utilizes **regular expressions** to detect search terms in text.
* **Rendering**: Matched terms are wrapped in a

  ```html
  <span class="bg-yellow-200">
  ```

  element to apply a yellow background highlight.
* **Scope**:

  * Matches are highlighted both in **file names** and **content lines**.
  * Supports multiple matches per file and line.

  #### Use Case:

  This feature significantly boosts productivity by helping developers:

  * Track down specific function names or variables across contracts
  * Audit changes and dependencies quickly
  * Navigate large codebases with ease


# Settings

The `Settings` component provides a configurable user interface for changing application themes and languages. It includes expand/collapse functionality, theme and language radio options, and a reset-to-defaults feature. This component is designed to enhance user experience by allowing visual and linguistic customization.

<div align="left"><figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FcngAvjuon2y9qvCxpCRC%2Fimage.png?alt=media&amp;token=b66cd78b-f936-4036-8928-6aa0c7d4840c" alt=""><figcaption></figcaption></figure></div>

#### Expandable Panel

* The settings panel is hidden by default.
* Click the **Settings** icon or button to **expand or collapse** the panel.
* This helps keep the interface clean and focused.

#### Theme Selection

* Displays a categorized list of available **UI themes**.
* Themes are grouped by **mode**:
  * **Light Mode**
  * **Dark Mode**
* Users can select their preferred theme using **radio buttons**.

#### Language Selection

* Users can choose from a set of **predefined language options**.
* The interface will dynamically update to the selected language.
* Q-Remix supports **multi-language UI**, making it accessible to a global audience.

#### Reset to Default

* A prominent **red button** labeled **Reset to Default Settings** is available.
* Clicking this button will:
  * Reset **Theme** to `light`
  * Reset **Language** to `EN` (English)
* This provides an easy way to return to the default interface configuration.

> Tip: Use the **Reset** button if the interface becomes hard to read or if you're testing multiple themes or languages.

The Q-Remix user interface is available in a number of languages as listed below namely English, Spanish, French, Italian, Korean, Russian, Chinese.

<div align="left"><figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F5dHA96SBO2V6keKP7Ium%2Fimage.png?alt=media&amp;token=209f99be-7145-4ace-93fd-44a550a5e0ef" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FpWueJnDFDFU3nEn7MMhY%2Fimage.png?alt=media&amp;token=d7d14360-acb5-494e-9ba7-c9f3e5e714a5" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FOtT05O2uRKyUIFqDaWEz%2Fimage.png?alt=media&amp;token=160ed66f-18e4-4dbb-9cc0-ecb823d1ce48" alt=""><figcaption></figcaption></figure>

Click on 'Reset to Default Settings' to revert the language to English.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F5B2I4RCFtMkk8uw73pEP%2Fimage.png?alt=media&amp;token=695c6076-9981-44d9-aa4e-dcf7b88e4076" alt=""><figcaption></figcaption></figure>


# Editor

The **Editor** in the Q-Remix BETA environment provides a robust interface for writing, managing, and interacting with Solidity smart contracts. Built with a Monaco Editor integration, it offers a range of features to enhance the developer experience, from syntax highlighting to AI assistance. The screenshot below highlights key features of the editor while working on a Solidity file:

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FNMj1qE3vgeKhYWxdDgb8%2Fimage.png?alt=media&amp;token=18317620-3195-41fc-a13f-3178f3541f40" alt=""><figcaption></figcaption></figure>

#### Feature Overview

The Editor provides a range of smart features optimized for blockchain developers:

**Multi-File Support with Tabs**

* Open and work on multiple files simultaneously.
* Each open file appears as a **tab** at the top of the editor.
* Tabs allow seamless switching and organization across your project.

**Syntax Highlighting & Code Assistance**

* Full **Solidity syntax highlighting** for improved readability.
* Offers **contextual suggestions and autocompletion**, speeding up coding.

**AI Assistance Prompt**

* Press a designated **keyboard shortcut** to receive AI-powered code suggestions.
* Ideal for generating code snippets or resolving bugs within smart contracts.

**Inline Comments and Tips**

* Editor displays **inline tips and smart comments** for common patterns and best practices.
* Helps guide developers in writing more secure and efficient code.

**Integrated Terminal & Transaction Viewer**

* Embedded terminal allows developers to **interact with the blockchain**.
* View and manage transactions **without leaving the editor**.
* Great for testing smart contract deployments or executing functions live.

> Tip: Enable AI assistance when exploring new contracts or optimizing logic—it can dramatically improve speed and quality.


# Autocompletion & Suggestions in Editor

The **Autocompletion and Suggestions** feature in our Monaco Editor integration provides developers with intelligent, context-aware code completion for Solidity smart contracts. This feature leverages the Monaco Editor's capabilities, augmented by a custom backend API, to offer real-time suggestions, snippets, and ghost text, enhancing coding efficiency and reducing errors during smart contract development.

### Feature Overview

This feature is designed to assist developers by providing:

* **Context-Aware Autocompletion**: Suggestions are generated based on the current code context, such as keywords, function signatures, and Solidity-specific constructs (e.g., contract, function, event).
* **Code Snippets**: Predefined templates for common Solidity patterns like contracts, functions, events, and modifiers, which can be inserted with a single selection.
* **Ghost Text**: Inline preview of suggested code that can be accepted with a Tab key press, offering a seamless coding experience.
* **Custom Suggestion Box**: A UI component displaying detailed suggestions with documentation, types, and icons, triggered by specific keywords or key combinations (e.g., Ctrl+Shift+S).

#### Key Features in Detail

#### 1. Suggestion Box

* **Trigger**: Activated via Ctrl+Shift+S or automatically based on context.
* **Content**: Displays a list of suggestions with:
  * **Icons**: Visual indicators for types (e.g., ⚡ for functions, 📄 for contracts).
  * **Documentation**: Brief descriptions of each suggestion.
  * **Types**: Indicates whether the suggestion is a function, contract, event, etc.
* **Example**: Suggestions for contract include a full template with state variables, events, and functions.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F3l0bJ1Cjs3dhNXaIFjjq%2FScreenshot%202025-05-07%20101153.png?alt=media&amp;token=bdd13055-bf09-4138-8583-01ca13597b1e" alt=""><figcaption><p>Suggestion box</p></figcaption></figure>

#### 2. Autocompletion

* **Trigger Characters**: Suggestions are triggered by characters like ., (, {, =, and even a space, ensuring seamless integration into the coding workflow.
* **Solidity-Specific Suggestions**: Includes keywords (public, private), types (uint256, address), and snippets for common patterns.
* **Example**: Typing modifier suggests onlyOwner with a complete implementation, as shown in the screenshot.

#### 3. Ghost Text

* **Behavior**: Displays a preview of the suggested code inline, styled in italic with a dotted underline.
* **Interaction**: Press Tab to accept the suggestion, or continue typing to ignore it.
* **Performance**: Suggestions are fetched with a 300ms debounce to avoid overwhelming the backend.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FbUtFvxIid8OXXoM8WzPo%2FScreenshot%202025-05-07%20101239.png?alt=media&amp;token=9c7cac92-2683-4362-9cb7-123de30f0f59" alt=""><figcaption><p>Autocompletion-Ghost box</p></figcaption></figure>

### Benefits

* **Faster Development**: Focus more on logic, less on boilerplate.
* **Error Reduction**: Use verified and complete code patterns.
* **Learning Tool**: Great for beginners with inline docs and context.
* **Custom & AI Suggestions**: Supports both hardcoded templates and backend-powered, context-sensitive suggestions.

### Future Improvements

* Enhance AI suggestion accuracy by integrating a more powerful model.
* Add support for more languages beyond Solidity.
* Improve suggestion ranking based on user history and project context.
* Optimize backend performance for larger codebases.

This feature significantly enhances the developer experience by combining the power of Monaco Editor with intelligent, context-aware suggestions tailored for Solidity development.


# Contract Creation & Compiling

## Contract Creation

Q-Remix IDE uses the **Monaco Editor** — the same editor that powers **Visual Studio Code (VS Code)**. This ensures a rich editing experience with features designed for both beginners and advanced smart contract developers.

#### Key Features:

* **Syntax Highlighting**: Supports Solidity, JavaScript, and other popular languages
* **Real-time Error Highlighting**: Integrated with the Solidity compiler (`solc`) to display errors and warnings inline
* **Auto-indentation and Bracket Matching**: Enhances code readability
* **Multi-file Support**: Easily switch between files and manage tabs
* **Integrated Compiler Feedback**: View compilation messages, errors, and warnings directly within the editor
* **Lightweight and Fast**: Runs directly in the browser without the need for setup or installation

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Ftx0Zsjt72LhG9fgMbzUQ%2Fimage.png?alt=media&amp;token=2c0d7575-9afe-4be8-bc2e-285a01ca968e" alt=""><figcaption></figcaption></figure>

Along with the traditional manner of coding, Q-Remix offers a unique solution to writing a simple contract to building entire projects the use of AI.

To get started with writing your smart contract in Q-Remix, follow these steps:

1. **Create a New File**:
   * Navigate to the **File Explorer** on the left sidebar.
   * Right-click on a folder or the workspace and choose **Create File**.
   * Name your file with the `.sol` extension, such as `MyContract.sol`.
2. **Write Your Solidity Code**:

   * The Monaco editor will open your new file where you can start writing your Solidity code.
   * Example of a simple contract:

   ```solidity
   // Welcome to Q Remix IDE! 
   // Visit all Quranium websites at: https://quranium.org
   // Write your Solidity contract here...
   // pragma solidity ^0.8.7;
   // contract MyContract {
   // Your contract code goes here
   // }
   // SPDX-License-Identifier: MIT
   pragma solidity ^0.8.0;

   contract MyContract {
       uint256 public value;

       constructor(uint256 _value) {
           value = _value;
       }

       function setValue(uint256 _value) public {
           value = _value;
       }
   }
   ```

## Compilation

Q-Remix uses the widely trusted **Solidity Compiler (`solc`)** to compile smart contracts directly in the browser.

After writing your smart contract, it’s time to compile it using Q-Remix's **Solidity Compiler** (solc). The steps below guide you through the compilation process.

**1. Select the Compiler Icon**

* In the left toolbar, click the **third icon** from the top (🛠️ Compiler Icon).
* This opens the **Compiler Panel**.

We get to choose which files to compile like following:

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F0GyxJbmsSCNTMVl6LzbQ%2FScreenshot%202025-04-16%20184617.png?alt=media&amp;token=aaf046d1-1ce6-4083-91ab-886d09f173c8" alt="" width="201"><figcaption></figcaption></figure>

**2. Configure the Compiler Settings**

* **Solidity Compiler Version**: Select the desired Solidity version from the dropdown. It’s essential to match the version that your smart contract is written for to avoid compatibility issues.
* **Target File**: By default, the currently open `.sol` file is selected, but you can choose another file by selecting it from the file explorer if needed.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FAxEUSv2Pi0Hsgh37AlD5%2FScreenshot%202025-04-16%20184630.png?alt=media&amp;token=c3dcc7fc-cf7f-4647-8faa-86e6f7d3f292" alt="" width="371"><figcaption></figcaption></figure>

**Example**: If you are using the Solidity version `0.8.0`, make sure you select it in the dropdown to avoid compatibility issues with newer or older versions.

**3. Compile the Contract**

* Once you’ve selected the Solidity version and the target file, click **Compile**.
* This will initiate the compilation process. If there are no errors, Q-Remix will generate an **artifacts/** folder containing the compiled **ABI** (Application Binary Interface) and **Bytecode**.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F6d4d88tONARkTKZ9pub0%2Fimage.png?alt=media&amp;token=1679cc6d-0959-4de1-b065-1350c96d46fe" alt=""><figcaption></figcaption></figure>

The file currently being edited will automatically be chosen as the file to get compiler. One can change the solidity version as well as the file they want to compile in the menu. after selecting the desired compiler version and the smart contract to be compile, just click on the compile button. This will generate a artifacts folder with the contract abi and bytecode in it.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F4vDoSGNfqv7j6mLGoDFx%2Fimage.png?alt=media&amp;token=ecda67ec-175b-4c55-be06-61d3017f4b72" alt="" width="198"><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fes4LkhptSGwiVTIzMWA9%2FScreenshot%202025-04-16%20184722.png?alt=media&amp;token=1b53c0a3-c030-49d1-972e-fbdadea5e43e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FMSBvJVfOXrHZlTnO7sRh%2FScreenshot%202025-05-04%20030254.png?alt=media&amp;token=06e09209-6bf5-4d4c-ba4d-dc2f982835bb" alt=""><figcaption></figcaption></figure>

This concludes the compilation section of the smart contract you have created.

#### What Happens After Compilation?

* **If Compilation is Successful**:

  * An `artifacts/` folder will be created.
  * Inside the folder, you’ll find:
    * **ABI**: This is a JSON file that defines how to interact with the compiled contract.
    * **Bytecode**: The compiled bytecode of the contract ready for deployment.

  **Example Output (Artifcats Folder)**:

  ```
  artifacts/
     MyContract.sol/
        MyContract.json (includes ABI, bytecode)
  ```
* **If There Are Errors**:
  * The editor will highlight errors directly in the code.
  * Compilation errors and warnings will appear in the **compiler panel** at the bottom of the editor.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F05tNnLjotBq8ZtlQl78B%2Fimage.png?alt=media&amp;token=416998c7-653f-4a17-89e4-c78f7b960c11" alt="" width="199"><figcaption></figcaption></figure>

> **Note**: Always ensure the correct Solidity version is selected to avoid compatibility issues with the imported libraries or smart contract syntax.

> #### Best Practices:
>
> * Save files using `Ctrl + S` before compiling
> * Frequently check for compiler warnings even if compilation succeeds
> * Maintain clean and modular code structure for better AI suggestions and project generation

#### Important Notes

* **Correct Compiler Version**: Always ensure that the correct version of Solidity is selected. Using an incompatible version may cause errors or unexpected behavior, especially if you are using libraries like **OpenZeppelin** or **Uniswap**.

  Example: If you're using OpenZeppelin contracts that require `^0.8.0`, make sure the compiler is set to that version.
* **Save Your Work**: It’s a good practice to save your files regularly using **Ctrl + S** before compiling to avoid losing any changes.

#### Best Practices

* **Check for Warnings**: Even if the compilation is successful, always check for warnings in the compiler panel. Warnings may indicate areas of your contract that could be improved or might behave unexpectedly.
* **Modular Code**: Keep your code organized and modular. This not only makes your smart contract easier to maintain, but also helps Q-Remix’s **AI Assistance** generate more accurate suggestions.
* **Frequent Compilation**: Compile your contract frequently during development to catch errors early, especially when importing libraries or using new features.

By following this guide, you can smoothly create, compile, and deploy your smart contracts directly within Q-Remix. The combination of the Monaco Editor, integrated compiler, and AI assistance makes Q-Remix an excellent choice for developers looking to build and manage Ethereum-based projects.


# Deploy & Run

The Deployment Module in Q-Remix IDE enables developers to **deploy**, **interact**, and **manage smart contracts** efficiently, both locally and on-chain. This module is crucial for testing contract behavior and pushing production-ready contracts to the blockchain.

#### Key Functionalities:

The Deployment section allows you to:

1. **Deploy Contracts**: Locally using a test VM or on blockchain networks via MetaMask
2. **Interact with Deployed Contracts**: Test and invoke smart contract functions
3. **Access Previously Deployed Contracts**: Use their addresses to continue interaction

You can access this module by clicking the **third icon on the far-left sidebar**.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FgV5o2Xt5mBLbT2WdA61x%2Fimage.png?alt=media&amp;token=65791e34-a5cf-48da-adc1-74d146ab9c27" alt=""><figcaption></figcaption></figure>

### Deploy & Run Interface Overview

There are three main sections in the ***deploy & run*** section&#x20;

1. **Environment**
2. **Account**
3. **Contract**

## 1. Environment

This section defines **where** your contract will be deployed. The current environments supported in Q-Remix IDE are:

**a. Q-Remix VM (Local Test Environment)**

* Powered by **Hardhat**.
* Simulates a local Ethereum environment.
* Automatically generates **20 test accounts**.
* Each account has **10,000 ETH** for simulation purposes.
* Persistent across browser refreshes (contract state is preserved).
* Resets to the original state if the browser tab is closed.

**b. Injected Provider - MetaMask**

* Connects your **MetaMask wallet** to the IDE.
* Supports deployment on:
  * Ethereum **Mainnet**
  * Various **Testnets** (e.g., Goerli, Sepolia)
* Requires MetaMask extension and authentication.
* After successful login, the selected MetaMask account appears in the **Accounts tab**.

> Make sure MetaMask is unlocked and the correct network is selected before proceeding.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F1wWVb8i7FdT7OgzghTvz%2Fimage.png?alt=media&amp;token=409114db-1c15-4cf6-b896-353eb1586ed2" alt=""><figcaption></figcaption></figure>

For now Q-Remix IDE supports the first two options

1. **Q-Remix VM:** Uses Hardhat to generate 10 test addresses with 10,000 ETHs in each address. The user can switch the addresses anytime and test or deploy with them. The states of each of the contracts remain the same even after refreshing the entire page. This ensures that no progress made is lost during the session. However, if the session is closed all the accounts are reset to have the original 10,000 ETHs.
2. **Injected Provider MetaMask:** This connects the wallet metamask with the remix IDE allowing teh contracts to be deployed either Mainnet or in the Testnet.<br>

   <figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FBhVphHEb7dlBGTbTERFC%2Fimage.png?alt=media&amp;token=140e45a1-6d37-4586-ad31-c0cf0e266bd5" alt=""><figcaption></figcaption></figure>

After giving your MetaMask password, the selected address or account will be reflected in the Account section of the Deploy & Run&#x20;

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FMBvHl1zJJo9pAyY1YUDT%2Fimage.png?alt=media&amp;token=e063f58f-55c4-46e8-9c4e-d8b224e92882" alt=""><figcaption></figcaption></figure>

## 2. Accounts

The **Accounts section** reflects the currently available accounts based on the selected environment.

**In Q-Remix VM:**

* Displays **20 pre-funded test accounts**
* Users can switch between accounts using the dropdown
* Each account retains its state until the browser tab is closed

**In MetaMask (Injected Provider):**

* Displays the **connected MetaMask address**
* Reflects real token balances and actual network info

You can choose any available account for deploying or interacting with contracts.<br>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FGdOrr9FjjwIQhrP4vTlh%2Fimage.png?alt=media&amp;token=c04a5f65-6c3f-4489-82ad-cdd93317b123" alt=""><figcaption></figcaption></figure>

For deploying the selected contract one can use any of the accounts. In the above example one contract has been deployed using the first account.

## 3. Contracts&#x20;

This section lists:

* The **most recently compiled contract**
* All previously compiled contracts within the session

**To Deploy a Contract:**

1. Select the compiled contract from the dropdown.
2. Review the contract and verify any constructor parameters, if applicable.
3. Click **Deploy**.

Upon successful deployment:

* The contract will appear in the **Deployed Contracts list** below.
* Deployment logs (address, gas usage, etc.) are shown in the terminal.
* Each contract instance includes:
  * Public and external function buttons for interaction
  * Options to copy the contract address
  * Collapse/expand details

> Always **review your code** and **verify constructor arguments** before deploying on a live network.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FLgOkcejlJdz4kersHlIW%2Fimage.png?alt=media&amp;token=5ee1506a-f834-4106-b3dc-5e999a6d898e" alt=""><figcaption></figcaption></figure>

One must review the code or understand the code before completely deploying it on the chain.

Once the contracts has been selected, clicking on the deploy button would deploy the contract on the said chain or network. The details of the deployment including the contract address would be shown on the terminal&#x20;

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FDDTMtNbNyT0X7itvJza3%2Fimage.png?alt=media&amp;token=08d7600d-1f38-4d80-8d66-4a416de4e9fe" alt=""><figcaption></figcaption></figure>

### Interacting with Deployed Contracts

Once deployed, contracts can be interacted with directly from the Q-Remix interface:

* Input fields are automatically created for each public/external function
* Clickable buttons allow calling `view`, `pure`, `payable`, or state-changing functions
* All interactions and return values are shown in the terminal output

> This is a crucial step in debugging and testing your smart contract logic in a real-world simulation.

### Best Practices

* Use the **Q-Remix VM** for early development and rapid iteration.
* Switch to **MetaMask** when testing contract deployment on testnets.
* Always **compile your contract** before attempting deployment.
* Keep a copy of your **contract address** after deployment for reference or frontend integration.


# Accessing and Interacting with the Deployed Contracts

Once a contract has been successfully deployed in **Q-Remix IDE**, it becomes available in the **Deployed Contracts** section. This section is located just below the **Deploy button** in the *Deploy & Run* tab. It provides a graphical interface for interacting with your contract's functions directly within the IDE.

#### What You Can Do

* **View Recently Deployed Contracts**:\
  Only the **last five deployed contracts** are retained and interactable within this section. If more than five contracts are deployed, the oldest one will be removed from the list.
* **Interact with Contract Functions**:\
  Each listed contract instance includes an interactive panel that exposes all its **public** and **external** functions. For each function:
  * Input fields are shown for required parameters.
  * `View` and `Pure` functions return values directly in the terminal.
  * `Payable` and state-changing functions initiate blockchain transactions.
* **Collapse or Expand Interface**:\
  Each deployed contract can be expanded to show available functions or collapsed for a cleaner interface.
* **Copy Address**:\
  The contract address can be copied for use in frontend integration or other tooling.

#### Transaction Output and Logging

* Any function interaction or transaction from the Deployed Contracts section is reflected in the **Terminal Panel** (bottom section of the IDE).
* Logs include:
  * Transaction hash
  * Status (success or failure)
  * Gas used
  * Return values (for `view`/`pure` functions)
  * Contract address and timestamp

> Tip: Use this section to thoroughly test your smart contract before pushing to a live blockchain.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FnvmHvywv2vZoIaQeLLdL%2Fimage.png?alt=media&amp;token=2c719f06-d735-4846-9534-47dffd1d5989" alt=""><figcaption></figcaption></figure>

Any transaction done in this manner would be reflected in the terminal.&#x20;

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fvsx1t2kyyfAlto7iykFw%2Fimage.png?alt=media&amp;token=e6786afa-88d7-4c52-9dc9-279d8c6d678d" alt=""><figcaption></figcaption></figure>


# Terminal

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fnh5Ww3RLpBgKR6PSXquB%2Fimage.png?alt=media&amp;token=f9bb89be-ad70-4511-83b3-578d16aa9fc5" alt=""><figcaption><p>Terminal </p></figcaption></figure>

The **Terminal** is a built-in interface within the smart contract development platform designed to provide real-time feedback and execution logs. It allows users to monitor the status and outputs of various development operations such as compilation, deployment, and transactions without leaving the development environment.

#### Key Functionalities

**1. Compilation Logs**

* Shows the output from smart contract compilation.
* Includes:
  * Success confirmations
  * Detailed **error messages** with **line numbers** and **error types**
* Helps developers **identify and fix issues** early in the development cycle.

**2. Deployment Logs**

* Logs all events related to **deploying contracts**.
* Includes:
  * Deployment success messages
  * **Deployed contract address**
  * **Gas used**
  * Informative errors if the deployment fails (e.g., insufficient gas, constructor issues)

**3. Transaction Logs**

* Tracks every interaction with deployed contracts.
* Displays:
  * **Transaction hash**
  * **Execution outcome** (Success or Failure)
  * **Event logs** and **return values**
  * Timestamps and gas usage for debugging and auditing

**4. Auto-Scroll**

* Automatically scrolls to show the **most recent output** at the bottom.
* Ensures developers see real-time feedback **without manual scrolling**, enhancing workflow efficiency.

> **Tip**: Keep the Terminal Panel open during development to stay informed about all contract-related actions and quickly debug any issues.


# Solidity Compiler

The **Solidity Compiler** lets you compile your smart contracts directly in your browser without installing external tools. It’s a powerful and flexible tool tailored for Ethereum developers who want an integrated, smooth experience for compiling `.sol` files within a smart contract IDE.

### &#x20;Features&#x20;

* **Smart file detection** – automatically shows all `.sol` files in your workspace
* **Multiple compiler versions** – choose the version that fits your contract requirements
* **Advanced compilation settings** – set optimizer, EVM version, and more
* **Auto-compile** – contracts can compile automatically when edited
* **Artifact generation** – generates and saves ABI and Bytecode for your contracts
* **Warnings and error handling** – shows helpful feedback for fixing your code

### Solidity Compiler Basics

To compile a smart contract, first select a `.sol` file in the **File Explorer**. If you have multiple files open, make sure the one you want to compile is the **active tab** in the Editor.

If no file is currently active or no contract has been compiled yet, the Solidity Compiler panel will appear empty, prompting you to choose or open a contract file.

<div align="center"><figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FVjATu2XbJrtN8w8TEaLM%2Fimage.png?alt=media&amp;token=4456e5e4-e718-4995-a74f-bde8a4a303f5" alt="" width="239"><figcaption></figcaption></figure></div>

#### 1. **Select a File**

Once you open a workspace, all Solidity (`.sol`) files will be listed in the file dropdown. Select the one you want to compile.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F0GyxJbmsSCNTMVl6LzbQ%2FScreenshot%202025-04-16%20184617.png?alt=media&amp;token=aaf046d1-1ce6-4083-91ab-886d09f173c8" alt="" width="201"><figcaption></figcaption></figure>

#### 2. **Choose a Compiler Version**

Select the Solidity version your contract requires. The list includes popular stable releases.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FAxEUSv2Pi0Hsgh37AlD5%2FScreenshot%202025-04-16%20184630.png?alt=media&amp;token=c3dcc7fc-cf7f-4647-8faa-86e6f7d3f292" alt="" width="371"><figcaption></figcaption></figure>

#### 3. **Set Your Preferences**

You can configure the following:

* **Auto-compile**: Automatically compile the contract when it changes.
* &#x20;**Advanced Settings** (optional):

  * **Language**: Solidity or Yul
  * **EVM Version**: Select the Ethereum Virtual Machine version
  * **Enable Optimizer**: Optimize contract size and gas usage
  * **Optimizer Runs**: Number of optimizer iterations.

  <figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FSxkcZzt1PlwdbbifB9Dz%2Fimage.png?alt=media&amp;token=7e795974-fe78-42a1-a2e2-6b0d4bb6b087" alt="" width="306"><figcaption></figcaption></figure>

#### 4. **Compile the Contract**

Click the **"Compile"** button to manually compile the contract. If auto-compile is enabled, it may already compile after a change.

#### 5. **Check the Results**

After compiling:

* A **green tick** means compilation was successful.
* If there’s an error, it will be displayed at the bottom.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F4vDoSGNfqv7j6mLGoDFx%2Fimage.png?alt=media&amp;token=ecda67ec-175b-4c55-be06-61d3017f4b72" alt="" width="198"><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fckv8qWDRQuHmiKDwX9zX%2Fimage.png?alt=media&amp;token=4f6960b2-dc27-4def-929b-ca9042fe1a02" alt="" width="194"><figcaption></figcaption></figure>


# AI Assistant

## Q-Remix AI Assistant

Q-Remix introduces an advanced, AI-powered development assistant that aims to streamline the smart contract development process. This feature is especially valuable for non-technical users or developers who are just starting with blockchain development, offering tools that accelerate learning, reduce errors, and speed up productivity.

The AI functionality is composed of three major components, each designed to fulfill specific development needs:

1. **Q-Remix Chatbot**: A comprehensive chatbot acting as a code assistant to make the process of developing easier and smoother. It can be found on the bottom right corner of the screen. \
   There are many functionalities it offers out of which the main ones include

   1. Understanding code snippets or concepts: The chatbot much like ChatGPT understands many concepts and can help with confusion which might arise due to programming. even if its a concept unfamiliar with the user with the help of suggestions and detailed explanation from our bot, the user can understand it.
   2. Generating code: With a prompt detailed enough, the user can generate any piece of code or the entire code for a particular function using the chatbot. It will also provide any help related to the code that was generated, be it any errors or how to run the specific code
   3. Debugging errors and solving bugs: Errors are a part of development and often times they are pretty confusing  and takes hours to debug or to solve. The inbuilt chatbot helps this case by giving suggestions on how to correct the error or solve the said bug.&#x20;

   Detailed description of the Q-Remix Chatbot is available in the next pages.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FFWxaOytwZue6ahyzlv2e%2FScreenshot%202025-04-16%20190656.png?alt=media&amp;token=b8b279a4-784f-4645-98e3-5838be2878b3" alt=""><figcaption></figcaption></figure>

2. **AI code generation within files**: An extension of the chatbot feature essentially helping the developers the ability to get the code directly in the file that they are editing instead of the chatbot component. This feature can be triggered by using the command **Ctrl +I** on the file that is being edited. \
   By using the above said command, a window pops up asking for the prompt for the code. After giving the prompt the entire code generated will directly appear on that file, and the user will be asked if they want to keep it or discard it with an option under the generated code. If they click on the tick option the generated code will remain on the file, otherwise the code will be discarded.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FYRDWpszIqovvni3zbK3r%2FScreenshot%202025-05-07%20120656.png?alt=media&amp;token=7f653eb9-c771-4eda-8860-ca53f874ebed" alt=""><figcaption></figcaption></figure>

3. **AI Project Generation** : One of the best tools for instant creation of an entire project using a few buttons. This eliminates the hassle of creating an appropriate file structure or writing individual code for each file in the said folders. In the same chatbot component if the user types the keyword "Create a project " with the project details, a new pop up window appears in the same component where the user will be asked to give all the information or details of the project (more explanation on the details higher the accuracy of the project being generated). After entire details of the project is given the folder/file structure is generated and shown to the user. If the user clicks on accept button, a new folder gets created with the entire project in it. Now the user can simply run the project or deploy the contracts to test it.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FIuDq5ADtoihwDu0oFpty%2Fimage.png?alt=media&amp;token=28c43eba-9da4-404a-80a3-48428af0e76c" alt="" width="280"><figcaption></figcaption></figure>

Details of all the AI components are available on the next pages.


# Q-Remix Chatbot

### AI Chatbot

The AI Chatbot acts as a real-time coding assistant and learning companion, making development smoother and more interactive.

#### Access:

The AI Chatbot can be accessed by clicking the AI icon located in the bottom-right corner of the Q-Remix interface.

#### Key Functionalities:

* **Error Debugging:** Automatically analyzes your code and helps you identify and resolve errors or inconsistencies.
* **Solution Suggestions:** Recommends possible fixes or improvements for the code you are writing.
* **Code Generation:** Offers snippets or full code blocks based on the problem or prompt you provide.
* **Conceptual Explanations:** Explains Solidity concepts in simple terms to aid learning and understanding.

#### Conversational Features:

* **Context Memory:** The chatbot remembers the last 5 to 10 interactions in your session, which allows it to maintain context and provide relevant follow-up responses.
* **Prompt Suggestions:** If users are unsure how to begin, the assistant provides dynamic suggestions tailored to recent interactions or existing code.

#### Use Case:

Whether you're troubleshooting a contract or learning the basics of Solidity, the AI Chatbot can serve as both a knowledgeable coding partner and a personal tutor.

> *Use the chatbot as a coding partner or a personal tutor to understand or fix your Solidity code faster.*

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FqEMDb85fZx8FS7i1jWpc%2Fimage.png?alt=media&amp;token=d262143e-a63c-49d0-bae7-f8f45914e6b0" alt="" width="438"><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FCKkHNXsZYTAmEgoZWGjB%2FScreenshot%202025-04-16%20190921.png?alt=media&amp;token=a09df41e-5120-4678-a8d5-edfae3125105" alt=""><figcaption></figcaption></figure>

Other than just generating the code, the AI chatbot also provides a crisp description of it’s response to help user understand better.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FJvUvcCUKQopIRPgQ1qTK%2FScreenshot%202025-04-16%20191016.png?alt=media&amp;token=e087010b-81da-491e-a08d-11c74b052df2" alt=""><figcaption></figcaption></figure>


# AI Code Generation

This functionality allows users to quickly generate code snippets or full contracts by providing a simple natural language prompt.

#### How to Use:

* Press **Ctrl + I** on Windows/Linux or **Command + I** on macOS.
* An input pop-up box will appear, asking you to enter your prompt. For example, you can type:\
  `"Create an ERC20 token contract"`
* Based on your prompt, the AI engine will:
  * Parse your intent.
  * Generate a valid Solidity contract or code snippet.
  * Display the result directly within the Q-Remix code editor.
* Caution:
  * The prompt needs to be well structured and as detailed as possible for an accurate generation of code

#### Interactions:

* After code generation, a small window will display the suggested code.
* Two options will be presented:
  * **Cancel:** Closes the pop-up without accepting the suggestion.
  * **Get Suggestion:** Confirms the prompt and generates the code.

Additionally, two icons will appear with the generated code:

* A **checkmark** to accept and integrate the code into your editor.
* A **cross** to discard the generated code.

#### Use Case:

Perfect for quickly scaffolding components of a smart contract, like token standards (ERC20, ERC721), DAO mechanics, or custom functions, especially when you want to avoid boilerplate or remember specific syntax.

> You can modify the prompt to regenerate different variations of the code if needed.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FYRDWpszIqovvni3zbK3r%2FScreenshot%202025-05-07%20120656.png?alt=media&amp;token=7f653eb9-c771-4eda-8860-ca53f874ebed" alt=""><figcaption></figcaption></figure>

There are two options: **Cancel** and **Get Suggestion**. If you click on **Cancel** , the popup will close. When you click on **Get Suggestion**, it will generate a suggestion

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FHG57GK6VGx5r0HPhAhRd%2FScreenshot%202025-04-16%20190528.png?alt=media&amp;token=e082e40b-113c-4661-ad7b-6c4bcfb6e824" alt=""><figcaption></figcaption></figure>

When you send your prompt for fetching suggestion, it shall display the corresponding response in the following format embedded in the current file itself, highlighted for the user to understand that this code snippet was generated as a suggestion from our AI model.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FYklNngaWXDYA05byOGF2%2FScreenshot%202025-04-16%20190549.png?alt=media&amp;token=669055cd-4c48-4bc5-b4a8-deba10c1ba54" alt=""><figcaption></figcaption></figure>

Alongwith the code snippet we get options to accept and reject the changes suggested by AI, after acceptance it gets embedded as a part of the editor otherwise it is totally removed leaving the screen clean for the user to write a contract.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FFyu1MzfEX9WNlK77gAm2%2FScreenshot%202025-04-16%20190604.png?alt=media&amp;token=410eed8e-2a00-4795-94fe-98e7b49a7cc7" alt=""><figcaption></figcaption></figure>

After acceptance of the changes the extra highlightings get removed and the file would look like the following example:

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Ff2j8yngQiVXSaiBX0c8M%2FScreenshot%202025-04-16%20190625.png?alt=media&amp;token=3ae68bf0-c5e2-4242-b2d7-475311cbe6c3" alt=""><figcaption></figcaption></figure>


# Multi AI Models switch

Q-Remix now features the ability to **switch between multiple AI models** for enhanced flexibility and control over your smart contract development. This feature allows you to choose from various powerful AI models, each offering different strengths, to tailor your code generation experience.

### Supported AI Models

Currently, the following AI models are supported for switching:

* **LLaMA 3 - 8B**
* **LLaMA 3 - 70B**
* **Mistral 8x7B**
* **Gemma 7B**

Each model varies in terms of speed, quality, and computational requirements. Select the one that best fits your needs for generating code, depending on the complexity and size of your prompt.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FJHdMZRHYdR5d7m0hbm7U%2Fimage.png?alt=media&amp;token=0224e90e-2144-4a85-a365-4e66e88c9a8c" alt=""><figcaption></figcaption></figure>

### How to Use the AI Model Dropdown

#### 1. **Access the AI Model Dropdown**

The **AI model dropdown menu** is located **above the code editor interface**, allowing you to easily select from the available AI models.

#### 2. **Switch Between Models**

Click on the dropdown menu and choose the model you’d like to use for code generation. Each model is designed to handle different code complexity levels and use cases, ensuring the most accurate and efficient code output based on your needs.

### How It Works

Once you select the desired AI model from the dropdown, it will remain active for subsequent code generation prompts. The AI will use this model to interpret and generate code based on your request.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F6f46mS4WkXViWqH3InbZ%2Fimage.png?alt=media&amp;token=b4616ec0-873e-42dc-8d0d-57bd98ee10a7" alt=""><figcaption></figcaption></figure>

### Component Design for Multi-AI Models

This feature has been implemented as a **separate component** that exclusively handles the switching of multiple AI models. This ensures a modular approach where:

* The user can easily **select and switch** between AI models for each code generation session.
* The component is designed to provide an **intuitive user experience** with a simple, accessible dropdown menu for seamless integration into the Q-Remix interface.

### Key Benefits

* **Flexibility**: Choose from a variety of AI models, each optimized for different types of code generation.
* **Control**: Select the AI model best suited for the complexity and style of your smart contract code generation.
* **Seamless Integration**: The AI model switching is integrated directly into the **code editor interface**, allowing for quick changes without disrupting your workflow.

This **multiple AI model switching feature** allows you to get the best results for your code generation needs by tailoring the AI's behavior to your specific requirements.


# AI Project Generation

Project generation is the most powerful AI capability in Q-Remix. It allows users to create fully functional decentralized applications (D-Apps) or blockchain-based projects from scratch, all based on a single comprehensive prompt.

#### Access:

* Click the AI icon located in the bottom-right corner of the interface.
* Choose the option **"Generate a Project"** from the menu or from suggested prompts.

#### Project Input Workflow:

A new window will appear, prompting you to input specific details about the project you want to generate. You can enter the following information:

* **Project Type:** For example, marketplace, DAO (Decentralized Autonomous Organization), DeFi (Decentralized Finance) protocol, or others.
* **Token Requirements:** Specify the kind of tokens involved, such as utility tokens, governance tokens, or NFTs.
* **Governance Structure:** Define how decisions will be made — whether through voting, multi-signature wallets, or centralized authority.
* **Custom Logic:** Describe any unique or specific business logic your project requires (e.g., staking mechanism, rewards distribution, auction logic).

#### Output:

Based on your provided prompt, the AI will perform the following actions:

* Generate the appropriate folder structure for the project.
* Create necessary files including smart contracts, configuration files, and sample frontend/backends if needed.
* Populate those files with intelligently generated code.
* Display a live **preview or demo** of the generated project setup.
* Offer a **"Save to Workspace"** button.

#### Saving the Project:

When the "Save to Workspace" button is clicked:

* A new folder will be created in your file explorer.
* All relevant project files will be saved within this folder.
* The project will be ready for immediate use, customization, or deployment.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FHaXEkn7gW8schFQPio1p%2Fimage.png?alt=media&amp;token=20da38e0-5c5d-4a7f-bce3-68055b04239e" alt="" width="284"><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fj9luVsWOBUcPHQa1rbYC%2FScreenshot%202025-04-16%20191208.png?alt=media&amp;token=f57e225c-9815-4392-90b9-df18eadfad5f" alt=""><figcaption></figcaption></figure>

If the prompt " **Generate a project is detected or from the suggestions create a project"** is selected a new window opens asking for the details of the project.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FUJVwKmnQFP6SGTB5vMo1%2Fimage.png?alt=media&amp;token=5b33045c-cd6b-4605-be67-8ca81b6dfea5" alt=""><figcaption></figcaption></figure>

You can see below a sample prompt given to the the project generator as:

> *“Generate a complete DApp project based on Solidity smart contracts.*
>
> *Theme: **Decentralized Voting System***
>
> *Requirements:*
>
> * *Users can register as voters.*
> * *Admin can create elections and add candidates.*
> * *Voters can cast one vote per election.*
> * *Smart contract should prevent double voting.*
> * *Results can be viewed publicly.*
> * *Include smart contract, sample frontend code (HTML/JS or React), and deployment instructions using Hardhat or Remix.”*

In response, it shows the detailed project structure that shall suit the prompt’s usecase and gives an option to the user itself to save this project to the current workspace.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FMwXhbv1QBK54IjOB5ZY5%2Fimage.png?alt=media&amp;token=8ab66211-d44e-4c08-8d5b-7401822d6f23" alt=""><figcaption></figcaption></figure>

Now, as the user confirms to save the project and approves of the structure, it gets saved as you can see in the left sidebar in the current workspace.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FmKhd5axXsSWrIbtwAhtV%2Fimage.png?alt=media&amp;token=04a172bc-2a54-44fc-9c64-b4e22df9c475" alt=""><figcaption></figcaption></figure>

As you can see in the project structure in detail gets added with the subfolders and files:

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FUOFJW9Iyo7ftKICUuX9U%2Fimage.png?alt=media&amp;token=93e704af-ef1c-491d-ace0-7670905c9f38" alt=""><figcaption></figcaption></figure>

On clicking Save to Workspace button a new folder would be created that will have the desired project.

Each of the files added in the particular project is also embedded with the initial code logic that might help the user successfully setup the entire project.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F0n1FblnKlS8YynYlFFbK%2Fimage.png?alt=media&amp;token=190516e6-1522-4b9d-8bd4-a29666e15d20" alt=""><figcaption></figcaption></figure>


# Debugger

The **Debugger** in Q-Remix allows users to inspect and troubleshoot the execution of smart contracts by stepping through transactions, reviewing their state, and understanding how the contract behaves at each step. This tool is designed to provide developers with an intuitive way to debug their code and observe the live state of contracts during transaction execution.

### **How to Use the Debugger**

You can start a debugging session by following either of these two methods:

1. **From the Terminal Panel:**
   * After a successful or failed transaction is logged, click the **debug button** to activate the debugger.
   * The Debugger will be opened in the Side Panel with the corresponding transaction focused.
2. **From the Plugin Manager:**
   * Activate the Debugger from the **Plugin Manager** and then click the **bug icon** in the side panel.
   * Enter the transaction address and ensure the source code is available in the editor.
   * Click **Start Debugging** to begin the session.

Once activated, the Debugger will highlight the relevant code in the **Editor**, and you can navigate through the transaction’s execution step by step. If you wish to stop debugging, simply click the **Stop Debugging** button.

### **Debugger UI Panels and Features**

The following panels and features are available during a debugging session:

#### **1. Navigation Controls**

* **Slider**: Navigate through each opcode in the transaction to observe state changes.
* **Step Back**: Move to the previous opcode without entering functions.
* **Step Over**: Advance to the next opcode without entering a function.
* **Step Into**: Step into a function call to debug inside.
* **Jump to Breakpoint**: Move to the previous or next breakpoint in the code.
* **Jump Out**: Exit the current function call and move to the calling function.

#### **2. Debugger Panels**

* **Function Stack**: Lists the functions being executed in the current transaction.
* **Solidity Locals**: Displays the local variables within the current function.
* **Solidity State**: Shows the state variables of the contract.
* **Opcodes**: Displays the opcode currently being executed.
* **Step Details**: Gives additional information about the opcode step.
* **Stack**: Visualizes the Ethereum Virtual Machine (EVM) stack.
* **Memory**: Displays memory usage and the values in memory.
* **Storage**: Displays persistent storage changes.
* **Call Stack**: Shows the call stack used during computations.
* **Call Data**: Contains the function parameters passed during execution.
* **Return Value**: Displays the returned value from the function.
* **Full Storage Changes**: Reflects all persistent storage changes after a transaction.
* **Breakpoints**: Allows users to place breakpoints in the code to pause execution at specific points.

#### **3. Granular Debugging Information**

The **Debugger** provides granular information, making it an excellent teaching tool. Users can view detailed transaction execution steps, including opcode execution, memory reads, and writes, as well as the changes to storage and the EVM stack.

### **Boilerplate UI for Debugger (Non-Functional)**

The following is the **boilerplate UI** for the Debugger, which needs integration with other components for full functionality:

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Fv3enot5MdTHALi8h0Gjm%2FScreenshot%202025-04-16%20185545.png?alt=media&amp;token=25246396-383e-4caa-80b5-3e2c7be2efba" alt="" width="200"><figcaption></figcaption></figure>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F37ntEkZ0kDYDKYQKS49u%2Fimage.png?alt=media&amp;token=d0eac108-6055-402b-b30f-5d12e6e71a93" alt="" width="200"><figcaption></figcaption></figure>

#### **Features Pending Integration:**

* **Transaction Data**: Actual transaction hashes and contract execution data need to be hooked into the UI to show step-wise execution.
* **Debugger Panels**: Panels like **Call Stack**, **Solidity Locals**, **Memory**, and others need to be populated with actual data from the debugger.
* **Navigation and State Updates**: Step buttons need to reflect the current state of the debugger as it steps through the transaction.
* **Breakpoints and Debugger Controls**: Breakpoint functionality needs to be integrated for pausing and continuing the transaction at specific points in the code.

This UI provides the basic structure, but further integration with the backend components and real-time data flow will be necessary for full functionality.


# Creating and Deploying a Contract

In the File Explorer, create a new file by clicking on the new file icon, and name it.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2Feu0fg9bVtNTUODgG5VYc%2FScreenshot%202025-05-07%20134030.png?alt=media&amp;token=007fb04c-e43b-47ee-958e-c2f73a1c7f8a" alt=""><figcaption><p>New file</p></figcaption></figure>

Write the sample code&#x20;

**Compile the contract:**

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FFQHy1GzMy0CbHcZs7boZ%2FScreenshot%202025-05-07%20134739.png?alt=media&amp;token=cadd922c-c0ce-4a28-a133-c212e610bfe6" alt=""><figcaption></figcaption></figure>

The Deployment Module in Q-Remix IDE enables developers to **deploy**, **interact**, and **manage smart contracts** efficiently, both locally and on-chain. This module is crucial for testing contract behavior and pushing production-ready contracts to the blockchain.

You can access this module by clicking the **deploy icon on the far-left sidebar**.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FgV5o2Xt5mBLbT2WdA61x%2Fimage.png?alt=media&amp;token=65791e34-a5cf-48da-adc1-74d146ab9c27" alt=""><figcaption></figcaption></figure>

### Deploy & Run Interface Overview

There are three main sections in the ***deploy & run*** section&#x20;

1. **Environment**
2. **Account**
3. **Contract**

> Make sure MetaMask is unlocked and the correct network is selected before proceeding.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F1wWVb8i7FdT7OgzghTvz%2Fimage.png?alt=media&amp;token=409114db-1c15-4cf6-b896-353eb1586ed2" alt=""><figcaption></figcaption></figure>

For now Q-Remix IDE supports the first two options

1. Q-Remix VM: Uses Hardhat to generate 10 test addresses with 10,000 ETHs in each address. The user can switch the addresses anytime and test or deploy with them. The states of each of the contracts remain the same even after refreshing the entire page. This ensures that no progress made is lost during the session. However, if the session is closed all the accounts are reset to have the original 10,000 ETHs.
2. Injected Provider MetaMask: This connects the wallet metamask with the remix IDE allowing teh contracts to be deployed either Mainnet or in the Testnet.<br>

   <figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FBhVphHEb7dlBGTbTERFC%2Fimage.png?alt=media&amp;token=140e45a1-6d37-4586-ad31-c0cf0e266bd5" alt=""><figcaption></figcaption></figure>

After giving your MetaMask password, the selected address or account will be reflected in the Account section of the Deploy & Run&#x20;

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FMBvHl1zJJo9pAyY1YUDT%2Fimage.png?alt=media&amp;token=e063f58f-55c4-46e8-9c4e-d8b224e92882" alt=""><figcaption></figcaption></figure>

##

You can choose any available account for deploying or interacting with contracts.<br>

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FGdOrr9FjjwIQhrP4vTlh%2Fimage.png?alt=media&amp;token=c04a5f65-6c3f-4489-82ad-cdd93317b123" alt=""><figcaption></figcaption></figure>

For deploying the selected contract one can use any of the accounts. In the above example one contract has been deployed using the first account.

> Always **review your code** and **verify constructor arguments** before deploying on a live network.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FLgOkcejlJdz4kersHlIW%2Fimage.png?alt=media&amp;token=5ee1506a-f834-4106-b3dc-5e999a6d898e" alt=""><figcaption></figcaption></figure>

One must review the code or understand the code before completely deploying it on the chain.

Once the contracts has been selected, clicking on the deploy button would deploy the contract on the said chain or network. The details of the deployment including the contract address would be shown on the terminal&#x20;

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FDDTMtNbNyT0X7itvJza3%2Fimage.png?alt=media&amp;token=08d7600d-1f38-4d80-8d66-4a416de4e9fe" alt=""><figcaption></figcaption></figure>


# Importing and Loading Source Files in Solidity

* **Importing Folders**:
  * Using the same "Import" option, select "Upload Folder."
  * Choose a folder containing Solidity files (e.g., OpenZeppelin contracts).
  * The folder will be added as a collapsible directory in the file explorer, with all its files accessible.

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FN0ySPWPNnHHp0V08hpGM%2FScreenshot%202025-05-07%20140215.png?alt=media&amp;token=46b1faef-4221-462e-b8dc-0fee6e403e8b" alt=""><figcaption></figcaption></figure>

this feature helps to import github repos:

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FeSF5c6Ma1OiKEHlU6jLv%2FScreenshot%202025-05-07%20140237.png?alt=media&amp;token=c20ed310-b5a8-49d2-942e-4d3712adb498" alt=""><figcaption></figcaption></figure>

QRemix introduces a flexible **Code Viewer** feature that enhances developer productivity by allowing seamless integration with external smart contract repositories — particularly from GitHub.

This feature is especially useful for developers looking to reference, learn from, or extend widely used contract libraries. Whether you're experimenting with OpenZeppelin standards or diving into the Uniswap v4 ecosystem, QRemix allows easy access through a structured import system.

**How to Import a GitHub Repository**

To import a repository:

1. Click the **Import GitHub Repository** option (available in the sidebar).
2. Choose one of the following:
   * **Preset Libraries**:
     * **OpenZeppelin**
     * **Uniswap v4**
   * **Custom URL**:
     * Provide the public GitHub URL of the smart contract repository.
     * Private repositories are currently *not* supported.

Once imported:

* A folder named **`library/`** will be created in your workspace.
* Inside it, a subfolder matching the name of the imported library will appear (e.g., `uniswapv4/`).

**What Gets Imported?**

* All `.sol` (Solidity) files and related resources are fetched.
* The folder structure of the original GitHub repository is preserved.
* You can browse, view, and reference the imported contracts directly within the Code Viewer.

**Notes & Limitations**

* Duplicate imports are restricted. You must delete an existing library folder before re-importing the same repository.
* Repositories must be public; importing from private repositories will fail.
* Multiple repositories can be imported, as long as they are unique.

**Example**

After importing **Uniswap v4**, your workspace will look like this:

```
markdownCopyEditlibrary/
└── uniswapv4/
    ├── core/
    ├── periphery/
    └── contracts/
```

All Solidity contracts within the `uniswapv4` repo become instantly viewable and accessible through the Code Viewer panel.

This is a new feature mainly for the smart contract developers to use. it comes with two different approaches.  On clicking the link option (number 6 in the above picture), the following screen pops up

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FbQMneynrZdgWUiMiIy4N%2Fimage.png?alt=media&amp;token=d3b37eaf-d748-443b-ab45-de7c197f2274" alt="" width="276"><figcaption><p>Import Github Repository</p></figcaption></figure>

The first option is select a library which allows the user to select between two predetermined libraries mostly used for creating smart contracts, these libraries are **openzepellin and uniswapv4**.&#x20;

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FaUcwXPfRK0NDtUYNiVl8%2Fimage.png?alt=media&amp;token=a237ab30-7311-493f-b0fd-783d6ff48438" alt=""><figcaption></figcaption></figure>

The **GitHub Import** feature is tailored for smart contract developers, especially those who work with popular libraries like **OpenZeppelin** or **Uniswap**.

#### Steps:

1. Click the **Import GitHub Repository** option
2. Choose one of the following:
   * **Preset Libraries**: Choose between:
     * OpenZeppelin
     * Uniswap v4
   * **Custom URL**: Enter the public URL of a GitHub repo
     * Private repos are not supported
3. Once imported:
   * A new folder named `library/` will be created
   * Inside it, the selected repo will be added as a subfolder (e.g., `uniswapv4/`)

#### Notes:

* The import process supports `.sol` and other relevant files
* **Duplicate imports are not allowed**
  * You must delete a previously imported repo before re-importing it

If another project needs to be called, the user can select **Custom url** option. On selecting custom URL the user would be asked to give the link to that repository. The repository must be public in nature otherwise the import would fail.

After giving the URL or selecting any option between openzepellin contracts and uniswapv4, a new folder would be created called library having a folder with the same name as the one getting imported

In this example I imported uniswapv4 using the above option. This is the result

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F5j6NUs2cvGPAhU9RD6xL%2Fimage.png?alt=media&amp;token=d597fbd5-d460-48bc-84e6-21bb062e946d" alt=""><figcaption><p>Import Repo result</p></figcaption></figure>

As you can see all the folders and files which contain smart contracts or any file with .sol extension gets imported. This process can be repeated as many times needed but same repo cant be imported twice until and unless the previous one is deleted.


# Testing by Example

## Testing Smart Contracts in Q-Remix

Q-Remix supports writing and running Solidity unit tests directly within your workspace using a Remix-compatible test runner. This guide walks you through the basics of writing smart contract tests, setting up your test environment, and using advanced features like multiple accounts and error handling.

### File Structure

All test files should end with `_test.sol` and reside in the same directory or a dedicated `tests/` folder. For example:

contracts/\
│\
├── MyContract.sol\
├── MyContract\_test.sol

### Writing Your First Test

#### Contract: `SimpleStorage.sol`

```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract SimpleStorage {
    uint public storedData = 42;

    function set(uint x) public {
        storedData = x;
    }

    function get() public view returns (uint) {
        return storedData;
    }
}
```

\
Test: SimpleStorage\_test.sol

```
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import "remix_tests.sol"; // Remix test framework
import "./SimpleStorage.sol";

contract SimpleStorageTest {
    SimpleStorage store;

    function beforeEach() public {
        store = new SimpleStorage();
    }

    function checkInitialValue() public {
        Assert.equal(store.get(), 42, "Initial value should be 42");
    }

    function checkUpdatedValue() public {
        store.set(100);
        Assert.equal(store.get(), 100, "Value should update to 100");
    }
}
```

### Handling Reverts and Errors

Use `try-catch` blocks to assert that a transaction should revert with a specific reason.

```solidity
function testShouldRevert() public {
    try someContract.doRestrictedAction() {
        Assert.ok(false, "Expected revert but call succeeded");
    } catch Error(string memory reason) {
        Assert.equal(reason, "Action not allowed", "Unexpected revert reason");
    }
}
```

### Common Assertions

| Function                         | Description                   |
| -------------------------------- | ----------------------------- |
| `Assert.equal(a, b, msg)`        | Check if `a == b`             |
| `Assert.notEqual(a, b, msg)`     | Check if `a != b`             |
| `Assert.ok(condition, msg)`      | Check if `condition == true`  |
| `Assert.isFalse(condition, msg)` | Check if `condition == false` |

### Tips

* Always use `beforeEach()` or `beforeAll()` to set up fresh instances.
* Use `#sender:` annotations for testing with different accounts.
* Prefer testing both **success** and **failure** paths for better coverage.
* Keep test names descriptive: `shouldFailIf`, `shouldRevertWhen`, `returnsExpectedResult`, etc.

### Advanced Topics

* Testing imported contracts from GitHub (e.g., OpenZeppelin)
* Mocking and faking behavior
* Custom event assertions (via logs)

> 📎 For event testing and full debugging, check the Q-Remix logs and console panel.


# Q-Remix as Code Viewer

Q-Remix introduces a flexible **Code Viewer** feature that enhances developer productivity by allowing seamless integration with external smart contract repositories — particularly from GitHub.

This feature is especially useful for developers looking to reference, learn from, or extend widely used contract libraries. Whether you're experimenting with OpenZeppelin standards or diving into the Uniswap v4 ecosystem, QRemix allows easy access through a structured import system.

**How to Import a GitHub Repository**

To import a repository:

1. Click the **Import GitHub Repository** option (available in the sidebar).
2. Choose one of the following:
   * **Preset Libraries**:
     * **OpenZeppelin**
     * **Uniswap v4**
   * **Custom URL**:
     * Provide the public GitHub URL of the smart contract repository.
     * Private repositories are currently *not* supported.

Once imported:

* A folder named **`library/`** will be created in your workspace.
* Inside it, a subfolder matching the name of the imported library will appear (e.g., `uniswapv4/`).

**What Gets Imported?**

* All `.sol` (Solidity) files and related resources are fetched.
* The folder structure of the original GitHub repository is preserved.
* You can browse, view, and reference the imported contracts directly within the Code Viewer.

**Notes & Limitations**

* Duplicate imports are restricted. You must delete an existing library folder before re-importing the same repository.
* Repositories must be public; importing from private repositories will fail.
* Multiple repositories can be imported, as long as they are unique.

**Example**

After importing **Uniswap v4**, your workspace will look like this:

```
markdownCopyEditlibrary/
└── uniswapv4/
    ├── core/
    ├── periphery/
    └── contracts/
```

All Solidity contracts within the `uniswapv4` repo become instantly viewable and accessible through the Code Viewer panel.

This is a new feature mainly for the smart contract developers to use. it comes with two different approaches.  On clicking the link option (number 6 in the above picture), the following screen pops up

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FbQMneynrZdgWUiMiIy4N%2Fimage.png?alt=media&amp;token=d3b37eaf-d748-443b-ab45-de7c197f2274" alt="" width="276"><figcaption><p>Import Github Repository</p></figcaption></figure>

The first option is select a library which allows the user to select between two predetermined libraries mostly used for creating smart contracts, these libraries are **openzepellin and uniswapv4**.&#x20;

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2FaUcwXPfRK0NDtUYNiVl8%2Fimage.png?alt=media&amp;token=a237ab30-7311-493f-b0fd-783d6ff48438" alt=""><figcaption></figcaption></figure>

The **GitHub Import** feature is tailored for smart contract developers, especially those who work with popular libraries like **OpenZeppelin** or **Uniswap**.

#### Steps:

1. Click the **Import GitHub Repository** option
2. Choose one of the following:
   * **Preset Libraries**: Choose between:
     * OpenZeppelin
     * Uniswap v4
   * **Custom URL**: Enter the public URL of a GitHub repo
     * Private repos are not supported
3. Once imported:
   * A new folder named `library/` will be created
   * Inside it, the selected repo will be added as a subfolder (e.g., `uniswapv4/`)

#### Notes:

* The import process supports `.sol` and other relevant files
* **Duplicate imports are not allowed**
  * You must delete a previously imported repo before re-importing it

If another project needs to be called, the user can select **Custom url** option. On selecting custom URL the user would be asked to give the link to that repository. The repository must be public in nature otherwise the import would fail.

After giving the URL or selecting any option between openzepellin contracts and uniswapv4, a new folder would be created called library having a folder with the same name as the one getting imported

In this example I imported uniswapv4 using the above option. This is the result

<figure><img src="https://3633094706-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fj7rwyc4EeGqNoC2Ji4bS%2Fuploads%2F5j6NUs2cvGPAhU9RD6xL%2Fimage.png?alt=media&amp;token=d597fbd5-d460-48bc-84e6-21bb062e946d" alt=""><figcaption><p>Import Repo result</p></figcaption></figure>

As you can see all the folders and files which contain smart contracts or any file with .sol extension gets imported. This process can be repeated as many times needed but same repo cant be imported twice until and unless the previous one is deleted.


# Code Contribution Guide

Q-Remix is an open source tool. Please help us improve it by:

* Opening issues in our [GitHub repo](https://github.com/codebyMoh/q-remix-ide).
* Writing some code and making a pulling request.

The Q-Remix application is built with Typescript and NextJS.

To learn more, please visit our [GitHub page](https://github.com/codebyMoh/q-remix-ide).


