@medialane/ui 0.170.0 → 0.171.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.
@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const buttonVariants: (props?: ({
6
- variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "secondary" | "premium" | "tonal" | "gradient-border" | "gradient-fill" | null | undefined;
6
+ variant?: "ghost" | "link" | "default" | "destructive" | "outline" | "secondary" | "premium" | "tonal" | "gradient-border" | "gradient-fill" | null | undefined;
7
7
  size?: "icon" | "default" | "sm" | "lg" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const buttonVariants: (props?: ({
6
- variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "secondary" | "premium" | "tonal" | "gradient-border" | "gradient-fill" | null | undefined;
6
+ variant?: "ghost" | "link" | "default" | "destructive" | "outline" | "secondary" | "premium" | "tonal" | "gradient-border" | "gradient-fill" | null | undefined;
7
7
  size?: "icon" | "default" | "sm" | "lg" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -25,10 +25,11 @@ module.exports = __toCommonJS(export_key_section_exports);
25
25
  var import_jsx_runtime = require("react/jsx-runtime");
26
26
  var import_react = require("react");
27
27
  var import_lucide_react = require("lucide-react");
28
+ var import_starknet = require("@medialane/sdk/starknet");
28
29
  var import_button = require("../button.js");
29
30
  var import_alert = require("../alert.js");
30
- function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError }) {
31
- const [privateKey, setPrivateKey] = (0, import_react.useState)(null);
31
+ function ExportKeySection({ loadSealed, unlock, describeError }) {
32
+ const [recoveryKey, setRecoveryKey] = (0, import_react.useState)(null);
32
33
  const [busy, setBusy] = (0, import_react.useState)(false);
33
34
  const [error, setError] = (0, import_react.useState)(null);
34
35
  const [copied, setCopied] = (0, import_react.useState)(false);
@@ -41,13 +42,7 @@ function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError })
41
42
  setError("This browser has no wallet key stored.");
42
43
  return;
43
44
  }
44
- if (!isRecoveryKey(sealed)) {
45
- setError(
46
- "This device was approved from another one, so its key cannot restore your account on its own. Export from the device you first signed up on."
47
- );
48
- return;
49
- }
50
- setPrivateKey(await unlock(sealed));
45
+ setRecoveryKey((0, import_starknet.encodeRecoveryKey)({ walletAddress: sealed.address, privateKey: await unlock(sealed) }));
51
46
  } catch (err) {
52
47
  const fallback = "Could not unlock your key. Please try again.";
53
48
  setError(describeError ? describeError(err, fallback) : fallback);
@@ -56,13 +51,13 @@ function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError })
56
51
  }
57
52
  };
58
53
  const copy = async () => {
59
- if (!privateKey) return;
60
- await navigator.clipboard.writeText(privateKey);
54
+ if (!recoveryKey) return;
55
+ await navigator.clipboard.writeText(recoveryKey);
61
56
  setCopied(true);
62
57
  setTimeout(() => setCopied(false), 2e3);
63
58
  };
64
59
  const hide = () => {
65
- setPrivateKey(null);
60
+ setRecoveryKey(null);
66
61
  setCopied(false);
67
62
  };
68
63
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3", children: [
@@ -70,7 +65,7 @@ function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError })
70
65
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold", children: "Recovery key" }),
71
66
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 text-xs text-muted-foreground leading-relaxed", children: "Save this somewhere private, such as a password manager. It restores your account if you lose access to every device you use. To start using a new phone or browser, approve it from a device you already have." })
72
67
  ] }),
73
- privateKey ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
68
+ recoveryKey ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
74
69
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_alert.Alert, { variant: "destructive", children: [
75
70
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShieldAlert, { className: "h-4 w-4" }),
76
71
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_alert.AlertDescription, { className: "text-xs leading-relaxed", children: [
@@ -79,7 +74,7 @@ function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError })
79
74
  "Medialane will never ask you for it. Treat any message requesting it as an attempt to take your assets."
80
75
  ] })
81
76
  ] }),
