⚡ CardanoVSC 🚀

✨ Features

CardanoVSC is a powerful Visual Studio Code extension that provides seamless support for Haskell and Plutus development. It is designed to enhance developer productivity by offering:

• Advanced syntax highlighting for Haskell and Plutus code.
• Intelligent code completion to speed up development.
• Integration with the Cardano API for real-time blockchain interaction.
• An intuitive "Ctrl + Shift + P >> CardanoAPI" feature allowing developers to quickly access Cardano API options directly from the IDE.

This extension is perfect for developers building on the Cardano blockchain, enabling smooth and efficient smart contract development within the Visual Studio Code ecosystem.

📥 Installation

1. Clone the repository:

   git clone https://github.com/AIQUANT-Tech/CardanoVSC.git
   cd CardanoVSC/cardanovsc/

2. Install dependencies:

   npm install

3. Debug the extension by clicking the VS Code debug icon.

🏗️ Development

✅ Running Tests

Before running the test command, ensure the required test file exists:

Create a folder out/test/ if it does not exist and add the following file sample.hs:

module Sample where

import Data.List

factorial :: Integer -> Integer
factorial 0 = 1
factorial n = n * factorial (n - 1)

main :: IO ()
main = print (factorial 5)

Create a .env file on working directory and put your API key from cardanoscan
CARDANO_API_KEY=your_api_key_here

To run tests:

npm run test

FOLDER STRUCTURE

    📁CardanoVSC       
    └── 📁cardanovsc
        └── .gitignore
        └── 📁.vscode
        └── .vscode-test.mjs
            └── extensions.json
            └── haskell.code-snippets
            └── launch.json
            └── settings.json
            └── tasks.json
        └── .vscodeignore
        └── cabal-configuration.json
        └── cardanovsc-0.0.12.vsix
        └── CHANGELOG.md
        └── 📁docs
            └── api_integration.png
            └── auto_completion.gif
            └── auto_completion.png
            └── cardanovsc_command.gif
            └── cardanovsc_command.png
            └── cardanovsc_create_wallet.gif
            └── cardanovsc_deployment.gif
            └── cardanovsc_node_connection.gif
            └── cardanovsc_restore_webview.png
            └── cardanovsc_sidebar_webview.png
            └── cardanovsc_wellet_webview.png
            └── cardanovsc01_sidebar_webview.png
            └── syntax_highlight.png
        └── eslint.config.mjs
        └── haskell-configuration.json
        └── License
        └── 📁media
            └── icon1.png
            └── icon1.svg
        └── package-lock.json
        └── package.json
        └── README.md
        └── 📁snippets
            └── haskell.json
        └── 📁src
            └── completion.ts
            └── 📁config
                └── cardanoApiIntegration.ts
                └── cardanoNodeIntegration.ts
            └── extension.ts
            └── 📁implementation
                └── deployment.ts
                └── implementation.ts
            └── registerCommand.ts
            └── 📁test
                └── api_integration.test.ts
                └── extension.test.ts
                └── h_completion.test.ts
                └── s_highlight.test.ts
            └── 📁webview_ui
                └── wallet_webview.ts
            └── webviewProvider.ts
        └── 📁syntaxes
            └── alex.tmLanguage.json
            └── C2Hs.json
            └── cabal.tmLanguage.json
            └── happy.tmLanguage.json
            └── haskell.tmLanguage.json
            └── Hsc2Hs.json
            └── literateHaskell.tmLanguage.json
            └── plutus.tmLanguage.json
        └── tsconfig.json
        └── vsc-extension-quickstart.md
    └── 📁DesignDocs
        └── CardanoVSC-Scope_Design_Document.pdf
        └── Postman_CardanoVSC_CardanoscanAPI.json
    └── .gitignore
    └── LICENSE
    └── README.md

🛠️ Usage

cardanovsc extension's sidebar webview

The Webview in CardanoVSC provides a dedicated sidebar interface within Visual Studio Code, offering a centralized hub for blockchain api interactions , development tools.

📜 Commands

CardanoVSC provides several commands to interact with the Cardano blockchain:

• cardanovsc.get_latest_block_details - Get details of the latest block.
• cardanovsc.get_block_details - Fetch details of a specific block.
• cardanovsc.get_address_balance - Retrieve balance for a given address.
• cardanovsc.get_pool_details - Fetch details about a stake pool.
• cardanovsc.get_transaction_details - Retrieve information about a transaction.

To access these commands, open the Command Palette (Ctrl+Shift+P), type CardanoVSC, and select the desired command.

🔗 API Integration

CardanoVSC integrates with Cardano APIs using cardanoscan API keys. CardanoVSC integrates with the Cardano API to provide real-time blockchain interaction directly within the IDE. Developers can fetch blockchain data, such as block details, transaction information, and wallet balances, without leaving Visual Studio Code. The API integration is powered by Cardanoscan API keys, ensuring secure and efficient access to Cardano blockchain data.

🔗 Auto Completion

The Auto Completion feature in CardanoVSC enhances developer productivity by providing intelligent code suggestions as you type. It supports Haskell and Plutus syntax, offering context-aware recommendations for functions, variables, and modules. This feature reduces errors and speeds up coding by predicting and completing code snippets, making it easier to write complex smart contracts and blockchain-related logic.

🔗 syntax highlighting

The Syntax Highlighting feature improves code readability by visually distinguishing different elements of Haskell and Plutus code. Keywords, functions, variables, and operators are color-coded, making it easier to identify and debug code. This feature is particularly useful for developers working on complex smart contracts, as it helps maintain clarity and structure in the codebase.

🔗 Cardano node Connection via BlockFrost

