import{jsx as e,jsxs as r}from"react/jsx-runtime";import{CheckCircle as o,FingerprintIcon as t,Trash2 as i}from"lucide-react";import{useState as n,useEffect as a}from"react";import{styled as s,css as c}from"styled-components";import{B as l}from"./useActiveWallet-BEfvREjE.mjs";import{T as d,a as m}from"./TodoList-CgrU7uwu.mjs";import{b as p,a as h}from"./errors-Dd6zfYtp.mjs";import{u}from"./internal-context-dfitw7Ot.mjs";import{u as y}from"./modal-context-DBwfUxD-.mjs";import{u as f}from"./privy-context-Bi6vqCPc.mjs";import{l as v}from"./usePrivy-BhL-ltvm.mjs";import{S as k}from"./ScreenLayout-Caq5mGD8.mjs";import"viem/utils";import"./wallet-connect-58EobR5U.mjs";import"./getPublicClient-D4yNgeGy.mjs";import"viem";import"viem/chains";import"@privy-io/js-sdk-core";import"eventemitter3";import"./context-BKnOUECq.mjs";import"tinycolor2";import"./events-context-BJ75xIIf.mjs";import"./index-BtwxknTg.mjs";import"zustand";import"react-device-detect";import"./get-entropy-details-for-user-BIWg0YxF.mjs";import"./user-D5cqJNp9.mjs";import"ofetch";import"@privy-io/are-addresses-equal";import"./use-unlink-wallet-oAguM2-k.mjs";import"@privy-io/popup";import"./paths-BH8W4zMc.mjs";import"./pkce-BinverJO.mjs";import"jose";import"./ModalHeader-DffkxvO4.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"./Screen-D8KNyGVj.mjs";import"./index-Dq_xe9dz.mjs";const g=({passkeys:i,name:n,isLoading:a,errorReason:s,success:c,expanded:l,onLinkPasskey:d,onUnlinkPasskey:m,onExpand:p,onBack:h,onClose:u})=>c?/*#__PURE__*/e(k,{title:"Passkeys updated",icon:o,iconVariant:"success",primaryCta:{label:"Done",onClick:u},onClose:u,watermark:!0}):l?/*#__PURE__*/e(k,{icon:t,title:"Your passkeys",onBack:h,onClose:u,watermark:!0,children:/*#__PURE__*/e(C,{passkeys:i,expanded:l,onUnlink:m,onExpand:p})}):/*#__PURE__*/r(k,{icon:t,title:"Set up passkey verification",subtitle:"Verify with passkey",primaryCta:{label:"Add new passkey",onClick:d,loading:a},onClose:u,watermark:!0,helpText:s||void 0,children:[0===i.length?/*#__PURE__*/e(A,{}):/*#__PURE__*/e(x,{children:/*#__PURE__*/e(C,{passkeys:i,expanded:l,onUnlink:m,onExpand:p})}),n?/*#__PURE__*/r(w,{children:[/*#__PURE__*/e(j,{children:"New Passkey Name"}),/*#__PURE__*/e(b,{children:n})]}):null]});let x=s.div`
  margin-bottom: 0.75rem;
`,w=s.div`
  margin-top: 0.25rem;
`,j=s.div`
  color: var(--privy-color-foreground-2);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  margin-bottom: 0.25rem;
`,b=s.div`
  color: var(--privy-color-foreground);
  font-size: 0.875rem;
  line-height: 1.25rem;
`,C=({passkeys:o,expanded:t,onUnlink:a,onExpand:s})=>{let[c,d]=n([]),m=t?o.length:2;/*#__PURE__*/return r("div",{children:[/*#__PURE__*/e(z,{children:"Your passkeys"}),/*#__PURE__*/r(N,{children:[o.slice(0,m).map((o=>{/*#__PURE__*/return r(M,{children:[/*#__PURE__*/r("div",{children:[/*#__PURE__*/e(S,{children:(t=o,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__*/r(T,{children:["Last used:"," ",(o.latestVerifiedAt??o.firstVerifiedAt)?.toLocaleString()??"N/A"]})]}),/*#__PURE__*/e(W,{disabled:c.includes(o.credentialId),onClick:()=>(async e=>{d((r=>r.concat([e]))),await a(e),d((r=>r.filter((r=>r!==e))))})(o.credentialId),children:c.includes(o.credentialId)?/*#__PURE__*/e(l,{}):/*#__PURE__*/e(i,{size:16})})]},o.credentialId);var t})),o.length>2&&!t&&/*#__PURE__*/e(L,{onClick:s,children:"View all"})]})]})},A=()=>/*#__PURE__*/r(d,{style:{color:"var(--privy-color-foreground)"},children:[/*#__PURE__*/e(m,{children:"Verify with Touch ID, Face ID, PIN, or hardware key"}),/*#__PURE__*/e(m,{children:"Takes seconds to set up and use"}),/*#__PURE__*/e(m,{children:"Use your passkey to verify transactions and login to your account"})]});const I={component:()=>{let{user:r}=f(),{unlink:o}=v(),{linkWithPasskey:t,closePrivyModal:i}=u(),{data:s}=y(),c=r?.linkedAccounts.filter((e=>"passkey"===e.type)),[l,d]=n(!1),[m,k]=n(""),[x,w]=n(!1),[j,b]=n(!1);a((()=>{0===c.length&&b(!1)}),[c.length]);/*#__PURE__*/return e(g,{passkeys:c,name:s?.passkeyAuthModalData?.name,isLoading:l,errorReason:m,success:x,expanded:j,onLinkPasskey:()=>{d(!0),t({name:s?.passkeyAuthModalData?.name}).then((()=>w(!0))).catch((e=>{if(e instanceof p){if(e.privyErrorCode===h.CANNOT_LINK_MORE_OF_TYPE)return void k("Cannot link more passkeys to account.");if(e.privyErrorCode===h.PASSKEY_NOT_ALLOWED)return void k("Passkey request timed out or rejected by user.")}k("Unknown error occurred.")})).finally((()=>{d(!1)}))},onUnlinkPasskey:async e=>(d(!0),await o({credentialId:e}).then((()=>w(!0))).catch((e=>{e instanceof p&&e.privyErrorCode===h.MISSING_MFA_CREDENTIALS?k("Cannot unlink a passkey enrolled in MFA"):k("Unknown error occurred.")})).finally((()=>{d(!1)}))),onExpand:()=>b(!0),onBack:()=>b(!1),onClose:()=>i()})}},E=s.div`
  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 P=c`
  && {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1rem;

    /* Tablet and Up */
    @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 L=s.button`
  ${P}
`;let N=s.div`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  padding: 0.5rem 0rem 0rem;
  flex-grow: 1;
  width: 100%;
`,z=s.div`
  line-height: 20px;
  height: 20px;
  font-size: 1em;
  font-weight: 450;
  display: flex;
  justify-content: flex-beginning;
  width: 100%;
`,S=s.div`
  font-size: 1em;
  line-height: 1.3em;
  font-weight: 500;
  color: var(--privy-color-foreground-2);
  padding: 0.2em 0;
`,T=s.div`
  font-size: 0.875rem;
  line-height: 1rem;
  color: #64668b;
  padding: 0.2em 0;
`,M=s.div`
  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;
`,U=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);
  }
`,W=s.button`
  ${U}
`;export{E as DoubleIconWrapper,L as LinkButton,I as LinkPasskeyScreen,g as LinkPasskeyView,I as default};
//# sourceMappingURL=LinkPasskeyScreen-C-MqivSL.mjs.map
