Atoms

Code Snippet

A read-only syntax-highlighted code viewer powered by Shiki with CSS variable theming.

FormanceCustom component built for Formance products.

import { CodeSnippet } from '@/components/ui/code-snippet';

export function Example() {
  return (
    <CodeSnippet
      code="console.log('hello')"
      language="typescript"
    />
  );
}

Installation#

npx shadcn@latest add https://design-system-three-mauve.vercel.app/r/code-snippet.json

Install the following dependencies:

npm install shiki class-variance-authority lucide-react

Copy and paste the following code into your project.

Add the `--shiki-*` CSS variables to your global CSS.

The component uses CSS custom properties for syntax colors. Add these to your :root and .dark selectors:

:root {
  --shiki-foreground: var(--foreground);
  --shiki-background: transparent;
  --shiki-token-constant: var(--emerald-600);
  --shiki-token-string: var(--lilac-700);
  --shiki-token-comment: var(--emerald-500);
  --shiki-token-keyword: var(--mint-800);
  --shiki-token-parameter: var(--emerald-600);
  --shiki-token-function: var(--mint-800);
  --shiki-token-string-expression: var(--lilac-700);
  --shiki-token-punctuation: var(--foreground);
  --shiki-token-link: var(--emerald-600);
  --shiki-token-monetary: var(--gold-600);
}

.dark {
  --shiki-foreground: var(--emerald-200);
  --shiki-background: var(--emerald-800);
  --shiki-token-constant: var(--mint-700);
  --shiki-token-string: var(--lilac-500);
  --shiki-token-comment: var(--emerald-400);
  --shiki-token-keyword: var(--mint-600);
  --shiki-token-parameter: var(--mint-700);
  --shiki-token-function: var(--mint-600);
  --shiki-token-string-expression: var(--lilac-500);
  --shiki-token-punctuation: var(--emerald-300);
  --shiki-token-link: var(--mint-700);
  --shiki-token-monetary: var(--gold-300);
}

Update the import paths to match your project setup.

Usage#

import { CodeSnippet } from '@/components/code/code-snippet'

<CodeSnippet code={`const x = 42;`} language="typescript" />

Examples#

Numscript#

send [USD/2 10000] (
  source = @orders:1234
  destination = {
    15% to {
      20% to @platform:commission:sales_tax
      remaining to @platform:commission:revenue
    }
    10% to {
      // user gets 10% cashback up to $5 for participating merchants
      max [USD/2 500] to @users:1234:cashback
      remaining to @merchants:6789
    }
    remaining to @merchants:6789
  }
)

Dark Theme#

import { Client } from '@formance/formance-sdk';

const client = new Client({
  serverURL: 'https://sandbox.formance.cloud',
});

const ledger = await client.ledger.v2.createTransaction({
  ledger: 'default',
  postTransaction: {
    postings: [{
      source: 'world',
      destination: 'orders:1234',
      asset: 'USD/2',
      amount: BigInt(1500),
    }],
  },
});

Light Theme#

import { Client } from '@formance/formance-sdk';

const client = new Client({
  serverURL: 'https://sandbox.formance.cloud',
});

const ledger = await client.ledger.v2.createTransaction({
  ledger: 'default',
  postTransaction: {
    postings: [{
      source: 'world',
      destination: 'orders:1234',
      asset: 'USD/2',
      amount: BigInt(1500),
    }],
  },
});

fctl Commands#

fctl stack create <stack-name> --organization <organization-id>

fctl ledger accounts list --ledger <ledger> --organization <organization-id>

fctl wallets credit 10 USD/2 --id <wallet-id> --organization <organization-id>

fctl payments connectors install <connector> config.json --organization <organization-id>

Borderless#

import { Client } from '@formance/formance-sdk';

const client = new Client({
  serverURL: 'https://sandbox.formance.cloud',
});

const ledger = await client.ledger.v2.listLedgers();

import { Client } from '@formance/formance-sdk';

const client = new Client({
  serverURL: 'https://sandbox.formance.cloud',
});

const ledger = await client.ledger.v2.listLedgers();

Single Line#

curl -X POST https://sandbox.formance.cloud/api/ledger/v2/default/transactions

Command Menu

Code Snippet

Install the following dependencies:

Copy and paste the following code into your project.

Add the --shiki-* CSS variables to your global CSS.

Update the import paths to match your project setup.

Add the `--shiki-*` CSS variables to your global CSS.