Components / Content

CodeBlock

Code sample with a copy button. window draws the always-dark editor chrome used on marketing pages; plain sits inside a Panel and follows the theme.

Extracted fromMarketing siteExplorer

Import

tsx

import { CodeBlock, CopyButton } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { CodeBlock, CopyButton } from "@somnia-chain/ui/next"

Examples

Window

terminal

bash

$ npm install @somnia-chain/ui
$ npx somnia login
$ npx somnia venue create --name "Acme Exchange"

examples/code-block/window.tsxShow code

tsx

import { CodeBlock } from "@somnia-chain/ui"

export default function CodeBlockWindow() {
  return (
    <CodeBlock
      filename="terminal"
      language="bash"
      code={`$ npm install @somnia-chain/ui\n$ npx somnia login\n$ npx somnia venue create --name "Acme Exchange"`}
    />
  )
}

Plain, in a panel

Example

Subscribe to an event

solidity

function onEvent(address emitter, bytes32[] calldata topics, bytes calldata data) external {
    require(msg.sender == address(REACTIVITY));
    emit Settled(emitter, topics[1]);
}

examples/code-block/plain.tsxShow code

tsx

import { CodeBlock, Panel, PanelHeader } from "@somnia-chain/ui"

export default function CodeBlockPlain() {
  return (
    <Panel>
      <PanelHeader eyebrow="Example" title="Subscribe to an event" />
      <CodeBlock
        variant="plain"
        language="solidity"
        code={`function onEvent(address emitter, bytes32[] calldata topics, bytes calldata data) external {\n    require(msg.sender == address(REACTIVITY));\n    emit Settled(emitter, topics[1]);\n}`}
      />
    </Panel>
  )
}

CopyButton on its own

With several on a page, what gives each its own name: Copy commit SHA, then Copied commit SHA.

Run

Build 1842

Commit: 4f3a9c1
Contract: 0x9b1c…8b9c

examples/code-block/copy-button.tsxShow code

tsx

import { CopyButton, KeyValues, Panel, PanelHeader, short } from "@somnia-chain/ui"

const COMMIT = "4f3a9c1e7b2d8a6f0e5c3b1a9d7e5f3c1b9a7d5e"
const CONTRACT = "0x9b1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c"

export default function CopyButtonExample() {
  return (
    <Panel>
      <PanelHeader eyebrow="Run" title="Build 1842" />
      <KeyValues
        cols={1}
        items={[
          [
            "Commit",
            <span key="commit" className="inline-flex items-center gap-2">
              {COMMIT.slice(0, 7)}
              <CopyButton text={COMMIT} what="commit SHA" />
            </span>,
          ],
          [
            "Contract",
            <span key="contract" className="inline-flex items-center gap-2">
              {short(CONTRACT)}
              <CopyButton text={CONTRACT} what="contract address" />
            </span>,
          ],
        ]}
      />
    </Panel>
  )
}

Props

CodeBlock

Prop	Type	Default	Description
code	string	—	Source text.
language	string	—	Label in the corner.
filename	string	—	Title in the window chrome.
variant	"window" \| "plain"	"window"	Chrome.
copy	boolean	true	Copy button.

CopyButton

Prop	Type	Default	Description
text	string	—	What is copied.
label	string	"Copy"	Visible text.
what	string	—	What it copies, e.g. "commit SHA". The accessible name is the visible text and then what: "Copy commit SHA", then "Copied commit SHA".
...props	<button> attributes	—	Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <button>. An onClick runs before the copy, and calling preventDefault() in it cancels the copy.