@markee_team/sdk 0.1.0-alpha.9 → 0.1.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -9
- package/dist/client.d.ts +3 -2
- package/dist/index.js +31 -13
- package/dist/logo-data.d.ts +2 -0
- package/dist/modal.d.ts +12 -0
- package/dist/react.js +31 -13
- package/dist/sign.d.ts +3 -1
- package/dist/styles.d.ts +1 -1
- package/dist/types.d.ts +29 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ An ESM JavaScript SDK with a self-contained, Shadow DOM modal and an optional Re
|
|
|
4
4
|
|
|
5
5
|
Embed a Markee leaderboard in your app with wallet-funded For Sale and For Rent flows, automatic strategy detection, and a configurable theme. Eligible Base For Sale boards can also offer Markee-hosted card checkout when enabled by Markee. Incoming cross-chain funding is not included.
|
|
6
6
|
|
|
7
|
-
The package also includes a standalone **Markee sign**. It shows the board's current winner
|
|
7
|
+
The package also includes a standalone **Markee sign button**. It shows the board's current winner, follows Markee's moderation decisions, and opens the payment modal when clicked.
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
@@ -97,9 +97,11 @@ const placement = { kind: 'board', chainId: 8453, address: '0x2768BC6e90266248BD
|
|
|
97
97
|
<MarkeeSign placement={placement} theme={{ mode: 'dark' }} />;
|
|
98
98
|
```
|
|
99
99
|
|
|
100
|
-
`MarkeeSign`
|
|
100
|
+
`MarkeeSign` is a compact, clickable sign with the winner's message, view count, and a suggested monthly rate on For Rent boards. By default, clicking it opens the SDK modal. Pass `onOpen={() => setOpen(true)}` to open your own controlled `MarkeeModal` instead, or `showAction={false}` to render a non-clickable sign. The sign and modal accept separate `theme` values. No app-side moderation database, RPC key, or moderation provider is needed. To render from plain JavaScript, call `createMarkeeSign(containerElement, { placement })`; its return value has `refresh()`, `setTheme()`, and `destroy()`.
|
|
101
101
|
|
|
102
|
-
The
|
|
102
|
+
The sign fades in the real MARKEE logo behind the message on hover and keyboard focus, following the Gardens sign treatment. It selects the light or dark logo with the sign's theme, including system-mode changes. Set `theme={{ mode: 'dark', sign: { hoverLogo: false } }}` to disable the watermark. `sign.hoverBackground` remains available for an optional hover surface color; otherwise the sign keeps its normal surface. These options apply only to the sign, so the modal can use its own theme.
|
|
103
|
+
|
|
104
|
+
The SDK snapshot API reads **board moderation flags** from Markee's database. A flagged winner is blurred with a notice. The sign does not offer a reveal action or count a view for flagged content. If moderation data cannot be loaded, it withholds the message until the status is known. Visible, unflagged signs record one view per message. The sign refreshes every 30 seconds while mounted and can be refreshed on demand. Markee-only site flags intentionally apply only on markee.xyz; they do not censor a partner's embedded sign. Moderators still manage flags on Markee; moderation writes invalidate SDK snapshots so embedded signs can pick up changes on their next refresh.
|
|
103
105
|
|
|
104
106
|
## Modal layout
|
|
105
107
|
|
|
@@ -119,7 +121,9 @@ import { createMarkee, type MarkeeTheme } from '@markee_team/sdk';
|
|
|
119
121
|
const theme: MarkeeTheme = {
|
|
120
122
|
mode: 'system',
|
|
121
123
|
fontFamily: '"DM Sans", system-ui, sans-serif',
|
|
122
|
-
radius:
|
|
124
|
+
radius: 16,
|
|
125
|
+
cardRadius: 12,
|
|
126
|
+
controlRadius: 8,
|
|
123
127
|
colors: {
|
|
124
128
|
primary: '#743a84',
|
|
125
129
|
primaryText: '#ffffff',
|
|
@@ -141,11 +145,17 @@ Theme changes update styles in place: drafts, focus, scroll, wallet sessions, an
|
|
|
141
145
|
| --- | --- |
|
|
142
146
|
| `mode` | `light`, `dark`, or `system` |
|
|
143
147
|
| `fontFamily` | CSS font stack; the app supplies any custom font |
|
|
144
|
-
| `radius` | Panel radius in pixels, 0–48 (default 22)
|
|
148
|
+
| `radius` | Panel radius in pixels, 0–48 (default 22) |
|
|
149
|
+
| `cardRadius` | Card radius in pixels, 0–48; defaults to 64% of panel radius |
|
|
150
|
+
| `controlRadius` | Button and input radius in pixels, 0–48; defaults to 45% of panel radius |
|
|
145
151
|
| `colors` | Partial overrides for the semantic tokens below |
|
|
152
|
+
| `sign.hoverLogo` | Show the theme-matched MARKEE logo on hover/focus (default `true`) |
|
|
153
|
+
| `sign.hoverBackground` | Optional sign hover surface color; defaults to the normal surface |
|
|
146
154
|
|
|
147
155
|
Color tokens: `background`, `surface`, `text`, `muted`, `border`, `inputBackground`, `inputText`, `primary`, `primaryText`, `accent`, `accentText`, `accentSurface`, `accentSurfaceText`, `accentBorder`, `selected`, `selectedText`, `info`, `infoText`, `error`, `errorText`, `success`, `successText`, `link`, `focusRing`, and `overlay`. Set foreground/background pairs together and check your brand's contrast in both modes. Overrides apply over either selected palette; omitted values use that palette's defaults. Invalid CSS color/font values fall back to defaults.
|
|
148
156
|
|
|
157
|
+
To match an app completely, override `link`, `focusRing`, `border`, `selected`/`selectedText`, and the accent colors as well as the primary button colors. Otherwise those elements retain the SDK palette. Use the typed theme options; arbitrary custom CSS is not currently supported. The sign’s price badge appears on hover or keyboard focus, and stays visible on touch devices.
|
|
158
|
+
|
|
149
159
|
Styles are scoped to the modal's Shadow DOM and do not change the host app or its wallet picker. The ConnectKit sample includes light, dark, device, and custom Plum presets.
|
|
150
160
|
|
|
151
161
|
## Headless API
|
|
@@ -165,6 +175,14 @@ For Sale supports create/fund/edit. New message ownership belongs to the caller.
|
|
|
165
175
|
|
|
166
176
|
For Rent supports message creation, starting/updating/switching/stopping a stream, wrap/unwrap, pool connection/refunds, board-buffer recovery, ranking refresh and settlement. The server builds the complete Superfluid batch, including exact ETHx approval and pool connection. Wallet runway uses the combined CFA and GDA net flow across the wallet, not only the current board. Rental MARKEE comes from actual settled rent, never merely from wrapping or depositing ETH.
|
|
167
177
|
|
|
178
|
+
Payment reviews remain visible while the wallet requests confirmation, including network switches. If a review expires when confirming, the modal shows **Refreshing payment details…**, prepares an updated review, and requires another confirmation click. It never automatically sends the refreshed transaction.
|
|
179
|
+
|
|
180
|
+
For Sale reviews are disabled when the entered payment exceeds the loaded ETH balance; the balance uses the error color and the button explains the shortfall. The API also checks network fees before wallet confirmation.
|
|
181
|
+
|
|
182
|
+
For Rent reviews show estimated **MARKEE/month while winning**, using the selected monthly stream rate and current on-chain reward settings. The estimate is not based on the ETH deposit and is not guaranteed; if quoting is unavailable, the modal shows a qualitative reward description. Rental transaction details contain only Network, Recipient, and Wallet; fees stay in the payment summary.
|
|
183
|
+
|
|
184
|
+
Refunds flow automatically when connected to the message’s refund pool. **Collect refund** appears only when the loaded wallet snapshot reports a positive claimable balance for that message’s pool. Board-buffer recovery is separate. Community revenue actions are accessed through **Community accumulated revenue**.
|
|
185
|
+
|
|
168
186
|
Community activation supports the current council Safe, a current Safe owner, or the configured authorized keeper. Revenue claims support the current Safe or its current owners and always pay the council treasury. Existing outbound Across, Squid and LI.FI routing lives on Markee's server.
|
|
169
187
|
|
|
170
188
|
## Integration boundaries
|
|
@@ -179,7 +197,13 @@ Backend configuration and API reference: [`docs/sdk/implementation.md`](https://
|
|
|
179
197
|
|
|
180
198
|
## API endpoint
|
|
181
199
|
|
|
182
|
-
No API URL or Markee API key is required. The SDK
|
|
200
|
+
No API URL or Markee API key is required. The SDK default is:
|
|
201
|
+
|
|
202
|
+
```text
|
|
203
|
+
https://staging.markee.xyz/api/sdk/v1
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
Markee hosts this API and centralizes on-chain reads, metadata, and transaction preparation. Staging does not imply test funds: Base placements use real funds. For local development or testing, pass an optional `apiUrl` override to `createMarkee`, `MarkeeClient`, or the React modal. The endpoint used by your installed release is exported as `DEFAULT_MARKEE_API_URL`.
|
|
183
207
|
|
|
184
208
|
## LLM implementation prompt
|
|
185
209
|
|
|
@@ -212,8 +236,9 @@ Ask only the remaining unanswered requirements in one concise group:
|
|
|
212
236
|
Markee-hosted card checkout without an app wallet (For Sale on Base only)? Inspect
|
|
213
237
|
existing connectors first; do not add a second wallet context or install a new
|
|
214
238
|
connector without agreement.
|
|
215
|
-
- Should the modal match the app theme or use specific colors, font,
|
|
216
|
-
light/dark/system mode?
|
|
239
|
+
- Should the modal match the app theme or use specific colors, font, panel/card/
|
|
240
|
+
control radii, and light/dark/system mode? Include links, focus rings, borders,
|
|
241
|
+
and selected states when matching the host palette.
|
|
217
242
|
- What public domain/page will host this integration? Use it as siteUrl for
|
|
218
243
|
automatic verification. For Vite/client rendering, add the board marker to the
|
|
219
244
|
static HTML as documented; do not claim localhost is verified.
|
|
@@ -236,7 +261,8 @@ Then implement the agreed scope:
|
|
|
236
261
|
Otherwise omit wallet. Without a connected app account, the modal shows only
|
|
237
262
|
Pay, opening Markee-hosted checkout for supported boards. Do not install
|
|
238
263
|
Privy or collect card details in the host app.
|
|
239
|
-
5. Apply theme options
|
|
264
|
+
5. Apply theme options (including radius, cardRadius, and controlRadius) while
|
|
265
|
+
preserving the built-in modal layout. Handle onEvent
|
|
240
266
|
if needed; show success only for a confirmed event. Let the SDK manage review,
|
|
241
267
|
network switching, submission, and verification.
|
|
242
268
|
6. Verify build/types, loading of the supplied board, automatic strategy selection,
|
|
@@ -291,3 +317,28 @@ checkout route is deployed there. Both deployments must use the same checkout KV
|
|
|
291
317
|
signing secret, supported configuration and Privy app. Omit this setting to keep
|
|
292
318
|
checkout on the API origin. Integrators do not configure an API or checkout URL.
|
|
293
319
|
Existing pending checkout sessions retain their original destination.
|
|
320
|
+
|
|
321
|
+
### Pay in Markee availability
|
|
322
|
+
|
|
323
|
+
The SDK checks the Markee API before offering hosted payment. Markee controls this
|
|
324
|
+
feature with the server-only `FLAG_SDK_PAY_IN_MARKEE` environment variable, which
|
|
325
|
+
defaults to false. Only `true`, together with the required checkout configuration,
|
|
326
|
+
enables it. Integrating apps do not need to provide a flag or API key. Connected
|
|
327
|
+
wallet payments remain available independently.
|
|
328
|
+
|
|
329
|
+
### Automatic message moderation
|
|
330
|
+
|
|
331
|
+
When enabled by Markee, create/edit forms warn if a message matches the automatic profanity
|
|
332
|
+
filter. Authors can edit or explicitly continue; publication may still be hidden. A passing
|
|
333
|
+
message edit clears an automatic flag, while manual flags require moderator action.
|
|
334
|
+
|
|
335
|
+
`await client.checkMessage(message)` exposes the same draft check for custom interfaces. It
|
|
336
|
+
returns `enabled`, `state`, `contentHash`, `engine`, `policyVersion`, and optional `reason`.
|
|
337
|
+
Treat `unavailable` as unknown, never as a pass. Names are not automatically checked.
|
|
338
|
+
The standard modal handles these warnings for React and vanilla JavaScript integrations.
|
|
339
|
+
No API key or moderation configuration is required in the host app.
|
|
340
|
+
|
|
341
|
+
Snapshots retain `entry.moderated` (`false`, `true`, or `null`) and can additionally include
|
|
342
|
+
`entry.moderation` with the state and reason. Hide unavailable and flagged content and do not
|
|
343
|
+
record views for it. A moderator's false-positive exception on Markee applies only on Markee;
|
|
344
|
+
it does not change SDK visibility. This optional backend feature is disabled by default.
|
package/dist/client.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { Action, Address, AdminOperation, AdminResult, Authorization, BridgeStatus, ClaimQuote, EIP1193Provider, Hex, Placement, PreparedAction, SDKOptions, Snapshot, SiteVerification, TransactionResult } from './types.js';
|
|
1
|
+
import type { MessageCheck, Action, Address, AdminOperation, AdminResult, Authorization, BridgeStatus, ClaimQuote, EIP1193Provider, Hex, Placement, PreparedAction, SDKOptions, Snapshot, SiteVerification, TransactionResult } from './types.js';
|
|
2
2
|
/** Markee-hosted API used by integrations unless overridden for local development. */
|
|
3
|
-
export declare const DEFAULT_MARKEE_API_URL = "https://
|
|
3
|
+
export declare const DEFAULT_MARKEE_API_URL = "https://staging.markee.xyz/api/sdk/v1";
|
|
4
4
|
export declare class MarkeeError extends Error {
|
|
5
5
|
code: string;
|
|
6
6
|
status?: number | undefined;
|
|
@@ -67,6 +67,7 @@ export declare class MarkeeClient {
|
|
|
67
67
|
kind: 'gardens-community';
|
|
68
68
|
}>): AdminResult | null;
|
|
69
69
|
bridgeStatus(protocol: ClaimQuote['bridgeProtocol'], hash: Hex, fromChainId: number, toChainId: number): Promise<BridgeStatus>;
|
|
70
|
+
checkMessage(message: string): Promise<MessageCheck>;
|
|
70
71
|
recordView(address: Address, message: string, url?: string): Promise<{
|
|
71
72
|
counted: boolean;
|
|
72
73
|
totalViews: number;
|