@privy-io/react-auth
Version:
React client for the Privy Auth API
112 lines (104 loc) • 6.12 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),t=require("styled-components"),i=require("./WalletLink-Bs_1C81F.js"),n=require("./ethers-SCb3aakT.js"),r=require("./Layouts-D3TOcPhm.js"),l=require("@heroicons/react/24/outline/ChevronDownIcon"),o=require("react"),d=require("./context-D-ZJYjUg.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=/*#__PURE__*/s(l);const c=({label:t,children:i,valueStyles:n})=>/*#__PURE__*/e.jsxs(x,{children:[/*#__PURE__*/e.jsx("div",{children:t}),/*#__PURE__*/e.jsx(h,{style:{...n},children:i})]});let x=t.styled.div`
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
> :first-child {
color: var(--privy-color-foreground-3);
text-align: left;
}
> :last-child {
color: var(--privy-color-foreground-2);
text-align: right;
}
`,h=t.styled.div`
font-size: 14px;
line-height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--privy-border-radius-full);
background-color: var(--privy-color-background-2);
padding: 4px 8px;
`;const u=({gas:t,tokenPrice:l,tokenSymbol:o})=>/*#__PURE__*/e.jsxs(r.FlexContainer,{style:{paddingBottom:"12px"},children:[/*#__PURE__*/e.jsxs(v,{children:[/*#__PURE__*/e.jsx(y,{children:"Est. Fees"}),/*#__PURE__*/e.jsx("div",{children:/*#__PURE__*/e.jsx(i.PriceDisplay,{weiQuantities:[BigInt(t)],tokenPrice:l,tokenSymbol:o})})]}),l&&/*#__PURE__*/e.jsx(g,{children:`${n.getNativeCurrencyFromWei(BigInt(t),o)}`})]}),p=({value:t,gas:l,tokenPrice:o,tokenSymbol:d})=>{let s=BigInt(t??0)+BigInt(l);/*#__PURE__*/return e.jsxs(r.FlexContainer,{children:[/*#__PURE__*/e.jsxs(v,{children:[/*#__PURE__*/e.jsx(y,{children:"Total (including fees)"}),/*#__PURE__*/e.jsx("div",{children:/*#__PURE__*/e.jsx(i.PriceDisplay,{weiQuantities:[BigInt(t||0),BigInt(l)],tokenPrice:o,tokenSymbol:d})})]}),o&&/*#__PURE__*/e.jsx(g,{children:n.getNativeCurrencyFromWei(s,d)})]})};let v=t.styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-top: 4px;
`,g=t.styled.div`
display: flex;
flex-direction: row;
height: 12px;
font-size: 12px;
line-height: 12px;
color: var(--privy-color-foreground-3);
font-weight: 400;
`,y=t.styled.div`
font-size: 14px;
line-height: 22.4px;
font-weight: 400;
`;const f=/*#__PURE__*/o.createContext(void 0),j=/*#__PURE__*/o.createContext(void 0),m=({defaultValue:t,children:i})=>{let[n,r]=o.useState(t||null);/*#__PURE__*/return e.jsx(f.Provider,{value:{activePanel:n,togglePanel:e=>{r(n===e?null:e)}},children:/*#__PURE__*/e.jsx(I,{children:i})})},b=({value:t,children:i})=>{let{activePanel:n,togglePanel:r}=o.useContext(f),l=n===t;/*#__PURE__*/return e.jsx(j.Provider,{value:{onToggle:()=>r(t),value:t},children:/*#__PURE__*/e.jsx(T,{isActive:l?"true":"false","data-open":String(l),children:i})})},w=({children:t})=>{let{activePanel:i}=o.useContext(f),{onToggle:n,value:r}=o.useContext(j),l=i===r;/*#__PURE__*/
return e.jsxs(e.Fragment,{children:[/*#__PURE__*/e.jsxs(C,{onClick:n,"data-open":String(l),children:[/*#__PURE__*/e.jsx(A,{children:t}),/*#__PURE__*/e.jsx(D,{isactive:l?"true":"false",children:/*#__PURE__*/e.jsx(a.default,{height:"16px",width:"16px",strokeWidth:"2"})})]}),/*#__PURE__*/e.jsx(S,{})]})},k=({children:t})=>{let{activePanel:i}=o.useContext(f),{value:n}=o.useContext(j);/*#__PURE__*/return e.jsx(q,{"data-open":String(i===n),children:/*#__PURE__*/e.jsx(B,{children:t})})},P=({children:t})=>{let{activePanel:i}=o.useContext(f),{value:n}=o.useContext(j);/*#__PURE__*/return e.jsx(B,{children:"function"==typeof t?t({isActive:i===n}):t})};let I=t.styled.div`
display: flex;
flex-direction: column;
width: 100%;
gap: 8px;
`,C=t.styled.div`
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
cursor: pointer;
padding-bottom: 8px;
`,S=t.styled.div`
width: 100%;
&& {
border-top: 1px solid;
border-color: var(--privy-color-foreground-4);
}
padding-bottom: 12px;
`,A=t.styled.div`
font-size: 14px;
font-weight: 500;
line-height: 19.6px;
width: 100%;
padding-right: 8px;
`,T=t.styled.div`
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
padding: 12px;
&& {
border: 1px solid;
border-color: var(--privy-color-foreground-4);
border-radius: var(--privy-border-radius-md);
}
`,q=t.styled.div`
position: relative;
overflow: hidden;
transition: max-height 25ms ease-out;
&[data-open='true'] {
max-height: 700px;
}
&[data-open='false'] {
max-height: 0;
}
`,B=t.styled.div`
display: flex;
flex-direction: column;
gap: 12px;
flex: 1 1 auto;
min-height: 1px;
`,D=t.styled.div`
transform: ${e=>"true"===e.isactive?"rotate(180deg)":"rotate(0deg)"};
`;let F=t.styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
`,N=t.styled.div`
flex-shrink: 0;
padding-left: 8px;
`;exports.TransactionDetails=({from:t,to:n,txn:r,transactionInfo:l,tokenPrice:o,gas:s,tokenSymbol:a})=>{let x=BigInt(r?.value||0);/*#__PURE__*/
return e.jsx(m,{...d.useAppConfig().render.standalone?{defaultValue:"details"}:{},children:/*#__PURE__*/e.jsxs(b,{value:"details",children:[/*#__PURE__*/e.jsx(w,{children:/*#__PURE__*/e.jsxs(F,{children:[/*#__PURE__*/e.jsx("div",{children:l?.title||"Details"}),/*#__PURE__*/e.jsx(N,{children:/*#__PURE__*/e.jsx(i.HeaderPriceDisplay,{weiQuantities:[x],tokenPrice:o,tokenSymbol:a})})]})}),/*#__PURE__*/e.jsxs(k,{children:[/*#__PURE__*/e.jsx(c,{label:"From",children:/*#__PURE__*/e.jsx(i.WalletLink,{walletAddress:t,chainId:r.chainId||d.CHAIN_ID_MAINNET,chainType:"ethereum"})}),/*#__PURE__*/e.jsx(c,{label:"To",children:/*#__PURE__*/e.jsx(i.WalletLink,{walletAddress:n,chainId:r.chainId||d.CHAIN_ID_MAINNET,chainType:"ethereum"})}),l&&l.action&&/*#__PURE__*/e.jsx(c,{label:"Action",children:l.action}),s&&/*#__PURE__*/e.jsx(u,{value:r.value,gas:s,tokenPrice:o,tokenSymbol:a})]}),/*#__PURE__*/e.jsx(P,{children:({isActive:t})=>/*#__PURE__*/e.jsx(p,{value:r.value,displayFee:t,gas:s||"0x0",tokenPrice:o,tokenSymbol:a})})]})})};