@privy-io/react-auth/dist/cjs/AwaitingPasswordlessCodeScreen-CjeHuBk7.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-D3TOcPhm.js"),c=require("./Link-BdtTp2J4.js"),l=require("./context-D-ZJYjUg.js"),u=require("./internal-context-BJv4f_bO.js"),d=require("./get-is-unified-wallet-UpdjHxOV.js"),p=require("./shouldProceedtoEmbeddedWalletCreationFlow-DADJI9f0.js"),v=require("./ScreenLayout-CMb-Fua0.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("@privy-io/are-addresses-equal"),require("./index-C8lpxYDX.js"),require("uuid"),require("jose"),require("eventemitter3"),require("./useActiveWallet-Cn6zOXx5.js"),require("zustand"),require("./use-export-wallet-B5ujV5Nk.js"),require("viem/utils"),require("./useWallets-CKAypPZB.js"),require("./events-context-Di6--rDg.js"),require("viem"),require("./getPublicClient-BsmZyCGX.js"),require("@coinbase/wallet-sdk"),require("@privy-io/ethereum"),require("mipd"),require("@privy-io/popup"),require("./paths-DizMb-lU.js"),require("./usePrivy-cfS6o4tX.js"),require("@scure/base"),require("@headlessui/react"),require("@walletconnect/ethereum-provider"),require("@privy-io/urls"),require("./PrivyPluginContext-DsgaS6n9.js"),require("./getEmbeddedConnectedWallet-pJd-l936.js"),require("js-cookie"),require("./frame-Oz7volks.js"),require("@privy-io/routes"),require("x402/client"),require("@privy-io/api-base"),require("viem/accounts"),require("./use-sign-with-user-signer-Cu_6Bx7m.js"),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");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:u,onResend:d,errorMessage:p,success:f=!1,resendCountdown:E=0,onInvalidInput:C,onClearError:q})=>{let[S,A]=t.useState(g);t.useEffect((()=>{p||A(g)}),[p]);let b="email"===i?/*#__PURE__*/e.jsxs("span",{children:["Please check ",/*#__PURE__*/e.jsx(P,{children:r})," for an email from privy.io and enter your code below."]}):/*#__PURE__*/e.jsxs("span",{children:["Please check ",/*#__PURE__*/e.jsx(P,{children:r})," for a",a?" WhatsApp":""," message from ",o," and enter your code below."]}),I=/*#__PURE__*/e.jsxs(T,{children:[/*#__PURE__*/e.jsxs("span",{children:["Didn't get ","email"===i?"an email":"a message","?"]}),E?/*#__PURE__*/e.jsxs(N,{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:d,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");q?.();let i=Number(e.currentTarget.name?.charAt(5)),o=[...r||[""]].slice(0,x-i),t=[...S.slice(0,i),...o,...S.slice(i+o.length)];A(t);let n=Math.min(Math.max(i+o.length,0),x-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(u?.(t.join("")))}};/*#__PURE__*/return e.jsx(v.ScreenLayout,{title:"Enter confirmation code",subtitle:b,icon:"email"===i?y.default:h.default,onBack:l,showBack:!0,helpText:I,children:/*#__PURE__*/e.jsx(j,{children:/*#__PURE__*/e.jsx(s.HorizontallyCenteredItem,{children:/*#__PURE__*/e.jsxs(w,{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(q?.(),A([...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(_,{$fail:!!p,$success:f,children:/*#__PURE__*/e.jsx("span",{children:"Invalid or expired verification code"===p?"Incorrect code":p||(f?"Success!":"")})})]})})})})};let x=6,g=Array(6).fill("");var C,q,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),A=((q=A||{})[q.EMAIL=0]="EMAIL",q[q.SMS=1]="SMS",q);const b={component:()=>{let{navigate:r,lastScreen:i,navigateBack:o,setModalData:n,onUserCloseViaDialogOrKeybindRef:a}=d.usePrivyModal(),s=l.useAppConfig(),{closePrivyModal:c,resendEmailCode:v,resendSmsCode:f,getAuthMeta:m,loginWithCode:y,updateWallets:h,createAnalyticsEvent:x}=u.usePrivyInternal(),{authenticated:g,logout:C,user:q}=d.usePrivyContext(),{whatsAppEnabled:S}=l.useAppConfig(),[A,b]=t.useState(!1),[j,w]=t.useState(null),[_,T]=t.useState(null),[N,P]=t.useState(0);a.current=()=>null;let I=m()?.email?0:1,k=0===I?m()?.email||"":m()?.phoneNumber||"",L=l.DEFAULT_SUCCESS_SCREEN_DURATION_MS-500;t.useEffect((()=>{if(N){let e=setTimeout((()=>{P(N-1)}),1e3);return()=>clearTimeout(e)}}),[N]),t.useEffect((()=>{if(g&&A&&q){if(s?.legal.requireUsersAcceptTerms&&!q.hasAcceptedTerms){let e=setTimeout((()=>{r("AffirmativeConsentScreen")}),L);return()=>clearTimeout(e)}if(p.shouldProceedtoEmbeddedWalletCreationFlow(q,s.embeddedWallets)){let e=setTimeout((()=>{n({createWallet:{onSuccess:()=>{},onFailure:e=>{console.error(e),x({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)}}}),[g,A,q]),t.useEffect((()=>{if(j&&0===_){let e=setTimeout((()=>{w(null),T(null);let e=document.querySelector("input[name=code-0]");e?.focus()}),1400);return()=>clearTimeout(e)}}),[j,_]);/*#__PURE__*/return e.jsx(E,{contactMethod:k,authFlow:0===I?"email":"sms",appName:s?.name,whatsAppEnabled:S,onBack:()=>o(),onCodeSubmit:async e=>{try{await y(e),b(!0)}catch(e){if(e instanceof u.PrivyApiError&&e.privyErrorCode===u.PrivyErrorCode.INVALID_CREDENTIALS)w("Invalid or expired verification code"),T(0);else if(e instanceof u.PrivyApiError&&e.privyErrorCode===u.PrivyErrorCode.CANNOT_LINK_MORE_OF_TYPE)w(e.message);else{if(e instanceof u.PrivyApiError&&e.privyErrorCode===u.PrivyErrorCode.USER_LIMIT_REACHED)return console.error(new u.PrivyUserLimitReachedError(e).toString()),void r("UserLimitReachedScreen");if(e instanceof u.PrivyApiError&&e.privyErrorCode===u.PrivyErrorCode.USER_DOES_NOT_EXIST)return void r("AccountNotFoundScreen");if(e instanceof u.PrivyApiError&&e.privyErrorCode===u.PrivyErrorCode.LINKED_TO_ANOTHER_USER)return n({errorModalData:{error:e,previousScreen:i??"AwaitingPasswordlessCodeScreen"}}),void r("ErrorScreen",!1);if(e instanceof u.PrivyApiError&&e.privyErrorCode===u.PrivyErrorCode.DISALLOWED_PLUS_EMAIL)return n({inlineError:{error:e}}),void r("ConnectOrCreateScreen",!1);if(e instanceof u.PrivyApiError&&e.privyErrorCode===u.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===I?"email":"sms",embeddedWalletAddress:e.data?.data?.otherUser?.embeddedWalletAddress}}),void r("LinkConflictScreen");w("Issue verifying code"),T(0)}}},onResend:async()=>{P(30),0===I?await v():await f()},errorMessage:j||void 0,success:A,resendCountdown:N,onInvalidInput:e=>{w(e),T(1)},onClearError:()=>{1===_&&(w(null),T(null))}})}};let j=a.styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  gap: 16px;
  flex-grow: 1;
  width: 100%;
`,w=a.styled.div`
  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);
    }
  }
`,_=a.styled.div`
  line-height: 20px;
  min-height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: ${e=>e.$success?"var(--privy-color-success-dark)":e.$fail?"var(--privy-color-error-dark)":"transparent"};
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
`,T=a.styled.div`
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--privy-color-foreground-2);
`,N=a.styled.div`
  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);
`,P=a.styled.span`
  font-weight: 500;
  word-break: break-all;
  color: var(--privy-color-foreground);
`;exports.AwaitingPasswordlessCodeScreen=b,exports.AwaitingPasswordlessCodeScreenView=E,exports.default=b;