From 3d182bc67a0dd2cfccfac60b679f52f20879e14e Mon Sep 17 00:00:00 2001
From: Guillem Arias Fauste <accounts@gariasf.com>
Date: Sun, 24 May 2026 12:16:03 +0200
Subject: [PATCH] refactor(transactions): migrate transfer_match badges to
 DS::Pill (#1939)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to #1917 — the responsive label-swap pair in
`_transfer_match.html.erb` was deferred because DS::Pill has no
caller-controlled `class:` arg yet. Wrapping each `DS::Pill` in a
`<span>` with the responsive visibility classes (`hidden lg:inline` /
`inline lg:hidden`) gets the same effect without expanding the
component API — the parent span's `display` controls visibility, the
child pill keeps its own `inline-flex` chrome when visible.

Closes the last open callsite from #1917's deferred-list. Same tone
(`:neutral`) and shape (`marker: false` rounded-full) as the other
neutral status badges migrated in PR B.
---
 .../transactions/_transfer_match.html.erb      | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/views/transactions/_transfer_match.html.erb b/app/views/transactions/_transfer_match.html.erb
index f2d39531d..c7c8cf8de 100644
--- a/app/views/transactions/_transfer_match.html.erb
+++ b/app/views/transactions/_transfer_match.html.erb
@@ -6,11 +6,21 @@
       <%= icon "link-2", size: "sm", class: "text-secondary" %>
     </span>
   <% elsif transaction.transfer.pending? %>
-    <span class="hidden lg:inline-flex items-center rounded-full bg-surface-inset px-2 py-0.5 text-xs font-medium text-secondary">
-      <%= t("transactions.transfer_match.auto_matched") %>
+    <span class="hidden lg:inline">
+      <%= render DS::Pill.new(
+        label: t("transactions.transfer_match.auto_matched"),
+        tone: :neutral,
+        marker: false,
+        show_dot: false
+      ) %>
     </span>
-    <span class="inline-flex lg:hidden items-center rounded-full bg-surface-inset px-2 py-0.5 text-xs font-medium text-secondary">
-      <%= t("transactions.transfer_match.auto_matched_short") %>
+    <span class="inline lg:hidden">
+      <%= render DS::Pill.new(
+        label: t("transactions.transfer_match.auto_matched_short"),
+        tone: :neutral,
+        marker: false,
+        show_dot: false
+      ) %>
     </span>
 
     <%= button_to transfer_path(transaction.transfer, transfer: { status: "confirmed" }),