@dcl/shop 0.3.0 → 0.4.0

package/_assets/{GetCredits-Ch_OO41P.js → GetCredits-bxJh6m8F.js}

@@ -1,4 +1,4 @@
-import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t as e,k as E,m as ue,e as r,f as p,n as ge,q as fe,O as f,b1 as me,l as H,ba as N,I as re,aY as D,p as B,bt as O}from"./index-9_8O7Lhc.js";import{R as K}from"./resume-buy-Bf0zIH7y.js";import{u as be,a as we,R as ye,c as ke,i as Ce,b as ve}from"./useCreditPacks-CHpQ4LEN.js";import"./sentry-973sfbO9.js";import"./dcl-schemas-Dr9BTjb7.js";import"./ethers-CtNGBird.js";import"./intl-CBcMB1D2.js";import"./mana-convert-C239nuRR.js";const P="https://cdn.decentraland.org/@dcl/shop/0.3.0/_assets/pack-coins-BDh1ZDbh.webp",ne="https://cdn.decentraland.org/@dcl/shop/0.3.0/_assets/pack-stacks-D-V2jSHW.webp",oe="https://cdn.decentraland.org/@dcl/shop/0.3.0/_assets/pack-chest-BX_j84xW.webp",je="https://cdn.decentraland.org/@dcl/shop/0.3.0/_assets/credit-coin-CmcTCd5i.webp",$e="data:image/svg+xml,%3csvg%20width='60'%20height='60'%20viewBox='0%200%2060%2060'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='60'%20height='60'%20rx='30'%20fill='%2334CE77'/%3e%3cpath%20d='M21.6583%2046.1067L11.4656%2036.0591C10.1688%2034.829%2010.1905%2032.7207%2011.4769%2031.4622L13.6868%2029.3591C14.9732%2028.1006%2017.1615%2028.1058%2018.4582%2029.3359L23.8747%2034.6197L41.9704%2015.6527C43.2568%2014.3942%2045.4291%2014.2093%2046.7258%2015.4394L48.8765%2017.3628C50.1732%2018.5929%2050.3491%2020.6844%2049.0626%2021.9429L26.6112%2045.8766C25.1433%2047.342%2022.955%2047.3368%2021.6583%2046.1067Z'%20fill='%23FCFCFC'/%3e%3c/svg%3e",Se="https://cdn.decentraland.org/@dcl/shop/0.3.0/_assets/packs-backdrop-BcXiUPeP.webp",Y="linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",Pe=i.div`
+import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t as e,k as B,m as ue,e as r,f as p,n as ge,q as fe,O as g,b2 as me,l as N,bb as U,I as ie,aZ as H,p as re,bu as O}from"./index-B0wrSWVL.js";import{R as D}from"./resume-buy-Bf0zIH7y.js";import{u as be,a as we,R as ye,c as ke,i as Ce,b as ve}from"./useCreditPacks-D1yz9_D9.js";import"./sentry-973sfbO9.js";import"./dcl-schemas-Dr9BTjb7.js";import"./ethers-CtNGBird.js";import"./intl-CBcMB1D2.js";import"./mana-convert-XtWFaGCt.js";const P="https://cdn.decentraland.org/@dcl/shop/0.4.0/_assets/pack-coins-BDh1ZDbh.webp",ne="https://cdn.decentraland.org/@dcl/shop/0.4.0/_assets/pack-stacks-D-V2jSHW.webp",oe="https://cdn.decentraland.org/@dcl/shop/0.4.0/_assets/pack-chest-BX_j84xW.webp",$e="https://cdn.decentraland.org/@dcl/shop/0.4.0/_assets/credit-coin-CmcTCd5i.webp",je="data:image/svg+xml,%3csvg%20width='60'%20height='60'%20viewBox='0%200%2060%2060'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='60'%20height='60'%20rx='30'%20fill='%2334CE77'/%3e%3cpath%20d='M21.6583%2046.1067L11.4656%2036.0591C10.1688%2034.829%2010.1905%2032.7207%2011.4769%2031.4622L13.6868%2029.3591C14.9732%2028.1006%2017.1615%2028.1058%2018.4582%2029.3359L23.8747%2034.6197L41.9704%2015.6527C43.2568%2014.3942%2045.4291%2014.2093%2046.7258%2015.4394L48.8765%2017.3628C50.1732%2018.5929%2050.3491%2020.6844%2049.0626%2021.9429L26.6112%2045.8766C25.1433%2047.342%2022.955%2047.3368%2021.6583%2046.1067Z'%20fill='%23FCFCFC'/%3e%3c/svg%3e",Se="https://cdn.decentraland.org/@dcl/shop/0.4.0/_assets/packs-backdrop-BcXiUPeP.webp",K="linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",Pe=i.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -40,14 +40,14 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   ${e.media.maxWidth("lg")} {
     gap: 32px;
   }
-`,ze=i.header`
+`,Ae=i.header`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   width: 100%;
   text-align: center;
-`,Ae=i.h1`
+`,ze=i.h1`
   margin: 0;
   font-family: ${e.font.sans};
   font-size: 40px;
@@ -120,7 +120,7 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   line-height: 1.6;
   color: ${e.colors.media};
   text-align: center;
-`,V=i.div`
+`,Y=i.div`
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
@@ -136,7 +136,7 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     gap: 12px;
     row-gap: 24px;
   }
-`,q=i.button`
+`,V=i.button`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -144,6 +144,8 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   gap: 48px;
   min-width: 0;
   padding: 24px 16px 16px;
+  /* No real border in either state, so nothing about the card's box can change under the pointer — both
+     strokes are painted by the masked pseudo-elements below. See the hover block for why that matters. */
   border: 0;
   border-radius: ${e.radius.banner};
   background: rgba(21, 21, 21, 0.4);
@@ -156,29 +158,37 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     background 0.15s ease,
     box-shadow 0.15s ease;
 
+  /* Both strokes are GRADIENTS, and both are painted here rather than with a border property.
+     Two separate reasons, and each one alone would be enough:
+     1. CSS cannot gradient-fill a border, and background-clip fights the card's translucent fill.
+     2. A pseudo-element takes no part in layout. A real border that grows 1px → 5px on hover pulls 4px off
+        the content box (box-sizing is border-box), so the card's artwork and price shrank as the pointer
+        crossed it, which in a row of four made the hovered card visibly smaller than its neighbours.
+     The flat #ffbc5b / #ff2d55 that Figma's code export reports for these strokes are not the design: the
+     export cannot represent a gradient stroke, so it emits one stop. The give-away is the mobile variant,
+     which reports #c640cd — Flare's LAST stop where desktop reports its FIRST. The page-level frame
+     (1654:374620) renders both cards with a warm gradient edge, which is what these two rules paint. */
   &::before,
   &::after {
     content: '';
     position: absolute;
+    inset: 0;
     border-radius: inherit;
     pointer-events: none;
-    -webkit-mask: ${Y};
+    -webkit-mask: ${K};
     -webkit-mask-composite: xor;
-    mask: ${Y};
+    mask: ${K};
     mask-composite: exclude;
     transition: opacity 0.15s ease;
   }
-  /* Hairline outline (Figma: 1px Flare stroke). */
+  /* Resting hairline: 1px of Flare. */
   &::before {
-    inset: 0;
     padding: 1px;
     background: ${e.gradients.flare};
   }
-  /* Hover ring: a 6px warm outline floating in the 4px gutter outside the card. */
+  /* Hover: the same edge at the 5px the design gives the selected card, in the warm half of the ramp. */
   &::after {
-    inset: -10px;
-    padding: 6px;
-    border-radius: 30px;
+    padding: 5px;
     background: ${e.gradients.ember};
     opacity: 0;
   }
@@ -218,8 +228,13 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     opacity: 0;
   }
 
+  /* Figma 1654:372759 — the mobile card is its own set of metrics, not a scaled-down desktop one. The
+     stroke stays the same Flare hairline: the export's #c640cd for this variant is that gradient's last
+     stop, not a second colour. */
   ${e.media.maxWidth("mobile")} {
-    gap: 24px;
+    gap: 12px;
+    padding: 8px;
+    border-radius: 16px;
   }
 `,Ie=i.span`
   position: absolute;
@@ -245,18 +260,21 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     height: 24px;
   }
 
+  /* Figma 1658:375459 — the mobile badge is not the desktop one scaled: it sits 9px above the card, not 18,
+     and its padding is symmetric. */
   ${e.media.maxWidth("mobile")} {
-    top: -14px;
-    padding: 4px 10px 4px 6px;
-    font-size: 14px;
-    line-height: 20px;
+    top: -9px;
+    padding: 4px 8px;
+    font-size: 12px;
+    line-height: 18px;
 
     .ico {
       width: 18px;
       height: 18px;
     }
   }
-`,X=i.span`
+`,q=i.span`
+  align-self: stretch;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -264,9 +282,9 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   padding-top: 32px;
 
   ${e.media.maxWidth("mobile")} {
-    padding-top: 16px;
+    padding-top: 24px;
   }
-`,Q=i.span`
+`,X=i.span`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -282,65 +300,39 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     height: 29.79px;
     color: ${e.colors.softWhite};
   }
+
+  ${e.media.maxWidth("mobile")} {
+    .ico {
+      width: 23.5px;
+      height: 24.81px;
+    }
+  }
 `,Me=i.span`
   font-family: ${e.font.sans};
   font-size: 40px;
   font-weight: 800;
   line-height: 30px;
   color: ${e.colors.white};
-`,Ue=i.span`
+
+  ${e.media.maxWidth("mobile")} {
+    font-size: 32px;
+    line-height: 24px;
+  }
+`,Ge=i.span`
   font-family: ${e.font.sans};
   font-size: 20px;
   font-weight: 500;
   line-height: 15px;
   color: ${e.colors.media};
   text-transform: uppercase;
-`,Ge=i.span`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  /* The bonus pill is nowrap and this row holds it beside the struck-through amount. At two cards per row on
-     a phone that is ~118px of content, which the pair exceeds by 8-12px (measured) — so let it wrap rather
-     than push out of the card. It only ever wraps at the narrowest widths. */
-  flex-wrap: wrap;
-  max-width: 100%;
-
-  &[data-empty='true'] {
-    visibility: hidden;
-  }
 
-  .ico {
-    width: 17px;
-    height: 18px;
-    color: ${e.colors.softWhite};
-    opacity: 0.55;
+  ${e.media.maxWidth("mobile")} {
+    font-size: 16px;
+    line-height: 12px;
   }
-`,He=i.span`
-  font-family: ${e.font.sans};
-  font-size: 22px;
-  font-weight: 600;
-  line-height: 24px;
-  color: rgba(255, 255, 255, 0.55);
-  text-decoration: line-through;
-  text-decoration-thickness: 2px;
 `,Ne=i.span`
-  display: inline-flex;
-  align-items: center;
-  padding: 3px 10px;
-  border-radius: ${e.radius.pill};
-  background: rgba(255, 255, 255, 0.16);
-  border: 1px solid rgba(255, 255, 255, 0.28);
-  font-family: ${e.font.sans};
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 18px;
-  color: ${e.colors.white};
-  white-space: nowrap;
-`,De=i.span`
   display: block;
-  width: 253.5px;
-  max-width: 100%;
+  width: 70%;
   aspect-ratio: 1;
 
   img {
@@ -349,35 +341,7 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     height: 100%;
     object-fit: contain;
   }
-
-  /**
-   * FLUID, capped — not a fixed 200px.
-   *
-   * The fixed width overflowed its card: measured at a 375px viewport the artwork rendered 200px inside a
-   * 150px parent, spilling 25px out of each side of the card (the max-width above did not hold it,
-   * which is why this restates the intent as a width rather than relying on a cap). Two per row means the
-   * cell is whatever half the viewport minus gaps happens to be, so the art has to follow it.
-   */
-  @media (max-width: 520px) {
-    /**
-     * STRETCHED to the card's content box, not sized by its own content.
-     *
-     * The card is a column flex with align-items: center, so its children are shrink-to-fit — which let each
-     * pack's artwork take a different width (measured 118px and 152px in two identical 150px cards) and let
-     * the wider one spill 2px out of each side. Stretching makes every card's art box exactly the content
-     * width, so all four are identical and none can exceed it.
-     */
-    align-self: stretch;
-    width: auto;
-    max-width: none;
-
-    /* The wrapper alone is not enough: whatever sits inside it (picture/img) must be capped too, or it
-       reintroduces the same overflow one level down. */
-    > * {
-      max-width: 100%;
-    }
-  }
-`,Oe=i.span`
+`,Ue=i.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -401,11 +365,11 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   letter-spacing: 0.46px;
   color: ${e.colors.text2};
   text-transform: uppercase;
-`,Ke=E`
+`,He=B`
   to {
     background-position: -200% 0;
   }
-`,F=i.span`
+`,E=i.span`
   display: block;
   background: linear-gradient(
     100deg,
@@ -414,29 +378,29 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     rgba(255, 255, 255, 0.08) 70%
   );
   background-size: 200% 100%;
-  animation: ${Ke} 1.4s infinite linear;
+  animation: ${He} 1.4s infinite linear;
 
   @media (prefers-reduced-motion: reduce) {
     animation: none;
   }
-`,Ye=i(F)`
+`,Oe=i(E)`
   width: 60%;
   height: 30px;
   border-radius: ${e.radius.chip};
-`,Ve=i(F)`
+`,De=i(E)`
   width: 253.5px;
   max-width: 100%;
   aspect-ratio: 1;
   border-radius: 16px;
-`,qe=i(F)`
+`,Ke=i(E)`
   width: 100%;
   height: 48px;
   border-radius: ${e.radius.card};
-`,Xe=i.p`
+`,Ye=i.p`
   margin: 0;
   font-family: ${e.font.sans};
   color: ${e.colors.muted};
-`,Qe=i.div`
+`,Ve=i.div`
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -447,13 +411,13 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   gap: 24px;
   padding: 24px;
   text-align: center;
-`,Ze=i.p`
+`,qe=i.p`
   margin: 0;
   font-family: ${e.font.sans};
   font-size: 16px;
   line-height: 1.4;
   color: rgba(255, 255, 255, 0.88);
-`,Je=E`
+`,Xe=B`
   0%, 100% {
     transform: scale(1);
     opacity: 1;
@@ -462,7 +426,7 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     transform: scale(0.88);
     opacity: 0.7;
   }
-`,et=i.div`
+`,Qe=i.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -473,20 +437,20 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
 `,se=i.img`
   width: 61px;
   height: 61px;
-  animation: ${Je} 1.2s ease-in-out infinite;
+  animation: ${Xe} 1.2s ease-in-out infinite;
 
   @media (prefers-reduced-motion: reduce) {
     animation: none;
   }
-`,tt=i(se)`
+`,Ze=i(se)`
   width: 72px;
   height: 72px;
-`,it=i.div`
+`,Je=i.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
-`,rt=i.p`
+`,et=i.p`
   margin: 0;
   font-family: ${e.font.sans};
   font-size: 20px;
@@ -496,18 +460,18 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   strong {
     font-weight: 700;
   }
-`,nt=i.div`
+`,tt=i.div`
   display: flex;
   align-items: center;
   gap: 8px;
