diff --git a/vocs/docs/components/Tab.tsx b/vocs/docs/components/Tab.tsx
deleted file mode 100644
index e3a4a08..0000000
--- a/vocs/docs/components/Tab.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react'
-
-export default function Tab() {
- return (
-
- cargo
- {' '}
- {'add alloy'}
-
- )
-}
\ No newline at end of file
diff --git a/vocs/docs/pages/index.mdx b/vocs/docs/pages/index.mdx
index 9659405..0a493e5 100644
--- a/vocs/docs/pages/index.mdx
+++ b/vocs/docs/pages/index.mdx
@@ -1,22 +1,180 @@
---
+title: alloy ยท Rust Ethereum
+content:
+ width: 100%
layout: landing
+logo: false
---
import { HomePage, Sponsors } from "vocs/components";
-import Tab from "../components/Tab";
-
-
-
- Connect Applications to Blockchains
-
-
-
-
- Get started
-
-
- GitHub
-
-
-
-
+
+
+
+
+
+
+
+
+
Connect applications to blockchains using performant, intuitive, and battle-tested APIs.
+
+ Get started
+ GitHub
+
+
+
+ ```bash [cargo]
+ cargo add alloy
+ ```
+
+
+
+
+
+
+
+
+# Common Actions
+
+:::code-group
+
+```rust [read_contract.rs]
+//! Demonstrates reading a contract by fetching the WETH balance of an address.
+use alloy::{primitives::address, providers::ProviderBuilder, sol};
+use eyre::Result;
+
+// Generate the contract bindings for the ERC20 interface.
+sol! {
+ // The `rpc` attribute enables contract interaction via the provider.
+ #[sol(rpc)]
+ contract ERC20 {
+ function balanceOf(address owner) public view returns (uint256);
+ }
+}
+
+#[tokio::main]
+async fn main() -> Result<()> {
+ // Initialize the provider.
+ let provider = ProviderBuilder::new().connect("https://eth.llamarpc.com").await?;
+
+ // Instantiate the contract instance.
+ let weth = address!("0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2");
+ let erc20 = ERC20::new(weth, provider);
+
+ // Fetch the balance of WETH for a given address.
+ let owner = address!("0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045");
+ let balance = erc20.balanceOf(owner).call().await?;
+
+ println!("WETH Balance of {owner}: {balance}");
+
+ Ok(())
+}
+```
+
+```rust [write_contract.rs]
+//! Demonstrates writing to a contract by depositing ETH to the WETH contract.
+use alloy::{
+ primitives::{
+ address,
+ utils::{format_ether, Unit},
+ U256,
+ },
+ providers::ProviderBuilder,
+ signers::local::PrivateKeySigner,
+ sol,
+};
+use eyre::Result;
+
+// Generate bindings for the WETH9 contract.
+// WETH9:
+sol! {
+ #[sol(rpc)]
+ contract WETH9 {
+ function deposit() public payable;
+ function balanceOf(address) public view returns (uint256);
+ }
+}
+
+#[tokio::main]
+async fn main() -> Result<()> {
+ // Initialize a signer with a private key.
+ let signer: PrivateKeySigner =
+ "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80".parse()?;
+
+ // Instantiate a provider with the signer.
+ let provider = ProviderBuilder::new()
+ // Signs transactions before dispatching them.
+ .wallet(signer)
+ // Forking mainnet using anvil to avoid spending real ETH.
+ .on_anvil_with_config(|a| a.fork("https://eth.llamarpc.com"));
+
+ // Setup WETH contract instance.
+ let weth = address!("0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2");
+ let weth = WETH9::new(weth, provider);
+
+ // Prepare deposit transaction.
+ let amt = Unit::ETHER.wei().saturating_mul(U256::from(100));
+ let deposit = weth.deposit().value(amt);
+
+ // Send the transaction and wait for it to be included.
+ let deposit_tx = deposit.send().await?;
+ let receipt = deposit_tx.get_receipt().await?;
+
+ // Check balance by verifying the deposit.
+ let balance = weth.balanceOf(receipt.from).call().await?;
+ println!("Verified balance of {:.3} WETH for {}", format_ether(balance), receipt.from);
+ Ok(())
+}
+```
+
+```rust [send_transaction.rs]
+//! Send a transaction transferring ETH.
+use alloy::{
+ network::TransactionBuilder,
+ primitives::{
+ address,
+ utils::{format_ether, Unit},
+ U256,
+ },
+ providers::{Provider, ProviderBuilder},
+ rpc::types::TransactionRequest,
+ signers::local::PrivateKeySigner,
+};
+use eyre::Result;
+
+#[tokio::main]
+async fn main() -> Result<()> {
+ // Initialize a signer with a private key.
+ let signer: PrivateKeySigner =
+ "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80".parse()?;
+
+ // Instantiate a provider with the signer.
+ // This example uses a local Anvil node.
+ let provider = ProviderBuilder::new().wallet(signer).connect("http://localhost:8545").await?;
+
+ // Prepare a transaction request to send 100 ETH to Alice.
+ let alice = address!("0x70997970C51812dc3A010C7d01b50e0d17dc79C8");
+ let value = Unit::ETHER.wei().saturating_mul(U256::from(100));
+ let tx = TransactionRequest::default().with_to(alice).with_value(value);
+
+ // Send the transaction and wait for the broadcast.
+ let pending_tx = provider.send_transaction(tx).await?;
+ println!("Pending transaction... {}", pending_tx.tx_hash());
+
+ // Wait for the transaction to be included and get the receipt.
+ let receipt = pending_tx.get_receipt().await?;
+ println!(
+ "Transaction included in block {}",
+ receipt.block_number.expect("Failed to get block number")
+ );
+
+ println!("Transferred {:.5} ETH to {alice}", format_ether(value));
+
+ Ok(())
+}
+```
+
+:::
+
+
+
+
diff --git a/vocs/docs/styles.css b/vocs/docs/styles.css
new file mode 100644
index 0000000..5d934fa
--- /dev/null
+++ b/vocs/docs/styles.css
@@ -0,0 +1,27 @@
+@import "tailwindcss" important;
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+[data-layout="landing"] .vocs_Button_button {
+ border-radius: 4px !important;
+ height: 36px !important;
+ padding: 0 16px !important;
+}
+
+[data-layout="landing"] .vocs_Content {
+ position: inherit;
+}
+
+#home-install .vocs_CodeGroup {
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+}
+
+#home-install .vocs_Tabs_content {
+ flex: 1;
+}
+
+#home-install .vocs_Code {
+ font-size: 18px;
+}
diff --git a/vocs/vocs.config.tsx b/vocs/vocs.config.tsx
index 85d3eff..0fca79e 100644
--- a/vocs/vocs.config.tsx
+++ b/vocs/vocs.config.tsx
@@ -39,5 +39,28 @@ export default defineConfig({
socials: [
{ icon: 'github', link: "https://github.com/alloy-rs/alloy" },
{ icon: 'telegram', link: "https://t.me/ethers_rs" },
+ ],
+ topNav: [
+ {
+ text: 'Docs',
+ link: '/getting-started/quick-start',
+ },
+ {
+ text: 'Examples',
+ link: 'https://github.com/alloy-rs/examples',
+ },
+ {
+ text: '0.14.0',
+ items: [
+ {
+ text: 'Changelog',
+ link: 'https://github.com/alloy-rs/alloy/blob/main/CHANGELOG.md',
+ },
+ {
+ text: 'Contributing',
+ link: 'https://github.com/alloy-rs/alloy/blob/main/CONTRIBUTING.md',
+ },
+ ],
+ },
]
})