Updated XCM form layout

galacticcouncil · Oct 10, 2024 · 8f91157 · 8f91157
1 parent c846dcd
commit 8f91157
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 67 deletions.
diff --git a/.changeset/plenty-plants-impress.md b/.changeset/plenty-plants-impress.md
@@ -0,0 +1,6 @@
+---
+'@galacticcouncil/apps': patch
+'@galacticcouncil/ui': patch
+---
+
+Updated XCM form layout
diff --git a/packages/apps/src/app/xcm/Form.css b/packages/apps/src/app/xcm/Form.css
@@ -9,7 +9,7 @@
   flex-direction: column;
   padding: 0 14px;
   box-sizing: border-box;
-  row-gap: 11px;
+  row-gap: 10px;
   position: relative;
 }
 
@@ -18,7 +18,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  grid-gap: 11px;
+  grid-gap: 10px;
 }
 
 .transfer .label {
@@ -28,32 +28,30 @@
   color: rgba(255, 255, 255, 0.7);
 }
 
-.transfer .divider {
-  background: var(--uigc-divider-background);
-  height: 1px;
-  width: 100%;
-  left: 0;
-  position: absolute;
-}
-
-.transfer .switch__desktop {
-  display: none;
-}
-
-.transfer .switch__mobile {
+.switch {
   display: block;
   align-items: center;
   display: flex;
   height: 43px;
   justify-content: center;
   width: 100%;
+  margin: 6px auto;
 }
 
-.transfer uigc-asset-switch.switch {
-  background: var(--uigc-asset-switch-background);
+.switch .divider {
+  background: var(--uigc-divider-background);
+  height: 1px;
+  width: 40%;
   position: absolute;
 }
 
+.switch .divider.left {
+  left: 14px;
+}
+.switch .divider.right {
+  right: 14px;
+}
+
 .errors {
   display: flex;
   flex-direction: column;
@@ -67,21 +65,19 @@
     align-items: center;
     grid-gap: 11px;
   }
-
-  .transfer .switch__desktop {
-    display: block;
-    transform: rotate(270deg);
-  }
-
-  .transfer .switch__mobile {
-    display: none;
-  }
 }
 
 @media (min-width: 768px) {
   .transfer {
     padding: 0 28px;
   }
+
+  .switch .divider.left {
+    left: 28px;
+  }
+  .switch .divider.right {
+    right: 28px;
+  }
 }
 
 .spinner {

diff --git a/packages/apps/src/app/xcm/Form.ts b/packages/apps/src/app/xcm/Form.ts
@@ -277,13 +277,13 @@ export class XcmForm extends LitElement {
     return this.formAssetLoadingTemplate();
   }
 
-  formSelectAssetTemplate() {
+  formSelectSourceAssetTemplate() {
     const balance = this.balance?.toDecimal(this.balance.decimals);
     const max = this.max?.toDecimal(this.max.decimals);
     return html`
       <uigc-asset-transfer
         id="asset"
-        title=${i18n.t('form.asset.label')}
+        title=${i18n.t('form.assetSrc.label')}
         .asset=${this.asset?.originSymbol}
         .amount=${this.amount}
         .unit=${this.asset?.originSymbol}
@@ -303,33 +303,46 @@ export class XcmForm extends LitElement {
     `;
   }
 
-  formSelectChainTemplate() {
+  formSelectDestAssetTemplate() {
     return html`
-      <div class="chain">
-        <uigc-chain-selector
-          title=${i18n.t('form.chainSrc.label')}
-          .chain=${this.srcChain.key}>
-          <uigc-chain
-            slot="chain"
-            .name=${this.srcChain.name}
-            .ecosystem=${getChainEcosystem(this.srcChain)}
-            .chain=${getChainId(this.srcChain)}></uigc-chain>
-        </uigc-chain-selector>
-        <div class="switch__mobile">
-          <div class="divider"></div>
-          <uigc-asset-switch class="switch"></uigc-asset-switch>
-        </div>
-        <uigc-asset-switch basic class="switch__desktop"></uigc-asset-switch>
-        <uigc-chain-selector
-          title=${i18n.t('form.chainDst.label')}
-          .chain=${this.destChain.key}>
-          <uigc-chain
-            slot="chain"
-            .name=${this.destChain.name}
-            .ecosystem=${getChainEcosystem(this.destChain)}
-            .chain=${getChainId(this.destChain)}></uigc-chain>
-        </uigc-chain-selector>
-      </div>
+      <uigc-asset-transfer
+        id="asset"
+        title=${i18n.t('form.assetDst.label')}
+        .asset=${this.asset?.originSymbol}
+        .amount=${this.amount}
+        .unit=${this.asset?.originSymbol}
+        .selectable=${false}
+        .readonly=${true}>
+        ${this.formAssetTemplate(this.asset)}
+      </uigc-asset-transfer>
+    `;
+  }
+
+  formSelectSourceChainTemplate() {
+    return html`
+      <uigc-chain-selector
+        title=${i18n.t('form.chainSrc.label')}
+        .chain=${this.srcChain.key}>
+        <uigc-chain
+          slot="chain"
+          .name=${this.srcChain.name}
+          .ecosystem=${getChainEcosystem(this.srcChain)}
+          .chain=${getChainId(this.srcChain)}></uigc-chain>
+      </uigc-chain-selector>
+    `;
+  }
+
+  formSelectDestChainTemplate() {
+    return html`
+      <uigc-chain-selector
+        title=${i18n.t('form.chainDst.label')}
+        .chain=${this.destChain.key}>
+        <uigc-chain
+          slot="chain"
+          .name=${this.destChain.name}
+          .ecosystem=${getChainEcosystem(this.destChain)}
+          .chain=${getChainId(this.destChain)}></uigc-chain>
+      </uigc-chain-selector>
     `;
   }
 
@@ -384,14 +397,17 @@ export class XcmForm extends LitElement {
     return html`
       <slot name="header"></slot>
       <div class="transfer">
-        <uigc-typography variant="subsection">
-          ${i18n.t('form.section.chains')}
-        </uigc-typography>
-        ${this.formSelectChainTemplate()}
-        <uigc-typography variant="subsection">
-          ${i18n.t('form.section.asset')}
-        </uigc-typography>
-        ${this.formSelectAssetTemplate()} ${this.formAddressTemplate()}
+        ${this.formSelectSourceChainTemplate()}
+        ${this.formSelectSourceAssetTemplate()}
+      </div>
+      <div class="switch">
+        <div class="divider left"></div>
+        <uigc-asset-switch basic></uigc-asset-switch>
+        <div class="divider right"></div>
+      </div>
+      <div class="transfer">
+        ${this.formSelectDestChainTemplate()}
+        ${this.formSelectDestAssetTemplate()} ${this.formAddressTemplate()}
       </div>
       <div class="info show">
         <div class="row">

diff --git a/packages/apps/src/app/xcm/translation.en.json b/packages/apps/src/app/xcm/translation.en.json
@@ -18,8 +18,9 @@
 
   "form.chainSrc.label": "Source chain",
   "form.chainDst.label": "Destination chain",
-  "form.asset.label": "Transfer asset",
-  "form.address.label": "To address",
+  "form.assetSrc.label": "Asset to transfer",
+  "form.assetDst.label": "Asset to receive",
+  "form.address.label": "Destination address",
 
   "form.info.sourceFee": "Source chain fee:",
   "form.info.destFee": "Destination chain fee:",

diff --git a/packages/ui/src/component/Chain.css b/packages/ui/src/component/Chain.css
@@ -16,6 +16,6 @@ span.title {
 
 uigc-logo-chain,
 uigc-logo-placeholder {
-  width: 34px;
-  height: 34px;
+  width: 24px;
+  height: 24px;
 }
diff --git a/packages/ui/src/component/ChainSelector.css b/packages/ui/src/component/ChainSelector.css
@@ -27,6 +27,8 @@ button .title {
 }
 
 button .chain {
+  margin-left: auto;
+  padding: 0 8px;
   display: flex;
   flex-direction: column;
   gap: 14px;

diff --git a/packages/ui/src/component/ChainSelector.ts b/packages/ui/src/component/ChainSelector.ts
@@ -26,8 +26,8 @@ export class ChainSelector extends UIGCElement {
   render() {
     return html`
       <button @click=${this.onSelectorClick}>
+        <span class="title">${this.title}</span>
         <span class="chain">
-          <span class="title">${this.title}</span>
           ${when(
             this.chain,
             () => html`