-`,ot=E`
+`,it=B`
   0% {
     left: -40%;
   }
   100% {
     left: 100%;
   }
-`,st=i.span`
+`,rt=i.span`
   position: relative;
   width: 456px;
   max-width: 60vw;
@@ -515,7 +479,7 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   border-radius: ${e.radius.pill};
   background: ${e.colors.chip};
   overflow: hidden;
-`,at=i.span`
+`,nt=i.span`
   position: absolute;
   top: 0;
   left: -40%;
@@ -523,25 +487,25 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   height: 100%;
   border-radius: ${e.radius.pill};
   background: ${e.gradients.amethyst};
-  animation: ${ot} 1.4s ease-in-out infinite;
+  animation: ${it} 1.4s ease-in-out infinite;
 
   @media (prefers-reduced-motion: reduce) {
     left: 0;
     width: 30%;
     animation: none;
   }
-`,dt=i.span`
+`,ot=i.span`
   font-family: ${e.font.sans};
   font-size: 16px;
   line-height: 22px;
   color: ${e.colors.text2};
-`,ct=i.div`
+`,st=i.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
   max-width: 895px;
   margin: 0 auto;
-`,lt=i.div`
+`,at=i.div`
   display: flex;
   align-items: center;
   gap: 16px;
@@ -554,11 +518,11 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     flex-direction: column;
     text-align: center;
   }
-`,pt=i.img`
+`,dt=i.img`
   flex: none;
   width: 60px;
   height: 60px;
-`,ht=i.p`
+`,ct=i.p`
   flex: 1;
   margin: 0;
   font-family: ${e.font.sans};
@@ -570,12 +534,12 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   strong {
     font-weight: 700;
   }
-`,xt=i.div`
+`,lt=i.div`
   padding: 24px;
   border-radius: 16px;
   background: ${e.colors.white};
   border: 1px solid ${e.colors.gray4};
-`,ut=i.div`
+`,pt=i.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -599,7 +563,7 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     gap: 10px;
     padding: 120px 16px 16px;
   }
-`,gt=i.img`
+`,ht=i.img`
   position: absolute;
   left: 35px;
   top: 50%;
@@ -613,7 +577,7 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     top: 16px;
     transform: translateX(-50%);
   }
-`,ft=i.p`
+`,xt=i.p`
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -626,14 +590,14 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     height: 30px;
     color: ${e.colors.text};
   }
-`,mt=i.strong`
+`,ut=i.strong`
   font-size: 24px;
   font-weight: 700;
   text-transform: capitalize;
-`,bt=i.span`
+`,gt=i.span`
   font-size: 14px;
   font-weight: 400;
-`,wt=i.div`
+`,ft=i.div`
   display: flex;
   gap: 12px;
 
@@ -677,7 +641,7 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
     outline: 2px solid ${e.colors.accent};
     outline-offset: 2px;
   }
