Skip to content

Add framework integrations for Astro, Nuxt, Remix, and SvelteKit#11

Merged
FractionEstate merged 4 commits intomainfrom
claude/continue-development-EEQKI
Jan 24, 2026
Merged

Add framework integrations for Astro, Nuxt, Remix, and SvelteKit#11
FractionEstate merged 4 commits intomainfrom
claude/continue-development-EEQKI

Conversation

@FractionEstate
Copy link
Copy Markdown
Collaborator

Summary

This PR introduces comprehensive framework integrations for the Cardano DevKit, enabling seamless Cardano dApp development across four major web frameworks: Astro, Nuxt 3, Remix, and SvelteKit.

Key Changes

New Packages

  • @cardano-devkit/astro - Astro integration with island-compatible components, view transitions support, and client/server utilities for static site generation
  • @cardano-devkit/nuxt - Nuxt 3 module with auto-imported composables, SSR support, DevTools integration, and server API routes
  • @cardano-devkit/remix - Remix adapter providing loader/action helpers, optimistic UI utilities, React hooks, and pre-built resource routes
  • @cardano-devkit/sveltekit - SvelteKit adapter with reactive stores, form actions, and SSR support

Implementation Details

Astro Integration:

  • Global Cardano configuration injection via window.__CARDANO_CONFIG__
  • View transition helpers to preserve wallet state across navigation
  • Server-side blockchain data fetching for static generation
  • Client-side utilities: initCardano(), connectWallet(), getWalletBalance()

Nuxt Module:

  • Auto-imported composables: useCardano() and useWallet()
  • Reactive state management with Vue 3 composition API
  • Server API routes for balance and UTXO queries
  • DevTools integration with custom Cardano tab
  • Automatic wallet detection and persistence

Remix Adapter:

  • createCardanoLoader() and createCardanoAction() helpers for type-safe server functions
  • Pre-built loaders: balanceLoader and utxosLoader
  • React hooks: useCardano(), useWallet(), useOptimisticTransaction()
  • Form data utilities: parseAdaAmount(), validateAddressField()
  • Optimistic UI support for better UX during transactions

SvelteKit Adapter:

  • Reactive Svelte stores for Cardano state management
  • Computed stores: balanceAda, truncatedAddress, isReady
  • Form action helpers for server-side transaction handling
  • SSR-compatible initialization

Common Features Across All Integrations

  • Network selection (Mainnet, Preprod, Preview)
  • Blockfrost API integration via Lucid Evolution
  • Wallet detection and connection management
  • Balance and UTXO queries
  • Address formatting utilities
  • TypeScript support with full type definitions
  • Node.js 20.9.0+ requirement

Configuration

Each integration follows framework conventions:

  • Astro: astro.config.mjs integration
  • Nuxt: nuxt.config.ts module configuration
  • Remix: Environment variables and context-based setup
  • SvelteKit: Store-based reactive configuration

All packages are versioned at 0.1.0 and depend on workspace packages @cardano-devkit/core and @cardano-devkit/wallet, plus @lucid-evolution/lucid ^0.4.29.

…g framework

Major additions:
- Smart contract templates: Flash Loan and Staking Rewards Pool (18/18 complete)
- CIP implementations: CIP-45 (Extended Token Metadata), CIP-88 (Token Policy
  Registration), CIP-95 (Governance Extension), CIP-100 (Governance Metadata)
- Framework adapters: Nuxt 3 module, SvelteKit adapter, Remix adapter, Astro integration
- Contract testing framework: property-based testing, fuzzing, and time-travel utilities

https://claude.ai/code/session_017rJrzaQ2sVoNEGtEuQ5V2P
…nd devnet controls

The @cardano-devkit/vscode extension provides:
- Syntax highlighting for Aiken (.ak) and Plutus (.hs, .plutus)
- IntelliSense completions for all DevKit APIs
- 20+ code snippets for common patterns (send ADA, mint NFT, escrow, etc.)
- Hover validation for Cardano addresses, tx hashes, and policy IDs
- Devnet management commands (start/stop/restart/status)
- Status bar with network indicator and devnet status
- Tree views for UTxOs, transactions, and devnet info
- Scaffold commands for contracts and dApps
- Wallet commands (top up, balance, connect)

https://claude.ai/code/session_017rJrzaQ2sVoNEGtEuQ5V2P
@cardano-devkit/hardware-wallet provides Phase 1 (read-only) hardware wallet support:
- Ledger wallet integration with WebHID/WebUSB transport
- Trezor wallet integration with TrezorConnect
- Address derivation (BIP44/CIP-1852 compliant)
- Public key retrieval
- Transaction preview on device display
- Support for base, enterprise, reward, and pointer addresses
- Comprehensive error handling (connection, transport, user cancellation)
- Type-safe derivation path utilities

Phase 2 will add transaction signing support.

https://claude.ai/code/session_017rJrzaQ2sVoNEGtEuQ5V2P
…cking

- Add Monaco-based Playground component for in-browser code editing
- Create Tutorial component with step-by-step progress, hints, and solutions
- Implement 3 comprehensive tutorials:
  - First Transaction: Build and submit your first Cardano transaction
  - Mint NFT: Create NFTs with CIP-25 metadata
  - Smart Contract Basics: EUTXO model and escrow contracts
