@privy-io/react-auth
Version:
React client for the Privy Auth API
59 lines (50 loc) • 10.5 kB
JavaScript
import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useState as o,useRef as s,useCallback as i}from"react";import{trigger as a}from"@privy-io/popup";import{u as n,a as c}from"./privy-context-DrMxzgOR.mjs";import{A as l,C as u,S as m,p as d,a as p}from"./SelectSourceAsset-C10HQdge.mjs";import{isMobile as f}from"react-device-detect";import{styled as y}from"styled-components";import{a as h}from"./CopyableText-BCytXyJL.mjs";import{J as v}from"./index-YDEix4mU.mjs";import{S as g}from"./ScreenLayout-D1p_ntex.mjs";import{XCircle as C,Hourglass as w,UserCheck as b,Check as k}from"lucide-react";import{I as j}from"./InfoBanner-DkQEPd77.mjs";import"@privy-io/are-addresses-equal";import"./context-DLtU3JQy.mjs";import"@privy-io/js-sdk-core";import"tinycolor2";import"./internal-context-Z-fyxadS.mjs";import"ofetch";import"./use-export-wallet-_wu5ex5t.mjs";import"./useWallets-BzNCTucF.mjs";import"viem";import"eventemitter3";import"viem/utils";import"uuid";import"jose";import"./useActiveWallet-CvP7iYvj.mjs";import"zustand";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";import"@heroicons/react/24/outline/InformationCircleIcon";const x=({data:r,onClose:o})=>/*#__PURE__*/e(g,{showClose:!0,onClose:o,title:"Initiate bank transfer",subtitle:"Use the details below to complete a bank transfer from your bank.",primaryCta:{label:"Done",onClick:o},watermark:!1,footerText:"Exchange rates and fees are set when you authorize and determine the amount you receive. You'll see the applicable rates and fees for your transaction separately",children:/*#__PURE__*/e(A,{children:(v[r.deposit_instructions.asset]||[]).map((([o,s],i)=>{let a=r.deposit_instructions[o];if(!a||Array.isArray(a))return null;let n="asset"===o?a.toUpperCase():a,c=n.length>100?`${n.slice(0,9)}...${n.slice(-9)}`:n;/*#__PURE__*/return t(S,{children:[/*#__PURE__*/e(E,{children:s}),/*#__PURE__*/e(h,{value:n,includeChildren:f,children:/*#__PURE__*/e(U,{children:c})})]},i)}))})});let A=y.ol`
border-color: var(--privy-color-border-default);
border-width: 1px;
border-radius: var(--privy-border-radius-mdlg);
border-style: solid;
display: flex;
flex-direction: column;
&& {
padding: 0 1rem;
}
`,S=y.li`
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
&:not(:first-of-type) {
border-top: 1px solid var(--privy-color-border-default);
}
& > {
:nth-child(1) {
flex-basis: 30%;
}
:nth-child(2) {
flex-basis: 60%;
}
}
`,E=y.span`
color: var(--privy-color-foreground);
font-kerning: none;
font-variant-numeric: lining-nums proportional-nums;
font-feature-settings: 'calt' off;
/* text-xs/font-regular */
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: 1.125rem; /* 150% */
text-align: left;
flex-shrink: 0;
`,U=y.span`
color: var(--privy-color-foreground);
font-kerning: none;
font-feature-settings: 'calt' off;
/* text-sm/font-medium */
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.375rem; /* 157.143% */
text-align: right;
word-break: break-all;
`;const I=({onClose:t})=>/*#__PURE__*/e(g,{showClose:!0,onClose:t,icon:C,iconVariant:"error",title:"Something went wrong",subtitle:"We couldn't complete account setup. This isn't caused by anything you did.",primaryCta:{label:"Close",onClick:t},watermark:!0}),T=({onClose:t,reason:r})=>{let o=r?r.charAt(0).toLowerCase()+r.slice(1):void 0;/*#__PURE__*/return e(g,{showClose:!0,onClose:t,icon:C,iconVariant:"error",title:"Identity verification failed",subtitle:o?`We can't complete identity verification because ${o}. Please try again or contact support for assistance.`:"We couldn't verify your identity. Please try again or contact support for assistance.",primaryCta:{label:"Close",onClick:t},watermark:!0})},L=({onClose:r,email:o})=>/*#__PURE__*/e(g,{showClose:!0,onClose:r,icon:w,title:"Identity verification in progress",subtitle:"We're waiting for Persona to approve your identity verification. This usually takes a few minutes, but may take up to 24 hours.",primaryCta:{label:"Done",onClick:r},watermark:!0,children:/*#__PURE__*/t(j,{theme:"light",children:["You'll receive an email at ",o," once approved with instructions for completing your deposit."]})}),_=({onClose:o,onAcceptTerms:s,isLoading:i})=>/*#__PURE__*/e(g,{showClose:!0,onClose:o,icon:b,title:"Verify your identity to continue",subtitle:"Finish verification with Persona — it takes just a few minutes and requires a government ID.",helpText:/*#__PURE__*/t(r,{children:['This app uses Bridge to securely connect accounts and move funds. By clicking "Accept," you agree to Bridge\'s'," ",/*#__PURE__*/e("a",{href:"https://www.bridge.xyz/legal",target:"_blank",rel:"noopener noreferrer",children:"Terms of Service"})," ","and"," ",/*#__PURE__*/e("a",{href:"https://www.bridge.xyz/legal/row-privacy-policy/bridge-building-limited",target:"_blank",rel:"noopener noreferrer",children:"Privacy Policy"}),"."]}),primaryCta:{label:"Accept and continue",onClick:s,loading:i},watermark:!0}),W=({onClose:t})=>/*#__PURE__*/e(g,{showClose:!0,onClose:t,icon:k,iconVariant:"success",title:"Identity verified successfully",subtitle:"We've successfully verified your identity. Now initiate a bank transfer to view instructions.",primaryCta:{label:"Initiate bank transfer",onClick:()=>{},loading:!0},watermark:!0}),P=({opts:r,onClose:o,onEditSourceAsset:s,onSelectAmount:i,isLoading:a})=>/*#__PURE__*/t(g,{showClose:!0,onClose:o,headerTitle:`Buy ${r.destination.asset.toLocaleUpperCase()}`,primaryCta:{label:"Continue",onClick:i,loading:a},watermark:!0,children:[/*#__PURE__*/e(l,{currency:r.source.selectedAsset,inputMode:"decimal",autoFocus:!0}),/*#__PURE__*/e(u,{selectedAsset:r.source.selectedAsset,onEditSourceAsset:s})]}),B=({onClose:t,onAcceptTerms:r,onSelectAmount:o,onSelectSource:s,onEditSourceAsset:i,opts:a,state:n,email:c,isLoading:l})=>"select-amount"===n.status?/*#__PURE__*/e(P,{onClose:t,onSelectAmount:o,onEditSourceAsset:i,opts:a,isLoading:l}):"select-source-asset"===n.status?/*#__PURE__*/e(m,{onSelectSource:s,opts:a,isLoading:l}):"kyc-prompt"===n.status?/*#__PURE__*/e(_,{onClose:t,onAcceptTerms:r,opts:a,isLoading:l}):"kyc-incomplete"===n.status?/*#__PURE__*/e(L,{onClose:t,email:c}):"kyc-success"===n.status?/*#__PURE__*/e(W,{onClose:t}):"kyc-error"===n.status?/*#__PURE__*/e(T,{onClose:t,reason:n.reason}):"account-details"===n.status?/*#__PURE__*/e(x,{onClose:t,data:n.data}):"create-customer-error"===n.status||"get-customer-error"===n.status?/*#__PURE__*/e(I,{onClose:t}):null,z={component:()=>{let{user:t}=n(),r=c().data;if(!r?.FundWithBankDepositScreen)throw Error("Missing data");let{onSuccess:l,onFailure:u,opts:m,createOrUpdateCustomer:f,getCustomer:y,getOrCreateVirtualAccount:h}=r.FundWithBankDepositScreen,[v,g]=o(m),[C,w]=o({status:"select-amount"}),[b,k]=o(null),[j,x]=o(!1),A=s(null),S=i((async()=>{let e;x(!0),k(null);try{e=await y({kycRedirectUrl:window.location.origin})}catch(e){if(!e||"object"!=typeof e||!("status"in e)||404!==e.status)return w({status:"get-customer-error"}),k(e),void x(!1)}if(!e)try{e=await f({hasAcceptedTerms:!1,kycRedirectUrl:window.location.origin})}catch(e){return w({status:"create-customer-error"}),k(e),void x(!1)}if(!e)return w({status:"create-customer-error"}),k(Error("Unable to create customer")),void x(!1);if("not_started"===e.status&&e.kyc_url)return w({status:"kyc-prompt",kycUrl:e.kyc_url}),void x(!1);if("not_started"===e.status)return w({status:"get-customer-error"}),k(Error("Unexpected user state")),void x(!1);if("rejected"===e.status)return w({status:"kyc-error",reason:e.rejection_reasons?.[0]?.reason}),k(Error("User KYC rejected.")),void x(!1);if("incomplete"===e.status)return w({status:"kyc-incomplete"}),void x(!1);if("active"!==e.status)return w({status:"get-customer-error"}),k(Error("Unexpected user state")),void x(!1);e.status;try{let e=await h({destination:v.destination,provider:v.provider,source:{asset:v.source.selectedAsset}});w({status:"account-details",data:e})}catch(e){return w({status:"create-customer-error"}),k(e),void x(!1)}}),[v]),E=i((async()=>{if(k(null),x(!0),"kyc-prompt"!==C.status)return k(Error("Unexpected state")),void x(!1);let e=a({location:C.kycUrl});if(await f({hasAcceptedTerms:!0}),!e)return k(Error("Unable to begin kyc flow.")),x(!1),void w({status:"create-customer-error"});A.current=new AbortController;let t=await d(e,A.current.signal);if("aborted"===t.status)return;if("closed"===t.status)return void x(!1);t.status;let r=await p({operation:()=>y({}),until:e=>"active"===e.status||"rejected"===e.status,delay:0,interval:2e3,attempts:60,signal:A.current.signal});if("aborted"!==r.status){if("max_attempts"===r.status)return w({status:"kyc-incomplete"}),void x(!1);if(r.status,"rejected"===r.result.status)return w({status:"kyc-error",reason:r.result.rejection_reasons?.[0]?.reason}),k(Error("User KYC rejected.")),void x(!1);if("active"!==r.result.status)return w({status:"kyc-incomplete"}),void x(!1);e.closed||e.close(),r.result.status;try{w({status:"kyc-success"});let e=await h({destination:v.destination,provider:v.provider,source:{asset:v.source.selectedAsset}});w({status:"account-details",data:e})}catch(e){w({status:"create-customer-error"}),k(e)}finally{x(!1)}}}),[w,k,x,f,h,C,v,A]),U=i((e=>{w({status:"select-amount"}),g({...v,source:{...v.source,selectedAsset:e}})}),[w,g]),I=i((()=>{w({status:"select-source-asset"})}),[w]);/*#__PURE__*/return e(B,{onClose:i((async()=>{A.current?.abort(),b?u(b):await l()}),[b,A]),opts:v,state:C,isLoading:j,email:t.email.address,onAcceptTerms:E,onSelectAmount:S,onSelectSource:U,onEditSourceAsset:I})}};export{z as FundWithBankDepositScreen,z as default};