Merge pull request #1764 from trilitech/fix-beacon-connection-updates

Fix beacon peers updates

apps/desktop-e2e/package.json

@@ -35,6 +35,7 @@
     "@umami/tzkt": "workspace:^",
     "date-fns": "^3.6.0",
     "lodash": "^4.17.21",
+    "react": "^18.3.1",
     "start-server-and-test": "^2.0.5",
     "typescript": "^5.5.4"
   }

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

@@ -1,4 +1,4 @@
-import { type ExtendedPeerInfo, getSenderId } from "@airgap/beacon-wallet";
+import { type ExtendedPeerInfo } from "@airgap/beacon-wallet";
 import {
   AspectRatio,
   Box,
@@ -12,8 +12,8 @@ import {
 } from "@chakra-ui/react";
 import { useGetConnectionInfo, usePeers, useRemovePeer } from "@umami/state";
 import { parsePkh } from "@umami/tezos";
-import { capitalize, noop } from "lodash";
-import { Fragment, useEffect, useState } from "react";
+import capitalize from "lodash/capitalize";
+import { Fragment } from "react";
 
 import { TrashIcon } from "../../assets/icons";
 import { AddressPill } from "../../components/AddressPill/AddressPill";
@@ -27,19 +27,7 @@ import colors from "../../style/colors";
 export const BeaconPeers = () => {
   const { peers } = usePeers();
 
-  const [peersWithId, setPeersWithId] = useState<ExtendedPeerInfo[]>([]);
-
-  // senderId will always be set here, even if we haven't saved it in beaconSlice for a dApp.
-  useEffect(() => {
-    const peerIdPromises = peers.map(async peer => ({
-      ...peer,
-      senderId: peer.senderId || (await getSenderId(peer.publicKey)),
-    }));
-
-    Promise.all(peerIdPromises).then(setPeersWithId).catch(noop);
-  }, [peers]);
-
-  if (peersWithId.length === 0) {
+  if (peers.length === 0) {
     return (
       <Box data-testid="beacon-peers-empty">
         <Divider />
@@ -50,28 +38,18 @@ export const BeaconPeers = () => {
     );
   }
 
-  return <PeersDisplay data-testid="beacon-peers" peerInfos={peersWithId} />;
+  return (
+    <Box data-testid="beacon-peers">
+      {peers.map(peerInfo => (
+        <Fragment key={peerInfo.senderId}>
+          <Divider />
+          <PeerRow peerInfo={peerInfo} />
+        </Fragment>
+      ))}
+    </Box>
+  );
 };
 
-/**
- * Component for displaying a list of connected dApps.
- *
- * Each {@link PeerRow} contains info about a single dApp & delete button.
- *
- * @param peerInfos - peerInfo provided by beacon Api + computed dAppId.
- * @param removePeer - hook for deleting dApp connections.
- */
-const PeersDisplay = ({ peerInfos }: { peerInfos: ExtendedPeerInfo[] }) => (
-  <Box>
-    {peerInfos.map(peerInfo => (
-      <Fragment key={peerInfo.senderId}>
-        <Divider />
-        <PeerRow peerInfo={peerInfo} />
-      </Fragment>
-    ))}
-  </Box>
-);
-
 /**
  * Component for displaying info about single connected dApp.
  *

apps/web/src/components/Header/Actions.tsx

@@ -1,21 +1,16 @@
-import { Button, Flex, Icon, IconButton } from "@chakra-ui/react";
+import { Flex, Icon, IconButton } from "@chakra-ui/react";
 import { useDynamicDrawerContext } from "@umami/components";
-import { useAddPeer } from "@umami/state";
 
 import { MenuIcon } from "../../assets/icons";
 import { ColorSchemeModeToggle } from "../ColorSchemeModeToggle/ColorSchemeModeToggle";
 import { Menu } from "../Menu";
 
 export const Actions = () => {
   const { openWith } = useDynamicDrawerContext();
-  const addPeer = useAddPeer();
 
   return (
     <Flex alignItems="center" gap="24px">
       <ColorSchemeModeToggle />
-      <Button onClick={() => navigator.clipboard.readText().then(text => addPeer(text))} size="sm">
-        Add Beacon
-      </Button>
       <IconButton
         aria-label="Open menu"
         icon={
@@ -25,7 +20,6 @@ export const Actions = () => {
               base: "18px",
               lg: "24px",
             }}
-            height="auto"
           />
         }
         isRound

apps/web/src/components/beacon/BeaconPeers.tsx

@@ -1,9 +1,8 @@
-import { type ExtendedPeerInfo, getSenderId } from "@airgap/beacon-wallet";
+import { type ExtendedPeerInfo } from "@airgap/beacon-wallet";
 import { Center, Divider, Flex, Heading, IconButton, Image, Text, VStack } from "@chakra-ui/react";
 import { useGetConnectionInfo, usePeers, useRemovePeer } from "@umami/state";
 import { parsePkh } from "@umami/tezos";
 import capitalize from "lodash/capitalize";
-import { useEffect, useState } from "react";
 
 import { CodeSandboxIcon, StubIcon as TrashIcon } from "../../assets/icons";
 import { AddressPill } from "../../components/AddressPill/AddressPill";
@@ -17,21 +16,8 @@ import { EmptyMessage } from "../EmptyMessage";
  */
 export const BeaconPeers = () => {
   const { peers } = usePeers();
-  const [peersWithId, setPeersWithId] = useState<ExtendedPeerInfo[]>([]);
 
-  // senderId will always be set here, even if we haven't saved it in beaconSlice for a dApp.
-  useEffect(() => {
-    const peerIdPromises = peers.map(async peer => ({
-      ...peer,
-      senderId: peer.senderId || (await getSenderId(peer.publicKey)),
-    }));
-
-    Promise.all(peerIdPromises)
-      .then(setPeersWithId)
-      .catch(() => {});
-  }, [peers]);
-
-  if (peersWithId.length === 0) {
+  if (peers.length === 0) {
     return (
       <EmptyMessage
         alignItems="flex-start"
@@ -43,32 +29,22 @@ export const BeaconPeers = () => {
     );
   }
 
-  return <PeersDisplay data-testid="beacon-peers" peerInfos={peersWithId} />;
+  return (
+    <VStack
+      alignItems="flex-start"
+      gap="24px"
+      marginTop="24px"
+      data-testid="beacon-peers"
+      divider={<Divider />}
+      spacing="0"
+    >
+      {peers.map(peerInfo => (
+        <PeerRow key={peerInfo.senderId} peerInfo={peerInfo} />
+      ))}
+    </VStack>
+  );
 };
 
-/**
- * Component for displaying a list of connected dApps.
- *
- * Each {@link PeerRow} contains info about a single dApp & delete button.
- *
- * @param peerInfos - peerInfo provided by beacon Api + computed dAppId.
- * @param removePeer - hook for deleting dApp connections.
- */
-const PeersDisplay = ({ peerInfos, ...props }: { peerInfos: ExtendedPeerInfo[] }) => (
-  <VStack
-    alignItems="flex-start"
-    gap="24px"
-    marginTop="24px"
-    divider={<Divider />}
-    spacing="0"
-    {...props}
-  >
-    {peerInfos.map(peerInfo => (
-      <PeerRow key={peerInfo.senderId} peerInfo={peerInfo} />
-    ))}
-  </VStack>
-);
-
 /**
  * Component for displaying info about single connected dApp.
  *
@@ -91,7 +67,7 @@ const PeerRow = ({ peerInfo }: { peerInfo: ExtendedPeerInfo }) => {
         <Center width="60px" marginRight="12px">
           <Image
             objectFit="cover"
-            fallback={<CodeSandboxIcon width="36px" height="auto" />}
+            fallback={<CodeSandboxIcon width="36px" height="36px" />}
             src={peerInfo.icon}
           />
         </Center>

packages/state/package.json

@@ -68,6 +68,7 @@
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@reduxjs/toolkit": "^2.2.7",
+    "@tanstack/react-query": "^5.51.24",
     "@taquito/signer": "^20.0.1",
     "@taquito/utils": "^20.0.1",
     "@umami/core": "workspace:^",

packages/state/src/hooks/beacon.ts

@@ -5,9 +5,9 @@ import {
   Serializer,
 } from "@airgap/beacon-wallet";
 import { useToast } from "@chakra-ui/react";
+import { useQuery } from "@tanstack/react-query";
 import { type RawPkh } from "@umami/tezos";
 import { uniq } from "lodash";
-import { useCallback, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 
 import { useAppSelector } from "./useAppSelector";
@@ -60,18 +60,16 @@ export const useRemoveConnection = () => {
 };
 
 export const usePeers = () => {
-  const [peers, setPeers] = useState<ExtendedPeerInfo[]>([]);
-
-  const refresh = useCallback(async () => {
-    const peers = await WalletClient.getPeers();
-    setPeers(peers as ExtendedPeerInfo[]);
-  }, []);
-
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-
-  return { peers, refresh };
+  const query = useQuery({
+    queryKey: ["beaconPeers"],
+    queryFn: async () => {
+      const peers = await WalletClient.getPeers();
+      return peers as ExtendedPeerInfo[];
+    },
+    initialData: [],
+  });
+
+  return { peers: query.data, refresh: query.refetch };
 };
 
 export const useRemovePeer = () => {
@@ -108,7 +106,7 @@ export const useAddPeer = () => {
       .deserialize(payload)
       .then(parsePeerInfo)
       .then(peer => WalletClient.addPeer(peer as ExtendedPeerInfo))
-      .then(refresh)
+      .then(() => refresh())
       .catch(e => {
         toast({
           description:

packages/state/src/hooks/setAccountData.test.ts

@@ -15,7 +15,6 @@ import {
   isAccountRevealed,
   makeDerivationPath,
 } from "@umami/tezos";
-import { act } from "react";
 
 import { useRemoveDependenciesAndMultisigs } from "./removeAccountDependencies";
 import {
@@ -27,7 +26,13 @@ import {
 } from "./setAccountData";
 import { accountsActions } from "../slices";
 import { type UmamiStore, makeStore } from "../store";
-import { addTestAccount, addTestAccounts, fakeIsAccountRevealed, renderHook } from "../testUtils";
+import {
+  act,
+  addTestAccount,
+  addTestAccounts,
+  fakeIsAccountRevealed,
+  renderHook,
+} from "../testUtils";
 
 let store: UmamiStore;
 beforeEach(() => {

packages/state/src/testUtils.tsx

@@ -21,6 +21,7 @@ export const addTestAccounts = (store: UmamiStore, accounts: (Account | Multisig
 import { PropsWithChildren, act } from "react";
 import { Provider } from "react-redux";
 import { RawPkh } from "@umami/tezos";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const customRenderHook = <
   Result,
@@ -37,7 +38,9 @@ const customRenderHook = <
   const store = options?.store ?? makeStore();
 
   const Wrapper = ({ children }: PropsWithChildren) => (
-    <Provider store={store}>{children}</Provider>
+    <QueryClientProvider client={new QueryClient()}>
+      <Provider store={store}>{children}</Provider>
+    </QueryClientProvider>
   );
 
   return {

yarn.lock

@@ -7632,6 +7632,7 @@ __metadata:
     lodash: "npm:^4.17.21"
     madge: "npm:^8.0.0"
     prettier: "npm:^3.3.3"
+    react: "npm:^18.3.1"
     rimraf: "npm:^6.0.1"
     start-server-and-test: "npm:^2.0.5"
     typescript: "npm:^5.5.4"
@@ -7924,6 +7925,7 @@ __metadata:
     "@emotion/react": "npm:^11.13.0"
     "@emotion/styled": "npm:^11.13.0"
     "@reduxjs/toolkit": "npm:^2.2.7"
+    "@tanstack/react-query": "npm:^5.51.24"
     "@taquito/signer": "npm:^20.0.1"
     "@taquito/utils": "npm:^20.0.1"
     "@testing-library/dom": "npm:^10.4.0"