From 2f27230741df372ecea5915646dbf0aeb853ed08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Radoslav=20Karli=CC=81k?= <radoslav.karlik@cleevio.com>
Date: Thu, 28 Aug 2025 12:48:02 +0200
Subject: [PATCH] Shorten long swap routes

---
 .changeset/famous-pans-sit.md        |  5 ++++
 packages/apps/src/app/trade/App.css  |  4 +++
 packages/apps/src/app/trade/App.ts   |  1 +
 packages/apps/src/app/trade/Form.css | 37 ++++++++++++++++++++++++++++
 packages/apps/src/app/trade/Form.ts  | 29 +++++++++++++++++++++-
 5 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/famous-pans-sit.md

diff --git a/.changeset/famous-pans-sit.md b/.changeset/famous-pans-sit.md
new file mode 100644
index 0000000000..1f399b20cd
--- /dev/null
+++ b/.changeset/famous-pans-sit.md
@@ -0,0 +1,5 @@
+---
+'@galacticcouncil/apps': minor
+---
+
+shorten long swap routes
diff --git a/packages/apps/src/app/trade/App.css b/packages/apps/src/app/trade/App.css
index f1bf4f111f..78c4350d05 100644
--- a/packages/apps/src/app/trade/App.css
+++ b/packages/apps/src/app/trade/App.css
@@ -25,3 +25,7 @@
     stroke: #ecedef;
   }
 }
+
+uigc-paper.main.form-tab {
+  overflow: inherit;
+}
diff --git a/packages/apps/src/app/trade/App.ts b/packages/apps/src/app/trade/App.ts
index e79189b322..32603ad0a5 100644
--- a/packages/apps/src/app/trade/App.ts
+++ b/packages/apps/src/app/trade/App.ts
@@ -981,6 +981,7 @@ export class TradeApp extends PoolApp {
       tab: true,
       main: true,
       active: this.tab == TradeTab.Form,
+      'form-tab': this.tab == TradeTab.Form,
     };
     return html`
       <uigc-paper class=${classMap(classes)} id="default-tab">
diff --git a/packages/apps/src/app/trade/Form.css b/packages/apps/src/app/trade/Form.css
index ed27303136..1d5c30bdd5 100644
--- a/packages/apps/src/app/trade/Form.css
+++ b/packages/apps/src/app/trade/Form.css
@@ -217,6 +217,39 @@
   color: var(--uigc-field__error-color);
 }
 
+.tooltip-text {
+  padding: 11px 16px;
+  border-radius: 4px;
+  background: #333750;
+  color: #fff;
+  font-family: 'Geist';
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 140%;
+  text-align: left;
+}
+
+.middle-route-tooltip {
+  position: relative;
+  white-space: nowrap;
+}
+
+.middle-route-tooltip > .text {
+  visibility: hidden;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  top: 25px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.middle-route-tooltip:hover > .text {
+  visibility: visible;
+}
+
 .tooltip {
   position: relative;
   width: 22px;
@@ -328,3 +361,7 @@
   height: 22px;
   width: 100%;
 }
+
+.middle-route {
+  color: var(--hex-bright-blue-200);
+}
diff --git a/packages/apps/src/app/trade/Form.ts b/packages/apps/src/app/trade/Form.ts
index ddc7bf4c9b..c113176add 100644
--- a/packages/apps/src/app/trade/Form.ts
+++ b/packages/apps/src/app/trade/Form.ts
@@ -465,6 +465,34 @@ export class TradeForm extends BaseElement {
 
   bestRouteTemplate() {
     const bestRoute = this.getBestRoute();
+    const lastRoute = bestRoute[bestRoute.length - 1];
+    const middleRoute = bestRoute.slice(0, -1);
+
+    if (middleRoute.length > 1) {
+      return html`
+        <span class="value">${this.assetIn.symbol}</span>
+        <uigc-icon-chevron-right></uigc-icon-chevron-right>
+        <span class="middle-route-tooltip">
+          <span class="middle-route">Hydration Router</span>
+          <span class="text tooltip-text">
+            ${middleRoute.map(
+              (route, index) => html`
+                ${when(
+                  index > 0,
+                  () => html`
+                    <uigc-icon-chevron-right></uigc-icon-chevron-right>
+                  `,
+                )}
+                <span>${route}</span>
+              `,
+            )}
+          </span>
+        </span>
+        <uigc-icon-chevron-right></uigc-icon-chevron-right>
+        <span class="value">${lastRoute}</span>
+      `;
+    }
+
     return html`
       <span class="value">${this.assetIn.symbol}</span>
       ${bestRoute.map(
@@ -474,7 +502,6 @@ export class TradeForm extends BaseElement {
             <span class="value">${poolAsset}</span>
           `,
       )}
-      <uigc-icon-route></uigc-icon-route>
     `;
   }