-`,Z=i.div`
+`,Q=i.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -686,7 +650,7 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   margin: 0 auto;
   padding: 48px 24px;
   text-align: center;
-`,J=i.p`
+`,Z=i.p`
   margin: 0;
   font-family: ${e.font.sans};
   font-size: 20px;
@@ -696,12 +660,12 @@ import{d as he,e as xe,r as l,j as t}from"./react-DehiWSvs.js";import{s as i,t a
   &[data-tone='error'] {
     color: ${e.colors.err};
   }
-`,ee=i.div`
+`,J=i.div`
   display: flex;
   gap: 12px;
   margin-top: 16px;
-`,yt=i.p`
+`,mt=i.p`
   margin: 0;
   font-family: ${e.font.sans};
   color: ${e.colors.err};
-`,v=Ce()?"mock":"stripe",te=[P,P,ne,oe],kt={pack_5:P,pack_10:P,pack_25:ne,pack_50:oe};function ae(a,o){return kt[a.id]??te[o%te.length]}function Ct(a,o){return a.artUrl??ae(a,o)}const vt="https://docs.decentraland.org";function ie(a){const o=a;if((o==null?void 0:o.name)==="AbortError")return r("getCredits.errorCanceled");const m=((o==null?void 0:o.message)??"").toLowerCase();return m.includes("sign in")?r("getCredits.errorSignIn",{currency:p.name}):m.includes("timed out")?r("getCredits.errorTimeout",{currency:p.name}):r("getCredits.errorGeneric")}function Et(){var M;ue({title:r("nav.getCredits",{currency:p.name}),noindex:!0});const a=he(),{session:o,signIn:m}=ge(),s=fe(),[b,h]=xe(),{packs:j,isLoading:y}=be(),[u,x]=l.useState("select"),[c,L]=l.useState(null),[$,I]=l.useState(null),de=($!=null?(M=j.find(n=>n.credits===$))==null?void 0:M.artUrl:void 0)??je,[ce,k]=l.useState(null),[le,_]=l.useState(!1),R=l.useRef(null);l.useEffect(()=>()=>{var n;return(n=R.current)==null?void 0:n.abort()},[]);const W=l.useCallback(()=>{h(n=>{const d=new URLSearchParams(n);return d.delete("order"),d.delete("canceled"),d},{replace:!0})},[h]),T=l.useCallback(async n=>{x("processing");const d=new AbortController;R.current=d;try{const g=await we(n,{signal:d.signal,address:o==null?void 0:o.address,identity:o==null?void 0:o.identity});if(g.status==="credited"){const w=g.creditsGranted??(c==null?void 0:c.credits)??0;I(w>0?w:null),x("success"),f("Shop Completed Buy Credits",{order_id:n,pack_usd:(c==null?void 0:c.usd)??null,credits:w>0?w:null,provider:v}),s.invalidateQueries({queryKey:["usd-balance"]});try{if(sessionStorage.getItem(ye)){const S={resumeCheckout:!0,...w>0?{creditsAdded:w}:{}};a("/cart",{state:S});return}}catch{}try{const S=sessionStorage.getItem(K);if(S){sessionStorage.removeItem(K);const U=JSON.parse(S),G=me(U);if(G){a(G,{state:{item:U,resumeBuy:!0}});return}}}catch{}}else g.status==="pending"?(f("Shop Buy Credits Pending",{step:"grant",pack_usd:(c==null?void 0:c.usd)??null}),s.invalidateQueries({queryKey:["usd-balance"]}),x("pending")):(f("Shop Buy Credits Failed",{step:"grant",error_code:"grant_failed",pack_usd:(c==null?void 0:c.usd)??null}),k(g.error??r("getCredits.errorGrant",{currency:p.name})),x("error"))}catch(g){H(g,{flow:"get_credits",step:"grant",order_id:n}),f("Shop Buy Credits Failed",{step:"grant",error_code:N(g),pack_usd:(c==null?void 0:c.usd)??null}),k(ie(g)),x("error")}},[c,o,s,a]),pe=l.useCallback(async n=>{if(!o){m();return}k(null),_(!1),L(n),x(v==="mock"?"processing":"redirecting"),f("Shop Started Buy Credits",{pack_usd:n.usd,credits:n.credits,provider:v});try{const d=await ke(n.id,{address:o.address,identity:o.identity});if(d.mock)T(d.orderId);else if(d.url)f("Shop Redirected To Stripe",{order_id:d.orderId,pack_usd:n.usd,credits:n.credits}),window.location.href=d.url;else throw new Error("Checkout did not return a redirect url")}catch(d){H(d,{flow:"get_credits",step:"checkout",provider:v}),f("Shop Buy Credits Failed",{step:"checkout",error_code:N(d),pack_usd:n.usd}),k(ie(d)),x("error")}},[o,m,T]),z=l.useRef(!1);l.useEffect(()=>{if(z.current)return;const n=b.get("order");if(b.get("canceled")!=null){z.current=!0,f("Shop Buy Credits Cancelled",{order_id:n,provider:v}),W(),_(!0),x("select");return}n&&(x("processing"),o&&(z.current=!0,W(),T(n)))},[b,o]);function A(){var n;(n=R.current)==null||n.abort(),x("select"),L(null),I(null),k(null),_(!1)}return t.jsxs(Pe,{children:[(u==="select"||u==="redirecting")&&t.jsxs(_e,{"data-testid":"credits-hero",children:[t.jsx(Re,{"aria-hidden":!0}),t.jsxs(Te,{$hidden:u==="redirecting",children:[t.jsxs(ze,{children:[t.jsx(Ae,{children:r("getCredits.title",{currency:p.name})}),t.jsxs(Be,{children:[t.jsx(Ee,{children:r("getCredits.subtitle",{currency:p.nameSingular})}),t.jsxs(Fe,{href:vt,target:"_blank",rel:"noreferrer",children:[r("getCredits.learnMore"),t.jsx(re,{name:"link-out"})]})]})]}),le&&t.jsx(Le,{role:"status",children:r("getCredits.canceledNote")}),t.jsx(jt,{packs:j,loading:y,onSelect:n=>void pe(n)})]}),u==="redirecting"&&t.jsxs(Qe,{role:"status","aria-live":"polite",children:[t.jsx(tt,{src:D,alt:"",width:72,height:72}),t.jsx(Ze,{children:r("getCredits.redirecting")})]})]}),u==="processing"&&t.jsxs(et,{role:"status","aria-live":"polite",children:[t.jsx(se,{src:D,alt:"",width:61,height:61}),t.jsxs(it,{children:[t.jsxs(rt,{children:[t.jsx("strong",{children:r("getCredits.processing")}),"…"]}),t.jsxs(nt,{"aria-hidden":!0,children:[t.jsx(st,{children:t.jsx(at,{})}),t.jsx(dt,{children:"1/1"})]})]})]}),u==="success"&&t.jsxs(ct,{role:"status","aria-live":"polite",children:[t.jsxs(lt,{children:[t.jsx(pt,{src:$e,alt:"",width:60,height:60}),t.jsxs(ht,{children:[t.jsx("strong",{children:r("getCredits.successTitle")})," ",r("getCredits.successBody",{currency:p.name})]})]}),$!=null&&t.jsx(xt,{children:t.jsxs(ut,{children:[t.jsx(gt,{src:de,alt:"",width:93,height:93}),t.jsxs(ft,{children:[t.jsx(B,{}),t.jsxs("span",{children:[t.jsx(mt,{children:r("getCredits.creditsAmount",{credits:$,currency:p.name})})," ",t.jsx(bt,{children:r("getCredits.creditsAdded")})]})]})]})}),t.jsxs(wt,{children:[t.jsx(C,{"data-variant":"outline",onClick:A,children:r("getCredits.buyMore",{currency:p.name})}),t.jsx(C,{onClick:()=>a("/items"),children:r("getCredits.startShopping")})]})]}),u==="pending"&&t.jsxs(Z,{role:"status","aria-live":"polite",children:[t.jsx(J,{children:r("getCredits.pendingTitle",{currency:p.name})}),t.jsx(Xe,{children:r("getCredits.pendingBody")}),t.jsxs(ee,{children:[t.jsx(C,{onClick:()=>a("/items"),children:r("getCredits.startShopping")}),t.jsx(C,{"data-variant":"outline",onClick:A,children:r("getCredits.done")})]})]}),u==="error"&&t.jsxs(Z,{role:"alert",children:[t.jsx(J,{"data-tone":"error",children:r("getCredits.errorTitle")}),t.jsx(yt,{children:ce}),t.jsx(ee,{children:t.jsx(C,{onClick:A,children:r("getCredits.tryAgain")})})]})]})}function jt({packs:a,loading:o,onSelect:m}){return o?t.jsx(V,{"aria-busy":"true","aria-label":r("getCredits.packsLoading",{currency:p.name}),children:[0,1,2,3].map(s=>t.jsxs(q,{as:"div","data-skeleton":"true","data-testid":"pack-skeleton","aria-hidden":!0,children:[t.jsxs(X,{children:[t.jsx(Q,{children:t.jsx(Ye,{})}),t.jsx(Ve,{})]}),t.jsx(qe,{})]},s))}):t.jsx(V,{children:a.map((s,b)=>{const h=ve(s,a);return t.jsxs(q,{type:"button","data-testid":"pack","data-best":s.bestValue?"true":void 0,onClick:()=>m(s),"aria-label":h?r("getCredits.packAriaBonus",{amount:O(s.credits),usd:s.usd,bonus:h.bonus,baseline:h.baseline}):r("getCredits.packAria",{amount:O(s.credits),usd:s.usd}),children:[s.bestValue&&t.jsxs(Ie,{children:[t.jsx(re,{name:"star-rounded"}),r("getCredits.packBadge")]}),t.jsxs(X,{children:[t.jsxs(Q,{children:[t.jsxs(We,{children:[t.jsx(B,{}),t.jsx(Me,{children:s.credits})]}),t.jsx(Ue,{children:r("getCredits.packUnit",{currency:p.name})}),t.jsxs(Ge,{"data-empty":h?void 0:"true","aria-hidden":!0,children:[t.jsx(B,{}),t.jsx(He,{children:h?h.baseline:0}),h&&t.jsx(Ne,{children:r("getCredits.packBonus",{bonus:h.bonus})})]})]}),t.jsx(De,{children:t.jsx("img",{src:Ct(s,b),alt:"",loading:"lazy",width:507,height:507,onError:j=>{const y=j.currentTarget;y.dataset.artFallback||(y.dataset.artFallback="done",y.src=ae(s,b))}})})]}),t.jsxs(Oe,{children:["$",s.usd.toFixed(2)]})]},s.id)})})}export{Et as GetCredits,Et as default};
+`,v=Ce()?"mock":"stripe",ee=[P,P,ne,oe],bt={pack_5:P,pack_10:P,pack_25:ne,pack_50:oe};function ae(a,o){return bt[a.id]??ee[o%ee.length]}function wt(a,o){return a.artUrl??ae(a,o)}const yt="https://docs.decentraland.org";function te(a){const o=a;if((o==null?void 0:o.name)==="AbortError")return r("getCredits.errorCanceled");const f=((o==null?void 0:o.message)??"").toLowerCase();return f.includes("sign in")?r("getCredits.errorSignIn",{currency:p.name}):f.includes("timed out")?r("getCredits.errorTimeout",{currency:p.name}):r("getCredits.errorGeneric")}function At(){var W;ue({title:r("nav.getCredits",{currency:p.name}),noindex:!0});const a=he(),{session:o,signIn:f}=ge(),s=fe(),[m,b]=xe(),{packs:$,isLoading:y}=be(),[x,h]=l.useState("select"),[c,F]=l.useState(null),[j,L]=l.useState(null),de=(j!=null?(W=$.find(n=>n.credits===j))==null?void 0:W.artUrl:void 0)??$e,[ce,k]=l.useState(null),[le,_]=l.useState(!1),R=l.useRef(null);l.useEffect(()=>()=>{var n;return(n=R.current)==null?void 0:n.abort()},[]);const I=l.useCallback(()=>{b(n=>{const d=new URLSearchParams(n);return d.delete("order"),d.delete("canceled"),d},{replace:!0})},[b]),T=l.useCallback(async n=>{h("processing");const d=new AbortController;R.current=d;try{const u=await we(n,{signal:d.signal,address:o==null?void 0:o.address,identity:o==null?void 0:o.identity});if(u.status==="credited"){const w=u.creditsGranted??(c==null?void 0:c.credits)??0;L(w>0?w:null),h("success"),g("Shop Completed Buy Credits",{order_id:n,pack_usd:(c==null?void 0:c.usd)??null,credits:w>0?w:null,provider:v}),s.invalidateQueries({queryKey:["usd-balance"]});try{if(sessionStorage.getItem(ye)){const S={resumeCheckout:!0,...w>0?{creditsAdded:w}:{}};a("/cart",{state:S});return}}catch{}try{const S=sessionStorage.getItem(D);if(S){sessionStorage.removeItem(D);const M=JSON.parse(S),G=me(M);if(G){a(G,{state:{item:M,resumeBuy:!0}});return}}}catch{}}else u.status==="pending"?(g("Shop Buy Credits Pending",{step:"grant",pack_usd:(c==null?void 0:c.usd)??null}),s.invalidateQueries({queryKey:["usd-balance"]}),h("pending")):(g("Shop Buy Credits Failed",{step:"grant",error_code:"grant_failed",pack_usd:(c==null?void 0:c.usd)??null}),k(u.error??r("getCredits.errorGrant",{currency:p.name})),h("error"))}catch(u){N(u,{flow:"get_credits",step:"grant",order_id:n}),g("Shop Buy Credits Failed",{step:"grant",error_code:U(u),pack_usd:(c==null?void 0:c.usd)??null}),k(te(u)),h("error")}},[c,o,s,a]),pe=l.useCallback(async n=>{if(!o){f();return}k(null),_(!1),F(n),h(v==="mock"?"processing":"redirecting"),g("Shop Started Buy Credits",{pack_usd:n.usd,credits:n.credits,provider:v});try{const d=await ke(n.id,{address:o.address,identity:o.identity});if(d.mock)T(d.orderId);else if(d.url)g("Shop Redirected To Stripe",{order_id:d.orderId,pack_usd:n.usd,credits:n.credits}),window.location.href=d.url;else throw new Error("Checkout did not return a redirect url")}catch(d){N(d,{flow:"get_credits",step:"checkout",provider:v}),g("Shop Buy Credits Failed",{step:"checkout",error_code:U(d),pack_usd:n.usd}),k(te(d)),h("error")}},[o,f,T]),A=l.useRef(!1);l.useEffect(()=>{if(A.current)return;const n=m.get("order");if(m.get("canceled")!=null){A.current=!0,g("Shop Buy Credits Cancelled",{order_id:n,provider:v}),I(),_(!0),h("select");return}n&&(h("processing"),o&&(A.current=!0,I(),T(n)))},[m,o]);function z(){var n;(n=R.current)==null||n.abort(),h("select"),F(null),L(null),k(null),_(!1)}return t.jsxs(Pe,{children:[(x==="select"||x==="redirecting")&&t.jsxs(_e,{"data-testid":"credits-hero",children:[t.jsx(Re,{"aria-hidden":!0}),t.jsxs(Te,{$hidden:x==="redirecting",children:[t.jsxs(Ae,{children:[t.jsx(ze,{children:r("getCredits.title",{currency:p.name})}),t.jsxs(Be,{children:[t.jsx(Ee,{children:r("getCredits.subtitle",{currency:p.nameSingular})}),t.jsxs(Fe,{href:yt,target:"_blank",rel:"noreferrer",children:[r("getCredits.learnMore"),t.jsx(ie,{name:"link-out"})]})]})]}),le&&t.jsx(Le,{role:"status",children:r("getCredits.canceledNote")}),t.jsx(kt,{packs:$,loading:y,onSelect:n=>void pe(n)})]}),x==="redirecting"&&t.jsxs(Ve,{role:"status","aria-live":"polite",children:[t.jsx(Ze,{src:H,alt:"",width:72,height:72}),t.jsx(qe,{children:r("getCredits.redirecting")})]})]}),x==="processing"&&t.jsxs(Qe,{role:"status","aria-live":"polite",children:[t.jsx(se,{src:H,alt:"",width:61,height:61}),t.jsxs(Je,{children:[t.jsxs(et,{children:[t.jsx("strong",{children:r("getCredits.processing")}),"…"]}),t.jsxs(tt,{"aria-hidden":!0,children:[t.jsx(rt,{children:t.jsx(nt,{})}),t.jsx(ot,{children:"1/1"})]})]})]}),x==="success"&&t.jsxs(st,{role:"status","aria-live":"polite",children:[t.jsxs(at,{children:[t.jsx(dt,{src:je,alt:"",width:60,height:60}),t.jsxs(ct,{children:[t.jsx("strong",{children:r("getCredits.successTitle")})," ",r("getCredits.successBody",{currency:p.name})]})]}),j!=null&&t.jsx(lt,{children:t.jsxs(pt,{children:[t.jsx(ht,{src:de,alt:"",width:93,height:93}),t.jsxs(xt,{children:[t.jsx(re,{}),t.jsxs("span",{children:[t.jsx(ut,{children:r("getCredits.creditsAmount",{credits:j,currency:p.name})})," ",t.jsx(gt,{children:r("getCredits.creditsAdded")})]})]})]})}),t.jsxs(ft,{children:[t.jsx(C,{"data-variant":"outline",onClick:z,children:r("getCredits.buyMore",{currency:p.name})}),t.jsx(C,{onClick:()=>a("/items"),children:r("getCredits.startShopping")})]})]}),x==="pending"&&t.jsxs(Q,{role:"status","aria-live":"polite",children:[t.jsx(Z,{children:r("getCredits.pendingTitle",{currency:p.name})}),t.jsx(Ye,{children:r("getCredits.pendingBody")}),t.jsxs(J,{children:[t.jsx(C,{onClick:()=>a("/items"),children:r("getCredits.startShopping")}),t.jsx(C,{"data-variant":"outline",onClick:z,children:r("getCredits.done")})]})]}),x==="error"&&t.jsxs(Q,{role:"alert",children:[t.jsx(Z,{"data-tone":"error",children:r("getCredits.errorTitle")}),t.jsx(mt,{children:ce}),t.jsx(J,{children:t.jsx(C,{onClick:z,children:r("getCredits.tryAgain")})})]})]})}function kt({packs:a,loading:o,onSelect:f}){return o?t.jsx(Y,{"aria-busy":"true","aria-label":r("getCredits.packsLoading",{currency:p.name}),children:[0,1,2,3].map(s=>t.jsxs(V,{as:"div","data-skeleton":"true","data-testid":"pack-skeleton","aria-hidden":!0,children:[t.jsxs(q,{children:[t.jsx(X,{children:t.jsx(Oe,{})}),t.jsx(De,{})]}),t.jsx(Ke,{})]},s))}):t.jsx(Y,{children:a.map((s,m)=>{const b=ve(s,a);return t.jsxs(V,{type:"button","data-testid":"pack","data-best":s.bestValue?"true":void 0,onClick:()=>f(s),"aria-label":b?r("getCredits.packAriaBonus",{amount:O(s.credits),usd:s.usd,bonus:b.bonus,baseline:b.baseline}):r("getCredits.packAria",{amount:O(s.credits),usd:s.usd}),children:[s.bestValue&&t.jsxs(Ie,{children:[t.jsx(ie,{name:"star-rounded"}),r("getCredits.packBadge")]}),t.jsxs(q,{children:[t.jsxs(X,{children:[t.jsxs(We,{children:[t.jsx(re,{}),t.jsx(Me,{children:s.credits})]}),t.jsx(Ge,{children:r("getCredits.packUnit",{currency:p.name})})]}),t.jsx(Ne,{children:t.jsx("img",{src:wt(s,m),alt:"",loading:"lazy",width:507,height:507,onError:$=>{const y=$.currentTarget;y.dataset.artFallback||(y.dataset.artFallback="done",y.src=ae(s,m))}})})]}),t.jsxs(Ue,{children:["$",s.usd.toFixed(2)]})]},s.id)})})}export{At as GetCredits,At as default};

package/_assets/{HelpersUtil-CFCkU-g3.js → HelpersUtil-BFgierZ-.js}

@@ -1,4 +1,4 @@
-import{i as f,b as h}from"./lit-element-B3y9oplH.js";import{n as m}from"./class-map-CxwNmq0D.js";import{c as p}from"./index-LbRdNAf3.js";import{d as g,r as v}from"./index-Zni41xRh.js";import{C as c}from"./ConstantsUtil-Di3dRDAF.js";import{R as $,O as u}from"./W3MFrameProviderSingleton-B8ZAc5Tp.js";import{au as y}from"./NetworkUtil-EoWQDMpU.js";const b=g`
+import{i as f,b as h}from"./lit-element-B3y9oplH.js";import{n as m}from"./class-map-CxwNmq0D.js";import{c as p}from"./index-C75VmoUV.js";import{d as g,r as v}from"./index-DU7iVDBh.js";import{C as c}from"./ConstantsUtil-Di3dRDAF.js";import{R as $,O as u}from"./W3MFrameProviderSingleton-BJE-tnmd.js";import{au as y}from"./NetworkUtil-EoWQDMpU.js";const b=g`
   :host {
     display: flex;
     justify-content: center;