Campaign manager tweaks

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@ariakit/react": "^0.4.12",
     "@elysiajs/eden": "^1.1.3",
-    "@merkl/api": "^0.10.103",
+    "@merkl/api": "0.10.396",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.0",

src/components/dapp/TransactionButton.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode, useCallback, useState } from "react";
 import { getTransactionReceipt } from "viem/actions";
 import type { ResolvedRegister, UseSendTransactionReturnType } from "wagmi";
-import { Hash, type IconProps } from "../..";
+import { Hash, type IconProps, WalletButton } from "../..";
 import { useWalletContext } from "../../context/Wallet.context";
 import Button, { type ButtonProps } from "../primitives/Button";
 import Icon from "../primitives/Icon";
@@ -14,6 +14,7 @@ type WagmiTx = Parameters<UseSendTransactionReturnType<ResolvedRegister["config"
 export type TransactionButtonProps = ButtonProps & {
   enableSponsorCheckbox?: boolean;
   tx?: { [K in keyof WagmiTx]: K extends "data" | "to" ? string : WagmiTx[K] };
+  error?: { label: ReactNode; onClick: () => void };
   name?: ReactNode;
   iconProps?: IconProps;
   onExecute?: (hash: string) => void;
@@ -24,6 +25,7 @@ export type TransactionButtonProps = ButtonProps & {
 export default function TransactionButton({
   tx,
   name,
+  error,
   children,
   onExecute,
   onSuccess,
@@ -156,6 +158,14 @@ export default function TransactionButton({
         }
       </List>
     );
+
+  if (!user) return <WalletButton {...props} />;
+  if (error)
+    return (
+      <Button {...props} disabled={!error.onClick} onClick={error.onClick}>
+        {error.label}
+      </Button>
+    );
   return (
     <Button {...props} onClick={execute} disabled={status === "idle" ? props.disabled : true}>
       {status === "pending" ? (

src/components/extenders/DataTable.tsx

@@ -0,0 +1,15 @@
+import { createTable } from "../primitives/Table";
+
+export const [DataTable, DataRow, DataColumns] = createTable({
+  label: {
+    name: "Label",
+    size: "1fr",
+    className: "justify-start",
+    main: true,
+  },
+  value: {
+    name: "Value",
+    size: "1fr",
+    className: "justify-end",
+  },
+});

src/components/extenders/Dropdown.tsx

@@ -70,6 +70,7 @@ export default function Dropdown({
     [internalState, state],
   );
 
+  if (typeof document === "undefined") return children;
   return (
     <EventBlocker>
       <Popover.Root open={!state ? internalState : state?.[0]} onOpenChange={!state ? setInternalState : state?.[1]}>
@@ -85,7 +86,7 @@ export default function Dropdown({
             <EventBlocker>
               <Box
                 look="bold"
-                className="mt-md mx-lg shadow-md animate-drop z-20"
+                className="mt-md mx-lg max-h-[content] shadow-md animate-drop z-20"
                 {...(props as BoxProps)}
                 content={padding}
                 onMouseEnter={cancelClose}

src/components/extenders/Group.tsx

@@ -1,8 +1,9 @@
 import { tv } from "tailwind-variants";
+import { mergeClass } from "../../utils/css";
 import type { Component, Styled } from "../../utils/types";
 
 export const groupStyles = tv({
-  base: "flex flex-wrap",
+  base: "flex flex-row flex-wrap",
   variants: {
     size: {
       xs: "gap-xs",
@@ -19,6 +20,10 @@ export const groupStyles = tv({
 
 export type GroupProps = Component<Styled<typeof groupStyles>, HTMLDivElement>;
 
-export default function Group({ size, className, ...props }: GroupProps) {
-  return <div className={[groupStyles({ size }), className].join(" ")} {...props} />;
+export default function Group({ size, className, children, ...props }: GroupProps) {
+  return (
+    <div className={mergeClass(groupStyles({ size }), className)} {...props}>
+      {children}
+    </div>
+  );
 }

src/components/primitives/Box.tsx

@@ -92,6 +92,7 @@ export default function Box({
   container,
   content,
   className,
+  children,
   ...props
 }: BoxProps) {
   const themeVars = useThemedVariables(coloring, accent);
@@ -100,7 +101,8 @@ export default function Box({
     <div
       style={Object.assign(style ?? {}, themeVars)}
       className={mergeClass(boxStyles({ look, size, content, container: container !== false }), className)}
-      {...props}
-    />
+      {...props}>
+      {children}
+    </div>
   );
 }

src/components/primitives/EventBlocker.tsx

@@ -3,14 +3,15 @@ import type { Component } from "../../utils/types";
 
 export type EventBlockerProps = Component<PropsWithChildren>;
 
-export default function EventBlocker({ ...props }: EventBlockerProps) {
+export default function EventBlocker({ children, ...props }: EventBlockerProps) {
   return (
     <div
       {...props}
       onClick={e => {
         e.preventDefault();
         e.stopPropagation();
-      }}
-    />
+      }}>
+      {children}
+    </div>
   );
 }

src/components/primitives/PrimitiveTag.tsx

@@ -38,7 +38,7 @@ export type PrimitiveTagProps = Component<
       disabled?: boolean;
       noClick?: boolean;
     },
-  HTMLButtonElement
+  HTMLButtonElement | HTMLDivElement
 >;
 
 export default function PrimitiveTag({
@@ -57,6 +57,12 @@ export default function PrimitiveTag({
   const styleProps = primitiveTagStyles({ look, size });
   const styleLabel = noClick ? "active:text-main-12 pointer-events-none" : "dim";
 
+  if (noClick || !props.onClick)
+    return (
+      <div style={themeVars} className={mergeClass(styleProps, styleLabel, className)} {...props}>
+        {children}
+      </div>
+    );
   return (
     <button
       style={themeVars}

src/components/primitives/Table.tsx

@@ -207,7 +207,7 @@ export function Table<T extends Columns>({
   const headers = useHeaders(columns, sortable, onHeaderClick, sort ?? sortBy, order ?? _order, props as any);
 
   return (
-    <List indexOffset={header ? 0 : 1} className={mergeClass(className)} look={look} {...props}>
+    <List indexOffset={hideLabels ? 2 : header ? 0 : 1} className={mergeClass(className)} look={look} {...props}>
       {!!header ? <Box className="bg-auto">{header}</Box> : undefined}
       {/* biome-ignore lint/suspicious/noExplicitAny: please forgive this one as well */}
       {!hideLabels ? <Row {...(headers as any)} columns={columns} /> : undefined}

src/components/primitives/Text.tsx

@@ -1,6 +1,7 @@
 import { tv } from "tailwind-variants";
+import useThemableProps from "../../hooks/theming/useThemableProps";
 import { mergeClass } from "../../utils/css";
-import type { Component, Styled } from "../../utils/types";
+import type { Component, Styled, Themable } from "../../utils/types";
 
 export const textStyles = tv(
   {
@@ -40,9 +41,17 @@ export const textStyles = tv(
   { twMerge: false },
 );
 
-export type TextProps = Component<Styled<typeof textStyles> & { bold?: boolean }, HTMLParagraphElement>;
+export type TextProps = Component<Styled<typeof textStyles> & { bold?: boolean } & Themable, HTMLParagraphElement>;
 
 export default function Text({ look, size, style, bold, interactable, className, ...props }: TextProps) {
+  const themeVars = useThemableProps(props);
   const styleBold = bold ? "font-bold" : "";
-  return <p className={mergeClass(textStyles({ look, size, interactable }), styleBold, className)} {...props} />;
+
+  return (
+    <p
+      style={themeVars}
+      className={mergeClass(textStyles({ look, size, interactable }), styleBold, className)}
+      {...props}
+    />
+  );
 }