UNPKG

@privy-io/react-auth

Version:

React client for the Privy Auth API

76 lines (73 loc) • 8.54 kB
import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useState as i,useEffect as o,useRef as a}from"react";import{isMobile as n,isIOS as s}from"react-device-detect";import{styled as l}from"styled-components";import{L as c}from"./useActiveWallet-3RHPIBxJ.mjs";import{O as d}from"./OpenLink-DZHy38vr.mjs";import{Q as m}from"./QrCode-C1tgJtOy.mjs";import{Check as p,Copy as u}from"lucide-react";import{S as h}from"./ModalHeader-D8-mhjp4.mjs";import{L as v}from"./LabelXs-oqZNqbm_.mjs";import{u as f,q as g}from"./context-WTldtXS8.mjs";import{u as y,b,k as w}from"./internal-context-Z-fyxadS.mjs";import{u as x,a as C}from"./get-is-unified-wallet-Boa8DYrQ.mjs";import{s as S}from"./shouldProceedtoEmbeddedWalletCreationFlow-BMF_3TVv.mjs";import{S as k}from"./ScreenLayout-DTmQLGPf.mjs";import{F as E}from"./farcaster-DPlSjvF5.mjs";import"zustand";import"./use-export-wallet-CV4p7L0b.mjs";import"@privy-io/js-sdk-core";import"eventemitter3";import"viem/utils";import"./useWallets-CR0z5IIt.mjs";import"./events-context-CI0iqAXA.mjs";import"viem";import"./getPublicClient-B4uPLKn-.mjs";import"qrcode";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"tinycolor2";import"ofetch";import"@privy-io/are-addresses-equal";import"./index-BBRkihRn.mjs";import"uuid";import"jose";import"@coinbase/wallet-sdk";import"@privy-io/ethereum";import"mipd";import"@privy-io/popup";import"./paths-3HW55qZg.mjs";import"./usePrivy-6nkpbErN.mjs";import"@scure/base";import"@headlessui/react";import"@walletconnect/ethereum-provider";import"@privy-io/urls";import"./PrivyPluginContext-2QN2dVUw.mjs";import"./getEmbeddedConnectedWallet-JzK4iD-L.mjs";import"js-cookie";import"./frame-uzTmvtww.mjs";import"@privy-io/routes";import"x402/client";import"@privy-io/api-base";import"viem/accounts";import"./use-sign-with-user-signer-Do5Oi_rb.mjs";import"./Screen-Bp-TN9gb.mjs";import"./index-Dq_xe9dz.mjs";let j=l.div` width: 100%; `,T=l.div` display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; height: 56px; background: ${e=>e.$disabled?"var(--privy-color-background-2)":"var(--privy-color-background)"}; border: 1px solid var(--privy-color-foreground-4); border-radius: var(--privy-border-radius-md); &:hover { border-color: ${e=>e.$disabled?"var(--privy-color-foreground-4)":"var(--privy-color-foreground-3)"}; } `,A=l.div` flex: 1; min-width: 0; display: flex; align-items: center; `,L=l.span` display: block; font-size: 16px; line-height: 24px; color: ${e=>e.$disabled?"var(--privy-color-foreground-2)":"var(--privy-color-foreground)"}; overflow: hidden; text-overflow: ellipsis; /* Use single-line truncation without nowrap to respect container width */ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; @media (min-width: 441px) { font-size: 14px; line-height: 20px; } `,F=l(L)` color: var(--privy-color-foreground-3); font-style: italic; `,O=l(v)` margin-bottom: 0.5rem; `,_=l(h)` && { gap: 0.375rem; font-size: 14px; flex-shrink: 0; } `;const I=({value:a,title:n,placeholder:s,className:l,showCopyButton:c=!0,truncate:d,maxLength:m=40,disabled:h=!1})=>{let[v,f]=i(!1),g=d&&a?((e,r,t)=>{if((e=e.startsWith("https://")?e.slice(8):e).length<=t)return e;if("middle"===r){let r=Math.ceil(t/2)-2,i=Math.floor(t/2)-1;return`${e.slice(0,r)}...${e.slice(-i)}`}return`${e.slice(0,t-3)}...`})(a,d,m):a;return o((()=>{if(v){let e=setTimeout((()=>f(!1)),3e3);return()=>clearTimeout(e)}}),[v]),/*#__PURE__*/e(j,{className:l,children:[n&&/*#__PURE__*/r(O,{children:n}),/*#__PURE__*/e(T,{$disabled:h,children:[/*#__PURE__*/r(A,{children:a?/*#__PURE__*/r(L,{$disabled:h,title:a,children:g}):/*#__PURE__*/r(F,{$disabled:h,children:s||"No value"})}),c&&a&&/*#__PURE__*/r(_,{onClick:function(e){e.stopPropagation(),navigator.clipboard.writeText(a).then((()=>f(!0))).catch(console.error)},size:"sm",children:/*#__PURE__*/e(t,v?{children:["Copied",/*#__PURE__*/r(p,{size:14})]}:{children:["Copy",/*#__PURE__*/r(u,{size:14})]})})]})]})},R=({connectUri:t,loading:i,success:o,errorMessage:a,onBack:l,onClose:p,onOpenFarcaster:u})=>/*#__PURE__*/r(k,n||i?s?{title:a?a.message:"Sign in with Farcaster",subtitle:a?a.detail:"To sign in with Farcaster, please open the Farcaster app.",icon:E,iconVariant:"loading",iconLoadingStatus:{success:o,fail:!!a},primaryCta:t&&u?{label:"Open Farcaster app",onClick:u}:void 0,onBack:l,onClose:p,watermark:!0}:{title:a?a.message:"Signing in with Farcaster",subtitle:a?a.detail:"This should only take a moment",icon:E,iconVariant:"loading",iconLoadingStatus:{success:o,fail:!!a},onBack:l,onClose:p,watermark:!0,children:t&&n&&/*#__PURE__*/r(U,{children:/*#__PURE__*/r(d,{text:"Take me to Farcaster",url:t,color:"#8a63d2"})})}:{title:"Sign in with Farcaster",subtitle:"Scan with your phone's camera to continue.",onBack:l,onClose:p,watermark:!0,children:/*#__PURE__*/e(M,{children:[/*#__PURE__*/r(W,{children:t?/*#__PURE__*/r(m,{url:t,size:275,squareLogoElement:E}):/*#__PURE__*/r(D,{children:/*#__PURE__*/r(c,{})})}),/*#__PURE__*/e($,{children:[/*#__PURE__*/r(z,{children:"Or copy this link and paste it into a phone browser to open the Farcaster app."}),t&&/*#__PURE__*/r(I,{value:t,truncate:"end",maxLength:30,showCopyButton:!0,disabled:!0})]})]})}),N={component:()=>{let{authenticated:e,logout:t,ready:n,user:s}=x(),{lastScreen:l,navigate:c,navigateBack:d,setModalData:m}=C(),p=f(),{getAuthFlow:u,loginWithFarcaster:h,closePrivyModal:v,createAnalyticsEvent:k}=y(),[E,j]=i(void 0),[T,A]=i(!1),[L,F]=i(!1),O=a([]),_=u(),I=_?.meta.connectUri;return o((()=>{let e=Date.now(),r=setInterval((async()=>{let t=await _.pollForReady.execute(),i=Date.now()-e;if(t){clearInterval(r),A(!0);try{await h(),F(!0)}catch(e){let r={retryable:!1,message:"Authentication failed"};if(e?.privyErrorCode===b.ALLOWLIST_REJECTED)return void c("AllowlistRejectionScreen");if(e?.privyErrorCode===b.USER_LIMIT_REACHED)return console.error(new w(e).toString()),void c("UserLimitReachedScreen");if(e?.privyErrorCode===b.USER_DOES_NOT_EXIST)return void c("AccountNotFoundScreen");if(e?.privyErrorCode===b.LINKED_TO_ANOTHER_USER)r.detail=e.message??"This account has already been linked to another user.";else{if(e?.privyErrorCode===b.ACCOUNT_TRANSFER_REQUIRED&&e.data?.data?.nonce)return m({accountTransfer:{nonce:e.data?.data?.nonce,account:e.data?.data?.subject,displayName:e.data?.data?.account?.displayName,linkMethod:"farcaster",embeddedWalletAddress:e.data?.data?.otherUser?.embeddedWalletAddress,farcasterEmbeddedAddress:e.data?.data?.otherUser?.farcasterEmbeddedAddress}}),void c("LinkConflictScreen");e?.privyErrorCode===b.INVALID_CREDENTIALS?(r.retryable=!0,r.detail="Something went wrong. Try again."):e?.privyErrorCode===b.TOO_MANY_REQUESTS&&(r.detail="Too many requests. Please wait before trying again.")}j(r)}}else i>12e4&&(clearInterval(r),j({retryable:!0,message:"Authentication failed",detail:"The request timed out. Try again."}))}),2e3);return()=>{clearInterval(r),O.current.forEach((e=>clearTimeout(e)))}}),[]),o((()=>{if(n&&e&&L&&s){if(p?.legal.requireUsersAcceptTerms&&!s.hasAcceptedTerms){let e=setTimeout((()=>{c("AffirmativeConsentScreen")}),g);return()=>clearTimeout(e)}L&&(S(s,p.embeddedWallets)?O.current.push(setTimeout((()=>{m({createWallet:{onSuccess:()=>{},onFailure:e=>{console.error(e),k({eventName:"embedded_wallet_creation_failure_logout",payload:{error:e,screen:"FarcasterConnectStatusScreen"}}),t()},callAuthOnSuccessOnClose:!0}}),c("EmbeddedWalletOnAccountCreateScreen")}),g)):O.current.push(setTimeout((()=>v({shouldCallAuthOnSuccess:!0,isSuccess:!0})),g)))}}),[L,n,e,s]),/*#__PURE__*/r(R,{connectUri:I,loading:T,success:L,errorMessage:E,onBack:l?d:void 0,onClose:v,onOpenFarcaster:()=>{I&&(window.location.href=I)}})}};let U=l.div` margin-top: 24px; `,M=l.div` display: flex; flex-direction: column; align-items: center; gap: 24px; `,W=l.div` display: flex; align-items: center; justify-content: center; min-height: 275px; `,$=l.div` display: flex; flex-direction: column; align-items: center; gap: 16px; `,z=l.div` font-size: 0.875rem; text-align: center; color: var(--privy-color-foreground-2); `,D=l.div` position: relative; width: 82px; height: 82px; `;export{N as FarcasterConnectStatusScreen,R as FarcasterConnectStatusView,N as default};