Fixes Deposit App afte QA

src/apps/deposit/components/Asset/test/__snapshots__/Asset.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`<Asset /> renders correctly and matches snapshot 1`] = `
 <div
   className="flex flex-col w-full border border-[#3C3C53] rounded-xl px-6 py-4 mb-4 mt-8 cursor-pointer mt-0"
   data-testid="deposit-asset"
+  id="deposit-app-token-asset"
   onClick={[MockFunction]}
 >
   <div

src/apps/deposit/components/AssetsList/AssetsList.tsx

@@ -26,6 +26,7 @@ import {
   getNetworkViem,
   getNftBalance,
 } from '../../utils/blockchain';
+import BaseList from '../../utils/tokens/base-tokens.json';
 import EthereumList from '../../utils/tokens/ethereum-tokens.json';
 import GnosisList from '../../utils/tokens/gnosis-tokens.json';
 import PolygonList from '../../utils/tokens/polygon-tokens.json';
@@ -38,6 +39,7 @@ const tokenLists = {
   1: EthereumList,
   137: PolygonList,
   100: GnosisList,
+  8453: BaseList,
 };
 
 type AssetsListProps = {
@@ -58,12 +60,9 @@ const AssetsList = ({ accountAddress, chainId }: AssetsListProps) => {
   const dispatch = useAppDispatch();
   const [addedAssets, setAddedAssets] = useState<AddedAssets[]>(() => {
     const storedAssets = localStorage.getItem('addedAssets');
-    return storedAssets
-      ? JSON.parse(storedAssets).filter(
-          (token: AddedAssets) => token.balance > 0
-        )
-      : [];
+    return storedAssets ? JSON.parse(storedAssets) : [];
   });
+
   const [activeTab, setActiveTab] = useState<'tokens' | 'nfts'>('tokens');
 
   const chainName = getNetworkViem(chainId).name.toLowerCase();
@@ -260,9 +259,7 @@ const AssetsList = ({ accountAddress, chainId }: AssetsListProps) => {
       return;
     }
 
-    const updatedAssets = [...addedAssets, asset].filter(
-      (token) => token.balance > 0
-    );
+    const updatedAssets = [...addedAssets, asset];
     setAddedAssets(updatedAssets);
     localStorage.setItem('addedAssets', JSON.stringify(updatedAssets));
   };
@@ -292,17 +289,27 @@ const AssetsList = ({ accountAddress, chainId }: AssetsListProps) => {
           balance: Number(readableBalance),
           assetType: 'token',
         });
+
+        setMessage(
+          `New asset ${newAsset.tokenAddress} on ${chainName} successfully added`
+        );
+        setTimeout(() => {
+          setMessage(null);
+        }, 5000);
+        setNewAsset({ tokenAddress: '', chain: '', tokenId: '' });
+        setIsAddingAsset(false);
+      }
+
+      if (Number(readableBalance) === 0) {
+        setMessage(
+          `New asset ${newAsset.tokenAddress} on ${chainName} has not been added because there is no balance in your wallet.`
+        );
+        setTimeout(() => {
+          setMessage(null);
+        }, 5000);
+        setNewAsset({ tokenAddress: '', chain: '', tokenId: '' });
+        setIsAddingAsset(false);
       }
-      setMessage(
-        `New asset ${newAsset.tokenAddress} on ${(
-          <span className="capitalize">{chainName}</span>
-        )} successfully added`
-      );
-      setTimeout(() => {
-        setMessage(null);
-      }, 5000);
-      setNewAsset({ tokenAddress: '', chain: '', tokenId: '' });
-      setIsAddingAsset(false);
     }
 
     if (
@@ -324,13 +331,25 @@ const AssetsList = ({ accountAddress, chainId }: AssetsListProps) => {
           assetType: 'nft',
           tokenId: newAsset.tokenId,
         });
+
+        setMessage(`New asset ${newAsset.tokenAddress} successfully added`);
+        setTimeout(() => {
+          setMessage(null);
+        }, 5000);
+        setNewAsset({ tokenAddress: '', chain: '', tokenId: '' });
+        setIsAddingAsset(false);
+      }
+
+      if (newAssetBalance === 0) {
+        setMessage(
+          `New asset ${newAsset.tokenAddress} has not been added because there is no balance in your wallet.`
+        );
+        setTimeout(() => {
+          setMessage(null);
+        }, 5000);
+        setNewAsset({ tokenAddress: '', chain: '', tokenId: '' });
+        setIsAddingAsset(false);
       }
-      setMessage(`New asset ${newAsset.tokenAddress} successfully added`);
-      setTimeout(() => {
-        setMessage(null);
-      }, 5000);
-      setNewAsset({ tokenAddress: '', chain: '', tokenId: '' });
-      setIsAddingAsset(false);
     }
   };
 

src/apps/deposit/components/AssetsList/test/__snapshots__/AssetsList.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`<AssetsList /> renders correctly and matches snapshot 1`] = `
 <div
   className="flex flex-col gap-4 w-full mt-8"
