Components

import { Button, Card, CardContent, CardHeader, CardTitle } from '@openzeppelin/ui-components';

function ContractCard({ name, address }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{name}</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">{address}</p>
        <Button variant="outline" className="mt-4">
          View Contract
        </Button>
      </CardContent>
    </Card>
  );
}

import { useForm } from 'react-hook-form';
import { AddressField, AmountField, Button } from '@openzeppelin/ui-components';

function TransferForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: { to: '', amount: '' },
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <AddressField
        name="to"
        label="Recipient"
        control={control}
        placeholder="0x..."
      />
      <AmountField
        name="amount"
        label="Amount"
        control={control}
        placeholder="0.0"
      />
      <Button type="submit">Transfer</Button>
    </form>
  );
}

import { TransactionForm } from '@openzeppelin/ui-renderer';
import type { RenderFormSchema, TransactionFormCapabilities } from '@openzeppelin/ui-types';

const schema: RenderFormSchema = {
  id: 'approve-form',
  title: 'Approve Spending',
  fields: [
    { id: 'spender', name: 'spender', type: 'address', label: 'Spender' },
    { id: 'amount', name: 'amount', type: 'amount', label: 'Amount' },
  ],
  layout: { columns: 1, spacing: 'normal', labelPosition: 'top' },
  submitButton: { text: 'Approve', loadingText: 'Approving...' },
};

function ApprovePage({ adapter }: { adapter: TransactionFormCapabilities }) {
  return (
    <TransactionForm
      schema={schema}
      adapter={adapter}
      onTransactionSuccess={(result) => console.log('Approved:', result)}
    />
  );
}

import { DynamicFormField } from '@openzeppelin/ui-renderer';

<DynamicFormField
  field={{ id: 'amount', name: 'amount', type: 'amount', label: 'Amount' }}
  control={control}
/>

import { AddressBookWidget } from '@openzeppelin/ui-renderer';
import { createDexieDatabase, ALIAS_SCHEMA, useAddressBookWidgetProps } from '@openzeppelin/ui-storage';
import Dexie from 'dexie';

const db = createDexieDatabase(new Dexie('my-app'), ALIAS_SCHEMA);

function AddressBook({ addressing }) {
  const widgetProps = useAddressBookWidgetProps(db, { networkId: 'ethereum-mainnet' });
  return <AddressBookWidget {...widgetProps} addressing={addressing} />;
}