Before using wallet management and smart contract deployment, you need to connect to a Cardano node on the Mainnet, Preprod, or Preview network.

Steps to Connect:

1. Open the CardanoVSC sidebar (click the Cardano icon in the Activity Bar).
2. Click Cardano Node Connection.
3. A prompt will appear to select the network (Mainnet, Preprod, or Preview).
4. Another prompt will appear asking for the BlockFrost API key for the selected network.
5. Enter the API key in the input box and press Enter.
6. The selected network will be reflected on the right side of the status bar, like this:
   🔗 Cardano Node: Preprod (or Mainnet/Preview)
7. After a successful connection, reload the VSCode window.

📜 Deploying a Smart Contract

Steps to Deploy a Plutus Smart Contract:

1. Ensure a Cardano network is configured:

   • If no network is detected, the extension will prompt you to configure one.
   • Follow the on-screen instructions to set up the network.

2. Select a Plutus Smart Contract file:

   • Click on the Deploy Smart Contract option.
   • A file selection dialog will open.
   • Choose a .plutus file containing your contract.
   • example .plutus file content

     {
     "type": "PlutusScriptV2",
     "description": "",
     "cborHex": "49480100002221200101"
      } ```
   

3. Initialize Lucid with network configuration:

   • The extension will retrieve network details from your configuration.
   • Lucid (a JavaScript library for Cardano smart contract interactions) will be initialized.

4. Generate the script address:

   • The extension extracts the CBOR hex from the Plutus script.
   • It then computes the associated script address.

5. Confirm overwriting existing address files:

   • If an address file already exists, the extension prompts you for confirmation before overwriting.

6. Save the generated address:

   • The script address is saved to an .addr file in the same location as the .plutus script.
   • A success message is displayed with the file location and script address .

📌 Additional Features:

• Open Folder: View the location of the saved .addr file.
• Copy Address: Copy the generated script address to the clipboard for easy sharing.

🛠️ Troubleshooting

• No network configured? Follow the prompt to set up a network connection.
• Invalid Plutus script? Ensure the .plutus file contains a valid cborHex field.
• Address file already exists? Choose whether to overwrite the file or cancel the operation.
• Errors during deployment? Check the error messages and logs in the VSCode output panel.

🏦 Wallet Management

CardanoVSC allows you to manage your Cardano wallets directly within VS Code. You can create, restore, and check balances securely while ensuring encrypted storage and password protection.

🆕 Creating a New Wallet

1. Open the CardanoVSC sidebar (click the Cardano icon in the Activity Bar).
2. Click Wallet Management
3. Select your network from the dropdown (Mainnet/Testnet) and also from the status bar [cardano:network-name] button, which displays the selected network.
4. Click Create Wallet and before creating wallet must open any folder otherwise not create wallet.
5. Set a strong password (minimum 12 characters recommended).
6. Securely store your 24-word recovery phrase (displayed during setup).
7. Click "I've Saved My Seed Phrase" to complete the setup.
8. Wallet details are stored in the working directory inside the wallet_details/ folder.

🔄 Restoring an Existing Wallet

1. Open Wallet Management from the sidebar.
2. Select your network from the dropdown (Mainnet/Testnet) and also from the status bar [cardano:network-name] button, which displays the selected network.
3. Click Restore Wallet.
4. Enter your 24-word seed phrase using one of the following methods:
   • Paste the entire phrase (click "Paste Seed Phrase").
     • copy seed phrase in the format -- word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 word11 word12 word13 word14 word15 word16 word17 word18 word19 word20 word21 word22 word23 word24
   • Manually type each word in the numbered fields.
5. Click Restore Walletand before restoring wallet must open any folder otherwise not restoring wallet.
6. Enter your wallet password when prompted.
7. After successful, Wallet details are stored in the working directory inside the wallet_details/ folder.

💰 Checking Your Balance

1. Open Wallet Management.
2. Select the correct network (Mainnet/Testnet).
3. Click Check Balance.
4. promt for asking address of wallet of that network in which you connected (network show at right corner in status bar of vscode)
5. View your balance in the vscode Notification message.

🔒 Wallet Security Features

✅ AES-256 Encryption – Wallets are encrypted before storage.
✅ Secure Storage – Wallets are saved under wallet_details/[network]/[wallet-address].json.

📂 Wallet File Location

Your wallet files are stored in vscode workspace after successful creating or restoring wallet

workspace/
└── wallet_details/
    ├── mainnet/
    │   ├── addr1q9...xyz.json
    │   └── addr1q8...abc.json
    ├── preview/
    │   └── addr_test1...def.json
    └── preprod/
        └── addr_test1...def.json

Each .json file contains:

{
  "address": "addr1...",
  "network": "mainnet",
  "encryptedSeed": "salt:iv:encryptedData",
  "createdAt": "2023-01-01T00:00:00.000Z"
}

⚠️ Important Security Notes

🚨 Never share your recovery phrase – Anyone with these words can access your funds.
🚨 Backup your wallet files – Keep copies of .json files in a secure location.
🚨 Use Testnet for development – Always test with Testnet ADA before using Mainnet.

🛠️ Troubleshooting

If you encounter issues:

• Ensure you're on the correct network (Mainnet/Testnet).
• Double-check that all 24 words are entered correctly when restoring.
• Make sure your workspace folder has write permissions.

🤝 Contributing

Contributions are welcome! Please open an issue or pull request on GitHub.

📜 License

This project is licensed under the MIT License.

📌Scope and Design Documentation

• Scope and Design Document: https://github.com/AIQUANT-Tech/CardanoVSC/blob/main/DesignDocs/CardanoVSC-Scope_Design_Document.pdf
• Figma Design: https://www.figma.com/design/MiVmXAtePUc3UndaGl7eGK