CoinVoyage for Framer

import { addPropertyControls, ControlType, RenderTarget } from "framer"
import type { CSSProperties } from "react"

type Props = {
  widget: "swap" | "pay"
  apiKey: string
  orderId: string
  buttonText?: string
  optionsJson?: string
  debugMode?: boolean
  paymentMethod?: "" | "CARD" | "WALLET" | "DEPOSIT_ADDRESS"
  closeOnSuccess?: boolean
  resetOnSuccess?: boolean
  mode: "auto" | "light" | "dark"
  walletConnectProjectId: string
  paymentConfig: string
  accent?: string
  accentHover?: string
  accentText?: string
  background?: string
  surface?: string
  text?: string
  radius?: string
  fontFamily?: string
  themeJson?: string
  style?: CSSProperties
}

/** @framerSupportedLayoutWidth any @framerSupportedLayoutHeight any */
export default function CoinVoyage(props: Props) {
  if (RenderTarget.current() === RenderTarget.canvas) {
    return (
      <div style={{ ...props.style, minHeight: 80, display: "grid", placeItems: "center" }}>
        CoinVoyage {props.widget === "pay" ? "PayKit" : "SwapKit"} ? available on the published site
      </div>
    )
  }
  let payment: Record<string, unknown>
  let theme: Record<string, unknown>
  let options: Record<string, unknown> | undefined
  try {
    if (props.widget === "pay" && props.optionsJson?.trim()) {
      options = JSON.parse(props.optionsJson)
      if (!options || typeof options !== "object" || Array.isArray(options)) throw new Error("Invalid provider options")
    }
    theme = props.themeJson?.trim() ? JSON.parse(props.themeJson) : {}
    if (!theme || typeof theme !== "object" || Array.isArray(theme)) throw new Error("Invalid theme")
    payment = props.orderId
      ? { orderId: props.orderId }
      : props.paymentConfig
        ? { deposit: JSON.parse(props.paymentConfig) }
        : {}
  } catch {
    return <div role="alert">Invalid CoinVoyage deposit, theme or provider options JSON.</div>
  }
  const appearance = Object.fromEntries(
    [
      "accent",
      "accentHover",
      "accentText",
      "background",
      "surface",
      "text",
      "radius",
      ...(props.widget === "swap" ? ["fontFamily"] : []),
    ]
      .map((key) => [key, props[key as keyof Props]])
      .filter(([, value]) => typeof value === "string" && value.trim() !== "")
  )
  const config = {
    appearance,
    ...(props.widget === "pay" ? { customTheme: theme } : { theme }),
    widget: props.widget,
    apiKey: props.apiKey,
    environment: "production",
    mode: props.mode,
    ...(props.walletConnectProjectId ? { walletConnectProjectId: props.walletConnectProjectId } : {}),
    ...(props.widget === "pay"
      ? {
          ...payment,
          buttonText: props.buttonText,
          options,
          debugMode: props.debugMode,
          ...(props.paymentMethod ? { paymentMethod: props.paymentMethod } : {}),
          closeOnSuccess: props.closeOnSuccess,
          resetOnSuccess: props.resetOnSuccess,
        }
      : {}),
  }
  return <div style={props.style} data-coinvoyage={JSON.stringify(config)} />
}

addPropertyControls(CoinVoyage, {
  widget: { type: ControlType.Enum, options: ["swap", "pay"], defaultValue: "swap" },
  apiKey: { type: ControlType.String, title: "Public API key" },
  buttonText: { type: ControlType.String, title: "Button text", defaultValue: "Pay" },
  optionsJson: {
    type: ControlType.String,
    title: "Provider options",
    displayTextArea: true,
    description: 'PayKit options JSON, for example {"language":"de-DE","hideTooltips":true}.',
    hidden: (props) => props.widget !== "pay",
  },
  debugMode: {
    type: ControlType.Boolean,
    title: "Debug mode",
    defaultValue: false,
    hidden: (props) => props.widget !== "pay",
  },
  paymentMethod: {
    type: ControlType.Enum,
    title: "Payment method",
    options: ["", "CARD", "WALLET", "DEPOSIT_ADDRESS"],
    optionTitles: ["Default", "Pay with card", "Wallet", "Deposit address"],
    defaultValue: "",
    hidden: (props) => props.widget !== "pay",
  },
  closeOnSuccess: {
    type: ControlType.Boolean,
    title: "Close on success",
    defaultValue: false,
    hidden: (props) => props.widget !== "pay",
  },
  resetOnSuccess: {
    type: ControlType.Boolean,
    title: "Reset on success",
    defaultValue: false,
    hidden: (props) => props.widget !== "pay",
  },
  orderId: { type: ControlType.String, title: "Existing order" },
  paymentConfig: { type: ControlType.String, title: "Deposit JSON" },
  mode: { type: ControlType.Enum, options: ["auto", "light", "dark"], defaultValue: "auto" },
  walletConnectProjectId: { type: ControlType.String, title: "WalletConnect ID" },
  accent: { type: ControlType.Color, title: "Accent", optional: true },
  accentHover: { type: ControlType.Color, title: "Accent hover", optional: true },
  accentText: { type: ControlType.Color, title: "Button color", optional: true },
  background: { type: ControlType.Color, title: "Background", optional: true },
  surface: { type: ControlType.Color, title: "Surface", optional: true },
  text: { type: ControlType.Color, title: "Text color", optional: true },
  radius: {
    type: ControlType.String,
    title: "Radius",
    placeholder: "12px",
    description: "PayKit button radius; SwapKit corner radius. Leave blank for the default.",
  },
  fontFamily: {
    type: ControlType.String,
    title: "Font family",
    hidden: (props) => props.widget !== "swap",
    description: "Load custom fonts on your site.",
  },
  themeJson: {
    type: ControlType.String,
    title: "Theme JSON",
    displayTextArea: true,
    description: "Advanced SDK theme properties override the basic controls. Leave blank for defaults.",
  },
})