0xtrails 0.0.1 → 0.0.2

package/dist/widget/index-CY7Lt2Yu.js

@@ -0,0 +1,310 @@
+import { v as $, D as _, F as R, i as f, r as m, a as b, O as a, j as O } from "./index-CK94R-H7.js";
+import { x as l } from "./lit-html-BRjl1r6K.js";
+import { n as j, c as w, o as P, r as y } from "./if-defined-DRXJEhv7.js";
+import { e as T, n as U } from "./ref-CXNmEjML.js";
+import { R as B } from "./ConstantsUtil-B-_-u8aQ.js";
+const u = $({
+  isLegalCheckboxChecked: !1
+}), g = {
+  state: u,
+  subscribe(n) {
+    return R(u, () => n(u));
+  },
+  subscribeKey(n, e) {
+    return _(u, n, e);
+  },
+  setIsLegalCheckboxChecked(n) {
+    u.isLegalCheckboxChecked = n;
+  }
+}, E = f`
+  label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    column-gap: var(--wui-spacing-1xs);
+  }
+
+  label > input[type='checkbox'] {
+    height: 0;
+    width: 0;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  label > span {
+    width: var(--wui-spacing-xl);
+    height: var(--wui-spacing-xl);
+    min-width: var(--wui-spacing-xl);
+    min-height: var(--wui-spacing-xl);
+    border-radius: var(--wui-border-radius-3xs);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--wui-color-gray-glass-010);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    will-change: background-color;
+  }
+
+  label > span:hover,
+  label > input[type='checkbox']:focus-visible + span {
+    background-color: var(--wui-color-gray-glass-010);
+  }
+
+  label input[type='checkbox']:checked + span {
+    background-color: var(--wui-color-blue-base-90);
+  }
+
+  label > span > wui-icon {
+    opacity: 0;
+    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-lg);
+    will-change: opacity;
+  }
+
+  label > input[type='checkbox']:checked + span wui-icon {
+    opacity: 1;
+  }
+`;
+var v = function(n, e, r, o) {
+  var i = arguments.length, t = i < 3 ? e : o === null ? o = Object.getOwnPropertyDescriptor(e, r) : o, c;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") t = Reflect.decorate(n, e, r, o);
+  else for (var s = n.length - 1; s >= 0; s--) (c = n[s]) && (t = (i < 3 ? c(t) : i > 3 ? c(e, r, t) : c(e, r)) || t);
+  return i > 3 && t && Object.defineProperty(e, r, t), t;
+};
+let h = class extends b {
+  constructor() {
+    super(...arguments), this.inputElementRef = T(), this.checked = void 0;
+  }
+  render() {
+    return l`
+      <label>
+        <input
+          ${U(this.inputElementRef)}
+          ?checked=${P(this.checked)}
+          type="checkbox"
+          @change=${this.dispatchChangeEvent}
+        />
+        <span>
+          <wui-icon name="checkmarkBold" color="inverse-100" size="xxs"></wui-icon>
+        </span>
+        <slot></slot>
+      </label>
+    `;
+  }
+  dispatchChangeEvent() {
+    var e;
+    this.dispatchEvent(new CustomEvent("checkboxChange", {
+      detail: (e = this.inputElementRef.value) == null ? void 0 : e.checked,
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+};
+h.styles = [m, E];
+v([
+  j({ type: Boolean })
+], h.prototype, "checked", void 0);
+h = v([
+  w("wui-checkbox")
+], h);
+const L = f`
+  :host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  wui-checkbox {
+    padding: var(--wui-spacing-s);
+  }
+  a {
+    text-decoration: none;
+    color: var(--wui-color-fg-150);
+    font-weight: 500;
+  }
+`;
+var k = function(n, e, r, o) {
+  var i = arguments.length, t = i < 3 ? e : o === null ? o = Object.getOwnPropertyDescriptor(e, r) : o, c;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") t = Reflect.decorate(n, e, r, o);
+  else for (var s = n.length - 1; s >= 0; s--) (c = n[s]) && (t = (i < 3 ? c(t) : i > 3 ? c(e, r, t) : c(e, r)) || t);
+  return i > 3 && t && Object.defineProperty(e, r, t), t;
+};
+let p = class extends b {
+  constructor() {
+    super(), this.unsubscribe = [], this.checked = g.state.isLegalCheckboxChecked, this.unsubscribe.push(g.subscribeKey("isLegalCheckboxChecked", (e) => {
+      this.checked = e;
+    }));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((e) => e());
+  }
+  render() {
+    var i;
+    const { termsConditionsUrl: e, privacyPolicyUrl: r } = a.state, o = (i = a.state.features) == null ? void 0 : i.legalCheckbox;
+    return !e && !r || !o ? null : l`
+      <wui-checkbox
+        ?checked=${this.checked}
+        @checkboxChange=${this.onCheckboxChange.bind(this)}
+        data-testid="wui-checkbox"
+      >
+        <wui-text color="fg-250" variant="small-400" align="left">
+          I agree to our ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()}
+        </wui-text>
+      </wui-checkbox>
+    `;
+  }
+  andTemplate() {
+    const { termsConditionsUrl: e, privacyPolicyUrl: r } = a.state;
+    return e && r ? "and" : "";
+  }
+  termsTemplate() {
+    const { termsConditionsUrl: e } = a.state;
+    return e ? l`<a rel="noreferrer" target="_blank" href=${e}>terms of service</a>` : null;
+  }
+  privacyTemplate() {
+    const { privacyPolicyUrl: e } = a.state;
+    return e ? l`<a rel="noreferrer" target="_blank" href=${e}>privacy policy</a>` : null;
+  }
+  onCheckboxChange() {
+    g.setIsLegalCheckboxChecked(!this.checked);
+  }
+};
+p.styles = [L];
+k([
+  y()
+], p.prototype, "checked", void 0);
+p = k([
+  w("w3m-legal-checkbox")
+], p);
+const F = f`
+  .reown-logo {
+    height: var(--wui-spacing-xxl);
+  }
+
+  a {
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  a:hover {
+    opacity: 0.9;
+  }
+`;
+var W = function(n, e, r, o) {
+  var i = arguments.length, t = i < 3 ? e : o === null ? o = Object.getOwnPropertyDescriptor(e, r) : o, c;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") t = Reflect.decorate(n, e, r, o);
+  else for (var s = n.length - 1; s >= 0; s--) (c = n[s]) && (t = (i < 3 ? c(t) : i > 3 ? c(e, r, t) : c(e, r)) || t);
+  return i > 3 && t && Object.defineProperty(e, r, t), t;
+};
+let x = class extends b {
+  render() {
+    return l`
+      <a
+        data-testid="ux-branding-reown"
+        href=${B}
+        rel="noreferrer"
+        target="_blank"
+        style="text-decoration: none;"
+      >
+        <wui-flex
+          justifyContent="center"
+          alignItems="center"
+          gap="xs"
+          .padding=${["0", "0", "l", "0"]}
+        >
+          <wui-text variant="small-500" color="fg-100"> UX by </wui-text>
+          <wui-icon name="reown" size="xxxl" class="reown-logo"></wui-icon>
+        </wui-flex>
+      </a>
+    `;
+  }
+};
+x.styles = [m, O, F];
+x = W([
+  w("wui-ux-by-reown")
+], x);
+const D = f`
+  :host > wui-flex {
+    background-color: var(--wui-color-gray-glass-005);
+  }
+
+  :host wui-ux-by-reown {
+    padding-top: 0;
+  }
+
+  :host wui-ux-by-reown.branding-only {
+    padding-top: var(--wui-spacing-m);
+  }
+
+  a {
+    text-decoration: none;
+    color: var(--wui-color-fg-175);
+    font-weight: 500;
+  }
+`;
+var C = function(n, e, r, o) {
+  var i = arguments.length, t = i < 3 ? e : o === null ? o = Object.getOwnPropertyDescriptor(e, r) : o, c;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") t = Reflect.decorate(n, e, r, o);
+  else for (var s = n.length - 1; s >= 0; s--) (c = n[s]) && (t = (i < 3 ? c(t) : i > 3 ? c(e, r, t) : c(e, r)) || t);
+  return i > 3 && t && Object.defineProperty(e, r, t), t;
+};
+let d = class extends b {
+  constructor() {
+    super(), this.unsubscribe = [], this.remoteFeatures = a.state.remoteFeatures, this.unsubscribe.push(a.subscribeKey("remoteFeatures", (e) => this.remoteFeatures = e));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((e) => e());
+  }
+  render() {
+    var t;
+    const { termsConditionsUrl: e, privacyPolicyUrl: r } = a.state, o = (t = a.state.features) == null ? void 0 : t.legalCheckbox;
+    return !e && !r || o ? l`
+        <wui-flex flexDirection="column"> ${this.reownBrandingTemplate(!0)} </wui-flex>
+      ` : l`
+      <wui-flex flexDirection="column">
+        <wui-flex .padding=${["m", "s", "s", "s"]} justifyContent="center">
+          <wui-text color="fg-250" variant="small-400" align="center">
+            By connecting your wallet, you agree to our <br />
+            ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()}
+          </wui-text>
+        </wui-flex>
+        ${this.reownBrandingTemplate()}
+      </wui-flex>
+    `;
+  }
+  andTemplate() {
+    const { termsConditionsUrl: e, privacyPolicyUrl: r } = a.state;
+    return e && r ? "and" : "";
+  }
+  termsTemplate() {
+    const { termsConditionsUrl: e } = a.state;
+    return e ? l`<a href=${e} target="_blank" rel="noopener noreferrer"
+      >Terms of Service</a
+    >` : null;
+  }
+  privacyTemplate() {
+    const { privacyPolicyUrl: e } = a.state;
+    return e ? l`<a href=${e} target="_blank" rel="noopener noreferrer"
+      >Privacy Policy</a
+    >` : null;
+  }
+  reownBrandingTemplate(e = !1) {
+    var r;
+    return (r = this.remoteFeatures) != null && r.reownBranding ? e ? l`<wui-ux-by-reown class="branding-only"></wui-ux-by-reown>` : l`<wui-ux-by-reown></wui-ux-by-reown>` : null;
+  }
+};
+d.styles = [D];
+C([
+  y()
+], d.prototype, "remoteFeatures", void 0);
+d = C([
+  w("w3m-legal-footer")
+], d);
+export {
+  g as O
+};

package/dist/widget/index-CiKfAu1E.js

@@ -0,0 +1,79 @@
+import { i as p, a as u, R as f, M as b } from "./index-CK94R-H7.js";
+import { x as d } from "./lit-html-BRjl1r6K.js";
+import { n as g, r as m, c as M } from "./if-defined-DRXJEhv7.js";
+import { T as l } from "./index-BiCU29wK.js";
+const T = {
+  interpolate(i, e, o) {
+    if (i.length !== 2 || e.length !== 2)
+      throw new Error("inputRange and outputRange must be an array of length 2");
+    const n = i[0] || 0, r = i[1] || 0, t = e[0] || 0, s = e[1] || 0;
+    return o < n ? t : o > r ? s : (s - t) / (r - n) * (o - n) + t;
+  }
+}, v = p`
+  :host {
+    width: 100%;
+    display: block;
+  }
+`;
+var a = function(i, e, o, n) {
+  var r = arguments.length, t = r < 3 ? e : n === null ? n = Object.getOwnPropertyDescriptor(e, o) : n, s;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") t = Reflect.decorate(i, e, o, n);
+  else for (var c = i.length - 1; c >= 0; c--) (s = i[c]) && (t = (r < 3 ? s(t) : r > 3 ? s(e, o, t) : s(e, o)) || t);
+  return r > 3 && t && Object.defineProperty(e, o, t), t;
+};
+let h = class extends u {
+  constructor() {
+    super(), this.unsubscribe = [], this.text = "", this.open = l.state.open, this.unsubscribe.push(f.subscribeKey("view", () => {
+      l.hide();
+    }), b.subscribeKey("open", (e) => {
+      e || l.hide();
+    }), l.subscribeKey("open", (e) => {
+      this.open = e;
+    }));
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((e) => e()), l.hide();
+  }
+  render() {
+    return d`
+      <div
+        @pointermove=${this.onMouseEnter.bind(this)}
+        @pointerleave=${this.onMouseLeave.bind(this)}
+      >
+        ${this.renderChildren()}
+      </div>
+    `;
+  }
+  renderChildren() {
+    return d`<slot></slot> `;
+  }
+  onMouseEnter() {
+    const e = this.getBoundingClientRect();
+    this.open || l.showTooltip({
+      message: this.text,
+      triggerRect: {
+        width: e.width,
+        height: e.height,
+        left: e.left,
+        top: e.top
+      },
+      variant: "shade"
+    });
+  }
+  onMouseLeave(e) {
+    this.contains(e.relatedTarget) || l.hide();
+  }
+};
+h.styles = [v];
+a([
+  g()
+], h.prototype, "text", void 0);
+a([
+  m()
+], h.prototype, "open", void 0);
+h = a([
+  M("w3m-tooltip-trigger")
+], h);
+export {
+  T as M
+};

package/dist/widget/index-CkCu6rMi.js

@@ -0,0 +1,258 @@
+import { i as v, r as g, j as h, a as p } from "./index-CK94R-H7.js";
+import { x as u } from "./lit-html-BRjl1r6K.js";
+import { n as t, c as w, U as m } from "./if-defined-DRXJEhv7.js";
+import "./index-CDlhy529.js";
+const k = {
+  URLS: {
+    FAQ: "https://walletconnect.com/faq"
+  }
+}, f = v`
+  a {
+    border: 1px solid var(--wui-color-gray-glass-010);
+    border-radius: var(--wui-border-radius-3xl);
+  }
+
+  wui-image {
+    border-radius: var(--wui-border-radius-3xl);
+    overflow: hidden;
+  }
+
+  a.disabled > wui-icon:not(.image-icon),
+  a.disabled > wui-image {
+    filter: grayscale(1);
+  }
+
+  a[data-variant='fill'] {
+    color: var(--wui-color-inverse-100);
+    background-color: var(--wui-color-accent-100);
+  }
+
+  a[data-variant='shade'],
+  a[data-variant='shadeSmall'] {
+    background-color: transparent;
+    background-color: var(--wui-color-gray-glass-010);
+    color: var(--wui-color-fg-200);
+  }
+
+  a[data-variant='success'] {
+    column-gap: var(--wui-spacing-xxs);
+    border: 1px solid var(--wui-color-success-glass-010);
+    background-color: var(--wui-color-success-glass-010);
+    color: var(--wui-color-success-100);
+  }
+
+  a[data-variant='error'] {
+    column-gap: var(--wui-spacing-xxs);
+    border: 1px solid var(--wui-color-error-glass-010);
+    background-color: var(--wui-color-error-glass-010);
+    color: var(--wui-color-error-100);
+  }
+
+  a[data-variant='transparent'] {
+    column-gap: var(--wui-spacing-xxs);
+    background-color: transparent;
+    color: var(--wui-color-fg-150);
+  }
+
+  a[data-variant='transparent'],
+  a[data-variant='success'],
+  a[data-variant='shadeSmall'],
+  a[data-variant='error'] {
+    padding: 7px var(--wui-spacing-s) 7px 10px;
+  }
+
+  a[data-variant='transparent']:has(wui-text:first-child),
+  a[data-variant='success']:has(wui-text:first-child),
+  a[data-variant='shadeSmall']:has(wui-text:first-child),
+  a[data-variant='error']:has(wui-text:first-child) {
+    padding: 7px var(--wui-spacing-s);
+  }
+
+  a[data-variant='fill'],
+  a[data-variant='shade'] {
+    column-gap: var(--wui-spacing-xs);
+    padding: var(--wui-spacing-xxs) var(--wui-spacing-m) var(--wui-spacing-xxs)
+      var(--wui-spacing-xs);
+  }
+
+  a[data-variant='fill']:has(wui-text:first-child),
+  a[data-variant='shade']:has(wui-text:first-child) {
+    padding: 9px var(--wui-spacing-m) 9px var(--wui-spacing-m);
+  }
+
+  a[data-variant='fill'] > wui-image,
+  a[data-variant='shade'] > wui-image {
+    width: 24px;
+    height: 24px;
+  }
+
+  a[data-variant='fill'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
+  }
+
+  a[data-variant='shade'] > wui-image,
+  a[data-variant='shadeSmall'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  a[data-variant='fill'] > wui-icon:not(.image-icon),
+  a[data-variant='shade'] > wui-icon:not(.image-icon) {
+    width: 14px;
+    height: 14px;
+  }
+
+  a[data-variant='transparent'] > wui-image,
+  a[data-variant='success'] > wui-image,
+  a[data-variant='shadeSmall'] > wui-image,
+  a[data-variant='error'] > wui-image {
+    width: 14px;
+    height: 14px;
+  }
+
+  a[data-variant='transparent'] > wui-icon:not(.image-icon),
+  a[data-variant='success'] > wui-icon:not(.image-icon),
+  a[data-variant='shadeSmall'] > wui-icon:not(.image-icon),
+  a[data-variant='error'] > wui-icon:not(.image-icon) {
+    width: 12px;
+    height: 12px;
+  }
+
+  a[data-variant='fill']:focus-visible {
+    background-color: var(--wui-color-accent-090);
+  }
+
+  a[data-variant='shade']:focus-visible,
+  a[data-variant='shadeSmall']:focus-visible {
+    background-color: var(--wui-color-gray-glass-015);
+  }
+
+  a[data-variant='transparent']:focus-visible {
+    background-color: var(--wui-color-gray-glass-005);
+  }
+
+  a[data-variant='success']:focus-visible {
+    background-color: var(--wui-color-success-glass-015);
+  }
+
+  a[data-variant='error']:focus-visible {
+    background-color: var(--wui-color-error-glass-015);
+  }
+
+  a.disabled {
+    color: var(--wui-color-gray-glass-015);
+    background-color: var(--wui-color-gray-glass-015);
+    pointer-events: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    a[data-variant='fill']:hover {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    a[data-variant='shade']:hover,
+    a[data-variant='shadeSmall']:hover {
+      background-color: var(--wui-color-gray-glass-015);
+    }
+
+    a[data-variant='transparent']:hover {
+      background-color: var(--wui-color-gray-glass-005);
+    }
+
+    a[data-variant='success']:hover {
+      background-color: var(--wui-color-success-glass-015);
+    }
+
+    a[data-variant='error']:hover {
+      background-color: var(--wui-color-error-glass-015);
+    }
+  }
+
+  a[data-variant='fill']:active {
+    background-color: var(--wui-color-accent-080);
+  }
+
+  a[data-variant='shade']:active,
+  a[data-variant='shadeSmall']:active {
+    background-color: var(--wui-color-gray-glass-020);
+  }
+
+  a[data-variant='transparent']:active {
+    background-color: var(--wui-color-gray-glass-010);
+  }
+
+  a[data-variant='success']:active {
+    background-color: var(--wui-color-success-glass-020);
+  }
+
+  a[data-variant='error']:active {
+    background-color: var(--wui-color-error-glass-020);
+  }
+`;
+var r = function(s, o, e, n) {
+  var c = arguments.length, i = c < 3 ? o : n === null ? n = Object.getOwnPropertyDescriptor(o, e) : n, l;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(s, o, e, n);
+  else for (var d = s.length - 1; d >= 0; d--) (l = s[d]) && (i = (c < 3 ? l(i) : c > 3 ? l(o, e, i) : l(o, e)) || i);
+  return c > 3 && i && Object.defineProperty(o, e, i), i;
+};
+let a = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "fill", this.imageSrc = void 0, this.imageIcon = void 0, this.imageIconSize = "md", this.disabled = !1, this.icon = "externalLink", this.href = "", this.text = void 0;
+  }
+  render() {
+    const e = this.variant === "success" || this.variant === "transparent" || this.variant === "shadeSmall" ? "small-600" : "paragraph-600";
+    return u`
+      <a
+        rel="noreferrer"
+        target="_blank"
+        href=${this.href}
+        class=${this.disabled ? "disabled" : ""}
+        data-variant=${this.variant}
+      >
+        ${this.imageTemplate()}
+        <wui-text variant=${e} color="inherit">
+          ${this.title ? this.title : m.getHostName(this.href)}
+        </wui-text>
+        <wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>
+      </a>
+    `;
+  }
+  imageTemplate() {
+    return this.imageSrc ? u`<wui-image src=${this.imageSrc}></wui-image>` : this.imageIcon ? u`<wui-icon
+        name=${this.imageIcon}
+        color="inherit"
+        size=${this.imageIconSize}
+        class="image-icon"
+      ></wui-icon>` : null;
+  }
+};
+a.styles = [g, h, f];
+r([
+  t()
+], a.prototype, "variant", void 0);
+r([
+  t()
+], a.prototype, "imageSrc", void 0);
+r([
+  t()
+], a.prototype, "imageIcon", void 0);
+r([
+  t()
+], a.prototype, "imageIconSize", void 0);
+r([
+  t({ type: Boolean })
+], a.prototype, "disabled", void 0);
+r([
+  t()
+], a.prototype, "icon", void 0);
+r([
+  t()
+], a.prototype, "href", void 0);
+r([
+  t()
+], a.prototype, "text", void 0);
+a = r([
+  w("wui-chip")
+], a);
+export {
+  k as N
+};