From f844885ed4203af073619681d3da407fd7922476 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Tue, 14 May 2024 09:00:08 +0200
Subject: [PATCH] Fix React duplicated key warning in transactions list

---
 .changelog/1412.bugfix.md                                 | 1 +
 src/app/components/Transactions/ConsensusTransactions.tsx | 2 +-
 src/app/components/Transactions/RuntimeTransactions.tsx   | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)
 create mode 100644 .changelog/1412.bugfix.md

diff --git a/.changelog/1412.bugfix.md b/.changelog/1412.bugfix.md
new file mode 100644
index 000000000..a0c6621fc
--- /dev/null
+++ b/.changelog/1412.bugfix.md
@@ -0,0 +1 @@
+Fix React duplicated key warning in transactions list
diff --git a/src/app/components/Transactions/ConsensusTransactions.tsx b/src/app/components/Transactions/ConsensusTransactions.tsx
index 92c9ac6b0..7c5c59938 100644
--- a/src/app/components/Transactions/ConsensusTransactions.tsx
+++ b/src/app/components/Transactions/ConsensusTransactions.tsx
@@ -57,7 +57,7 @@ export const ConsensusTransactions: FC<ConsensusTransactionsProps> = ({
       : []),
   ]
   const tableRows = transactions?.map(transaction => ({
-    key: transaction.hash,
+    key: `${transaction.hash}${transaction.index}`,
     data: [
       {
         content: <StatusIcon success={transaction.success} error={transaction.error} />,
diff --git a/src/app/components/Transactions/RuntimeTransactions.tsx b/src/app/components/Transactions/RuntimeTransactions.tsx
index 8bb25ed04..e5768ef8e 100644
--- a/src/app/components/Transactions/RuntimeTransactions.tsx
+++ b/src/app/components/Transactions/RuntimeTransactions.tsx
@@ -86,7 +86,7 @@ export const RuntimeTransactions: FC<TransactionsProps> = ({
   const tableRows = transactions?.map(transaction => {
     const targetAddress = transaction.to_eth || transaction.to
     return {
-      key: transaction.hash,
+      key: `${transaction.hash}${transaction.index}`,
       data: [
         {
           content: <StatusIcon success={transaction.success} error={transaction.error} />,