@privy-io/react-auth/dist/cjs/LinkPasskeyScreen-CUMuhJ2Q.js

React client for the Privy Auth API

"use strict";var e=require("react/jsx-runtime"),r=require("lucide-react"),i=require("react"),t=require("styled-components"),n=require("./useActiveWallet-BOX8xCn9.js"),o=require("./TodoList-Cm_a93ef.js"),s=require("./internal-context-NWsAL807.js"),a=require("./get-is-unified-wallet-D4ouXJpi.js"),c=require("./ScreenLayout-BeH-Q6N2.js");require("zustand"),require("./context-DFq1obBO.js"),require("@privy-io/js-sdk-core"),require("tinycolor2"),require("react-device-detect"),require("./prepareFundingModalData-Cnd6rhhJ.js"),require("eventemitter3"),require("./events-context-Di6--rDg.js"),require("viem"),require("viem/utils"),require("./getPublicClient-CGlodIp_.js"),require("./useWallets-BLFNjTwC.js"),require("ofetch"),require("./Button-Bm_Ft0Dw.js"),require("./Screen-D9Tvi297.js"),require("./ModalHeader-DB7Tbjwz.js"),require("@heroicons/react/24/outline/ArrowLeftIcon"),require("@heroicons/react/24/outline/ArrowRightIcon"),require("@heroicons/react/24/outline/QuestionMarkCircleIcon"),require("@heroicons/react/24/outline/XMarkIcon"),require("./index-CRFXS9pP.js");const d=({passkeys:i,isLoading:t,errorReason:n,success:o,expanded:s,onLinkPasskey:a,onUnlinkPasskey:d,onExpand:y,onBack:h,onClose:m})=>o?/*#__PURE__*/e.jsx(c.ScreenLayout,{title:"Passkeys updated",icon:r.CheckCircle,iconVariant:"success",primaryCta:{label:"Done",onClick:m},onClose:m,watermark:!0}):s?/*#__PURE__*/e.jsx(c.ScreenLayout,{icon:r.FingerprintIcon,title:"Your passkeys",onBack:h,onClose:m,watermark:!0,children:/*#__PURE__*/e.jsx(u,{passkeys:i,expanded:s,onUnlink:d,onExpand:y})}):/*#__PURE__*/e.jsx(c.ScreenLayout,{icon:r.FingerprintIcon,title:"Set up passkey verification",subtitle:"Verify with passkey",primaryCta:{label:"Add new passkey",onClick:a,loading:t},onClose:m,watermark:!0,helpText:n||void 0,children:0===i.length?/*#__PURE__*/e.jsx(p,{}):/*#__PURE__*/e.jsx(l,{children:/*#__PURE__*/e.jsx(u,{passkeys:i,expanded:s,onUnlink:d,onExpand:y})})});let l=/*#__PURE__*/t.styled.div.withConfig({displayName:"ContentContainer",componentId:"sc-a752cbd1-0"})(["margin-bottom:12px;"]),u=({passkeys:t,expanded:o,onUnlink:s,onExpand:a})=>{let[c,d]=i.useState([]),l=o?t.length:2;/*#__PURE__*/return e.jsxs("div",{children:[/*#__PURE__*/e.jsx(g,{children:"Your passkeys"}),/*#__PURE__*/e.jsxs(k,{children:[t.slice(0,l).map((i=>{/*#__PURE__*/return e.jsxs(j,{children:[/*#__PURE__*/e.jsxs("div",{children:[/*#__PURE__*/e.jsx(f,{children:(t=i,t.authenticatorName?t.createdWithBrowser?`${t.authenticatorName} on ${t.createdWithBrowser}`:t.authenticatorName:t.createdWithBrowser?t.createdWithOs?`${t.createdWithBrowser} on ${t.createdWithOs}`:`${t.createdWithBrowser}`:"Unknown device")}),/*#__PURE__*/e.jsxs(v,{children:["Last used:"," ",(i.latestVerifiedAt??i.firstVerifiedAt)?.toLocaleString()??"N/A"]})]}),/*#__PURE__*/e.jsx(C,{disabled:c.includes(i.credentialId),onClick:()=>(async e=>{d((r=>r.concat([e]))),await s(e),d((r=>r.filter((r=>r!==e))))})(i.credentialId),children:c.includes(i.credentialId)?/*#__PURE__*/e.jsx(n.ButtonLoader,{}):/*#__PURE__*/e.jsx(r.Trash2,{size:16})})]},i.credentialId);var t})),t.length>2&&!o&&/*#__PURE__*/e.jsx(x,{onClick:a,children:"View all"})]})]})},p=()=>/*#__PURE__*/e.jsxs(o.TodoList,{style:{color:"var(--privy-color-foreground)"},children:[/*#__PURE__*/e.jsx(o.TodoItem,{children:"Verify with Touch ID, Face ID, PIN, or hardware key"}),/*#__PURE__*/e.jsx(o.TodoItem,{children:"Takes seconds to set up and use"}),/*#__PURE__*/e.jsx(o.TodoItem,{children:"Use your passkey to verify transactions and login to your account"})]});const y={component:()=>{let{user:r,unlinkPasskey:t}=a.usePrivyContext(),{linkWithPasskey:n,closePrivyModal:o}=s.usePrivyInternal(),c=r?.linkedAccounts.filter((e=>"passkey"===e.type)),[l,u]=i.useState(!1),[p,y]=i.useState(""),[h,m]=i.useState(!1),[x,k]=i.useState(!1);return i.useEffect((()=>{0===c.length&&k(!1)}),[c.length]),/*#__PURE__*/e.jsx(d,{passkeys:c,isLoading:l,errorReason:p,success:h,expanded:x,onLinkPasskey:()=>{u(!0),n().then((()=>m(!0))).catch((e=>{if(e instanceof s.PrivyError){if(e.privyErrorCode===s.PrivyErrorCode.CANNOT_LINK_MORE_OF_TYPE)return void y("Cannot link more passkeys to account.");if(e.privyErrorCode===s.PrivyErrorCode.PASSKEY_NOT_ALLOWED)return void y("Passkey request timed out or rejected by user.")}y("Unknown error occurred.")})).finally((()=>{u(!1)}))},onUnlinkPasskey:async e=>(u(!0),await t(e).then((()=>m(!0))).catch((e=>{e instanceof s.PrivyError&&e.privyErrorCode===s.PrivyErrorCode.MISSING_MFA_CREDENTIALS?y("Cannot unlink a passkey enrolled in MFA"):y("Unknown error occurred.")})).finally((()=>{u(!1)}))),onExpand:()=>k(!0),onBack:()=>k(!1),onClose:()=>o()})}},h=/*#__PURE__*/t.styled.div.withConfig({displayName:"DoubleIconWrapper",componentId:"sc-a752cbd1-1"})(["display:flex;align-items:center;justify-content:center;width:180px;height:90px;border-radius:50%;svg + svg{margin-left:12px;}> svg{z-index:2;color:var(--privy-color-accent) !important;stroke:var(--privy-color-accent) !important;fill:var(--privy-color-accent) !important;}"]);let m=/*#__PURE__*/t.css(["&&{width:100%;font-size:0.875rem;line-height:1rem;@media (min-width:440px){font-size:14px;}display:flex;gap:12px;justify-content:center;padding:6px 8px;background-color:var(--privy-color-background);transition:background-color 200ms ease;color:var(--privy-color-accent) !important;:focus{outline:none;box-shadow:none;}}"]);const x=/*#__PURE__*/t.styled.button.withConfig({displayName:"LinkButton",componentId:"sc-a752cbd1-2"})(["",""],m);let k=/*#__PURE__*/t.styled.div.withConfig({displayName:"List",componentId:"sc-a752cbd1-3"})(["display:flex;flex-direction:column;align-items:stretch;gap:0.8rem;padding:0.5rem 0rem 0rem;flex-grow:1;width:100%;"]),g=/*#__PURE__*/t.styled.div.withConfig({displayName:"PasskeyListTitle",componentId:"sc-a752cbd1-4"})(["line-height:20px;height:20px;font-size:1em;font-weight:450;display:flex;justify-content:flex-beginning;width:100%;"]),f=/*#__PURE__*/t.styled.div.withConfig({displayName:"PasskeyItemTitle",componentId:"sc-a752cbd1-5"})(["font-size:1em;line-height:1.3em;font-weight:500;color:var(--privy-color-foreground-2);padding:0.2em 0;"]),v=/*#__PURE__*/t.styled.div.withConfig({displayName:"PasskeyItemSubtitle",componentId:"sc-a752cbd1-6"})(["font-size:0.875rem;line-height:1rem;color:#64668b;padding:0.2em 0;"]),j=/*#__PURE__*/t.styled.div.withConfig({displayName:"PasskeyListItem",componentId:"sc-a752cbd1-7"})(["display:flex;align-items:center;justify-content:space-between;padding:1em;gap:10px;font-size:0.875rem;line-height:1rem;text-align:left;border-radius:8px;border:1px solid #e2e3f0 !important;width:100%;height:5em;"]),w=/*#__PURE__*/t.css([":focus,:hover,:active{outline:none;}display:flex;width:2em;height:2em;justify-content:center;align-items:center;svg{color:var(--privy-color-error);}svg:hover{color:var(--privy-color-foreground-3);}"]),C=/*#__PURE__*/t.styled.button.withConfig({displayName:"PasskeyItemUnlinkButton",componentId:"sc-a752cbd1-8"})(["",""],w);exports.DoubleIconWrapper=h,exports.LinkButton=x,exports.LinkPasskeyScreen=y,exports.LinkPasskeyView=d,exports.default=y;