- Add Learning Center page with tutorial cards and difficulty levels
- Progress persistence via localStorage for returning users
- Add dependencies: monaco-editor, framer-motion, lucide-react, zustand

https://claude.ai/code/session_017rJrzaQ2sVoNEGtEuQ5V2P
@FractionEstate FractionEstate merged commit c860314 into main Jan 24, 2026
3 of 9 checks passed
@FractionEstate FractionEstate deleted the claude/continue-development-EEQKI branch January 24, 2026 03:10
}

// Adjust URL for testnet
if (network !== "Mainnet" && explorerUrl.includes("cardanoscan.io")) {

Check failure

Code scanning / CodeQL

Incomplete URL substring sanitization High

'
cardanoscan.io
' can be anywhere in the URL, and arbitrary hosts may come before or after it.

Copilot Autofix

AI 2 months ago

In general, to fix incomplete URL substring sanitization, you should parse the URL and compare its host against a known, explicit value (or a small whitelist), rather than using includes on the whole URL string. This ensures that only the intended domain (and optionally well‑defined subdomains) matches, and prevents attackers from embedding the trusted domain string in other parts of the URL.

Here, the best fix without changing intended functionality is:

  • Parse explorerUrl as a URL.
  • Check that its hostname is exactly cardanoscan.io before applying the network‑specific replacement.
  • If parsing fails or the hostname is not cardanoscan.io, skip the replacement and leave url as originally built.

Concretely, in packages/vscode-extension/src/extension.ts:

  1. Add a small helper (or inline logic) that tries to construct a URL object from explorerUrl. Because explorerUrl may be configured without a scheme (e.g. cardanoscan.io), normalize it by prefixing https:// if no scheme is present before parsing.
  2. Replace the line if (network !== "Mainnet" && explorerUrl.includes("cardanoscan.io")) { with logic that:
    • Parses explorerUrl (after normalizing the scheme if necessary).
    • Checks parsed.hostname === "cardanoscan.io".
  3. Only then perform the url = url.replace("cardanoscan.io", ...) adjustment.

This keeps all existing behaviors for the default https://cardanoscan.io value and any custom Cardanoscan URL whose host is exactly cardanoscan.io, while preventing arbitrary URLs that merely contain that substring from being treated as Cardanoscan URLs.

Suggested changeset 1
packages/vscode-extension/src/extension.ts

Autofix patch

Autofix patch
Run the following command in your local git repository to apply this patch
cat << 'EOF' | git apply
diff --git a/packages/vscode-extension/src/extension.ts b/packages/vscode-extension/src/extension.ts
--- a/packages/vscode-extension/src/extension.ts
+++ b/packages/vscode-extension/src/extension.ts
@@ -112,8 +112,21 @@
       }
 
       // Adjust URL for testnet
-      if (network !== "Mainnet" && explorerUrl.includes("cardanoscan.io")) {
-        url = url.replace("cardanoscan.io", `${network.toLowerCase()}.cardanoscan.io`);
+      if (network !== "Mainnet") {
+        try {
+          // Ensure we have a scheme so that URL parsing works even if the user omits it
+          const normalizedExplorerUrl =
+            explorerUrl.startsWith("http://") || explorerUrl.startsWith("https://")
+              ? explorerUrl
+              : `https://${explorerUrl}`;
+          const parsed = new URL(normalizedExplorerUrl);
+
+          if (parsed.hostname === "cardanoscan.io") {
+            url = url.replace("cardanoscan.io", `${network.toLowerCase()}.cardanoscan.io`);
+          }
+        } catch {
+          // If explorerUrl is not a valid URL, skip hostname-based adjustment
+        }
       }
 
       await vscode.env.openExternal(vscode.Uri.parse(url));
EOF
@@ -112,8 +112,21 @@
}

// Adjust URL for testnet
if (network !== "Mainnet" && explorerUrl.includes("cardanoscan.io")) {
url = url.replace("cardanoscan.io", `${network.toLowerCase()}.cardanoscan.io`);
if (network !== "Mainnet") {
try {
// Ensure we have a scheme so that URL parsing works even if the user omits it
const normalizedExplorerUrl =
explorerUrl.startsWith("http://") || explorerUrl.startsWith("https://")
? explorerUrl
: `https://${explorerUrl}`;
const parsed = new URL(normalizedExplorerUrl);

if (parsed.hostname === "cardanoscan.io") {
url = url.replace("cardanoscan.io", `${network.toLowerCase()}.cardanoscan.io`);
}
} catch {
// If explorerUrl is not a valid URL, skip hostname-based adjustment
}
}

await vscode.env.openExternal(vscode.Uri.parse(url));
Copilot is powered by AI and may make mistakes. Always verify output.
await fs.promises.access(dtsFullPath);

// Read the file and try to find the symbol
const content = await fs.promises.readFile(dtsFullPath, "utf-8");

Check failure

Code scanning / CodeQL

Potential file system race condition High

The file may have changed since it
was checked
.
// Email validation
if (metadata.email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(metadata.email)) {

Check failure

Code scanning / CodeQL

Polynomial regular expression used on uncontrolled data High

This
regular expression
that depends on
library input
may run slow on strings starting with '!@!.' and with many repetitions of '!.'.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants