@privy-io/react-auth/dist/esm/AwaitingPasswordlessCodeScreen-D9BoqETu.mjs

React client for the Privy Auth API

import{jsx as e,jsxs as r}from"react/jsx-runtime";import o from"@heroicons/react/20/solid/CheckIcon";import t from"@heroicons/react/24/outline/EnvelopeIcon";import i from"@heroicons/react/24/outline/PhoneIcon";import{useState as n,useEffect as a}from"react";import{isMobile as s}from"react-device-detect";import{styled as c}from"styled-components";import{H as l}from"./Layouts-Bmf8DxNP.mjs";import{L as d}from"./Link-DwjLfHwW.mjs";import{u as p,q as m}from"./context-Bycd1SKV.mjs";import{u,e as f,b as v,k as h}from"./internal-context-e-Eni5bG.mjs";import{a as y,u as g}from"./get-is-unified-wallet-DvKS5IUO.mjs";import{s as b}from"./shouldProceedtoEmbeddedWalletCreationFlow-Djgu4xiS.mjs";import{S as x}from"./ScreenLayout-CddsD3Of.mjs";import"@privy-io/js-sdk-core";import"tinycolor2";import"ofetch";import"viem";import"./index-CCyaupaz.mjs";import"uuid";import"jose";import"eventemitter3";import"./useActiveWallet-Bsy5GTCV.mjs";import"zustand";import"./prepareFundingModalData-CIgFwA7s.mjs";import"./events-context-CI0iqAXA.mjs";import"viem/utils";import"./getPublicClient-A9RSftUZ.mjs";import"./useWallets-D0lpBS44.mjs";import"@coinbase/wallet-sdk";import"@privy-io/ethereum";import"mipd";import"@privy-io/popup";import"./paths-3HW55qZg.mjs";import"./usePrivy-BaiIHGte.mjs";import"@scure/base";import"@headlessui/react";import"@walletconnect/ethereum-provider";import"@privy-io/urls";import"js-cookie";import"./frame-CwE9r3cT.mjs";import"@privy-io/routes";import"x402/client";import"@privy-io/api-base";import"viem/accounts";import"./use-sign-with-user-signer-eEm9Olt_.mjs";import"./getEmbeddedConnectedWallet-CM6cDQCS.mjs";import"./Button-B8mqatRx.mjs";import"./Screen-BTyXgDrd.mjs";import"./ModalHeader-BLGC-7ev.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"./index-CJMgUOnw.mjs";const C=({contactMethod:c,authFlow:p,appName:m="Privy",whatsAppEnabled:u=!1,onBack:f,onCodeSubmit:v,onResend:h,errorMessage:y,success:g=!1,resendCountdown:b=0,onInvalidInput:C,onClearError:S})=>{let[A,I]=n(w);a((()=>{y||I(w)}),[y]);let N=async e=>{e.preventDefault();let r=e.currentTarget.value.replace(" ","");if(""===r)return;if(isNaN(Number(r)))return void C?.("Code should be numeric");S?.();let o=Number(e.currentTarget.name?.charAt(5)),t=[...r||[""]].slice(0,E-o),i=[...A.slice(0,o),...t,...A.slice(o+t.length)];I(i);let n=Math.min(Math.max(o+t.length,0),E-1);if(!isNaN(Number(e.currentTarget.value))){let e=document.querySelector(`input[name=code-${n}]`);e?.focus()}if(i.every((e=>e&&!isNaN(+e)))){let e=document.querySelector(`input[name=code-${n}]`);e?.blur(),await(v?.(i.join("")))}};/*#__PURE__*/return e(x,{title:"Enter confirmation code",subtitle:/*#__PURE__*/r("span","email"===p?{children:["Please check ",/*#__PURE__*/e(R,{children:c})," for an email from privy.io and enter your code below."]}:{children:["Please check ",/*#__PURE__*/e(R,{children:c})," for a",u?" WhatsApp":""," message from ",m," and enter your code below."]}),icon:"email"===p?t:i,onBack:f,showBack:!0,helpText:/*#__PURE__*/r(L,{children:[/*#__PURE__*/r("span",{children:["Didn't get ","email"===p?"an email":"a message","?"]}),b?/*#__PURE__*/r(M,{children:[/*#__PURE__*/e(o,{color:"var(--privy-color-foreground)",strokeWidth:1.33,height:"12px",width:"12px"}),/*#__PURE__*/e("span",{children:"Code sent"})]}):/*#__PURE__*/e(d,{as:"button",size:"sm",onClick:h,children:"Resend code"})]}),children:/*#__PURE__*/e(k,{children:/*#__PURE__*/e(l,{children:/*#__PURE__*/r(_,{children:[/*#__PURE__*/e("div",{children:A.map(((r,o)=>/*#__PURE__*/e("input",{name:`code-${o}`,type:"text",value:A[o],onChange:N,onKeyUp:e=>{"Backspace"===e.key&&(e=>{if(S?.(),I([...A.slice(0,e),"",...A.slice(e+1)]),e>0){let r=document.querySelector(`input[name=code-${e-1}]`);r?.focus()}})(o)},inputMode:"numeric",autoFocus:0===o,pattern:"[0-9]",className:`${g?"success":""} ${y?"fail":""}`,autoComplete:s?"one-time-code":"off"},o)))}),/*#__PURE__*/e(j,{$fail:!!y,$success:g,children:/*#__PURE__*/e("span",{children:"Invalid or expired verification code"===y?"Incorrect code":y||(g?"Success!":"")})})]})})})})};let E=6,w=Array(6).fill("");var S,A,I=((S=I||{})[S.RESET_AFTER_DELAY=0]="RESET_AFTER_DELAY",S[S.CLEAR_ON_NEXT_VALID_INPUT=1]="CLEAR_ON_NEXT_VALID_INPUT",S),N=((A=N||{})[A.EMAIL=0]="EMAIL",A[A.SMS=1]="SMS",A);const T={component:()=>{let{navigate:r,lastScreen:o,navigateBack:t,setModalData:i,onUserCloseViaDialogOrKeybindRef:s}=y(),c=p(),{closePrivyModal:l,resendEmailCode:d,resendSmsCode:x,getAuthMeta:E,loginWithCode:w,updateWallets:S,createAnalyticsEvent:A}=u(),{authenticated:I,logout:N,user:T}=g(),{whatsAppEnabled:k}=p(),[_,j]=n(!1),[L,M]=n(null),[R,D]=n(null),[O,P]=n(0);s.current=()=>null;let W=E()?.email?0:1,U=0===W?E()?.email||"":E()?.phoneNumber||"",F=m-500;a((()=>{if(O){let e=setTimeout((()=>{P(O-1)}),1e3);return()=>clearTimeout(e)}}),[O]),a((()=>{if(I&&_&&T){if(c?.legal.requireUsersAcceptTerms&&!T.hasAcceptedTerms){let e=setTimeout((()=>{r("AffirmativeConsentScreen")}),F);return()=>clearTimeout(e)}if(b(T,c.embeddedWallets)){let e=setTimeout((()=>{i({createWallet:{onSuccess:()=>{},onFailure:e=>{console.error(e),A({eventName:"embedded_wallet_creation_failure_logout",payload:{error:e,screen:"AwaitingPasswordlessCodeScreen"}}),N()},callAuthOnSuccessOnClose:!0}}),r("EmbeddedWalletOnAccountCreateScreen")}),F);return()=>clearTimeout(e)}{S();let e=setTimeout((()=>l({shouldCallAuthOnSuccess:!0,isSuccess:!0})),m);return()=>clearTimeout(e)}}}),[I,_,T]),a((()=>{if(L&&0===R){let e=setTimeout((()=>{M(null),D(null);let e=document.querySelector("input[name=code-0]");e?.focus()}),1400);return()=>clearTimeout(e)}}),[L,R]);/*#__PURE__*/return e(C,{contactMethod:U,authFlow:0===W?"email":"sms",appName:c?.name,whatsAppEnabled:k,onBack:()=>t(),onCodeSubmit:async e=>{try{await w(e),j(!0)}catch(e){if(e instanceof f&&e.privyErrorCode===v.INVALID_CREDENTIALS)M("Invalid or expired verification code"),D(0);else if(e instanceof f&&e.privyErrorCode===v.CANNOT_LINK_MORE_OF_TYPE)M(e.message);else{if(e instanceof f&&e.privyErrorCode===v.USER_LIMIT_REACHED)return console.error(new h(e).toString()),void r("UserLimitReachedScreen");if(e instanceof f&&e.privyErrorCode===v.USER_DOES_NOT_EXIST)return void r("AccountNotFoundScreen");if(e instanceof f&&e.privyErrorCode===v.LINKED_TO_ANOTHER_USER)return i({errorModalData:{error:e,previousScreen:o??"AwaitingPasswordlessCodeScreen"}}),void r("ErrorScreen",!1);if(e instanceof f&&e.privyErrorCode===v.DISALLOWED_PLUS_EMAIL)return i({inlineError:{error:e}}),void r("ConnectOrCreateScreen",!1);if(e instanceof f&&e.privyErrorCode===v.ACCOUNT_TRANSFER_REQUIRED&&e.data?.data?.nonce)return i({accountTransfer:{nonce:e.data?.data?.nonce,account:U,displayName:e.data?.data?.account?.displayName,linkMethod:0===W?"email":"sms",embeddedWalletAddress:e.data?.data?.otherUser?.embeddedWalletAddress}}),void r("LinkConflictScreen");M("Issue verifying code"),D(0)}}},onResend:async()=>{P(30),0===W?await d():await x()},errorMessage:L||void 0,success:_,resendCountdown:O,onInvalidInput:e=>{M(e),D(1)},onClearError:()=>{1===R&&(M(null),D(null))}})}};let k=/*#__PURE__*/c.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%;"]),_=/*#__PURE__*/c.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);}}"]),j=/*#__PURE__*/c.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")),L=/*#__PURE__*/c.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);"]),M=/*#__PURE__*/c.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);"]),R=/*#__PURE__*/c.span.withConfig({displayName:"BoldWrappingSpan",componentId:"sc-6187bfee-5"})(["font-weight:500;word-break:break-all;color:var(--privy-color-foreground);"]);export{T as AwaitingPasswordlessCodeScreen,C as AwaitingPasswordlessCodeScreenView,T as default};