@signals-protocol/v1-sdk 1.3.0 → 1.4.0

package/dist/index.d.ts

@@ -10,4 +10,4 @@ export * as MathUtils from "./utils/math";
 export { toWAD, toMicroUSDC } from "./clmsr-sdk";
 export { createCLMSRSDK, createSignalsSDK } from "./clmsr-sdk";
 export * from "./share";
-export declare const VERSION = "1.2.0";
+export declare const VERSION = "1.4.0";

package/dist/index.js

@@ -67,4 +67,4 @@ Object.defineProperty(exports, "createSignalsSDK", { enumerable: true, get: func
 // Share image VNode templates
 __exportStar(require("./share"), exports);
 // Version (keep in sync with package.json)
-exports.VERSION = "1.2.0";
+exports.VERSION = "1.4.0";

package/dist/share/index.d.ts

@@ -1,5 +1,6 @@
-export type { SatoriNode, PositionImageInput, DistributionImageInput, PriceTick, BarCategory, } from "./types";
+export type { SatoriNode, PositionImageInput, ProfileImageInput, ProfileChartPosition, DistributionImageInput, PriceTick, BarCategory, } from "./types";
 export { buildPositionVNode } from "./position-image";
+export { buildProfileVNode } from "./profile-image";
 export { buildDistributionVNode } from "./distribution-image";
 export { buildBrandVNode } from "./brand-image";
 export { h } from "./h";

package/dist/share/index.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatDistributionPriceRange = exports.getPeakRange = exports.formatXTick = exports.generateXAxisTicks = exports.getSqrtHeight = exports.getBarCategory = exports.getPnlColor = exports.formatUsdPnl = exports.percForm = exports.formatPriceRange = exports.formatPrice = exports.formatUSDC = exports.buildLogoStrokeSVG = exports.SIGNALS_LOGO_URI = exports.h = exports.buildBrandVNode = exports.buildDistributionVNode = exports.buildPositionVNode = void 0;
+exports.formatDistributionPriceRange = exports.getPeakRange = exports.formatXTick = exports.generateXAxisTicks = exports.getSqrtHeight = exports.getBarCategory = exports.getPnlColor = exports.formatUsdPnl = exports.percForm = exports.formatPriceRange = exports.formatPrice = exports.formatUSDC = exports.buildLogoStrokeSVG = exports.SIGNALS_LOGO_URI = exports.h = exports.buildBrandVNode = exports.buildDistributionVNode = exports.buildProfileVNode = exports.buildPositionVNode = void 0;
 // VNode builders
 var position_image_1 = require("./position-image");
 Object.defineProperty(exports, "buildPositionVNode", { enumerable: true, get: function () { return position_image_1.buildPositionVNode; } });
+var profile_image_1 = require("./profile-image");
+Object.defineProperty(exports, "buildProfileVNode", { enumerable: true, get: function () { return profile_image_1.buildProfileVNode; } });
 var distribution_image_1 = require("./distribution-image");
 Object.defineProperty(exports, "buildDistributionVNode", { enumerable: true, get: function () { return distribution_image_1.buildDistributionVNode; } });
 var brand_image_1 = require("./brand-image");

package/dist/share/profile-image.d.ts

@@ -0,0 +1,2 @@
+import type { ProfileImageInput, SatoriNode } from "./types";
+export declare function buildProfileVNode(input: ProfileImageInput): SatoriNode;

package/dist/share/profile-image.js

@@ -0,0 +1,552 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildProfileVNode = buildProfileVNode;
+const h_1 = require("./h");
+const assets_1 = require("./assets");
+const CARD_WIDTH = 1200;
+const CARD_HEIGHT = 630;
+const OUTER_PADDING = 24;
+const CARD_PADDING_X = 32;
+const CARD_PADDING_Y = 28;
+const CHART_WIDTH = CARD_WIDTH - OUTER_PADDING * 2 - CARD_PADDING_X * 2;
+const CHART_HEIGHT = 228;
+const PLOT_LEFT = 56;
+const PLOT_RIGHT = 18;
+const PLOT_TOP = 14;
+const PLOT_BOTTOM = 24;
+const BAND_WIDTH = 18;
+const OG_THEMES = {
+    light: {
+        pageBg: "#eef7ff", // bg-surface-soft
+        card: "#FFFFFF", // bg-card
+        ink: "#242424", // text-primary
+        inkMuted: "#737373", // text-secondary
+        border: "#EDEDED", // border-default
+        primary: "#1444c2", // brand-primary
+        positive: "#00BF40", // status-positive
+        negative: "#FF4343", // status-negative
+        bitcoin: "#F7931A", // bitcoin-accent
+        neutralBg: "#F4F4F4", // surface-muted
+    },
+    dark: {
+        pageBg: "#0F0F11", // bg-surface-soft
+        card: "#18181B", // bg-card
+        ink: "#E4E4E7", // text-primary
+        inkMuted: "#A1A1AA", // text-secondary
+        border: "#27272A", // border-default
+        primary: "#5B8DEF", // brand-primary
+        positive: "#4ADE80", // status-positive
+        negative: "#F87171", // status-negative
+        bitcoin: "#F7931A", // bitcoin-accent
+        neutralBg: "#27272A", // surface-muted
+    },
+};
+const TIER_ACCENT_COLORS = {
+    BRONZE: "#C7742A",
+    SILVER: "#BFC6CE",
+    GOLD: "#F3BC3C",
+    PLATINUM: "#63CBB2",
+    DIAMOND: "#5EC0F2",
+};
+function shortenAddress(address) {
+    return `${address.slice(0, 6)}…${address.slice(-4)}`;
+}
+function resolveDisplayName(displayName) {
+    const resolved = displayName?.trim();
+    return resolved ? resolved : null;
+}
+function formatProfilePnl(value) {
+    const sign = value >= 0 ? "+" : "-";
+    return `${sign}$${Math.abs(value).toFixed(2)}`;
+}
+function formatProfileRoi(value) {
+    return `${value >= 0 ? "+" : ""}${value.toFixed(1)}%`;
+}
+function formatBestMult(value) {
+    if (value == null || value <= 1)
+        return "—";
+    return `${value.toFixed(2)}×`;
+}
+function getSignedValueColor(value, theme) {
+    if (value > 0)
+        return theme.positive;
+    if (value < 0)
+        return theme.negative;
+    return theme.inkMuted;
+}
+function normalizeStatus(status) {
+    if (status === "OPEN" ||
+        status === "WIN" ||
+        status === "LOSS" ||
+        status === "CLOSED") {
+        return status;
+    }
+    if (status === "PENDING") {
+        return "OPEN";
+    }
+    return null;
+}
+function normalizePositions(positions) {
+    const normalized = [];
+    positions.forEach((position) => {
+        const status = normalizeStatus(position.status);
+        if (status == null)
+            return;
+        normalized.push({
+            ...position,
+            status,
+        });
+    });
+    return normalized;
+}
+function buildMainText(input) {
+    if (input.hideWallet)
+        return "A Signals trader";
+    return resolveDisplayName(input.displayName) ?? shortenAddress(input.address);
+}
+function buildSubline(input) {
+    const callCopy = `${input.totalCalls} BTC range calls`;
+    if (input.hideWallet)
+        return callCopy;
+    const parts = [];
+    if (resolveDisplayName(input.displayName) !== null) {
+        parts.push(shortenAddress(input.address));
+    }
+    if (input.twitter) {
+        parts.push(`@${input.twitter}`);
+    }
+    parts.push(callCopy);
+    return parts.join(" · ");
+}
+function getPriceTickStep(span) {
+    const target = span / 4;
+    const candidates = [
+        500,
+        1000,
+        2500,
+        5000,
+        10000,
+        25000,
+        50000,
+        100000,
+        250000,
+        500000,
+        1000000,
+    ];
+    return candidates.find((step) => step >= target) ?? 1000000;
+}
+function getExpandedPriceBounds(min, max) {
+    const span = max - min;
+    const step = getPriceTickStep(span);
+    return {
+        min: Math.floor(min / step) * step,
+        max: Math.ceil(max / step) * step,
+        step,
+    };
+}
+function getPriceTicks(min, max, step) {
+    const ticks = [];
+    for (let tick = min; tick <= max + step / 2; tick += step) {
+        ticks.push(tick);
+        if (ticks.length >= 6)
+            break;
+    }
+    return ticks.length > 0 ? ticks : [min, max];
+}
+function formatAxisLabel(value) {
+    if (Math.abs(value) >= 1000) {
+        return `$${Math.round(value / 1000)}k`;
+    }
+    return `$${Math.round(value)}`;
+}
+function computePriceBounds(btcHistory, positions) {
+    let rawMin = Infinity;
+    let rawMax = -Infinity;
+    let hasPrices = false;
+    btcHistory.forEach((point) => {
+        if (point.close < rawMin)
+            rawMin = point.close;
+        if (point.close > rawMax)
+            rawMax = point.close;
+        hasPrices = true;
+    });
+    positions.forEach((position) => {
+        if (position.lowerPrice < rawMin)
+            rawMin = position.lowerPrice;
+        if (position.lowerPrice > rawMax)
+            rawMax = position.lowerPrice;
+        if (position.upperPrice < rawMin)
+            rawMin = position.upperPrice;
+        if (position.upperPrice > rawMax)
+            rawMax = position.upperPrice;
+        hasPrices = true;
+        if (position.settlementPrice != null) {
+            if (position.settlementPrice < rawMin)
+                rawMin = position.settlementPrice;
+            if (position.settlementPrice > rawMax)
+                rawMax = position.settlementPrice;
+        }
+    });
+    if (!hasPrices)
+        return null;
+    const span = rawMax - rawMin;
+    const padding = span === 0 ? 500 : span * 0.1;
+    return {
+        min: rawMin - padding,
+        max: rawMax + padding,
+    };
+}
+function computeTimeBounds(btcHistory, positions) {
+    let min = Infinity;
+    let max = -Infinity;
+    let hasTimes = false;
+    if (btcHistory.length > 0) {
+        const first = btcHistory[0].t;
+        const last = btcHistory[btcHistory.length - 1].t;
+        min = Math.min(first, last);
+        max = Math.max(first, last);
+        hasTimes = true;
+    }
+    positions.forEach((position) => {
+        if (position.marketEndTimestampMs < min)
+            min = position.marketEndTimestampMs;
+        if (position.marketEndTimestampMs > max)
+            max = position.marketEndTimestampMs;
+        hasTimes = true;
+    });
+    if (!hasTimes)
+        return null;
+    return {
+        min,
+        max,
+    };
+}
+function buildHistoryPath(btcHistory, scaleX, scaleY) {
+    return btcHistory
+        .map((point, index) => {
+        const command = index === 0 ? "M" : "L";
+        return `${command} ${scaleX(point.t).toFixed(2)} ${scaleY(point.close).toFixed(2)}`;
+    })
+        .join(" ");
+}
+function buildChartArea(theme, btcHistory, positions) {
+    const normalizedPositions = normalizePositions(positions);
+    const renderablePositions = normalizedPositions.filter((position) => position.status !== "CLOSED");
+    const sortedHistory = [...btcHistory].sort((a, b) => a.t - b.t);
+    if (btcHistory.length === 0 && renderablePositions.length === 0) {
+        return (0, h_1.h)("div", {
+            style: {
+                width: CHART_WIDTH,
+                height: CHART_HEIGHT,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: theme.neutralBg,
+                border: `1px solid ${theme.border}`,
+                borderRadius: 20,
+                color: theme.inkMuted,
+                fontSize: 16,
+                fontWeight: 500,
+                overflow: "hidden",
+            },
+        }, "BTC history unavailable");
+    }
+    const bounds = computePriceBounds(sortedHistory, renderablePositions);
+    const timeBounds = computeTimeBounds(sortedHistory, renderablePositions);
+    if (!bounds || !timeBounds) {
+        return (0, h_1.h)("div", {
+            style: {
+                width: CHART_WIDTH,
+                height: CHART_HEIGHT,
+                display: "flex",
+                background: theme.neutralBg,
+                border: `1px solid ${theme.border}`,
+                borderRadius: 20,
+            },
+        });
+    }
+    const plotWidth = CHART_WIDTH - PLOT_LEFT - PLOT_RIGHT;
+    const plotHeight = CHART_HEIGHT - PLOT_TOP - PLOT_BOTTOM;
+    const timeMin = timeBounds.min;
+    const timeMax = timeBounds.max;
+    const priceBounds = getExpandedPriceBounds(bounds.min, bounds.max);
+    const scaleX = (value) => {
+        if (timeMin === timeMax) {
+            return PLOT_LEFT + plotWidth / 2;
+        }
+        return PLOT_LEFT + ((value - timeMin) / (timeMax - timeMin)) * plotWidth;
+    };
+    const scaleY = (value) => {
+        if (priceBounds.max === priceBounds.min) {
+            return PLOT_TOP + plotHeight / 2;
+        }
+        return (PLOT_TOP +
+            (1 -
+                (value - priceBounds.min) / (priceBounds.max - priceBounds.min)) *
+                plotHeight);
+    };
+    const priceTicks = getPriceTicks(priceBounds.min, priceBounds.max, priceBounds.step);
+    const hasOpenPositions = renderablePositions.some((position) => position.status === "OPEN");
+    const svgChildren = [];
+    if (hasOpenPositions) {
+        svgChildren.push((0, h_1.h)("defs", null, (0, h_1.h)("pattern", {
+            id: "profile-open-band",
+            width: 8,
+            height: 8,
+            patternUnits: "userSpaceOnUse",
+        }, (0, h_1.h)("path", {
+            d: "M-2 8 L8 -2 M0 10 L10 0 M2 12 L12 2",
+            stroke: theme.bitcoin,
+            strokeWidth: 2,
+        }))));
+    }
+    priceTicks.forEach((tick) => {
+        const y = scaleY(tick);
+        svgChildren.push((0, h_1.h)("line", {
+            x1: PLOT_LEFT,
+            x2: PLOT_LEFT + plotWidth,
+            y1: y,
+            y2: y,
+            stroke: theme.border,
+            strokeDasharray: "2 3",
+            strokeWidth: 1,
+        }));
+    });
+    renderablePositions.forEach((position) => {
+        const topPrice = Math.max(position.lowerPrice, position.upperPrice);
+        const bottomPrice = Math.min(position.lowerPrice, position.upperPrice);
+        const x = scaleX(position.marketEndTimestampMs) - BAND_WIDTH / 2;
+        const top = scaleY(topPrice);
+        const bottom = scaleY(bottomPrice);
+        const height = Math.max(bottom - top, 6);
+        if (position.status === "OPEN") {
+            svgChildren.push((0, h_1.h)("rect", {
+                x,
+                y: top,
+                width: BAND_WIDTH,
+                height,
+                rx: 6,
+                fill: "url(#profile-open-band)",
+                stroke: theme.bitcoin,
+                strokeWidth: 2,
+            }));
+            return;
+        }
+        const fill = position.status === "WIN" ? theme.primary : theme.negative;
+        const fillOpacity = position.status === "WIN" ? 0.55 : 0.28;
+        svgChildren.push((0, h_1.h)("rect", {
+            x,
+            y: top,
+            width: BAND_WIDTH,
+            height,
+            rx: 6,
+            fill,
+            fillOpacity,
+            stroke: fill,
+            strokeOpacity: 0.9,
+        }));
+    });
+    if (sortedHistory.length === 1) {
+        svgChildren.push((0, h_1.h)("circle", {
+            cx: scaleX(sortedHistory[0].t),
+            cy: scaleY(sortedHistory[0].close),
+            r: 5,
+            fill: theme.ink,
+        }));
+    }
+    else if (sortedHistory.length > 1) {
+        svgChildren.push((0, h_1.h)("path", {
+            d: buildHistoryPath(sortedHistory, scaleX, scaleY),
+            fill: "none",
+            stroke: theme.ink,
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+        }));
+    }
+    renderablePositions.forEach((position) => {
+        if ((position.status === "WIN" || position.status === "LOSS") &&
+            position.settlementPrice != null) {
+            svgChildren.push((0, h_1.h)("circle", {
+                cx: scaleX(position.marketEndTimestampMs),
+                cy: scaleY(position.settlementPrice),
+                r: 4.5,
+                fill: position.status === "WIN" ? theme.primary : theme.negative,
+            }));
+        }
+    });
+    const labelNodes = priceTicks.map((tick) => (0, h_1.h)("div", {
+        style: {
+            position: "absolute",
+            left: 12,
+            top: scaleY(tick) - 9,
+            display: "flex",
+            fontSize: 13,
+            fontWeight: 500,
+            color: theme.inkMuted,
+            background: theme.card,
+            padding: "0 4px",
+        },
+    }, formatAxisLabel(tick)));
+    return (0, h_1.h)("div", {
+        style: {
+            width: CHART_WIDTH,
+            height: CHART_HEIGHT,
+            display: "flex",
+            position: "relative",
+            overflow: "hidden",
+            background: theme.neutralBg,
+            border: `1px solid ${theme.border}`,
+            borderRadius: 20,
+        },
+    }, (0, h_1.h)("svg", {
+        width: CHART_WIDTH,
+        height: CHART_HEIGHT,
+        viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`,
+        style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            pointerEvents: "none",
+        },
+    }, ...svgChildren), ...labelNodes);
+}
+function buildStatCard(label, value, valueColor, theme) {
+    return (0, h_1.h)("div", {
+        style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            padding: "16px 18px",
+            borderRadius: 18,
+            border: `1px solid ${theme.border}`,
+            background: theme.neutralBg,
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 14,
+            fontWeight: 500,
+            color: theme.inkMuted,
+            marginBottom: 10,
+        },
+    }, label), (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 28,
+            lineHeight: 1.1,
+            fontWeight: 700,
+            color: valueColor,
+        },
+    }, value));
+}
+function buildProfileVNode(input) {
+    const theme = OG_THEMES[input.theme];
+    const accent = TIER_ACCENT_COLORS[input.tier];
+    const mainText = buildMainText(input);
+    const subline = buildSubline(input);
+    const pnlValue = input.hideAmounts ? "••••" : formatProfilePnl(input.totalPnl);
+    const roiValue = formatProfileRoi(input.roi);
+    const bestMultValue = formatBestMult(input.bestMult);
+    return (0, h_1.h)("div", {
+        style: {
+            width: CARD_WIDTH,
+            height: CARD_HEIGHT,
+            display: "flex",
+            padding: OUTER_PADDING,
+            fontFamily: "Inter",
+            background: `linear-gradient(135deg, ${theme.pageBg}, ${theme.card})`,
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            padding: `${CARD_PADDING_Y}px ${CARD_PADDING_X}px`,
+            background: theme.card,
+            border: `1px solid ${theme.border}`,
+            borderRadius: 24,
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+        },
+    }, (0, h_1.h)("img", {
+        src: assets_1.SIGNALS_LOGO_URI,
+        width: 34,
+        height: 32,
+        style: { display: "flex" },
+    }), (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 28,
+            fontWeight: 700,
+            color: theme.primary,
+        },
+    }, "Signals")), (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 18,
+            fontWeight: 700,
+            letterSpacing: "0.04em",
+            textTransform: "uppercase",
+            color: accent,
+        },
+    }, input.tier)), (0, h_1.h)("div", {
+        style: {
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            marginTop: 20,
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            flexDirection: "column",
+        },
+    }, (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 52,
+            lineHeight: 1.05,
+            fontWeight: 700,
+            color: theme.ink,
+            marginBottom: 10,
+        },
+    }, mainText), (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            fontSize: 20,
+            fontWeight: 500,
+            color: theme.inkMuted,
+        },
+    }, subline)), (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            marginTop: 24,
+        },
+    }, buildChartArea(theme, input.btcHistory, input.positions)), (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            gap: 16,
+            marginTop: 20,
+        },
+    }, buildStatCard("P&L", pnlValue, getSignedValueColor(input.totalPnl, theme), theme), buildStatCard("ROI", roiValue, getSignedValueColor(input.roi, theme), theme), buildStatCard("Best call", bestMultValue, theme.primary, theme)), (0, h_1.h)("div", {
+        style: {
+            display: "flex",
+            justifyContent: "flex-end",
+            marginTop: 16,
+            fontSize: 13,
+            fontWeight: 500,
+            color: theme.inkMuted,
+        },
+    }, "signals.wtf · Pick your range"))));
+}

package/dist/share/types.d.ts

@@ -22,6 +22,39 @@ export interface PositionImageInput {
     /** Current position value in USDC (NOT raw). null = use max payout fallback. */
     currentValue: number | null;
 }
+export interface ProfileChartPosition {
+    lowerPrice: number;
+    upperPrice: number;
+    settlementPrice: number | null;
+    status: "OPEN" | "WIN" | "LOSS" | "CLOSED";
+    marketEndTimestampMs: number;
+}
+export interface ProfileImageInput {
+    displayName: string | null;
+    address: string;
+    twitter: string | null;
+    tier: "BRONZE" | "SILVER" | "GOLD" | "PLATINUM" | "DIAMOND";
+    totalCalls: number;
+    totalPnl: number;
+    roi: number;
+    bestMult: number | null;
+    /**
+     * BTC daily close timeline.
+     *
+     * Must be sorted ascending by `t` (UNIX ms). Adapters should pass
+     * ordered data, and the builder defensively re-sorts a shallow copy
+     * before rendering so chart bounds and SVG path order stay correct
+     * even if input arrives out of order.
+     */
+    btcHistory: Array<{
+        t: number;
+        close: number;
+    }>;
+    positions: ProfileChartPosition[];
+    theme: "light" | "dark";
+    hideWallet: boolean;
+    hideAmounts: boolean;
+}
 export type BarCategory = "peak" | "high" | "mid" | "low";
 export interface PriceTick {
     tick: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signals-protocol/v1-sdk",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Signals v1 SDK for CLMSR market calculations and utilities",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -13,6 +13,7 @@
     "test:watch": "jest --watch",
     "npm:auth": "node scripts/write-npmrc.js",
     "publish:package": "NPM_CONFIG_USERCONFIG=.npmrc.auth npm publish",
+    "prepack": "yarn rebuild",
     "lint": "eslint src/**/*.ts",
     "format": "prettier --write src/**/*.ts",
     "clean": "rm -rf dist",