[FIX] - Line numbers in dapps tutorials (#780)

* Update code snippets lines in create-dapp-ethers-js.md for page.js

* Update code snippets lines in create-dapp-viem.md for page.tsx

* Fix snippet reference handling and improve line extraction logic in llms.txt and generate_llms.py

Author: nhussein11

llms.txt

@@ -37339,6 +37339,9 @@ This component handles connecting to the wallet, switching networks if necessary
 To integrate this component to your dApp, you need to overwrite the existing boilerplate in `app/page.js` with the following code:
 
 ```javascript title="app/page.js"
+'use client';
+import { useState } from 'react';
+
 import WalletConnect from './components/WalletConnect';
 export default function Home() {
   const [account, setAccount] = useState(null);
@@ -37438,6 +37441,10 @@ This component reads the `storedNumber` value from the contract and displays it
 To see this change in your dApp, you need to integrate this component into the `app/page.js` file:
 
 ```javascript title="app/page.js"
+'use client';
+import { useState } from 'react';
+
+import WalletConnect from './components/WalletConnect';
 import ReadContract from './components/ReadContract';
 export default function Home() {
   const [account, setAccount] = useState(null);
@@ -38019,6 +38026,8 @@ This component handles connecting to the wallet, switching networks if necessary
 To use this component in your dApp, replace the existing boilerplate in `app/page.tsx` with the following code:
 
 ```typescript title="page.tsx"
+"use client";
+import { useState } from "react";
 import WalletConnect from "./components/WalletConnect";
 export default function Home() {
   const [account, setAccount] = useState<string | null>(null);
@@ -38124,6 +38133,9 @@ This component reads the `storedNumber` value from the contract and displays it
 To reflect this change in your dApp, incorporate this component into the `app/page.tsx` file.
 
 ```typescript title="page.tsx"
+"use client";
+import { useState } from "react";
+import WalletConnect from "./components/WalletConnect";
 import ReadContract from "./components/ReadContract";
 export default function Home() {
   const [account, setAccount] = useState<string | null>(null);
@@ -38672,7 +38684,25 @@ Testing is a critical part of smart contract development. Hardhat makes it easy
 1. Create a folder for testing called `test`. Inside that directory, create a file named `Storage.js` and add the following code:
 
     ```javascript title="Storage.js" 
-    
+    const { expect } = require('chai');
+const { ethers } = require('hardhat');
+
+describe('Storage', function () {
+  let storage;
+  let owner;
+  let addr1;
+
+  beforeEach(async function () {
+    // Get signers
+    [owner, addr1] = await ethers.getSigners();
+
+    // Deploy the Storage contract
+    const Storage = await ethers.getContractFactory('Storage');
+    storage = await Storage.deploy();
+    await storage.waitForDeployment();
+  });
+
+  describe('Basic functionality', function () {
         // Add your logic here
     });
 });

scripts/generate_llms.py

@@ -120,16 +120,22 @@ def fetch_local_snippet(snippet_ref, snippet_directory):
     return snippet_content.strip()
 
 def fetch_remote_snippet(snippet_ref, yaml_data, max_retries=3, backoff_factor=2):
-    # Match URL with optional line range (start:end)
-    match = re.match(r'^(https?://[^:]+)(?::(\d+))?(?::(\d+))?$', snippet_ref)
+    # Match URL with optional line range. Cases:
+    # - http://example.com:1:3 (this means extract lines 1 to 3)
+    # - http://example.com::1 (this means extract until line 1)
+    # - http://example.com (no line range specified, fetch entire content)
+    match = re.match(r'^(https?://[^\s:]+)(?::(\d*))?(?::(\d*))?$', snippet_ref)
 
     if not match:
         print(f"Invalid snippet reference format: {snippet_ref}")
         return f"Invalid snippet reference: {snippet_ref}"
 
     url = match.group(1)
-    line_start = int(match.group(2)) if match.group(2) else None
-    line_end = int(match.group(3)) if match.group(3) else None
+    line_start = match.group(2)
+    line_end = match.group(3)
+
+    line_start = int(line_start) if line_start and line_start.isdigit() else None
+    line_end = int(line_end) if line_end and line_end.isdigit() else None
 
     # Resolve any template placeholders using the yaml_data
     url = resolve_placeholders(url, yaml_data)
@@ -151,9 +157,12 @@ def fetch_remote_snippet(snippet_ref, yaml_data, max_retries=3, backoff_factor=2
             snippet_content = response.text
 
             # Extract specific lines if requested
-            if line_start is not None and line_end is not None:
+            if line_start is not None or line_end is not None:
                 lines = snippet_content.split('\n')
-                snippet_content = '\n'.join(lines[line_start - 1:line_end])
+                # Python slice: start is inclusive, end is exclusive
+                start = (line_start - 1) if line_start else 0
+                end = line_end if line_end else len(lines)
+                snippet_content = '\n'.join(lines[start:end])
 
             return snippet_content.strip()
 

tutorials/smart-contracts/launch-your-first-project/create-dapp-ethers-js.md

@@ -112,7 +112,8 @@ This component handles connecting to the wallet, switching networks if necessary
 To integrate this component to your dApp, you need to overwrite the existing boilerplate in `app/page.js` with the following code:
 
 ```javascript title="app/page.js"
---8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/ethers-dapp/app/page.js:5:5"
+--8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/ethers-dapp/app/page.js::1"
+--8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/ethers-dapp/app/page.js:2:5"
 --8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/ethers-dapp/app/page.js:8:21"
 --8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/ethers-dapp/app/page.js:24:26"
 ```
@@ -140,7 +141,8 @@ This component reads the `storedNumber` value from the contract and displays it
 To see this change in your dApp, you need to integrate this component into the `app/page.js` file:
 
 ```javascript title="app/page.js"
---8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/ethers-dapp/app/page.js:6:6"
+--8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/ethers-dapp/app/page.js::1"
+--8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/ethers-dapp/app/page.js:2:6"
 --8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/ethers-dapp/app/page.js:8:22"
 --8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/ethers-dapp/app/page.js:24:26"
 ```

tutorials/smart-contracts/launch-your-first-project/create-dapp-viem.md

@@ -113,7 +113,8 @@ This component handles connecting to the wallet, switching networks if necessary
 To use this component in your dApp, replace the existing boilerplate in `app/page.tsx` with the following code:
 
 ```typescript title="page.tsx"
---8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/viem-dapp/app/page.tsx:4:4"
+--8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/viem-dapp/app/page.tsx::1"
+--8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/viem-dapp/app/page.tsx:2:4"
 --8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/viem-dapp/app/page.tsx:7:20"
 --8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/viem-dapp/app/page.tsx:23:25"
 ```
@@ -141,7 +142,8 @@ This component reads the `storedNumber` value from the contract and displays it
 To reflect this change in your dApp, incorporate this component into the `app/page.tsx` file.
 
 ```typescript title="page.tsx"
---8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/viem-dapp/app/page.tsx:5:5"
+--8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/viem-dapp/app/page.tsx::1"
+--8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/viem-dapp/app/page.tsx:2:5"
 --8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/viem-dapp/app/page.tsx:7:21"
 --8<-- "https://raw.githubusercontent.com/polkadot-developers/polkavm-storage-contract-dapps/refs/tags/v0.0.2/viem-dapp/app/page.tsx:23:25"
 ```