@cartridge/controller 0.11.2 → 0.11.3

package/src/toast/variants/achievement.ts

@@ -0,0 +1,244 @@
+import { AchievementToastOptions } from "../types";
+import { CloseButton } from "../components/close-button";
+
+// Inject achievement toast specific styles
+export function injectAchievementStyles(targetDoc: Document): void {
+  if (targetDoc.getElementById("cartridge-toast-achievement-styles")) {
+    return;
+  }
+
+  const style = targetDoc.createElement("style");
+  style.id = "cartridge-toast-achievement-styles";
+  style.textContent = `
+    /* Achievement Toast */
+    .cartridge-toast.achievement {
+      background-color: #161A17;
+      border-radius: 8px;
+      width: 360px;
+      padding: 12px;
+      padding-bottom: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: relative;
+      overflow: hidden;
+      min-height: 52px;
+      box-sizing: border-box;
+    }
+
+    .cartridge-toast.achievement .image-content-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+    }
+
+    .cartridge-toast.achievement .image {
+      width: 30px;
+      height: 30px;
+      aspect-ratio: 1/1;
+    }
+
+    .cartridge-toast.achievement .image-container {
+      display: flex;
+      padding: 5px;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      border-radius: 4px;
+      background: #161A17;
+    }
+
+    .cartridge-toast.achievement .content {
+      display: flex;
+      height: 40px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 2px;
+    }
+
+    .cartridge-toast.achievement .title {
+      color: #FFF;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+    }
+
+    .cartridge-toast.achievement .subtitle {
+      color: #808080;
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 16px;
+    }
+
+    .cartridge-toast.achievement .xp-section-container {
+      display: flex;
+      padding: 10px;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 10px;
+    }
+
+    .cartridge-toast.achievement .xp-section {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      align-self: stretch;
+    }
+
+    .cartridge-toast.achievement .xp-section .xp-icon {
+      width: 20px;
+      height: 20px;
+      aspect-ratio: 1/1;
+    }
+
+    .cartridge-toast.achievement .xp-section .xp-amount {
+      color: #FFF;
+      /* Inter/Regular 14px */
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; /* 142.857% */
+    }
+  `;
+  targetDoc.head.appendChild(style);
+}
+
+// Create achievement toast element
+export function createAchievementToast(
+  options: AchievementToastOptions,
+): HTMLElement {
+  const toast = document.createElement("div");
+  toast.className = "cartridge-toast achievement";
+
+  const imageContentContainer = document.createElement("div");
+  imageContentContainer.className = "image-content-container";
+
+  const imageContainer = document.createElement("div");
+  imageContainer.className = "image-container";
+
+  const icon = getAchievementIcon(options.isDraft);
+  icon.className = "image";
+  imageContainer.appendChild(icon);
+
+  const content = document.createElement("div");
+  content.className = "content";
+
+  const title = document.createElement("p");
+  title.className = "title";
+  title.textContent = options.title;
+
+  const subtitle = document.createElement("p");
+  subtitle.className = "subtitle";
+  subtitle.textContent = options.subtitle || "Earned!";
+
+  content.appendChild(title);
+  content.appendChild(subtitle);
+
+  imageContentContainer.appendChild(imageContainer);
+  imageContentContainer.appendChild(content);
+
+  // XP section on the right (icon + amount)
+  const xpSectionContainer = document.createElement("div");
+  xpSectionContainer.className = "xp-section-container";
+
+  const xpSection = document.createElement("div");
+  xpSection.className = "xp-section";
+
+  const xpIcon = getXPIcon(!options.isDraft);
+  xpIcon.setAttribute("class", "xp-icon");
+  xpSection.appendChild(xpIcon);
+
+  const xpAmount = document.createElement("span");
+  xpAmount.className = "xp-amount";
+  xpAmount.textContent = `${options.xpAmount}`;
+  xpSection.appendChild(xpAmount);
+
+  xpSectionContainer.appendChild(xpSection);
+
+  const closeButton = CloseButton(false);
+
+  toast.appendChild(imageContentContainer);
+  toast.appendChild(xpSectionContainer);
+  toast.appendChild(closeButton);
+
+  return toast;
+}
+
+const getAchievementIcon = (isDraft = false) => {
+  const container = document.createElement("div");
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("width", "34");
+  svg.setAttribute("height", "34");
+  svg.setAttribute("viewBox", "0 0 30 30");
+  svg.style.width = "100%";
+  svg.style.height = "100%";
+
+  switch (isDraft) {
+    case true:
+      svg.innerHTML = `
+        <path d="M26.25 5.15625C26.25 10.1484 22.5322 14.2749 17.7158 14.9121C17.4038 12.5654 16.3711 10.4473 14.8462 8.79053C16.5293 5.78467 19.7461 3.75 23.4375 3.75H24.8438C25.6216 3.75 26.25 4.37842 26.25 5.15625ZM3.75 7.96875C3.75 7.19092 4.37842 6.5625 5.15625 6.5625H6.5625C11.9985 6.5625 16.4062 10.9702 16.4062 16.4062V17.8125V24.8438C16.4062 25.6216 15.7778 26.25 15 26.25C14.2222 26.25 13.5938 25.6216 13.5938 24.8438V17.8125C8.15771 17.8125 3.75 13.4048 3.75 7.96875Z" fill="#33FF33"/>
+      `;
+      break;
+    default:
+      svg.innerHTML = `
+        <path d="M9.559 6.47461C9.73478 6.23633 10.016 6.0918 10.3129 6.0918H19.688C19.9848 6.0918 20.2661 6.23242 20.4419 6.47461L24.8169 12.4121C25.0825 12.7715 25.0552 13.2676 24.7583 13.5996L15.6957 23.5997C15.5161 23.795 15.2661 23.9083 15.0004 23.9083C14.7348 23.9083 14.4848 23.795 14.3051 23.5997L5.24257 13.5996C4.94179 13.2676 4.91835 12.7715 5.18398 12.4121L9.559 6.47461ZM11.0629 8.02931C10.934 8.12696 10.8988 8.30275 10.9809 8.43946L13.2231 12.1739L7.47305 12.6543C7.31289 12.666 7.18789 12.8028 7.18789 12.9668C7.18789 13.1309 7.31289 13.2637 7.47305 13.2793L14.9731 13.9043C14.9887 13.9043 15.0082 13.9043 15.0239 13.9043L22.5239 13.2793C22.6841 13.2676 22.8091 13.1309 22.8091 12.9668C22.8091 12.8028 22.6841 12.67 22.5239 12.6543L16.7778 12.1778L19.02 8.44337C19.102 8.30665 19.0669 8.12696 18.9379 8.03321C18.809 7.93946 18.6294 7.95509 18.52 8.07228L15.0004 11.8809L11.4809 8.06837C11.3715 7.95118 11.1918 7.93556 11.0629 8.02931Z" fill="#D3A4E5"/>
+      `;
+  }
+
+  container.appendChild(svg);
+  return container;
+};
+
+/**
+ *
+ * @param isMainnet isMainnet = !isDraft
+ * @returns
+ */
+const getXPIcon = (isMainnet: boolean) => {
+  const container = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "svg",
+  );
+  container.setAttribute("width", "12");
+  container.setAttribute("height", "12");
+  container.setAttribute("viewBox", "0 0 20 20");
+
+  switch (isMainnet) {
+    case true:
+      container.innerHTML = `
+          <path d="M15 12.5C15.125 12.5 15.2373 12.5781 15.2815 12.6953L15.8333 14.1667L17.3046 14.7184C17.4218 14.7627 17.5 14.875 17.5 15C17.5 15.125 17.4218 15.2373 17.3046 15.2816L15.8333 15.8333L15.2815 17.3047C15.2373 17.4219 15.125 17.5 15 17.5C14.875 17.5 14.7627 17.4219 14.7184 17.3047L14.1666 15.8333L12.6953 15.2816C12.5781 15.2373 12.5 15.125 12.5 15C12.5 14.875 12.5781 14.7627 12.6953 14.7184L14.1666 14.1667L14.7184 12.6953C14.7627 12.5781 14.875 12.5 15 12.5Z" fill="white"/>
+          <path d="M8.33492 3.33333C8.55184 3.33333 8.75177 3.45943 8.84273 3.65885L10.6217 7.51139C10.6632 7.60119 10.7353 7.67335 10.8252 7.71484L14.6744 9.49056C14.8739 9.58152 15 9.78146 15 9.99837C14.9999 10.2152 14.8738 10.4144 14.6744 10.5054L10.8219 12.2852C10.7321 12.3267 10.66 12.3988 10.6184 12.4886L8.83866 16.3411C8.74772 16.5405 8.54853 16.6666 8.33167 16.6667C8.11475 16.6667 7.91482 16.5406 7.82385 16.3411L6.04814 12.4919C6.00665 12.402 5.93449 12.3299 5.84469 12.2884L1.99215 10.5094C1.79272 10.4185 1.66663 10.222 1.66663 10.0016C1.66667 9.78126 1.79276 9.58151 1.99215 9.49056L5.84143 7.71159C5.93113 7.67013 6.00335 7.59781 6.04488 7.50814L7.82792 3.65885C7.91887 3.45947 8.11805 3.33338 8.33492 3.33333Z" fill="white"/>
+          <path d="M15 2.5C15.125 2.5 15.2373 2.57812 15.2815 2.69531L15.8333 4.16667L17.3046 4.71842C17.4218 4.7627 17.5 4.875 17.5 5C17.5 5.125 17.4218 5.2373 17.3046 5.28158L15.8333 5.83333L15.2815 7.30469C15.2373 7.42188 15.125 7.5 15 7.5C14.875 7.5 14.7627 7.42188 14.7184 7.30469L14.1666 5.83333L12.6953 5.28158C12.5781 5.2373 12.5 5.125 12.5 5C12.5 4.875 12.5781 4.7627 12.6953 4.71842L14.1666 4.16667L14.7184 2.69531C14.7627 2.57812 14.875 2.5 15 2.5Z" fill="white"/>
+    `;
+      break;
+    default:
+      container.innerHTML = `
+          <path d="M10.4094 15.4897C10.411 15.4905 10.4126 15.4914 10.4143 15.4922L10.4314 15.4995C10.6358 15.6012 10.726 15.8431 10.6397 16.0537L10.6356 16.0635C10.6329 16.0701 10.6305 16.0772 10.6275 16.0838L10.5087 16.3418C10.495 16.3716 10.478 16.3992 10.4598 16.4256C10.4582 16.428 10.4558 16.4306 10.4541 16.4329C10.4476 16.4421 10.4389 16.4494 10.4322 16.4582C10.4242 16.4681 10.4164 16.4781 10.4078 16.4875C10.402 16.4939 10.3962 16.5004 10.3907 16.507C10.3874 16.5102 10.3843 16.5136 10.3809 16.5168C10.3787 16.5181 10.377 16.5201 10.3752 16.5216C10.373 16.5236 10.3701 16.5246 10.3679 16.5265C10.3542 16.5386 10.3395 16.5492 10.3247 16.5599C10.303 16.5758 10.2802 16.5897 10.2564 16.6022C10.2458 16.6077 10.2356 16.6137 10.2246 16.6185C10.2214 16.6199 10.218 16.6215 10.2149 16.6234C10.2122 16.6245 10.2095 16.6255 10.2067 16.6266C10.201 16.6289 10.1954 16.6294 10.1897 16.6315C10.1684 16.6393 10.1468 16.6459 10.1246 16.651C10.1207 16.6519 10.1169 16.6529 10.1132 16.6543C10.1085 16.6552 10.104 16.6567 10.0993 16.6576C10.0969 16.6576 10.0944 16.658 10.092 16.6584C10.0653 16.6629 10.0382 16.6651 10.0106 16.6657C10.0076 16.6657 10.0047 16.6673 10.0017 16.6673L10 16.6665L9.99841 16.6673C9.99542 16.6673 9.99245 16.6657 9.98946 16.6657C9.96191 16.6651 9.93482 16.6629 9.90808 16.6584C9.90541 16.6579 9.90266 16.6577 9.89994 16.6576C9.89527 16.6567 9.89075 16.6553 9.88611 16.6543C9.88265 16.653 9.87909 16.6519 9.87553 16.651C9.85329 16.6459 9.83172 16.6393 9.81042 16.6315C9.80464 16.6294 9.79825 16.6289 9.79252 16.6266C9.7898 16.6255 9.78709 16.6245 9.78438 16.6234C9.78147 16.6216 9.77852 16.6199 9.77543 16.6185C9.76453 16.6137 9.75425 16.6077 9.74369 16.6022C9.71984 16.5897 9.69713 16.5758 9.67533 16.5599C9.66058 16.5492 9.64588 16.5386 9.6322 16.5265C9.63002 16.5246 9.62704 16.5236 9.62488 16.5216C9.62295 16.5199 9.6207 16.5182 9.61837 16.5168C9.61499 16.5136 9.6119 16.5102 9.6086 16.507L9.56791 16.4582C9.56115 16.4494 9.55246 16.4421 9.54594 16.4329C9.54426 16.4306 9.54187 16.428 9.54024 16.4256C9.52204 16.3992 9.50507 16.3716 9.49141 16.3418L9.37179 16.0838C9.36875 16.0772 9.36715 16.0701 9.36446 16.0635L9.35958 16.0537C9.27358 15.8434 9.36397 15.6014 9.56791 15.4995L9.58582 15.4922C9.58746 15.4914 9.58904 15.4905 9.5907 15.4897L9.82237 15.3823C9.93257 15.3312 10.0596 15.3307 10.1702 15.381L10.4094 15.4897Z" fill="white"/>
+          <path d="M8.6711 13.4959C8.89565 13.3923 9.16217 13.4896 9.26599 13.714L9.50281 14.23C9.58063 14.3981 9.54569 14.5899 9.42875 14.7191C9.40896 14.741 9.38639 14.7606 9.36202 14.7785C9.33856 14.7956 9.31368 14.8114 9.28634 14.8241C9.22958 14.8502 9.17014 14.8624 9.11137 14.8639C9.0348 14.8666 8.95986 14.8483 8.89246 14.8143C8.80654 14.7705 8.73345 14.7003 8.68982 14.606L8.45219 14.09L8.45138 14.0892L8.45056 14.0868C8.35597 13.8818 8.42976 13.6441 8.61414 13.5252C8.6199 13.5235 8.62553 13.5214 8.63123 13.5195C8.64439 13.5117 8.6569 13.5025 8.6711 13.4959Z" fill="white"/>
+          <path d="M10.7341 13.714C10.8379 13.4896 11.1044 13.3923 11.329 13.4959C11.3432 13.5025 11.3557 13.5117 11.3689 13.5195C11.3743 13.5213 11.3796 13.5236 11.3851 13.5252C11.5699 13.644 11.6442 13.8816 11.5495 14.0868L11.5487 14.0892L11.5479 14.09L11.3103 14.606C11.2666 14.7003 11.1935 14.7705 11.1076 14.8143C11.0402 14.8483 10.9653 14.8666 10.8887 14.8639C10.8299 14.8624 10.7705 14.8502 10.7137 14.8241C10.6862 14.8113 10.6609 14.7957 10.6372 14.7785C10.6131 14.7607 10.591 14.7409 10.5713 14.7191C10.5643 14.7113 10.5582 14.7028 10.5518 14.6947C10.5296 14.6666 10.5113 14.6365 10.4965 14.6043C10.4442 14.4895 10.4401 14.3534 10.4973 14.23L10.7341 13.714Z" fill="white"/>
+          <path d="M7.17289 11.6388C7.27684 11.4148 7.54356 11.318 7.76778 11.4215L8.02576 11.5404L8.13888 11.5916C8.25956 11.6472 8.35637 11.7446 8.41231 11.8651L8.5824 12.2337C8.68602 12.4579 8.5892 12.7239 8.36511 12.8278C8.34249 12.8382 8.31926 12.8455 8.29594 12.8514L8.29106 12.8522C8.26967 12.8573 8.24828 12.8613 8.22677 12.8636C8.2011 12.8667 8.1757 12.8673 8.15027 12.866C7.98977 12.8578 7.83918 12.7648 7.76697 12.6089L7.72953 12.5283C7.67627 12.4133 7.58336 12.3211 7.4683 12.2679L7.38936 12.2313C7.17378 12.1316 7.07701 11.8826 7.1615 11.6641C7.16304 11.6616 7.16492 11.6593 7.16638 11.6567C7.16879 11.6509 7.17021 11.6446 7.17289 11.6388Z" fill="white"/>
+          <path d="M12.2323 11.4215C12.4565 11.318 12.7232 11.4148 12.8272 11.6388C12.8299 11.6446 12.8313 11.6509 12.8337 11.6567C12.8351 11.6592 12.8363 11.6617 12.8378 11.6641C12.9224 11.8827 12.8264 12.1315 12.6107 12.2313L12.5318 12.2679C12.4167 12.3211 12.3238 12.4133 12.2705 12.5283L12.2331 12.6089C12.1505 12.7873 11.9652 12.8837 11.7798 12.8644C11.7774 12.8642 11.775 12.8639 11.7725 12.8636C11.7261 12.8585 11.6796 12.8484 11.635 12.8278C11.4109 12.7239 11.3141 12.4579 11.4177 12.2337L11.5878 11.8651C11.6437 11.7446 11.7405 11.6472 11.8612 11.5916L11.9743 11.5404L12.2323 11.4215Z" fill="white"/>
+          <path d="M10 7.50065C10.125 7.50065 10.2373 7.57878 10.2816 7.69596L10.7666 8.98991C10.8089 9.10259 10.8981 9.1918 11.0108 9.23405L12.3047 9.71908C12.4219 9.76335 12.5 9.87565 12.5 10.0007C12.5 10.1257 12.4219 10.238 12.3047 10.2822L11.0108 10.7673C10.8981 10.8095 10.8089 10.8987 10.7666 11.0114L10.2816 12.3053C10.2373 12.4225 10.125 12.5007 10 12.5007C9.87504 12.5007 9.76274 12.4225 9.71846 12.3053L9.23344 11.0114C9.19119 10.8987 9.10197 10.8095 8.9893 10.7673L7.69535 10.2822C7.57817 10.238 7.50004 10.1257 7.50004 10.0007C7.50004 9.87565 7.57817 9.76335 7.69535 9.71908L8.9893 9.23405C9.10197 9.1918 9.19119 9.10259 9.23344 8.98991L9.71846 7.69596C9.76274 7.57878 9.87504 7.50065 10 7.50065Z" fill="white"/>
+          <path d="M5.17582 10.7184C5.27971 10.4938 5.54608 10.3957 5.77071 10.4995L5.87162 10.5459L5.87325 10.5467L6.28992 10.738C6.5069 10.8384 6.60331 11.0913 6.51534 11.3109C6.51294 11.3167 6.5115 11.323 6.50883 11.3288C6.50648 11.3339 6.50321 11.3385 6.50069 11.3434C6.48189 11.3813 6.45788 11.4144 6.4307 11.4443C6.36347 11.5167 6.2748 11.5643 6.17924 11.5811C6.09138 11.5974 5.998 11.5887 5.91069 11.5485L5.39473 11.3109C5.19818 11.22 5.09874 11.0044 5.14653 10.8014L5.17582 10.7184Z" fill="white"/>
+          <path d="M14.2294 10.4995C14.454 10.3957 14.7204 10.4938 14.8243 10.7184L14.8536 10.8014C14.9013 11.0044 14.8019 11.22 14.6053 11.3109L14.0894 11.5485C14.0021 11.5887 13.9087 11.5974 13.8208 11.5811C13.6811 11.5566 13.5551 11.4671 13.4913 11.3288C13.4886 11.3231 13.4879 11.3166 13.4856 11.3109C13.3974 11.0913 13.4931 10.8384 13.7102 10.738L14.1268 10.5467L14.1285 10.5459L14.2294 10.4995Z" fill="white"/>
+          <path d="M3.96651 9.35205C4.17017 9.274 4.401 9.36373 4.49711 9.56201L4.51013 9.59049C4.51134 9.593 4.51303 9.59528 4.5142 9.59782L4.61902 9.83038C4.66826 9.93964 4.66807 10.0648 4.61849 10.1739L4.5142 10.4035C4.51313 10.4058 4.51123 10.4077 4.51013 10.41L4.49548 10.4409C4.39952 10.6364 4.17327 10.7248 3.97139 10.6501L3.94698 10.6387C3.93704 10.6351 3.92689 10.6319 3.91687 10.6281L3.65889 10.5093C3.63045 10.4963 3.60365 10.4809 3.57833 10.4637C3.57288 10.46 3.56816 10.4554 3.56287 10.4515C3.53866 10.4339 3.51543 10.4147 3.49451 10.3937C3.48924 10.3884 3.48408 10.383 3.47904 10.3774C3.47489 10.3729 3.47165 10.3675 3.46765 10.3628C3.4513 10.3437 3.43652 10.3236 3.42289 10.3026C3.41862 10.2959 3.41467 10.2891 3.41069 10.2822C3.39638 10.2579 3.38371 10.2329 3.37325 10.2065C3.37142 10.2019 3.36926 10.1974 3.36755 10.1927C3.35907 10.1698 3.35269 10.1461 3.34721 10.1219C3.34543 10.1138 3.34375 10.1057 3.34233 10.0975C3.33705 10.0664 3.33337 10.0346 3.33337 10.0023C3.33337 10.0004 3.33417 9.99848 3.33419 9.99658C3.33437 9.96506 3.33718 9.93408 3.34233 9.90381C3.34408 9.89365 3.34653 9.8837 3.34884 9.8737C3.3539 9.8524 3.35932 9.83138 3.36674 9.81104C3.37028 9.80114 3.37405 9.7914 3.37813 9.78174C3.38778 9.75923 3.39902 9.73761 3.4115 9.71663C3.41532 9.71013 3.41882 9.70344 3.42289 9.6971C3.43664 9.67601 3.45197 9.65601 3.46847 9.63688C3.47209 9.63263 3.47529 9.62801 3.47904 9.62386V9.62223C3.48395 9.61685 3.48938 9.61196 3.49451 9.60677C3.51639 9.58487 3.54076 9.56475 3.56612 9.54655C3.57053 9.54339 3.57463 9.53982 3.57914 9.53678C3.60419 9.51987 3.6308 9.50487 3.65889 9.49202L3.9185 9.37158C3.92793 9.368 3.9376 9.36521 3.94698 9.36182L3.96651 9.35205Z" fill="white"/>
+          <path d="M15.5022 9.56201C15.5981 9.36374 15.8292 9.27444 16.0328 9.35205L16.0531 9.36182C16.0622 9.36513 16.0716 9.36813 16.0808 9.37158L16.3412 9.49202C16.3691 9.50477 16.3952 9.52002 16.4201 9.53678C16.4248 9.53994 16.4294 9.54326 16.434 9.54655C16.4592 9.56464 16.483 9.58503 16.5048 9.60677C16.5099 9.61196 16.5153 9.61685 16.5202 9.62223L16.521 9.62386C16.5248 9.62801 16.528 9.63263 16.5316 9.63688C16.5481 9.65601 16.5634 9.67601 16.5772 9.6971C16.5813 9.70344 16.5848 9.71013 16.5886 9.71663C16.601 9.73751 16.6115 9.75934 16.6211 9.78174C16.6377 9.82081 16.6504 9.86145 16.6578 9.90381C16.6629 9.93408 16.6657 9.96506 16.6659 9.99658C16.6659 9.99848 16.6667 10.0004 16.6667 10.0023C16.6667 10.0735 16.6521 10.1423 16.6268 10.2065C16.6164 10.2329 16.6037 10.2579 16.5894 10.2822C16.5854 10.2891 16.5815 10.2959 16.5772 10.3026C16.5636 10.3236 16.5488 10.3437 16.5324 10.3628C16.5284 10.3675 16.5244 10.3729 16.5202 10.3774C16.4909 10.4096 16.4584 10.4389 16.4218 10.4637C16.3964 10.4809 16.3696 10.4963 16.3412 10.5093L16.0824 10.6281C16.0726 10.6317 16.0628 10.6352 16.0531 10.6387L16.0279 10.6501C15.8261 10.7244 15.5995 10.6363 15.5038 10.4409L15.4899 10.41C15.4888 10.4077 15.4869 10.4058 15.4859 10.4035L15.3814 10.176C15.3309 10.0662 15.3306 9.93988 15.3806 9.82986L15.4859 9.59782C15.4871 9.59528 15.4887 9.593 15.4899 9.59049L15.5022 9.56201Z" fill="white"/>
+          <path d="M6.17354 8.41781C6.24076 8.42866 6.30491 8.45486 6.36072 8.4943C6.36594 8.49804 6.37111 8.50173 6.37618 8.5057C6.39298 8.51868 6.40844 8.5334 6.42338 8.54883C6.45414 8.58106 6.48087 8.61756 6.50151 8.6595C6.50346 8.6634 6.50616 8.66693 6.50802 8.6709C6.6098 8.89465 6.51325 9.16001 6.28992 9.26335L5.87325 9.45459L5.77071 9.50179C5.54608 9.60561 5.27971 9.50747 5.17582 9.28288C5.16739 9.26458 5.16208 9.24546 5.15629 9.22673C5.09213 9.01602 5.18924 8.78544 5.39473 8.69043L5.91069 8.4528C5.99604 8.41351 6.08742 8.40301 6.17354 8.41781Z" fill="white"/>
+          <path d="M13.8265 8.41781C13.9127 8.40301 14.004 8.41351 14.0894 8.4528L14.6053 8.69043C14.8108 8.78544 14.9079 9.01602 14.8438 9.22673C14.838 9.24546 14.8327 9.26458 14.8243 9.28288C14.7204 9.50747 14.454 9.60561 14.2294 9.50179L14.1268 9.45459L13.7102 9.26335C13.4869 9.16006 13.3897 8.89459 13.4913 8.6709C13.5562 8.53141 13.6849 8.44067 13.8265 8.41781Z" fill="white"/>
+          <path d="M8.08191 7.14258C8.12914 7.13285 8.17781 7.13014 8.22677 7.13607C8.24823 7.1384 8.26974 7.14218 8.29106 7.14746L8.29594 7.14827C8.31935 7.15435 8.34238 7.16303 8.36511 7.1735C8.56102 7.26434 8.65923 7.47893 8.61169 7.68131C8.60496 7.70958 8.59583 7.73771 8.58321 7.76514L8.41231 8.13623C8.35637 8.25674 8.25956 8.35409 8.13888 8.40967L8.02576 8.46094L7.76778 8.57975C7.54356 8.6833 7.27684 8.58647 7.17289 8.36247C7.17011 8.35645 7.16888 8.34982 7.16638 8.34375C7.16463 8.34069 7.16259 8.33779 7.16069 8.3348C7.07785 8.11681 7.17457 7.86935 7.38936 7.77002L7.4683 7.7334C7.58336 7.68022 7.67627 7.58801 7.72953 7.47298L7.76697 7.39242C7.82881 7.25894 7.9481 7.17047 8.08191 7.14258Z" fill="white"/>
+          <path d="M11.7798 7.13525C11.9651 7.11604 12.1505 7.21406 12.2331 7.39242L12.2705 7.47298C12.3238 7.58801 12.4167 7.68022 12.5318 7.7334L12.6107 7.77002C12.8256 7.86939 12.9216 8.11674 12.8386 8.3348C12.8368 8.33767 12.8354 8.34081 12.8337 8.34375C12.8312 8.34982 12.83 8.35645 12.8272 8.36247C12.8018 8.41716 12.7665 8.46398 12.7246 8.50244C12.7224 8.50452 12.7197 8.5061 12.7173 8.50814C12.588 8.62224 12.3988 8.65664 12.2323 8.57975L11.9743 8.46094L11.8612 8.40967C11.7405 8.35409 11.6437 8.25674 11.5878 8.13623L11.4169 7.76514C11.4042 7.73766 11.3943 7.70964 11.3876 7.68131C11.3401 7.47899 11.4391 7.26431 11.635 7.1735C11.6797 7.1529 11.7261 7.14117 11.7725 7.13607C11.7749 7.13577 11.7774 7.13551 11.7798 7.13525Z" fill="white"/>
+          <path d="M9.18949 5.14632C9.1935 5.14715 9.19771 5.14701 9.2017 5.14795C9.22997 5.15459 9.25812 5.16391 9.28552 5.17643C9.31373 5.18956 9.33961 5.20577 9.36365 5.22363C9.45286 5.28964 9.51067 5.38576 9.53292 5.49056C9.55232 5.58202 9.54494 5.67999 9.50281 5.77132L9.26599 6.28727C9.16217 6.5117 8.89565 6.60897 8.6711 6.50537C8.65677 6.49874 8.6445 6.48886 8.63123 6.48096C8.62472 6.47885 8.61831 6.47634 8.61169 6.47445C8.42914 6.35505 8.35639 6.11858 8.45056 5.91455L8.51648 5.77214L8.68982 5.39534C8.71856 5.33319 8.75929 5.2802 8.80863 5.23909C8.8927 5.16966 9.00036 5.13309 9.10974 5.13656H9.11381C9.13907 5.13735 9.16427 5.14113 9.18949 5.14632Z" fill="white"/>
+          <path d="M10.8903 5.13656C10.9995 5.13309 11.1066 5.16992 11.1906 5.23909C11.2402 5.28026 11.2814 5.33298 11.3103 5.39534L11.4836 5.77214L11.5495 5.91455C11.6438 6.1188 11.5706 6.35517 11.3876 6.47445C11.3812 6.47627 11.3751 6.47893 11.3689 6.48096C11.3556 6.48886 11.3433 6.49874 11.329 6.50537C11.1044 6.60897 10.8379 6.5117 10.7341 6.28727L10.4973 5.77132C10.4551 5.67999 10.4478 5.58202 10.4672 5.49056C10.4894 5.38576 10.5472 5.28964 10.6364 5.22363C10.6603 5.20591 10.6858 5.1895 10.7137 5.17643C10.7696 5.15079 10.8284 5.13837 10.8863 5.13656H10.8903Z" fill="white"/>
+          <path d="M10.0106 3.3348C10.0381 3.3354 10.0653 3.33759 10.092 3.34212H10.0953C10.1029 3.34343 10.1105 3.34539 10.118 3.34701C10.1203 3.34772 10.1223 3.34892 10.1246 3.34945C10.1468 3.3546 10.1684 3.36122 10.1897 3.36898C10.1952 3.37101 10.2012 3.37179 10.2067 3.37386C10.2103 3.37525 10.2138 3.37647 10.2173 3.37793C10.2198 3.37925 10.2221 3.38088 10.2246 3.382C10.2355 3.38682 10.2458 3.39278 10.2564 3.39827C10.2802 3.41078 10.303 3.42474 10.3247 3.44059C10.3395 3.45123 10.3542 3.46189 10.3679 3.47396C10.3702 3.47599 10.3729 3.47758 10.3752 3.47965C10.3769 3.48116 10.3789 3.4825 10.3809 3.48372C10.3847 3.48725 10.3886 3.49067 10.3923 3.4943C10.3975 3.50048 10.4024 3.50699 10.4078 3.51302C10.4164 3.52234 10.4242 3.53238 10.4322 3.54232C10.4391 3.55124 10.4475 3.55906 10.4541 3.56836C10.4558 3.5707 10.4582 3.57333 10.4598 3.57568C10.478 3.60208 10.495 3.62965 10.5087 3.65951L10.6283 3.91748C10.6312 3.92383 10.633 3.9306 10.6356 3.93701L10.6389 3.94434C10.7268 4.15432 10.6373 4.39518 10.4346 4.49854L10.4167 4.50749C10.4142 4.5087 10.4119 4.51039 10.4094 4.51156L10.1763 4.61897C10.0664 4.66962 9.93997 4.67 9.82978 4.62002L9.5907 4.51156C9.58816 4.51039 9.58588 4.5087 9.58337 4.50749L9.56466 4.49854C9.36247 4.39504 9.2728 4.15403 9.36039 3.94434L9.36446 3.93701C9.36707 3.9306 9.36886 3.92383 9.37179 3.91748L9.49141 3.65951C9.50507 3.62965 9.52204 3.60208 9.54024 3.57568C9.54187 3.57333 9.54426 3.5707 9.54594 3.56836C9.55259 3.55906 9.56101 3.55124 9.56791 3.54232C9.57592 3.53238 9.5837 3.52234 9.59233 3.51302C9.59759 3.50712 9.60188 3.50036 9.60697 3.4943C9.61067 3.49066 9.61457 3.48725 9.61837 3.48372C9.62059 3.48237 9.62305 3.48131 9.62488 3.47965C9.62717 3.47758 9.62988 3.47599 9.6322 3.47396C9.64588 3.46189 9.66058 3.45123 9.67533 3.44059C9.69711 3.42474 9.71986 3.41078 9.74369 3.39827C9.75424 3.39278 9.76454 3.38682 9.77543 3.382C9.77776 3.38097 9.77969 3.37914 9.78194 3.37793C9.78543 3.37647 9.78901 3.37525 9.79252 3.37386C9.79826 3.37162 9.80465 3.3711 9.81042 3.36898C9.8317 3.36122 9.85332 3.3546 9.87553 3.34945C9.87753 3.34898 9.87926 3.34763 9.88123 3.34701C9.88881 3.34538 9.89634 3.34344 9.90401 3.34212H9.90808C9.93478 3.33759 9.96195 3.3354 9.98946 3.3348C9.99245 3.33474 9.99542 3.33398 9.99841 3.33398H10.0017C10.0047 3.33398 10.0076 3.33474 10.0106 3.3348Z" fill="white"/>
+    `;
+  }
+
+  return container;
+};

package/src/toast/variants/error.ts

@@ -0,0 +1,107 @@
+import { ErrorToastOptions } from "../types";
+import { CloseButton } from "../components/close-button";
+
+// Inject error toast specific styles
+export function injectErrorStyles(targetDoc: Document): void {
+  if (targetDoc.getElementById("cartridge-toast-error-styles")) {
+    return;
+  }
+
+  const style = targetDoc.createElement("style");
+  style.id = "cartridge-toast-error-styles";
+  style.textContent = `
+    /* Error Toast */
+    .cartridge-toast.error {
+      background-color: #E66666;
+      border-radius: 8px;
+      width: 360px;
+      display: flex;
+      align-items: flex-start;
+      position: relative;
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+
+    .cartridge-toast.error .label-bar {
+      display: flex;
+      padding: 12px 12px 16px 12px;
+      align-items: center;
+      gap: 8px;
+      flex: 1 0 0;
+    }
+
+    .cartridge-toast.error .label-bar .label-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .cartridge-toast.error .label-bar .icon-container {
+      width: 24px;
+      height: 24px;
+      aspect-ratio: 1/1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+    }
+
+    .cartridge-toast.error .label-bar p {
+      color: #0F1410;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+    }
+
+    .cartridge-toast.error .close-button-container {
+      display: flex;
+      padding: 4px;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .cartridge-toast.error {
+      position: relative;
+      overflow: hidden;
+    }
+  `;
+  targetDoc.head.appendChild(style);
+}
+
+// Create error toast element
+export function createErrorToast(options: ErrorToastOptions): HTMLElement {
+  const toast = document.createElement("div");
+  toast.className = "cartridge-toast error";
+
+  const labelBar = document.createElement("div");
+  labelBar.className = "label-bar";
+  toast.appendChild(labelBar);
+
+  const labelContainer = document.createElement("div");
+  labelContainer.className = "label-container";
+  labelBar.appendChild(labelContainer);
+
+  const icon = document.createElement("div");
+  icon.className = "icon-container";
+  icon.innerHTML = `
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.79313 0.326989L17.673 8.20771C18.109 8.6437 18.109 9.35713 17.673 9.79229L9.79229 17.673C9.3563 18.109 8.6437 18.109 8.20771 17.673L0.326989 9.79229C-0.108996 9.35713 -0.108996 8.6437 0.326989 8.20771L8.20856 0.326989C8.64454 -0.108996 9.35715 -0.108996 9.79313 0.326989ZM8.26159 4.84378C8.26159 4.37794 8.63953 4 9.10537 4C9.57121 4 9.94915 4.3797 9.94915 4.84378V9.34394C9.94915 9.80978 9.57121 10.1877 9.13701 10.1877C8.70282 10.1877 8.26159 9.81154 8.26159 9.34394V4.84378ZM9.10537 13.5628C8.49503 13.5628 8.00002 13.0678 8.00002 12.4575C8.00002 11.8472 8.49468 11.3521 9.10537 11.3521C9.71605 11.3521 10.2107 11.8472 10.2107 12.4575C10.2093 13.0671 9.71711 13.5628 9.10537 13.5628Z" fill="#0F1410"/>
+  </svg>
+`;
+  labelContainer.appendChild(icon);
+
+  const content = document.createElement("p");
+  content.className = "content";
+  content.textContent = options.message || "Error";
+  labelContainer.appendChild(content);
+
+  const closeButtonContainer = document.createElement("div");
+  closeButtonContainer.className = "close-button-container";
+  const closeButton = CloseButton(true);
+  closeButtonContainer.appendChild(closeButton);
+  toast.appendChild(closeButtonContainer);
+
+  return toast;
+}

package/src/toast/variants/index.ts

@@ -0,0 +1,6 @@
+export * from "./error";
+export * from "./transaction";
+export * from "./network-switch";
+export * from "./achievement";
+export * from "./marketplace";
+export * from "./quest";

package/src/toast/variants/marketplace.ts

@@ -0,0 +1,145 @@
+import { MarketplaceToastOptions } from "../types";
+import { CloseButton } from "../components/close-button";
+import { sanitizeImageSrc } from "../../utils";
+
+// Inject marketplace toast specific styles
+export function injectMarketplaceStyles(targetDoc: Document): void {
+  if (targetDoc.getElementById("cartridge-toast-marketplace-styles")) {
+    return;
+  }
+
+  const style = targetDoc.createElement("style");
+  style.id = "cartridge-toast-marketplace-styles";
+  style.textContent = `
+    /* Marketplace Toast */
+    .cartridge-toast.marketplace {
+      background-color: #1E221F;
+      border-radius: 4px;
+      width: 400px;
+      padding: 12px;
+      padding-bottom: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: relative;
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+
+    .cartridge-toast.marketplace .image-container {
+      display: flex;
+      padding: 3px;
+      align-items: center;
+      gap: 10px;
+      border-radius: 4px;
+      background: #161A17;
+    }
+
+    .cartridge-toast.marketplace .image-content-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .cartridge-toast.marketplace .image {
+      display: flex;
+      width: 34px;
+      height: 34px;
+      padding: 2px;
+      justify-content: center;
+      align-items: center;
+      aspect-ratio: 1/1;
+      border-radius: 2px;
+      background: #000;
+      flex-shrink: 0;
+    }
+
+    .cartridge-toast.marketplace .content {
+      display: flex;
+      height: 40px;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      gap: 2px;
+    }
+
+    .cartridge-toast.marketplace .title {
+      color: #FFF;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px; /* 142.857% */
+    }
+
+    .cartridge-toast.marketplace .item-name {
+    color: #808080;
+    text-align: center;
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px; /* 133.333% */
+    }
+
+    .cartridge-toast.marketplace .close-button-container {
+      display: flex;
+      padding: 4px;
+      align-items: center;
+      gap: 10px;
+    }
+  `;
+  targetDoc.head.appendChild(style);
+}
+
+// Create marketplace toast element
+export function createMarketplaceToast(
+  options: MarketplaceToastOptions,
+): HTMLElement {
+  const toast = document.createElement("div");
+  toast.className = "cartridge-toast marketplace";
+
+  const imageContentContainer = document.createElement("div");
+  imageContentContainer.className = "image-content-container";
+
+  const imageContainer = document.createElement("div");
+  imageContainer.className = "image-container";
+
+  const image = document.createElement("img");
+  image.className = "image";
+  image.src = sanitizeImageSrc(options.itemImage);
+  image.alt = options.itemName;
+  imageContainer.appendChild(image);
+
+  const content = document.createElement("div");
+  content.className = "content";
+
+  const actionText = {
+    purchased: "Purchased!",
+    sold: "Sold!",
+  };
+
+  const title = document.createElement("p");
+  title.className = "title";
+  title.textContent = actionText[options.action];
+
+  const itemName = document.createElement("p");
+  itemName.className = "item-name";
+  itemName.textContent = options.itemName;
+
+  content.appendChild(title);
+  content.appendChild(itemName);
+
+  imageContentContainer.appendChild(imageContainer);
+  imageContentContainer.appendChild(content);
+
+  const closeButtonContainer = document.createElement("div");
+  closeButtonContainer.className = "close-button-container";
+  const closeButton = CloseButton(false);
+  closeButtonContainer.appendChild(closeButton);
+
+  toast.appendChild(imageContentContainer);
+  toast.appendChild(closeButtonContainer);
+
+  return toast;
+}