82
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "block break-all rounded-xl bg-muted px-3 py-2.5 font-mono text-xs select-all", children: privateKey }),
77
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "block break-all rounded-xl bg-muted px-3 py-2.5 font-mono text-xs select-all", children: recoveryKey }),
83
78
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
84
79
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.Button, { onClick: copy, variant: "outline", size: "sm", children: [
85
80
  copied ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: "mr-1.5 h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Copy, { className: "mr-1.5 h-3.5 w-3.5" }),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/wallet/export-key-section.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { KeyRound, Copy, Check, EyeOff, Loader2, ShieldAlert } from \"lucide-react\";\nimport type { SealedOwner } from \"@medialane/sdk/starknet\";\nimport { Button } from \"../button.js\";\nimport { Alert, AlertDescription } from \"../alert.js\";\n\nexport interface ExportKeySectionProps {\n loadSealed: () => SealedOwner | null;\n unlock: (sealed: SealedOwner) => Promise<string>;\n isRecoveryKey: (sealed: SealedOwner) => boolean;\n describeError?: (err: unknown, fallback: string) => string;\n}\n\nexport function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError }: ExportKeySectionProps) {\n const [privateKey, setPrivateKey] = useState<string | null>(null);\n const [busy, setBusy] = useState(false);\n const [error, setError] = useState<string | null>(null);\n const [copied, setCopied] = useState(false);\n\n const reveal = async () => {\n setBusy(true);\n setError(null);\n try {\n const sealed = loadSealed();\n if (!sealed) {\n setError(\"This browser has no wallet key stored.\");\n return;\n }\n if (!isRecoveryKey(sealed)) {\n setError(\n \"This device was approved from another one, so its key cannot restore your account on its own. Export from the device you first signed up on.\",\n );\n return;\n }\n setPrivateKey(await unlock(sealed));\n } catch (err) {\n const fallback = \"Could not unlock your key. Please try again.\";\n setError(describeError ? describeError(err, fallback) : fallback);\n } finally {\n setBusy(false);\n }\n };\n\n const copy = async () => {\n if (!privateKey) return;\n await navigator.clipboard.writeText(privateKey);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n const hide = () => {\n setPrivateKey(null);\n setCopied(false);\n };\n\n return (\n <div className=\"flex flex-col gap-3\">\n <div>\n <p className=\"text-sm font-semibold\">Recovery key</p>\n <p className=\"mt-1 text-xs text-muted-foreground leading-relaxed\">\n Save this somewhere private, such as a password manager. It restores your account if you\n lose access to every device you use. To start using a new phone or browser, approve it\n from a device you already have.\n </p>\n </div>\n\n {privateKey ? (\n <>\n <Alert variant=\"destructive\">\n <ShieldAlert className=\"h-4 w-4\" />\n <AlertDescription className=\"text-xs leading-relaxed\">\n <span className=\"font-semibold\">Anyone with this key controls your wallet.</span>{\" \"}\n Medialane will never ask you for it. Treat any message requesting it as an attempt to\n take your assets.\n </AlertDescription>\n </Alert>\n <code className=\"block break-all rounded-xl bg-muted px-3 py-2.5 font-mono text-xs select-all\">\n {privateKey}\n </code>\n <div className=\"flex items-center gap-2\">\n <Button onClick={copy} variant=\"outline\" size=\"sm\">\n {copied ? <Check className=\"mr-1.5 h-3.5 w-3.5\" /> : <Copy className=\"mr-1.5 h-3.5 w-3.5\" />}\n {copied ? \"Copied\" : \"Copy key\"}\n </Button>\n <Button onClick={hide} variant=\"ghost\" size=\"sm\">\n <EyeOff className=\"mr-1.5 h-3.5 w-3.5\" />\n Hide\n </Button>\n </div>\n </>\n ) : (\n <>\n {error && <p className=\"text-sm text-destructive\">{error}</p>}\n <Button onClick={reveal} disabled={busy} variant=\"outline\" size=\"sm\" className=\"self-start\">\n {busy ? <Loader2 className=\"mr-1.5 h-3.5 w-3.5 animate-spin\" /> : <KeyRound className=\"mr-1.5 h-3.5 w-3.5\" />}\n Show recovery key\n </Button>\n </>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2DM;AAzDN,mBAAyB;AACzB,0BAAoE;AAEpE,oBAAuB;AACvB,mBAAwC;AASjC,SAAS,iBAAiB,EAAE,YAAY,QAAQ,eAAe,cAAc,GAA0B;AAC5G,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAwB,IAAI;AAChE,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB,IAAI;AACtD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAE1C,QAAM,SAAS,YAAY;AACzB,YAAQ,IAAI;AACZ,aAAS,IAAI;AACb,QAAI;AACF,YAAM,SAAS,WAAW;AAC1B,UAAI,CAAC,QAAQ;AACX,iBAAS,wCAAwC;AACjD;AAAA,MACF;AACA,UAAI,CAAC,cAAc,MAAM,GAAG;AAC1B;AAAA,UACE;AAAA,QACF;AACA;AAAA,MACF;AACA,oBAAc,MAAM,OAAO,MAAM,CAAC;AAAA,IACpC,SAAS,KAAK;AACZ,YAAM,WAAW;AACjB,eAAS,gBAAgB,cAAc,KAAK,QAAQ,IAAI,QAAQ;AAAA,IAClE,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,QAAM,OAAO,YAAY;AACvB,QAAI,CAAC,WAAY;AACjB,UAAM,UAAU,UAAU,UAAU,UAAU;AAC9C,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,EACzC;AAEA,QAAM,OAAO,MAAM;AACjB,kBAAc,IAAI;AAClB,cAAU,KAAK;AAAA,EACjB;AAEA,SACE,6CAAC,SAAI,WAAU,uBACb;AAAA,iDAAC,SACC;AAAA,kDAAC,OAAE,WAAU,yBAAwB,0BAAY;AAAA,MACjD,4CAAC,OAAE,WAAU,sDAAqD,6NAIlE;AAAA,OACF;AAAA,IAEC,aACC,4EACE;AAAA,mDAAC,sBAAM,SAAQ,eACb;AAAA,oDAAC,mCAAY,WAAU,WAAU;AAAA,QACjC,6CAAC,iCAAiB,WAAU,2BAC1B;AAAA,sDAAC,UAAK,WAAU,iBAAgB,wDAA0C;AAAA,UAAQ;AAAA,UAAI;AAAA,WAGxF;AAAA,SACF;AAAA,MACA,4CAAC,UAAK,WAAU,gFACb,sBACH;AAAA,MACA,6CAAC,SAAI,WAAU,2BACb;AAAA,qDAAC,wBAAO,SAAS,MAAM,SAAQ,WAAU,MAAK,MAC3C;AAAA,mBAAS,4CAAC,6BAAM,WAAU,sBAAqB,IAAK,4CAAC,4BAAK,WAAU,sBAAqB;AAAA,UACzF,SAAS,WAAW;AAAA,WACvB;AAAA,QACA,6CAAC,wBAAO,SAAS,MAAM,SAAQ,SAAQ,MAAK,MAC1C;AAAA,sDAAC,8BAAO,WAAU,sBAAqB;AAAA,UAAE;AAAA,WAE3C;AAAA,SACF;AAAA,OACF,IAEA,4EACG;AAAA,eAAS,4CAAC,OAAE,WAAU,4BAA4B,iBAAM;AAAA,MACzD,6CAAC,wBAAO,SAAS,QAAQ,UAAU,MAAM,SAAQ,WAAU,MAAK,MAAK,WAAU,cAC5E;AAAA,eAAO,4CAAC,+BAAQ,WAAU,mCAAkC,IAAK,4CAAC,gCAAS,WAAU,sBAAqB;AAAA,QAAG;AAAA,SAEhH;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/wallet/export-key-section.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { KeyRound, Copy, Check, EyeOff, Loader2, ShieldAlert } from \"lucide-react\";\nimport { encodeRecoveryKey, type SealedOwner } from \"@medialane/sdk/starknet\";\nimport { Button } from \"../button.js\";\nimport { Alert, AlertDescription } from \"../alert.js\";\n\nexport interface ExportKeySectionProps {\n loadSealed: () => SealedOwner | null;\n unlock: (sealed: SealedOwner) => Promise<string>;\n describeError?: (err: unknown, fallback: string) => string;\n}\n\nexport function ExportKeySection({ loadSealed, unlock, describeError }: ExportKeySectionProps) {\n const [recoveryKey, setRecoveryKey] = useState<string | null>(null);\n const [busy, setBusy] = useState(false);\n const [error, setError] = useState<string | null>(null);\n const [copied, setCopied] = useState(false);\n\n const reveal = async () => {\n setBusy(true);\n setError(null);\n try {\n const sealed = loadSealed();\n if (!sealed) {\n setError(\"This browser has no wallet key stored.\");\n return;\n }\n setRecoveryKey(encodeRecoveryKey({ walletAddress: sealed.address, privateKey: await unlock(sealed) }));\n } catch (err) {\n const fallback = \"Could not unlock your key. Please try again.\";\n setError(describeError ? describeError(err, fallback) : fallback);\n } finally {\n setBusy(false);\n }\n };\n\n const copy = async () => {\n if (!recoveryKey) return;\n await navigator.clipboard.writeText(recoveryKey);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n const hide = () => {\n setRecoveryKey(null);\n setCopied(false);\n };\n\n return (\n <div className=\"flex flex-col gap-3\">\n <div>\n <p className=\"text-sm font-semibold\">Recovery key</p>\n <p className=\"mt-1 text-xs text-muted-foreground leading-relaxed\">\n Save this somewhere private, such as a password manager. It restores your account if you\n lose access to every device you use. To start using a new phone or browser, approve it\n from a device you already have.\n </p>\n </div>\n\n {recoveryKey ? (\n <>\n <Alert variant=\"destructive\">\n <ShieldAlert className=\"h-4 w-4\" />\n <AlertDescription className=\"text-xs leading-relaxed\">\n <span className=\"font-semibold\">Anyone with this key controls your wallet.</span>{\" \"}\n Medialane will never ask you for it. Treat any message requesting it as an attempt to\n take your assets.\n </AlertDescription>\n </Alert>\n <code className=\"block break-all rounded-xl bg-muted px-3 py-2.5 font-mono text-xs select-all\">\n {recoveryKey}\n </code>\n <div className=\"flex items-center gap-2\">\n <Button onClick={copy} variant=\"outline\" size=\"sm\">\n {copied ? <Check className=\"mr-1.5 h-3.5 w-3.5\" /> : <Copy className=\"mr-1.5 h-3.5 w-3.5\" />}\n {copied ? \"Copied\" : \"Copy key\"}\n </Button>\n <Button onClick={hide} variant=\"ghost\" size=\"sm\">\n <EyeOff className=\"mr-1.5 h-3.5 w-3.5\" />\n Hide\n </Button>\n </div>\n </>\n ) : (\n <>\n {error && <p className=\"text-sm text-destructive\">{error}</p>}\n <Button onClick={reveal} disabled={busy} variant=\"outline\" size=\"sm\" className=\"self-start\">\n {busy ? <Loader2 className=\"mr-1.5 h-3.5 w-3.5 animate-spin\" /> : <KeyRound className=\"mr-1.5 h-3.5 w-3.5\" />}\n Show recovery key\n </Button>\n </>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoDM;AAlDN,mBAAyB;AACzB,0BAAoE;AACpE,sBAAoD;AACpD,oBAAuB;AACvB,mBAAwC;AAQjC,SAAS,iBAAiB,EAAE,YAAY,QAAQ,cAAc,GAA0B;AAC7F,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAwB,IAAI;AAClE,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAwB,IAAI;AACtD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAE1C,QAAM,SAAS,YAAY;AACzB,YAAQ,IAAI;AACZ,aAAS,IAAI;AACb,QAAI;AACF,YAAM,SAAS,WAAW;AAC1B,UAAI,CAAC,QAAQ;AACX,iBAAS,wCAAwC;AACjD;AAAA,MACF;AACA,yBAAe,mCAAkB,EAAE,eAAe,OAAO,SAAS,YAAY,MAAM,OAAO,MAAM,EAAE,CAAC,CAAC;AAAA,IACvG,SAAS,KAAK;AACZ,YAAM,WAAW;AACjB,eAAS,gBAAgB,cAAc,KAAK,QAAQ,IAAI,QAAQ;AAAA,IAClE,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,QAAM,OAAO,YAAY;AACvB,QAAI,CAAC,YAAa;AAClB,UAAM,UAAU,UAAU,UAAU,WAAW;AAC/C,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,EACzC;AAEA,QAAM,OAAO,MAAM;AACjB,mBAAe,IAAI;AACnB,cAAU,KAAK;AAAA,EACjB;AAEA,SACE,6CAAC,SAAI,WAAU,uBACb;AAAA,iDAAC,SACC;AAAA,kDAAC,OAAE,WAAU,yBAAwB,0BAAY;AAAA,MACjD,4CAAC,OAAE,WAAU,sDAAqD,6NAIlE;AAAA,OACF;AAAA,IAEC,cACC,4EACE;AAAA,mDAAC,sBAAM,SAAQ,eACb;AAAA,oDAAC,mCAAY,WAAU,WAAU;AAAA,QACjC,6CAAC,iCAAiB,WAAU,2BAC1B;AAAA,sDAAC,UAAK,WAAU,iBAAgB,wDAA0C;AAAA,UAAQ;AAAA,UAAI;AAAA,WAGxF;AAAA,SACF;AAAA,MACA,4CAAC,UAAK,WAAU,gFACb,uBACH;AAAA,MACA,6CAAC,SAAI,WAAU,2BACb;AAAA,qDAAC,wBAAO,SAAS,MAAM,SAAQ,WAAU,MAAK,MAC3C;AAAA,mBAAS,4CAAC,6BAAM,WAAU,sBAAqB,IAAK,4CAAC,4BAAK,WAAU,sBAAqB;AAAA,UACzF,SAAS,WAAW;AAAA,WACvB;AAAA,QACA,6CAAC,wBAAO,SAAS,MAAM,SAAQ,SAAQ,MAAK,MAC1C;AAAA,sDAAC,8BAAO,WAAU,sBAAqB;AAAA,UAAE;AAAA,WAE3C;AAAA,SACF;AAAA,OACF,IAEA,4EACG;AAAA,eAAS,4CAAC,OAAE,WAAU,4BAA4B,iBAAM;AAAA,MACzD,6CAAC,wBAAO,SAAS,QAAQ,UAAU,MAAM,SAAQ,WAAU,MAAK,MAAK,WAAU,cAC5E;AAAA,eAAO,4CAAC,+BAAQ,WAAU,mCAAkC,IAAK,4CAAC,gCAAS,WAAU,sBAAqB;AAAA,QAAG;AAAA,SAEhH;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
@@ -4,9 +4,8 @@ import { SealedOwner } from '@medialane/sdk/starknet';
4
4
  interface ExportKeySectionProps {
5
5
  loadSealed: () => SealedOwner | null;
6
6
  unlock: (sealed: SealedOwner) => Promise<string>;
7
- isRecoveryKey: (sealed: SealedOwner) => boolean;
8
7
  describeError?: (err: unknown, fallback: string) => string;
9
8
  }
10
- declare function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError }: ExportKeySectionProps): react_jsx_runtime.JSX.Element;
9
+ declare function ExportKeySection({ loadSealed, unlock, describeError }: ExportKeySectionProps): react_jsx_runtime.JSX.Element;
11
10
 