+  id="deposit-app-assets-list"
 >
   <p
     className="text-sm text-left"

src/apps/deposit/components/SendAsset/SendAsset.tsx

@@ -60,7 +60,9 @@ const SendAsset = () => {
         );
 
         setMessage(
-          `The transaction has succesfully been sent to your external wallet with the transaction hash: ${txHash}. Please check your external wallet to follow the transaction status.`
+          txHash.length
+            ? `The transaction has succesfully been sent to your external wallet with the transaction hash: ${txHash}. Please check your external wallet to follow the transaction status.`
+            : 'The transaction has not been succesful. Please check your external wallet to check the transaction status.'
         );
 
         setTimeout(() => {
@@ -89,7 +91,9 @@ const SendAsset = () => {
         );
 
         setMessage(
-          `The transaction has succesfully been sent to your external wallet with the transaction hash: ${txHash}. Please check your external wallet to follow the transaction status.`
+          txHash.length
+            ? `The transaction has succesfully been sent to your external wallet with the transaction hash: ${txHash}. Please check your external wallet to follow the transaction status.`
+            : 'The transaction has not been succesful. Please check your external wallet to check the transaction status.'
         );
 
         setTimeout(() => {

src/apps/deposit/index.tsx

@@ -5,16 +5,31 @@ import {
   createAppKit,
   useAppKit,
   useAppKitAccount,
+  useAppKitEvents,
   useAppKitNetworkCore,
   useDisconnect,
 } from '@reown/appkit/react';
+import { useEffect } from 'react';
+
+// styles
 import styled from 'styled-components';
+import './styles/tailwindDeposit.css';
+
+// utils
+import { getNetworkViem } from './utils/blockchain';
+
+// reducer
+import { setDepositStep } from './reducer/depositSlice';
+
+// hooks
+import { useAppDispatch, useAppSelector } from './hooks/useReducerHooks';
+
+// components
 import AssetsList from './components/AssetsList/AssetsList';
 import SendAsset from './components/SendAsset/SendAsset';
-import { useAppSelector } from './hooks/useReducerHooks';
+
+// images
 import PillarXLogo from './images/logo512.png';
-import './styles/tailwindDeposit.css';
-import { getNetworkViem } from './utils/blockchain';
 
 const metadataReownAppKit = {
   name: 'PillarX',
@@ -32,6 +47,9 @@ createAppKit({
     swaps: false,
     onramp: false,
     history: false,
+    email: false,
+    socials: false,
+    emailShowWallets: false,
   },
 });
 
@@ -40,10 +58,18 @@ const App = () => {
   const { address, isConnected } = useAppKitAccount();
   const { disconnect } = useDisconnect();
   const { chainId } = useAppKitNetworkCore();
+  const events = useAppKitEvents();
+  const dispatch = useAppDispatch();
   const depositStep = useAppSelector(
     (state) => state.deposit.depositStep as 'list' | 'send'
   );
 
+  useEffect(() => {
+    if (events.data.event === 'SWITCH_NETWORK') {
+      dispatch(setDepositStep('list'));
+    }
+  }, [events, dispatch]);
+
   const handleDisconnect = async () => {
     await disconnect();
   };
@@ -107,7 +133,7 @@ const Wrapper = styled.div`
   display: flex;
   width: 100%;
   min-height: 100vh;
-  margin: 0 auto;
+  margin: 0 auto 60px auto;
   flex-direction: column;
 
   @media (min-width: 768px) {