@privy-io/react-auth/dist/cjs/AwaitingPasswordlessCodeScreen-COP_Jshz.js

React client for the Privy Auth API

"use strict";var e=require("react/jsx-runtime"),r=require("@heroicons/react/20/solid/CheckIcon"),i=require("@heroicons/react/24/outline/EnvelopeIcon"),o=require("@heroicons/react/24/outline/PhoneIcon"),t=require("react"),n=require("react-device-detect"),a=require("styled-components"),s=require("./Layouts-dRL0OSpp.js"),c=require("./Link-DmzPZ_M7.js"),l=require("./context-DFq1obBO.js"),d=require("./internal-context-NWsAL807.js"),u=require("./get-is-unified-wallet-D4ouXJpi.js"),p=require("./shouldProceedtoEmbeddedWalletCreationFlow-DZvEYqlO.js"),v=require("./ScreenLayout-BeH-Q6N2.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@privy-io/js-sdk-core"),require("tinycolor2"),require("ofetch"),require("viem"),require("./index-NJrQkxJ7.js"),require("uuid"),require("jose"),require("eventemitter3"),require("./useActiveWallet-BOX8xCn9.js"),require("zustand"),require("./prepareFundingModalData-Cnd6rhhJ.js"),require("./events-context-Di6--rDg.js"),require("viem/utils"),require("./getPublicClient-CGlodIp_.js"),require("./useWallets-BLFNjTwC.js"),require("@coinbase/wallet-sdk"),require("@privy-io/ethereum"),require("mipd"),require("@privy-io/popup"),require("./paths-DizMb-lU.js"),require("./usePrivy-CcfSRv1R.js"),require("@scure/base"),require("@headlessui/react"),require("@walletconnect/ethereum-provider"),require("@privy-io/urls"),require("js-cookie"),require("./frame-B14fp9oC.js"),require("@privy-io/routes"),require("x402/client"),require("@privy-io/api-base"),require("viem/accounts"),require("./use-sign-with-user-signer-BcAsQTGF.js"),require("./getEmbeddedConnectedWallet-6TsVZJkD.js"),require("./Button-Bm_Ft0Dw.js"),require("./Screen-D9Tvi297.js"),require("./ModalHeader-DB7Tbjwz.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("./index-CRFXS9pP.js");var m=/*#__PURE__*/f(r),y=/*#__PURE__*/f(i),h=/*#__PURE__*/f(o);const E=({contactMethod:r,authFlow:i,appName:o="Privy",whatsAppEnabled:a=!1,onBack:l,onCodeSubmit:d,onResend:u,errorMessage:p,success:f=!1,resendCountdown:E=0,onInvalidInput:C,onClearError:b})=>{let[S,q]=t.useState(x);t.useEffect((()=>{p||q(x)}),[p]);let A="email"===i?/*#__PURE__*/e.jsxs("span",{children:["Please check ",/*#__PURE__*/e.jsx(_,{children:r})," for an email from privy.io and enter your code below."]}):/*#__PURE__*/e.jsxs("span",{children:["Please check ",/*#__PURE__*/e.jsx(_,{children:r})," for a",a?" WhatsApp":""," message from ",o," and enter your code below."]}),P=/*#__PURE__*/e.jsxs(N,{children:[/*#__PURE__*/e.jsxs("span",{children:["Didn't get ","email"===i?"an email":"a message","?"]}),E?/*#__PURE__*/e.jsxs(T,{children:[/*#__PURE__*/e.jsx(m.default,{color:"var(--privy-color-foreground)",strokeWidth:1.33,height:"12px",width:"12px"}),/*#__PURE__*/e.jsx("span",{children:"Code sent"})]}):/*#__PURE__*/e.jsx(c.Link,{as:"button",size:"sm",onClick:u,children:"Resend code"})]}),k=async e=>{e.preventDefault();let r=e.currentTarget.value.replace(" ","");if(""===r)return;if(isNaN(Number(r)))return void C?.("Code should be numeric");b?.();let i=Number(e.currentTarget.name?.charAt(5)),o=[...r||[""]].slice(0,g-i),t=[...S.slice(0,i),...o,...S.slice(i+o.length)];q(t);let n=Math.min(Math.max(i+o.length,0),g-1);if(!isNaN(Number(e.currentTarget.value))){let e=document.querySelector(`input[name=code-${n}]`);e?.focus()}if(t.every((e=>e&&!isNaN(+e)))){let e=document.querySelector(`input[name=code-${n}]`);e?.blur(),await(d?.(t.join("")))}};/*#__PURE__*/return e.jsx(v.ScreenLayout,{title:"Enter confirmation code",subtitle:A,icon:"email"===i?y.default:h.default,onBack:l,showBack:!0,helpText:P,children:/*#__PURE__*/e.jsx(w,{children:/*#__PURE__*/e.jsx(s.HorizontallyCenteredItem,{children:/*#__PURE__*/e.jsxs(j,{children:[/*#__PURE__*/e.jsx("div",{children:S.map(((r,i)=>/*#__PURE__*/e.jsx("input",{name:`code-${i}`,type:"text",value:S[i],onChange:k,onKeyUp:e=>{"Backspace"===e.key&&(e=>{if(b?.(),q([...S.slice(0,e),"",...S.slice(e+1)]),e>0){let r=document.querySelector(`input[name=code-${e-1}]`);r?.focus()}})(i)},inputMode:"numeric",autoFocus:0===i,pattern:"[0-9]",className:`${f?"success":""} ${p?"fail":""}`,autoComplete:n.isMobile?"one-time-code":"off"},i)))}),/*#__PURE__*/e.jsx(I,{$fail:!!p,$success:f,children:/*#__PURE__*/e.jsx("span",{children:"Invalid or expired verification code"===p?"Incorrect code":p||(f?"Success!":"")})})]})})})})};let g=6,x=Array(6).fill("");var C,b,S=((C=S||{})[C.RESET_AFTER_DELAY=0]="RESET_AFTER_DELAY",C[C.CLEAR_ON_NEXT_VALID_INPUT=1]="CLEAR_ON_NEXT_VALID_INPUT",C),q=((b=q||{})[b.EMAIL=0]="EMAIL",b[b.SMS=1]="SMS",b);const A={component:()=>{let{navigate:r,lastScreen:i,navigateBack:o,setModalData:n,onUserCloseViaDialogOrKeybindRef:a}=u.usePrivyModal(),s=l.useAppConfig(),{closePrivyModal:c,resendEmailCode:v,resendSmsCode:f,getAuthMeta:m,loginWithCode:y,updateWallets:h,createAnalyticsEvent:g}=d.usePrivyInternal(),{authenticated:x,logout:C,user:b}=u.usePrivyContext(),{whatsAppEnabled:S}=l.useAppConfig(),[q,A]=t.useState(!1),[w,j]=t.useState(null),[I,N]=t.useState(null),[T,_]=t.useState(0);a.current=()=>null;let P=m()?.email?0:1,k=0===P?m()?.email||"":m()?.phoneNumber||"",L=l.DEFAULT_SUCCESS_SCREEN_DURATION_MS-500;t.useEffect((()=>{if(T){let e=setTimeout((()=>{_(T-1)}),1e3);return()=>clearTimeout(e)}}),[T]),t.useEffect((()=>{if(x&&q&&b){if(s?.legal.requireUsersAcceptTerms&&!b.hasAcceptedTerms){let e=setTimeout((()=>{r("AffirmativeConsentScreen")}),L);return()=>clearTimeout(e)}if(p.shouldProceedtoEmbeddedWalletCreationFlow(b,s.embeddedWallets)){let e=setTimeout((()=>{n({createWallet:{onSuccess:()=>{},onFailure:e=>{console.error(e),g({eventName:"embedded_wallet_creation_failure_logout",payload:{error:e,screen:"AwaitingPasswordlessCodeScreen"}}),C()},callAuthOnSuccessOnClose:!0}}),r("EmbeddedWalletOnAccountCreateScreen")}),L);return()=>clearTimeout(e)}{h();let e=setTimeout((()=>c({shouldCallAuthOnSuccess:!0,isSuccess:!0})),l.DEFAULT_SUCCESS_SCREEN_DURATION_MS);return()=>clearTimeout(e)}}}),[x,q,b]),t.useEffect((()=>{if(w&&0===I){let e=setTimeout((()=>{j(null),N(null);let e=document.querySelector("input[name=code-0]");e?.focus()}),1400);return()=>clearTimeout(e)}}),[w,I]);/*#__PURE__*/return e.jsx(E,{contactMethod:k,authFlow:0===P?"email":"sms",appName:s?.name,whatsAppEnabled:S,onBack:()=>o(),onCodeSubmit:async e=>{try{await y(e),A(!0)}catch(e){if(e instanceof d.PrivyApiError&&e.privyErrorCode===d.PrivyErrorCode.INVALID_CREDENTIALS)j("Invalid or expired verification code"),N(0);else if(e instanceof d.PrivyApiError&&e.privyErrorCode===d.PrivyErrorCode.CANNOT_LINK_MORE_OF_TYPE)j(e.message);else{if(e instanceof d.PrivyApiError&&e.privyErrorCode===d.PrivyErrorCode.USER_LIMIT_REACHED)return console.error(new d.PrivyUserLimitReachedError(e).toString()),void r("UserLimitReachedScreen");if(e instanceof d.PrivyApiError&&e.privyErrorCode===d.PrivyErrorCode.USER_DOES_NOT_EXIST)return void r("AccountNotFoundScreen");if(e instanceof d.PrivyApiError&&e.privyErrorCode===d.PrivyErrorCode.LINKED_TO_ANOTHER_USER)return n({errorModalData:{error:e,previousScreen:i??"AwaitingPasswordlessCodeScreen"}}),void r("ErrorScreen",!1);if(e instanceof d.PrivyApiError&&e.privyErrorCode===d.PrivyErrorCode.DISALLOWED_PLUS_EMAIL)return n({inlineError:{error:e}}),void r("ConnectOrCreateScreen",!1);if(e instanceof d.PrivyApiError&&e.privyErrorCode===d.PrivyErrorCode.ACCOUNT_TRANSFER_REQUIRED&&e.data?.data?.nonce)return n({accountTransfer:{nonce:e.data?.data?.nonce,account:k,displayName:e.data?.data?.account?.displayName,linkMethod:0===P?"email":"sms",embeddedWalletAddress:e.data?.data?.otherUser?.embeddedWalletAddress}}),void r("LinkConflictScreen");j("Issue verifying code"),N(0)}}},onResend:async()=>{_(30),0===P?await v():await f()},errorMessage:w||void 0,success:q,resendCountdown:T,onInvalidInput:e=>{j(e),N(1)},onClearError:()=>{1===I&&(j(null),N(null))}})}};let w=/*#__PURE__*/a.styled.div.withConfig({displayName:"PasswordlessCodeContainer",componentId:"sc-6187bfee-0"})(["display:flex;flex-direction:column;align-items:center;justify-content:center;margin:auto;gap:16px;flex-grow:1;width:100%;"]),j=/*#__PURE__*/a.styled.div.withConfig({displayName:"CodeInput",componentId:"sc-6187bfee-1"})(["display:flex;flex-direction:column;width:100%;gap:12px;> div:first-child{display:flex;justify-content:center;gap:0.5rem;width:100%;border-radius:var(--privy-border-radius-sm);> input{border:1px solid var(--privy-color-foreground-4);background:var(--privy-color-background);border-radius:var(--privy-border-radius-sm);padding:8px 10px;height:48px;width:40px;text-align:center;font-size:18px;font-weight:600;color:var(--privy-color-foreground);transition:all 0.2s ease;}> input:focus{border:1px solid var(--privy-color-foreground);box-shadow:0 0 0 1px var(--privy-color-foreground);}> input:invalid{border:1px solid var(--privy-color-error);}> input.success{border:1px solid var(--privy-color-border-success);background:var(--privy-color-success-bg);}> input.fail{border:1px solid var(--privy-color-border-error);background:var(--privy-color-error-bg);animation:shake 180ms;animation-iteration-count:2;}}@keyframes shake{0%{transform:translate(1px,0px);}33%{transform:translate(-1px,0px);}67%{transform:translate(-1px,0px);}100%{transform:translate(1px,0px);}}"]),I=/*#__PURE__*/a.styled.div.withConfig({displayName:"InputHelp",componentId:"sc-6187bfee-2"})(["line-height:20px;min-height:20px;font-size:14px;font-weight:400;color:",";display:flex;justify-content:center;width:100%;text-align:center;"],(e=>e.$success?"var(--privy-color-success-dark)":e.$fail?"var(--privy-color-error-dark)":"transparent")),N=/*#__PURE__*/a.styled.div.withConfig({displayName:"HelpTextContainer",componentId:"sc-6187bfee-3"})(["display:flex;gap:8px;align-items:center;justify-content:center;width:100%;color:var(--privy-color-foreground-2);"]),T=/*#__PURE__*/a.styled.div.withConfig({displayName:"Badge",componentId:"sc-6187bfee-4"})(["display:flex;align-items:center;justify-content:center;border-radius:var(--privy-border-radius-sm);padding:2px 8px;gap:4px;background:var(--privy-color-background-2);color:var(--privy-color-foreground-2);"]),_=/*#__PURE__*/a.styled.span.withConfig({displayName:"BoldWrappingSpan",componentId:"sc-6187bfee-5"})(["font-weight:500;word-break:break-all;color:var(--privy-color-foreground);"]);exports.AwaitingPasswordlessCodeScreen=A,exports.AwaitingPasswordlessCodeScreenView=E,exports.default=A;