From 2d1132a0c64fe98c83db70075efb0d2cfc2e9a28 Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Wed, 21 Aug 2024 12:13:30 +0100 Subject: [PATCH] Fix beacon peers updates --- apps/desktop-e2e/package.json | 1 + apps/desktop/src/utils/beacon/BeaconPeers.tsx | 50 +++++----------- apps/web/src/components/Header/Actions.tsx | 8 +-- .../web/src/components/beacon/BeaconPeers.tsx | 58 ++++++------------- packages/state/package.json | 1 + packages/state/src/hooks/beacon.ts | 26 ++++----- .../state/src/hooks/setAccountData.test.ts | 9 ++- packages/state/src/testUtils.tsx | 5 +- yarn.lock | 2 + 9 files changed, 59 insertions(+), 101 deletions(-) diff --git a/apps/desktop-e2e/package.json b/apps/desktop-e2e/package.json index aecbea18ee..f8c376d1dc 100644 --- a/apps/desktop-e2e/package.json +++ b/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" } diff --git a/apps/desktop/src/utils/beacon/BeaconPeers.tsx b/apps/desktop/src/utils/beacon/BeaconPeers.tsx index 312a1c301c..e6016208e4 100644 --- a/apps/desktop/src/utils/beacon/BeaconPeers.tsx +++ b/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([]); - - // 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 ( @@ -50,28 +38,18 @@ export const BeaconPeers = () => { ); } - return ; + return ( + + {peers.map(peerInfo => ( + + + + + ))} + + ); }; -/** - * 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[] }) => ( - - {peerInfos.map(peerInfo => ( - - - - - ))} - -); - /** * Component for displaying info about single connected dApp. * diff --git a/apps/web/src/components/Header/Actions.tsx b/apps/web/src/components/Header/Actions.tsx index e0d852014f..6c1e7b6a07 100644 --- a/apps/web/src/components/Header/Actions.tsx +++ b/apps/web/src/components/Header/Actions.tsx @@ -1,6 +1,5 @@ -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"; @@ -8,14 +7,10 @@ import { Menu } from "../Menu"; export const Actions = () => { const { openWith } = useDynamicDrawerContext(); - const addPeer = useAddPeer(); return ( - { base: "18px", lg: "24px", }} - height="auto" /> } isRound diff --git a/apps/web/src/components/beacon/BeaconPeers.tsx b/apps/web/src/components/beacon/BeaconPeers.tsx index c77aa4f76e..ebd2201a3d 100644 --- a/apps/web/src/components/beacon/BeaconPeers.tsx +++ b/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([]); - // 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 ( { ); } - return ; + return ( + } + spacing="0" + > + {peers.map(peerInfo => ( + + ))} + + ); }; -/** - * 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[] }) => ( - } - spacing="0" - {...props} - > - {peerInfos.map(peerInfo => ( - - ))} - -); - /** * Component for displaying info about single connected dApp. * @@ -91,7 +67,7 @@ const PeerRow = ({ peerInfo }: { peerInfo: ExtendedPeerInfo }) => {
} + fallback={} src={peerInfo.icon} />
diff --git a/packages/state/package.json b/packages/state/package.json index a2b9e568a1..9cb250643a 100644 --- a/packages/state/package.json +++ b/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:^", diff --git a/packages/state/src/hooks/beacon.ts b/packages/state/src/hooks/beacon.ts index b0ec99444b..b31f4e7881 100644 --- a/packages/state/src/hooks/beacon.ts +++ b/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([]); - - 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: diff --git a/packages/state/src/hooks/setAccountData.test.ts b/packages/state/src/hooks/setAccountData.test.ts index 33d95dcd5e..e296dd3ef6 100644 --- a/packages/state/src/hooks/setAccountData.test.ts +++ b/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(() => { diff --git a/packages/state/src/testUtils.tsx b/packages/state/src/testUtils.tsx index 5fd97092df..63d63df0b6 100644 --- a/packages/state/src/testUtils.tsx +++ b/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) => ( - {children} + + {children} + ); return { diff --git a/yarn.lock b/yarn.lock index 7719b86f25..694575f57c 100644 --- a/yarn.lock +++ b/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"