From d0eee2cbbcf0782c862bf8e74daeb05ab4eb52cd Mon Sep 17 00:00:00 2001
From: Andrew718PLTS <andrew.polovets@mentolabs.xyz>
Date: Wed, 27 Nov 2024 15:25:57 +0100
Subject: [PATCH] Feat: Added test locators

---
 src/components/nav/BalancesSummary.tsx | 10 ++++++++--
 src/components/nav/NetworkModal.tsx    | 16 +++++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/nav/BalancesSummary.tsx b/src/components/nav/BalancesSummary.tsx
index 033c041..38ce044 100644
--- a/src/components/nav/BalancesSummary.tsx
+++ b/src/components/nav/BalancesSummary.tsx
@@ -13,10 +13,16 @@ export function BalancesSummary() {
         {tokenIds.map((id) => {
           const balance = fromWeiRounded(balances[id], Tokens[id].decimals)
           if (balance !== '0') {
+            const token = Tokens[id]
             // TODO: @bayo Either revert this !== 0 check or add some animation for when balances are loading
             return (
-              <div style={{ minWidth: '35%' }} className="flex pb-4 dark:text-white" key={id}>
-                <TokenIcon token={Tokens[id]} size="xs" />
+              <div
+                style={{ minWidth: '35%' }}
+                className="flex pb-4 dark:text-white"
+                key={id}
+                data-testid={`walletSettings_${token.id}_balance`}
+              >
+                <TokenIcon token={token} size="xs" />
                 <div className="ml-3">{balance}</div>
               </div>
             )
diff --git a/src/components/nav/NetworkModal.tsx b/src/components/nav/NetworkModal.tsx
index daf45c3..a75f02b 100644
--- a/src/components/nav/NetworkModal.tsx
+++ b/src/components/nav/NetworkModal.tsx
@@ -16,6 +16,7 @@ interface Props {
 }
 
 export function NetworkModal({ isOpen, close }: Props) {
+  const baseLocator = 'networkModal'
   const latestBlock = useAppSelector((s) => s.block.latestBlock)
   const chainId = useChainId()
   const currentChain = chainIdToChain[chainId]
@@ -46,7 +47,10 @@ export function NetworkModal({ isOpen, close }: Props) {
             <div className="text-neutral-500 dark:text-gray-400 text-[14px] sm:text-[15px] font-normal leading-tight">
               Connected to:
             </div>
-            <div className="opacity-90 text-right text-gray-950 dark:text-white text-[15px] font-medium leading-tight">
+            <div
+              className="opacity-90 text-right text-gray-950 dark:text-white text-[15px] font-medium leading-tight"
+              data-testid={`${baseLocator}_currentNetwork`}
+            >
               {currentChain?.name || 'Unknown'}
             </div>
           </div>
@@ -55,7 +59,10 @@ export function NetworkModal({ isOpen, close }: Props) {
             <div className="text-neutral-500 dark:text-gray-400 text-[14px] sm:text-[15px] font-normal leading-tight">
               Block Number:
             </div>
-            <div className="opacity-90 text-right text-gray-950 dark:text-white text-[14px] sm:text-[15px] font-medium leading-tight">
+            <div
+              className="opacity-90 text-right text-gray-950 dark:text-white text-[14px] sm:text-[15px] font-medium leading-tight"
+              data-testid={`${baseLocator}_currentBlockNumber`}
+            >
               {latestBlock?.number || 'Unknown'}
             </div>
           </div>
@@ -64,7 +71,10 @@ export function NetworkModal({ isOpen, close }: Props) {
             <div className="text-neutral-500 dark:text-gray-400 text-[14px] sm:text-[15px] font-normal leading-tight">
               Node Rpc Url:
             </div>
-            <div className="opacity-90 text-right text-gray-950 dark:text-white text-[14px] sm:text-[15px] font-medium leading-tight">
+            <div
+              className="opacity-90 text-right text-gray-950 dark:text-white text-[14px] sm:text-[15px] font-medium leading-tight"
+              data-testid={`${baseLocator}_currentNodeRpcUrl`}
+            >
               {shortenUrl(currentChain?.rpcUrl) || 'Unknown'}
             </div>
           </div>