@dcl/shop 1.4.2-31322163896.commit-c11a5d7 → 1.4.2-31322494096.commit-984acea

package/_assets/Assets-DNZmp0kB.js

@@ -0,0 +1,921 @@
+import{r as u,b as Ue,j as e,u as et}from"./react-BYHuwl8r.js";import{u as tt}from"./useUrlFilters-DH-gxdfV.js";import{u as nt,S as _e,R as st,F as it,e as ot}from"./categories-Daeah9jY.js";import{c as q,r as at,aK as rt,aL as lt,aR as ct,a as dt,l as ht,ch as pt,ci as ut,s,t,v as Oe,aA as mt,D as ft,L as Ce,b as n,z as xt,I as E,A as O,cj as le,ax as gt,Z as oe,aH as Me,aP as yt,aO as bt,y as Ge,an as De,q as Ze,w as wt,ac as Ct,ap as Fe,aq as J,aZ as vt,bD as jt}from"./index-4l5lQG6P.js";import{R as $t,S as kt,a as St,D as Et,b as Tt,C as Lt,c as Rt,F as _t,d as Mt,e as Ft,M as Nt,u as At,g as It,v as zt,E as Bt,h as Wt,f as Pt,i as Ht,j as Ut}from"./Assets.styles-BOAoaKYw.js";import{L as Ot}from"./LoadMore-CWOcL7-R.js";import{u as Gt}from"./useInfiniteGrid-C2jLQlnX.js";import{E as Dt}from"./ErrorNotice-D_pEmaKa.js";import{d as Zt}from"./dcl-schemas-CmtP3U6y.js";import{s as qt,G as Vt,w as Kt,S as Qt}from"./buy-gasless-Ce4W7rkQ.js";import{s as Jt,j as Xt}from"./buy-BufCe-jB.js";import{f as Yt}from"./errors-X12fPjsF.js";import{J as en,C as tn,B as ve}from"./ethers-BW12Sk6C.js";import{n as nn}from"./Tooltip-Crq74Yk1.js";import{G as sn}from"./grid.styles-rSbKZ0v1.js";import"./skeleton.styles-aYFCDYET.js";import"./sentry-CSXKq8As.js";import"./intl-CBcMB1D2.js";import"./authorizations-hJkxcnlY.js";import"./sendMetaTransaction-CAjsqDgk.js";function X(i){const a=i.source??"item",o=i.tradeId||`${i.contractAddress}-${i.tokenId??i.itemId??""}`;return`${a}:${o}`}const V="100000000000000000000",qe=2,ae=15,on=/^[a-zA-Z0-9]+$/;function Ne(i){const a=i.trim();return a.length===0?{ok:!1,reason:"empty"}:on.test(a)?a.length<qe?{ok:!1,reason:"too-short"}:a.length>ae?{ok:!1,reason:"too-long"}:{ok:!0}:{ok:!1,reason:"invalid-chars"}}function an(i){return i.replace(/[^a-zA-Z0-9]/g,"").slice(0,ae)}const rn=["function available(string _subdomain) view returns (bool)"],Ae={mainnet:{rpc:"https://rpc.decentraland.org/mainnet",address:"0x2a187453064356c898cae034eaed119e1663acb8"},sepolia:{rpc:"https://rpc.decentraland.org/sepolia",address:"0x7518456ae93eb98f3e64571b689c626616bb7f30"}};function ln(){return q.chainId===Number(Zt.ChainId.MATIC_MAINNET)?Ae.mainnet:Ae.sepolia}async function cn(i,a={}){var f;const{rpc:o,address:d}=ln(),h=new en(o),m=new tn(d,rn,h);console.info(`[names] availability check → DCLRegistrar(${d}).available("${i}") on ${o}`);const l=await m.available(i);if((f=a.signal)!=null&&f.aborted)throw new DOMException("Aborted","AbortError");return console.info(`[names] "${i}" available=${l}`),l?"available":"taken"}const dn="https://app.across.to/api";class ke extends Error{constructor(){super("Name registration is temporarily unavailable due to high network costs"),this.name="NameRouteCostTooHighError"}}class je extends Error{constructor(){super("The name could not be registered on Ethereum; your funds were recovered."),this.name="NameNotRegisteredError"}}class $e extends Error{constructor(){super("We couldn't confirm whether the purchase went through."),this.name="NameSettlementUnknownError"}}function hn(i){return ct(V,i)}async function pn(i,a,o={}){var f;const d=o.chainId??q.chainId,h=o.provider??"across",m=`${q.creditsServerUrl}/credits-name-route?name=${encodeURIComponent(a)}&chainId=${d}&provider=${h}`,l=await dt(m,{method:"GET",identity:i,metadata:{}});if(!l.ok){let c;try{c=(f=await l.json())==null?void 0:f.code}catch{}throw c==="ROUTE_COST_TOO_HIGH"?new ke:new Error(`fetchNameCreditRoute ${l.status}`)}return l.json()}function un(i,a){const o=ve.from(i.availableAmount),h=ve.from(V).sub(o);return{credits:[{value:i.amount,expiresAt:Number(i.expiresAt),salt:Xt(i.id)}],creditsSignatures:[i.signature],externalCall:{target:a.externalCall.target,selector:a.externalCall.selector,data:a.externalCall.data,expiresAt:a.externalCall.expiresAt,salt:a.externalCall.salt},customExternalCallSignature:a.customExternalCallSignature,maxUncreditedValue:h.isNegative()?"0":h.toString(),maxCreditedValue:V}}async function mn(i,a={}){const o=dn,d=a.intervalMs??1e4,h=a.maxAttempts??60;let m={status:"pending",destinationTxHash:null,actionsSucceeded:null};for(let l=0;l<h;l++){try{const f=await fetch(`${o}/deposit/status?originChainId=137&depositTxHash=${i}`);if(f.ok){const c=await f.json(),g=(c.status??"pending").toLowerCase(),p=c.fillTx??c.fillTxnRef??null,y=typeof c.actionsSucceeded=="boolean"?c.actionsSucceeded:null;if(g==="filled")return{status:"filled",destinationTxHash:p,actionsSucceeded:y};if(g==="refunded"||g==="expired")return{status:g,destinationTxHash:null,actionsSucceeded:!1};m={status:"pending",destinationTxHash:p,actionsSucceeded:y}}}catch{}l<h-1&&await new Promise(f=>setTimeout(f,d))}return m}async function fn(i){const{name:a,identity:o,signer:d}=i,h=p=>{var y;try{(y=i.onProgress)==null||y.call(i,p)}catch{}},m=i.chainId??q.chainId,l=i.provider??"across",f=(i.beneficiary??await d.getAddress()).toLowerCase();let c=null,g="unconfirmed";console.info("[names] register start",{name:a,buyer:f,chainId:m,provider:l}),h("preparing");try{const p=await at(m),y=hn(p);console.info("[names] step 1/6 sized reservation",{usdCents:y,manaRate:p});const j=await pn(o,a,{chainId:m,provider:l});console.info("[names] step 2/6 route fetched",{target:j.externalCall.target,selector:j.externalCall.selector,provider:j.provider,quoteId:j.quoteId});const w=await rt(o,y);if(c=w.credit.id,console.info("[names] step 3/6 credit authorized",{creditId:w.credit.id,maxCreditedValue:w.maxCreditedValue}),ve.from(w.maxCreditedValue).lt(V))throw new Error("Credit under-sized for the name price");h("awaiting-confirmation");const $=un(w.credit,j);let C;try{C=await qt({chainId:m,buyer:f,signer:d,args:$})}catch(x){if(!(x instanceof Vt))throw x;if(x.reason==="relayer-unreachable"){g="unobservable";const k=new $e;throw k.cause=x,k}C=await Jt(m,$,d)}if(console.info("[names] step 4/6 useCredits submitted (Polygon origin tx)",{originTxHash:C}),h("confirming"),await Kt(C),g="confirmed",console.info("[names] step 5/6 origin tx confirmed",{originTxHash:C}),l==="across"){h("registering");const x=await mn(C,i.acrossPoll);if(console.info("[names] step 6/6 across status",x),x.status==="pending")return{status:"pending",originTxHash:C};if(x.status==="filled"&&x.actionsSucceeded===null)return console.warn("[names] across filled without reporting actionsSucceeded — reporting pending",{originTxHash:C}),{status:"pending",originTxHash:C};if(x.status!=="filled"||x.actionsSucceeded!==!0)throw new je;return{status:"registered",originTxHash:C,destinationTxHash:x.destinationTxHash}}return{status:"pending",originTxHash:C}}catch(p){if(console.error("[names] register failed — raw error:",p,{name:a,buyer:f,originState:g}),p instanceof Qt)return{status:"pending",originTxHash:p.txHash};if(c&&g==="unconfirmed"&&await lt(o,[c]).catch(()=>{}),p instanceof ke||p instanceof je||p instanceof $e)throw p;const y=new Error(Yt(p,"Couldn't register the name. Please try again.",{sale:!0}));throw y.cause=p,y}}function xn(){const{data:i}=ht({queryKey:["feature-flag","shop-names"],queryFn:()=>pt(ut.SHOP_NAMES),staleTime:6e4,refetchOnWindowFocus:!0,retry:1});return i===!0}const gn=60,yn=700,bn=25;function wn(i){if(!i)return[];const a=[];for(let o=1;o<=i.length;o++)a.push({text:i.slice(0,o),delay:gn});a[a.length-1]={text:i,delay:yn};for(let o=i.length-1;o>=1;o--)a.push({text:i.slice(0,o),delay:bn});return a}function Cn(i){return i.flatMap(wn)}function vn(i,a){const o=u.useMemo(()=>Cn(i),[i]),[d,h]=u.useState(0);return u.useEffect(()=>{if(!a||o.length===0)return;const m=setTimeout(()=>h(l=>(l+1)%o.length),o[d%o.length].delay);return()=>clearTimeout(m)},[d,a,o]),!a||o.length===0?"":o[d%o.length].text}const jn="data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='46.999'%20height='46.999'%20viewBox='0%200%2046.999%2046.999'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Vector'%3e%3cpath%20d='M23.5861%2046.999C27.4441%2046.999%2031.1266%2046.1286%2034.3708%2044.475H12.8014C16.0456%2046.1286%2019.6405%2046.999%2023.5861%2046.999Z'%20fill='%23FCFCFC'%20fill-opacity='0.6'/%3e%3cpath%20d='M8.76807%2041.9509H38.1411C39.1056%2041.1676%2040.1577%2040.2102%2040.7715%2039.514H6.13765C7.01445%2040.3843%207.89126%2041.2547%208.76807%2041.9509Z'%20fill='%23FCFCFC'%20fill-opacity='0.6'/%3e%3cpath%20d='M25.0767%2034.0307H2.2797C2.80578%2035.0752%203.41955%2036.0326%204.03331%2036.9899H22.5339L25.0767%2034.0307Z'%20fill='%23FCFCFC'%20fill-opacity='0.6'/%3e%3cpath%20d='M23.5861%200C10.6094%200%200%2010.4442%200%2023.4125C0%2026.2846%200.526084%2029.0697%201.49057%2031.5938L10.6094%2020.7144L15.8702%2014.3608L28.6716%2029.679L32.3542%2025.2402L41.999%2036.7288H42.7882C45.5063%2032.8993%2046.9968%2028.2864%2046.9968%2023.3254C47.1722%2010.4442%2036.5628%200%2023.5861%200ZM15.7825%2012.272C13.9412%2012.272%2012.5383%2010.7924%2012.5383%209.05166C12.5383%207.31095%2014.0289%205.83136%2015.7825%205.83136C17.6238%205.83136%2019.0267%207.31095%2019.0267%209.05166C19.0267%2010.7924%2017.6238%2012.272%2015.7825%2012.272ZM32.8803%2022.8032C29.2853%2022.8032%2026.3919%2019.931%2026.3919%2016.3626C26.3919%2012.7942%2029.2853%209.92201%2032.8803%209.92201C36.4752%209.92201%2039.3686%2012.7942%2039.3686%2016.3626C39.4563%2019.931%2036.4752%2022.8032%2032.8803%2022.8032Z'%20fill='%23FCFCFC'%20fill-opacity='0.6'/%3e%3cpath%20d='M16.484%2018.7126V31.6808H27.2687L16.484%2018.7126Z'%20fill='%23FCFCFC'%20fill-opacity='0.6'/%3e%3cpath%20d='M33.1433%2037.164H39.2809L33.1433%2029.766V37.164Z'%20fill='%23FCFCFC'%20fill-opacity='0.6'/%3e%3c/g%3e%3c/svg%3e",$n="https://cdn.decentraland.org/@dcl/shop/1.4.2-31322494096.commit-984acea/_assets/name-verified-oGwQ3ntb.svg",kn="#34fee6",Sn=s.div`
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  background: rgba(22, 21, 24, 0.55);
+`,En=s.div`
+  width: 560px;
+  max-width: 100%;
+  max-height: 92vh;
+  overflow-y: auto;
+  background: ${t.colors.white};
+  border-radius: 16px;
+  padding: 20px 24px 24px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
+
+  ${t.media.maxWidth("mobile")} {
+    padding: 16px;
+  }
+`,ce=s.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+`,de=s.h2`
+  margin: 0;
+  font-family: ${t.font.sans};
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1.6;
+  color: ${t.colors.text};
+`,he=s.button`
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  color: ${t.colors.text};
+
+  .ico {
+    width: 18px;
+    height: 18px;
+  }
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+  &:focus-visible {
+    outline: 2px solid ${t.colors.accent};
+    outline-offset: 2px;
+  }
+`,pe=s.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  font-family: ${t.font.sans};
+  font-size: 14px;
+  color: ${t.colors.text2};
+
+  .ico {
+    width: 16px;
+    height: 16px;
+    color: ${t.colors.brandViolet};
+  }
+`,ue=s.hr`
+  border: 0;
+  border-top: 1px solid ${t.colors.line};
+  margin: 16px 0;
+`,me=s.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`,Tn=s.div`
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  width: 137px;
+  height: 137px;
+  padding: 20px 0;
+  border-radius: 12px;
+  overflow: hidden;
+  background: ${t.gradients.amethyst};
+`,Ln=s.img`
+  display: block;
+  width: 47px;
+  height: 47px;
+`,Rn=s.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 100%;
+  padding: 0 8px;
+  font-family: ${t.font.sans};
+  font-size: 18px;
+  font-weight: 600;
+  /* The design's cyan — it has to read against the purple, which the body text colour would not. */
+  color: ${kn};
+  white-space: nowrap;
+  overflow: hidden;
+
+  /* Truncation belongs on the flex item, not this box: text-overflow is inert on a flex container, and
+     the zero min-width is what lets the name shrink instead of pushing the tick out. */
+  > span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`,_n=s.img`
+  flex: none;
+  display: block;
+  width: 14px;
+  height: 14px;
+`,Ie=s.div`
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 10px;
+  background: ${t.gradients.amethyst};
+  color: ${t.colors.white};
+
+  .ico {
+    width: 30px;
+    height: 30px;
+  }
+`,fe=s.div`
+  flex: 1;
+  min-width: 0;
+`,xe=s.div`
+  font-family: ${t.font.sans};
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1.3;
+  color: ${t.colors.text};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  span {
+    font-weight: 400;
+    color: ${t.colors.muted2};
+  }
+`,ge=s.div`
+  font-family: ${t.font.sans};
+  font-size: 14px;
+  color: ${t.colors.muted2};
+`,ye=s.div`
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: ${t.font.sans};
+  font-weight: 600;
+  font-size: 24px;
+  color: ${t.colors.text};
+
+  .ico {
+    width: 22px;
+    height: 22px;
+    color: ${t.colors.brandViolet};
+  }
+`,Mn=s.div`
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: 12px;
+  background: ${t.colors.promptLilac};
+`,Fn=s.div`
+  font-family: ${t.font.sans};
+  font-weight: 700;
+  font-size: 16px;
+  color: ${t.colors.text};
+`,Nn=s.p`
+  margin: 8px 0 16px;
+  font-family: ${t.font.sans};
+  font-size: 14px;
+  line-height: 1.5;
+  color: ${t.colors.text2};
+
+  /* The chosen NAME is filled with the gradient the design runs through it (1356:335140), not a flat
+     violet — background-clip is the only way to paint a text run with one. */
+  b {
+    font-weight: 700;
+    background: linear-gradient(180deg, ${t.colors.dclRed}, ${t.colors.magenta});
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+`,An=s.label`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 14px;
+  background: ${t.colors.softWhite};
+  /* A hairline in Gray 2, not a full pixel of soft-black: this field sits INSIDE the lilac panel and
+     the heavier edge made it read as the modal's primary control (Figma 1356:335172). */
+  border: 0.5px solid ${t.colors.muted};
+  border-radius: 8px;
+  cursor: text;
+
+  &:focus-within {
+    border-color: ${t.colors.magenta};
+  }
+`,In=s.span`
+  flex: none;
+  font-family: ${t.font.sans};
+  font-size: 18px;
+  color: ${t.colors.muted2};
+`,zn=s.input`
+  flex: 0 1 auto;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-family: ${t.font.sans};
+  font-size: 16px;
+  font-weight: 600;
+  color: ${t.colors.text};
+
+  &::placeholder {
+    color: ${t.colors.muted2};
+    font-weight: 400;
+  }
+`,Bn=s.span`
+  flex: none;
+  font-family: ${t.font.sans};
+  font-size: 16px;
+  color: ${t.colors.muted2};
+`,be=s.button`
+  margin-top: 16px;
+  width: 100%;
+  height: 46px;
+  border: 0;
+  border-radius: 12px;
+  cursor: pointer;
+  background: ${t.gradients.buyBtn};
+  color: ${t.colors.softWhite};
+  font-family: ${t.font.sans};
+  font-weight: 600;
+  font-size: 15px;
+  letter-spacing: 0.46px;
+  text-transform: uppercase;
+  transition: background-image 0.15s ease;
+
+  /* Both ends stay on background-IMAGE: a gradient cannot interpolate to a plain colour, so swapping
+     the shorthand instead blanks the button for the length of the transition. */
+  &:hover:not(:disabled),
+  &:active:not(:disabled) {
+    background-image: linear-gradient(${t.colors.dclRed}, ${t.colors.dclRed});
+  }
+  &:focus-visible {
+    outline: 2px solid ${t.colors.accent};
+    outline-offset: 2px;
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`,Wn=s.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  padding: 32px 0 8px;
+`,Pn=s.img`
+  width: 61px;
+  height: 61px;
+`,Hn=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+`,Un=s.div`
+  font-family: ${t.font.sans};
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1.6;
+  color: ${t.colors.text2};
+  text-align: center;
+`,On=s.p`
+  max-width: 400px;
+  font-family: ${t.font.sans};
+  font-size: 14px;
+  line-height: 1.57;
+  color: ${t.colors.muted};
+  text-align: center;
+`,Gn=s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+`,Dn=s.div`
+  flex: 1;
+  max-width: 400px;
+  height: 10px;
+  border-radius: 100px;
+  background: rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  span {
+    display: block;
+    height: 100%;
+    width: 33%;
+    border-radius: 100px;
+    background: ${t.gradients.buyBtn};
+    animation: nameProgress 1.1s ease-in-out infinite;
+  }
+
+  @keyframes nameProgress {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(320%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    span {
+      width: 33%;
+      animation: none;
+    }
+  }
+`,Zn=s.span`
+  flex: none;
+  font-family: ${t.font.sans};
+  font-size: 16px;
+  line-height: 22px;
+  color: ${t.colors.text2};
+`,qn=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  border-radius: 12px;
+  background: #e2f5ea;
+  text-align: center;
+`,Vn=s.div`
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: ${t.colors.ok};
+  color: ${t.colors.white};
+
+  .ico {
+    width: 30px;
+    height: 30px;
+  }
+`,Kn=s.p`
+  margin: 0;
+  font-family: ${t.font.sans};
+  font-size: 16px;
+  line-height: 1.4;
+  color: ${t.colors.text};
+
+  b {
+    font-weight: 700;
+  }
+`,ze=s.div`
+  display: flex;
+  gap: 16px;
+  margin-top: 20px;
+
+  ${t.media.maxWidth("mobile")} {
+    flex-direction: column;
+  }
+`,Be=s.button`
+  flex: 1;
+  height: 48px;
+  border: 1px solid ${t.colors.accent};
+  border-radius: 8px;
+  background: ${t.colors.white};
+  color: ${t.colors.accent};
+  cursor: pointer;
+  font-family: ${t.font.sans};
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.46px;
+  text-transform: uppercase;
+
+  &:hover {
+    background: rgba(105, 31, 169, 0.06);
+  }
+  &:focus-visible {
+    outline: 2px solid ${t.colors.accent};
+    outline-offset: 2px;
+  }
+`,Qn=s.a`
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  border-radius: 8px;
+  background: ${t.colors.dclRed};
+  color: ${t.colors.softWhite};
+  cursor: pointer;
+  text-decoration: none;
+  font-family: ${t.font.sans};
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.46px;
+  text-transform: uppercase;
+
+  &:hover {
+    filter: brightness(1.05);
+  }
+  &:focus-visible {
+    outline: 2px solid ${t.colors.accent};
+    outline-offset: 2px;
+  }
+`,we=s.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  margin-top: 8px;
+  border-radius: 12px;
+  background: rgba(255, 45, 85, 0.1);
+  font-family: ${t.font.sans};
+  font-size: 14px;
+  line-height: 1.5;
+  color: ${t.colors.text};
+
+  .ico {
+    width: 22px;
+    height: 22px;
+    flex: none;
+    color: ${t.colors.dclRed};
+  }
+
+  /**
+   * Informational, not a failure. Used for "your payment went through, the NAME is on its way" and for the
+   * reason a purchase is not available yet (no price, not enough credits) — none of which is an error, and
+   * all of which would contradict themselves rendered in the red error treatment.
+   */
+  &[data-tone='info'] {
+    background: ${t.colors.panel};
+
+    .ico {
+      color: ${t.colors.accent};
+    }
+  }
+`;function Jn({name:i,priceCredits:a,onClose:o}){const{session:d}=Oe(),{data:h,isError:m}=mt(d),l=ft(),f=Ue(),[c,g]=u.useState("confirm"),[p,y]=u.useState(""),[j,w]=u.useState(null),[$,C]=u.useState(!1),[x,k]=u.useState("preparing"),M=u.useRef(!1),T=p.trim().toLowerCase()===i.toLowerCase(),F=c==="completing",I=a!=null?Ce(a):"—",B=a==null,z=h==null?void 0:h.credits,W=a!=null&&z!=null?a-z:0,S=W>0,P=B?n("names.priceUnavailable"):S?n("names.insufficientCredits",{credits:Ce(W)}):null;u.useEffect(()=>{const b=D=>{D.key==="Escape"&&!F&&o()};document.addEventListener("keydown",b);const G=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",b),document.body.style.overflow=G}},[F,o]);async function L(){if(!(!d||!T||B||S||M.current)){M.current=!0,g("completing"),w(null),k("preparing");try{const b=await fn({name:i,identity:d.identity,signer:d.signer,onProgress:k});oe("Shop Completed Purchase",{items:[{item_id:null,contract_address:null,token_id:null,price_usd:Me(a??0),category:"name",is_smart:!1}],purchase_type:"name",is_primary:!0,payment_type:"credits",value_credits:a??null,value_usd:Me(a??0),transaction_hash:b.originTxHash??null,settlement:b.status}),l.invalidateQueries({queryKey:["usd-balance"]}),l.invalidateQueries({queryKey:["my-assets"]}),g(b.status==="registered"?"success":"pending")}catch(b){oe(bt(b)?"Shop Purchase Cancelled":"Shop Purchase Failed",{step:"submit",error_code:yt(b),purchase_type:"name"});const G=b instanceof je,D=b instanceof $e;w(b instanceof ke?n("names.errorRouteCost"):G?n("names.errorNotRegistered"):D?n("names.errorSettlementUnknown"):(b==null?void 0:b.message)||n("names.errorGeneric")),C(G||D),g("error")}finally{M.current=!1}}}const R=c!=="success"&&c!=="pending",v=xt(d==null?void 0:d.providerType),N=v?2:1,A=v&&(x==="preparing"||x==="awaiting-confirmation"),_=A?1:N,re=A?n("names.confirming"):n("names.completing"),H=x==="registering"?n("names.processingRegistering"):null;return e.jsx(Sn,{onClick:F?void 0:o,role:"presentation",children:e.jsxs(En,{role:"dialog","aria-modal":"true","aria-label":n("names.buyTitle"),onClick:b=>b.stopPropagation(),children:[R&&e.jsxs(e.Fragment,{children:[e.jsxs(ce,{children:[e.jsx(de,{children:c==="error"?n("names.errorTitle"):n("names.buyTitle")}),e.jsx(he,{onClick:o,disabled:F,"aria-label":n("buyModal.close"),children:e.jsx(E,{name:"close"})})]}),e.jsxs(pe,{children:[n("names.myCreditsBalance")," ",e.jsx(O,{})," ",le(h,m)]}),e.jsx(ue,{})]}),(c==="confirm"||c==="error")&&e.jsxs(e.Fragment,{children:[e.jsxs(me,{children:[e.jsx(Ie,{"aria-hidden":!0,children:"@"}),e.jsxs(fe,{children:[e.jsxs(xe,{children:[i,e.jsx("span",{children:".dcl.eth"})]}),e.jsx(ge,{children:n("names.subtitle")})]}),e.jsxs(ye,{children:[e.jsx(O,{}),I]})]}),c==="error"?e.jsxs(e.Fragment,{children:[e.jsxs(we,{children:[e.jsx(E,{name:"info","aria-hidden":!0}),e.jsx("span",{children:j})]}),$?e.jsx(be,{onClick:o,children:n("names.errorSpentDismiss")}):e.jsx(be,{onClick:()=>g("confirm"),children:n("names.tryAgain")})]}):e.jsxs(e.Fragment,{children:[e.jsxs(Mn,{children:[e.jsx(Fn,{children:n("names.confirmTitle")}),e.jsx(Nn,{dangerouslySetInnerHTML:{__html:n("names.confirmBody",{name:`<b>@${Xn(i)}</b>`})}}),e.jsxs(An,{children:[e.jsx(In,{"aria-hidden":!0,children:"@"}),e.jsx(zn,{value:p,onChange:b=>y(b.target.value.replace(/[^a-zA-Z0-9]/g,"")),placeholder:"yourname","aria-label":n("names.reenterAria"),autoComplete:"off",spellCheck:!1,style:{width:`${Math.max(p.length,8)}ch`}}),e.jsx(Bn,{children:".dcl.eth"})]})]}),P?e.jsxs(we,{"data-tone":"info","data-testid":"name-blocked-reason",children:[e.jsx(E,{name:"info","aria-hidden":!0}),e.jsx("span",{children:P})]}):null,e.jsx(be,{onClick:()=>void L(),disabled:!T||!d||B||S,children:n("names.buyCta")})]})]}),c==="completing"&&e.jsxs(Wn,{children:[e.jsx(Pn,{src:gt,alt:"",width:61,height:61}),e.jsxs(Hn,{children:[e.jsx(Un,{children:re}),e.jsxs(Gn,{children:[e.jsx(Dn,{"aria-hidden":!0,children:e.jsx("span",{})}),e.jsx(Zn,{"data-testid":"name-progress-count",children:`${_}/${N}`})]}),H?e.jsx(On,{children:H}):null]})]}),c==="pending"&&e.jsxs(e.Fragment,{children:[e.jsxs(ce,{children:[e.jsx(de,{children:n("names.pendingHeaderTitle")}),e.jsx(he,{onClick:o,"aria-label":n("buyModal.close"),children:e.jsx(E,{name:"close"})})]}),e.jsxs(pe,{children:[n("names.myCreditsBalance")," ",e.jsx(O,{})," ",le(h,m)]}),e.jsx(ue,{}),e.jsxs(we,{"data-tone":"info",children:[e.jsx(E,{name:"info","aria-hidden":!0}),e.jsxs("span",{children:[e.jsx("b",{children:n("names.pendingBannerBold")})," ",n("names.pendingBannerRest")]})]}),e.jsxs(me,{style:{marginTop:20},children:[e.jsx(Ie,{"aria-hidden":!0,children:"@"}),e.jsxs(fe,{children:[e.jsxs(xe,{children:[i,e.jsx("span",{children:".dcl.eth"})]}),e.jsx(ge,{children:n("names.subtitle")})]}),e.jsxs(ye,{children:[e.jsx(O,{}),I]})]}),e.jsx(ze,{children:e.jsx(Be,{onClick:()=>{o(),f("/my-items")},children:n("names.myItems")})})]}),c==="success"&&e.jsxs(e.Fragment,{children:[e.jsxs(ce,{children:[e.jsx(de,{children:n("names.successHeaderTitle")}),e.jsx(he,{onClick:o,"aria-label":n("buyModal.close"),children:e.jsx(E,{name:"close"})})]}),e.jsxs(pe,{children:[n("names.myCreditsBalance")," ",e.jsx(O,{})," ",le(h,m)]}),e.jsx(ue,{}),e.jsxs(qn,{children:[e.jsx(Vn,{"aria-hidden":!0,children:e.jsx(E,{name:"check"})}),e.jsxs(Kn,{children:[e.jsx("b",{children:n("names.successBannerBold")})," ",n("names.successBannerRest")]})]}),e.jsxs(me,{style:{marginTop:20},children:[e.jsxs(Tn,{"data-testid":"name-success-tile",children:[e.jsx(Ln,{src:jn,alt:"","aria-hidden":!0,width:47,height:47}),e.jsxs(Rn,{children:[e.jsx("span",{"aria-hidden":!0,children:i}),e.jsx(_n,{src:$n,alt:"","aria-hidden":!0,width:14,height:14})]})]}),e.jsxs(fe,{children:[e.jsxs(xe,{children:[i,e.jsx("span",{children:".dcl.eth"})]}),e.jsx(ge,{children:n("names.subtitle")})]}),e.jsxs(ye,{children:[e.jsx(O,{}),I]})]}),e.jsxs(ze,{children:[e.jsx(Be,{onClick:()=>{o(),f("/my-items")},children:n("names.myItems")}),e.jsx(Qn,{href:q.profileUrl,target:"_blank",rel:"noopener noreferrer",children:n("names.assignToAvatar")})]})]})]})})}function Xn(i){return i.replace(/[&<>"']/g,a=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[a])}const Yn="https://cdn.decentraland.org/@dcl/shop/1.4.2-31322494096.commit-984acea/_assets/identity-icon-C8yAW_Gq.svg",es="https://cdn.decentraland.org/@dcl/shop/1.4.2-31322494096.commit-984acea/_assets/world-icon-6xQ-PmmW.svg",ts="https://cdn.decentraland.org/@dcl/shop/1.4.2-31322494096.commit-984acea/_assets/invite-icon-Bz6lCTuB.svg",ns="data:image/svg+xml,%3csvg%20width='55.6797'%20height='63.6174'%20viewBox='0%200%2055.6797%2063.6174'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Vote'%3e%3cpath%20id='Vector'%20d='M0.055012%2039.1045C1.61191%2039.4989%202.83757%2039.3938%204.4307%2039.392L8.27108%2039.3878L20.7762%2039.3883L42.8819%2039.3904L50.0954%2039.3907C51.793%2039.3907%2054.0562%2039.5509%2055.6466%2039.0843C55.5909%2040.7931%2055.647%2042.8581%2055.6469%2044.5864L55.6479%2055.616L55.6559%2059.5618C55.6583%2060.6219%2055.8213%2061.9838%2055.261%2062.8837C55.2205%2062.9265%2055.1794%2062.9688%2055.1377%2063.0104C54.7986%2063.3482%2054.3791%2063.5594%2053.9021%2063.5761C52.0714%2063.642%2050.1544%2063.6097%2048.3241%2063.6078L37.4452%2063.6066L2.97352%2063.6103C2.2022%2063.6084%201.15943%2063.6718%200.589171%2063.0576C-0.204857%2062.2037%200.0327979%2060.3244%200.0349529%2059.1687L0.0414734%2054.3929C0.0413119%2049.3191%20-0.00749456%2044.1727%200.055012%2039.1045Z'%20fill='white'%20fill-opacity='0.8'/%3e%3cpath%20id='Subtract'%20d='M37.1168%200.00495927C38.1773%200.00461149%2039.2888%20-0.0284991%2040.3433%200.0811311C41.0714%200.15695%2041.7266%200.914583%2041.7857%201.63484C41.853%202.45491%2041.8268%203.31926%2041.8258%204.15144L41.8189%208.70418L41.8199%2023.9639L40.1099%2023.9659L13.8726%2023.963L13.8678%209.0909L13.8648%204.29793C13.8644%202.52652%2013.3942%200.34203%2015.6754%200.0342561C15.8907%200.016712%2016.237%200.0120998%2016.4557%200.0117952C21.6059%200.00480262%2026.761%200.0117634%2031.9107%200.00788896L37.1168%200.00495927ZM33.3834%206.17293C32.439%206.55612%2031.0531%208.12922%2030.3014%208.88191L25.8297%2013.3634C25.3537%2012.824%2023.3455%2010.7605%2022.8209%2010.4239C22.5581%2010.2549%2022.2566%2010.1546%2021.9449%2010.1329C21.4563%2010.1008%2020.9754%2010.2879%2020.6139%2010.6134C20.2442%2010.9428%2020.0227%2011.4077%2020.0006%2011.9024C19.9561%2013.0748%2021.3406%2014.1198%2022.1256%2014.8868C22.9429%2015.714%2024.1669%2017.1028%2025.1168%2017.67C26.1632%2018.2949%2027.3471%2017.2145%2027.9723%2016.4942C30.25%2014.2025%2032.5393%2011.9456%2034.8101%209.64949C35.2937%209.16062%2035.7138%208.69126%2035.6851%207.96199C35.6419%206.86558%2034.7821%206.09682%2033.6959%206.14656C33.5914%206.15085%2033.4872%206.16001%2033.3834%206.17293Z'%20fill='%23FF7439'/%3e%3cpath%20id='Vector_2'%20d='M45.5498%2015.976C46.6399%2015.986%2049.9504%2015.7705%2050.7361%2016.241C51.0104%2016.4053%2051.2831%2016.6446%2051.4181%2016.9397C51.892%2017.9763%2052.1015%2019.357%2052.3802%2020.4819L54.0582%2027.2308C54.5046%2028.9073%2054.9023%2030.6043%2055.3338%2032.2824C55.6029%2033.329%2055.9417%2034.4293%2054.9705%2035.2255C54.8158%2035.359%2054.4427%2035.5934%2054.2329%2035.6091C52.7731%2035.7184%2051.1693%2035.6701%2049.7108%2035.6679L39.4635%2035.6649L14.5239%2035.6632C10.471%2035.6631%206.41808%2035.6665%202.36531%2035.6698C1.79359%2035.6657%201.33794%2035.6604%200.844568%2035.337C-0.57365%2034.4073%200.381076%2032.2112%200.72189%2030.8501L1.93462%2025.9936L3.28579%2020.566C3.53371%2019.5688%203.77194%2018.5694%204.04289%2017.5781C4.30559%2016.6172%204.74298%2016.1492%205.73966%2015.9892C7.15095%2015.9419%208.72017%2015.9778%2010.1434%2015.9809L10.1451%2023.9585C7.37011%2024.097%207.74242%2027.5535%209.84963%2027.6469C11.6268%2027.7258%2013.6164%2027.6909%2015.4098%2027.691L26.229%2027.6915L39.1339%2027.691L43.273%2027.6909C44.748%2027.6909%2047.2174%2028.0848%2047.3773%2025.9908C47.4212%2025.4807%2047.2565%2024.9745%2046.9209%2024.5879C46.5265%2024.141%2046.1143%2024.0046%2045.5418%2023.9673L45.5498%2015.976Z'%20fill='white'/%3e%3c/g%3e%3c/svg%3e",ss=s.div`
+  width: 100%;
+  min-width: 0;
+`,is=s.nav`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 4px 0 16px;
+  font-family: ${t.font.sans};
+  font-size: 12px;
+  line-height: 1;
+  color: ${t.colors.gray4};
+`,os=s.button`
+  border: 0;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+  color: ${t.colors.gray4};
+
+  &:hover {
+    color: ${t.colors.white};
+    text-decoration: underline;
+  }
+  &:focus-visible {
+    outline: 2px solid ${t.colors.white};
+    outline-offset: 2px;
+  }
+`,as=s.span`
+  font-weight: 700;
+  color: ${t.colors.softWhite};
+`,rs=s.div`
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  padding-bottom: 48px;
+
+  ${t.media.maxWidth("mobile")} {
+    gap: 32px;
+    padding-bottom: 32px;
+  }
+`,ls=s.div`
+  position: relative;
+  border: 1px solid ${t.colors.magenta};
+  border-radius: 24px;
+  overflow: hidden;
+  padding: 88px 48px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+  text-align: center;
+  background: ${t.colors.overlay};
+
+  ${t.media.maxWidth("mobile")} {
+    padding: 40px 20px;
+    gap: 28px;
+  }
+`,cs=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+`,ds=s.h1`
+  margin: 0;
+  font-family: ${t.font.sans};
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 1.167;
+  color: ${t.colors.white};
+
+  ${t.media.maxWidth("mobile")} {
+    font-size: 26px;
+  }
+`,hs=s.p`
+  margin: 0;
+  max-width: 760px;
+  font-family: ${t.font.sans};
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 1.334;
+  color: #ecebed;
+
+  ${t.media.maxWidth("mobile")} {
+    font-size: 16px;
+  }
+`,ps=s.div`
+  width: min(785px, 100%);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`,us=s.div`
+  position: relative;
+`,ms=s("div",nn("invalid"))`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 8px 8px 16px;
+  background: ${t.colors.softWhite};
+  /* Figma 1368:349148 gives the field a 3px Orange edge — it is the page's one input, and the design
+     leans on that weight to carry it. Red only when what has been typed cannot be claimed. */
+  border: 3px solid ${({invalid:i})=>i?t.colors.dclRed:t.colors.orange};
+  border-radius: 20px;
+
+  &:focus-within {
+    border-color: ${({invalid:i})=>i?t.colors.dclRed:t.colors.magenta};
+  }
+
+  ${t.media.maxWidth("mobile")} {
+    border-radius: 16px;
+  }
+`,fs=s.span`
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  visibility: hidden;
+  pointer-events: none;
+  white-space: pre;
+  font-family: ${t.font.sans};
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.6;
+
+  /* An empty field paints the PLACEHOLDER, which is lighter than a typed value — so the mirror has to
+     be lighter too. Measuring the placeholder at the value's weight made the box a few pixels wider
+     than the text in it, and ".dcl.eth" sat that far off the end of the word. */
+  &[data-placeholder] {
+    font-weight: 400;
+  }
+
+  ${t.media.maxWidth("mobile")} {
+    font-size: 16px;
+  }
+`,xs=s.div`
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: #ffcdd4;
+  color: #ec303a;
+  font-family: ${t.font.sans};
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.2;
+  text-align: left;
+
+  ${t.media.maxWidth("mobile")} {
+    position: static;
+    margin-top: 8px;
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+`,Ve=s.a`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  font-weight: 600;
+  text-decoration: underline;
+  text-transform: uppercase;
+  white-space: nowrap;
+
+  ${t.media.maxWidth("mobile")} {
+    margin-left: 0;
+  }
+`,gs=s(Ve)`
+  color: #ec303a;
+`,ys=s.label`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  cursor: text;
+  overflow: hidden;
+`,bs=s.span`
+  flex: none;
+  margin-right: 8px;
+  font-family: ${t.font.sans};
+  font-size: 26px;
+  font-weight: 500;
+  line-height: 1;
+  color: ${t.colors.muted2};
+
+  ${t.media.maxWidth("mobile")} {
+    font-size: 20px;
+  }
+`,ws=s.input`
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-family: ${t.font.sans};
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.6;
+  color: ${t.colors.text};
+  padding: 0;
+
+  &::placeholder {
+    color: ${t.colors.muted1};
+    font-weight: 400;
+  }
+
+  ${t.media.maxWidth("mobile")} {
+    font-size: 16px;
+  }
+`,Cs=s.span`
+  flex: none;
+  /* Flush against the name: "yourname.dcl.eth" has to read as one address, and at 20px even a couple of
+     pixels here look like a space someone typed by mistake. */
+  margin-left: 0;
+  /* Not selectable: it is the fixed part of the address, not something the reader typed. */
+  user-select: none;
+  -webkit-user-select: none;
+  font-family: ${t.font.sans};
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1.6;
+  color: ${t.colors.muted1};
+
+  ${t.media.maxWidth("mobile")} {
+    font-size: 16px;
+  }
+`,vs=s.span`
+  flex: none;
+  font-family: ${t.font.sans};
+  font-size: 14px;
+  line-height: 1.43;
+  color: ${t.colors.muted2};
+  white-space: nowrap;
+`,Ke=s.button`
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 52px;
+  padding: 0 24px;
+  border: 0;
+  border-radius: 12px;
+  cursor: pointer;
+  background: ${t.gradients.buyBtn};
+  color: ${t.colors.softWhite};
+  font-family: ${t.font.sans};
+  font-weight: 600;
+  font-size: 15px;
+  letter-spacing: 0.46px;
+  line-height: 24px;
+  text-transform: uppercase;
+  transition: background-image 0.15s ease;
+
+  /* Both ends stay on background-IMAGE: a gradient cannot interpolate to a plain colour, so swapping
+     the background shorthand instead blanks the button for the length of the transition. */
+  &:hover:not(:disabled),
+  &:active:not(:disabled) {
+    background-image: linear-gradient(${t.colors.dclRed}, ${t.colors.dclRed});
+  }
+  &:focus-visible {
+    outline: 2px solid ${t.colors.white};
+    outline-offset: 2px;
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  ${t.media.maxWidth("mobile")} {
+    display: none;
+  }
+`,js=s(Ke)`
+  display: none;
+
+  ${t.media.maxWidth("mobile")} {
+    display: inline-flex;
+    width: 100%;
+    height: 48px;
+    border-radius: 12px;
+  }
+`,$s=s.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 18px;
+  font-weight: 600;
+
+  .ico {
+    width: 13.26px;
+    height: 14px;
+  }
+`,ks=s.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  font-family: ${t.font.sans};
+  font-size: 13px;
+  font-weight: 500;
+  text-align: left;
+
+  background: ${({tone:i})=>i==="error"?"rgba(255, 45, 85, 0.12)":i==="ok"?"rgba(30, 166, 114, 0.14)":"rgba(255,255,255,0.14)"};
+  color: ${({tone:i})=>i==="error"?t.colors.dclRed:i==="ok"?"#0f7a4f":"#ecebed"};
+
+  .ico {
+    width: 16px;
+    height: 16px;
+    flex: none;
+  }
+`,Y=s(ks)`
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  z-index: 2;
+
+  /* Static on mobile, as TakenBanner is: the claim button sits below InputWrap there, so anything
+     floating out of the input lands on top of it. */
+  ${t.media.maxWidth("mobile")} {
+    position: static;
+    margin-top: 8px;
+  }
+`,Ss=s(Ve)`
+  color: inherit;
+`,Es=s.section`
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  padding: 0 48px;
+
+  ${t.media.maxWidth("mobile")} {
+    gap: 32px;
+    padding: 0 20px;
+  }
+`,Ts=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+`,Ls=s.h2`
+  margin: 0;
+  text-align: center;
+  font-family: ${t.font.sans};
+  font-weight: 600;
+  font-size: 32px;
+  line-height: 1.167;
+  color: ${t.colors.white};
+
+  ${t.media.maxWidth("mobile")} {
+    font-size: 22px;
+  }
+`,Rs=s.p`
+  margin: 0;
+  max-width: 907px;
+  text-align: center;
+  font-family: ${t.font.sans};
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 1.57;
+  color: ${t.colors.gray4};
+
+  ${t.media.maxWidth("mobile")} {
+    font-size: 16px;
+  }
+`,_s=s.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24px;
+  align-items: stretch;
+
+  ${t.media.maxWidth("lg")} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  ${t.media.maxWidth("mobile")} {
+    grid-template-columns: 1fr;
+  }
+`,ee=s.article`
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding: 24px;
+  background: ${t.colors.overlay};
+  border-radius: 24px;
+
+  @media (forced-colors: active) {
+    outline: 1px solid CanvasText;
+  }
+
+  ${t.media.maxWidth("mobile")} {
+    gap: 20px;
+    padding: 20px;
+  }
+`,te=s.img`
+  display: block;
+  align-self: flex-start;
+  height: 55px;
+  width: auto;
+`,ne=s.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`,se=s.h3`
+  margin: 0;
+  font-family: ${t.font.sans};
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 1.57;
+  text-transform: uppercase;
+  color: ${t.colors.white};
+`,ie=s.p`
+  margin: 0;
+  font-family: ${t.font.sans};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.57;
+  color: ${t.colors.media};
+`,Ms=s.span`
+  font-weight: 700;
+  color: ${t.colors.white};
+`,We=s.a`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-top: auto;
+  font-family: ${t.font.sans};
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 30px;
+  color: ${t.colors.softWhite};
+  text-decoration: underline;
+
+  &:focus-visible {
+    outline: 2px solid ${t.colors.softWhite};
+    outline-offset: 2px;
+  }
+
+  .ico {
+    width: 13px;
+    height: 13px;
+  }
+`,Fs=s.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`,Ns="https://docs.decentraland.org/creator/worlds/about/",As="https://governance.decentraland.org";function Pe(i){const a=typeof window<"u"?window.location.hostname:"";return`${a.endsWith("decentraland.org")?"https://decentraland.org":a.endsWith("decentraland.today")?"https://decentraland.today":"https://decentraland.zone"}/marketplace/names/browse?search=${encodeURIComponent(i)}`}function Is({onBack:i}){Ge({title:n("seo.names.title"),description:n("seo.names.description")});const{session:a,signIn:o}=Oe(),d=xn(),{data:h}=De(),m=h?Ze(V,h):null,[l,f]=u.useState(""),[c,g]=u.useState("idle"),[p,y]=u.useState(!1),[j,w]=u.useState(!1),[$,C]=u.useState(()=>{var v;return typeof window<"u"&&!!((v=window.matchMedia)!=null&&v.call(window,"(prefers-reduced-motion: reduce)").matches)});u.useEffect(()=>{var A;const v=(A=window.matchMedia)==null?void 0:A.call(window,"(prefers-reduced-motion: reduce)");if(!v)return;const N=_=>C(_.matches);return v.addEventListener("change",N),()=>v.removeEventListener("change",N)},[]);const x=n("names.placeholderExamples"),k=u.useMemo(()=>x.split(",").map(v=>v.trim()).filter(Boolean),[x]),T=vn(k,!j&&!l&&!$)||n("names.inputPlaceholder"),F=u.useRef(null),[I,B]=u.useState(void 0);u.useLayoutEffect(()=>{F.current&&B(F.current.getBoundingClientRect().width)},[l,T]),u.useEffect(()=>{if(!Ne(l).ok){g(l.length===0?"idle":"invalid");return}g("checking");const N=new AbortController,A=setTimeout(()=>{(async()=>{try{const _=await cn(l,{signal:N.signal});g(_)}catch(_){if((_==null?void 0:_.name)==="AbortError")return;g("error")}})()},400);return()=>{clearTimeout(A),N.abort()}},[l]);const z=Ne(l),W=z.ok&&(c==="available"||c==="error"),S=d&&W,P=!d&&W;function L(){if(S){if(!a){o();return}y(!0)}}const R=e.jsxs(e.Fragment,{children:[n("names.claim"),m!=null?e.jsxs($s,{children:[e.jsx(O,{}),Ce(m)]}):null]});return e.jsxs(ss,{"data-testid":"names-page",children:[e.jsxs(is,{"aria-label":n("names.breadcrumbAria"),children:[e.jsx(os,{onClick:i,children:n("names.breadcrumbCollectibles")}),e.jsx("span",{"aria-hidden":!0,children:">"}),e.jsx(as,{children:n("names.breadcrumbCurrent")})]}),e.jsxs(rs,{children:[e.jsxs(ls,{children:[e.jsxs(cs,{children:[e.jsx(ds,{children:n("names.heroTitle")}),e.jsx(hs,{children:n("names.heroSubtitle")})]}),e.jsxs(ps,{children:[e.jsxs(us,{"data-testid":"names-input-wrap",children:[e.jsxs(ms,{invalid:c==="taken",children:[e.jsxs(ys,{children:[e.jsx(bs,{"aria-hidden":!0,children:"@"}),e.jsx(ws,{value:l,onChange:v=>f(an(v.target.value)),placeholder:T,"aria-label":n("names.inputAria"),autoComplete:"off",spellCheck:!1,maxLength:ae,onFocus:()=>w(!0),style:{width:I!=null?`${I}px`:void 0}}),e.jsx(fs,{ref:F,"aria-hidden":!0,"data-placeholder":!l||void 0,children:l||T}),e.jsx(Cs,{children:n("names.suffix")})]}),l.length>0?e.jsxs(vs,{"aria-hidden":!0,children:[l.length,"/",ae]}):null,e.jsx(Ke,{onClick:L,disabled:!S,"data-testid":"names-claim",children:R})]}),c==="taken"?e.jsxs(xs,{role:"status","data-testid":"names-taken",children:[e.jsx(E,{name:"info",size:16,"aria-hidden":!0}),e.jsx("span",{children:n("names.taken")}),e.jsxs(gs,{href:Pe(l),target:"_blank",rel:"noopener noreferrer",children:[n("names.takenMakeOffer"),e.jsx(E,{name:"external-link",size:13,"aria-hidden":!0})]})]}):null,c==="checking"?e.jsx(Y,{tone:"muted",role:"status","data-testid":"names-checking",children:n("names.checking")}):P?e.jsxs(Y,{tone:"muted",role:"status","data-testid":"names-disabled",children:[e.jsx(E,{name:"info",size:16,"aria-hidden":!0}),e.jsx("span",{children:n("names.registrationDisabled")}),e.jsxs(Ss,{href:Pe(l),target:"_blank",rel:"noopener noreferrer",children:[n("names.registrationDisabledLink"),e.jsx(E,{name:"external-link",size:13,"aria-hidden":!0})]})]}):c==="error"?e.jsx(Y,{tone:"muted",role:"status",children:n("names.checkError")}):c==="invalid"&&!z.ok&&z.reason==="too-short"?e.jsx(Y,{tone:"muted",role:"status",children:n("names.tooShort",{min:qe})}):null]}),e.jsx(js,{onClick:L,disabled:!S,children:R}),e.jsx(Fs,{role:"status","aria-live":"polite",children:c==="available"?n("names.available",{name:l}):""})]})]}),e.jsxs(Es,{children:[e.jsxs(Ts,{children:[e.jsx(Ls,{children:n("names.whyTitle")}),e.jsx(Rs,{children:n("names.whyIntro")})]}),e.jsxs(_s,{children:[e.jsxs(ee,{children:[e.jsx(te,{src:Yn,alt:""}),e.jsxs(ne,{children:[e.jsx(se,{children:n("names.why1Title")}),e.jsx(ie,{children:n("names.why1")})]})]}),e.jsxs(ee,{children:[e.jsx(te,{src:es,alt:""}),e.jsxs(ne,{children:[e.jsx(se,{children:n("names.why2Title")}),e.jsxs(ie,{children:[n("names.why2")," ",e.jsx(Ms,{children:n("names.why2Address")})]}),e.jsxs(We,{href:Ns,target:"_blank",rel:"noopener noreferrer",children:[n("names.learnMore"),e.jsx(E,{name:"external-link","aria-hidden":!0})]})]})]}),e.jsxs(ee,{children:[e.jsx(te,{src:ts,alt:""}),e.jsxs(ne,{children:[e.jsx(se,{children:n("names.why3Title")}),e.jsx(ie,{children:n("names.why3")})]})]}),e.jsxs(ee,{children:[e.jsx(te,{src:ns,alt:""}),e.jsxs(ne,{children:[e.jsx(se,{children:n("names.why4Title")}),e.jsx(ie,{children:n("names.why4")}),e.jsxs(We,{href:As,target:"_blank",rel:"noopener noreferrer",children:[n("names.learnMore"),e.jsx(E,{name:"external-link","aria-hidden":!0})]})]})]})]})]})]}),p?e.jsx(Jn,{name:l,priceCredits:m,onClose:()=>y(!1)}):null]})}const zs="data:image/svg+xml,%3csvg%20width='101'%20height='101'%20viewBox='0%200%20101%20101'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M42.4493%2040.9855L30.7394%2052.6954'%20stroke='%23FF5A57'%20stroke-width='3.15625'%20stroke-linecap='round'/%3e%3cpath%20d='M30.7391%2040.9855L42.449%2052.6954'%20stroke='%23FF5A57'%20stroke-width='3.15625'%20stroke-linecap='round'/%3e%3cpath%20d='M36.2621%2071.0604C29.6047%2071.0604%2023.9709%2068.7542%2019.3608%2064.1416C14.7507%2059.5291%2012.4445%2053.8953%2012.442%2047.2404C12.4396%2040.5854%2014.7459%2034.9516%2019.3608%2030.3391C23.9758%2025.7266%2029.6096%2023.4203%2036.2621%2023.4203C42.9146%2023.4203%2048.5496%2025.7266%2053.167%2030.3391C57.7844%2034.9516%2060.0895%2040.5854%2060.0822%2047.2404C60.0822%2049.9277%2059.6546%2052.4624%2058.7995%2054.8445C57.9445%2057.2265%2056.784%2059.3336%2055.3181%2061.1659L75.84%2081.6878C76.5119%2082.3597%2076.8478%2083.2148%2076.8478%2084.2531C76.8478%2085.2914%2076.5119%2086.1465%2075.84%2086.8183C75.1682%2087.4902%2074.3131%2087.8261%2073.2748%2087.8261C72.2365%2087.8261%2071.3814%2087.4902%2070.7096%2086.8183L50.1877%2066.2964C48.3554%2067.7623%2046.2482%2068.9227%2043.8662%2069.7778C41.4842%2070.6329%2038.9495%2071.0604%2036.2621%2071.0604ZM36.2621%2063.7312C40.8429%2063.7312%2044.7372%2062.1285%2047.9449%2058.9232C51.1527%2055.7179%2052.7554%2051.8236%2052.7529%2047.2404C52.7505%2042.6571%2051.1478%2038.7641%2047.9449%2035.5612C44.742%2032.3583%2040.8478%2030.7544%2036.2621%2030.7495C31.6764%2030.7447%2027.7834%2032.3485%2024.5829%2035.5612C21.3825%2038.7739%2019.7786%2042.6669%2019.7713%2047.2404C19.764%2051.8138%2021.3678%2055.7081%2024.5829%2058.9232C27.798%2062.1383%2031.6911%2063.7409%2036.2621%2063.7312Z'%20fill='url(%23paint0_linear_search_empty)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_search_empty'%20x1='10.4127'%20y1='55.6273'%20x2='124.009'%20y2='44.925'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FF2D55'/%3e%3cstop%20offset='1'%20stop-color='%23FFBC5B'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e",He=48,Bs=["all","on_sale","not_for_sale"];function oi(){const[i]=et(),a=Ue(),o=(i.get("q")??"").trim().toLowerCase(),d=(i.get("q")??"").trim();Ge({title:d?n("seo.collectibles.searchTitle",{query:d}):n("seo.collectibles.title"),description:n("seo.collectibles.description")});const h=u.useMemo(()=>({category:"all",status:"on_sale",subCategory:null,rarities:[],priceMin:"",priceMax:"",smart:!1,sort:"newest"}),[]),[m,l]=tt(h),{subCategory:f,rarities:c,priceMin:g,priceMax:p,smart:y,sort:j}=m,w=m.category,$=Bs.includes(m.status)?m.status:"on_sale";nt(`${w}:${f??""}`);const[C,x]=u.useState(!1);u.useEffect(()=>{if(!C)return;const r=Q=>{Q.key==="Escape"&&x(!1)};document.addEventListener("keydown",r);const U=document.body.style.overflow;return document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",r),document.body.style.overflow=U}},[C]);const k=$==="on_sale",M=g&&!Number.isNaN(Number(g))?Number(g):void 0,T=p&&!Number.isNaN(Number(p))?Number(p):void 0,F=wt(),I=f?ot[f]:void 0,B=(_e.find(r=>r.key===j)??_e[0]).server,z={category:w,rarities:c.length?c:void 0,wearableCategories:I,minPriceCredits:M,maxPriceCredits:T,search:o||void 0,sortBy:B,isSmart:y||void 0,onSale:!0,listingType:F?void 0:"primary"},W={category:w,rarities:c.length?c:void 0,wearableCategories:I,search:o||void 0,sortBy:B,isWearableSmart:y||void 0,isOnSale:$==="not_for_sale"?!1:void 0},{items:S,total:P,isLoading:L,isPlaceholderData:R,error:v,hasNextPage:N,isFetchingNextPage:A,isFetchNextPageError:_,fetchNextPage:re}=Gt(k?["shop-items",z]:["catalog-items",W],r=>k?vt({...z,first:He,skip:r}):jt({...W,first:He,skip:r}),{enabled:w!=="names"}),H=P,{data:b,isError:G,isPending:D}=De(),Qe=r=>b&&r.manaWei?Ze(r.manaWei,b):null,Je=k&&D&&S.some(r=>r.source==="legacy"),Se=L||R||Je,Xe=L?15:Math.max(S.length,1),Ee=u.useRef(null);u.useEffect(()=>{L||R||!o||Ee.current===o||(Ee.current=o,oe("Shop Searched",{query:o,result_count:H}))},[o,L,R,H]);const K=u.useRef("__init__");u.useEffect(()=>{if(L||R)return;const r=JSON.stringify({category:w,subCategory:f,rarities:c,min:M,max:T,sort:j,status:$,smart:y});if(K.current==="__init__"||K.current===r){K.current=r;return}K.current=r,oe("Shop Applied Filter",{filters:{category:w,sub_category:f,rarities:c,min_price_credits:M??null,max_price_credits:T??null,status:$,smart:y,sort:j},result_count:H})},[w,f,c,M,T,j,$,y,L,R,H]);function Te(r){l({category:r,subCategory:null})}function Le(r){l({status:r})}function Re(r){l({rarities:c.includes(r)?c.filter(U=>U!==r):[...c,r]})}function Ye(){l(h)}const Z=[];(M!=null||T!=null)&&Z.push({key:"price",label:n("filter.price"),onRemove:()=>{l({priceMin:"",priceMax:""})}});for(const r of st)c.includes(r)&&Z.push({key:`rarity-${r}`,label:Ct(r),onRemove:()=>Re(r)});return y&&Z.push({key:"smart",label:n("filter.smart"),onRemove:()=>l({smart:!1})}),$!=="on_sale"&&Z.push({key:"status",label:$==="all"?n("filter.statusAll"):n("filter.notForSale"),onRemove:()=>Le("on_sale")}),e.jsxs($t,{"data-testid":"browse",children:[w!=="names"&&e.jsxs(e.Fragment,{children:[C?e.jsx(kt,{onClick:()=>x(!1),"aria-hidden":!0}):null,e.jsxs(St,{"data-open":C||void 0,"data-testid":"browse-sidebar",children:[e.jsxs(Et,{children:[e.jsx(Tt,{children:n("assets.filters")}),e.jsx(Lt,{onClick:()=>x(!1),"aria-label":n("assets.closeFilters"),children:"✕"})]}),e.jsx(Rt,{children:e.jsx(_t,{category:w,subCategory:f,onCategory:Te,onSub:r=>l({subCategory:r}),priceMin:g,priceMax:p,onPriceMin:r=>l({priceMin:r}),onPriceMax:r=>l({priceMax:r}),rarities:c,onToggleRarity:Re,status:$,onStatus:Le,smart:y,onSmart:r=>l({smart:r})})}),e.jsx(Mt,{children:e.jsx(Ft,{type:"button",onClick:()=>x(!1),children:n("assets.showItems")})})]})]}),e.jsx(Nt,{children:w==="names"?e.jsx(Is,{onBack:()=>Te("all")}):e.jsxs(e.Fragment,{children:[e.jsx(it,{sort:j,onSort:r=>l({sort:r}),total:P,loading:L||R,query:o,onOpenFilters:()=>x(!0),chips:Z,onClearChips:Ye}),G&&k&&S.some(r=>r.source==="legacy")?e.jsx(At,{"data-variant":"warn",children:n("assets.marketUnavailable")}):null,v?e.jsx(Dt,{message:n("assets.loadError"),testId:"browse-error"}):null,!Se&&S.length===0&&!v?e.jsxs(It,{"data-testid":"browse-empty",children:[e.jsx(zt,{src:zs,alt:""}),e.jsxs(Bt,{children:[e.jsx(Wt,{children:n("assets.empty.title")}),e.jsx(Pt,{children:d?e.jsxs(e.Fragment,{children:[n("assets.empty.searchBefore"),e.jsx("b",{children:d}),n("assets.empty.searchAfter")]}):n("assets.empty.filters")})]}),e.jsx(Ht,{children:e.jsx(Ut,{type:"button",onClick:()=>a("/overview"),children:n("assets.empty.cta")})})]}):e.jsxs(e.Fragment,{children:[e.jsx(sn,{"data-testid":"grid",children:Se?e.jsx(Fe,{count:Xe}):e.jsxs(e.Fragment,{children:[S.map(r=>{if(!k)return e.jsx(J,{item:r,mode:"view"},X(r));const U=r;if(U.source!=="legacy")return e.jsx(J,{item:r},X(r));const Q=Qe(U);return Q==null?e.jsx(J,{item:r,mode:"view"},X(r)):e.jsx(J,{item:{...U,priceCredits:Q}},X(r))}),A?e.jsx(Fe,{count:6}):null]})}),e.jsx(Ot,{hasNextPage:N,isFetching:A,isError:_,onLoadMore:()=>void re()})]})]})})]})}export{oi as Assets};