@medialane/ui 0.280.0 → 0.282.0
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/dist/components/marketplace-dialog-primitives.cjs +55 -2
- package/dist/components/marketplace-dialog-primitives.cjs.map +1 -1
- package/dist/components/marketplace-dialog-primitives.d.cts +15 -1
- package/dist/components/marketplace-dialog-primitives.d.ts +15 -1
- package/dist/components/marketplace-dialog-primitives.js +53 -1
- package/dist/components/marketplace-dialog-primitives.js.map +1 -1
- package/dist/components/transaction-dialog-states.cjs +84 -0
- package/dist/components/transaction-dialog-states.cjs.map +1 -0
- package/dist/components/transaction-dialog-states.d.cts +28 -0
- package/dist/components/transaction-dialog-states.d.ts +28 -0
- package/dist/components/transaction-dialog-states.js +60 -0
- package/dist/components/transaction-dialog-states.js.map +1 -0
- package/dist/index.cjs +7 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +6 -1
- package/dist/index.js.map +1 -1
- package/dist/utils/use-transaction.cjs +5 -0
- package/dist/utils/use-transaction.cjs.map +1 -1
- package/dist/utils/use-transaction.d.cts +2 -1
- package/dist/utils/use-transaction.d.ts +2 -1
- package/dist/utils/use-transaction.js +4 -0
- package/dist/utils/use-transaction.js.map +1 -1
- package/package.json +1 -1
|
@@ -36,7 +36,8 @@ __export(marketplace_dialog_primitives_exports, {
|
|
|
36
36
|
MarketplaceErrorState: () => MarketplaceErrorState,
|
|
37
37
|
MarketplaceProcessingState: () => MarketplaceProcessingState,
|
|
38
38
|
MarketplaceSignInGate: () => MarketplaceSignInGate,
|
|
39
|
-
MarketplaceTxLink: () => MarketplaceTxLink
|
|
39
|
+
MarketplaceTxLink: () => MarketplaceTxLink,
|
|
40
|
+
OrderSummaryHero: () => OrderSummaryHero
|
|
40
41
|
});
|
|
41
42
|
module.exports = __toCommonJS(marketplace_dialog_primitives_exports);
|
|
42
43
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -46,6 +47,7 @@ var import_alert = require("./alert.js");
|
|
|
46
47
|
var import_button = require("./button.js");
|
|
47
48
|
var import_currency_icon = require("./currency-icon.js");
|
|
48
49
|
var import_cn = require("../utils/cn.js");
|
|
50
|
+
var import_format = require("../utils/format.js");
|
|
49
51
|
function MarketplaceTxLink({ txHash, explorerUrl, className }) {
|
|
50
52
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
51
53
|
"a",
|
|
@@ -150,6 +152,56 @@ function MarketplaceDialogHero({
|
|
|
150
152
|
badge
|
|
151
153
|
] });
|
|
152
154
|
}
|
|
155
|
+
function OrderSummaryHero({
|
|
156
|
+
name,
|
|
157
|
+
image,
|
|
158
|
+
subtitle,
|
|
159
|
+
tone = "default",
|
|
160
|
+
price: rawPrice,
|
|
161
|
+
quantity = 1,
|
|
162
|
+
usdTotal
|
|
163
|
+
}) {
|
|
164
|
+
const price = rawPrice?.formatted && rawPrice.currency ? { formatted: rawPrice.formatted, currency: rawPrice.currency, decimals: rawPrice.decimals } : null;
|
|
165
|
+
const unit = price ? parseFloat(price.formatted) : null;
|
|
166
|
+
const showTotal = unit !== null && quantity > 1;
|
|
167
|
+
const crypto = price ? (0, import_format.formatDisplayPrice)(showTotal ? (unit * quantity).toFixed(price.decimals <= 6 ? 2 : 4) : price.formatted) : "";
|
|
168
|
+
const stable = price ? (0, import_format.isStableCurrency)(price.currency) : false;
|
|
169
|
+
const face = "font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums";
|
|
170
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
|
|
171
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center pt-6 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-32 w-32 rounded-2xl overflow-hidden border border-border bg-muted", children: image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: image, alt: name, fill: true, sizes: "128px", className: "object-cover", unoptimized: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
172
|
+
"div",
|
|
173
|
+
{
|
|
174
|
+
className: (0, import_cn.cn)(
|
|
175
|
+
"h-full w-full bg-gradient-to-br to-transparent",
|
|
176
|
+
tone === "destructive" ? "from-destructive/20 via-brand-rose/10" : "from-primary/20 via-brand-purple/10"
|
|
177
|
+
)
|
|
178
|
+
}
|
|
179
|
+
) }) }),
|
|
180
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-4 px-5 pt-4 pb-1", children: [
|
|
181
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
|
|
182
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-bold text-lg leading-tight truncate", children: name }),
|
|
183
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 text-2xs font-medium text-muted-foreground", children: subtitle })
|
|
184
|
+
] }),
|
|
185
|
+
price ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "shrink-0 text-right", children: [
|
|
186
|
+
usdTotal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_cn.cn)(face, "text-2xl"), children: usdTotal }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: (0, import_cn.cn)("flex items-center gap-2 justify-end text-2xl", face), children: [
|
|
187
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "grid h-6 w-6 shrink-0 place-items-center rounded-full bg-foreground/[0.06]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: price.currency, size: 13 }) }),
|
|
188
|
+
crypto
|
|
189
|
+
] }),
|
|
190
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "mt-0.5 inline-flex items-center justify-end gap-1.5 text-sm font-semibold text-muted-foreground", children: [
|
|
191
|
+
usdTotal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "grid h-4 w-4 shrink-0 place-items-center rounded-full bg-foreground/[0.06]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: price.currency, size: 10 }) }) : null,
|
|
192
|
+
usdTotal ? stable ? price.currency : `${crypto} ${price.currency}` : price.currency
|
|
193
|
+
] }),
|
|
194
|
+
showTotal ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "mt-0.5 text-2xs text-muted-foreground/60", children: [
|
|
195
|
+
(0, import_format.formatDisplayPrice)(price.formatted),
|
|
196
|
+
" \xD7 ",
|
|
197
|
+
quantity,
|
|
198
|
+
" ",
|
|
199
|
+
price.currency
|
|
200
|
+
] }) : null
|
|
201
|
+
] }) : null
|
|
202
|
+
] })
|
|
203
|
+
] });
|
|
204
|
+
}
|
|
153
205
|
function CurrencyPicker({ currencies, value, onChange, disabled }) {
|
|
154
206
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-5 gap-1.5", children: currencies.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
155
207
|
import_button.Button,
|
|
@@ -257,6 +309,7 @@ function MarketplaceConfirmStep({
|
|
|
257
309
|
MarketplaceErrorState,
|
|
258
310
|
MarketplaceProcessingState,
|
|
259
311
|
MarketplaceSignInGate,
|
|
260
|
-
MarketplaceTxLink
|
|
312
|
+
MarketplaceTxLink,
|
|
313
|
+
OrderSummaryHero
|
|
261
314
|
});
|
|
262
315
|
//# sourceMappingURL=marketplace-dialog-primitives.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/marketplace-dialog-primitives.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport Image from \"./image.js\";\nimport { AlertCircle, ExternalLink, Loader2, Wallet } from \"lucide-react\";\nimport { Alert, AlertDescription } from \"./alert.js\";\nimport { Button } from \"./button.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\n\ninterface MarketplaceTxLinkProps {\n txHash: string;\n explorerUrl: string;\n className?: string;\n}\n\nexport function MarketplaceTxLink({ txHash, explorerUrl, className }: MarketplaceTxLinkProps) {\n return (\n <a\n href={`${explorerUrl}/tx/${txHash}`}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n \"inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors\",\n className\n )}\n >\n <span className=\"tabular-nums\">{txHash.slice(0, 10)}…{txHash.slice(-8)}</span>\n <ExternalLink className=\"h-3 w-3\" />\n </a>\n );\n}\n\ninterface MarketplaceProcessingStateProps {\n title: string;\n description?: string;\n imageUrl?: string | null;\n imageAlt?: string;\n txHash?: string | null;\n explorerUrl?: string;\n}\n\nexport function MarketplaceProcessingState({\n title,\n description = \"Keep this window open until it finishes.\",\n imageUrl,\n imageAlt = \"Token preview\",\n txHash,\n explorerUrl,\n}: MarketplaceProcessingStateProps) {\n return (\n <div className=\"flex flex-col items-center gap-5 p-6 py-8\">\n {imageUrl ? (\n <div className=\"relative h-20 w-20 rounded-2xl overflow-hidden border border-border\">\n <Image src={imageUrl} alt={imageAlt} fill sizes=\"80px\" className=\"object-cover\" unoptimized />\n <div className=\"absolute inset-0 bg-background/50 flex items-center justify-center\">\n <Loader2 className=\"h-7 w-7 animate-spin text-primary\" />\n </div>\n </div>\n ) : (\n <Loader2 className=\"h-10 w-10 animate-spin text-primary\" />\n )}\n <div className=\"text-center space-y-1\">\n <p className=\"font-semibold\">{title}</p>\n {txHash && explorerUrl ? (\n <MarketplaceTxLink txHash={txHash} explorerUrl={explorerUrl} className=\"mt-1\" />\n ) : null}\n </div>\n <p className=\"text-sm text-muted-foreground\">{description}</p>\n </div>\n );\n}\n\ninterface MarketplaceSignInGateProps {\n title: string;\n description: string;\n href: string;\n ctaLabel?: string;\n}\n\nexport function MarketplaceSignInGate({ title, description, href, ctaLabel = \"Set up account\" }: MarketplaceSignInGateProps) {\n return (\n <div className=\"flex flex-col items-center gap-4 p-6 py-10 text-center\">\n <Wallet className=\"h-10 w-10 text-muted-foreground\" />\n <div>\n <p className=\"font-semibold\">{title}</p>\n <p className=\"text-sm text-muted-foreground mt-1\">{description}</p>\n </div>\n <div className=\"btn-border-animated w-full p-[1px] rounded-lg\">\n <Button\n asChild\n className=\"w-full bg-transparent text-white rounded-[7px] hover:bg-transparent hover:brightness-110 active:scale-[0.98] transition-all\"\n >\n <a href={href}>{ctaLabel}</a>\n </Button>\n </div>\n </div>\n );\n}\n\ninterface MarketplaceErrorStateProps {\n tokenImage?: string | null;\n name: string;\n title: string;\n description: ReactNode;\n error?: string | null;\n txHash?: string | null;\n explorerUrl: string;\n onRetry?: () => void;\n onDone: () => void;\n doneLabel?: string;\n}\n\nexport function MarketplaceErrorState({\n tokenImage,\n name,\n title,\n description,\n error,\n txHash,\n explorerUrl,\n onRetry,\n onDone,\n doneLabel = \"Done\",\n}: MarketplaceErrorStateProps) {\n return (\n <div className=\"flex flex-col items-center gap-5 p-6 py-8\">\n {tokenImage ? (\n <div className=\"relative\">\n <div className=\"relative h-32 w-32 rounded-2xl overflow-hidden border border-border\">\n <Image src={tokenImage} alt={name} fill sizes=\"128px\" className=\"object-cover\" unoptimized />\n </div>\n <div className=\"absolute -bottom-2 -right-2 h-9 w-9 rounded-full bg-destructive flex items-center justify-center border-2 border-background\">\n <AlertCircle className=\"h-5 w-5 text-white\" />\n </div>\n </div>\n ) : (\n <div className=\"h-16 w-16 rounded-full bg-destructive/15 flex items-center justify-center\">\n <AlertCircle className=\"h-9 w-9 text-destructive\" />\n </div>\n )}\n <div className=\"text-center space-y-1 max-w-full\">\n <p className=\"font-bold text-xl break-words\">{title}</p>\n <p className=\"text-sm text-muted-foreground break-words\">{description}</p>\n </div>\n {error ? (\n <Alert variant=\"destructive\" className=\"text-left\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n ) : null}\n {txHash && <MarketplaceTxLink txHash={txHash} explorerUrl={explorerUrl} />}\n <div className=\"flex w-full gap-2\">\n {onRetry ? (\n <Button variant=\"outline\" className=\"flex-1 h-11\" onClick={onRetry}>\n Try again\n </Button>\n ) : null}\n <Button className=\"flex-1 h-11\" onClick={onDone}>{doneLabel}</Button>\n </div>\n </div>\n );\n}\n\ninterface MarketplaceDialogHeroProps {\n tokenImage?: string | null;\n tokenName?: string;\n tokenId: string;\n fallbackIcon: ReactNode;\n badge?: ReactNode;\n}\n\nexport function MarketplaceDialogHero({\n tokenImage,\n tokenName,\n tokenId,\n fallbackIcon,\n badge,\n}: MarketplaceDialogHeroProps) {\n const name = tokenName || `Token #${tokenId}`;\n\n return (\n <div className=\"relative flex justify-center pt-6 shrink-0\">\n <div className=\"relative h-32 w-32 rounded-2xl overflow-hidden border border-border bg-muted\">\n {tokenImage ? (\n <Image src={tokenImage} alt={name} fill sizes=\"128px\" className=\"object-cover\" unoptimized />\n ) : (\n <div className=\"h-full w-full bg-gradient-to-br from-brand-blue/20 via-brand-purple/10 to-transparent flex items-center justify-center\">\n {fallbackIcon}\n </div>\n )}\n </div>\n {badge}\n </div>\n );\n}\n\ninterface CurrencyPickerProps {\n currencies: string[];\n value: string;\n onChange: (value: string) => void;\n disabled?: boolean;\n}\n\nexport function CurrencyPicker({ currencies, value, onChange, disabled }: CurrencyPickerProps) {\n return (\n <div className=\"grid grid-cols-5 gap-1.5\">\n {currencies.map((c) => (\n <Button\n key={c}\n type=\"button\"\n variant={value === c ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => onChange(c)}\n disabled={disabled}\n className=\"gap-1 px-2 text-xs w-full\"\n >\n <CurrencyIcon symbol={c} size={13} className=\"shrink-0\" />\n <span className=\"truncate\">{c}</span>\n </Button>\n ))}\n </div>\n );\n}\n\ninterface DurationPickerProps {\n options: ReadonlyArray<{ label: string; seconds: number }>;\n value: number;\n onChange: (value: number) => void;\n disabled?: boolean;\n cols?: 3 | 4;\n}\n\nexport function DurationPicker({ options, value, onChange, disabled, cols = 3 }: DurationPickerProps) {\n return (\n <div className={cols === 4 ? \"grid grid-cols-4 gap-2\" : \"grid grid-cols-3 gap-2\"}>\n {options.map((opt) => (\n <Button\n key={opt.label}\n type=\"button\"\n variant={value === opt.seconds ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => onChange(opt.seconds)}\n disabled={disabled}\n className=\"text-xs\"\n >\n {opt.label}\n </Button>\n ))}\n </div>\n );\n}\n\ninterface MarketplaceConfirmStepProps {\n summary?: ReactNode;\n description: string;\n error?: string | null;\n secondaryLabel: string;\n onSecondary: () => void;\n primaryLabel: string;\n onPrimary: () => void;\n primaryDisabled?: boolean;\n primaryIcon?: ReactNode;\n primaryVariant?: \"default\" | \"destructive\";\n footer?: ReactNode;\n}\n\nexport function MarketplaceConfirmStep({\n summary,\n description,\n error,\n secondaryLabel,\n onSecondary,\n primaryLabel,\n onPrimary,\n primaryDisabled,\n primaryIcon,\n primaryVariant = \"default\",\n footer,\n}: MarketplaceConfirmStepProps) {\n const primaryButton = primaryVariant === \"destructive\" ? (\n <Button\n variant=\"destructive\"\n className=\"flex-1 h-11\"\n disabled={primaryDisabled}\n onClick={onPrimary}\n >\n {primaryLabel}\n </Button>\n ) : (\n <div\n className={cn(\n \"btn-border-animated p-[1px] rounded-xl flex-1\",\n primaryDisabled && \"pointer-events-none\"\n )}\n >\n <button\n className=\"w-full h-11 rounded-[11px] flex items-center justify-center gap-2 text-sm font-semibold text-white transition-all hover:brightness-110 active:scale-[0.98] bg-transparent\"\n disabled={primaryDisabled}\n onClick={onPrimary}\n >\n {primaryIcon}\n {primaryLabel}\n </button>\n </div>\n );\n\n return (\n <div className=\"px-6 pb-6 pt-3 space-y-4\">\n {summary}\n <p className=\"text-sm text-muted-foreground\">{description}</p>\n {error ? (\n <Alert variant=\"destructive\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n ) : null}\n <div className=\"flex gap-2 pt-1\">\n <Button\n variant=\"outline\"\n className=\"gap-1.5\"\n onClick={onSecondary}\n >\n {secondaryLabel}\n </Button>\n {primaryButton}\n </div>\n {footer}\n </div>\n );\n}\n"],"mappings":"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","names":["Image"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/marketplace-dialog-primitives.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport Image from \"./image.js\";\nimport { AlertCircle, ExternalLink, Loader2, Wallet } from \"lucide-react\";\nimport { Alert, AlertDescription } from \"./alert.js\";\nimport { Button } from \"./button.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\ninterface MarketplaceTxLinkProps {\n txHash: string;\n explorerUrl: string;\n className?: string;\n}\n\nexport function MarketplaceTxLink({ txHash, explorerUrl, className }: MarketplaceTxLinkProps) {\n return (\n <a\n href={`${explorerUrl}/tx/${txHash}`}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n \"inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors\",\n className\n )}\n >\n <span className=\"tabular-nums\">{txHash.slice(0, 10)}…{txHash.slice(-8)}</span>\n <ExternalLink className=\"h-3 w-3\" />\n </a>\n );\n}\n\ninterface MarketplaceProcessingStateProps {\n title: string;\n description?: string;\n imageUrl?: string | null;\n imageAlt?: string;\n txHash?: string | null;\n explorerUrl?: string;\n}\n\nexport function MarketplaceProcessingState({\n title,\n description = \"Keep this window open until it finishes.\",\n imageUrl,\n imageAlt = \"Token preview\",\n txHash,\n explorerUrl,\n}: MarketplaceProcessingStateProps) {\n return (\n <div className=\"flex flex-col items-center gap-5 p-6 py-8\">\n {imageUrl ? (\n <div className=\"relative h-20 w-20 rounded-2xl overflow-hidden border border-border\">\n <Image src={imageUrl} alt={imageAlt} fill sizes=\"80px\" className=\"object-cover\" unoptimized />\n <div className=\"absolute inset-0 bg-background/50 flex items-center justify-center\">\n <Loader2 className=\"h-7 w-7 animate-spin text-primary\" />\n </div>\n </div>\n ) : (\n <Loader2 className=\"h-10 w-10 animate-spin text-primary\" />\n )}\n <div className=\"text-center space-y-1\">\n <p className=\"font-semibold\">{title}</p>\n {txHash && explorerUrl ? (\n <MarketplaceTxLink txHash={txHash} explorerUrl={explorerUrl} className=\"mt-1\" />\n ) : null}\n </div>\n <p className=\"text-sm text-muted-foreground\">{description}</p>\n </div>\n );\n}\n\ninterface MarketplaceSignInGateProps {\n title: string;\n description: string;\n href: string;\n ctaLabel?: string;\n}\n\nexport function MarketplaceSignInGate({ title, description, href, ctaLabel = \"Set up account\" }: MarketplaceSignInGateProps) {\n return (\n <div className=\"flex flex-col items-center gap-4 p-6 py-10 text-center\">\n <Wallet className=\"h-10 w-10 text-muted-foreground\" />\n <div>\n <p className=\"font-semibold\">{title}</p>\n <p className=\"text-sm text-muted-foreground mt-1\">{description}</p>\n </div>\n <div className=\"btn-border-animated w-full p-[1px] rounded-lg\">\n <Button\n asChild\n className=\"w-full bg-transparent text-white rounded-[7px] hover:bg-transparent hover:brightness-110 active:scale-[0.98] transition-all\"\n >\n <a href={href}>{ctaLabel}</a>\n </Button>\n </div>\n </div>\n );\n}\n\ninterface MarketplaceErrorStateProps {\n tokenImage?: string | null;\n name: string;\n title: string;\n description: ReactNode;\n error?: string | null;\n txHash?: string | null;\n explorerUrl: string;\n onRetry?: () => void;\n onDone: () => void;\n doneLabel?: string;\n}\n\nexport function MarketplaceErrorState({\n tokenImage,\n name,\n title,\n description,\n error,\n txHash,\n explorerUrl,\n onRetry,\n onDone,\n doneLabel = \"Done\",\n}: MarketplaceErrorStateProps) {\n return (\n <div className=\"flex flex-col items-center gap-5 p-6 py-8\">\n {tokenImage ? (\n <div className=\"relative\">\n <div className=\"relative h-32 w-32 rounded-2xl overflow-hidden border border-border\">\n <Image src={tokenImage} alt={name} fill sizes=\"128px\" className=\"object-cover\" unoptimized />\n </div>\n <div className=\"absolute -bottom-2 -right-2 h-9 w-9 rounded-full bg-destructive flex items-center justify-center border-2 border-background\">\n <AlertCircle className=\"h-5 w-5 text-white\" />\n </div>\n </div>\n ) : (\n <div className=\"h-16 w-16 rounded-full bg-destructive/15 flex items-center justify-center\">\n <AlertCircle className=\"h-9 w-9 text-destructive\" />\n </div>\n )}\n <div className=\"text-center space-y-1 max-w-full\">\n <p className=\"font-bold text-xl break-words\">{title}</p>\n <p className=\"text-sm text-muted-foreground break-words\">{description}</p>\n </div>\n {error ? (\n <Alert variant=\"destructive\" className=\"text-left\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n ) : null}\n {txHash && <MarketplaceTxLink txHash={txHash} explorerUrl={explorerUrl} />}\n <div className=\"flex w-full gap-2\">\n {onRetry ? (\n <Button variant=\"outline\" className=\"flex-1 h-11\" onClick={onRetry}>\n Try again\n </Button>\n ) : null}\n <Button className=\"flex-1 h-11\" onClick={onDone}>{doneLabel}</Button>\n </div>\n </div>\n );\n}\n\ninterface MarketplaceDialogHeroProps {\n tokenImage?: string | null;\n tokenName?: string;\n tokenId: string;\n fallbackIcon: ReactNode;\n badge?: ReactNode;\n}\n\nexport function MarketplaceDialogHero({\n tokenImage,\n tokenName,\n tokenId,\n fallbackIcon,\n badge,\n}: MarketplaceDialogHeroProps) {\n const name = tokenName || `Token #${tokenId}`;\n\n return (\n <div className=\"relative flex justify-center pt-6 shrink-0\">\n <div className=\"relative h-32 w-32 rounded-2xl overflow-hidden border border-border bg-muted\">\n {tokenImage ? (\n <Image src={tokenImage} alt={name} fill sizes=\"128px\" className=\"object-cover\" unoptimized />\n ) : (\n <div className=\"h-full w-full bg-gradient-to-br from-brand-blue/20 via-brand-purple/10 to-transparent flex items-center justify-center\">\n {fallbackIcon}\n </div>\n )}\n </div>\n {badge}\n </div>\n );\n}\n\ninterface OrderSummaryHeroProps {\n name: string;\n image?: string | null;\n subtitle: ReactNode;\n tone?: \"default\" | \"destructive\";\n price?: { formatted: string | null; currency: string | null; decimals: number } | null;\n quantity?: number;\n usdTotal?: string | null;\n}\n\nexport function OrderSummaryHero({\n name,\n image,\n subtitle,\n tone = \"default\",\n price: rawPrice,\n quantity = 1,\n usdTotal,\n}: OrderSummaryHeroProps) {\n const price = rawPrice?.formatted && rawPrice.currency\n ? { formatted: rawPrice.formatted, currency: rawPrice.currency, decimals: rawPrice.decimals }\n : null;\n const unit = price ? parseFloat(price.formatted) : null;\n const showTotal = unit !== null && quantity > 1;\n const crypto = price\n ? formatDisplayPrice(showTotal ? (unit! * quantity).toFixed(price.decimals <= 6 ? 2 : 4) : price.formatted)\n : \"\";\n const stable = price ? isStableCurrency(price.currency) : false;\n const face = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\n return (\n <div>\n <div className=\"flex justify-center pt-6 shrink-0\">\n <div className=\"relative h-32 w-32 rounded-2xl overflow-hidden border border-border bg-muted\">\n {image ? (\n <Image src={image} alt={name} fill sizes=\"128px\" className=\"object-cover\" unoptimized />\n ) : (\n <div\n className={cn(\n \"h-full w-full bg-gradient-to-br to-transparent\",\n tone === \"destructive\"\n ? \"from-destructive/20 via-brand-rose/10\"\n : \"from-primary/20 via-brand-purple/10\",\n )}\n />\n )}\n </div>\n </div>\n\n <div className=\"flex items-center justify-between gap-4 px-5 pt-4 pb-1\">\n <div className=\"min-w-0\">\n <p className=\"font-bold text-lg leading-tight truncate\">{name}</p>\n <div className=\"mt-1 text-2xs font-medium text-muted-foreground\">{subtitle}</div>\n </div>\n {price ? (\n <div className=\"shrink-0 text-right\">\n {usdTotal ? (\n <p className={cn(face, \"text-2xl\")}>{usdTotal}</p>\n ) : (\n <p className={cn(\"flex items-center gap-2 justify-end text-2xl\", face)}>\n <span className=\"grid h-6 w-6 shrink-0 place-items-center rounded-full bg-foreground/[0.06]\">\n <CurrencyIcon symbol={price.currency} size={13} />\n </span>\n {crypto}\n </p>\n )}\n <p className=\"mt-0.5 inline-flex items-center justify-end gap-1.5 text-sm font-semibold text-muted-foreground\">\n {usdTotal ? (\n <span className=\"grid h-4 w-4 shrink-0 place-items-center rounded-full bg-foreground/[0.06]\">\n <CurrencyIcon symbol={price.currency} size={10} />\n </span>\n ) : null}\n {usdTotal ? (stable ? price.currency : `${crypto} ${price.currency}`) : price.currency}\n </p>\n {showTotal ? (\n <p className=\"mt-0.5 text-2xs text-muted-foreground/60\">\n {formatDisplayPrice(price.formatted)} × {quantity} {price.currency}\n </p>\n ) : null}\n </div>\n ) : null}\n </div>\n </div>\n );\n}\n\ninterface CurrencyPickerProps {\n currencies: string[];\n value: string;\n onChange: (value: string) => void;\n disabled?: boolean;\n}\n\nexport function CurrencyPicker({ currencies, value, onChange, disabled }: CurrencyPickerProps) {\n return (\n <div className=\"grid grid-cols-5 gap-1.5\">\n {currencies.map((c) => (\n <Button\n key={c}\n type=\"button\"\n variant={value === c ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => onChange(c)}\n disabled={disabled}\n className=\"gap-1 px-2 text-xs w-full\"\n >\n <CurrencyIcon symbol={c} size={13} className=\"shrink-0\" />\n <span className=\"truncate\">{c}</span>\n </Button>\n ))}\n </div>\n );\n}\n\ninterface DurationPickerProps {\n options: ReadonlyArray<{ label: string; seconds: number }>;\n value: number;\n onChange: (value: number) => void;\n disabled?: boolean;\n cols?: 3 | 4;\n}\n\nexport function DurationPicker({ options, value, onChange, disabled, cols = 3 }: DurationPickerProps) {\n return (\n <div className={cols === 4 ? \"grid grid-cols-4 gap-2\" : \"grid grid-cols-3 gap-2\"}>\n {options.map((opt) => (\n <Button\n key={opt.label}\n type=\"button\"\n variant={value === opt.seconds ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => onChange(opt.seconds)}\n disabled={disabled}\n className=\"text-xs\"\n >\n {opt.label}\n </Button>\n ))}\n </div>\n );\n}\n\ninterface MarketplaceConfirmStepProps {\n summary?: ReactNode;\n description: string;\n error?: string | null;\n secondaryLabel: string;\n onSecondary: () => void;\n primaryLabel: string;\n onPrimary: () => void;\n primaryDisabled?: boolean;\n primaryIcon?: ReactNode;\n primaryVariant?: \"default\" | \"destructive\";\n footer?: ReactNode;\n}\n\nexport function MarketplaceConfirmStep({\n summary,\n description,\n error,\n secondaryLabel,\n onSecondary,\n primaryLabel,\n onPrimary,\n primaryDisabled,\n primaryIcon,\n primaryVariant = \"default\",\n footer,\n}: MarketplaceConfirmStepProps) {\n const primaryButton = primaryVariant === \"destructive\" ? (\n <Button\n variant=\"destructive\"\n className=\"flex-1 h-11\"\n disabled={primaryDisabled}\n onClick={onPrimary}\n >\n {primaryLabel}\n </Button>\n ) : (\n <div\n className={cn(\n \"btn-border-animated p-[1px] rounded-xl flex-1\",\n primaryDisabled && \"pointer-events-none\"\n )}\n >\n <button\n className=\"w-full h-11 rounded-[11px] flex items-center justify-center gap-2 text-sm font-semibold text-white transition-all hover:brightness-110 active:scale-[0.98] bg-transparent\"\n disabled={primaryDisabled}\n onClick={onPrimary}\n >\n {primaryIcon}\n {primaryLabel}\n </button>\n </div>\n );\n\n return (\n <div className=\"px-6 pb-6 pt-3 space-y-4\">\n {summary}\n <p className=\"text-sm text-muted-foreground\">{description}</p>\n {error ? (\n <Alert variant=\"destructive\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n ) : null}\n <div className=\"flex gap-2 pt-1\">\n <Button\n variant=\"outline\"\n className=\"gap-1.5\"\n onClick={onSecondary}\n >\n {secondaryLabel}\n </Button>\n {primaryButton}\n </div>\n {footer}\n </div>\n );\n}\n"],"mappings":"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","names":["Image"]}
|
|
@@ -44,6 +44,20 @@ interface MarketplaceDialogHeroProps {
|
|
|
44
44
|
badge?: ReactNode;
|
|
45
45
|
}
|
|
46
46
|
declare function MarketplaceDialogHero({ tokenImage, tokenName, tokenId, fallbackIcon, badge, }: MarketplaceDialogHeroProps): react_jsx_runtime.JSX.Element;
|
|
47
|
+
interface OrderSummaryHeroProps {
|
|
48
|
+
name: string;
|
|
49
|
+
image?: string | null;
|
|
50
|
+
subtitle: ReactNode;
|
|
51
|
+
tone?: "default" | "destructive";
|
|
52
|
+
price?: {
|
|
53
|
+
formatted: string | null;
|
|
54
|
+
currency: string | null;
|
|
55
|
+
decimals: number;
|
|
56
|
+
} | null;
|
|
57
|
+
quantity?: number;
|
|
58
|
+
usdTotal?: string | null;
|
|
59
|
+
}
|
|
60
|
+
declare function OrderSummaryHero({ name, image, subtitle, tone, price: rawPrice, quantity, usdTotal, }: OrderSummaryHeroProps): react_jsx_runtime.JSX.Element;
|
|
47
61
|
interface CurrencyPickerProps {
|
|
48
62
|
currencies: string[];
|
|
49
63
|
value: string;
|
|
@@ -77,4 +91,4 @@ interface MarketplaceConfirmStepProps {
|
|
|
77
91
|
}
|
|
78
92
|
declare function MarketplaceConfirmStep({ summary, description, error, secondaryLabel, onSecondary, primaryLabel, onPrimary, primaryDisabled, primaryIcon, primaryVariant, footer, }: MarketplaceConfirmStepProps): react_jsx_runtime.JSX.Element;
|
|
79
93
|
|
|
80
|
-
export { CurrencyPicker, DurationPicker, MarketplaceConfirmStep, MarketplaceDialogHero, MarketplaceErrorState, MarketplaceProcessingState, MarketplaceSignInGate, MarketplaceTxLink };
|
|
94
|
+
export { CurrencyPicker, DurationPicker, MarketplaceConfirmStep, MarketplaceDialogHero, MarketplaceErrorState, MarketplaceProcessingState, MarketplaceSignInGate, MarketplaceTxLink, OrderSummaryHero };
|
|
@@ -44,6 +44,20 @@ interface MarketplaceDialogHeroProps {
|
|
|
44
44
|
badge?: ReactNode;
|
|
45
45
|
}
|
|
46
46
|
declare function MarketplaceDialogHero({ tokenImage, tokenName, tokenId, fallbackIcon, badge, }: MarketplaceDialogHeroProps): react_jsx_runtime.JSX.Element;
|
|
47
|
+
interface OrderSummaryHeroProps {
|
|
48
|
+
name: string;
|
|
49
|
+
image?: string | null;
|
|
50
|
+
subtitle: ReactNode;
|
|
51
|
+
tone?: "default" | "destructive";
|
|
52
|
+
price?: {
|
|
53
|
+
formatted: string | null;
|
|
54
|
+
currency: string | null;
|
|
55
|
+
decimals: number;
|
|
56
|
+
} | null;
|
|
57
|
+
quantity?: number;
|
|
58
|
+
usdTotal?: string | null;
|
|
59
|
+
}
|
|
60
|
+
declare function OrderSummaryHero({ name, image, subtitle, tone, price: rawPrice, quantity, usdTotal, }: OrderSummaryHeroProps): react_jsx_runtime.JSX.Element;
|
|
47
61
|
interface CurrencyPickerProps {
|
|
48
62
|
currencies: string[];
|
|
49
63
|
value: string;
|
|
@@ -77,4 +91,4 @@ interface MarketplaceConfirmStepProps {
|
|
|
77
91
|
}
|
|
78
92
|
declare function MarketplaceConfirmStep({ summary, description, error, secondaryLabel, onSecondary, primaryLabel, onPrimary, primaryDisabled, primaryIcon, primaryVariant, footer, }: MarketplaceConfirmStepProps): react_jsx_runtime.JSX.Element;
|
|
79
93
|
|
|
80
|
-
export { CurrencyPicker, DurationPicker, MarketplaceConfirmStep, MarketplaceDialogHero, MarketplaceErrorState, MarketplaceProcessingState, MarketplaceSignInGate, MarketplaceTxLink };
|
|
94
|
+
export { CurrencyPicker, DurationPicker, MarketplaceConfirmStep, MarketplaceDialogHero, MarketplaceErrorState, MarketplaceProcessingState, MarketplaceSignInGate, MarketplaceTxLink, OrderSummaryHero };
|
|
@@ -6,6 +6,7 @@ import { Alert, AlertDescription } from "./alert.js";
|
|
|
6
6
|
import { Button } from "./button.js";
|
|
7
7
|
import { CurrencyIcon } from "./currency-icon.js";
|
|
8
8
|
import { cn } from "../utils/cn.js";
|
|
9
|
+
import { formatDisplayPrice, isStableCurrency } from "../utils/format.js";
|
|
9
10
|
function MarketplaceTxLink({ txHash, explorerUrl, className }) {
|
|
10
11
|
return /* @__PURE__ */ jsxs(
|
|
11
12
|
"a",
|
|
@@ -110,6 +111,56 @@ function MarketplaceDialogHero({
|
|
|
110
111
|
badge
|
|
111
112
|
] });
|
|
112
113
|
}
|
|
114
|
+
function OrderSummaryHero({
|
|
115
|
+
name,
|
|
116
|
+
image,
|
|
117
|
+
subtitle,
|
|
118
|
+
tone = "default",
|
|
119
|
+
price: rawPrice,
|
|
120
|
+
quantity = 1,
|
|
121
|
+
usdTotal
|
|
122
|
+
}) {
|
|
123
|
+
const price = rawPrice?.formatted && rawPrice.currency ? { formatted: rawPrice.formatted, currency: rawPrice.currency, decimals: rawPrice.decimals } : null;
|
|
124
|
+
const unit = price ? parseFloat(price.formatted) : null;
|
|
125
|
+
const showTotal = unit !== null && quantity > 1;
|
|
126
|
+
const crypto = price ? formatDisplayPrice(showTotal ? (unit * quantity).toFixed(price.decimals <= 6 ? 2 : 4) : price.formatted) : "";
|
|
127
|
+
const stable = price ? isStableCurrency(price.currency) : false;
|
|
128
|
+
const face = "font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums";
|
|
129
|
+
return /* @__PURE__ */ jsxs("div", { children: [
|
|
130
|
+
/* @__PURE__ */ jsx("div", { className: "flex justify-center pt-6 shrink-0", children: /* @__PURE__ */ jsx("div", { className: "relative h-32 w-32 rounded-2xl overflow-hidden border border-border bg-muted", children: image ? /* @__PURE__ */ jsx(Image, { src: image, alt: name, fill: true, sizes: "128px", className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx(
|
|
131
|
+
"div",
|
|
132
|
+
{
|
|
133
|
+
className: cn(
|
|
134
|
+
"h-full w-full bg-gradient-to-br to-transparent",
|
|
135
|
+
tone === "destructive" ? "from-destructive/20 via-brand-rose/10" : "from-primary/20 via-brand-purple/10"
|
|
136
|
+
)
|
|
137
|
+
}
|
|
138
|
+
) }) }),
|
|
139
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 px-5 pt-4 pb-1", children: [
|
|
140
|
+
/* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
141
|
+
/* @__PURE__ */ jsx("p", { className: "font-bold text-lg leading-tight truncate", children: name }),
|
|
142
|
+
/* @__PURE__ */ jsx("div", { className: "mt-1 text-2xs font-medium text-muted-foreground", children: subtitle })
|
|
143
|
+
] }),
|
|
144
|
+
price ? /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right", children: [
|
|
145
|
+
usdTotal ? /* @__PURE__ */ jsx("p", { className: cn(face, "text-2xl"), children: usdTotal }) : /* @__PURE__ */ jsxs("p", { className: cn("flex items-center gap-2 justify-end text-2xl", face), children: [
|
|
146
|
+
/* @__PURE__ */ jsx("span", { className: "grid h-6 w-6 shrink-0 place-items-center rounded-full bg-foreground/[0.06]", children: /* @__PURE__ */ jsx(CurrencyIcon, { symbol: price.currency, size: 13 }) }),
|
|
147
|
+
crypto
|
|
148
|
+
] }),
|
|
149
|
+
/* @__PURE__ */ jsxs("p", { className: "mt-0.5 inline-flex items-center justify-end gap-1.5 text-sm font-semibold text-muted-foreground", children: [
|
|
150
|
+
usdTotal ? /* @__PURE__ */ jsx("span", { className: "grid h-4 w-4 shrink-0 place-items-center rounded-full bg-foreground/[0.06]", children: /* @__PURE__ */ jsx(CurrencyIcon, { symbol: price.currency, size: 10 }) }) : null,
|
|
151
|
+
usdTotal ? stable ? price.currency : `${crypto} ${price.currency}` : price.currency
|
|
152
|
+
] }),
|
|
153
|
+
showTotal ? /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-2xs text-muted-foreground/60", children: [
|
|
154
|
+
formatDisplayPrice(price.formatted),
|
|
155
|
+
" \xD7 ",
|
|
156
|
+
quantity,
|
|
157
|
+
" ",
|
|
158
|
+
price.currency
|
|
159
|
+
] }) : null
|
|
160
|
+
] }) : null
|
|
161
|
+
] })
|
|
162
|
+
] });
|
|
163
|
+
}
|
|
113
164
|
function CurrencyPicker({ currencies, value, onChange, disabled }) {
|
|
114
165
|
return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-5 gap-1.5", children: currencies.map((c) => /* @__PURE__ */ jsxs(
|
|
115
166
|
Button,
|
|
@@ -216,6 +267,7 @@ export {
|
|
|
216
267
|
MarketplaceErrorState,
|
|
217
268
|
MarketplaceProcessingState,
|
|
218
269
|
MarketplaceSignInGate,
|
|
219
|
-
MarketplaceTxLink
|
|
270
|
+
MarketplaceTxLink,
|
|
271
|
+
OrderSummaryHero
|
|
220
272
|
};
|
|
221
273
|
//# sourceMappingURL=marketplace-dialog-primitives.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/marketplace-dialog-primitives.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport Image from \"./image.js\";\nimport { AlertCircle, ExternalLink, Loader2, Wallet } from \"lucide-react\";\nimport { Alert, AlertDescription } from \"./alert.js\";\nimport { Button } from \"./button.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\n\ninterface MarketplaceTxLinkProps {\n txHash: string;\n explorerUrl: string;\n className?: string;\n}\n\nexport function MarketplaceTxLink({ txHash, explorerUrl, className }: MarketplaceTxLinkProps) {\n return (\n <a\n href={`${explorerUrl}/tx/${txHash}`}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n \"inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors\",\n className\n )}\n >\n <span className=\"tabular-nums\">{txHash.slice(0, 10)}…{txHash.slice(-8)}</span>\n <ExternalLink className=\"h-3 w-3\" />\n </a>\n );\n}\n\ninterface MarketplaceProcessingStateProps {\n title: string;\n description?: string;\n imageUrl?: string | null;\n imageAlt?: string;\n txHash?: string | null;\n explorerUrl?: string;\n}\n\nexport function MarketplaceProcessingState({\n title,\n description = \"Keep this window open until it finishes.\",\n imageUrl,\n imageAlt = \"Token preview\",\n txHash,\n explorerUrl,\n}: MarketplaceProcessingStateProps) {\n return (\n <div className=\"flex flex-col items-center gap-5 p-6 py-8\">\n {imageUrl ? (\n <div className=\"relative h-20 w-20 rounded-2xl overflow-hidden border border-border\">\n <Image src={imageUrl} alt={imageAlt} fill sizes=\"80px\" className=\"object-cover\" unoptimized />\n <div className=\"absolute inset-0 bg-background/50 flex items-center justify-center\">\n <Loader2 className=\"h-7 w-7 animate-spin text-primary\" />\n </div>\n </div>\n ) : (\n <Loader2 className=\"h-10 w-10 animate-spin text-primary\" />\n )}\n <div className=\"text-center space-y-1\">\n <p className=\"font-semibold\">{title}</p>\n {txHash && explorerUrl ? (\n <MarketplaceTxLink txHash={txHash} explorerUrl={explorerUrl} className=\"mt-1\" />\n ) : null}\n </div>\n <p className=\"text-sm text-muted-foreground\">{description}</p>\n </div>\n );\n}\n\ninterface MarketplaceSignInGateProps {\n title: string;\n description: string;\n href: string;\n ctaLabel?: string;\n}\n\nexport function MarketplaceSignInGate({ title, description, href, ctaLabel = \"Set up account\" }: MarketplaceSignInGateProps) {\n return (\n <div className=\"flex flex-col items-center gap-4 p-6 py-10 text-center\">\n <Wallet className=\"h-10 w-10 text-muted-foreground\" />\n <div>\n <p className=\"font-semibold\">{title}</p>\n <p className=\"text-sm text-muted-foreground mt-1\">{description}</p>\n </div>\n <div className=\"btn-border-animated w-full p-[1px] rounded-lg\">\n <Button\n asChild\n className=\"w-full bg-transparent text-white rounded-[7px] hover:bg-transparent hover:brightness-110 active:scale-[0.98] transition-all\"\n >\n <a href={href}>{ctaLabel}</a>\n </Button>\n </div>\n </div>\n );\n}\n\ninterface MarketplaceErrorStateProps {\n tokenImage?: string | null;\n name: string;\n title: string;\n description: ReactNode;\n error?: string | null;\n txHash?: string | null;\n explorerUrl: string;\n onRetry?: () => void;\n onDone: () => void;\n doneLabel?: string;\n}\n\nexport function MarketplaceErrorState({\n tokenImage,\n name,\n title,\n description,\n error,\n txHash,\n explorerUrl,\n onRetry,\n onDone,\n doneLabel = \"Done\",\n}: MarketplaceErrorStateProps) {\n return (\n <div className=\"flex flex-col items-center gap-5 p-6 py-8\">\n {tokenImage ? (\n <div className=\"relative\">\n <div className=\"relative h-32 w-32 rounded-2xl overflow-hidden border border-border\">\n <Image src={tokenImage} alt={name} fill sizes=\"128px\" className=\"object-cover\" unoptimized />\n </div>\n <div className=\"absolute -bottom-2 -right-2 h-9 w-9 rounded-full bg-destructive flex items-center justify-center border-2 border-background\">\n <AlertCircle className=\"h-5 w-5 text-white\" />\n </div>\n </div>\n ) : (\n <div className=\"h-16 w-16 rounded-full bg-destructive/15 flex items-center justify-center\">\n <AlertCircle className=\"h-9 w-9 text-destructive\" />\n </div>\n )}\n <div className=\"text-center space-y-1 max-w-full\">\n <p className=\"font-bold text-xl break-words\">{title}</p>\n <p className=\"text-sm text-muted-foreground break-words\">{description}</p>\n </div>\n {error ? (\n <Alert variant=\"destructive\" className=\"text-left\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n ) : null}\n {txHash && <MarketplaceTxLink txHash={txHash} explorerUrl={explorerUrl} />}\n <div className=\"flex w-full gap-2\">\n {onRetry ? (\n <Button variant=\"outline\" className=\"flex-1 h-11\" onClick={onRetry}>\n Try again\n </Button>\n ) : null}\n <Button className=\"flex-1 h-11\" onClick={onDone}>{doneLabel}</Button>\n </div>\n </div>\n );\n}\n\ninterface MarketplaceDialogHeroProps {\n tokenImage?: string | null;\n tokenName?: string;\n tokenId: string;\n fallbackIcon: ReactNode;\n badge?: ReactNode;\n}\n\nexport function MarketplaceDialogHero({\n tokenImage,\n tokenName,\n tokenId,\n fallbackIcon,\n badge,\n}: MarketplaceDialogHeroProps) {\n const name = tokenName || `Token #${tokenId}`;\n\n return (\n <div className=\"relative flex justify-center pt-6 shrink-0\">\n <div className=\"relative h-32 w-32 rounded-2xl overflow-hidden border border-border bg-muted\">\n {tokenImage ? (\n <Image src={tokenImage} alt={name} fill sizes=\"128px\" className=\"object-cover\" unoptimized />\n ) : (\n <div className=\"h-full w-full bg-gradient-to-br from-brand-blue/20 via-brand-purple/10 to-transparent flex items-center justify-center\">\n {fallbackIcon}\n </div>\n )}\n </div>\n {badge}\n </div>\n );\n}\n\ninterface CurrencyPickerProps {\n currencies: string[];\n value: string;\n onChange: (value: string) => void;\n disabled?: boolean;\n}\n\nexport function CurrencyPicker({ currencies, value, onChange, disabled }: CurrencyPickerProps) {\n return (\n <div className=\"grid grid-cols-5 gap-1.5\">\n {currencies.map((c) => (\n <Button\n key={c}\n type=\"button\"\n variant={value === c ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => onChange(c)}\n disabled={disabled}\n className=\"gap-1 px-2 text-xs w-full\"\n >\n <CurrencyIcon symbol={c} size={13} className=\"shrink-0\" />\n <span className=\"truncate\">{c}</span>\n </Button>\n ))}\n </div>\n );\n}\n\ninterface DurationPickerProps {\n options: ReadonlyArray<{ label: string; seconds: number }>;\n value: number;\n onChange: (value: number) => void;\n disabled?: boolean;\n cols?: 3 | 4;\n}\n\nexport function DurationPicker({ options, value, onChange, disabled, cols = 3 }: DurationPickerProps) {\n return (\n <div className={cols === 4 ? \"grid grid-cols-4 gap-2\" : \"grid grid-cols-3 gap-2\"}>\n {options.map((opt) => (\n <Button\n key={opt.label}\n type=\"button\"\n variant={value === opt.seconds ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => onChange(opt.seconds)}\n disabled={disabled}\n className=\"text-xs\"\n >\n {opt.label}\n </Button>\n ))}\n </div>\n );\n}\n\ninterface MarketplaceConfirmStepProps {\n summary?: ReactNode;\n description: string;\n error?: string | null;\n secondaryLabel: string;\n onSecondary: () => void;\n primaryLabel: string;\n onPrimary: () => void;\n primaryDisabled?: boolean;\n primaryIcon?: ReactNode;\n primaryVariant?: \"default\" | \"destructive\";\n footer?: ReactNode;\n}\n\nexport function MarketplaceConfirmStep({\n summary,\n description,\n error,\n secondaryLabel,\n onSecondary,\n primaryLabel,\n onPrimary,\n primaryDisabled,\n primaryIcon,\n primaryVariant = \"default\",\n footer,\n}: MarketplaceConfirmStepProps) {\n const primaryButton = primaryVariant === \"destructive\" ? (\n <Button\n variant=\"destructive\"\n className=\"flex-1 h-11\"\n disabled={primaryDisabled}\n onClick={onPrimary}\n >\n {primaryLabel}\n </Button>\n ) : (\n <div\n className={cn(\n \"btn-border-animated p-[1px] rounded-xl flex-1\",\n primaryDisabled && \"pointer-events-none\"\n )}\n >\n <button\n className=\"w-full h-11 rounded-[11px] flex items-center justify-center gap-2 text-sm font-semibold text-white transition-all hover:brightness-110 active:scale-[0.98] bg-transparent\"\n disabled={primaryDisabled}\n onClick={onPrimary}\n >\n {primaryIcon}\n {primaryLabel}\n </button>\n </div>\n );\n\n return (\n <div className=\"px-6 pb-6 pt-3 space-y-4\">\n {summary}\n <p className=\"text-sm text-muted-foreground\">{description}</p>\n {error ? (\n <Alert variant=\"destructive\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n ) : null}\n <div className=\"flex gap-2 pt-1\">\n <Button\n variant=\"outline\"\n className=\"gap-1.5\"\n onClick={onSecondary}\n >\n {secondaryLabel}\n </Button>\n {primaryButton}\n </div>\n {footer}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/marketplace-dialog-primitives.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport Image from \"./image.js\";\nimport { AlertCircle, ExternalLink, Loader2, Wallet } from \"lucide-react\";\nimport { Alert, AlertDescription } from \"./alert.js\";\nimport { Button } from \"./button.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\ninterface MarketplaceTxLinkProps {\n txHash: string;\n explorerUrl: string;\n className?: string;\n}\n\nexport function MarketplaceTxLink({ txHash, explorerUrl, className }: MarketplaceTxLinkProps) {\n return (\n <a\n href={`${explorerUrl}/tx/${txHash}`}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={cn(\n \"inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors\",\n className\n )}\n >\n <span className=\"tabular-nums\">{txHash.slice(0, 10)}…{txHash.slice(-8)}</span>\n <ExternalLink className=\"h-3 w-3\" />\n </a>\n );\n}\n\ninterface MarketplaceProcessingStateProps {\n title: string;\n description?: string;\n imageUrl?: string | null;\n imageAlt?: string;\n txHash?: string | null;\n explorerUrl?: string;\n}\n\nexport function MarketplaceProcessingState({\n title,\n description = \"Keep this window open until it finishes.\",\n imageUrl,\n imageAlt = \"Token preview\",\n txHash,\n explorerUrl,\n}: MarketplaceProcessingStateProps) {\n return (\n <div className=\"flex flex-col items-center gap-5 p-6 py-8\">\n {imageUrl ? (\n <div className=\"relative h-20 w-20 rounded-2xl overflow-hidden border border-border\">\n <Image src={imageUrl} alt={imageAlt} fill sizes=\"80px\" className=\"object-cover\" unoptimized />\n <div className=\"absolute inset-0 bg-background/50 flex items-center justify-center\">\n <Loader2 className=\"h-7 w-7 animate-spin text-primary\" />\n </div>\n </div>\n ) : (\n <Loader2 className=\"h-10 w-10 animate-spin text-primary\" />\n )}\n <div className=\"text-center space-y-1\">\n <p className=\"font-semibold\">{title}</p>\n {txHash && explorerUrl ? (\n <MarketplaceTxLink txHash={txHash} explorerUrl={explorerUrl} className=\"mt-1\" />\n ) : null}\n </div>\n <p className=\"text-sm text-muted-foreground\">{description}</p>\n </div>\n );\n}\n\ninterface MarketplaceSignInGateProps {\n title: string;\n description: string;\n href: string;\n ctaLabel?: string;\n}\n\nexport function MarketplaceSignInGate({ title, description, href, ctaLabel = \"Set up account\" }: MarketplaceSignInGateProps) {\n return (\n <div className=\"flex flex-col items-center gap-4 p-6 py-10 text-center\">\n <Wallet className=\"h-10 w-10 text-muted-foreground\" />\n <div>\n <p className=\"font-semibold\">{title}</p>\n <p className=\"text-sm text-muted-foreground mt-1\">{description}</p>\n </div>\n <div className=\"btn-border-animated w-full p-[1px] rounded-lg\">\n <Button\n asChild\n className=\"w-full bg-transparent text-white rounded-[7px] hover:bg-transparent hover:brightness-110 active:scale-[0.98] transition-all\"\n >\n <a href={href}>{ctaLabel}</a>\n </Button>\n </div>\n </div>\n );\n}\n\ninterface MarketplaceErrorStateProps {\n tokenImage?: string | null;\n name: string;\n title: string;\n description: ReactNode;\n error?: string | null;\n txHash?: string | null;\n explorerUrl: string;\n onRetry?: () => void;\n onDone: () => void;\n doneLabel?: string;\n}\n\nexport function MarketplaceErrorState({\n tokenImage,\n name,\n title,\n description,\n error,\n txHash,\n explorerUrl,\n onRetry,\n onDone,\n doneLabel = \"Done\",\n}: MarketplaceErrorStateProps) {\n return (\n <div className=\"flex flex-col items-center gap-5 p-6 py-8\">\n {tokenImage ? (\n <div className=\"relative\">\n <div className=\"relative h-32 w-32 rounded-2xl overflow-hidden border border-border\">\n <Image src={tokenImage} alt={name} fill sizes=\"128px\" className=\"object-cover\" unoptimized />\n </div>\n <div className=\"absolute -bottom-2 -right-2 h-9 w-9 rounded-full bg-destructive flex items-center justify-center border-2 border-background\">\n <AlertCircle className=\"h-5 w-5 text-white\" />\n </div>\n </div>\n ) : (\n <div className=\"h-16 w-16 rounded-full bg-destructive/15 flex items-center justify-center\">\n <AlertCircle className=\"h-9 w-9 text-destructive\" />\n </div>\n )}\n <div className=\"text-center space-y-1 max-w-full\">\n <p className=\"font-bold text-xl break-words\">{title}</p>\n <p className=\"text-sm text-muted-foreground break-words\">{description}</p>\n </div>\n {error ? (\n <Alert variant=\"destructive\" className=\"text-left\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n ) : null}\n {txHash && <MarketplaceTxLink txHash={txHash} explorerUrl={explorerUrl} />}\n <div className=\"flex w-full gap-2\">\n {onRetry ? (\n <Button variant=\"outline\" className=\"flex-1 h-11\" onClick={onRetry}>\n Try again\n </Button>\n ) : null}\n <Button className=\"flex-1 h-11\" onClick={onDone}>{doneLabel}</Button>\n </div>\n </div>\n );\n}\n\ninterface MarketplaceDialogHeroProps {\n tokenImage?: string | null;\n tokenName?: string;\n tokenId: string;\n fallbackIcon: ReactNode;\n badge?: ReactNode;\n}\n\nexport function MarketplaceDialogHero({\n tokenImage,\n tokenName,\n tokenId,\n fallbackIcon,\n badge,\n}: MarketplaceDialogHeroProps) {\n const name = tokenName || `Token #${tokenId}`;\n\n return (\n <div className=\"relative flex justify-center pt-6 shrink-0\">\n <div className=\"relative h-32 w-32 rounded-2xl overflow-hidden border border-border bg-muted\">\n {tokenImage ? (\n <Image src={tokenImage} alt={name} fill sizes=\"128px\" className=\"object-cover\" unoptimized />\n ) : (\n <div className=\"h-full w-full bg-gradient-to-br from-brand-blue/20 via-brand-purple/10 to-transparent flex items-center justify-center\">\n {fallbackIcon}\n </div>\n )}\n </div>\n {badge}\n </div>\n );\n}\n\ninterface OrderSummaryHeroProps {\n name: string;\n image?: string | null;\n subtitle: ReactNode;\n tone?: \"default\" | \"destructive\";\n price?: { formatted: string | null; currency: string | null; decimals: number } | null;\n quantity?: number;\n usdTotal?: string | null;\n}\n\nexport function OrderSummaryHero({\n name,\n image,\n subtitle,\n tone = \"default\",\n price: rawPrice,\n quantity = 1,\n usdTotal,\n}: OrderSummaryHeroProps) {\n const price = rawPrice?.formatted && rawPrice.currency\n ? { formatted: rawPrice.formatted, currency: rawPrice.currency, decimals: rawPrice.decimals }\n : null;\n const unit = price ? parseFloat(price.formatted) : null;\n const showTotal = unit !== null && quantity > 1;\n const crypto = price\n ? formatDisplayPrice(showTotal ? (unit! * quantity).toFixed(price.decimals <= 6 ? 2 : 4) : price.formatted)\n : \"\";\n const stable = price ? isStableCurrency(price.currency) : false;\n const face = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\n return (\n <div>\n <div className=\"flex justify-center pt-6 shrink-0\">\n <div className=\"relative h-32 w-32 rounded-2xl overflow-hidden border border-border bg-muted\">\n {image ? (\n <Image src={image} alt={name} fill sizes=\"128px\" className=\"object-cover\" unoptimized />\n ) : (\n <div\n className={cn(\n \"h-full w-full bg-gradient-to-br to-transparent\",\n tone === \"destructive\"\n ? \"from-destructive/20 via-brand-rose/10\"\n : \"from-primary/20 via-brand-purple/10\",\n )}\n />\n )}\n </div>\n </div>\n\n <div className=\"flex items-center justify-between gap-4 px-5 pt-4 pb-1\">\n <div className=\"min-w-0\">\n <p className=\"font-bold text-lg leading-tight truncate\">{name}</p>\n <div className=\"mt-1 text-2xs font-medium text-muted-foreground\">{subtitle}</div>\n </div>\n {price ? (\n <div className=\"shrink-0 text-right\">\n {usdTotal ? (\n <p className={cn(face, \"text-2xl\")}>{usdTotal}</p>\n ) : (\n <p className={cn(\"flex items-center gap-2 justify-end text-2xl\", face)}>\n <span className=\"grid h-6 w-6 shrink-0 place-items-center rounded-full bg-foreground/[0.06]\">\n <CurrencyIcon symbol={price.currency} size={13} />\n </span>\n {crypto}\n </p>\n )}\n <p className=\"mt-0.5 inline-flex items-center justify-end gap-1.5 text-sm font-semibold text-muted-foreground\">\n {usdTotal ? (\n <span className=\"grid h-4 w-4 shrink-0 place-items-center rounded-full bg-foreground/[0.06]\">\n <CurrencyIcon symbol={price.currency} size={10} />\n </span>\n ) : null}\n {usdTotal ? (stable ? price.currency : `${crypto} ${price.currency}`) : price.currency}\n </p>\n {showTotal ? (\n <p className=\"mt-0.5 text-2xs text-muted-foreground/60\">\n {formatDisplayPrice(price.formatted)} × {quantity} {price.currency}\n </p>\n ) : null}\n </div>\n ) : null}\n </div>\n </div>\n );\n}\n\ninterface CurrencyPickerProps {\n currencies: string[];\n value: string;\n onChange: (value: string) => void;\n disabled?: boolean;\n}\n\nexport function CurrencyPicker({ currencies, value, onChange, disabled }: CurrencyPickerProps) {\n return (\n <div className=\"grid grid-cols-5 gap-1.5\">\n {currencies.map((c) => (\n <Button\n key={c}\n type=\"button\"\n variant={value === c ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => onChange(c)}\n disabled={disabled}\n className=\"gap-1 px-2 text-xs w-full\"\n >\n <CurrencyIcon symbol={c} size={13} className=\"shrink-0\" />\n <span className=\"truncate\">{c}</span>\n </Button>\n ))}\n </div>\n );\n}\n\ninterface DurationPickerProps {\n options: ReadonlyArray<{ label: string; seconds: number }>;\n value: number;\n onChange: (value: number) => void;\n disabled?: boolean;\n cols?: 3 | 4;\n}\n\nexport function DurationPicker({ options, value, onChange, disabled, cols = 3 }: DurationPickerProps) {\n return (\n <div className={cols === 4 ? \"grid grid-cols-4 gap-2\" : \"grid grid-cols-3 gap-2\"}>\n {options.map((opt) => (\n <Button\n key={opt.label}\n type=\"button\"\n variant={value === opt.seconds ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => onChange(opt.seconds)}\n disabled={disabled}\n className=\"text-xs\"\n >\n {opt.label}\n </Button>\n ))}\n </div>\n );\n}\n\ninterface MarketplaceConfirmStepProps {\n summary?: ReactNode;\n description: string;\n error?: string | null;\n secondaryLabel: string;\n onSecondary: () => void;\n primaryLabel: string;\n onPrimary: () => void;\n primaryDisabled?: boolean;\n primaryIcon?: ReactNode;\n primaryVariant?: \"default\" | \"destructive\";\n footer?: ReactNode;\n}\n\nexport function MarketplaceConfirmStep({\n summary,\n description,\n error,\n secondaryLabel,\n onSecondary,\n primaryLabel,\n onPrimary,\n primaryDisabled,\n primaryIcon,\n primaryVariant = \"default\",\n footer,\n}: MarketplaceConfirmStepProps) {\n const primaryButton = primaryVariant === \"destructive\" ? (\n <Button\n variant=\"destructive\"\n className=\"flex-1 h-11\"\n disabled={primaryDisabled}\n onClick={onPrimary}\n >\n {primaryLabel}\n </Button>\n ) : (\n <div\n className={cn(\n \"btn-border-animated p-[1px] rounded-xl flex-1\",\n primaryDisabled && \"pointer-events-none\"\n )}\n >\n <button\n className=\"w-full h-11 rounded-[11px] flex items-center justify-center gap-2 text-sm font-semibold text-white transition-all hover:brightness-110 active:scale-[0.98] bg-transparent\"\n disabled={primaryDisabled}\n onClick={onPrimary}\n >\n {primaryIcon}\n {primaryLabel}\n </button>\n </div>\n );\n\n return (\n <div className=\"px-6 pb-6 pt-3 space-y-4\">\n {summary}\n <p className=\"text-sm text-muted-foreground\">{description}</p>\n {error ? (\n <Alert variant=\"destructive\">\n <AlertCircle className=\"h-4 w-4\" />\n <AlertDescription>{error}</AlertDescription>\n </Alert>\n ) : null}\n <div className=\"flex gap-2 pt-1\">\n <Button\n variant=\"outline\"\n className=\"gap-1.5\"\n onClick={onSecondary}\n >\n {secondaryLabel}\n </Button>\n {primaryButton}\n </div>\n {footer}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
var transaction_dialog_states_exports = {};
|
|
21
|
+
__export(transaction_dialog_states_exports, {
|
|
22
|
+
TransactionDialogStates: () => TransactionDialogStates
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(transaction_dialog_states_exports);
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import_transaction_success = require("./transaction-success.js");
|
|
27
|
+
var import_marketplace_dialog_primitives = require("./marketplace-dialog-primitives.js");
|
|
28
|
+
var import_explorer_url = require("../utils/explorer-url.js");
|
|
29
|
+
var import_use_transaction = require("../utils/use-transaction.js");
|
|
30
|
+
function TransactionDialogStates({
|
|
31
|
+
phase,
|
|
32
|
+
statusMessage = "Confirming onchain\u2026",
|
|
33
|
+
txHash,
|
|
34
|
+
error,
|
|
35
|
+
success,
|
|
36
|
+
successImage = null,
|
|
37
|
+
successName,
|
|
38
|
+
errorTitle,
|
|
39
|
+
errorDescription,
|
|
40
|
+
errorAssetName,
|
|
41
|
+
errorAssetImage = null,
|
|
42
|
+
onRetry,
|
|
43
|
+
onDone,
|
|
44
|
+
children
|
|
45
|
+
}) {
|
|
46
|
+
const busy = (0, import_use_transaction.isBusyPhase)(phase);
|
|
47
|
+
if (phase === "success" && !error) {
|
|
48
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
|
+
import_transaction_success.DialogTransactionSuccess,
|
|
50
|
+
{
|
|
51
|
+
name: successName,
|
|
52
|
+
image: successImage,
|
|
53
|
+
...success,
|
|
54
|
+
txHash,
|
|
55
|
+
actions: [{ label: "Done", onClick: onDone }]
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
if (!busy && error && txHash) {
|
|
60
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
61
|
+
import_marketplace_dialog_primitives.MarketplaceErrorState,
|
|
62
|
+
{
|
|
63
|
+
tokenImage: errorAssetImage,
|
|
64
|
+
name: errorAssetName ?? "Asset",
|
|
65
|
+
title: errorTitle,
|
|
66
|
+
description: errorDescription,
|
|
67
|
+
error,
|
|
68
|
+
txHash,
|
|
69
|
+
explorerUrl: import_explorer_url.EXPLORER_URL,
|
|
70
|
+
onRetry,
|
|
71
|
+
onDone
|
|
72
|
+
}
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
if (busy) {
|
|
76
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_marketplace_dialog_primitives.MarketplaceProcessingState, { title: statusMessage, txHash, explorerUrl: import_explorer_url.EXPLORER_URL });
|
|
77
|
+
}
|
|
78
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
|
|
79
|
+
}
|
|
80
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
81
|
+
0 && (module.exports = {
|
|
82
|
+
TransactionDialogStates
|
|
83
|
+
});
|
|
84
|
+
//# sourceMappingURL=transaction-dialog-states.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/transaction-dialog-states.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { DialogTransactionSuccess } from \"./transaction-success.js\";\nimport { MarketplaceErrorState, MarketplaceProcessingState } from \"./marketplace-dialog-primitives.js\";\nimport { EXPLORER_URL } from \"../utils/explorer-url.js\";\nimport { isBusyPhase, type TransactionPhase } from \"../utils/use-transaction.js\";\nimport type { SuccessMessage } from \"../utils/success-messages.js\";\n\nexport interface TransactionDialogStatesProps {\n phase: TransactionPhase;\n statusMessage?: string;\n txHash: string | null;\n error: string | null;\n success: SuccessMessage;\n successImage?: string | null;\n successName: string;\n errorTitle: string;\n errorDescription: string;\n errorAssetName?: string;\n errorAssetImage?: string | null;\n onRetry?: () => void;\n onDone: () => void;\n children: ReactNode;\n}\n\nexport function TransactionDialogStates({\n phase,\n statusMessage = \"Confirming onchain…\",\n txHash,\n error,\n success,\n successImage = null,\n successName,\n errorTitle,\n errorDescription,\n errorAssetName,\n errorAssetImage = null,\n onRetry,\n onDone,\n children,\n}: TransactionDialogStatesProps) {\n const busy = isBusyPhase(phase);\n\n if (phase === \"success\" && !error) {\n return (\n <DialogTransactionSuccess\n name={successName}\n image={successImage}\n {...success}\n txHash={txHash}\n actions={[{ label: \"Done\", onClick: onDone }]}\n />\n );\n }\n\n if (!busy && error && txHash) {\n return (\n <MarketplaceErrorState\n tokenImage={errorAssetImage}\n name={errorAssetName ?? \"Asset\"}\n title={errorTitle}\n description={errorDescription}\n error={error}\n txHash={txHash}\n explorerUrl={EXPLORER_URL}\n onRetry={onRetry}\n onDone={onDone}\n />\n );\n }\n\n if (busy) {\n return <MarketplaceProcessingState title={statusMessage} txHash={txHash} explorerUrl={EXPLORER_URL} />;\n }\n\n return <>{children}</>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CM;AA3CN,iCAAyC;AACzC,2CAAkE;AAClE,0BAA6B;AAC7B,6BAAmD;AAoB5C,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,WAAO,oCAAY,KAAK;AAE9B,MAAI,UAAU,aAAa,CAAC,OAAO;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QACA,SAAS,CAAC,EAAE,OAAO,QAAQ,SAAS,OAAO,CAAC;AAAA;AAAA,IAC9C;AAAA,EAEJ;AAEA,MAAI,CAAC,QAAQ,SAAS,QAAQ;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,MAAM,kBAAkB;AAAA,QACxB,OAAO;AAAA,QACP,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WAAO,4CAAC,mEAA2B,OAAO,eAAe,QAAgB,aAAa,kCAAc;AAAA,EACtG;AAEA,SAAO,2EAAG,UAAS;AACrB;","names":[]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { TransactionPhase } from '../utils/use-transaction.cjs';
|
|
4
|
+
import { SuccessMessage } from '../utils/success-messages.cjs';
|
|
5
|
+
import '@medialane/sdk/starknet';
|
|
6
|
+
import './fast-mint/types.cjs';
|
|
7
|
+
import 'starknet';
|
|
8
|
+
import '@medialane/sdk';
|
|
9
|
+
|
|
10
|
+
interface TransactionDialogStatesProps {
|
|
11
|
+
phase: TransactionPhase;
|
|
12
|
+
statusMessage?: string;
|
|
13
|
+
txHash: string | null;
|
|
14
|
+
error: string | null;
|
|
15
|
+
success: SuccessMessage;
|
|
16
|
+
successImage?: string | null;
|
|
17
|
+
successName: string;
|
|
18
|
+
errorTitle: string;
|
|
19
|
+
errorDescription: string;
|
|
20
|
+
errorAssetName?: string;
|
|
21
|
+
errorAssetImage?: string | null;
|
|
22
|
+
onRetry?: () => void;
|
|
23
|
+
onDone: () => void;
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
}
|
|
26
|
+
declare function TransactionDialogStates({ phase, statusMessage, txHash, error, success, successImage, successName, errorTitle, errorDescription, errorAssetName, errorAssetImage, onRetry, onDone, children, }: TransactionDialogStatesProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
export { TransactionDialogStates, type TransactionDialogStatesProps };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { TransactionPhase } from '../utils/use-transaction.js';
|
|
4
|
+
import { SuccessMessage } from '../utils/success-messages.js';
|
|
5
|
+
import '@medialane/sdk/starknet';
|
|
6
|
+
import './fast-mint/types.js';
|
|
7
|
+
import 'starknet';
|
|
8
|
+
import '@medialane/sdk';
|
|
9
|
+
|
|
10
|
+
interface TransactionDialogStatesProps {
|
|
11
|
+
phase: TransactionPhase;
|
|
12
|
+
statusMessage?: string;
|
|
13
|
+
txHash: string | null;
|
|
14
|
+
error: string | null;
|
|
15
|
+
success: SuccessMessage;
|
|
16
|
+
successImage?: string | null;
|
|
17
|
+
successName: string;
|
|
18
|
+
errorTitle: string;
|
|
19
|
+
errorDescription: string;
|
|
20
|
+
errorAssetName?: string;
|
|
21
|
+
errorAssetImage?: string | null;
|
|
22
|
+
onRetry?: () => void;
|
|
23
|
+
onDone: () => void;
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
}
|
|
26
|
+
declare function TransactionDialogStates({ phase, statusMessage, txHash, error, success, successImage, successName, errorTitle, errorDescription, errorAssetName, errorAssetImage, onRetry, onDone, children, }: TransactionDialogStatesProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
export { TransactionDialogStates, type TransactionDialogStatesProps };
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
3
|
+
import { DialogTransactionSuccess } from "./transaction-success.js";
|
|
4
|
+
import { MarketplaceErrorState, MarketplaceProcessingState } from "./marketplace-dialog-primitives.js";
|
|
5
|
+
import { EXPLORER_URL } from "../utils/explorer-url.js";
|
|
6
|
+
import { isBusyPhase } from "../utils/use-transaction.js";
|
|
7
|
+
function TransactionDialogStates({
|
|
8
|
+
phase,
|
|
9
|
+
statusMessage = "Confirming onchain\u2026",
|
|
10
|
+
txHash,
|
|
11
|
+
error,
|
|
12
|
+
success,
|
|
13
|
+
successImage = null,
|
|
14
|
+
successName,
|
|
15
|
+
errorTitle,
|
|
16
|
+
errorDescription,
|
|
17
|
+
errorAssetName,
|
|
18
|
+
errorAssetImage = null,
|
|
19
|
+
onRetry,
|
|
20
|
+
onDone,
|
|
21
|
+
children
|
|
22
|
+
}) {
|
|
23
|
+
const busy = isBusyPhase(phase);
|
|
24
|
+
if (phase === "success" && !error) {
|
|
25
|
+
return /* @__PURE__ */ jsx(
|
|
26
|
+
DialogTransactionSuccess,
|
|
27
|
+
{
|
|
28
|
+
name: successName,
|
|
29
|
+
image: successImage,
|
|
30
|
+
...success,
|
|
31
|
+
txHash,
|
|
32
|
+
actions: [{ label: "Done", onClick: onDone }]
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
if (!busy && error && txHash) {
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
MarketplaceErrorState,
|
|
39
|
+
{
|
|
40
|
+
tokenImage: errorAssetImage,
|
|
41
|
+
name: errorAssetName ?? "Asset",
|
|
42
|
+
title: errorTitle,
|
|
43
|
+
description: errorDescription,
|
|
44
|
+
error,
|
|
45
|
+
txHash,
|
|
46
|
+
explorerUrl: EXPLORER_URL,
|
|
47
|
+
onRetry,
|
|
48
|
+
onDone
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
if (busy) {
|
|
53
|
+
return /* @__PURE__ */ jsx(MarketplaceProcessingState, { title: statusMessage, txHash, explorerUrl: EXPLORER_URL });
|
|
54
|
+
}
|
|
55
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
56
|
+
}
|
|
57
|
+
export {
|
|
58
|
+
TransactionDialogStates
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=transaction-dialog-states.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/transaction-dialog-states.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { DialogTransactionSuccess } from \"./transaction-success.js\";\nimport { MarketplaceErrorState, MarketplaceProcessingState } from \"./marketplace-dialog-primitives.js\";\nimport { EXPLORER_URL } from \"../utils/explorer-url.js\";\nimport { isBusyPhase, type TransactionPhase } from \"../utils/use-transaction.js\";\nimport type { SuccessMessage } from \"../utils/success-messages.js\";\n\nexport interface TransactionDialogStatesProps {\n phase: TransactionPhase;\n statusMessage?: string;\n txHash: string | null;\n error: string | null;\n success: SuccessMessage;\n successImage?: string | null;\n successName: string;\n errorTitle: string;\n errorDescription: string;\n errorAssetName?: string;\n errorAssetImage?: string | null;\n onRetry?: () => void;\n onDone: () => void;\n children: ReactNode;\n}\n\nexport function TransactionDialogStates({\n phase,\n statusMessage = \"Confirming onchain…\",\n txHash,\n error,\n success,\n successImage = null,\n successName,\n errorTitle,\n errorDescription,\n errorAssetName,\n errorAssetImage = null,\n onRetry,\n onDone,\n children,\n}: TransactionDialogStatesProps) {\n const busy = isBusyPhase(phase);\n\n if (phase === \"success\" && !error) {\n return (\n <DialogTransactionSuccess\n name={successName}\n image={successImage}\n {...success}\n txHash={txHash}\n actions={[{ label: \"Done\", onClick: onDone }]}\n />\n );\n }\n\n if (!busy && error && txHash) {\n return (\n <MarketplaceErrorState\n tokenImage={errorAssetImage}\n name={errorAssetName ?? \"Asset\"}\n title={errorTitle}\n description={errorDescription}\n error={error}\n txHash={txHash}\n explorerUrl={EXPLORER_URL}\n onRetry={onRetry}\n onDone={onDone}\n />\n );\n }\n\n if (busy) {\n return <MarketplaceProcessingState title={statusMessage} txHash={txHash} explorerUrl={EXPLORER_URL} />;\n }\n\n return <>{children}</>;\n}\n"],"mappings":";AA8CM,SA8BG,UA9BH;AA3CN,SAAS,gCAAgC;AACzC,SAAS,uBAAuB,kCAAkC;AAClE,SAAS,oBAAoB;AAC7B,SAAS,mBAA0C;AAoB5C,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,OAAO,YAAY,KAAK;AAE9B,MAAI,UAAU,aAAa,CAAC,OAAO;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAO;AAAA,QACN,GAAG;AAAA,QACJ;AAAA,QACA,SAAS,CAAC,EAAE,OAAO,QAAQ,SAAS,OAAO,CAAC;AAAA;AAAA,IAC9C;AAAA,EAEJ;AAEA,MAAI,CAAC,QAAQ,SAAS,QAAQ;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,MAAM,kBAAkB;AAAA,QACxB,OAAO;AAAA,QACP,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,MAAI,MAAM;AACR,WAAO,oBAAC,8BAA2B,OAAO,eAAe,QAAgB,aAAa,cAAc;AAAA,EACtG;AAEA,SAAO,gCAAG,UAAS;AACrB;","names":[]}
|