Customization - Rhinestone

The deposit and withdraw modals accept theme and uiConfig props to control appearance and behavior.

Theme

Pass a theme object to control the modal’s visual style.

<DepositModal
  // ...required props
  theme={{
    mode: "dark",
    radius: "lg",
    ctaColor: "#0066FF",
    ctaHoverColor: "#0052CC",
  }}
/>

Properties

Property	Type	Default	Description
`mode`	`"light"` \| `"dark"`	`"light"`	Color mode
`radius`	`"none"` \| `"sm"` \| `"md"` \| `"lg"` \| `"full"`	`"md"`	Border radius preset
`fontColor`	`string`	—	Primary text color
`iconColor`	`string`	—	Icon color
`ctaColor`	`string`	—	Call-to-action button background
`ctaHoverColor`	`string`	—	CTA button hover background
`borderColor`	`string`	—	Border color
`backgroundColor`	`string`	—	Modal background color

All color values accept any CSS color string (hex, rgb, hsl, etc.). Omitted properties use the design system defaults for the selected mode.

UI configuration

Toggle UI elements, set deposit constraints, and control fee display via uiConfig.

<DepositModal
  // ...required props
  uiConfig={{
    showBackButton: true,
    minDepositUsd: 1,
    maxDepositUsd: 10000,
    feeSponsored: true,
  }}
/>

Properties

Property	Type	Default	Description
`showBackButton`	`boolean`	`true`	Show the back button in the header
`minDepositUsd`	`number`	—	Minimum deposit amount in USD
`maxDepositUsd`	`number`	—	Maximum deposit amount in USD
`feeSponsored`	`boolean`	`false`	When `true`, the network/protocol fee renders struck-through on the review, processing, and result screens, with a tooltip explaining the sponsorship
`feeTooltip`	`string`	—	Custom copy for the fee info tooltip. Defaults to a generic message based on `feeSponsored`.

Deposit history

The header on the modal’s home screen carries a history button that opens the recipient’s past deposits, and it is always shown. Your proxy must forward GET /deposits or the panel opens on an error.