From bab0de0155526bcba2b9cdeb3db800c8cd3bed26 Mon Sep 17 00:00:00 2001
From: Diana Savatina <diana.savvatina@trili.tech>
Date: Tue, 10 Dec 2024 14:57:58 +0000
Subject: [PATCH] feat: header for connected dApps

---
 .../web/src/components/Menu/AppsMenu/AppsMenu.tsx | 15 ++++++++++++++-
 .../WalletConnect/WalletConnectPeers.tsx          | 11 +----------
 .../src/components/beacon/BeaconPeers.test.tsx    | 13 ++-----------
 apps/web/src/components/beacon/BeaconPeers.tsx    | 11 +----------
 4 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx b/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx
index c278bba218..e7669231aa 100644
--- a/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx
+++ b/apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx
@@ -1,6 +1,7 @@
 import { Button, Text } from "@chakra-ui/react";
 import { useAddPeer } from "@umami/state";
 
+import { useColor } from "../../../styles/useColor";
 import { BeaconPeers } from "../../beacon";
 import { WcPeers, useOnWalletConnect } from "../../WalletConnect";
 import { DrawerContentWrapper } from "../DrawerContentWrapper";
@@ -8,13 +9,14 @@ import { DrawerContentWrapper } from "../DrawerContentWrapper";
 export const AppsMenu = () => {
   const onBeaconConnect = useAddPeer();
   const onWalletConnect = useOnWalletConnect();
+  const color = useColor();
 
   return (
     <DrawerContentWrapper
       actions={
         <>
           <Text marginTop="12px" size="lg">
-            Connect with Pairing Request for Beacon or WalletConnect
+            Connect with DApps using a Pairing Request via Beacon or WalletConnect.
           </Text>
           <Button
             width="fit-content"
@@ -31,6 +33,17 @@ export const AppsMenu = () => {
           >
             Connect
           </Button>
+          <Text
+            marginTop="40px"
+            color={color("900")}
+            fontWeight="600"
+            size={{ base: "xl", md: "2xl" }}
+          >
+            Connected apps
+          </Text>
+          <Text marginTop="12px" size="lg">
+            DApps you've granted permission to connect with.
+          </Text>
         </>
       }
       title="Apps"
diff --git a/apps/web/src/components/WalletConnect/WalletConnectPeers.tsx b/apps/web/src/components/WalletConnect/WalletConnectPeers.tsx
index 6d094551a7..a76aa3a48f 100644
--- a/apps/web/src/components/WalletConnect/WalletConnectPeers.tsx
+++ b/apps/web/src/components/WalletConnect/WalletConnectPeers.tsx
@@ -9,7 +9,6 @@ import { useEffect, useState } from "react";
 import { CodeSandboxIcon, StubIcon as TrashIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 import { AddressPill } from "../AddressPill";
-import { EmptyMessage } from "../EmptyMessage";
 
 /**
  * Component displaying a list of connected dApps.
@@ -26,15 +25,7 @@ export const WcPeers = () => {
   }, [isUpdated]);
 
   if (!Object.keys(sessions).length) {
-    return (
-      <EmptyMessage
-        alignItems="flex-start"
-        marginTop="40px"
-        data-testid="wc-peers-empty"
-        subtitle="No WalletConnect Apps to show"
-        title="Your WalletConnect Apps will appear here..."
-      />
-    );
+    return <></>;
   }
 
   return (
diff --git a/apps/web/src/components/beacon/BeaconPeers.test.tsx b/apps/web/src/components/beacon/BeaconPeers.test.tsx
index 04c58b5080..cbc507b1d7 100644
--- a/apps/web/src/components/beacon/BeaconPeers.test.tsx
+++ b/apps/web/src/components/beacon/BeaconPeers.test.tsx
@@ -10,7 +10,7 @@ import {
 import { formatPkh } from "@umami/tezos";
 
 import { BeaconPeers } from "./BeaconPeers";
-import { act, render, screen, userEvent, waitFor, within } from "../../testUtils";
+import { act, render, screen, userEvent, within } from "../../testUtils";
 
 const peersData: ExtendedPeerInfo[] = [
   {
@@ -58,22 +58,13 @@ describe("<BeaconPeers />", () => {
   };
 
   describe("list of paired dApps", () => {
-    it("shows empty state message when no paired dApps", async () => {
+    it("shows empty list when no paired dApps", () => {
       jest.spyOn(WalletClient, "getPeers").mockResolvedValue([]);
       render(<BeaconPeers />, { store });
 
-      await waitFor(() => {
-        expect(screen.getByText("Your Apps will appear here...")).toBeInTheDocument();
-      });
       expect(screen.queryByTestId("peer-row")).not.toBeInTheDocument();
     });
 
-    it("hides empty state message when paired dApps are present", async () => {
-      await getPeerRows();
-
-      expect(screen.queryByText("Your dApps will appear here")).not.toBeInTheDocument();
-    });
-
     it("contains dApp names", async () => {
       const peerRows = await getPeerRows();
 
diff --git a/apps/web/src/components/beacon/BeaconPeers.tsx b/apps/web/src/components/beacon/BeaconPeers.tsx
index 904f0208c6..7237a03d97 100644
--- a/apps/web/src/components/beacon/BeaconPeers.tsx
+++ b/apps/web/src/components/beacon/BeaconPeers.tsx
@@ -7,7 +7,6 @@ import capitalize from "lodash/capitalize";
 import { CodeSandboxIcon, StubIcon as TrashIcon } from "../../assets/icons";
 import { AddressPill } from "../../components/AddressPill/AddressPill";
 import { useColor } from "../../styles/useColor";
-import { EmptyMessage } from "../EmptyMessage";
 
 /**
  * Component displaying a list of connected dApps.
@@ -18,15 +17,7 @@ export const BeaconPeers = () => {
   const { peers } = useBeaconPeers();
 
   if (peers.length === 0) {
-    return (
-      <EmptyMessage
-        alignItems="flex-start"
-        marginTop="40px"
-        data-testid="beacon-peers-empty"
-        subtitle="No Apps to show"
-        title="Your Apps will appear here..."
-      />
-    );
+    return <></>;
   }
 
   return (