Merge pull request #1985 from trilitech/add-wc-slice

feat: Adding WalletConnect data to peer list and slices

apps/desktop/src/Router.tsx

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 import { DynamicModalContext, useDynamicModal } from "@umami/components";
 import { useDataPolling } from "@umami/data-polling";
-import { WalletClient, useImplicitAccounts, useResetConnections } from "@umami/state";
+import { WalletClient, useImplicitAccounts, useResetBeaconConnections } from "@umami/state";
 import { noop } from "lodash";
 import { useEffect } from "react";
 import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
@@ -59,7 +59,7 @@ const LoggedInRouterWithPolling = () => {
 };
 
 const LoggedOutRouter = () => {
-  const resetBeaconConnections = useResetConnections();
+  const resetBeaconConnections = useResetBeaconConnections();
 
   useEffect(() => {
     WalletClient.destroy().then(resetBeaconConnections).catch(noop);

apps/desktop/src/utils/beacon/BeaconPeers.tsx

@@ -10,7 +10,7 @@ import {
   Image,
   Text,
 } from "@chakra-ui/react";
-import { useGetConnectionInfo, usePeers, useRemovePeer } from "@umami/state";
+import { useBeaconPeers, useGetBeaconConnectionInfo, useRemoveBeaconPeer } from "@umami/state";
 import { parsePkh } from "@umami/tezos";
 import capitalize from "lodash/capitalize";
 import { Fragment } from "react";
@@ -22,10 +22,10 @@ import colors from "../../style/colors";
 /**
  * Component displaying a list of connected dApps.
  *
- * Loads dApps data from {@link usePeers} hook & zips it with generated dAppIds.
+ * Loads dApps data from {@link useBeaconPeers} hook & zips it with generated dAppIds.
  */
 export const BeaconPeers = () => {
-  const { peers } = usePeers();
+  const { peers } = useBeaconPeers();
 
   if (peers.length === 0) {
     return (
@@ -57,7 +57,7 @@ export const BeaconPeers = () => {
  * @param onRemove - action for deleting dApp connection.
  */
 const PeerRow = ({ peerInfo }: { peerInfo: ExtendedPeerInfo }) => {
-  const removePeer = useRemovePeer();
+  const removeBeaconPeer = useRemoveBeaconPeer();
 
   return (
     <Flex justifyContent="space-between" height="106px" data-testid="peer-row" paddingY="30px">
@@ -76,7 +76,7 @@ const PeerRow = ({ peerInfo }: { peerInfo: ExtendedPeerInfo }) => {
         <IconButton
           aria-label="Remove Peer"
           icon={<TrashIcon />}
-          onClick={() => removePeer(peerInfo)}
+          onClick={() => removeBeaconPeer(peerInfo)}
           size="xs"
           variant="circle"
         />
@@ -94,7 +94,7 @@ const PeerRow = ({ peerInfo }: { peerInfo: ExtendedPeerInfo }) => {
  * @param peerInfo - peerInfo provided by beacon Api + computed dAppId.
  */
 const StoredPeerInfo = ({ peerInfo }: { peerInfo: ExtendedPeerInfo }) => {
-  const connectionInfo = useGetConnectionInfo(peerInfo.senderId);
+  const connectionInfo = useGetBeaconConnectionInfo(peerInfo.senderId);
 
   if (!connectionInfo) {
     return null;

apps/desktop/src/utils/beacon/PermissionRequestModal.tsx

@@ -27,7 +27,7 @@ import {
 import { useDynamicModalContext } from "@umami/components";
 import {
   WalletClient,
-  useAddConnection,
+  useAddBeaconConnection,
   useAsyncActionHandler,
   useGetImplicitAccount,
 } from "@umami/state";
@@ -39,7 +39,7 @@ import { OwnedImplicitAccountsAutocomplete } from "../../components/AddressAutoc
 import colors from "../../style/colors";
 
 export const PermissionRequestModal = ({ request }: { request: PermissionRequestOutput }) => {
-  const addConnectionToBeaconSlice = useAddConnection();
+  const addConnectionToBeaconSlice = useAddBeaconConnection();
   const getAccount = useGetImplicitAccount();
   const { onClose } = useDynamicModalContext();
   const { handleAsyncAction } = useAsyncActionHandler();

apps/desktop/src/utils/beacon/useHandleBeaconMessage.tsx

@@ -11,7 +11,7 @@ import {
   useAsyncActionHandler,
   useFindNetwork,
   useGetOwnedAccountSafe,
-  useRemovePeerBySenderId,
+  useRemoveBeaconPeerBySenderId,
 } from "@umami/state";
 import { type Network } from "@umami/tezos";
 
@@ -23,15 +23,15 @@ import { BeaconSignPage } from "../../components/SendFlow/Beacon/BeaconSignPage"
 /**
  * @returns a function that handles a beacon message and opens a modal with the appropriate content
  *
- * For operation requests it will also try to convert the operation(s) to our {@link Operation} format,
+ * For operation requests it will also try to convert the operation(s)n to our {@link Operation} format,
  * estimate the fee and open the BeaconSignPage only if it succeeds
  */
 export const useHandleBeaconMessage = () => {
   const { openWith } = useDynamicModalContext();
   const { handleAsyncAction } = useAsyncActionHandler();
   const getAccount = useGetOwnedAccountSafe();
   const findNetwork = useFindNetwork();
-  const removePeer = useRemovePeerBySenderId();
+  const removePeer = useRemoveBeaconPeerBySenderId();
 
   // we should confirm that we support the network that the beacon request is coming from
   const checkNetwork = ({

apps/web/src/components/Menu/AppsMenu/AppsMenu.test.tsx

@@ -1,15 +1,40 @@
-import { WalletClient } from "@umami/state";
+jest.mock("@umami/state", () => ({
+  ...jest.requireActual("@umami/state"),
+  walletKit: {
+    core: {},
+    metadata: {
+      name: "AppMenu test",
+      description: "Umami Wallet with WalletConnect",
+      url: "https://umamiwallet.com",
+      icons: ["https://umamiwallet.com/assets/favicon-32-45gq0g6M.png"],
+    },
+    getActiveSessions: jest.fn(),
+    pair: jest.fn(),
+  },
+  createWalletKit: jest.fn(),
+}));
+
+import { WalletClient, walletKit } from "@umami/state";
 
 import { AppsMenu } from "./AppsMenu";
 import { act, renderInDrawer, screen, userEvent } from "../../../testUtils";
 
 describe("<AppsMenu />", () => {
-  it("calls addPeer on button click with the copied text", async () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it("calls addPeer for Beacon on button click with the copied text", async () => {
     const user = userEvent.setup();
     const payload =
       "btunoo2sZmmMB6k9Bef8tgYs7PsS6g6DFdUiDzVuwMxv7nGJN71eFCtGxGfq321pFy4eT2ckDWWzTdBhvje7VUzy2ZciQSe9rGMCF6Fpx5MCM3q2CWyUt4nhqSFigPhcUHaLAzAwcSTXbSRn9YZ8QJwwaWzdsNF6UW4PrWeCbABvHArBDpeLRNxJRjMpAVndoCCf9Vbu7YRXF2FcxWxUrcqfj1i3hr34M8zRTtP5QuVqita8MW5A6Ub3tB3bDvykqa8aYFvxbWr47USytTQjVqnnFUdBo8rm3cJyUq39hJwUdbvZEyoGUWnfuhFHYcbyZP86CPef1p7Eh1KUEwVKxLxQwNX84Eg1eBkZowRtNKcqqShMhKT7ZEELyfh1ji7NckRF8RJuwuco4dqBg6msuZjZqta4CsJvQw4A66RbePC8LxwKEb3Nhha8cygtbQVC4Scb7PaLY9qwQJjYL7n";
     jest.spyOn(navigator.clipboard, "readText").mockResolvedValue(payload);
-    const mockAddPeer = jest.spyOn(WalletClient, "addPeer");
+    jest.spyOn(walletKit, "getActiveSessions").mockImplementation(() => ({}));
+
+    // make sure the mocks are correct
+    expect(walletKit.metadata.name).toEqual("AppMenu test");
+    expect(walletKit.getActiveSessions()).toEqual({});
+
+    const mockAddPeer = jest.spyOn(WalletClient, "addPeer").mockResolvedValue(undefined);
 
     await renderInDrawer(<AppsMenu />);
 
@@ -25,4 +50,25 @@ describe("<AppsMenu />", () => {
       version: "3",
     });
   });
+
+  it("handles WalletConenct request on button click with the copied text", async () => {
+    const user = userEvent.setup();
+    const payload =
+      "wc:c02d87d6f8c46a9192e1fd4627b5104d326ee6ec4dd9040482a277bdc53e2f10@2?expiryTimestamp=1733241891&relay-protocol=irn&symKey=d8b5f7b8a35b7e73126bfe4af89568811a87c4cfd49e3946c44026d55267ebd7";
+    jest.spyOn(navigator.clipboard, "readText").mockResolvedValue(payload);
+    jest.spyOn(walletKit, "getActiveSessions").mockImplementation(() => ({}));
+
+    // make sure the mocks are correct
+    expect(walletKit.metadata.name).toEqual("AppMenu test");
+    expect(walletKit.getActiveSessions()).toEqual({});
+
+    const mockAddPeer = jest.spyOn(WalletClient, "addPeer").mockResolvedValue(undefined);
+
+    await renderInDrawer(<AppsMenu />);
+
+    await act(() => user.click(screen.getByText("Connect")));
+
+    expect(mockAddPeer).not.toHaveBeenCalled();
+    expect(walletKit.pair).toHaveBeenCalledWith({ uri: payload });
+  });
 });

apps/web/src/components/Menu/AppsMenu/AppsMenu.tsx

@@ -2,7 +2,7 @@ import { Button, Text } from "@chakra-ui/react";
 import { useAddPeer } from "@umami/state";
 
 import { BeaconPeers } from "../../beacon";
-import { useOnWalletConnect } from "../../WalletConnect";
+import { WcPeers, useOnWalletConnect } from "../../WalletConnect";
 import { DrawerContentWrapper } from "../DrawerContentWrapper";
 
 export const AppsMenu = () => {
@@ -36,6 +36,7 @@ export const AppsMenu = () => {
       title="Apps"
     >
       <BeaconPeers />
+      <WcPeers />
     </DrawerContentWrapper>
   );
 };

apps/web/src/components/Menu/Menu.test.tsx

@@ -6,6 +6,7 @@ import {
   addTestAccount,
   makeStore,
   useDownloadBackupFile,
+  walletKit,
 } from "@umami/state";
 
 import { AddressBookMenu } from "./AddressBookMenu/AddressBookMenu";
@@ -30,6 +31,17 @@ jest.mock("@chakra-ui/system", () => ({
 jest.mock("@umami/state", () => ({
   ...jest.requireActual("@umami/state"),
   useDownloadBackupFile: jest.fn(),
+  walletKit: {
+    core: {},
+    metadata: {
+      name: "AppMenu test",
+      description: "Umami Wallet with WalletConnect",
+      url: "https://umamiwallet.com",
+      icons: ["https://umamiwallet.com/assets/favicon-32-45gq0g6M.png"],
+    },
+    getActiveSessions: jest.fn(),
+  },
+  createWalletKit: jest.fn(),
 }));
 
 let store: UmamiStore;
@@ -71,6 +83,7 @@ describe("<Menu />", () => {
     ])("opens %label menu correctly", async (label, Component) => {
       const user = userEvent.setup();
       const { openWith } = dynamicDrawerContextMock;
+      jest.spyOn(walletKit, "getActiveSessions").mockImplementation(() => ({}));
 
       await renderInDrawer(<Menu />, store);
 

apps/web/src/components/WalletConnect/SessionProposalModal.tsx

@@ -16,7 +16,12 @@ import {
 } from "@chakra-ui/react";
 import { type WalletKitTypes } from "@reown/walletkit";
 import { useDynamicModalContext } from "@umami/components";
-import { useAsyncActionHandler, useGetImplicitAccount, walletKit } from "@umami/state";
+import {
+  useAsyncActionHandler,
+  useGetImplicitAccount,
+  useToggleWcPeerListUpdated,
+  walletKit,
+} from "@umami/state";
 import { type SessionTypes } from "@walletconnect/types";
 import { buildApprovedNamespaces, getSdkError } from "@walletconnect/utils";
 import { FormProvider, useForm } from "react-hook-form";
@@ -35,6 +40,7 @@ export const SessionProposalModal = ({
   network: NetworkType;
 }) => {
   const getAccount = useGetImplicitAccount();
+  const toggleWcPeerListUpdated = useToggleWcPeerListUpdated();
   const color = useColor();
 
   const { onClose } = useDynamicModalContext();
@@ -71,6 +77,7 @@ export const SessionProposalModal = ({
         sessionProperties: {},
       });
       console.log("WC session approved", session);
+      toggleWcPeerListUpdated();
       onClose();
     });
 

apps/web/src/components/WalletConnect/WalletConnectPeers.tsx

@@ -0,0 +1,131 @@
+import { Center, Divider, Flex, IconButton, Image, Text, VStack } from "@chakra-ui/react";
+import { useDisconnectWalletConnectPeer, useGetWcPeerListToggle, walletKit } from "@umami/state";
+import { parsePkh } from "@umami/tezos";
+import { type SessionTypes } from "@walletconnect/types";
+import { getSdkError } from "@walletconnect/utils";
+import capitalize from "lodash/capitalize";
+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.
+ *
+ * Loads dApps data from WalletConnect API and displays it in a list.
+ */
+export const WcPeers = () => {
+  const [sessions, setSessions] = useState<Record<string, SessionTypes.Struct>>({});
+  const isUpdated = useGetWcPeerListToggle();
+
+  useEffect(() => {
+    const sessions: Record<string, SessionTypes.Struct> = walletKit.getActiveSessions();
+    setSessions(sessions);
+  }, [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 (
+    <VStack
+      alignItems="flex-start"
+      gap="24px"
+      marginTop="24px"
+      data-testid="wc-peers"
+      divider={<Divider />}
+      spacing="0"
+    >
+      {
+        // loop peers and print PeerRow
+        Object.entries(sessions).map(([topic, sessionInfo]) => (
+          <PeerRow key={topic} sessionInfo={sessionInfo} />
+        ))
+      }
+    </VStack>
+  );
+};
+
+/**
+ * Component for displaying info about single connected dApp.
+ *
+ * @param sessionInfo - sessionInfo provided by wc Api + computed dAppId.
+ * @param onRemove - action for deleting dApp connection.
+ */
+const PeerRow = ({ sessionInfo }: { sessionInfo: SessionTypes.Struct }) => {
+  const color = useColor();
+  const disconnectWalletConnectPeer = useDisconnectWalletConnectPeer();
+
+  return (
+    <Center
+      alignItems="center"
+      justifyContent="space-between"
+      width="full"
+      height="60px"
+      data-testid="peer-row"
+    >
+      <Flex height="100%">
+        <Center width="60px" marginRight="12px">
+          <Image
+            objectFit="cover"
+            fallback={<CodeSandboxIcon width="36px" height="36px" />}
+            src={sessionInfo.peer.metadata.icons[0]}
+          />
+        </Center>
+        <Center alignItems="flex-start" flexDirection="column" gap="6px">
+          <Text color={color("900")} size="lg">
+            {sessionInfo.peer.metadata.name}
+          </Text>
+          <StoredSessionInfo sessionInfo={sessionInfo} />
+        </Center>
+      </Flex>
+      <IconButton
+        color={color("500")}
+        aria-label="Remove Peer"
+        icon={<TrashIcon />}
+        onClick={() =>
+          disconnectWalletConnectPeer({
+            topic: sessionInfo.topic,
+            reason: getSdkError("USER_DISCONNECTED"),
+          })
+        }
+        variant="iconButtonSolid"
+      />
+    </Center>
+  );
+};
+
+/**
+ * Component for displaying additional info about connection with a dApp.
+ *
+ * Displays {@link AddressPill} with a connected account and network type.
+ *
+ * @param sessionInfo - sessionInfo provided by WalletConnect Api.
+ * Account is stored in format: tezos:ghostnet:tz1...
+ * Network is stored in format: tezos:mainnet
+ */
+const StoredSessionInfo = ({ sessionInfo }: { sessionInfo: SessionTypes.Struct }) => (
+  <Flex>
+    <AddressPill
+      marginRight="10px"
+      address={parsePkh(sessionInfo.namespaces.tezos.accounts[0].split(":")[2])}
+    />
+    <Divider marginRight="10px" orientation="vertical" />
+    <Text marginTop="2px" marginRight="4px" fontWeight={600} size="sm">
+      Network:
+    </Text>
+    <Text marginTop="2px" data-testid="dapp-connection-network" size="sm">
+      {capitalize(sessionInfo.namespaces.tezos.chains?.[0].split(":")[1] ?? "")}
+    </Text>
+  </Flex>
+);