12
11
  export { ExportKeySection, type ExportKeySectionProps };
@@ -4,9 +4,8 @@ import { SealedOwner } from '@medialane/sdk/starknet';
4
4
  interface ExportKeySectionProps {
5
5
  loadSealed: () => SealedOwner | null;
6
6
  unlock: (sealed: SealedOwner) => Promise<string>;
7
- isRecoveryKey: (sealed: SealedOwner) => boolean;
8
7
  describeError?: (err: unknown, fallback: string) => string;
9
8
  }
10
- declare function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError }: ExportKeySectionProps): react_jsx_runtime.JSX.Element;
9
+ declare function ExportKeySection({ loadSealed, unlock, describeError }: ExportKeySectionProps): react_jsx_runtime.JSX.Element;
11
10
 
12
11
  export { ExportKeySection, type ExportKeySectionProps };
@@ -2,10 +2,11 @@
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
3
  import { useState } from "react";
4
4
  import { KeyRound, Copy, Check, EyeOff, Loader2, ShieldAlert } from "lucide-react";
5
+ import { encodeRecoveryKey } from "@medialane/sdk/starknet";
5
6
  import { Button } from "../button.js";
6
7
  import { Alert, AlertDescription } from "../alert.js";
7
- function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError }) {
8
- const [privateKey, setPrivateKey] = useState(null);
8
+ function ExportKeySection({ loadSealed, unlock, describeError }) {
9
+ const [recoveryKey, setRecoveryKey] = useState(null);
9
10
  const [busy, setBusy] = useState(false);
10
11
  const [error, setError] = useState(null);
11
12
  const [copied, setCopied] = useState(false);
@@ -18,13 +19,7 @@ function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError })
18
19
  setError("This browser has no wallet key stored.");
