@privy-io/react-auth
Version:
React client for the Privy Auth API
106 lines (101 loc) • 6.29 kB
JavaScript
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{CheckCircle as t,FingerprintIcon as o,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{G as l}from"./useActiveWallet-3RHPIBxJ.mjs";import{T as d,a as p}from"./TodoList-CgrU7uwu.mjs";import{u as m,c as h,b as u}from"./internal-context-Z-fyxadS.mjs";import{u as y}from"./get-is-unified-wallet-Boa8DYrQ.mjs";import{S as f}from"./ScreenLayout-DTmQLGPf.mjs";import"zustand";import"./context-WTldtXS8.mjs";import"@privy-io/js-sdk-core";import"tinycolor2";import"react-device-detect";import"./use-export-wallet-CV4p7L0b.mjs";import"eventemitter3";import"viem/utils";import"./useWallets-CR0z5IIt.mjs";import"./events-context-CI0iqAXA.mjs";import"viem";import"./getPublicClient-B4uPLKn-.mjs";import"ofetch";import"@privy-io/are-addresses-equal";import"./ModalHeader-D8-mhjp4.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-Bp-TN9gb.mjs";import"./index-Dq_xe9dz.mjs";const k=({passkeys:r,isLoading:i,errorReason:n,success:a,expanded:s,onLinkPasskey:c,onUnlinkPasskey:l,onExpand:d,onBack:p,onClose:m})=>/*#__PURE__*/e(f,a?{title:"Passkeys updated",icon:t,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(g,{passkeys:r,expanded:s,onUnlink:l,onExpand:d})}:{icon:o,title:"Set up passkey verification",subtitle:"Verify with passkey",primaryCta:{label:"Add new passkey",onClick:c,loading:i},onClose:m,watermark:!0,helpText:n||void 0,children:0===r.length?/*#__PURE__*/e(x,{}):/*#__PURE__*/e(v,{children:/*#__PURE__*/e(g,{passkeys:r,expanded:s,onUnlink:l,onExpand:d})})});let v=s.div`
margin-bottom: 12px;
`,g=({passkeys:t,expanded:o,onUnlink:a,onExpand:s})=>{let[c,d]=n([]),p=o?t.length:2;/*#__PURE__*/return r("div",{children:[/*#__PURE__*/e(A,{children:"Your passkeys"}),/*#__PURE__*/r(I,{children:[t.slice(0,p).map((t=>{/*#__PURE__*/return r(P,{children:[/*#__PURE__*/r("div",{children:[/*#__PURE__*/e(E,{children:(o=t,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__*/r(L,{children:["Last used:"," ",(t.latestVerifiedAt??t.firstVerifiedAt)?.toLocaleString()??"N/A"]})]}),/*#__PURE__*/e(W,{disabled:c.includes(t.credentialId),onClick:()=>(async e=>{d((r=>r.concat([e]))),await a(e),d((r=>r.filter((r=>r!==e))))})(t.credentialId),children:c.includes(t.credentialId)?/*#__PURE__*/e(l,{}):/*#__PURE__*/e(i,{size:16})})]},t.credentialId);var o})),t.length>2&&!o&&/*#__PURE__*/e(C,{onClick:s,children:"View all"})]})]})},x=()=>/*#__PURE__*/r(d,{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:r,unlinkPasskey:t}=y(),{linkWithPasskey:o,closePrivyModal:i}=m(),s=r?.linkedAccounts.filter((e=>"passkey"===e.type)),[c,l]=n(!1),[d,p]=n(""),[f,v]=n(!1),[g,x]=n(!1);return a((()=>{0===s.length&&x(!1)}),[s.length]),/*#__PURE__*/e(k,{passkeys:s,isLoading:c,errorReason:d,success:f,expanded:g,onLinkPasskey:()=>{l(!0),o().then((()=>v(!0))).catch((e=>{if(e instanceof h){if(e.privyErrorCode===u.CANNOT_LINK_MORE_OF_TYPE)return void p("Cannot link more passkeys to account.");if(e.privyErrorCode===u.PASSKEY_NOT_ALLOWED)return void p("Passkey request timed out or rejected by user.")}p("Unknown error occurred.")})).finally((()=>{l(!1)}))},onUnlinkPasskey:async e=>(l(!0),await t(e).then((()=>v(!0))).catch((e=>{e instanceof h&&e.privyErrorCode===u.MISSING_MFA_CREDENTIALS?p("Cannot unlink a passkey enrolled in MFA"):p("Unknown error occurred.")})).finally((()=>{l(!1)}))),onExpand:()=>x(!0),onBack:()=>x(!1),onClose:()=>i()})}},j=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 b=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 C=s.button`
${b}
`;let I=s.div`
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.8rem;
padding: 0.5rem 0rem 0rem;
flex-grow: 1;
width: 100%;
`,A=s.div`
line-height: 20px;
height: 20px;
font-size: 1em;
font-weight: 450;
display: flex;
justify-content: flex-beginning;
width: 100%;
`,E=s.div`
font-size: 1em;
line-height: 1.3em;
font-weight: 500;
color: var(--privy-color-foreground-2);
padding: 0.2em 0;
`,L=s.div`
font-size: 0.875rem;
line-height: 1rem;
color: #64668b;
padding: 0.2em 0;
`,P=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;
`,N=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`
${N}
`;export{j as DoubleIconWrapper,C as LinkButton,w as LinkPasskeyScreen,k as LinkPasskeyView,w as default};