@privy-io/react-auth/dist/esm/LinkPasskeyScreen-yKY5ebtx.mjs

React client for the Privy Auth API

import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CheckCircle as i,FingerprintIcon as o,Trash2 as n}from"lucide-react";import{useState as r,useEffect as a}from"react";import{styled as s,css as c}from"styled-components";import{G as d}from"./useActiveWallet-Bsy5GTCV.mjs";import{T as l,a as p}from"./TodoList-Dn0Qu-vv.mjs";import{u as m,c as h,b as y}from"./internal-context-e-Eni5bG.mjs";import{u}from"./get-is-unified-wallet-DvKS5IUO.mjs";import{S as f}from"./ScreenLayout-CddsD3Of.mjs";import"zustand";import"./context-Bycd1SKV.mjs";import"@privy-io/js-sdk-core";import"tinycolor2";import"react-device-detect";import"./prepareFundingModalData-CIgFwA7s.mjs";import"eventemitter3";import"./events-context-CI0iqAXA.mjs";import"viem";import"viem/utils";import"./getPublicClient-A9RSftUZ.mjs";import"./useWallets-D0lpBS44.mjs";import"ofetch";import"./Button-B8mqatRx.mjs";import"./Screen-BTyXgDrd.mjs";import"./ModalHeader-BLGC-7ev.mjs";import"@heroicons/react/24/outline/ArrowLeftIcon";import"@heroicons/react/24/outline/ArrowRightIcon";import"@heroicons/react/24/outline/QuestionMarkCircleIcon";import"@heroicons/react/24/outline/XMarkIcon";import"./index-CJMgUOnw.mjs";const g=({passkeys:t,isLoading:n,errorReason:r,success:a,expanded:s,onLinkPasskey:c,onUnlinkPasskey:d,onExpand:l,onBack:p,onClose:m})=>/*#__PURE__*/e(f,a?{title:"Passkeys updated",icon:i,iconVariant:"success",primaryCta:{label:"Done",onClick:m},onClose:m,watermark:!0}:s?{icon:o,title:"Your passkeys",onBack:p,onClose:m,watermark:!0,children:/*#__PURE__*/e(v,{passkeys:t,expanded:s,onUnlink:d,onExpand:l})}:{icon:o,title:"Set up passkey verification",subtitle:"Verify with passkey",primaryCta:{label:"Add new passkey",onClick:c,loading:n},onClose:m,watermark:!0,helpText:r||void 0,children:0===t.length?/*#__PURE__*/e(x,{}):/*#__PURE__*/e(k,{children:/*#__PURE__*/e(v,{passkeys:t,expanded:s,onUnlink:d,onExpand:l})})});let k=/*#__PURE__*/s.div.withConfig({displayName:"ContentContainer",componentId:"sc-a752cbd1-0"})(["margin-bottom:12px;"]),v=({passkeys:i,expanded:o,onUnlink:a,onExpand:s})=>{let[c,l]=r([]),p=o?i.length:2;/*#__PURE__*/return t("div",{children:[/*#__PURE__*/e(N,{children:"Your passkeys"}),/*#__PURE__*/t(j,{children:[i.slice(0,p).map((i=>{/*#__PURE__*/return t(A,{children:[/*#__PURE__*/t("div",{children:[/*#__PURE__*/e(P,{children:(o=i,o.authenticatorName?o.createdWithBrowser?`${o.authenticatorName} on ${o.createdWithBrowser}`:o.authenticatorName:o.createdWithBrowser?o.createdWithOs?`${o.createdWithBrowser} on ${o.createdWithOs}`:`${o.createdWithBrowser}`:"Unknown device")}),/*#__PURE__*/t(L,{children:["Last used:"," ",(i.latestVerifiedAt??i.firstVerifiedAt)?.toLocaleString()??"N/A"]})]}),/*#__PURE__*/e(B,{disabled:c.includes(i.credentialId),onClick:()=>(async e=>{l((t=>t.concat([e]))),await a(e),l((t=>t.filter((t=>t!==e))))})(i.credentialId),children:c.includes(i.credentialId)?/*#__PURE__*/e(d,{}):/*#__PURE__*/e(n,{size:16})})]},i.credentialId);var o})),i.length>2&&!o&&/*#__PURE__*/e(I,{onClick:s,children:"View all"})]})]})},x=()=>/*#__PURE__*/t(l,{style:{color:"var(--privy-color-foreground)"},children:[/*#__PURE__*/e(p,{children:"Verify with Touch ID, Face ID, PIN, or hardware key"}),/*#__PURE__*/e(p,{children:"Takes seconds to set up and use"}),/*#__PURE__*/e(p,{children:"Use your passkey to verify transactions and login to your account"})]});const w={component:()=>{let{user:t,unlinkPasskey:i}=u(),{linkWithPasskey:o,closePrivyModal:n}=m(),s=t?.linkedAccounts.filter((e=>"passkey"===e.type)),[c,d]=r(!1),[l,p]=r(""),[f,k]=r(!1),[v,x]=r(!1);return a((()=>{0===s.length&&x(!1)}),[s.length]),/*#__PURE__*/e(g,{passkeys:s,isLoading:c,errorReason:l,success:f,expanded:v,onLinkPasskey:()=>{d(!0),o().then((()=>k(!0))).catch((e=>{if(e instanceof h){if(e.privyErrorCode===y.CANNOT_LINK_MORE_OF_TYPE)return void p("Cannot link more passkeys to account.");if(e.privyErrorCode===y.PASSKEY_NOT_ALLOWED)return void p("Passkey request timed out or rejected by user.")}p("Unknown error occurred.")})).finally((()=>{d(!1)}))},onUnlinkPasskey:async e=>(d(!0),await i(e).then((()=>k(!0))).catch((e=>{e instanceof h&&e.privyErrorCode===y.MISSING_MFA_CREDENTIALS?p("Cannot unlink a passkey enrolled in MFA"):p("Unknown error occurred.")})).finally((()=>{d(!1)}))),onExpand:()=>x(!0),onBack:()=>x(!1),onClose:()=>n()})}},C=/*#__PURE__*/s.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 b=/*#__PURE__*/c(["&&{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 I=/*#__PURE__*/s.button.withConfig({displayName:"LinkButton",componentId:"sc-a752cbd1-2"})(["",""],b);let j=/*#__PURE__*/s.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%;"]),N=/*#__PURE__*/s.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%;"]),P=/*#__PURE__*/s.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;"]),L=/*#__PURE__*/s.div.withConfig({displayName:"PasskeyItemSubtitle",componentId:"sc-a752cbd1-6"})(["font-size:0.875rem;line-height:1rem;color:#64668b;padding:0.2em 0;"]),A=/*#__PURE__*/s.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;"]),E=/*#__PURE__*/c([":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);}"]),B=/*#__PURE__*/s.button.withConfig({displayName:"PasskeyItemUnlinkButton",componentId:"sc-a752cbd1-8"})(["",""],E);export{C as DoubleIconWrapper,I as LinkButton,w as LinkPasskeyScreen,g as LinkPasskeyView,w as default};