@frak-labs/components
Version:
Frak Wallet components, helping any person to interact with the Frak wallet.
178 lines • 8.65 kB
JavaScript
import{T as e,b as t,d as n,s as r,u as i,v as a}from"./loader.js";import{a as o,c as s,d as c,i as l,l as u,o as d,s as f,t as ee,u as p}from"./usePlacement.BgMXY5CX.js";import{a as m,i as h,n as g,r as te,t as _}from"./GiftIcon.eRNTGQ_r.js";import{t as v}from"./useGlobalComponents.TG9kIYSc.js";import{t as ne}from"./useLightDomStyles.tjNBKcOr.js";import{t as re}from"./useReward.BtBpuMwt.js";var y=`inAppBanner_body__1ibpiy75`,b=`inAppBanner_closeButton__1ibpiy78`,x=`inAppBanner_container__1ibpiy71`,S=`inAppBanner_cta__1ibpiy77`,C=`inAppBanner_description__1ibpiy76`,w=`inAppBanner_header__1ibpiy72`,T=`inAppBanner_iconWrapper__1ibpiy73`,E=`inAppBanner_title__1ibpiy74`;function D({title:e,description:t,cta:n,dismissLabel:r,onAction:i,onDismiss:a,className:o,classNames:s}){return p(`div`,{className:`${x}${o?` ${o}`:``}`,role:`alert`,children:[p(`div`,{className:w,children:[p(`span`,{className:`${T}${s?.icon?` ${s.icon}`:``}`,children:p(g,{width:20,height:20})}),p(`p`,{className:`${E}${s?.title?` ${s.title}`:``}`,children:e})]}),p(`div`,{className:y,children:[p(`p`,{className:`${C}${s?.description?` ${s.description}`:``}`,children:t}),p(`button`,{type:`button`,className:`${S}${s?.cta?` ${s.cta}`:``}`,onClick:i,children:[n,p(h,{width:14,height:14})]})]}),p(`button`,{type:`button`,className:`${b}${s?.close?` ${s.close}`:``}`,onClick:a,"aria-label":r,children:p(m,{width:16,height:16})})]})}var O=`Banner_frakLogo__1gnumzia`,k=`Banner_iconSvg__1gnumzi2`,A=`Banner_referral__1gnumzi3 reset_base__1831jhd0 Banner_rootBase__1gnumzi1`,j=`Banner_referralBody__1gnumzi6`,M=`Banner_referralCta__1gnumzi9 sharedBaseCss_buttonReset__7cswil0`,ie=`Banner_referralDescription__1gnumzi8 reset_base__1831jhd0`,ae=`Banner_referralIconWrapper__1gnumzi4`,N=`Banner_referralImage__1gnumzi5`,P=`Banner_referralTitle__1gnumzi7 reset_base__1831jhd0`;function F({placement:c,classname:m=``,interaction:h,referralTitle:g,referralDescription:y,referralCta:b,inappTitle:x,inappDescription:S,inappCta:C,imageUrl:w,preview:T,previewMode:E,allowInappRedirect:F}){let I=!!T,L=E===`inapp`?`inapp`:`referral`,R=F===!0||F===`true`,z=ee(c),{shouldRender:B,isHidden:V,isClientReady:H}=l();ne(`frak-banner`,c,z?.components?.banner?.css,`@keyframes inAppBanner_fadeIn__1ibpiy70 {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.inAppBanner_container__1ibpiy71 {
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: #ffffff;
animation: inAppBanner_fadeIn__1ibpiy70 300ms ease-out;
}
.inAppBanner_header__1ibpiy72 {
display: flex;
align-items: center;
gap: 8px;
}
.inAppBanner_iconWrapper__1ibpiy73 {
flex-shrink: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
}
.inAppBanner_title__1ibpiy74 {
margin: 0;
padding: 0;
font-size: 16px;
font-weight: 500;
line-height: 26px;
color: var(--text-onAction__pbq4ak6);
}
.inAppBanner_body__1ibpiy75 {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 4px;
}
.inAppBanner_description__1ibpiy76 {
margin: 0;
padding: 0;
font-size: 14px;
color: var(--text-onAction__pbq4ak6);
line-height: 22px;
opacity: 0.96;
}
.inAppBanner_cta__1ibpiy77 {
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__1ibpiy77:focus-visible {
outline: 2px solid #2BB2FF;
outline-offset: 2px;
border-radius: 4px;
}
.inAppBanner_closeButton__1ibpiy78 {
all: unset;
position: absolute;
top: 8px;
right: 8px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
}
.inAppBanner_closeButton__1ibpiy78:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}@keyframes Banner_fadeIn__1gnumzi0 {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.Banner_rootBase__1gnumzi1 {
position: relative;
display: flex;
animation: Banner_fadeIn__1gnumzi0 300ms ease-out;
}
.Banner_iconSvg__1gnumzi2 {
width: 100%;
height: 100%;
}
.Banner_referral__1gnumzi3 {
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__1gnumzi4 {
flex-shrink: 0;
align-self: flex-start;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
overflow: hidden;
}
.Banner_referralImage__1gnumzi5 {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.Banner_referralBody__1gnumzi6 {
flex: 1;
min-width: 0;
}
.Banner_referralTitle__1gnumzi7 {
font-size: 16px;
font-weight: 600;
color: var(--text-primary__pbq4ak0);
line-height: 22px;
}
.Banner_referralDescription__1gnumzi8 {
margin-bottom: 8px;
font-size: 14px;
color: #979797;
line-height: 22px;
}
.Banner_referralCta__1gnumzi9 {
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__1gnumzia {
position: absolute;
right: 16px;
bottom: 12px;
pointer-events: none;
}`,e);let[U,W]=f(!1),[G,K]=f(()=>I?L:R&&a?`inapp`:null),q=o(null);u(()=>{I&&K(L)},[I,L]);let{reward:J}=re(G===`referral`&&H,h),[Y,X]=f(null);u(()=>{let e=window.FrakSetup?.client;G!==`inapp`||I||!H||!e||r(e).then(e=>X(e)).catch(()=>{})},[G,I,H]),u(()=>{I||!G||U||q.current!==G&&H&&(t(window.FrakSetup?.client,`banner_impression`,{placement:c,variant:G,has_reward:G===`referral`?!!J:void 0}),q.current=G)},[G,U,H,I,c]),u(()=>{if(I||G===`inapp`)return;let e=()=>K(`referral`);return window.addEventListener(i,e),()=>window.removeEventListener(i,e)},[I,G]);let Z=s(async()=>{if(I)return;if(t(window.FrakSetup?.client,`banner_resolved`,{placement:c,variant:G??`referral`,outcome:`clicked`}),G===`referral`){W(!0);return}let e=Y;if(!e&&window.FrakSetup?.client)try{e=await r(window.FrakSetup?.client)}catch{}let i=window.location.href;if(e){let t=new URL(i);t.searchParams.set(`fmt`,e),i=t.toString()}n(i)},[I,G,Y,c]),oe=s(()=>{I||(t(window.FrakSetup?.client,`banner_resolved`,{placement:c,variant:G??`referral`,outcome:`dismissed`}),W(!0))},[I,G,c]),se=v(),Q=z?.components?.banner??se?.banner,$=d(()=>{if(G===`referral`){let e=J?`Earn ${J} on purchases on this site`:`You've been referred!`;return{title:g??Q?.referralTitle??e,description:y??Q?.referralDescription??`Earn rewards after your purchase via the Frak partner app.`,cta:b??Q?.referralCta??`Got it`}}return{title:x??Q?.inappTitle??`Open in your browser`,description:S??Q?.inappDescription??`For a better experience and to earn your rewards, open this page in your default browser.`,cta:C??Q?.inappCta??`Open browser`}},[G,J,Q,g,y,b,x,S,C]);if(!G||!I&&(!B||V||U))return null;let ce=[A,`frak-banner`,`frak-banner--${G}`,m].filter(Boolean).join(` `);return G===`inapp`?p(D,{title:$.title,description:$.description,cta:$.cta,dismissLabel:`Dismiss`,onAction:Z,onDismiss:oe,className:[`frak-banner`,`frak-banner--inapp`,m].filter(Boolean).join(` `),classNames:{icon:`frak-banner__icon`,title:`frak-banner__title`,description:`frak-banner__description`,cta:`frak-banner__cta`,close:`frak-banner__close`}}):p(`div`,{class:ce,role:`alert`,children:[p(`div`,{class:`${ae} frak-banner__icon`,children:w?p(`img`,{src:w,alt:``,class:N}):p(_,{class:k})}),p(`div`,{class:`${j} frak-banner__text`,children:[p(`p`,{class:`${P} frak-banner__title`,children:$.title}),p(`p`,{class:`${ie} frak-banner__description`,children:$.description}),p(`button`,{type:`button`,class:`${M} frak-banner__cta`,onClick:Z,children:$.cta})]}),p(te,{class:`${O} frak-banner__logo`,width:42,height:24})]})}c(F,`frak-banner`,[`placement`,`classname`,`interaction`,`referralTitle`,`referralDescription`,`referralCta`,`inappTitle`,`inappDescription`,`inappCta`,`preview`,`previewMode`,`imageUrl`,`allowInappRedirect`],{shadow:!1});export{F as Banner};