@privy-io/react-auth
Version:
React client for the Privy Auth API
41 lines (40 loc) • 5.83 kB
JavaScript
import{jsx as e,jsxs as r,Fragment as t}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 d}from"./WarningBanner-c8L53pJ2.mjs";import{W as c}from"./WalletInfoCard-DFt8ndGE.mjs";import{u as s}from"./context-WTldtXS8.mjs";import{u as p}from"./internal-context-Z-fyxadS.mjs";import{u as m,a as u}from"./get-is-unified-wallet-Boa8DYrQ.mjs";import{S as h}from"./ScreenLayout-DTmQLGPf.mjs";import"@heroicons/react/24/outline/ExclamationTriangleIcon";import"lucide-react";import"./ModalHeader-D8-mhjp4.mjs";import"./useActiveWallet-3RHPIBxJ.mjs";import"zustand";import"react-device-detect";import"./use-export-wallet-CV4p7L0b.mjs";import"@privy-io/js-sdk-core";import"eventemitter3";import"viem/utils";import"./useWallets-CR0z5IIt.mjs";import"./events-context-CI0iqAXA.mjs";import"viem";import"./getPublicClient-B4uPLKn-.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-BjZb-TIL.mjs";import"./shared-FM0rljBt.mjs";import"tinycolor2";import"ofetch";import"@privy-io/are-addresses-equal";import"./Screen-Bp-TN9gb.mjs";import"./index-Dq_xe9dz.mjs";const y=({address:o,accessToken:i,appConfigTheme:n,onClose:a,isLoading:l=!1,exportButtonProps:s,onBack:p})=>/*#__PURE__*/e(h,{title:"Export wallet",subtitle:/*#__PURE__*/r(t,{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:p,showBack:!!p,watermark:!0,children:/*#__PURE__*/r(g,{children:[/*#__PURE__*/e(d,{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:l?/*#__PURE__*/e(f,{}):i&&s&&/*#__PURE__*/e(w,{accessToken:i,dimensions:{height:"44px"},...s})})]})});let g=a.div`
display: flex;
flex-direction: column;
gap: 1.25rem;
text-align: left;
`,f=()=>/*#__PURE__*/e(v,{children:/*#__PURE__*/e(x,{children:"Loading..."})}),v=a.div`
display: flex;
gap: 12px;
height: 44px;
`,x=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);
`;function w(t){let[a,d]=o(t.dimensions.width),[c,s]=o(void 0),p=n(null);i((()=>{if(p.current&&void 0===a){let{width:e}=p.current.getBoundingClientRect();d(e)}let e=getComputedStyle(document.documentElement);s({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 m="ethereum"===t.chainType&&!t.imported&&!t.isUnifiedWallet;/*#__PURE__*/return e("div",{ref:p,children:a&&
/*#__PURE__*/r(I,{children:[/*#__PURE__*/e("iframe",{style:{position:"absolute",zIndex:1},width:a,height:t.dimensions.height,allow:"clipboard-write self *",src:l({origin:t.origin,path:`/apps/${t.appId}/embedded-wallets/export`,query:t.isUnifiedWallet?{v:"1-unified",wallet_id:t.walletId,client_id:t.appClientId,width:`${a}px`,caid:t.clientAnalyticsId,phrase_export:m,...c}:{v:"1",entropy_id:t.entropyId,entropy_id_verifier:t.entropyIdVerifier,hd_wallet_index:t.hdWalletIndex,chain_type:t.chainType,client_id:t.appClientId,width:`${a}px`,caid:t.clientAnalyticsId,phrase_export:m,...c},hash:{token:t.accessToken}})}),/*#__PURE__*/e(b,{children:"Loading..."}),m&&/*#__PURE__*/e(b,{children:"Loading..."})]})})}const k={component:()=>{let[r,t]=o(null),{authenticated:n,user:a}=m(),{closePrivyModal:l,createAnalyticsEvent:d,clientAnalyticsId:c,client:h}=p(),g=s(),{data:f,onUserCloseViaDialogOrKeybindRef:v}=u(),{onFailure:x,onSuccess:w,origin:k,appId:I,appClientId:b,entropyId:j,entropyIdVerifier:C,walletId:A,hdWalletIndex:_,chainType:W,address:T,isUnifiedWallet:P,imported:V,showBackButton:B}=f.keyExport,L=e=>{l({shouldCallAuthOnSuccess:!1}),x("string"==typeof e?Error(e):e)},S=()=>{l({shouldCallAuthOnSuccess:!1}),w(),d({eventName:"embedded_wallet_key_export_completed",payload:{walletAddress:T}})};return i((()=>{if(!n)return L("User must be authenticated before exporting their wallet");h.getAccessToken().then(t).catch(L)}),[n,a]),v.current=S,/*#__PURE__*/e(y,{address:T,accessToken:r,appConfigTheme:g.appearance.palette.colorScheme,onClose:S,isLoading:!r,onBack:B?S:void 0,exportButtonProps:r?{origin:k,appId:I,appClientId:b,clientAnalyticsId:c,entropyId:j,entropyIdVerifier:C,walletId:A,hdWalletIndex:_,isUnifiedWallet:P,imported:V,chainType:W}:void 0})}};let I=a.div`
overflow: visible;
position: relative;
overflow: none;
height: 44px;
display: flex;
gap: 12px;
`,b=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{k as EmbeddedWalletKeyExportScreen,y as EmbeddedWalletKeyExportView,k as default};