Add Address book button

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;
+}

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`
+        <uigc-button
+          class="address-book"
+          variant="address-book"
+          size="micro"
+          capitalize
+          slot="addressBookBtn"
+          @click=${this.onAddressBookClick}>
+          <svg
+            class="endIcon"
+            slot="endIcon"
+            width="16"
+            height="13"
+            viewBox="0 0 16 13"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M1.74991 0.929394L1.51227 0.940768V1.4146V1.88843H7.67444H13.8366L13.8385 1.78191C13.8455 1.38635 13.8352 0.958337 13.8184 0.941489C13.7977 0.92084 2.17303 0.909203 1.74991 0.929394ZM0.594499 6.47728V11.0334H1.037H1.47949L1.47959 8.68157C1.47966 7.38811 1.48946 5.33787 1.50132 4.1255L1.52295 1.92121H1.05873H0.594499V6.47728ZM11.0481 4.8466C11.0468 4.90518 11.0431 5.1043 11.0399 5.28907L11.0341 5.62497L11.9732 5.62504L12.9123 5.62507L12.9276 5.78076C12.9401 5.90725 12.9375 6.62688 12.9214 7.51797L12.9188 7.65728H12.0011H11.0833V8.13255V8.60782H12.2907C12.9548 8.60782 13.9869 8.59806 14.5842 8.58616L15.6703 8.56449L15.6794 8.13547L15.6885 7.70644L15.8442 7.69644L15.9999 7.68645V6.69024V5.69407L15.8279 5.68413L15.6558 5.67424L15.6467 5.20716L15.6376 4.74008H13.3441H11.0505L11.0481 4.8466ZM10.1655 6.67395V7.65728H10.6062H11.0469L11.0496 6.67395L11.0522 5.69062H10.6089H10.1655V6.67395ZM1.49411 11.0753C1.485 11.099 1.48169 11.3243 1.4867 11.5758L1.49588 12.0331L7.69903 12.0414L13.9022 12.0496V11.5586V11.0675L12.4845 11.0585C11.7048 11.0536 8.91674 11.0457 6.28877 11.0409C2.36285 11.0338 1.50771 11.0399 1.49411 11.0753Z"
+              fill="currentColor" />
+            <path
+              d="M13.9032 1.88624L14.3206 1.89551L14.738 1.90482L14.7544 2.83898L14.7708 3.77314L15.2215 3.78225L15.6722 3.79136V2.33185V0.872329H14.7708H13.8694L13.8184 0.941489C13.8352 0.958337 13.8455 1.38635 13.8385 1.78191L13.8366 1.88843L13.9032 1.88624Z"
+              fill="currentColor" />
+            <path
+              d="M14.8036 12.0659L15.2215 12.0567L15.6394 12.0475L15.6459 10.9668C15.6495 10.3725 15.6532 9.83085 15.6541 9.76323L15.6558 9.64032H15.2133H14.7708L14.7619 10.3532L14.7531 11.0661H14.3276L13.9022 11.0675V11.5586V12.0496L14.8036 12.0659Z"
+              fill="currentColor" />
+          </svg>
+
+          My accounts
+        </uigc-button>
+      `;
+    }
+  }
+
   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()}
           <div class="header" slot="header">
             <uigc-typography variant="title">
               ${i18n.t('header.form')}

packages/apps/src/app/xcm/Form.ts

@@ -466,6 +466,7 @@ export class XcmForm extends LitElement {
                 .ss58prefix=${ss58prefix}></gc-account-identicon>
             `,
         )}
+        <slot name="addressBookBtn" slot="addressBookBtn"></slot>
       </uigc-address-input>
     `;
   }

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;

packages/ui/src/component/AddressInput.ts

@@ -68,6 +68,7 @@ export class AddressInput extends UIGCElement {
     return html`
       <div tabindex="0" class="address-root">
         <span class="title">${this.title}</span>
+        <slot name="addressBookBtn"></slot>
         <div class="address">
           <uigc-icon-id></uigc-icon-id>
           <slot name="id"></slot>

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;
 }

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;