@doiim/reown-appkit-scaffold-ui 1.8.19-doiim.0

package/dist/esm/src/modal/w3m-modal/styles.js

@@ -0,0 +1,226 @@
+import { css } from '@doiim/reown-appkit-ui';
+export default css `
+  :host {
+    z-index: ${({ tokens }) => tokens.core.zIndex};
+    display: block;
+    backface-visibility: hidden;
+    will-change: opacity;
+    /* !important defends against consumer stylesheets that apply
+     * \`position: relative\` via the universal selector (common in
+     * Vue starter templates); without it the modal lands in normal
+     * document flow, below the viewport. */
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    opacity: 0;
+    background-color: ${({ tokens }) => tokens.theme.overlay};
+    backdrop-filter: blur(0px);
+    transition:
+      opacity ${({ durations }) => durations['lg']} ${({ easings }) => easings['ease-out-power-2']},
+      backdrop-filter ${({ durations }) => durations['lg']}
+        ${({ easings }) => easings['ease-out-power-2']};
+    will-change: opacity;
+  }
+
+  :host(.open) {
+    opacity: 1;
+    backdrop-filter: blur(8px);
+  }
+
+  :host(.appkit-modal) {
+    position: relative;
+    pointer-events: unset;
+    background: none;
+    width: 100%;
+    opacity: 1;
+  }
+
+  wui-card {
+    max-width: var(--apkt-modal-width);
+    width: 100%;
+    position: relative;
+    outline: none;
+    transform: translateY(4px);
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
+    transition:
+      transform ${({ durations }) => durations['lg']}
+        ${({ easings }) => easings['ease-out-power-2']},
+      border-radius ${({ durations }) => durations['lg']}
+        ${({ easings }) => easings['ease-out-power-1']},
+      background-color ${({ durations }) => durations['lg']}
+        ${({ easings }) => easings['ease-out-power-1']},
+      box-shadow ${({ durations }) => durations['lg']}
+        ${({ easings }) => easings['ease-out-power-1']};
+    will-change: border-radius, background-color, transform, box-shadow;
+    background-color: ${({ tokens }) => tokens.theme.backgroundPrimary};
+    padding: var(--local-modal-padding);
+    box-sizing: border-box;
+  }
+
+  :host(.open) wui-card {
+    transform: translateY(0px);
+  }
+
+  wui-card::before {
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: clamp(0px, var(--apkt-borderRadius-8), 44px);
+    transition: box-shadow ${({ durations }) => durations['lg']}
+      ${({ easings }) => easings['ease-out-power-2']};
+    transition-delay: ${({ durations }) => durations['md']};
+    will-change: box-shadow;
+  }
+
+  :host([data-mobile-fullscreen='true']) wui-card::before {
+    border-radius: 0px;
+  }
+
+  :host([data-border='true']) wui-card::before {
+    box-shadow: inset 0px 0px 0px 4px ${({ tokens }) => tokens.theme.foregroundSecondary};
+  }
+
+  :host([data-border='false']) wui-card::before {
+    box-shadow: inset 0px 0px 0px 1px ${({ tokens }) => tokens.theme.borderPrimaryDark};
+  }
+
+  :host([data-border='true']) wui-card {
+    animation:
+      fade-in ${({ durations }) => durations['lg']} ${({ easings }) => easings['ease-out-power-2']},
+      card-background-border var(--apkt-duration-dynamic)
+        ${({ easings }) => easings['ease-out-power-2']};
+    animation-fill-mode: backwards, both;
+    animation-delay: var(--apkt-duration-dynamic);
+  }
+
+  :host([data-border='false']) wui-card {
+    animation:
+      fade-in ${({ durations }) => durations['lg']} ${({ easings }) => easings['ease-out-power-2']},
+      card-background-default var(--apkt-duration-dynamic)
+        ${({ easings }) => easings['ease-out-power-2']};
+    animation-fill-mode: backwards, both;
+    animation-delay: 0s;
+  }
+
+  :host(.appkit-modal) wui-card {
+    max-width: var(--apkt-modal-width);
+  }
+
+  wui-card[shake='true'] {
+    animation:
+      fade-in ${({ durations }) => durations['lg']} ${({ easings }) => easings['ease-out-power-2']},
+      w3m-shake ${({ durations }) => durations['xl']}
+        ${({ easings }) => easings['ease-out-power-2']};
+  }
+
+  wui-flex {
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (max-height: 700px) and (min-width: 431px) {
+    wui-flex {
+      align-items: flex-start;
+    }
+
+    wui-card {
+      margin: var(--apkt-spacing-6) 0px;
+    }
+  }
+
+  @media (max-width: 430px) {
+    :host([data-mobile-fullscreen='true']) {
+      height: 100dvh;
+    }
+    :host([data-mobile-fullscreen='true']) wui-flex {
+      align-items: stretch;
+    }
+    :host([data-mobile-fullscreen='true']) wui-card {
+      max-width: 100%;
+      height: 100%;
+      border-radius: 0;
+      border: none;
+    }
+    :host(:not([data-mobile-fullscreen='true'])) wui-flex {
+      align-items: flex-end;
+    }
+
+    :host(:not([data-mobile-fullscreen='true'])) wui-card {
+      max-width: 100%;
+      border-bottom: none;
+    }
+
+    :host(:not([data-mobile-fullscreen='true'])) wui-card[data-embedded='true'] {
+      border-bottom-left-radius: clamp(0px, var(--apkt-borderRadius-8), 44px);
+      border-bottom-right-radius: clamp(0px, var(--apkt-borderRadius-8), 44px);
+    }
+
+    :host(:not([data-mobile-fullscreen='true'])) wui-card:not([data-embedded='true']) {
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+
+    wui-card[shake='true'] {
+      animation: w3m-shake 0.5s ${({ easings }) => easings['ease-out-power-2']};
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      transform: scale(0.99) translateY(4px);
+    }
+    100% {
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @keyframes w3m-shake {
+    0% {
+      transform: scale(1) rotate(0deg);
+    }
+    20% {
+      transform: scale(1) rotate(-1deg);
+    }
+    40% {
+      transform: scale(1) rotate(1.5deg);
+    }
+    60% {
+      transform: scale(1) rotate(-1.5deg);
+    }
+    80% {
+      transform: scale(1) rotate(1deg);
+    }
+    100% {
+      transform: scale(1) rotate(0deg);
+    }
+  }
+
+  @keyframes card-background-border {
+    from {
+      background-color: ${({ tokens }) => tokens.theme.backgroundPrimary};
+    }
+    to {
+      background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    }
+  }
+
+  @keyframes card-background-default {
+    from {
+      background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
+    }
+    to {
+      background-color: ${({ tokens }) => tokens.theme.backgroundPrimary};
+    }
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/modal/w3m-modal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modal/w3m-modal/styles.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/modal/w3m-network-button/index.js

@@ -0,0 +1,125 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { AssetController, AssetUtil, ChainController, EventsController, ModalController, OptionsController } from '@doiim/reown-appkit-controllers';
+import { customElement } from '@doiim/reown-appkit-ui';
+import '@doiim/reown-appkit-ui/wui-network-button';
+import styles from './styles.js';
+class W3mNetworkButtonBase extends LitElement {
+    constructor() {
+        super();
+        this.unsubscribe = [];
+        this.disabled = false;
+        this.network = ChainController.state.activeCaipNetwork;
+        this.networkImage = AssetUtil.getNetworkImage(this.network);
+        this.caipAddress = ChainController.state.activeCaipAddress;
+        this.loading = ModalController.state.loading;
+        this.isSupported = OptionsController.state.allowUnsupportedChain
+            ? true
+            : ChainController.state.activeChain
+                ? ChainController.checkIfSupportedNetwork(ChainController.state.activeChain)
+                : true;
+        this.unsubscribe.push(...[
+            AssetController.subscribeNetworkImages(() => {
+                this.networkImage = AssetUtil.getNetworkImage(this.network);
+            }),
+            ChainController.subscribeKey('activeCaipAddress', val => {
+                this.caipAddress = val;
+            }),
+            ChainController.subscribeKey('activeCaipNetwork', val => {
+                this.network = val;
+                this.networkImage = AssetUtil.getNetworkImage(val);
+                this.isSupported = val?.chainNamespace
+                    ? ChainController.checkIfSupportedNetwork(val.chainNamespace)
+                    : true;
+                AssetUtil.fetchNetworkImage(val?.assets?.imageId);
+            }),
+            ModalController.subscribeKey('loading', val => (this.loading = val))
+        ]);
+    }
+    firstUpdated() {
+        AssetUtil.fetchNetworkImage(this.network?.assets?.imageId);
+    }
+    disconnectedCallback() {
+        this.unsubscribe.forEach(unsubscribe => unsubscribe());
+    }
+    render() {
+        const isSupported = this.network
+            ? ChainController.checkIfSupportedNetwork(this.network.chainNamespace)
+            : true;
+        return html `
+      <wui-network-button
+        .disabled=${Boolean(this.disabled || this.loading)}
+        .isUnsupportedChain=${OptionsController.state.allowUnsupportedChain ? false : !isSupported}
+        imageSrc=${ifDefined(this.networkImage)}
+        @click=${this.onClick.bind(this)}
+        data-testid="w3m-network-button"
+      >
+        ${this.getLabel()}
+        <slot></slot>
+      </wui-network-button>
+    `;
+    }
+    getLabel() {
+        if (this.network) {
+            if (!this.isSupported && !OptionsController.state.allowUnsupportedChain) {
+                return 'Switch Network';
+            }
+            return this.network.name;
+        }
+        if (this.label) {
+            return this.label;
+        }
+        if (this.caipAddress) {
+            return 'Unknown Network';
+        }
+        return 'Select Network';
+    }
+    onClick() {
+        if (!this.loading) {
+            EventsController.sendEvent({ type: 'track', event: 'CLICK_NETWORKS' });
+            ModalController.open({ view: 'Networks' });
+        }
+    }
+}
+W3mNetworkButtonBase.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], W3mNetworkButtonBase.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], W3mNetworkButtonBase.prototype, "label", void 0);
+__decorate([
+    state()
+], W3mNetworkButtonBase.prototype, "network", void 0);
+__decorate([
+    state()
+], W3mNetworkButtonBase.prototype, "networkImage", void 0);
+__decorate([
+    state()
+], W3mNetworkButtonBase.prototype, "caipAddress", void 0);
+__decorate([
+    state()
+], W3mNetworkButtonBase.prototype, "loading", void 0);
+__decorate([
+    state()
+], W3mNetworkButtonBase.prototype, "isSupported", void 0);
+let W3mNetworkButton = class W3mNetworkButton extends W3mNetworkButtonBase {
+};
+W3mNetworkButton = __decorate([
+    customElement('w3m-network-button')
+], W3mNetworkButton);
+export { W3mNetworkButton };
+let AppKitNetworkButton = class AppKitNetworkButton extends W3mNetworkButtonBase {
+};
+AppKitNetworkButton = __decorate([
+    customElement('appkit-network-button')
+], AppKitNetworkButton);
+export { AppKitNetworkButton };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/modal/w3m-network-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/modal/w3m-network-button/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/modal/w3m-network-button/styles.js

@@ -0,0 +1,8 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+    width: max-content;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/modal/w3m-network-button/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modal/w3m-network-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;CAKjB,CAAA"}

package/dist/esm/src/modal/w3m-onramp-widget/index.js

@@ -0,0 +1,143 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ChainController, ModalController, OnRampController } from '@doiim/reown-appkit-controllers';
+import { customElement } from '@doiim/reown-appkit-ui';
+import '@doiim/reown-appkit-ui/wui-button';
+import '@doiim/reown-appkit-ui/wui-flex';
+import '../../partials/w3m-onramp-input/index.js';
+import styles from './styles.js';
+const PAYMENT_CURRENCY_SYMBOLS = {
+    USD: '$',
+    EUR: '€',
+    GBP: '£'
+};
+const BUY_PRESET_AMOUNTS = [100, 250, 500, 1000];
+let W3mOnrampWidget = class W3mOnrampWidget extends LitElement {
+    constructor() {
+        super();
+        this.unsubscribe = [];
+        this.disabled = false;
+        this.caipAddress = ChainController.state.activeCaipAddress;
+        this.loading = ModalController.state.loading;
+        this.paymentCurrency = OnRampController.state.paymentCurrency;
+        this.paymentAmount = OnRampController.state.paymentAmount;
+        this.purchaseAmount = OnRampController.state.purchaseAmount;
+        this.quoteLoading = OnRampController.state.quotesLoading;
+        this.unsubscribe.push(...[
+            ChainController.subscribeKey('activeCaipAddress', val => (this.caipAddress = val)),
+            ModalController.subscribeKey('loading', val => {
+                this.loading = val;
+            }),
+            OnRampController.subscribe(val => {
+                this.paymentCurrency = val.paymentCurrency;
+                this.paymentAmount = val.paymentAmount;
+                this.purchaseAmount = val.purchaseAmount;
+                this.quoteLoading = val.quotesLoading;
+            })
+        ]);
+    }
+    disconnectedCallback() {
+        this.unsubscribe.forEach(unsubscribe => unsubscribe());
+    }
+    render() {
+        return html `
+      <wui-flex flexDirection="column" justifyContent="center" alignItems="center">
+        <wui-flex flexDirection="column" alignItems="center" gap="2">
+          <w3m-onramp-input
+            type="Fiat"
+            @inputChange=${this.onPaymentAmountChange.bind(this)}
+            .value=${this.paymentAmount || 0}
+          ></w3m-onramp-input>
+          <w3m-onramp-input
+            type="Token"
+            .value=${this.purchaseAmount || 0}
+            .loading=${this.quoteLoading}
+          ></w3m-onramp-input>
+          <wui-flex justifyContent="space-evenly" class="amounts-container" gap="2">
+            ${BUY_PRESET_AMOUNTS.map(amount => html `<wui-button
+                  variant=${this.paymentAmount === amount
+            ? 'accent-secondary'
+            : 'neutral-secondary'}
+                  size="md"
+                  textVariant="md-medium"
+                  fullWidth
+                  @click=${() => this.selectPresetAmount(amount)}
+                  >${`${PAYMENT_CURRENCY_SYMBOLS[this.paymentCurrency?.id || 'USD']} ${amount}`}</wui-button
+                >`)}
+          </wui-flex>
+          ${this.templateButton()}
+        </wui-flex>
+      </wui-flex>
+    `;
+    }
+    templateButton() {
+        return this.caipAddress
+            ? html `<wui-button
+          @click=${this.getQuotes.bind(this)}
+          variant="accent-primary"
+          fullWidth
+          size="lg"
+          borderRadius="xs"
+        >
+          Get quotes
+        </wui-button>`
+            : html `<wui-button
+          @click=${this.openModal.bind(this)}
+          variant="accent"
+          fullWidth
+          size="lg"
+          borderRadius="xs"
+        >
+          Connect wallet
+        </wui-button>`;
+    }
+    getQuotes() {
+        if (!this.loading) {
+            ModalController.open({ view: 'OnRampProviders' });
+        }
+    }
+    openModal() {
+        ModalController.open({ view: 'Connect' });
+    }
+    async onPaymentAmountChange(event) {
+        OnRampController.setPaymentAmount(Number(event.detail));
+        await OnRampController.getQuote();
+    }
+    async selectPresetAmount(amount) {
+        OnRampController.setPaymentAmount(amount);
+        await OnRampController.getQuote();
+    }
+};
+W3mOnrampWidget.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], W3mOnrampWidget.prototype, "disabled", void 0);
+__decorate([
+    state()
+], W3mOnrampWidget.prototype, "caipAddress", void 0);
+__decorate([
+    state()
+], W3mOnrampWidget.prototype, "loading", void 0);
+__decorate([
+    state()
+], W3mOnrampWidget.prototype, "paymentCurrency", void 0);
+__decorate([
+    state()
+], W3mOnrampWidget.prototype, "paymentAmount", void 0);
+__decorate([
+    state()
+], W3mOnrampWidget.prototype, "purchaseAmount", void 0);
+__decorate([
+    state()
+], W3mOnrampWidget.prototype, "quoteLoading", void 0);
+W3mOnrampWidget = __decorate([
+    customElement('w3m-onramp-widget')
+], W3mOnrampWidget);
+export { W3mOnrampWidget };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/modal/w3m-onramp-widget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/modal/w3m-onramp-widget/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/modal/w3m-onramp-widget/styles.js

@@ -0,0 +1,17 @@
+import { css } from '@doiim/reown-appkit-ui';
+export default css `
+  :host > wui-flex {
+    width: 100%;
+    max-width: 360px;
+  }
+
+  :host > wui-flex > wui-flex {
+    border-radius: ${({ borderRadius }) => borderRadius['8']};
+    width: 100%;
+  }
+
+  .amounts-container {
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/modal/w3m-onramp-widget/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/modal/w3m-onramp-widget/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,GAAG,CAAA;;;;;;;qBAOG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC;;;;;;;CAO3D,CAAA"}