@privy-io/react-auth
Version:
React client for the Privy Auth API
106 lines (101 loc) • 6.7 kB
JavaScript
;var e=require("react/jsx-runtime"),r=require("lucide-react"),i=require("react"),t=require("styled-components"),n=require("./useActiveWallet-Cn6zOXx5.js"),o=require("./TodoList-Cii_KrAk.js"),s=require("./internal-context-BJv4f_bO.js"),a=require("./get-is-unified-wallet-UpdjHxOV.js"),c=require("./ScreenLayout-CMb-Fua0.js");require("zustand"),require("./context-D-ZJYjUg.js"),require("@privy-io/js-sdk-core"),require("tinycolor2"),require("react-device-detect"),require("./use-export-wallet-B5ujV5Nk.js"),require("eventemitter3"),require("viem/utils"),require("./useWallets-CKAypPZB.js"),require("./events-context-Di6--rDg.js"),require("viem"),require("./getPublicClient-BsmZyCGX.js"),require("ofetch"),require("@privy-io/are-addresses-equal"),require("./ModalHeader-BCPQgekO.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-BfKedqka.js"),require("./index-ByFhjjzH.js");const l=({passkeys:i,isLoading:t,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:i,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:t},onClose:x,watermark:!0,helpText:n||void 0,children:0===i.length?/*#__PURE__*/e.jsx(p,{}):/*#__PURE__*/e.jsx(d,{children:/*#__PURE__*/e.jsx(u,{passkeys:i,expanded:s,onUnlink:l,onExpand:y})})});let d=t.styled.div`
margin-bottom: 12px;
`,u=({passkeys:t,expanded:o,onUnlink:s,onExpand:a})=>{let[c,l]=i.useState([]),d=o?t.length:2;/*#__PURE__*/return e.jsxs("div",{children:[/*#__PURE__*/e.jsx(g,{children:"Your passkeys"}),/*#__PURE__*/e.jsxs(v,{children:[t.slice(0,d).map((i=>{/*#__PURE__*/return e.jsxs(j,{children:[/*#__PURE__*/e.jsxs("div",{children:[/*#__PURE__*/e.jsx(m,{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(f,{children:["Last used:"," ",(i.latestVerifiedAt??i.firstVerifiedAt)?.toLocaleString()??"N/A"]})]}),/*#__PURE__*/e.jsx(q,{disabled:c.includes(i.credentialId),onClick:()=>(async e=>{l((r=>r.concat([e]))),await s(e),l((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(k,{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)),[d,u]=i.useState(!1),[p,y]=i.useState(""),[h,x]=i.useState(!1),[k,v]=i.useState(!1);return i.useEffect((()=>{0===c.length&&v(!1)}),[c.length]),/*#__PURE__*/e.jsx(l,{passkeys:c,isLoading:d,errorReason:p,success:h,expanded:k,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 t(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:()=>v(!0),onBack:()=>v(!1),onClose:()=>o()})}},h=t.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=t.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) ;
:focus {
outline: none;
box-shadow: none;
}
}
`;const k=t.styled.button`
${x}
`;let v=t.styled.div`
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.8rem;
padding: 0.5rem 0rem 0rem;
flex-grow: 1;
width: 100%;
`,g=t.styled.div`
line-height: 20px;
height: 20px;
font-size: 1em;
font-weight: 450;
display: flex;
justify-content: flex-beginning;
width: 100%;
`,m=t.styled.div`
font-size: 1em;
line-height: 1.3em;
font-weight: 500;
color: var(--privy-color-foreground-2);
padding: 0.2em 0;
`,f=t.styled.div`
font-size: 0.875rem;
line-height: 1rem;
color: #64668b;
padding: 0.2em 0;
`,j=t.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=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);
}
`,q=t.styled.button`
${w}
`;exports.DoubleIconWrapper=h,exports.LinkButton=k,exports.LinkPasskeyScreen=y,exports.LinkPasskeyView=l,exports.default=y;