@privy-io/react-auth
Version:
React client for the Privy Auth API
26 lines (25 loc) • 5.46 kB
JavaScript
import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{useState as o,useEffect as i,useRef as n}from"react";import{styled as a}from"styled-components";import{constructURL as l}from"@privy-io/urls";import{W as s}from"./WarningBanner-D5LqDt95.mjs";import{W as c}from"./WalletInfoCard-CEcdukTg.mjs";import{u as d}from"./context-DLtU3JQy.mjs";import{u as p}from"./internal-context-Z-fyxadS.mjs";import{u as m,a as u}from"./privy-context-DrMxzgOR.mjs";import{S as h}from"./ScreenLayout-D1p_ntex.mjs";import"@heroicons/react/24/outline/ExclamationTriangleIcon";import"lucide-react";import"./ModalHeader-BnVmXtvG.mjs";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"./ErrorMessage-D8VaAP5m.mjs";import"./LabelXs-oqZNqbm_.mjs";import"./Address-N-mzBgMy.mjs";import"./shared-FM0rljBt.mjs";import"tinycolor2";import"ofetch";import"@privy-io/are-addresses-equal";import"./Screen-Cycy3IzT.mjs";import"./index-Dq_xe9dz.mjs";const y=({address:o,accessToken:i,appConfigTheme:n,onClose:a,exportButtonProps:l,onBack:d})=>/*#__PURE__*/e(h,{title:"Export wallet",subtitle:/*#__PURE__*/t(r,{children:["Copy either your private key or seed phrase to export your wallet."," ",/*#__PURE__*/e("a",{href:"https://privy-io.notion.site/Transferring-your-account-9dab9e16c6034a7ab1ff7fa479b02828",target:"blank",rel:"noopener noreferrer",children:"Learn more"})]}),onClose:a,onBack:d,showBack:!!d,watermark:!0,children:/*#__PURE__*/t(f,{children:[/*#__PURE__*/e(s,{theme:n,children:"Never share your private key or seed phrase with anyone."}),/*#__PURE__*/e(c,{title:"Your wallet",address:o,showCopyButton:!0}),/*#__PURE__*/e("div",{style:{width:"100%"},children:i&&l&&/*#__PURE__*/e(g,{accessToken:i,dimensions:{height:"44px"},...l})})]})});let f=a.div`
display: flex;
flex-direction: column;
gap: 1.25rem;
text-align: left;
`;function g(r){let[a,s]=o(r.dimensions.width),[c,d]=o(!1),[p,m]=o(void 0),u=n(null);i((()=>{if(u.current&&void 0===a){let{width:e}=u.current.getBoundingClientRect();s(e)}let e=getComputedStyle(document.documentElement);m({background:e.getPropertyValue("--privy-color-background"),background2:e.getPropertyValue("--privy-color-background-2"),foreground3:e.getPropertyValue("--privy-color-foreground-3"),foregroundAccent:e.getPropertyValue("--privy-color-foreground-accent"),accent:e.getPropertyValue("--privy-color-accent"),accentDark:e.getPropertyValue("--privy-color-accent-dark"),success:e.getPropertyValue("--privy-color-success"),colorScheme:e.getPropertyValue("color-scheme")})}),[]);let h="ethereum"===r.chainType&&!r.imported&&!r.isUnifiedWallet;/*#__PURE__*/return e("div",{ref:u,children:a&&
/*#__PURE__*/t(x,{children:[/*#__PURE__*/e("iframe",{style:{position:"absolute",zIndex:1,opacity:c?1:0,transition:"opacity 50ms ease-in-out",pointerEvents:c?"auto":"none"},onLoad:()=>setTimeout((()=>d(!0)),1500),width:a,height:r.dimensions.height,allow:"clipboard-write self *",src:l({origin:r.origin,path:`/apps/${r.appId}/embedded-wallets/export`,query:r.isUnifiedWallet?{v:"1-unified",wallet_id:r.walletId,client_id:r.appClientId,width:`${a}px`,caid:r.clientAnalyticsId,phrase_export:h,...p}:{v:"1",entropy_id:r.entropyId,entropy_id_verifier:r.entropyIdVerifier,hd_wallet_index:r.hdWalletIndex,chain_type:r.chainType,client_id:r.appClientId,width:`${a}px`,caid:r.clientAnalyticsId,phrase_export:h,...p},hash:{token:r.accessToken}})}),/*#__PURE__*/e(w,{children:"Loading..."}),h&&/*#__PURE__*/e(w,{children:"Loading..."})]})})}const v={component:()=>{let[t,r]=o(null),{authenticated:n,user:a}=m(),{closePrivyModal:l,createAnalyticsEvent:s,clientAnalyticsId:c,client:h}=p(),f=d(),{data:g,onUserCloseViaDialogOrKeybindRef:v}=u(),{onFailure:x,onSuccess:w,origin:I,appId:k,appClientId:b,entropyId:j,entropyIdVerifier:C,walletId:A,hdWalletIndex:_,chainType:T,address:W,isUnifiedWallet:V,imported:B,showBackButton:P}=g.keyExport,L=e=>{l({shouldCallAuthOnSuccess:!1}),x("string"==typeof e?Error(e):e)},S=()=>{l({shouldCallAuthOnSuccess:!1}),w(),s({eventName:"embedded_wallet_key_export_completed",payload:{walletAddress:W}})};return i((()=>{if(!n)return L("User must be authenticated before exporting their wallet");h.getAccessToken().then(r).catch(L)}),[n,a]),v.current=S,/*#__PURE__*/e(y,{address:W,accessToken:t,appConfigTheme:f.appearance.palette.colorScheme,onClose:S,isLoading:!t,onBack:P?S:void 0,exportButtonProps:t?{origin:I,appId:k,appClientId:b,clientAnalyticsId:c,entropyId:j,entropyIdVerifier:C,walletId:A,hdWalletIndex:_,isUnifiedWallet:V,imported:B,chainType:T}:void 0})}};let x=a.div`
overflow: visible;
position: relative;
overflow: none;
height: 44px;
display: flex;
gap: 12px;
`,w=a.div`
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 16px;
font-weight: 500;
border-radius: var(--privy-border-radius-md);
background-color: var(--privy-color-background-2);
color: var(--privy-color-foreground-3);
`;export{v as EmbeddedWalletKeyExportScreen,y as EmbeddedWalletKeyExportView,v as default};