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

React client for the Privy Auth API

"use strict";var e=require("react/jsx-runtime"),r=require("lucide-react"),t=require("react"),i=require("styled-components"),n=require("./useActiveWallet-BfMD5hzE.js"),o=require("./TodoList-Cii_KrAk.js"),s=require("./internal-context-BJv4f_bO.js"),a=require("./privy-context-CrM9_s6G.js"),c=require("./ScreenLayout-C4QHZMbl.js");require("zustand"),require("./context-Cg3IEi80.js"),require("@privy-io/js-sdk-core"),require("tinycolor2"),require("react-device-detect"),require("./use-export-wallet-_EIyxyle.js"),require("./useWallets-dikDynAG.js"),require("viem"),require("eventemitter3"),require("viem/utils"),require("./events-context-Di6--rDg.js"),require("ofetch"),require("@privy-io/are-addresses-equal"),require("./ModalHeader-C5Wuo3-1.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("./Screen-DWnRbzSA.js"),require("./index-ByFhjjzH.js");const l=({passkeys:t,isLoading:i,errorReason:n,success:o,expanded:s,onLinkPasskey:a,onUnlinkPasskey:l,onExpand:y,onBack:h,onClose:x})=>o?/*#__PURE__*/e.jsx(c.ScreenLayout,{title:"Passkeys updated",icon:r.CheckCircle,iconVariant:"success",primaryCta:{label:"Done",onClick:x},onClose:x,watermark:!0}):s?/*#__PURE__*/e.jsx(c.ScreenLayout,{icon:r.FingerprintIcon,title:"Your passkeys",onBack:h,onClose:x,watermark:!0,children:/*#__PURE__*/e.jsx(u,{passkeys:t,expanded:s,onUnlink:l,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:i},onClose:x,watermark:!0,helpText:n||void 0,children:0===t.length?/*#__PURE__*/e.jsx(p,{}):/*#__PURE__*/e.jsx(d,{children:/*#__PURE__*/e.jsx(u,{passkeys:t,expanded:s,onUnlink:l,onExpand:y})})});let d=i.styled.div`
  margin-bottom: 12px;
`,u=({passkeys:i,expanded:o,onUnlink:s,onExpand:a})=>{let[c,l]=t.useState([]),d=o?i.length:2;/*#__PURE__*/return e.jsxs("div",{children:[/*#__PURE__*/e.jsx(m,{children:"Your passkeys"}),/*#__PURE__*/e.jsxs(k,{children:[i.slice(0,d).map((t=>{/*#__PURE__*/return e.jsxs(j,{children:[/*#__PURE__*/e.jsxs("div",{children:[/*#__PURE__*/e.jsx(g,{children:(i=t,i.authenticatorName?i.createdWithBrowser?`${i.authenticatorName} on ${i.createdWithBrowser}`:i.authenticatorName:i.createdWithBrowser?i.createdWithOs?`${i.createdWithBrowser} on ${i.createdWithOs}`:`${i.createdWithBrowser}`:"Unknown device")}),/*#__PURE__*/e.jsxs(f,{children:["Last used:"," ",(t.latestVerifiedAt??t.firstVerifiedAt)?.toLocaleString()??"N/A"]})]}),/*#__PURE__*/e.jsx(q,{disabled:c.includes(t.credentialId),onClick:()=>(async e=>{l((r=>r.concat([e]))),await s(e),l((r=>r.filter((r=>r!==e))))})(t.credentialId),children:c.includes(t.credentialId)?/*#__PURE__*/e.jsx(n.ButtonLoader,{}):/*#__PURE__*/e.jsx(r.Trash2,{size:16})})]},t.credentialId);var i})),i.length>2&&!o&&/*#__PURE__*/e.jsx(v,{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:i}=a.usePrivyContext(),{linkWithPasskey:n,closePrivyModal:o}=s.usePrivyInternal(),c=r?.linkedAccounts.filter((e=>"passkey"===e.type)),[d,u]=t.useState(!1),[p,y]=t.useState(""),[h,x]=t.useState(!1),[v,k]=t.useState(!1);return t.useEffect((()=>{0===c.length&&k(!1)}),[c.length]),/*#__PURE__*/e.jsx(l,{passkeys:c,isLoading:d,errorReason:p,success:h,expanded:v,onLinkPasskey:()=>{u(!0),n().then((()=>x(!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 i(e).then((()=>x(!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=i.styled.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 x=i.css`
  && {
    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 v=i.styled.button`
  ${x}
`;let k=i.styled.div`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  padding: 0.5rem 0rem 0rem;
  flex-grow: 1;
  width: 100%;
`,m=i.styled.div`
  line-height: 20px;
  height: 20px;
  font-size: 1em;
  font-weight: 450;
  display: flex;
  justify-content: flex-beginning;
  width: 100%;
`,g=i.styled.div`
  font-size: 1em;
  line-height: 1.3em;
  font-weight: 500;
  color: var(--privy-color-foreground-2);
  padding: 0.2em 0;
`,f=i.styled.div`
  font-size: 0.875rem;
  line-height: 1rem;
  color: #64668b;
  padding: 0.2em 0;
`,j=i.styled.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;
`,w=i.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);
  }
`,q=i.styled.button`
  ${w}
`;exports.DoubleIconWrapper=h,exports.LinkButton=v,exports.LinkPasskeyScreen=y,exports.LinkPasskeyView=l,exports.default=y;