@frak-labs/components
Version:
Frak Wallet components, helping any person to interact with the Frak wallet.
1 lines • 7.38 kB
JavaScript
import e from"preact-custom-element";import{DebugInfoGatherer as t,formatAmount as n,getCurrencyAmountKey as o,setupClient as r,trackEvent as a}from"@frak-labs/core-sdk";import{displayEmbeddedWallet as i,getProductInformation as l,modalBuilder as d,referralInteraction as s}from"@frak-labs/core-sdk/actions";import{Fragment as c,jsx as u,jsxs as p}from"preact/jsx-runtime";import{cx as f}from"class-variance-authority";import{useCallback as m,useEffect as w,useMemo as g,useState as k}from"preact/hooks";import{FrakRpcError as h,RpcErrorCodes as S}from"@frak-labs/frame-connector";import*as y from"@frak-labs/core-sdk/bundle";let b="frakClientReady";function F(e,t){if(window.FrakSetup?.client&&"add"===e)return void t();("add"===e?window.addEventListener:window.removeEventListener)(b,t,!1)}async function v(e){console.log("referral",await s(e,{modalConfig:window.FrakSetup?.modalWalletConfig}))}async function x(){if(window.FrakSetup.core=y,!(window.frakSetupInProgress?(console.log("[Frak SDK] Initialization already in progress"),!1):window.FrakSetup?.client?(console.log("[Frak SDK] Client already initialized"),!1):!!window.FrakSetup?.config||(console.error("[Frak SDK] Configuration not found. Please ensure window.FrakSetup.config is set."),!1)))return;if(console.log("[Frak SDK] Starting initialization"),window.frakSetupInProgress=!0,!window.FrakSetup.config){console.error("[Frak SDK] Configuration not found"),window.frakSetupInProgress=!1;return}let e=await r({config:window.FrakSetup.config});if(!e){console.error("[Frak SDK] Failed to create client"),window.frakSetupInProgress=!1;return}window.FrakSetup.client=e,console.log("[Frak SDK] Client initialized successfully");let t=new CustomEvent(b);window.dispatchEvent(t),window.modalBuilderSteps=d(e,window.FrakSetup?.modalConfig??{}),v(e),window.frakSetupInProgress=!1,function(){let e=new URLSearchParams(window.location.search).get("frakAction");e&&"share"===e&&(console.log("[Frak SDK] Auto open query param found"),function(){if(!window.FrakSetup?.client)return console.error("Frak client not found");"vibrate"in navigator?navigator.vibrate(10):console.log("Vibration not supported"),i(window.FrakSetup.client,window.FrakSetup?.modalWalletConfig??{})}())}()}let C="spinner__leaf-xtOJmT",D=({ref:e,className:t,...n})=>p("span",{...n,ref:e,className:f("spinner-KHk8mw"),children:[u("span",{className:C}),u("span",{className:C}),u("span",{className:C}),u("span",{className:C}),u("span",{className:C}),u("span",{className:C}),u("span",{className:C}),u("span",{className:C})]});async function E({targetInteraction:e}){let t=window.FrakSetup?.client;if(!t)return void console.warn("Frak client not ready yet");let{maxReferrer:r,rewards:a}=await l(t);if(!r)return;let i=o(t.config.metadata?.currency),d=Math.round(r[i]);if(e){let t=a.filter(t=>t.interactionTypeKey===e).map(e=>e.referrer[i]).reduce((e,t)=>t>e?t:e,0);t>0&&(d=Math.round(t))}return n(d,t.config.metadata?.currency)}D.displayName="Spinner";let I={marginTop:"16px",padding:"16px",backgroundColor:"#FEE2E2",border:"1px solid #FCA5A5",borderRadius:"4px",color:"#991B1B"},B={display:"flex",alignItems:"center",gap:"8px",marginBottom:"12px"},N={margin:0,fontSize:"16px",fontWeight:500},R={fontSize:"14px",lineHeight:"1.5",margin:"0 0 12px 0"},z={color:"#991B1B",textDecoration:"underline",textUnderlineOffset:"2px"},K={display:"inline-flex",alignItems:"center",gap:"8px",marginBottom:"10px",padding:"8px 12px",backgroundColor:"white",border:"1px solid #D1D5DB",borderRadius:"4px",color:"black",fontSize:"14px",fontWeight:500};function W({debugInfo:e}){let[t,n]=k(!1);return p("div",{children:[u("button",{type:"button",style:K,onClick:()=>n(!t),children:"Ouvrir les informations"}),t&&u("textarea",{style:{display:"block",width:"100%",height:"200px",fontSize:"12px"},children:e})]})}function A({debugInfo:e}){let{copied:t,copy:n}=function(e={}){let{successDuration:t=2e3}=e,[n,o]=k(!1);return{copy:m(async e=>{try{if(navigator.clipboard&&window.isSecureContext)await navigator.clipboard.writeText(e),o(!0);else{let t=document.createElement("textarea");t.value=e,t.style.position="fixed",t.style.opacity="0",document.body.appendChild(t),t.focus(),t.select();try{document.execCommand("copy"),o(!0)}catch(e){return console.error("Failed to copy text:",e),!1}finally{t.remove()}}return setTimeout(()=>{o(!1)},t),!0}catch(e){return console.error("Failed to copy text:",e),!1}},[t]),copied:n}}();return p("div",{style:I,children:[u("div",{style:B,children:u("h3",{style:N,children:"Oups ! Nous avons rencontr\xe9 un petit probl\xe8me"})}),p("p",{style:R,children:["Impossible d'ouvrir le menu de partage pour le moment. Si le probl\xe8me persiste, copiez les informations ci-dessous et collez-les dans votre mail \xe0"," ",u("a",{href:"mailto:help@frak-labs.com?subject=Debug",style:z,children:"help@frak-labs.com"})," ",u("br",{}),"Merci pour votre retour, nous traitons votre demande dans les plus brefs d\xe9lais."]}),u("button",{type:"button",onClick:()=>n(e??""),style:K,children:t?"Informations copi\xe9es !":"Copier les informations de d\xe9bogage"}),u(W,{debugInfo:e})]})}async function P(){if(!window.FrakSetup?.client)throw Error("Frak client not found");await i(window.FrakSetup.client,window.FrakSetup?.modalWalletConfig??{})}function L({text:e="Share and earn!",classname:n="",useReward:o,noRewardText:r,targetInteraction:i,showWallet:l}){let d=g(()=>void 0!==o,[o]),s=g(()=>void 0!==l,[l]),{isClientReady:y}=function(){let[e,t]=k(!0),n=m(()=>{t(!1)},[]);return w(()=>(F("add",n),()=>F("remove",n)),[n]),{isClientReady:!e}}(),{reward:b}=function(e,t){let[n,o]=k(void 0);return w(()=>{e&&E({targetInteraction:t}).then(e=>{e&&o(e)})},[e,t]),{reward:n}}(d&&y,i),{handleShare:v,isError:x,debugInfo:C}=function(e){let[n,o]=k(void 0),[r,i]=k(!1);return{handleShare:m(async()=>{if(!window.FrakSetup?.client){console.error("Frak client not found"),o(t.empty().formatDebugInfo("Frak client not found")),i(!0);return}let n=function(){if(!window.modalBuilderSteps)throw Error("modalBuilderSteps not found");return window.modalBuilderSteps}();if(!n)throw Error("modalBuilderSteps not found");try{await n.sharing(window.FrakSetup?.modalShareConfig??{}).display(t=>({...t,targetInteraction:e}))}catch(t){if(t instanceof h&&t.code===S.clientAborted)return void console.debug("User aborted the modal");let e=window.FrakSetup.client.debugInfo.formatDebugInfo(t);a(window.FrakSetup.client,"share_modal_error",{error:t instanceof Object&&"message"in t?t.message:"Unknown error",debugInfo:e}),o(e),i(!0),console.error("Error while opening the modal",t)}},[e]),isError:r,debugInfo:n}}(i),I=g(()=>d?b?e.includes("{REWARD}")?e.replace("{REWARD}",b):`${e} ${b}`:r??e.replace("{REWARD}",""):e,[d,e,r,b]),B=m(async()=>{a(window.FrakSetup.client,"share_button_clicked"),s?await P():await v()},[s,v]);return p(c,{children:[p("button",{type:"button",className:f("buttonShare-F23Y9m",n,"override"),onClick:B,children:[!y&&u(D,{})," ",I]}),x&&u(A,{debugInfo:C})]})}!function(t,n,o=[],r={shadow:!1}){"undefined"!=typeof window&&("complete"===document.readyState||"interactive"===document.readyState?setTimeout(x,1):document.addEventListener?document.addEventListener("DOMContentLoaded",x):document.attachEvent("onreadystatechange",()=>{"complete"===document.readyState&&x()}),customElements.get(n)||e(t,n,o,r))}(L,"frak-button-share",["text"],{shadow:!1});export{L as ButtonShare};