Add Scrollycode (#72)

* Update open-in-llm.tsx

* add scrollycode

Author: evanorti

content/docs/tutorial/4-component.mdx

@@ -4,15 +4,19 @@ description: evm-price-oracle component walkthrough
 ---
 import { HoverContainer } from "@/components/hover-container";
 import { Callout } from 'fumadocs-ui/components/callout';
+import { Scrollycoding } from "@/components/scrollycoding";
 import { link } from "@/components/link.tsx";
 
 The core logic of the price oracle in this example is located in the [`/evm-price-oracle/src/lib.rs` file](https://github.com/Lay3rLabs/wavs-foundry-template/tree/main/components/evm-price-oracle/src/lib.rs). Scroll down to follow a walkthrough of the code for the oracle component.
 
-## trigger.rs
+<HoverContainer>
+<Scrollycoding>
 
-The [trigger.rs](https://github.com/Lay3rLabs/wavs-foundry-template/tree/main/components/evm-price-oracle/src/trigger.rs) file handles the decoding of incoming trigger data from the trigger event emitted by the trigger contract. The component uses `decode_event_log_data!()` from the [wavs-wasi-utils crate](https://docs.rs/wavs-wasi-utils/latest/wavs_wasi_utils/) to decode the event log data and prepares it for processing within the WAVS component. Trigger.rs handles both ABI encoded data for trigger and submission data and raw data for local testing. For more information on different trigger types, visit the [Triggers page](../handbook/triggers). To learn more about trigger input handling, visit the [Component page](../handbook/components/component#trigger-inputs).
+## !!steps trigger.rs
 
-```rust trigger.rs
+The [trigger.rs](https://github.com/Lay3rLabs/wavs-foundry-template/tree/main/components/evm-price-oracle/src/trigger.rs) file handles the decoding of incoming trigger data from the trigger event emitted by the trigger contract. The component uses the `decode_event_log_data!()` macro from the [wavs-wasi-utils crate](https://docs.rs/wavs-wasi-utils/latest/wavs_wasi_utils/) to decode the event log data and prepares it for processing within the WAVS component. The `Destination` enum handles both ABI encoded data for trigger and submission data and raw data for local testing. For more information on different trigger types, visit the [Triggers page](../handbook/triggers). To learn more about trigger input handling, visit the [Component page](../handbook/components/component#trigger-inputs).
+
+```rust ! trigger.rs
 use crate::bindings::wavs::worker::layer_types::{
     TriggerData, TriggerDataEvmContractEvent, WasmResponse,
 };
@@ -73,11 +77,12 @@ pub mod solidity {
 
 Visit the [Blockchain interactions page](../handbook/components/blockchain-interactions) for more information on the `sol!` macro and how to use it to generate Rust types from Solidity interfaces.
 
-## Oracle component logic
+## !!steps Oracle component logic
 
 The [`lib.rs`](https://github.com/Lay3rLabs/wavs-foundry-template/tree/main/components/evm-price-oracle/src/lib.rs) file contains the main component logic for the oracle. The first section of the code imports the required modules for requests, serialization, and bindings, defines the component struct, and exports the component for execution within the WAVS runtime.
 
-```rust lib.rs
+```rust ! lib.rs
+// !focus(1:13)
 mod trigger;
 use trigger::{decode_trigger_event, encode_trigger_output, Destination};
 use wavs_wasi_utils::{
@@ -104,13 +109,14 @@ The `run` function:
 3. Fetches current price data from CoinMarketCap
 4. Returns the encoded response based on the destination
 
-```rust lib.rs
-
+```rust ! lib.rs
 struct Component;
 export!(Component with_types_in bindings);
 
+// !focus(1:35)
 impl Guest for Component {
 
+    // !hover run_function
     fn run(action: TriggerAction) -> std::result::Result<Option<WasmResponse>, String> {
         let (trigger_id, req, dest) =
             decode_trigger_event(action.data).map_err(|e| e.to_string())?;
@@ -150,11 +156,12 @@ impl Guest for Component {
 
 Visit the [Component page](../handbook/components/component) for more information on the `run` function and the main requirements for component structure.
 
-## Fetching price data
+## !!steps Fetching price data
 
 The `get_price_feed` function is responsible for fetching price data from CoinMarketCap's API. It takes the cryptocurrency ID passed from the trigger as input and returns a structured `PriceFeedData` containing the symbol, current price in USD, and server timestamp. For more information on making network requests in WAVS components, visit the [Network Requests page](../handbook/components/network-requests).
 
-```rust lib.rs
+```rust ! lib.rs
+// !focus(1:30)
 async fn get_price_feed(id: u64) -> Result<PriceFeedData, String> {
     let url = format!(
         "https://api.coinmarketcap.com/data-api/v3/cryptocurrency/detail?id={}&range=1h",
@@ -184,11 +191,11 @@ async fn get_price_feed(id: u64) -> Result<PriceFeedData, String> {
 }
 ```
 
-## Handling the response
+## !!steps Handling the response
 
 The processed price data is returned as a `WasmResponse` which contains the response payload. The response is formatted differently based on the destination.
 
-```rust lib.rs
+```rust ! lib.rs
 let output = match dest {
     Destination::Ethereum => Some(encode_trigger_output(trigger_id, &res)),
     Destination::CliOutput => Some(WasmResponse { payload: res.into(), ordering: None }),
@@ -200,7 +207,7 @@ Ok(output)
 
 In `trigger.rs`, the `WasmResponse` struct is used to standardize the format of data returned from components. The `payload` field contains the processed data from the component.
 
-```rust trigger.rs
+```rust ! trigger.rs
 pub fn encode_trigger_output(trigger_id: u64, output: impl AsRef<[u8]>) -> WasmResponse {
     WasmResponse {
         payload: solidity::DataWithId {
@@ -217,6 +224,9 @@ For more information on component outputs, visit the [Component page](../handboo
 
 The Service handbook contains more detailed information on each part of developing services and components. Visit the [Service handbook overview](../handbook/overview) to learn more.
 
+</Scrollycoding>
+</HoverContainer>
+
 ## Next steps
 
 Continue to the [next section](./5-build) to learn how to build and test your component.