19
20
  return;
20
21
  }
21
- if (!isRecoveryKey(sealed)) {
22
- setError(
23
- "This device was approved from another one, so its key cannot restore your account on its own. Export from the device you first signed up on."
24
- );
25
- return;
26
- }
27
- setPrivateKey(await unlock(sealed));
22
+ setRecoveryKey(encodeRecoveryKey({ walletAddress: sealed.address, privateKey: await unlock(sealed) }));
28
23
  } catch (err) {
29
24
  const fallback = "Could not unlock your key. Please try again.";
30
25
  setError(describeError ? describeError(err, fallback) : fallback);
@@ -33,13 +28,13 @@ function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError })
33
28
  }
34
29
  };
35
30
  const copy = async () => {
36
- if (!privateKey) return;
37
- await navigator.clipboard.writeText(privateKey);
31
+ if (!recoveryKey) return;
32
+ await navigator.clipboard.writeText(recoveryKey);
38
33
  setCopied(true);
39
34
  setTimeout(() => setCopied(false), 2e3);
40
35
  };
41
36
  const hide = () => {
42
- setPrivateKey(null);
37
+ setRecoveryKey(null);
43
38
  setCopied(false);
44
39
  };
45
40
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
@@ -47,7 +42,7 @@ function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError })
47
42
  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: "Recovery key" }),
