From 64805d1f5125ac20e82ddd31950ab65efebab0f7 Mon Sep 17 00:00:00 2001
From: woodenfurniture <125113430+woodenfurniture@users.noreply.github.com>
Date: Sat, 4 May 2024 12:46:35 +1000
Subject: [PATCH] fix: ensure import account component state is not shared
 across chains

---
 .../ManageAccountsDrawer/components/ImportAccounts.tsx   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/ManageAccountsDrawer/components/ImportAccounts.tsx b/src/components/ManageAccountsDrawer/components/ImportAccounts.tsx
index 03e6ff02c57..da022698997 100644
--- a/src/components/ManageAccountsDrawer/components/ImportAccounts.tsx
+++ b/src/components/ManageAccountsDrawer/components/ImportAccounts.tsx
@@ -165,6 +165,12 @@ export const ImportAccounts = ({ chainId, onClose }: ImportAccountsProps) => {
   const [autoFetching, setAutoFetching] = useState(true)
   const [toggledActiveAccountIds, setToggledActiveAccountIds] = useState<Set<AccountId>>(new Set())
 
+  // reset component state when chainId changes
+  useEffect(() => {
+    setAutoFetching(true)
+    setToggledActiveAccountIds(new Set())
+  }, [chainId])
+
   // initial fetch to detect the number of accounts based on the "first empty account" heuristic
   const {
     data: accounts,
@@ -263,9 +269,10 @@ export const ImportAccounts = ({ chainId, onClose }: ImportAccountsProps) => {
     if (!asset || !accounts) return null
     return accounts.pages.map(({ accountIdWithActivityAndMetadata }, accountNumber) => {
       const accountIds = accountIdWithActivityAndMetadata.map(({ accountId }) => accountId)
+      const key = accountIds.join('-')
       return (
         <TableRow
-          key={accountNumber}
+          key={key}
           accountNumber={accountNumber}
           accountIds={accountIds}
           asset={asset}