diff --git a/evm/evm-parity/examples/deploy-verify.mdx b/evm/evm-parity/examples/deploy-verify.mdx index 0ba91dc..83be155 100644 --- a/evm/evm-parity/examples/deploy-verify.mdx +++ b/evm/evm-parity/examples/deploy-verify.mdx @@ -3,10 +3,30 @@ title: 'Deploy and Verify' description: 'Deploying and verifying smart contracts on Sei with viem, ethers, Foundry, and Hardhat' --- +import { SandboxEmbed } from '/snippets/sandbox-embed.jsx'; +import { AddSeiButton } from '/snippets/add-sei-button.jsx'; + Sei is EVM-compatible — standard deployment tooling works without modification. This page covers deploying a contract and verifying its source on the Sei block explorer. For a deeper look at verification options (Remix, Sourcify UI, batch verification), see the [Verify Contracts](/evm/evm-verify-contracts) page. +## Deploy from your browser (Remix) + +No local toolchain required — compile and deploy a contract to Sei testnet straight from the browser. The Remix sandbox below preloads a minimal `Counter.sol`. + +First, add Sei testnet to your wallet: + + + +Then in Remix: compile under the **Solidity Compiler** tab, open **Deploy & Run**, set **Environment** to **Injected Provider — MetaMask** (or **External HTTP Provider** pointed at `https://evm-rpc-testnet.sei-apis.com`), and click **Deploy**. Sei has instant finality, so the deployment confirms in well under a second. + + + ## Deploying with viem or ethers diff --git a/evm/evm-parity/examples/erc20.mdx b/evm/evm-parity/examples/erc20.mdx index 051b205..7b8542b 100644 --- a/evm/evm-parity/examples/erc20.mdx +++ b/evm/evm-parity/examples/erc20.mdx @@ -3,10 +3,30 @@ title: 'ERC-20 Interaction' description: 'Reading and writing ERC-20 tokens on Sei with viem and ethers' --- +import { SandboxEmbed } from '/snippets/sandbox-embed.jsx'; +import { AddSeiButton } from '/snippets/add-sei-button.jsx'; + # ERC-20 Interaction Standard ERC-20 contracts work on Sei without modification. This page covers the common read and write operations using viem and ethers. +## Try it: deploy an ERC-20 + +Compile and deploy a real ERC-20 to Sei testnet from the browser — the Remix sandbox preloads an OpenZeppelin-based `DemoToken`. Then point the read/write patterns below at your deployed address. + +First, add Sei testnet to your wallet: + + + +In Remix, compile under **Solidity Compiler**, then **Deploy & Run** with **Environment** set to **Injected Provider — MetaMask** (or **External HTTP Provider** at `https://evm-rpc-testnet.sei-apis.com`). + + + ## Setup diff --git a/evm/evm-parity/examples/erc721.mdx b/evm/evm-parity/examples/erc721.mdx index d1ed3b1..8425f4d 100644 --- a/evm/evm-parity/examples/erc721.mdx +++ b/evm/evm-parity/examples/erc721.mdx @@ -3,10 +3,30 @@ title: 'ERC-721 Interaction' description: 'Reading and writing ERC-721 NFTs on Sei with viem and ethers' --- +import { SandboxEmbed } from '/snippets/sandbox-embed.jsx'; +import { AddSeiButton } from '/snippets/add-sei-button.jsx'; + # ERC-721 Interaction Standard ERC-721 contracts work on Sei without modification. This page covers reading token ownership, transferring NFTs, and managing approvals. +## Try it: deploy an ERC-721 + +Compile and deploy a real ERC-721 to Sei testnet from the browser — the Remix sandbox preloads an OpenZeppelin-based `DemoNFT` with a public `mint()`. Then point the patterns below at your deployed address. + +First, add Sei testnet to your wallet: + + + +In Remix, compile under **Solidity Compiler**, then **Deploy & Run** with **Environment** set to **Injected Provider — MetaMask** (or **External HTTP Provider** at `https://evm-rpc-testnet.sei-apis.com`). + + + ## Setup diff --git a/evm/evm-parity/examples/ethers-quickstart.mdx b/evm/evm-parity/examples/ethers-quickstart.mdx index dac0ff4..cb568d5 100644 --- a/evm/evm-parity/examples/ethers-quickstart.mdx +++ b/evm/evm-parity/examples/ethers-quickstart.mdx @@ -3,6 +3,9 @@ title: 'ethers v6 Quickstart' description: 'Using ethers v6 with Sei in a Node.js script or browser context' --- +import { RunSnippet } from '/snippets/run-snippet.jsx'; +import { SandboxEmbed } from '/snippets/sandbox-embed.jsx'; + # ethers v6 Quickstart This example covers ethers v6 with Sei. The patterns apply whether you are writing a Node.js script, a CLI tool, or a browser app. @@ -55,6 +58,31 @@ Nonce: 7 The exact numbers are illustrative — your block number and balance will differ. `getBlockNumber()` and `getTransactionCount()` return a `number`, while `getBalance()` returns a `bigint` in wei (format it with `ethers.formatEther()`). +## Try It Live + +Run these read-only calls against Sei mainnet right now — no install, no private key. They're plain JSON-RPC, the same reads the script above performs. + + + + + +## Edit and run + +Edit and re-run the full ethers code from this page live in the browser — a real ethers v6 `JsonRpcProvider` reading Sei testnet: + + + ## Browser Provider In a browser context, connect to the user's injected wallet: diff --git a/evm/evm-parity/examples/viem-quickstart.mdx b/evm/evm-parity/examples/viem-quickstart.mdx index 7786a07..66a6e2e 100644 --- a/evm/evm-parity/examples/viem-quickstart.mdx +++ b/evm/evm-parity/examples/viem-quickstart.mdx @@ -3,6 +3,9 @@ title: 'viem Quickstart' description: 'Using viem with Sei in a Node.js script, CLI tool, or backend service' --- +import { RunSnippet } from '/snippets/run-snippet.jsx'; +import { SandboxEmbed } from '/snippets/sandbox-embed.jsx'; + # viem Quickstart This example shows how to use viem with Sei outside of a React context — in a Node.js script, CLI tool, or backend service. For React apps, see [wagmi](https://wagmi.sh) and the [frontend guide](/evm/building-a-frontend). @@ -72,6 +75,33 @@ Nonce: 7 The exact numbers are illustrative — your block number and balance will differ. Note the trailing `n`: `getBlockNumber()` and `getBalance()` return `bigint`, while `getTransactionCount()` returns a `number`. +## Try It Live + +Run these read-only calls against Sei mainnet right now — no install, no private key. They're the same reads the script above performs, issued straight from your browser. + + + + + + + +## Edit and run + +The buttons above issue raw JSON-RPC. To run the full viem code from this page — imports, a public client, several reads — edit and re-run it live in the sandbox below. No install, no wallet, no key: + + + ## Wallet Client A wallet client handles signing and broadcasting transactions. diff --git a/snippets/run-snippet.jsx b/snippets/run-snippet.jsx new file mode 100644 index 0000000..6d6685f --- /dev/null +++ b/snippets/run-snippet.jsx @@ -0,0 +1,210 @@ +// RunSnippet — a click-to-load "Try it" button for read-only EVM JSON-RPC calls. +// +// Sei's public EVM RPC endpoints return `access-control-allow-origin: *`, so a +// read-only call can be issued straight from the browser with a plain `fetch` +// POST — no SDK, no proxy. Mintlify's React runtime cannot import npm packages, +// so this component uses only browser globals (fetch, BigInt). +// +// Theming note: Mintlify applies `dark:text-*` utilities (class strategy) but +// NOT `dark:bg-*` / `dark:border-*` on custom-snippet container
s — verified +// empirically. So surfaces and hairlines use theme-agnostic translucent inline +// styles (rgba grey), which render correctly over both light and dark backdrops, +// while text keeps the working `dark:text-*` classes. +// +// Usage in MDX: +// import { RunSnippet } from '/snippets/run-snippet.jsx'; +// +// +// +export const RunSnippet = (props) => { + const { + method = 'eth_blockNumber', + params = [], + network = 'testnet', + endpoint, + label, + title, + description, + decode = 'auto' + } = props || {}; + + // --- config (kept inside the component: module-level decls crash in Mintlify) --- + const ENDPOINTS = { + testnet: 'https://evm-rpc-testnet.sei-apis.com', + mainnet: 'https://evm-rpc.sei-apis.com' + }; + const rpcUrl = endpoint || ENDPOINTS[network] || ENDPOINTS.testnet; + const networkLabel = network === 'mainnet' ? 'pacific-1 · mainnet' : network === 'testnet' ? 'atlantic-2 · testnet' : network; + + const requestBody = { jsonrpc: '2.0', id: 1, method, params }; + const requestJson = JSON.stringify(requestBody, null, 2); + + // --- state --- + const [phase, setPhase] = useState('idle'); // idle | loading | success | error + const [result, setResult] = useState(null); + const [errorMsg, setErrorMsg] = useState(null); + const [elapsed, setElapsed] = useState(null); + const [copied, setCopied] = useState(false); + const [btnHover, setBtnHover] = useState(false); + + // --- helpers (nested) --- + const groupThousands = (s) => s.replace(/\B(?=(\d{3})+(?!\d))/g, ','); + + const hexToDecimal = (value) => { + if (typeof value !== 'string' || !/^0x[0-9a-fA-F]+$/.test(value)) return null; + try { + return groupThousands(BigInt(value).toString(10)); + } catch (e) { + return null; + } + }; + + const run = async () => { + setPhase('loading'); + setErrorMsg(null); + setResult(null); + setElapsed(null); + const startedAt = typeof performance !== 'undefined' ? performance.now() : null; + try { + const response = await fetch(rpcUrl, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(requestBody) + }); + const data = await response.json(); + if (startedAt != null && typeof performance !== 'undefined') { + setElapsed(Math.round(performance.now() - startedAt)); + } + if (data && data.error) { + setErrorMsg(data.error.message || 'RPC returned an error'); + setPhase('error'); + return; + } + setResult(data ? data.result : undefined); + setPhase('success'); + } catch (err) { + setErrorMsg(err && err.message ? err.message : 'Request failed'); + setPhase('error'); + } + }; + + const resultString = result === undefined ? 'undefined' : JSON.stringify(result, null, 2); + const decoded = decode !== 'off' && typeof result === 'string' ? hexToDecimal(result) : null; + + const copyResult = () => { + if (typeof navigator !== 'undefined' && navigator.clipboard) { + navigator.clipboard.writeText(resultString); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } + }; + + // --- icons (nested) --- + const SpinnerIcon = () => ( + + + + + ); + + const PlayIcon = () => ( + + + + ); + + // --- theme-agnostic surfaces (see theming note above) --- + const HAIRLINE = 'rgba(128, 128, 128, 0.25)'; + const surfaceStyle = { backgroundColor: 'rgba(128, 128, 128, 0.08)' }; + const monoStyle = { fontFamily: 'var(--sei-font-mono)' }; + const codeStyle = { backgroundColor: 'rgba(128, 128, 128, 0.05)', fontFamily: 'var(--sei-font-mono)' }; + + const cardClass = 'not-prose w-full rounded-lg border overflow-hidden my-4'; + const headerClass = 'flex items-center justify-between gap-3 px-4 py-2.5 border-b'; + const labelClass = 'text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-500'; + const preClass = 'm-0 px-4 py-3 text-sm overflow-x-auto text-neutral-700 dark:text-neutral-300'; + + const buttonStyle = { + backgroundColor: btnHover ? 'var(--sei-maroon-200)' : 'var(--sei-maroon-100)', + color: '#ffffff', + fontFamily: 'var(--sei-font-mono)', + textTransform: 'uppercase', + letterSpacing: '0.04em', + fontSize: '10px', + opacity: phase === 'loading' ? 0.7 : 1, + cursor: phase === 'loading' ? 'default' : 'pointer' + }; + + return ( +
+
+
+ + {title || method} + + {networkLabel} +
+ +
+ + {description ? ( +
{description}
+ ) : null} + +
+ Request +
+ 
+				{requestJson}
+
+ + {phase === 'success' ? ( +
+
+ Response{elapsed != null ? ` · ${elapsed} ms` : ''} + +
+ 
+						{resultString}
+
+ {decoded ? ( +
+ = {decoded} (decimal) +
+ ) : null} +
+ ) : null} + + {phase === 'error' ? ( +
+
+ Error +
+ 
+						{errorMsg}
+
+
+ ) : null} +
+ ); +}; diff --git a/snippets/sandbox-embed.jsx b/snippets/sandbox-embed.jsx new file mode 100644 index 0000000..f9028ff --- /dev/null +++ b/snippets/sandbox-embed.jsx @@ -0,0 +1,157 @@ +// SandboxEmbed — a click-to-load iframe wrapper for external runnable-code sandboxes. +// +// Mintlify's React runtime cannot import npm (so no @stackblitz/sdk, no Sandpack +// library) and the hosted site cannot set response headers (so no cross-origin- +// isolated WebContainers). This component therefore embeds only SELF-SUFFICIENT +// pure-iframe URLs: +// • CodeSandbox /embed — Tier 2: editable/runnable viem/ethers TypeScript +// • Remix IDE — Tier 3: Solidity compile + deploy to Sei testnet +// +// The