diff --git a/packages/app-extension/src/index.tsx b/packages/app-extension/src/index.tsx index 1a720e0f6..df0a80ce8 100644 --- a/packages/app-extension/src/index.tsx +++ b/packages/app-extension/src/index.tsx @@ -2,7 +2,6 @@ import React, { lazy, Suspense } from "react"; import ReactDOM from "react-dom"; import { openPopupWindow } from "@coral-xyz/common/dist/esm/browser"; import { BACKPACK_FEATURE_POP_MODE } from "@coral-xyz/common/dist/esm/generated-config"; -import { Loading } from "@coral-xyz/react-common/dist/esm/components/base/Loading"; import "./index.css"; @@ -35,7 +34,7 @@ document.addEventListener("keypress", async function onPress(event) { // ReactDOM.render( - }> + diff --git a/packages/recoil/src/atoms/nft.tsx b/packages/recoil/src/atoms/nft.tsx index 3eac0ae8e..9d91ee406 100644 --- a/packages/recoil/src/atoms/nft.tsx +++ b/packages/recoil/src/atoms/nft.tsx @@ -97,13 +97,14 @@ const nftMetadata = selector>({ * Poll local NFT data and create list of all as source for nftById(s) atoms * This atom breaks to global app rerender due to blockchain data polling. */ -const nftCollections = atom<{ +export const nftCollections = atom<{ [Blockchain.SOLANA]: NftCollection[] | null; [Blockchain.ETHEREUM]: NftCollection[] | null; }>({ key: "nftCollections", effects: [ - ({ setSelf, getPromise }) => { + ({ setSelf, onSet, getPromise }) => { + let timeout; const pollLocalData = async (isInitial?: boolean) => { try { const [solana, ethereum, currentValue] = await Promise.all([ @@ -122,13 +123,23 @@ const nftCollections = atom<{ // ensure polling continues even on error. console.error(e); } - setTimeout(() => requestAnimationFrame(() => pollLocalData()), 1000); + timeout = setTimeout( + () => requestAnimationFrame(() => pollLocalData()), + 1000 + ); }; setSelf({ [Blockchain.SOLANA]: null, [Blockchain.ETHEREUM]: null, }); pollLocalData(true); + onSet(() => { + clearTimeout(timeout); + pollLocalData(); + }); + return () => { + clearTimeout(timeout); + }; }, ], }); diff --git a/packages/recoil/src/context/Notifications.tsx b/packages/recoil/src/context/Notifications.tsx index 1ade92cb4..109c6be7e 100644 --- a/packages/recoil/src/context/Notifications.tsx +++ b/packages/recoil/src/context/Notifications.tsx @@ -1,11 +1,8 @@ import React, { useEffect } from "react"; -import type { - Blockchain, - FEATURE_GATES_MAP, - Notification, -} from "@coral-xyz/common"; +import type { FEATURE_GATES_MAP, Notification } from "@coral-xyz/common"; import { BackgroundSolanaConnection, + Blockchain, CHANNEL_POPUP_NOTIFICATIONS, ChannelAppUi, getLogger, @@ -82,6 +79,13 @@ export function NotificationsProvider(props: any) { const setKeyringStoreState = useSetRecoilState(atoms.keyringStoreState); const setActiveUser = useSetRecoilState(atoms.user); const resetAllUsers = useResetRecoilState(atoms.allUsers); + const _setNftCollections = useSetRecoilState(atoms.nftCollections); + const resetNftCollections = () => { + _setNftCollections({ + [Blockchain.SOLANA]: null, + [Blockchain.ETHEREUM]: null, + }); + }; // Preferences. const setPreferences = useSetRecoilState(atoms.preferences); const setFeatureGates = useSetRecoilState(atoms.featureGates); @@ -570,6 +574,7 @@ export function NotificationsProvider(props: any) { setWalletData(notif.data.walletData); setActiveUser(notif.data.user); resetAllUsers(); + resetNftCollections(); }; const handleRemovedUser = (notif: Notification) => {