@frak-labs/components
Version:
Frak Wallet components, helping any person to interact with the Frak wallet.
183 lines • 8.81 kB
JavaScript
import{D as e,S as t,_ as n,a as r,c as i,g as a,u as o}from"./loader.js";import{a as s,d as c,f as l,h as u,l as d,m as f,n as ee,p,s as te,t as m,u as h}from"./defaults.DjBUlRT8.js";import{a as g,i as _,n as v,r as y,t as b}from"./GiftIcon.DabDdDcp.js";import{t as x}from"./useGlobalComponents.4DaqvbCn.js";import{t as S}from"./useLightDomStyles.DNP8gafA.js";import{i as C}from"./rewards.BaTam2j1.js";import{t as ne}from"./useReward.Bi4Hs7kk.js";var w=`inAppBanner_body__1ibpiy74`,T=`inAppBanner_closeButton__1ibpiy77`,E=`inAppBanner_container__1ibpiy70`,D=`inAppBanner_cta__1ibpiy76`,O=`inAppBanner_description__1ibpiy75`,k=`inAppBanner_header__1ibpiy71`,A=`inAppBanner_iconWrapper__1ibpiy72`,j=`inAppBanner_title__1ibpiy73`;function re({title:e,description:t,cta:n,dismissLabel:r,onAction:i,onDismiss:a,className:o,classNames:s}){return f(`div`,{className:`${E}${o?` ${o}`:``}`,role:`alert`,children:[f(`div`,{className:k,children:[f(`span`,{className:`${A}${s?.icon?` ${s.icon}`:``}`,children:f(v,{width:20,height:20})}),f(`p`,{className:`${j}${s?.title?` ${s.title}`:``}`,children:e})]}),f(`div`,{className:w,children:[f(`p`,{className:`${O}${s?.description?` ${s.description}`:``}`,children:t}),f(`button`,{type:`button`,className:`${D}${s?.cta?` ${s.cta}`:``}`,onClick:i,children:[n,f(_,{width:14,height:14})]})]}),f(`button`,{type:`button`,className:`${T}${s?.close?` ${s.close}`:``}`,onClick:a,"aria-label":r,children:f(g,{width:16,height:16})})]})}var ie=`Banner_frakLogo__1gnumzi9`,ae=`Banner_iconSvg__1gnumzi1`,oe=`Banner_referral__1gnumzi2 reset_base__1831jhd0 Banner_rootBase__1gnumzi0`,se=`Banner_referralBody__1gnumzi5`,ce=`Banner_referralCta__1gnumzi8 sharedBaseCss_buttonReset__7cswil0`,le=`Banner_referralDescription__1gnumzi7 reset_base__1831jhd0`,ue=`Banner_referralIconWrapper__1gnumzi3`,de=`Banner_referralImage__1gnumzi4`,fe=`Banner_referralTitle__1gnumzi6 reset_base__1831jhd0`;function M({placement:u,classname:g=``,interaction:_,products:v,referralTitle:w,referralDescription:T,referralCta:E,inappTitle:D,inappDescription:O,inappCta:k,imageUrl:A,preview:j,previewMode:M,allowInappRedirect:N}){let P=!!j,F=s(),I=M===`inapp`?`inapp`:`referral`,L=N===!0||N===`true`,R=ee(u),{shouldRender:z,isHidden:B,isClientReady:V}=te();S(`frak-banner`,u,R?.components?.banner?.css,`@keyframes keyframes_fadeIn__mnqmlt0 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes keyframes_fadeOut__mnqmlt1 {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes keyframes_fadeInDown__mnqmlt2 {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}.inAppBanner_container__1ibpiy70 {
position: fixed;
top: max(8px, env(safe-area-inset-top));
left: 16px;
right: 16px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 16px;
padding-right: 32px;
border-radius: 12px;
background-color: #000000cc;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-onAction__pbq4ak6);
animation: keyframes_fadeInDown__mnqmlt2 300ms ease-out;
}
.inAppBanner_header__1ibpiy71 {
display: flex;
align-items: center;
gap: 8px;
}
.inAppBanner_iconWrapper__1ibpiy72 {
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-onAction__pbq4ak6);
}
.inAppBanner_title__1ibpiy73 {
margin: 0;
padding: 0;
font-size: 16px;
font-weight: 500;
line-height: 26px;
color: var(--text-onAction__pbq4ak6);
}
.inAppBanner_body__1ibpiy74 {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 4px;
}
.inAppBanner_description__1ibpiy75 {
margin: 0;
padding: 0;
font-size: 14px;
color: var(--text-onAction__pbq4ak6);
line-height: 22px;
opacity: 0.96;
}
.inAppBanner_cta__1ibpiy76 {
all: unset;
display: inline-flex;
align-items: center;
gap: 4px;
color: #2bb2ff;
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.inAppBanner_cta__1ibpiy76:focus-visible {
outline: 2px solid #2bb2ff;
outline-offset: 2px;
border-radius: 4px;
}
.inAppBanner_closeButton__1ibpiy77 {
all: unset;
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
color: #ffffff99;
cursor: pointer;
}
.inAppBanner_closeButton__1ibpiy77:focus-visible {
outline: 2px solid var(--text-onAction__pbq4ak6);
outline-offset: 2px;
}.Banner_rootBase__1gnumzi0 {
position: relative;
display: flex;
animation: keyframes_fadeInDown__mnqmlt2 300ms ease-out;
}
.Banner_iconSvg__1gnumzi1 {
width: 100%;
height: 100%;
}
.Banner_referral__1gnumzi2 {
flex-direction: row;
align-items: center;
gap: 16px;
padding: 16px;
background-color: #ffffff;
color: var(--text-primary__pbq4ak0);
border: 1px solid var(--border-default__pbq4akv);
border-radius: 12px;
}
.Banner_referralIconWrapper__1gnumzi3 {
flex-shrink: 0;
align-self: flex-start;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
overflow: hidden;
}
.Banner_referralImage__1gnumzi4 {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.Banner_referralBody__1gnumzi5 {
flex: 1;
min-width: 0;
}
.Banner_referralTitle__1gnumzi6 {
font-size: 16px;
font-weight: 600;
color: var(--text-primary__pbq4ak0);
line-height: 22px;
}
.Banner_referralDescription__1gnumzi7 {
margin-bottom: 8px;
font-size: 14px;
color: #979797;
line-height: 22px;
}
.Banner_referralCta__1gnumzi8 {
display: inline-block;
padding: 8px 16px;
border: 1px solid #000000;
border-radius: 9999px;
color: var(--text-primary__pbq4ak0);
font-size: 10px;
font-weight: 700;
line-height: 12px;
text-transform: uppercase;
}
.Banner_frakLogo__1gnumzi9 {
position: absolute;
right: 16px;
bottom: 12px;
pointer-events: none;
}`,e);let[H,U]=c(!1),[W,G]=c(()=>P?I:L&&o?`inapp`:null),K=d(null);l(()=>{P&&G(I)},[P,I]);let pe=h(()=>a(v),[v]),{reward:q}=ne(W===`referral`&&V,_,`referee`,pe),[J,Y]=c(null);l(()=>{let e=window.FrakSetup?.client;W!==`inapp`||P||!V||!e||i(e).then(e=>Y(e)).catch(()=>{})},[W,P,V]),l(()=>{P||!W||H||K.current!==W&&V&&(t(window.FrakSetup?.client,`banner_impression`,{placement:u,variant:W,has_reward:W===`referral`?!!q:void 0}),K.current=W)},[W,H,V,P,u]),l(()=>{if(P||W===`inapp`)return;let e=()=>G(`referral`);return window.addEventListener(r,e),()=>window.removeEventListener(r,e)},[P,W]);let X=p(async()=>{if(P)return;if(t(window.FrakSetup?.client,`banner_resolved`,{placement:u,variant:W??`referral`,outcome:`clicked`}),W===`referral`){U(!0);return}let e=J;if(!e&&window.FrakSetup?.client)try{e=await i(window.FrakSetup?.client)}catch{}let r=window.location.href;if(e){let t=new URL(r);t.searchParams.set(`fmt`,e),r=t.toString()}n(r)},[P,W,J,u]),me=p(()=>{P||(t(window.FrakSetup?.client,`banner_resolved`,{placement:u,variant:W??`referral`,outcome:`dismissed`}),U(!0))},[P,W,u]),he=x(),Z=R?.components?.banner??he?.banner,Q=A??Z?.imageUrl,$=h(()=>{let e=m[F].banner;if(W===`referral`){let t=q?e.referralTitleReward:e.referralTitle;return{title:C(w??Z?.referralTitle??t,q),description:C(T??Z?.referralDescription??e.referralDescription,q),cta:E??Z?.referralCta??e.referralCta}}return{title:C(D??Z?.inappTitle??e.inappTitle,void 0),description:C(O??Z?.inappDescription??e.inappDescription,void 0),cta:k??Z?.inappCta??e.inappCta}},[F,W,q,Z,w,T,E,D,O,k]);if(!W||!P&&(!z||B||H))return null;let ge=[oe,`frak-banner`,`frak-banner--${W}`,g].filter(Boolean).join(` `);return W===`inapp`?f(re,{title:$.title,description:$.description,cta:$.cta,dismissLabel:m[F].banner.dismissLabel,onAction:X,onDismiss:me,className:[`frak-banner`,`frak-banner--inapp`,g].filter(Boolean).join(` `),classNames:{icon:`frak-banner__icon`,title:`frak-banner__title`,description:`frak-banner__description`,cta:`frak-banner__cta`,close:`frak-banner__close`}}):f(`div`,{class:ge,role:`alert`,children:[f(`div`,{class:`${ue} frak-banner__icon`,children:Q?f(`img`,{src:Q,alt:``,class:de}):f(b,{class:ae})}),f(`div`,{class:`${se} frak-banner__text`,children:[f(`p`,{class:`${fe} frak-banner__title`,children:$.title}),f(`p`,{class:`${le} frak-banner__description`,children:$.description}),f(`button`,{type:`button`,class:`${ce} frak-banner__cta`,onClick:X,children:$.cta})]}),f(y,{class:`${ie} frak-banner__logo`,width:42,height:24})]})}u(M,`frak-banner`,[`placement`,`classname`,`interaction`,`products`,`referralTitle`,`referralDescription`,`referralCta`,`inappTitle`,`inappDescription`,`inappCta`,`preview`,`previewMode`,`imageUrl`,`allowInappRedirect`],{shadow:!1});export{M as Banner};