UNPKG

@privy-io/react-auth

Version:

React client for the Privy Auth API

80 lines (78 loc) • 8.52 kB
import{jsxs as e,jsx as r,Fragment as o}from"react/jsx-runtime";import t from"@heroicons/react/24/outline/ExclamationTriangleIcon";import n from"@heroicons/react/24/outline/WalletIcon";import{useState as a}from"react";import{P as i,M as s,B as c,S as l}from"./ModalHeader-BnVmXtvG.mjs";import{styled as d}from"styled-components";import{e as u}from"./StackedContainer-B2vaEl56.mjs";import{A as p}from"./Address-N-mzBgMy.mjs";import{u as h}from"./internal-context-Z-fyxadS.mjs";import{a as m}from"./privy-context-DrMxzgOR.mjs";import{e as f}from"./capitalizeFirstLetter-DmLYqXsO.mjs";import{u as g}from"./context-DLtU3JQy.mjs";import x from"@heroicons/react/24/outline/ExclamationCircleIcon";import y from"@heroicons/react/24/outline/Square2StackIcon";import"./useActiveWallet-CvP7iYvj.mjs";import"zustand";import"react-device-detect";import"./use-export-wallet-_wu5ex5t.mjs";import"./useWallets-BzNCTucF.mjs";import"viem";import"@privy-io/js-sdk-core";import"eventemitter3";import"viem/utils";import"./events-context-CI0iqAXA.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"lucide-react";import"ofetch";import"@privy-io/are-addresses-equal";import"tinycolor2";const v=d.span` && { width: 82px; height: 82px; border-width: 4px; border-style: solid; border-color: ${e=>e.color??"var(--privy-color-accent)"}; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1.2s linear infinite; transition: border-color 800ms; border-bottom-color: ${e=>e.color??"var(--privy-color-accent)"}; } `;function b(o){/*#__PURE__*/return e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",...o,children:[/*#__PURE__*/r("circle",{cx:"12",cy:"12",r:"10"}),/*#__PURE__*/r("line",{x1:"12",x2:"12",y1:"8",y2:"12"}),/*#__PURE__*/r("line",{x1:"12",x2:"12.01",y1:"16",y2:"16"})]})}const w=({onTransfer:e,isTransferring:o,transferSuccess:t})=>/*#__PURE__*/r(i,{...t?{success:!0,children:"Success!"}:{warn:!0,loading:o,onClick:e,children:"Transfer and delete account"}}),T=d.div` display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; padding-bottom: 16px; `,k=d.div` display: flex; flex-direction: column; && p { font-size: 14px; } width: 100%; gap: 16px; `,C=d.div` display: flex; cursor: pointer; align-items: center; width: 100%; border: 1px solid var(--privy-color-foreground-4) !important; border-radius: var(--privy-border-radius-md); padding: 8px 10px; font-size: 14px; font-weight: 500; gap: 8px; `,A=d(x)` position: relative; width: ${({$iconSize:e})=>`${e}px`}; height: ${({$iconSize:e})=>`${e}px`}; color: var(--privy-color-foreground-3); margin-left: auto; `,S=d(y)` position: relative; width: 15px; height: 15px; color: var(--privy-color-foreground-3); margin-left: auto; `,j=d.ol` display: flex; flex-direction: column; font-size: 14px; width: 100%; text-align: left; `,W=d.li` font-size: 14px; list-style-type: auto; list-style-position: outside; margin-left: 1rem; margin-bottom: 0.5rem; /* Adjust the margin as needed */ &:last-child { margin-bottom: 0; /* Remove margin from the last item */ } `,I=d.div` position: relative; width: 60px; height: 60px; margin: 10px; display: flex; justify-content: center; align-items: center; `;let M=()=>/*#__PURE__*/r(I,{children:/*#__PURE__*/r(A,{$iconSize:60})});const $=({address:t,onClose:a,onRetry:i,onTransfer:l,isTransferring:d,transferSuccess:u})=>{let{defaultChain:h}=g(),m=h.blockExplorers?.default.url??"https://etherscan.io";/*#__PURE__*/return e(o,{children:[/*#__PURE__*/r(s,{onClose:a,backFn:i}),/*#__PURE__*/e(T,{children:[/*#__PURE__*/r(M,{}),/*#__PURE__*/e(k,{children:[/*#__PURE__*/r("h3",{children:"Check account assets before transferring"}),/*#__PURE__*/r("p",{children:"Before transferring, ensure there are no assets in the other account. Assets in that account will not transfer automatically and may be lost."}),/*#__PURE__*/e(j,{children:[/*#__PURE__*/r("p",{children:" To check your balance, you can:"}),/*#__PURE__*/r(W,{children:"Log out and log back into the other account, or "}),/*#__PURE__*/e(W,{children:["Copy your wallet address and use a"," ",/*#__PURE__*/r("u",{children:/*#__PURE__*/r("a",{target:"_blank",href:m,children:"block explorer"})})," ","to see if the account holds any assets."]})]}),/*#__PURE__*/e(C,{onClick:()=>navigator.clipboard.writeText(t).catch(console.error),children:[/*#__PURE__*/r(n,{color:"var(--privy-color-foreground-1)",strokeWidth:2,height:"28px",width:"28px"}),/*#__PURE__*/r(p,{address:t,showCopyIcon:!1}),/*#__PURE__*/r(S,{})]}),/*#__PURE__*/r(w,{onTransfer:l,isTransferring:d,transferSuccess:u})]})]}),/*#__PURE__*/r(c,{})]})},z={component:()=>{let{initiateAccountTransfer:e,closePrivyModal:o}=h(),{data:t,navigate:n,lastScreen:i,setModalData:s}=m(),[c,l]=a(void 0),[d,u]=a(!1),[p,f]=a(!1),g=async()=>{try{if(!t?.accountTransfer?.nonce||!t?.accountTransfer?.account)throw Error("missing account transfer inputs");f(!0),await e({nonce:t?.accountTransfer?.nonce,account:t?.accountTransfer?.account,accountType:t?.accountTransfer?.linkMethod,externalWalletMetadata:t?.accountTransfer?.externalWalletMetadata,telegramWebAppData:t?.accountTransfer?.telegramWebAppData,telegramAuthResult:t?.accountTransfer?.telegramAuthResult,farcasterEmbeddedAddress:t?.accountTransfer?.farcasterEmbeddedAddress,oAuthUserInfo:t?.accountTransfer?.oAuthUserInfo}),u(!0),f(!1),setTimeout(o,1e3)}catch(e){s({errorModalData:{error:e,previousScreen:i||"LinkConflictScreen"}}),n("ErrorScreen",!0)}};return c?/*#__PURE__*/r($,{address:c,onClose:o,onRetry:()=>l(void 0),onTransfer:g,isTransferring:p,transferSuccess:d}):/*#__PURE__*/r(E,{onClose:o,onInfo:()=>l(t?.accountTransfer?.embeddedWalletAddress),onContinue:()=>l(t?.accountTransfer?.embeddedWalletAddress),onTransfer:g,isTransferring:p,transferSuccess:d,data:t})}},E=({onClose:n,onContinue:a,onInfo:d,onTransfer:p,transferSuccess:h,isTransferring:m,data:g})=>{if(!g?.accountTransfer?.linkMethod||!g?.accountTransfer?.displayName)return;let x={method:g?.accountTransfer?.linkMethod,handle:g?.accountTransfer?.displayName,disclosedAccount:g?.accountTransfer?.embeddedWalletAddress?{type:"wallet",handle:g?.accountTransfer?.embeddedWalletAddress}:void 0};/*#__PURE__*/return e(o,{children:[/*#__PURE__*/r(s,{closeable:!0}),/*#__PURE__*/e(T,{children:[/*#__PURE__*/r(u,{children:/*#__PURE__*/e("div",{children:[/*#__PURE__*/r(v,{color:"var(--privy-color-error)"}),/*#__PURE__*/r(t,{height:38,width:38,stroke:"var(--privy-color-error)"})]})}),/*#__PURE__*/e(k,{children:[/*#__PURE__*/e("h3",{children:[function(e){switch(e){case"sms":return"Phone number";case"email":return"Email address";case"siwe":return"Wallet address";case"siws":return"Solana wallet address";case"linkedin":return"LinkedIn profile";case"google":case"apple":case"discord":case"github":case"instagram":case"spotify":case"tiktok":case"line":case"twitch":case"twitter":case"telegram":case"farcaster":return`${f(e.replace("_oauth",""))} profile`;default:return e.startsWith("privy:")?"Cross-app account":e}}(x.method)," is associated with another account"]}),/*#__PURE__*/e("p",{children:["Do you want to transfer",/*#__PURE__*/r("b",{children:x.handle?` ${x.handle}`:""})," to this account instead? This will delete your other account."]}),/*#__PURE__*/r(L,{onClick:d,disclosedAccount:x.disclosedAccount})]}),/*#__PURE__*/e(k,{style:{gap:12,marginTop:12},children:[g?.accountTransfer?.embeddedWalletAddress?/*#__PURE__*/r(i,{onClick:a,children:"Continue"}):/*#__PURE__*/r(w,{onTransfer:p,transferSuccess:h,isTransferring:m}),/*#__PURE__*/r(l,{onClick:n,children:"No thanks"})]})]}),/*#__PURE__*/r(c,{})]})};function L({disclosedAccount:o,onClick:t}){return o?/*#__PURE__*/e(C,{onClick:t,children:[/*#__PURE__*/r(n,{color:"var(--privy-color-foreground-1)",strokeWidth:2,height:"28px",width:"28px"}),/*#__PURE__*/r(p,{address:o.handle,showCopyIcon:!1}),/*#__PURE__*/r(b,{width:15,height:15,color:"var(--privy-color-foreground-3)",style:{marginLeft:"auto"}})]}):null}export{z as LinkConflictScreen,E as LinkConflictScreenView,z as default};