@reown/appkit-scaffold-ui
Version:
The full stack toolkit to build onchain app UX.
216 lines • 8.5 kB
JavaScript
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 { createRef, ref } from 'lit/directives/ref.js';
import { ConstantsUtil } from '@reown/appkit-common';
import { AccountController, ChainController, CoreHelperUtil, EnsController, EventsController, SnackController, getPreferredAccountType } from '@reown/appkit-controllers';
import { customElement } from '@reown/appkit-ui';
import '@reown/appkit-ui/wui-ens-input';
import '@reown/appkit-ui/wui-flex';
import '@reown/appkit-ui/wui-icon';
import '@reown/appkit-ui/wui-icon-link';
import '@reown/appkit-ui/wui-loading-spinner';
import '@reown/appkit-ui/wui-tag';
import '@reown/appkit-ui/wui-text';
import { W3mFrameRpcConstants } from '@reown/appkit-wallet/utils';
import styles from './styles.js';
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.profileName = AccountController.state.profileName;
this.onDebouncedNameInputChange = CoreHelperUtil.debounce((value) => {
if (EnsController.validateName(value)) {
this.error = '';
this.name = value;
EnsController.getSuggestions(value);
}
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)} =${this.onSubmitName.bind(this)}>
<wui-ens-input
=${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 isRegistered = this.suggestions.find(s => s.name?.split('.')?.[0] === this.name && s.registered);
if (this.loading) {
return html `<wui-loading-spinner
class="input-loading-spinner"
color="fg-200"
></wui-loading-spinner>`;
}
const reownName = `${this.name}${ConstantsUtil.WC_NAME_SUFFIX}`;
return html `
<wui-icon-link
.disabled=${isRegistered}
class="input-submit-button"
size="sm"
icon="chevronRight"
iconColor=${isRegistered ? 'fg-200' : 'accent-100'}
=${() => this.onSubmitName(reownName)}
>
</wui-icon-link>
`;
}
onNameInputChange(event) {
this.onDebouncedNameInputChange(event.detail);
}
nameSuggestionTagTemplate(suggestion) {
if (this.loading) {
return html `<wui-loading-spinner color="fg-200"></wui-loading-spinner>`;
}
return suggestion.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;
}
return html `<wui-flex flexDirection="column" gap="xxs" alignItems="center">
${this.suggestions.map(suggestion => html `<button
.disabled=${suggestion.registered || this.loading}
data-testid="account-name-suggestion"
class="suggestion"
=${() => this.onSubmitName(suggestion.name)}
>
<wui-text color="fg-100" variant="paragraph-400" class="suggested-name">
${suggestion.name}</wui-text
>${this.nameSuggestionTagTemplate(suggestion)}
</button>`)}
</wui-flex>`;
}
isAllowedToSubmit(name) {
const pureName = name.split('.')?.[0];
const isRegistered = this.suggestions.find(s => s.name?.split('.')?.[0] === pureName && s.registered);
return (!this.loading &&
!this.error &&
!this.profileName &&
pureName &&
EnsController.validateName(pureName) &&
!isRegistered);
}
async onSubmitName(name) {
try {
if (!this.isAllowedToSubmit(name)) {
return;
}
EventsController.sendEvent({
type: 'track',
event: 'REGISTER_NAME_INITIATED',
properties: {
isSmartAccount: getPreferredAccountType(ChainController.state.activeChain) ===
W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,
ensName: name
}
});
await EnsController.registerName(name);
EventsController.sendEvent({
type: 'track',
event: 'REGISTER_NAME_SUCCESS',
properties: {
isSmartAccount: getPreferredAccountType(ChainController.state.activeChain) ===
W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,
ensName: name
}
});
}
catch (error) {
SnackController.showError(error.message);
EventsController.sendEvent({
type: 'track',
event: 'REGISTER_NAME_ERROR',
properties: {
isSmartAccount: getPreferredAccountType(ChainController.state.activeChain) ===
W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,
ensName: name,
error: error?.message || 'Unknown error'
}
});
}
}
onEnterKey(event) {
if (event.key === 'Enter' && this.name && this.isAllowedToSubmit(this.name)) {
const reownName = `${this.name}${ConstantsUtil.WC_NAME_SUFFIX}`;
this.onSubmitName(reownName);
}
}
};
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, "profileName", void 0);
W3mRegisterAccountNameView = __decorate([
customElement('w3m-register-account-name-view')
], W3mRegisterAccountNameView);
export { W3mRegisterAccountNameView };
//# sourceMappingURL=index.js.map