UNPKG

@privy-io/react-auth

Version:

React client for the Privy Auth API

87 lines (83 loc) 11.3 kB
import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import{a as r}from"./privy-context-DrMxzgOR.mjs";import{L as s,M as i,N as n,O as a,Q as l}from"./index-YDEix4mU.mjs";import{trigger as c}from"@privy-io/popup";import{p as d,a as u,A as m,C as p,S as h}from"./SelectSourceAsset-C10HQdge.mjs";import{S as g}from"./ScreenLayout-D1p_ntex.mjs";import{XCircle as y,Check as C,AlertTriangle as v,ChevronRight as f,CreditCard as w,Wallet as A,Building as b,Smartphone as P,Landmark as _}from"lucide-react";import{styled as E}from"styled-components";import{G as S,A as x}from"./GooglePay-DA-Ff7zK.mjs";import"@privy-io/are-addresses-equal";import"react";import"./context-DLtU3JQy.mjs";import"@privy-io/js-sdk-core";import"tinycolor2";import"./internal-context-Z-fyxadS.mjs";import"ofetch";import"uuid";import"jose";import"eventemitter3";import"./useActiveWallet-CvP7iYvj.mjs";import"zustand";import"react-device-detect";import"./use-export-wallet-_wu5ex5t.mjs";import"./useWallets-BzNCTucF.mjs";import"viem";import"viem/utils";import"./events-context-CI0iqAXA.mjs";import"@coinbase/wallet-sdk";import"@privy-io/ethereum";import"mipd";import"./paths-3HW55qZg.mjs";import"./usePrivy-C_sY2Duk.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"./ModalHeader-BnVmXtvG.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"./Screen-Cycy3IzT.mjs";import"./index-Dq_xe9dz.mjs";const[k,L]=((e,t=750)=>{let o;return[(...r)=>{o&&clearTimeout(o),o=setTimeout((()=>{e(...r)}),t)},()=>{o&&clearTimeout(o)}]})((async(e,t)=>{s({isLoading:!0});try{let{getQuotes:o}=i(),r=(await o({source:{asset:t.source.selectedAsset.toUpperCase(),amount:e},destination:{asset:t.destination.asset.toUpperCase(),chain:t.destination.chain,address:t.destination.address},environment:t.environment})).quotes??[];s({localQuotes:r,localSelectedQuote:r[0],isLoading:!1,quotesWarning:r.length>0?null:10>parseFloat(e)?"amount_too_low":"currency_not_available"})}catch{s({localQuotes:[],localSelectedQuote:null,quotesWarning:"currency_not_available"})}})),j=e=>{s({amount:e});let{opts:t}=i();k(e,t)},R=async()=>{let{error:e,state:t,onFailure:o,onSuccess:r}=i();L(),e?o(e):"provider-success"===t.status?await r({status:"confirmed"}):"provider-confirming"===t.status?await r({status:"submitted"}):o(Error("User exited flow"))},T=async()=>{let e,t=n();if(!t)return;let o=c();if(!o)return void s({state:{status:"provider-error"},error:Error("Unable to open payment window")});s({isLoading:!0});let{opts:r,amount:a,getProviderUrl:l,getStatus:m,controller:p}=i();p.current=new AbortController;try{let s=await l({source:{asset:r.source.selectedAsset.toUpperCase(),amount:a||"0"},destination:{asset:r.destination.asset.toUpperCase(),chain:r.destination.chain,address:r.destination.address},provider:t.provider,sub_provider:t.sub_provider??void 0,payment_method:t.payment_method,redirect_url:window.location.origin});o.location.href=s.url,e=s.session_id}catch{return o.close(),void s({state:{status:"provider-error"},isLoading:!1,error:Error("Unable to start payment session")})}let h=await d(o,p.current.signal);if("aborted"===h.status||(s({isLoading:!1}),"closed"===h.status))return;h.status,s({state:{status:"provider-confirming"}});let g=await u({operation:()=>m({session_id:e,provider:t.provider}),until:e=>"completed"===e.status||"failed"===e.status||"cancelled"===e.status,delay:0,interval:2e3,attempts:60,signal:p.current.signal});if("aborted"!==g.status){if("max_attempts"===g.status)return void s({state:{status:"provider-error"},error:Error("Timed out waiting for response")});"completed"===g.result?.status?s({state:{status:"provider-success"}}):s({state:{status:"provider-error"},error:Error(`Transaction ${g.result?.status??"failed"}`)})}},z=()=>{let e=a();e&&e.length>0&&s({state:{status:"select-payment-method",quotes:e}})},I=()=>{s({state:{status:"select-source-asset"}})},q=()=>{s({error:null,state:{status:"select-amount"}})},Q=e=>{s({localSelectedQuote:e,state:{status:"select-amount"}})},D=e=>{let{opts:t,amount:o}=i(),r={...t,source:{...t.source,selectedAsset:e}};s({opts:r,state:{status:"select-amount"}}),k(o,r)},G=({onClose:t})=>/*#__PURE__*/e(g,{showClose:!0,onClose:t,iconVariant:"loading",title:"Processing transaction",subtitle:"Your purchase is in progress. You can leave this screen — we’ll notify you when it’s complete.",primaryCta:{label:"Done",onClick:t},watermark:!0}),M=({onClose:t,onRetry:o})=>/*#__PURE__*/e(g,{showClose:!0,onClose:t,icon:y,iconVariant:"error",title:"Something went wrong",subtitle:"We couldn't complete your transaction. Please try again.",primaryCta:{label:"Try again",onClick:o},secondaryCta:{label:"Close",onClick:t},watermark:!0}),U=({onClose:t})=>/*#__PURE__*/e(g,{showClose:!0,onClose:t,icon:C,iconVariant:"success",title:"Transaction confirmed",subtitle:"Your purchase is processing. Funds should arrive in your wallet within a few minutes.",primaryCta:{label:"Done",onClick:t},watermark:!0});let W={CREDIT_DEBIT_CARD:"card",APPLE_PAY:"Apple Pay",GOOGLE_PAY:"Google Pay",BANK_TRANSFER:"bank deposit",ACH:"bank deposit",SEPA:"bank deposit",PIX:"PIX"},Y={CREDIT_DEBIT_CARD:/*#__PURE__*/e(w,{size:14}),APPLE_PAY:/*#__PURE__*/e(P,{size:14}),GOOGLE_PAY:/*#__PURE__*/e(P,{size:14}),BANK_TRANSFER:/*#__PURE__*/e(b,{size:14}),ACH:/*#__PURE__*/e(b,{size:14}),SEPA:/*#__PURE__*/e(b,{size:14}),PIX:/*#__PURE__*/e(A,{size:14})};const B=({opts:r,onClose:s,onEditSourceAsset:i,onEditPaymentMethod:n,onContinue:a,onAmountChange:l,amount:c,selectedQuote:d,quotesWarning:u,quotesCount:h,isLoading:y})=>{/*#__PURE__*/return t(g,{showClose:!0,onClose:s,headerTitle:`Buy ${r.destination.asset.toLocaleUpperCase()}`,primaryCta:{label:"Continue",onClick:a,loading:y,disabled:!d},helpText:u?/*#__PURE__*/t(O,{children:[/*#__PURE__*/e(v,{size:16,strokeWidth:2}),/*#__PURE__*/e(F,{children:/*#__PURE__*/t(o,"amount_too_low"===u?{children:[/*#__PURE__*/e(N,{children:"Amount too low"}),/*#__PURE__*/e(X,{children:"Please choose a higher amount to continue."})]}:{children:[/*#__PURE__*/e(N,{children:"Currency not available"}),/*#__PURE__*/e(X,{children:"Please choose another currency to continue."})]})})]}):d&&h>1?/*#__PURE__*/t(H,{onClick:n,children:[(A=d.payment_method,Y[A]??/*#__PURE__*/e(w,{size:14})),/*#__PURE__*/t("span",{children:["Pay with ",(C=d.payment_method,W[C]??C.replace(/_/g," ").toLowerCase().replace(/^\w/,(e=>e.toUpperCase())))]}),/*#__PURE__*/e(f,{size:14})]}):null,watermark:!0,children:[/*#__PURE__*/e(m,{currency:r.source.selectedAsset,value:c,onChange:l,inputMode:"decimal",autoFocus:!0}),/*#__PURE__*/e(p,{selectedAsset:r.source.selectedAsset,onEditSourceAsset:i})]});var C,A};let O=E.div` display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem; border-radius: 0.5rem; background-color: var(--privy-color-warn-bg, #fffbbb); border: 1px solid var(--privy-color-border-warning, #facd63); overflow: clip; width: 100%; svg { flex-shrink: 0; color: var(--privy-color-icon-warning, #facd63); } `,F=E.div` display: flex; flex-direction: column; gap: 0.125rem; flex: 1; min-width: 0; font-size: 0.75rem; line-height: 1.125rem; color: var(--privy-color-foreground); font-feature-settings: 'calt' 0, 'kern' 0; text-align: left; `,N=E.span` font-weight: 600; `,X=E.span` font-weight: 400; `,H=E.button` display: inline-flex; align-items: center; gap: 0.25rem; background: none; border: none; cursor: pointer; && { padding: 0; color: var(--privy-color-accent); font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: 1.375rem; } `,K={CREDIT_DEBIT_CARD:"Credit / debit card",APPLE_PAY:"Apple Pay",GOOGLE_PAY:"Google Pay",BANK_TRANSFER:"Bank transfer",ACH:"ACH",SEPA:"SEPA",PIX:"PIX"},$={CREDIT_DEBIT_CARD:/*#__PURE__*/e(w,{size:20}),APPLE_PAY:/*#__PURE__*/e(x,{width:20,height:20}),GOOGLE_PAY:/*#__PURE__*/e(S,{width:20,height:20}),BANK_TRANSFER:/*#__PURE__*/e(_,{size:20}),ACH:/*#__PURE__*/e(_,{size:20}),SEPA:/*#__PURE__*/e(_,{size:20}),PIX:/*#__PURE__*/e(_,{size:20})};const V=({onClose:o,onSelectPaymentMethod:r,quotes:s,isLoading:i})=>/*#__PURE__*/e(g,{showClose:!0,onClose:o,title:"Select payment method",subtitle:"Choose how you'd like to pay",watermark:!0,children:/*#__PURE__*/e(J,{children:s.map(((o,s)=>{/*#__PURE__*/return e(Z,{onClick:()=>r(o),disabled:i,children:/*#__PURE__*/t(ee,{children:[/*#__PURE__*/e(te,{children:(a=o.payment_method,$[a]??/*#__PURE__*/e(w,{size:20}))}),/*#__PURE__*/e(oe,{children:/*#__PURE__*/e(re,{children:(n=o.payment_method,K[n]??n.replace(/_/g," ").toLowerCase().replace(/^\w/,(e=>e.toUpperCase())))})})]})},`${o.provider}-${o.payment_method}-${s}`);var n,a}))})});let J=E.div` display: flex; flex-direction: column; gap: 0.75rem; width: 100%; `,Z=E.button` border-color: var(--privy-color-border-default); border-width: 1px; border-radius: var(--privy-border-radius-md); border-style: solid; display: flex; && { padding: 1rem 1rem; } `,ee=E.div` display: flex; align-items: center; gap: 1rem; width: 100%; `,te=E.div` color: var(--privy-color-foreground-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; `,oe=E.div` display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; flex: 1; `,re=E.span` color: var(--privy-color-foreground); font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; `;const se=({onClose:t,onContinue:o,onAmountChange:r,onSelectSource:s,onEditSourceAsset:i,onEditPaymentMethod:n,onSelectPaymentMethod:a,onRetry:l,opts:c,state:d,amount:u,selectedQuote:m,quotesWarning:p,quotesCount:g,isLoading:y})=>"select-amount"===d.status?/*#__PURE__*/e(B,{onClose:t,onContinue:o,onAmountChange:r,onEditSourceAsset:i,onEditPaymentMethod:n,opts:c,amount:u,selectedQuote:m,quotesWarning:p,quotesCount:g,isLoading:y}):"select-source-asset"===d.status?/*#__PURE__*/e(h,{onSelectSource:s,opts:c,isLoading:y}):"select-payment-method"===d.status?/*#__PURE__*/e(V,{onClose:t,onSelectPaymentMethod:a,quotes:d.quotes,isLoading:y}):"provider-confirming"===d.status?/*#__PURE__*/e(G,{onClose:t}):"provider-error"===d.status?/*#__PURE__*/e(M,{onClose:t,onRetry:l}):"provider-success"===d.status?/*#__PURE__*/e(U,{onClose:t}):null,ie={component:()=>{let{onUserCloseViaDialogOrKeybindRef:t}=r(),o=l();if(!o)throw Error("Unexpected missing data");let{opts:s,state:i,isLoading:n,amount:a,quotesWarning:c,localQuotes:d,localSelectedQuote:u,initialQuotes:m,initialSelectedQuote:p}=o;return t.current=R,/*#__PURE__*/e(se,{onClose:R,opts:s,state:i,isLoading:n,amount:a,selectedQuote:u??p,quotesWarning:c,quotesCount:(d??m)?.length??0,onAmountChange:j,onContinue:T,onSelectSource:D,onEditSourceAsset:I,onEditPaymentMethod:z,onSelectPaymentMethod:Q,onRetry:q})}};export{ie as FiatOnrampScreen,ie as default};