package/src/toast/variants/network-switch.ts

@@ -0,0 +1,72 @@
+import { sanitizeImageSrc } from "../../utils";
+import { NetworkSwitchToastOptions } from "../types";
+
+// Inject network switch toast specific styles
+export function injectNetworkSwitchStyles(targetDoc: Document): void {
+  if (targetDoc.getElementById("cartridge-toast-network-switch-styles")) {
+    return;
+  }
+
+  const style = targetDoc.createElement("style");
+  style.id = "cartridge-toast-network-switch-styles";
+  style.textContent = `
+    /* Network Switch Toast */
+    .cartridge-toast.network-switch {
+      background-color: #161A17;
+      border-radius: 8px;
+      width: 360px;
+      padding: 14px;
+      gap: 12px;
+    }
+
+    .cartridge-toast.network-switch p.content {
+      color: #ffffff;
+      font-family: Inter;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px; /* 142.857% */
+    }
+  `;
+  targetDoc.head.appendChild(style);
+}
+
+// Create network switch toast element
+export function createNetworkSwitchToast(
+  options: NetworkSwitchToastOptions,
+): HTMLElement {
+  const toast = document.createElement("div");
+  toast.className = "cartridge-toast network-switch";
+
+  const icon = document.createElement(options.networkIcon ? "img" : "div");
+  icon.className = "icon";
+  icon.style.width = "24px";
+  icon.style.height = "24px";
+  icon.style.aspectRatio = "1/1";
+  if (options.networkIcon) {
+    (icon as HTMLImageElement).src = sanitizeImageSrc(options.networkIcon);
+    (icon as HTMLImageElement).alt = options.networkName;
+  } else {
+    (icon as HTMLDivElement).style.backgroundColor = "#161A17";
+    (icon as HTMLDivElement).innerHTML = options.networkName
+      .charAt(0)
+      .toUpperCase();
+    (icon as HTMLDivElement).style.color = "#ffffff";
+    (icon as HTMLDivElement).style.fontWeight = "600";
+    (icon as HTMLDivElement).style.fontSize = "12px";
+    (icon as HTMLDivElement).style.lineHeight = "16px";
+    (icon as HTMLDivElement).style.textAlign = "center";
+    (icon as HTMLDivElement).style.textTransform = "uppercase";
+    (icon as HTMLDivElement).style.borderRadius = "4px";
+    (icon as HTMLDivElement).style.padding = "4px";
+  }
+
+  const content = document.createElement("p");
+  content.className = "content";
+  content.textContent = `Switched to ${options.networkName}`;
+
+  toast.appendChild(icon);
+  toast.appendChild(content);
+
+  return toast;
+}