Create a Mini-app
Schema Reference

Schema Reference

Variables

Variables can be used to inside strings to access values. For example we might want to use a request's response to add to the input.

{{api}} -> the api url provided

{{refs.[REF_NAME]}} -> you can access values of elements that have a ref property. For example if you add ref: "myInput" to an element with type: "input" then you can access the values of the input by chaining properties like {{refs.myInput.value}}. This can be used for requests as well.

{{input}} -> the current value of the input, only defined for elements within creationEntrypoints

{{embed}} -> the embed value that triggered the contentEntrypoints

Properties of the Manifest

type ModManifest = {
  /** A unique string identifying this Miniapp */
  slug: string;
  /** A human readable name for the Mini-app */
  name: string;
  /** A (temporary) github username to define as the owner */
  custodyGithubUsername: string;
  /** An ethereum address or ENS address to define as the owner */
  custodyAddress: string;
  /** A valid url pointing to an image file, it should be a square */
  logo: string;
  version: string;
  creationEntrypoints?: ModElement[];
  contentEntrypoints?: ModConditionalElement[];
  elements?: Record<string, ModElement[]>;
};

Elements that build up a UI

export type ModElement =
  | {
      type: "text";
      label: string;
    }
  | {
      type: "image";
      imageSrc: string;
    }
  | {
      type: "link";
      label: string;
      variant?: "link" | "primary" | "secondary" | "destructive";
      url: string;
      onclick?: ModEvent;
    }
  | {
      type: "button";
      label: string;
      variant?: "primary" | "secondary" | "destructive";
      onclick: ModEvent;
    }
  | {
      type: "circular-progress";
    }
  | {
      type: "horizontal-layout";
      elements?: string | ElementOrConditionalFlow[];
      onload?: ModEvent;
    }
  | {
      type: "vertical-layout";
      elements?: string | ElementOrConditionalFlow[];
      onload?: ModEvent;
    }
  | {
      ref?: string;
      type: "input";
      placeholder?: string;
      clearable?: boolean;
      onchange?: ModEvent;
      onsubmit?: ModEvent;
    }
  | {
      type: "video";
      videoSrc: string;
    }
  | {
      ref?: string;
      type: "tabs";
      values: string[];
      names: string[];
      onload?: ModEvent;
      onchange?: ModEvent;
    }
  | ({
      ref?: string;
      type: "image-grid-list";
      onload?: ModEvent;
      onpick?: ModEvent;
    } & (
      | { loading: boolean; imagesListRef?: never }
      | { loading?: never; imagesListRef: string }
    ))
  | {
      type: "dialog";
      elements?: string | ElementOrConditionalFlow[];
      onclose?: ModEvent;
    }
  | {
      type: "alert";
      title: string;
      description: string;
      variant: "success" | "error";
    }
  | {
      type: "avatar";
      src: string;
    }
  | ({
      type: "card";
      elements?: string | ElementOrConditionalFlow[];
      onclick?: ModEvent;
    } & (
      | {
          imageSrc: string;
          aspectRatio?: number;
          topLeftBadge?: string;
          topRightBadge?: string;
          bottomLeftBadge?: string;
          bottomRightBadge?: string;
        }
      | {
          imageSrc?: never;
          aspectRatio?: never;
          topLeftBadge?: never;
          topRightBadge?: never;
          bottomLeftBadge?: never;
          bottomRightBadge?: never;
        }
    ));