@reown/appkit-scaffold-ui 0.0.3

package/dist/esm/src/views/w3m-register-account-name-view/index.js

@@ -0,0 +1,227 @@
+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 { customElement } from '@reown/appkit-ui';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import styles from './styles.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { CoreHelperUtil, SnackController, EnsController, EventsController, AccountController } from '@reown/appkit-core';
+import { W3mFrameRpcConstants } from '@reown/appkit-wallet';
+let W3mRegisterAccountNameView = class W3mRegisterAccountNameView extends LitElement {
+    constructor() {
+        super();
+        this.formRef = createRef();
+        this.usubscribe = [];
+        this.name = '';
+        this.error = '';
+        this.loading = EnsController.state.loading;
+        this.suggestions = EnsController.state.suggestions;
+        this.registered = false;
+        this.profileName = AccountController.state.profileName;
+        this.onDebouncedNameInputChange = CoreHelperUtil.debounce((value) => {
+            if (EnsController.validateName(value)) {
+                this.error = '';
+                this.name = value;
+                EnsController.getSuggestions(value);
+                EnsController.isNameRegistered(value).then(registered => {
+                    this.registered = registered;
+                });
+            }
+            else if (value.length < 4) {
+                this.error = 'Name must be at least 4 characters long';
+            }
+            else {
+                this.error = 'Can only contain letters, numbers and - characters';
+            }
+        });
+        this.usubscribe.push(...[
+            EnsController.subscribe(val => {
+                this.suggestions = val.suggestions;
+                this.loading = val.loading;
+            }),
+            AccountController.subscribeKey('profileName', val => {
+                this.profileName = val;
+                if (val) {
+                    this.error = 'You already own a name';
+                }
+            })
+        ]);
+    }
+    firstUpdated() {
+        this.formRef.value?.addEventListener('keydown', this.onEnterKey.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.usubscribe.forEach(unsub => unsub());
+        this.formRef.value?.removeEventListener('keydown', this.onEnterKey.bind(this));
+    }
+    render() {
+        return html `
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        gap="m"
+        .padding=${['0', 's', 'm', 's']}
+      >
+        <form ${ref(this.formRef)} @submit=${this.onSubmitName.bind(this)}>
+          <wui-ens-input
+            @inputChange=${this.onNameInputChange.bind(this)}
+            .errorMessage=${this.error}
+            .value=${this.name}
+          >
+          </wui-ens-input>
+          ${this.submitButtonTemplate()}
+          <input type="submit" hidden />
+        </form>
+        ${this.templateSuggestions()}
+      </wui-flex>
+    `;
+    }
+    submitButtonTemplate() {
+        const showSubmit = this.isAllowedToSubmit();
+        return showSubmit
+            ? html `
+          <wui-icon-link
+            size="sm"
+            icon="chevronRight"
+            iconcolor="accent-100"
+            @click=${this.onSubmitName.bind(this)}
+          >
+          </wui-icon-link>
+        `
+            : null;
+    }
+    onSelectSuggestion(name) {
+        return () => {
+            this.name = name;
+            this.registered = false;
+            this.requestUpdate();
+        };
+    }
+    onNameInputChange(event) {
+        this.onDebouncedNameInputChange(event.detail);
+    }
+    nameSuggestionTagTemplate() {
+        if (this.loading) {
+            return html `<wui-loading-spinner size="lg" color="fg-100"></wui-loading-spinner>`;
+        }
+        return this.registered
+            ? html `<wui-tag variant="shade" size="lg">Registered</wui-tag>`
+            : html `<wui-tag variant="success" size="lg">Available</wui-tag>`;
+    }
+    templateSuggestions() {
+        if (!this.name || this.name.length < 4 || this.error) {
+            return null;
+        }
+        const suggestions = this.registered ? this.suggestions.filter(s => s.name !== this.name) : [];
+        return html `<wui-flex flexDirection="column" gap="xxs" alignItems="center">
+      <wui-flex
+        data-testid="account-name-suggestion"
+        .padding=${['m', 'm', 'm', 'm']}
+        justifyContent="space-between"
+        class="suggestion"
+      >
+        <wui-text color="fg-100" variant="paragraph-400" class="suggested-name">
+          ${this.name}</wui-text
+        >${this.nameSuggestionTagTemplate()}
+      </wui-flex>
+      ${suggestions.map(suggestion => this.availableNameTemplate(suggestion.name))}
+    </wui-flex>`;
+    }
+    availableNameTemplate(suggestion) {
+        return html ` <wui-flex
+      data-testid="account-name-suggestion"
+      .padding=${['m', 'm', 'm', 'm']}
+      justifyContent="space-between"
+      class="suggestion"
+      @click=${this.onSelectSuggestion(suggestion)}
+    >
+      <wui-text color="fg-100" variant="paragraph-400" class="suggested-name">
+        ${suggestion}
+      </wui-text>
+      <wui-tag variant="success" size="lg">Available</wui-tag>
+    </wui-flex>`;
+    }
+    isAllowedToSubmit() {
+        return (!this.loading &&
+            !this.registered &&
+            !this.error &&
+            !this.profileName &&
+            EnsController.validateName(this.name));
+    }
+    async onSubmitName() {
+        try {
+            if (!this.isAllowedToSubmit()) {
+                return;
+            }
+            EventsController.sendEvent({
+                type: 'track',
+                event: 'REGISTER_NAME_INITIATED',
+                properties: {
+                    isSmartAccount: AccountController.state.preferredAccountType ===
+                        W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,
+                    ensName: this.name
+                }
+            });
+            await EnsController.registerName(this.name);
+            EventsController.sendEvent({
+                type: 'track',
+                event: 'REGISTER_NAME_SUCCESS',
+                properties: {
+                    isSmartAccount: AccountController.state.preferredAccountType ===
+                        W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,
+                    ensName: this.name
+                }
+            });
+        }
+        catch (error) {
+            SnackController.showError(error.message);
+            EventsController.sendEvent({
+                type: 'track',
+                event: 'REGISTER_NAME_ERROR',
+                properties: {
+                    isSmartAccount: AccountController.state.preferredAccountType ===
+                        W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,
+                    ensName: this.name,
+                    error: error?.message || 'Unknown error'
+                }
+            });
+        }
+    }
+    onEnterKey(event) {
+        if (event.key === 'Enter' && this.isAllowedToSubmit()) {
+            this.onSubmitName();
+        }
+    }
+};
+W3mRegisterAccountNameView.styles = styles;
+__decorate([
+    property()
+], W3mRegisterAccountNameView.prototype, "errorMessage", void 0);
+__decorate([
+    state()
+], W3mRegisterAccountNameView.prototype, "name", void 0);
+__decorate([
+    state()
+], W3mRegisterAccountNameView.prototype, "error", void 0);
+__decorate([
+    state()
+], W3mRegisterAccountNameView.prototype, "loading", void 0);
+__decorate([
+    state()
+], W3mRegisterAccountNameView.prototype, "suggestions", void 0);
+__decorate([
+    state()
+], W3mRegisterAccountNameView.prototype, "registered", void 0);
+__decorate([
+    state()
+], W3mRegisterAccountNameView.prototype, "profileName", void 0);
+W3mRegisterAccountNameView = __decorate([
+    customElement('w3m-register-account-name-view')
+], W3mRegisterAccountNameView);
+export { W3mRegisterAccountNameView };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/views/w3m-register-account-name-view/index.js.map

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

package/dist/esm/src/views/w3m-register-account-name-view/styles.js

@@ -0,0 +1,34 @@
+import { css } from 'lit';
+export default css `
+  wui-flex {
+    width: 100%;
+  }
+
+  .suggestion {
+    background: var(--wui-color-gray-glass-002);
+    border-radius: var(--wui-border-radius-xs);
+  }
+
+  .suggestion:hover {
+    background-color: var(--wui-color-gray-glass-005);
+    cursor: pointer;
+  }
+
+  .suggested-name {
+    max-width: 75%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  form {
+    width: 100%;
+  }
+
+  wui-icon-link {
+    position: absolute;
+    right: 20px;
+    transform: translateY(11px);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-register-account-name-view/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-register-account-name-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BjB,CAAA"}

package/dist/esm/src/views/w3m-select-addresses-view/index.js

@@ -0,0 +1,147 @@
+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 { AccountController, ChainController, ConnectionController, ModalController, OptionsController, RouterController } from '@reown/appkit-core';
+import { customElement } from '@reown/appkit-ui';
+import { LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './styles.js';
+let W3mSelectAddressesView = class W3mSelectAddressesView extends LitElement {
+    constructor() {
+        super();
+        this.metadata = OptionsController.state.metadata;
+        this.allAccounts = AccountController.state.allAccounts;
+        this.selectedAccounts = AccountController.state.allAccounts;
+        this.selectAll = true;
+        this.approved = false;
+        this.isApproving = false;
+        this.getAddressTemplate = (account) => {
+            const checked = this.selectedAccounts.some(_account => _account.address === account.address);
+            return html `<wui-list-account accountAddress="${account.address}" accountType="${account.type}">
+      <input
+        id="${account.address}"
+        slot="action"
+        type="checkbox"
+        .checked="${checked}"
+        @change="${this.handleClick(account)}"
+      />
+    </wui-list-account>`;
+        };
+        this.onSelectAll = (event) => {
+            const checked = event.target.checked;
+            this.selectAll = this.selectedAccounts.length === this.allAccounts.length;
+            this.allAccounts.forEach(account => {
+                this.onSelect(account, checked);
+            });
+        };
+        this.onSelect = (account, add) => {
+            if (add) {
+                this.selectedAccounts.push(account);
+            }
+            else {
+                this.selectedAccounts = this.selectedAccounts.filter(a => a.address !== account.address);
+            }
+            if (this.selectedAccounts.length > 0) {
+                this.selectAll = this.selectedAccounts.length === this.allAccounts.length;
+            }
+        };
+        AccountController.subscribeKey('allAccounts', allAccounts => {
+            this.allAccounts = allAccounts;
+        });
+    }
+    render() {
+        return html `
+    <wui-flex justifyContent="center" .padding=${['xl', '0', 'xl', '0']}>
+      <wui-banner-img imageSrc="${ifDefined(this.metadata?.icons[0])}" text="${ifDefined(this.metadata?.url)}" size="sm"></wui-banner>
+    </wui-flex>
+    <wui-flex .padding=${['0', 'xl', '0', 'xl']} flexDirection="row" justifyContent="space-between">
+        <wui-text variant="paragraph-400" color="fg-200">Select all</wui-text>
+        <input type="checkbox" .checked=${this.selectAll}  @click=${this.onSelectAll.bind(this)} />
+    </wui-flex>
+      <wui-flex flexDirection="column" .padding=${['l', 'xl', 'xl', 'xl']}>
+        ${this.allAccounts.map(account => this.getAddressTemplate(account))}
+      </wui-flex>
+      <wui-flex .padding=${['l', 'xl', 'xl', 'xl']} gap="s" justifyContent="space-between">
+        <wui-button
+          size="md"
+          ?fullwidth=${true}
+          variant="neutral"
+          @click=${this.onCancel.bind(this)}
+          data-testid="w3m-connecting-siwe-cancel"
+        >
+          Cancel
+        </wui-button>
+        <wui-button
+          size="md"
+          ?fullwidth=${true}
+          variant="main"
+          .disabled=${this.selectedAccounts.length === 0}
+          @click=${this.onContinue.bind(this)}
+          ?loading=${this.isApproving}
+        >
+          ${this.isApproving ? 'Signing...' : 'Continue'}
+        </wui-button>
+      </wui-flex>
+    `;
+    }
+    handleClick(account) {
+        return (event) => {
+            const target = event.target;
+            this.onSelect?.({ ...account }, target?.checked);
+        };
+    }
+    onContinue() {
+        if (this.selectedAccounts.length > 0) {
+            this.isApproving = true;
+            AccountController.setAllAccounts(this.selectedAccounts, ChainController.state.activeChain);
+            AccountController.setShouldUpdateToAddress(this.selectedAccounts[0]?.address ?? '', ChainController.state.activeChain);
+            this.approved = true;
+            this.isApproving = false;
+            ModalController.close();
+        }
+        else {
+            this.onCancel();
+        }
+    }
+    async onCancel() {
+        const { isConnected } = AccountController.state;
+        if (isConnected) {
+            await ConnectionController.disconnect();
+            ModalController.close();
+        }
+        else {
+            RouterController.push('Connect');
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (!this.approved) {
+            this.onCancel();
+        }
+    }
+};
+W3mSelectAddressesView.styles = styles;
+__decorate([
+    state()
+], W3mSelectAddressesView.prototype, "allAccounts", void 0);
+__decorate([
+    state()
+], W3mSelectAddressesView.prototype, "selectedAccounts", void 0);
+__decorate([
+    state()
+], W3mSelectAddressesView.prototype, "selectAll", void 0);
+__decorate([
+    state()
+], W3mSelectAddressesView.prototype, "approved", void 0);
+__decorate([
+    state()
+], W3mSelectAddressesView.prototype, "isApproving", void 0);
+W3mSelectAddressesView = __decorate([
+    customElement('w3m-select-addresses-view')
+], W3mSelectAddressesView);
+export { W3mSelectAddressesView };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/views/w3m-select-addresses-view/index.js.map

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

package/dist/esm/src/views/w3m-select-addresses-view/styles.js

@@ -0,0 +1,10 @@
+import { css } from 'lit';
+export default css `
+  input[type='checkbox'] {
+    all: revert;
+    width: var(--wui-spacing-xl);
+    height: var(--wui-spacing-xl);
+    accent-color: var(--wui-color-accent-100);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-select-addresses-view/styles.js.map

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