diff --git a/packages/apps/src/app/xcm/App.css b/packages/apps/src/app/xcm/App.css index 8ad03dc2e8..e38c0a0013 100644 --- a/packages/apps/src/app/xcm/App.css +++ b/packages/apps/src/app/xcm/App.css @@ -26,3 +26,11 @@ font-weight: 600; line-height: 100%; } + +.address-book { + justify-self: end; +} + +.address-book .endIcon { + margin-left: 8px; +} diff --git a/packages/apps/src/app/xcm/App.ts b/packages/apps/src/app/xcm/App.ts index 0a7f02afc9..17b45856f4 100644 --- a/packages/apps/src/app/xcm/App.ts +++ b/packages/apps/src/app/xcm/App.ts @@ -102,6 +102,7 @@ export class XcmApp extends PoolApp { @property({ type: String }) blacklist: string = null; @property({ type: Number }) ss58Prefix: number = null; @property({ type: Boolean }) assetCheckEnabled: Boolean = false; + @property({ type: Boolean }) addressBookEnabled: Boolean = false; @state() tab: TransferTab = TransferTab.Form; @state() transfer: TransferState = DEFAULT_TRANSFER_STATE; @@ -879,6 +880,53 @@ export class XcmApp extends PoolApp { } } + protected onAddressBookClick() { + const options = { + bubbles: true, + composed: true, + detail: this.transfer, + }; + + this.dispatchEvent(new CustomEvent('gc:address-book:open', options)); + } + + AddressBookBtn() { + if (this.addressBookEnabled) { + return html` + + + + + + + + My accounts + + `; + } + } + protected override async onAccountChange( prev: Account, curr: Account, @@ -1250,6 +1298,7 @@ export class XcmApp extends PoolApp { @asset-switch-click=${this.onChainSwitchClick} @asset-selector-click=${() => this.changeTab(TransferTab.SelectToken)} @chain-selector-click=${this.onChainSelectorClick} + @address-book-click=${this.onAddressBookClick} @transfer-click=${() => { this.setProcessing(true); this.onTransferClick() @@ -1259,6 +1308,7 @@ export class XcmApp extends PoolApp { this.setProcessing(false); }); }}> + ${this.AddressBookBtn()}
${i18n.t('header.form')} diff --git a/packages/apps/src/app/xcm/Form.ts b/packages/apps/src/app/xcm/Form.ts index e18168aa5f..b731960d32 100644 --- a/packages/apps/src/app/xcm/Form.ts +++ b/packages/apps/src/app/xcm/Form.ts @@ -466,6 +466,7 @@ export class XcmForm extends LitElement { .ss58prefix=${ss58prefix}> `, )} + `; } diff --git a/packages/ui/src/component/AddressInput.css b/packages/ui/src/component/AddressInput.css index 5c1fe18545..b1f8b6f489 100644 --- a/packages/ui/src/component/AddressInput.css +++ b/packages/ui/src/component/AddressInput.css @@ -49,6 +49,19 @@ color: var(--uigc-address-input__placeholder-color); } +.address-root > :nth-child(1) { + grid-area: 1 / 1 / 2 / 2; +} + +.address-root > :nth-child(2) { + padding-top: 0; + grid-area: 1 / 2 / 2 / 3; +} + +.address-root > :nth-child(3) { + grid-area: 2 / 1 / 3 / 3; +} + .title { display: flex; align-items: center; diff --git a/packages/ui/src/component/AddressInput.ts b/packages/ui/src/component/AddressInput.ts index 108799cf4e..3213b0edd5 100644 --- a/packages/ui/src/component/AddressInput.ts +++ b/packages/ui/src/component/AddressInput.ts @@ -68,6 +68,7 @@ export class AddressInput extends UIGCElement { return html`
${this.title} +
diff --git a/packages/ui/src/component/Button.css b/packages/ui/src/component/Button.css index 8ce982722d..0144593064 100644 --- a/packages/ui/src/component/Button.css +++ b/packages/ui/src/component/Button.css @@ -112,6 +112,21 @@ text-transform: var(--uigc-button__max-text-transform); } +:host([variant='address-book']) .button-root { + color: var(--hex-dark-blue-100); + background: rgba(84, 99, 128, 0.35); + font-size: 11px; + font-weight: 600; + text-transform: var(--uigc-button__max-text-transform); + + border-radius: 0; +} + +:host([variant='address-book']) .button-root:hover { + background: rgba(var(--rgb-white), 0.15); + transition: 0.2s ease-in-out; +} + :host([variant='max'][disabled]) .button-root { opacity: 0.2; } diff --git a/packages/ui/src/component/styles/palette.css b/packages/ui/src/component/styles/palette.css index 29b79e14af..ce5f646f1d 100644 --- a/packages/ui/src/component/styles/palette.css +++ b/packages/ui/src/component/styles/palette.css @@ -83,6 +83,7 @@ --hex-vibrant-blue600: #0a1fa7; --hex-vibrant-blue700: #031586; + --hex-dark-blue-100: #cccdd3; --hex-dark-blue-200: #999ba7; --hex-dark-blue-300: #66697c; --hex-dark-blue-400: #333750;