@privy-io/react-auth
Version:
React client for the Privy Auth API
17 lines (16 loc) • 5.12 kB
JavaScript
import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import o from"@heroicons/react/24/solid/ArrowsRightLeftIcon";import i from"@heroicons/react/24/solid/CheckCircleIcon";import{useState as n,useRef as a,useEffect as s,useMemo as c}from"react";import{styled as m}from"styled-components";import{M as l,B as d,P as p}from"./ModalHeader-BnVmXtvG.mjs";import{a as u}from"./Layouts-BlFm53ED.mjs";import{L as g,O as f}from"./useActiveWallet-CvP7iYvj.mjs";import{u as h}from"./internal-context-Z-fyxadS.mjs";import{a as v}from"./privy-context-DrMxzgOR.mjs";import{O as y}from"./analytics-mkkvFRju.mjs";import{I as b}from"./index-YDEix4mU.mjs";import"./context-DLtU3JQy.mjs";import"@privy-io/js-sdk-core";import"tinycolor2";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"zustand";import"react-device-detect";import"./use-export-wallet-_wu5ex5t.mjs";import"./useWallets-BzNCTucF.mjs";import"viem";import"eventemitter3";import"viem/utils";import"./events-context-CI0iqAXA.mjs";import"ofetch";import"@privy-io/are-addresses-equal";import"uuid";import"jose";import"@coinbase/wallet-sdk";import"@privy-io/ethereum";import"mipd";import"@privy-io/popup";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";const w={component:()=>{let{data:o,setModalData:i,navigate:c,navigateBack:m}=v(),{closePrivyModal:p,createAnalyticsEvent:u,client:g}=h(),[f,b]=n("pending-in-flow"),w=a(0),C={...o?.funding,showAlternateFundingMethod:!0};C.usingDefaultFundingMethod&&(C.usingDefaultFundingMethod=!1);let{partnerUserId:k,popup:x}=o?.coinbaseOnrampStatus??{};return s((()=>{if("pending-in-flow"===f||"pending-after-flow"===f){let e=setInterval((async()=>{if(k)try{let{status:e}=await g.getCoinbaseOnRampStatus({partnerUserId:k});if("success"===e)return void b("success");if("failure"===e)throw Error("There was an error completing Coinbase Onramp flow.");if(w.current>=3)return i({funding:C,solanaFundingData:o?.solanaFundingData}),void c("FundingMethodSelectionScreen");x?.closed&&(w.current=w.current+1,b("pending-after-flow"))}catch(e){console.error(e),b("error"),u({eventName:y,payload:{status:"failure",provider:"coinbase-onramp",error:e.message}}),i({funding:{...C,errorMessage:"Something went wrong adding funds. Please try again or use another method."},solanaFundingData:o?.solanaFundingData}),c("FundingMethodSelectionScreen")}}),1500);return()=>clearInterval(e)}}),[k,x,f]),/*#__PURE__*/e(r,{children:[/*#__PURE__*/t(l,{title:"Fund account",backFn:()=>{i({funding:C,solanaFundingData:o?.solanaFundingData}),m()}},"header"),/*#__PURE__*/t(j,{status:f,onClickCta:p}),/*#__PURE__*/t(d,{})]})}};let j=({status:o,onClickCta:i})=>{let{title:n,body:a,cta:s}=c((()=>(e=>{switch(e){case"success":return{title:"You've funded your account!",body:"It may take a few minutes for the assets to appear.",cta:"Continue"};case"pending-after-flow":return{title:"In Progress",body:"Almost done. Retrieving transaction status from Coinbase",cta:""};case"error":case"pending-in-flow":return{title:"In Progress",body:"Go back to Coinbase Onramp to finish funding your account.",cta:""}}})(o)),[o]);/*#__PURE__*/return e(r,{children:[/*#__PURE__*/e(x,{children:[/*#__PURE__*/t(C,{isSucccess:"success"===o}),/*#__PURE__*/e(u,{children:[/*#__PURE__*/t("h3",{children:n}),/*#__PURE__*/t(k,{children:a})]})]}),s&&/*#__PURE__*/t(p,{onClick:i,children:s})]})},C=({isSucccess:r})=>{if(!r){let r="var(--privy-color-foreground-4)";/*#__PURE__*/return e("div",{style:{position:"relative"},children:[/*#__PURE__*/t(g,{color:r,style:{position:"absolute"}}),/*#__PURE__*/t(f,{color:r}),/*#__PURE__*/t(b,{style:{position:"absolute",width:"2.8rem",height:"2.8rem",top:"1.2rem",left:"1.2rem"}})]})}let n=r?i:()=>/*#__PURE__*/t(o,{width:"3rem",height:"3rem",style:{backgroundColor:"var(--privy-color-foreground-4)",color:"var(--privy-color-background)",borderRadius:"100%",padding:"0.5rem",margin:"0.5rem"}}),a=r?"var(--privy-color-success)":"var(--privy-color-foreground-4)";/*#__PURE__*/return t("div",{style:{borderColor:a,display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"100%",borderWidth:2,padding:"0.5rem",marginBottom:"0.5rem"},children:n&&/*#__PURE__*/t(n,{width:"4rem",height:"4rem",color:a})})},k=m.p`
font-size: 1rem;
color: var(--privy-color-foreground-3);
margin-bottom: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
`,x=m.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 1.75rem;
margin-right: 1.75rem;
padding: 2rem 0;
`;export{w as CoinbaseOnrampStatusScreen,w as default};