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
  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 = {}
  let theme = {}
  try {
    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 or theme 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 } : {}),
  }
  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" },
  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.",
  },
})