UNPKG

@privy-io/react-auth

Version:

React client for the Privy Auth API

87 lines (83 loc) 12.3 kB
"use strict";var e=require("react/jsx-runtime"),t=require("./privy-context-CrM9_s6G.js"),r=require("./index-DchMyzt9.js"),o=require("@privy-io/popup"),s=require("./SelectSourceAsset-Mzj-MSFd.js"),i=require("./ScreenLayout-C4QHZMbl.js"),a=require("lucide-react"),n=require("styled-components"),l=require("./GooglePay-BGccKVeZ.js");require("@privy-io/are-addresses-equal"),require("react"),require("./context-Cg3IEi80.js"),require("@privy-io/js-sdk-core"),require("tinycolor2"),require("./internal-context-BJv4f_bO.js"),require("ofetch"),require("uuid"),require("jose"),require("eventemitter3"),require("./useActiveWallet-BfMD5hzE.js"),require("zustand"),require("react-device-detect"),require("./use-export-wallet-_EIyxyle.js"),require("./useWallets-dikDynAG.js"),require("viem"),require("viem/utils"),require("./events-context-Di6--rDg.js"),require("@coinbase/wallet-sdk"),require("@privy-io/ethereum"),require("mipd"),require("./paths-DizMb-lU.js"),require("./usePrivy-C-Rab7yP.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-C5Wuo3-1.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-DWnRbzSA.js"),require("./index-ByFhjjzH.js");const[u,c]=((e,t=750)=>{let r;return[(...o)=>{r&&clearTimeout(r),r=setTimeout((()=>{e(...o)}),t)},()=>{r&&clearTimeout(r)}]})((async(e,t)=>{r.setFiatOnrampState({isLoading:!0});try{let{getQuotes:o}=r.getFiatOnrampFlowState(),s=(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??[];r.setFiatOnrampState({localQuotes:s,localSelectedQuote:s[0],isLoading:!1,quotesWarning:s.length>0?null:10>parseFloat(e)?"amount_too_low":"currency_not_available"})}catch{r.setFiatOnrampState({localQuotes:[],localSelectedQuote:null,quotesWarning:"currency_not_available"})}})),d=e=>{r.setFiatOnrampState({amount:e});let{opts:t}=r.getFiatOnrampFlowState();u(e,t)},p=async()=>{let{error:e,state:t,onFailure:o,onSuccess:s}=r.getFiatOnrampFlowState();c(),e?o(e):"provider-success"===t.status?await s({status:"confirmed"}):"provider-confirming"===t.status?await s({status:"submitted"}):o(Error("User exited flow"))},m=async()=>{let e,t=r.getSelectedQuote();if(!t)return;let i=o.trigger();if(!i)return void r.setFiatOnrampState({state:{status:"provider-error"},error:Error("Unable to open payment window")});r.setFiatOnrampState({isLoading:!0});let{opts:a,amount:n,getProviderUrl:l,getStatus:u,controller:c}=r.getFiatOnrampFlowState();c.current=new AbortController;try{let r=await l({source:{asset:a.source.selectedAsset.toUpperCase(),amount:n||"0"},destination:{asset:a.destination.asset.toUpperCase(),chain:a.destination.chain,address:a.destination.address},provider:t.provider,sub_provider:t.sub_provider??void 0,payment_method:t.payment_method,redirect_url:window.location.origin});i.location.href=r.url,e=r.session_id}catch{return i.close(),void r.setFiatOnrampState({state:{status:"provider-error"},isLoading:!1,error:Error("Unable to start payment session")})}let d=await s.pollPopupForRedirect(i,c.current.signal);if("aborted"===d.status||(r.setFiatOnrampState({isLoading:!1}),"closed"===d.status))return;d.status,r.setFiatOnrampState({state:{status:"provider-confirming"}});let p=await s.poll({operation:()=>u({session_id:e,provider:t.provider}),until:e=>"completed"===e.status||"failed"===e.status||"cancelled"===e.status,delay:0,interval:2e3,attempts:60,signal:c.current.signal});if("aborted"!==p.status){if("max_attempts"===p.status)return void r.setFiatOnrampState({state:{status:"provider-error"},error:Error("Timed out waiting for response")});"completed"===p.result?.status?r.setFiatOnrampState({state:{status:"provider-success"}}):r.setFiatOnrampState({state:{status:"provider-error"},error:Error(`Transaction ${p.result?.status??"failed"}`)})}},h=()=>{let e=r.getQuotes();e&&e.length>0&&r.setFiatOnrampState({state:{status:"select-payment-method",quotes:e}})},g=()=>{r.setFiatOnrampState({state:{status:"select-source-asset"}})},y=()=>{r.setFiatOnrampState({error:null,state:{status:"select-amount"}})},C=e=>{r.setFiatOnrampState({localSelectedQuote:e,state:{status:"select-amount"}})},x=e=>{let{opts:t,amount:o}=r.getFiatOnrampFlowState(),s={...t,source:{...t.source,selectedAsset:e}};r.setFiatOnrampState({opts:s,state:{status:"select-amount"}}),u(o,s)},v=({onClose:t})=>/*#__PURE__*/e.jsx(i.ScreenLayout,{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}),j=({onClose:t,onRetry:r})=>/*#__PURE__*/e.jsx(i.ScreenLayout,{showClose:!0,onClose:t,icon:a.XCircle,iconVariant:"error",title:"Something went wrong",subtitle:"We couldn't complete your transaction. Please try again.",primaryCta:{label:"Try again",onClick:r},secondaryCta:{label:"Close",onClick:t},watermark:!0}),S=({onClose:t})=>/*#__PURE__*/e.jsx(i.ScreenLayout,{showClose:!0,onClose:t,icon:a.Check,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 q={CREDIT_DEBIT_CARD:"card",APPLE_PAY:"Apple Pay",GOOGLE_PAY:"Google Pay",BANK_TRANSFER:"bank deposit",ACH:"bank deposit",SEPA:"bank deposit",PIX:"PIX"},w={CREDIT_DEBIT_CARD:/*#__PURE__*/e.jsx(a.CreditCard,{size:14}),APPLE_PAY:/*#__PURE__*/e.jsx(a.Smartphone,{size:14}),GOOGLE_PAY:/*#__PURE__*/e.jsx(a.Smartphone,{size:14}),BANK_TRANSFER:/*#__PURE__*/e.jsx(a.Building,{size:14}),ACH:/*#__PURE__*/e.jsx(a.Building,{size:14}),SEPA:/*#__PURE__*/e.jsx(a.Building,{size:14}),PIX:/*#__PURE__*/e.jsx(a.Wallet,{size:14})};const f=({opts:t,onClose:r,onEditSourceAsset:o,onEditPaymentMethod:n,onContinue:l,onAmountChange:u,amount:c,selectedQuote:d,quotesWarning:p,quotesCount:m,isLoading:h})=>{/*#__PURE__*/return e.jsxs(i.ScreenLayout,{showClose:!0,onClose:r,headerTitle:`Buy ${t.destination.asset.toLocaleUpperCase()}`,primaryCta:{label:"Continue",onClick:l,loading:h,disabled:!d},helpText:p?/*#__PURE__*/e.jsxs(A,{children:[/*#__PURE__*/e.jsx(a.AlertTriangle,{size:16,strokeWidth:2}),/*#__PURE__*/e.jsx(P,{children:"amount_too_low"===p?/*#__PURE__*/e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(b,{children:"Amount too low"}),/*#__PURE__*/e.jsx(_,{children:"Please choose a higher amount to continue."})]}):/*#__PURE__*/e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsx(b,{children:"Currency not available"}),/*#__PURE__*/e.jsx(_,{children:"Please choose another currency to continue."})]})})]}):d&&m>1?/*#__PURE__*/e.jsxs(E,{onClick:n,children:[(y=d.payment_method,w[y]??/*#__PURE__*/e.jsx(a.CreditCard,{size:14})),/*#__PURE__*/e.jsxs("span",{children:["Pay with ",(g=d.payment_method,q[g]??g.replace(/_/g," ").toLowerCase().replace(/^\w/,(e=>e.toUpperCase())))]}),/*#__PURE__*/e.jsx(a.ChevronRight,{size:14})]}):null,watermark:!0,children:[/*#__PURE__*/e.jsx(s.AmountInput,{currency:t.source.selectedAsset,value:c,onChange:u,inputMode:"decimal",autoFocus:!0}),/*#__PURE__*/e.jsx(s.CurrencySelector,{selectedAsset:t.source.selectedAsset,onEditSourceAsset:o})]});var g,y};let A=n.styled.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); } `,P=n.styled.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; `,b=n.styled.span` font-weight: 600; `,_=n.styled.span` font-weight: 400; `,E=n.styled.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; } `,F={CREDIT_DEBIT_CARD:"Credit / debit card",APPLE_PAY:"Apple Pay",GOOGLE_PAY:"Google Pay",BANK_TRANSFER:"Bank transfer",ACH:"ACH",SEPA:"SEPA",PIX:"PIX"},L={CREDIT_DEBIT_CARD:/*#__PURE__*/e.jsx(a.CreditCard,{size:20}),APPLE_PAY:/*#__PURE__*/e.jsx(l.ApplePay,{width:20,height:20}),GOOGLE_PAY:/*#__PURE__*/e.jsx(l.GooglePay,{width:20,height:20}),BANK_TRANSFER:/*#__PURE__*/e.jsx(a.Landmark,{size:20}),ACH:/*#__PURE__*/e.jsx(a.Landmark,{size:20}),SEPA:/*#__PURE__*/e.jsx(a.Landmark,{size:20}),PIX:/*#__PURE__*/e.jsx(a.Landmark,{size:20})};const k=({onClose:t,onSelectPaymentMethod:r,quotes:o,isLoading:s})=>/*#__PURE__*/e.jsx(i.ScreenLayout,{showClose:!0,onClose:t,title:"Select payment method",subtitle:"Choose how you'd like to pay",watermark:!0,children:/*#__PURE__*/e.jsx(O,{children:o.map(((t,o)=>{/*#__PURE__*/return e.jsx(R,{onClick:()=>r(t),disabled:s,children:/*#__PURE__*/e.jsxs(T,{children:[/*#__PURE__*/e.jsx(z,{children:(n=t.payment_method,L[n]??/*#__PURE__*/e.jsx(a.CreditCard,{size:20}))}),/*#__PURE__*/e.jsx(I,{children:/*#__PURE__*/e.jsx(Q,{children:(i=t.payment_method,F[i]??i.replace(/_/g," ").toLowerCase().replace(/^\w/,(e=>e.toUpperCase())))})})]})},`${t.provider}-${t.payment_method}-${o}`);var i,n}))})});let O=n.styled.div` display: flex; flex-direction: column; gap: 0.75rem; width: 100%; `,R=n.styled.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; } `,T=n.styled.div` display: flex; align-items: center; gap: 1rem; width: 100%; `,z=n.styled.div` color: var(--privy-color-foreground-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; `,I=n.styled.div` display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; flex: 1; `,Q=n.styled.span` color: var(--privy-color-foreground); font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; `;const D=({onClose:t,onContinue:r,onAmountChange:o,onSelectSource:i,onEditSourceAsset:a,onEditPaymentMethod:n,onSelectPaymentMethod:l,onRetry:u,opts:c,state:d,amount:p,selectedQuote:m,quotesWarning:h,quotesCount:g,isLoading:y})=>"select-amount"===d.status?/*#__PURE__*/e.jsx(f,{onClose:t,onContinue:r,onAmountChange:o,onEditSourceAsset:a,onEditPaymentMethod:n,opts:c,amount:p,selectedQuote:m,quotesWarning:h,quotesCount:g,isLoading:y}):"select-source-asset"===d.status?/*#__PURE__*/e.jsx(s.SelectSourceAsset,{onSelectSource:i,opts:c,isLoading:y}):"select-payment-method"===d.status?/*#__PURE__*/e.jsx(k,{onClose:t,onSelectPaymentMethod:l,quotes:d.quotes,isLoading:y}):"provider-confirming"===d.status?/*#__PURE__*/e.jsx(v,{onClose:t}):"provider-error"===d.status?/*#__PURE__*/e.jsx(j,{onClose:t,onRetry:u}):"provider-success"===d.status?/*#__PURE__*/e.jsx(S,{onClose:t}):null,B={component:()=>{let{onUserCloseViaDialogOrKeybindRef:o}=t.usePrivyModal(),s=r.useFiatOnrampStore();if(!s)throw Error("Unexpected missing data");let{opts:i,state:a,isLoading:n,amount:l,quotesWarning:u,localQuotes:c,localSelectedQuote:v,initialQuotes:j,initialSelectedQuote:S}=s;return o.current=p,/*#__PURE__*/e.jsx(D,{onClose:p,opts:i,state:a,isLoading:n,amount:l,selectedQuote:v??S,quotesWarning:u,quotesCount:(c??j)?.length??0,onAmountChange:d,onContinue:m,onSelectSource:x,onEditSourceAsset:g,onEditPaymentMethod:h,onSelectPaymentMethod:C,onRetry:y})}};exports.FiatOnrampScreen=B,exports.default=B;