48
43
  /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground leading-relaxed", children: "Save this somewhere private, such as a password manager. It restores your account if you lose access to every device you use. To start using a new phone or browser, approve it from a device you already have." })
49
44
  ] }),
50
- privateKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
45
+ recoveryKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
51
46
  /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
52
47
  /* @__PURE__ */ jsx(ShieldAlert, { className: "h-4 w-4" }),
53
48
  /* @__PURE__ */ jsxs(AlertDescription, { className: "text-xs leading-relaxed", children: [
@@ -56,7 +51,7 @@ function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError })
56
51
  "Medialane will never ask you for it. Treat any message requesting it as an attempt to take your assets."
57
52
  ] })
58
53
  ] }),
59
- /* @__PURE__ */ jsx("code", { className: "block break-all rounded-xl bg-muted px-3 py-2.5 font-mono text-xs select-all", children: privateKey }),
54
+ /* @__PURE__ */ jsx("code", { className: "block break-all rounded-xl bg-muted px-3 py-2.5 font-mono text-xs select-all", children: recoveryKey }),
60
55
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
61
56
  /* @__PURE__ */ jsxs(Button, { onClick: copy, variant: "outline", size: "sm", children: [
62
57
  copied ? /* @__PURE__ */ jsx(Check, { className: "mr-1.5 h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "mr-1.5 h-3.5 w-3.5" }),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/wallet/export-key-section.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { KeyRound, Copy, Check, EyeOff, Loader2, ShieldAlert } from \"lucide-react\";\nimport type { SealedOwner } from \"@medialane/sdk/starknet\";\nimport { Button } from \"../button.js\";\nimport { Alert, AlertDescription } from \"../alert.js\";\n\nexport interface ExportKeySectionProps {\n loadSealed: () => SealedOwner | null;\n unlock: (sealed: SealedOwner) => Promise<string>;\n isRecoveryKey: (sealed: SealedOwner) => boolean;\n describeError?: (err: unknown, fallback: string) => string;\n}\n\nexport function ExportKeySection({ loadSealed, unlock, isRecoveryKey, describeError }: ExportKeySectionProps) {\n const [privateKey, setPrivateKey] = useState<string | null>(null);\n const [busy, setBusy] = useState(false);\n const [error, setError] = useState<string | null>(null);\n const [copied, setCopied] = useState(false);\n\n const reveal = async () => {\n setBusy(true);\n setError(null);\n try {\n const sealed = loadSealed();\n if (!sealed) {\n setError(\"This browser has no wallet key stored.\");\n return;\n }\n if (!isRecoveryKey(sealed)) {\n setError(\n \"This device was approved from another one, so its key cannot restore your account on its own. Export from the device you first signed up on.\",\n );\n return;\n }\n setPrivateKey(await unlock(sealed));\n } catch (err) {\n const fallback = \"Could not unlock your key. Please try again.\";\n setError(describeError ? describeError(err, fallback) : fallback);\n } finally {\n setBusy(false);\n }\n };\n\n const copy = async () => {\n if (!privateKey) return;\n await navigator.clipboard.writeText(privateKey);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n const hide = () => {\n setPrivateKey(null);\n setCopied(false);\n };\n\n return (\n <div className=\"flex flex-col gap-3\">\n <div>\n <p className=\"text-sm font-semibold\">Recovery key</p>\n <p className=\"mt-1 text-xs text-muted-foreground leading-relaxed\">\n Save this somewhere private, such as a password manager. It restores your account if you\n lose access to every device you use. To start using a new phone or browser, approve it\n from a device you already have.\n </p>\n </div>\n\n {privateKey ? (\n <>\n <Alert variant=\"destructive\">\n <ShieldAlert className=\"h-4 w-4\" />\n <AlertDescription className=\"text-xs leading-relaxed\">\n <span className=\"font-semibold\">Anyone with this key controls your wallet.</span>{\" \"}\n Medialane will never ask you for it. Treat any message requesting it as an attempt to\n take your assets.\n </AlertDescription>\n </Alert>\n <code className=\"block break-all rounded-xl bg-muted px-3 py-2.5 font-mono text-xs select-all\">\n {privateKey}\n </code>\n <div className=\"flex items-center gap-2\">\n <Button onClick={copy} variant=\"outline\" size=\"sm\">\n {copied ? <Check className=\"mr-1.5 h-3.5 w-3.5\" /> : <Copy className=\"mr-1.5 h-3.5 w-3.5\" />}\n {copied ? \"Copied\" : \"Copy key\"}\n </Button>\n <Button onClick={hide} variant=\"ghost\" size=\"sm\">\n <EyeOff className=\"mr-1.5 h-3.5 w-3.5\" />\n Hide\n </Button>\n </div>\n </>\n ) : (\n <>\n {error && <p className=\"text-sm text-destructive\">{error}</p>}\n <Button onClick={reveal} disabled={busy} variant=\"outline\" size=\"sm\" className=\"self-start\">\n {busy ? <Loader2 className=\"mr-1.5 h-3.5 w-3.5 animate-spin\" /> : <KeyRound className=\"mr-1.5 h-3.5 w-3.5\" />}\n Show recovery key\n </Button>\n </>\n )}\n </div>\n );\n}\n"],"mappings":";AA2DM,SAUE,UATA,KADF;AAzDN,SAAS,gBAAgB;AACzB,SAAS,UAAU,MAAM,OAAO,QAAQ,SAAS,mBAAmB;AAEpE,SAAS,cAAc;AACvB,SAAS,OAAO,wBAAwB;AASjC,SAAS,iBAAiB,EAAE,YAAY,QAAQ,eAAe,cAAc,GAA0B;AAC5G,QAAM,CAAC,YAAY,aAAa,IAAI,SAAwB,IAAI;AAChE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,SAAS,YAAY;AACzB,YAAQ,IAAI;AACZ,aAAS,IAAI;AACb,QAAI;AACF,YAAM,SAAS,WAAW;AAC1B,UAAI,CAAC,QAAQ;AACX,iBAAS,wCAAwC;AACjD;AAAA,MACF;AACA,UAAI,CAAC,cAAc,MAAM,GAAG;AAC1B;AAAA,UACE;AAAA,QACF;AACA;AAAA,MACF;AACA,oBAAc,MAAM,OAAO,MAAM,CAAC;AAAA,IACpC,SAAS,KAAK;AACZ,YAAM,WAAW;AACjB,eAAS,gBAAgB,cAAc,KAAK,QAAQ,IAAI,QAAQ;AAAA,IAClE,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,QAAM,OAAO,YAAY;AACvB,QAAI,CAAC,WAAY;AACjB,UAAM,UAAU,UAAU,UAAU,UAAU;AAC9C,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,EACzC;AAEA,QAAM,OAAO,MAAM;AACjB,kBAAc,IAAI;AAClB,cAAU,KAAK;AAAA,EACjB;AAEA,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,SACC;AAAA,0BAAC,OAAE,WAAU,yBAAwB,0BAAY;AAAA,MACjD,oBAAC,OAAE,WAAU,sDAAqD,6NAIlE;AAAA,OACF;AAAA,IAEC,aACC,iCACE;AAAA,2BAAC,SAAM,SAAQ,eACb;AAAA,4BAAC,eAAY,WAAU,WAAU;AAAA,QACjC,qBAAC,oBAAiB,WAAU,2BAC1B;AAAA,8BAAC,UAAK,WAAU,iBAAgB,wDAA0C;AAAA,UAAQ;AAAA,UAAI;AAAA,WAGxF;AAAA,SACF;AAAA,MACA,oBAAC,UAAK,WAAU,gFACb,sBACH;AAAA,MACA,qBAAC,SAAI,WAAU,2BACb;AAAA,6BAAC,UAAO,SAAS,MAAM,SAAQ,WAAU,MAAK,MAC3C;AAAA,mBAAS,oBAAC,SAAM,WAAU,sBAAqB,IAAK,oBAAC,QAAK,WAAU,sBAAqB;AAAA,UACzF,SAAS,WAAW;AAAA,WACvB;AAAA,QACA,qBAAC,UAAO,SAAS,MAAM,SAAQ,SAAQ,MAAK,MAC1C;AAAA,8BAAC,UAAO,WAAU,sBAAqB;AAAA,UAAE;AAAA,WAE3C;AAAA,SACF;AAAA,OACF,IAEA,iCACG;AAAA,eAAS,oBAAC,OAAE,WAAU,4BAA4B,iBAAM;AAAA,MACzD,qBAAC,UAAO,SAAS,QAAQ,UAAU,MAAM,SAAQ,WAAU,MAAK,MAAK,WAAU,cAC5E;AAAA,eAAO,oBAAC,WAAQ,WAAU,mCAAkC,IAAK,oBAAC,YAAS,WAAU,sBAAqB;AAAA,QAAG;AAAA,SAEhH;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../src/components/wallet/export-key-section.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { KeyRound, Copy, Check, EyeOff, Loader2, ShieldAlert } from \"lucide-react\";\nimport { encodeRecoveryKey, type SealedOwner } from \"@medialane/sdk/starknet\";\nimport { Button } from \"../button.js\";\nimport { Alert, AlertDescription } from \"../alert.js\";\n\nexport interface ExportKeySectionProps {\n loadSealed: () => SealedOwner | null;\n unlock: (sealed: SealedOwner) => Promise<string>;\n describeError?: (err: unknown, fallback: string) => string;\n}\n\nexport function ExportKeySection({ loadSealed, unlock, describeError }: ExportKeySectionProps) {\n const [recoveryKey, setRecoveryKey] = useState<string | null>(null);\n const [busy, setBusy] = useState(false);\n const [error, setError] = useState<string | null>(null);\n const [copied, setCopied] = useState(false);\n\n const reveal = async () => {\n setBusy(true);\n setError(null);\n try {\n const sealed = loadSealed();\n if (!sealed) {\n setError(\"This browser has no wallet key stored.\");\n return;\n }\n setRecoveryKey(encodeRecoveryKey({ walletAddress: sealed.address, privateKey: await unlock(sealed) }));\n } catch (err) {\n const fallback = \"Could not unlock your key. Please try again.\";\n setError(describeError ? describeError(err, fallback) : fallback);\n } finally {\n setBusy(false);\n }\n };\n\n const copy = async () => {\n if (!recoveryKey) return;\n await navigator.clipboard.writeText(recoveryKey);\n setCopied(true);\n setTimeout(() => setCopied(false), 2000);\n };\n\n const hide = () => {\n setRecoveryKey(null);\n setCopied(false);\n };\n\n return (\n <div className=\"flex flex-col gap-3\">\n <div>\n <p className=\"text-sm font-semibold\">Recovery key</p>\n <p className=\"mt-1 text-xs text-muted-foreground leading-relaxed\">\n Save this somewhere private, such as a password manager. It restores your account if you\n lose access to every device you use. To start using a new phone or browser, approve it\n from a device you already have.\n </p>\n </div>\n\n {recoveryKey ? (\n <>\n <Alert variant=\"destructive\">\n <ShieldAlert className=\"h-4 w-4\" />\n <AlertDescription className=\"text-xs leading-relaxed\">\n <span className=\"font-semibold\">Anyone with this key controls your wallet.</span>{\" \"}\n Medialane will never ask you for it. Treat any message requesting it as an attempt to\n take your assets.\n </AlertDescription>\n </Alert>\n <code className=\"block break-all rounded-xl bg-muted px-3 py-2.5 font-mono text-xs select-all\">\n {recoveryKey}\n </code>\n <div className=\"flex items-center gap-2\">\n <Button onClick={copy} variant=\"outline\" size=\"sm\">\n {copied ? <Check className=\"mr-1.5 h-3.5 w-3.5\" /> : <Copy className=\"mr-1.5 h-3.5 w-3.5\" />}\n {copied ? \"Copied\" : \"Copy key\"}\n </Button>\n <Button onClick={hide} variant=\"ghost\" size=\"sm\">\n <EyeOff className=\"mr-1.5 h-3.5 w-3.5\" />\n Hide\n </Button>\n </div>\n </>\n ) : (\n <>\n {error && <p className=\"text-sm text-destructive\">{error}</p>}\n <Button onClick={reveal} disabled={busy} variant=\"outline\" size=\"sm\" className=\"self-start\">\n {busy ? <Loader2 className=\"mr-1.5 h-3.5 w-3.5 animate-spin\" /> : <KeyRound className=\"mr-1.5 h-3.5 w-3.5\" />}\n Show recovery key\n </Button>\n </>\n )}\n </div>\n );\n}\n"],"mappings":";AAoDM,SAUE,UATA,KADF;AAlDN,SAAS,gBAAgB;AACzB,SAAS,UAAU,MAAM,OAAO,QAAQ,SAAS,mBAAmB;AACpE,SAAS,yBAA2C;AACpD,SAAS,cAAc;AACvB,SAAS,OAAO,wBAAwB;AAQjC,SAAS,iBAAiB,EAAE,YAAY,QAAQ,cAAc,GAA0B;AAC7F,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,SAAS,YAAY;AACzB,YAAQ,IAAI;AACZ,aAAS,IAAI;AACb,QAAI;AACF,YAAM,SAAS,WAAW;AAC1B,UAAI,CAAC,QAAQ;AACX,iBAAS,wCAAwC;AACjD;AAAA,MACF;AACA,qBAAe,kBAAkB,EAAE,eAAe,OAAO,SAAS,YAAY,MAAM,OAAO,MAAM,EAAE,CAAC,CAAC;AAAA,IACvG,SAAS,KAAK;AACZ,YAAM,WAAW;AACjB,eAAS,gBAAgB,cAAc,KAAK,QAAQ,IAAI,QAAQ;AAAA,IAClE,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,QAAM,OAAO,YAAY;AACvB,QAAI,CAAC,YAAa;AAClB,UAAM,UAAU,UAAU,UAAU,WAAW;AAC/C,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,EACzC;AAEA,QAAM,OAAO,MAAM;AACjB,mBAAe,IAAI;AACnB,cAAU,KAAK;AAAA,EACjB;AAEA,SACE,qBAAC,SAAI,WAAU,uBACb;AAAA,yBAAC,SACC;AAAA,0BAAC,OAAE,WAAU,yBAAwB,0BAAY;AAAA,MACjD,oBAAC,OAAE,WAAU,sDAAqD,6NAIlE;AAAA,OACF;AAAA,IAEC,cACC,iCACE;AAAA,2BAAC,SAAM,SAAQ,eACb;AAAA,4BAAC,eAAY,WAAU,WAAU;AAAA,QACjC,qBAAC,oBAAiB,WAAU,2BAC1B;AAAA,8BAAC,UAAK,WAAU,iBAAgB,wDAA0C;AAAA,UAAQ;AAAA,UAAI;AAAA,WAGxF;AAAA,SACF;AAAA,MACA,oBAAC,UAAK,WAAU,gFACb,uBACH;AAAA,MACA,qBAAC,SAAI,WAAU,2BACb;AAAA,6BAAC,UAAO,SAAS,MAAM,SAAQ,WAAU,MAAK,MAC3C;AAAA,mBAAS,oBAAC,SAAM,WAAU,sBAAqB,IAAK,oBAAC,QAAK,WAAU,sBAAqB;AAAA,UACzF,SAAS,WAAW;AAAA,WACvB;AAAA,QACA,qBAAC,UAAO,SAAS,MAAM,SAAQ,SAAQ,MAAK,MAC1C;AAAA,8BAAC,UAAO,WAAU,sBAAqB;AAAA,UAAE;AAAA,WAE3C;AAAA,SACF;AAAA,OACF,IAEA,iCACG;AAAA,eAAS,oBAAC,OAAE,WAAU,4BAA4B,iBAAM;AAAA,MACzD,qBAAC,UAAO,SAAS,QAAQ,UAAU,MAAM,SAAQ,WAAU,MAAK,MAAK,WAAU,cAC5E;AAAA,eAAO,oBAAC,WAAQ,WAAU,mCAAkC,IAAK,oBAAC,YAAS,WAAU,sBAAqB;AAAA,QAAG;AAAA,SAEhH;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@medialane/ui",
3
- "version": "0.170.0",
3
+ "version": "0.171.0",
4
4
  "description": "Shared UI components for Medialane apps",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -51,7 +51,7 @@
51
51
  "preview": "vite --config preview/vite.config.ts"
52
52
  },
53
53
  "peerDependencies": {
54
- "@medialane/sdk": ">=0.138.0",
54
+ "@medialane/sdk": ">=0.142.0",
55
55
  "@radix-ui/react-checkbox": ">=1.1.0",
56
56
  "@radix-ui/react-collapsible": ">=1.1.0",
57
57
  "@radix-ui/react-dialog": ">=1.1.0",
@@ -79,7 +79,7 @@
79
79
  "zod": "^3.25.0"
80
80
  },
81
81
  "devDependencies": {
82
- "@medialane/sdk": "0.138.0",
82
+ "@medialane/sdk": "0.142.0",
83
83
  "@radix-ui/react-checkbox": "^1.3.8",
84
84
  "@radix-ui/react-collapsible": "^1.1.17",
85
85
  "@radix-ui/react-dialog": "^1.1.20",