From 0ad34e691157265c330972f6b038b1e315284f1b Mon Sep 17 00:00:00 2001 From: Philipp Adrian <580992+ph101pp@users.noreply.github.com> Date: Fri, 31 Mar 2023 21:06:15 -0400 Subject: [PATCH] Fix Chat button, autolock when worker dies & update cache times (#3533) * Update swr cache times * Fix join chat button in nft details view * poll for keystore state -> remove backgroundKeepAlive --- .../backpack-api/src/routes/v1/proxy.ts | 2 +- backend/workers/swr-cache/src/index.ts | 9 ++++- backend/workers/xnft-gateway/src/index.ts | 10 ++--- packages/app-extension/src/app/App.tsx | 7 +--- .../components/Onboarding/pages/Finish.tsx | 37 ++++++++----------- .../app-extension/src/options/Options.tsx | 7 +--- packages/background/src/frontend/server-ui.ts | 3 -- packages/common/src/constants.ts | 2 - packages/common/src/utils.ts | 2 +- packages/recoil/src/atoms/keyring.tsx | 24 +++++++----- packages/recoil/src/atoms/nft.tsx | 8 ++-- packages/recoil/src/hooks/client.tsx | 15 -------- 12 files changed, 53 insertions(+), 73 deletions(-) diff --git a/backend/native/backpack-api/src/routes/v1/proxy.ts b/backend/native/backpack-api/src/routes/v1/proxy.ts index eeea20eeb..84d04d88a 100644 --- a/backend/native/backpack-api/src/routes/v1/proxy.ts +++ b/backend/native/backpack-api/src/routes/v1/proxy.ts @@ -5,7 +5,7 @@ import router from "./preferences"; router.get("/*", async (req, res) => { const url = (req.path || "")?.slice(1); try { - const req = request("https://swr.xnfts.dev/web/" + url.toString()); + const req = request("https://swr.xnfts.dev/1min/" + url.toString()); req.on("error", function () { // Failures here are common due to spam NFTs (domain expiry, bad certs, // etc) so don't log anything to avoid cluttering the logs diff --git a/backend/workers/swr-cache/src/index.ts b/backend/workers/swr-cache/src/index.ts index e27222e85..c7226da0f 100644 --- a/backend/workers/swr-cache/src/index.ts +++ b/backend/workers/swr-cache/src/index.ts @@ -90,13 +90,20 @@ const executeRequest: (c: ExecutionContext, env: Env) => ExecuteRequest = } if (service === "web") { + const proxiedUrl = url.pathname.slice(1); + const fetched = await fetch(proxiedUrl); + const response = new Response(fetched.body, fetched); + return response; + } + + if (service === "1min") { const proxiedUrl = url.pathname.slice(1); console.log("web", proxiedUrl); const fetched = await fetch(proxiedUrl); const response = new Response(fetched.body, fetched); response.headers.set( "Cache-Control", - `max-age=${1}, s-maxage=${1}, stale-while-revalidate=${5}` + `max-age=${60}, s-maxage=${60}, stale-while-revalidate=${60}` ); return response; } diff --git a/backend/workers/xnft-gateway/src/index.ts b/backend/workers/xnft-gateway/src/index.ts index 9c47e0d1c..6e86cfd2f 100644 --- a/backend/workers/xnft-gateway/src/index.ts +++ b/backend/workers/xnft-gateway/src/index.ts @@ -54,8 +54,8 @@ const executeRequest: (c: ExecutionContext, env: Env) => ExecuteRequest = if (isImmutable) { response.headers.set( "Cache-Control", - `max-age=31536000, s-maxage=31536000, immutable` - ); + `max-age=${60}, s-maxage=${60}, stale-while-revalidate=${60}` + ); //1min swr } // WHITELIST SPECIAL CASE else if ( @@ -64,10 +64,8 @@ const executeRequest: (c: ExecutionContext, env: Env) => ExecuteRequest = ) { response.headers.set( "Cache-Control", - `max-age=${60 * 60}, s-maxage=${60 * 60}, stale-while-revalidate=${ - 60 * 60 - }` - ); //1hr swr + `max-age=${60}, s-maxage=${60}, stale-while-revalidate=${60}` + ); //1min swr } return response; diff --git a/packages/app-extension/src/app/App.tsx b/packages/app-extension/src/app/App.tsx index 7bdcc35e7..6e4fb5dee 100644 --- a/packages/app-extension/src/app/App.tsx +++ b/packages/app-extension/src/app/App.tsx @@ -1,10 +1,7 @@ import { lazy, Suspense, useLayoutEffect } from "react"; import { HashRouter } from "react-router-dom"; import { EXTENSION_HEIGHT, EXTENSION_WIDTH } from "@coral-xyz/common"; -import { - NotificationsProvider, - useBackgroundKeepAlive, -} from "@coral-xyz/recoil"; +import { NotificationsProvider, useKeyringStoreState } from "@coral-xyz/recoil"; import { BACKGROUND_BACKDROP_COLOR, LIGHT_BACKGROUND_BACKDROP_COLOR, @@ -96,7 +93,7 @@ export default function App() { } function _App() { - useBackgroundKeepAlive(); + useKeyringStoreState(); return ( diff --git a/packages/app-extension/src/components/Onboarding/pages/Finish.tsx b/packages/app-extension/src/components/Onboarding/pages/Finish.tsx index 0879ef5c2..1646f6e92 100644 --- a/packages/app-extension/src/components/Onboarding/pages/Finish.tsx +++ b/packages/app-extension/src/components/Onboarding/pages/Finish.tsx @@ -1,11 +1,11 @@ import { useEffect, useState } from "react"; -import { - BrowserRuntimeExtension, - UI_RPC_METHOD_KEYRING_STORE_KEEP_ALIVE, - XNFT_GG_LINK, -} from "@coral-xyz/common"; +import { BrowserRuntimeExtension, XNFT_GG_LINK } from "@coral-xyz/common"; import { Loading } from "@coral-xyz/react-common"; -import { useBackgroundClient, useOnboarding } from "@coral-xyz/recoil"; +import { + useBackgroundClient, + useKeyringStoreState, + useOnboarding, +} from "@coral-xyz/recoil"; import { registerNotificationServiceWorker, @@ -14,6 +14,16 @@ import { import { SetupComplete } from "../../common/Account/SetupComplete"; export const Finish = ({ isAddingAccount }: { isAddingAccount?: boolean }) => { + // This is a mitigation to ensure the keyring store doesn't lock before + // creating the user on the server. + // + // Would be better (though probably not a priority atm) to ensure atomicity. + // E.g. we could generate the UUID here on the client, create the keyring store, + // and only then create the user on the server. If the server fails, then + // rollback on the client. + // + // An improvement for the future! + useKeyringStoreState(); const [loading, setLoading] = useState(true); const { onboardingData, maybeCreateUser } = useOnboarding(); const background = useBackgroundClient(); @@ -33,21 +43,6 @@ export const Finish = ({ isAddingAccount }: { isAddingAccount?: boolean }) => { useEffect(() => { (async () => { - // This is a mitigation to ensure the keyring store doesn't lock before - // creating the user on the server. - // - // Would be better (though probably not a priority atm) to ensure atomicity. - // E.g. we could generate the UUID here on the client, create the keyring store, - // and only then create the user on the server. If the server fails, then - // rollback on the client. - // - // An improvement for the future! - if (isAddingAccount) { - await background.request({ - method: UI_RPC_METHOD_KEYRING_STORE_KEEP_ALIVE, - params: [], - }); - } const res = await maybeCreateUser({ ...onboardingData, isAddingAccount }); if (!res.ok) { if ( diff --git a/packages/app-extension/src/options/Options.tsx b/packages/app-extension/src/options/Options.tsx index c30a00ef1..a9d0e5167 100644 --- a/packages/app-extension/src/options/Options.tsx +++ b/packages/app-extension/src/options/Options.tsx @@ -5,10 +5,7 @@ import { QUERY_CONNECT_HARDWARE, QUERY_ONBOARDING, } from "@coral-xyz/common"; -import { - NotificationsProvider, - useBackgroundKeepAlive, -} from "@coral-xyz/recoil"; +import { NotificationsProvider, useKeyringStoreState } from "@coral-xyz/recoil"; import { RecoilRoot } from "recoil"; import { WithSuspense } from "../app/Router"; @@ -35,7 +32,7 @@ function Options() { } function _Options() { - useBackgroundKeepAlive(); + useKeyringStoreState(); // starts polling to keep worker alive return ( diff --git a/packages/background/src/frontend/server-ui.ts b/packages/background/src/frontend/server-ui.ts index 84e86a008..2bf48a527 100644 --- a/packages/background/src/frontend/server-ui.ts +++ b/packages/background/src/frontend/server-ui.ts @@ -56,7 +56,6 @@ import { UI_RPC_METHOD_KEYRING_SET_MNEMONIC, UI_RPC_METHOD_KEYRING_STORE_CHECK_PASSWORD, UI_RPC_METHOD_KEYRING_STORE_CREATE, - UI_RPC_METHOD_KEYRING_STORE_KEEP_ALIVE, UI_RPC_METHOD_KEYRING_STORE_LOCK, UI_RPC_METHOD_KEYRING_STORE_MNEMONIC_CREATE, UI_RPC_METHOD_KEYRING_STORE_MNEMONIC_SYNC, @@ -179,8 +178,6 @@ async function handle( return await handleKeyringKeyDelete(ctx, params[0], params[1]); case UI_RPC_METHOD_KEYRING_STORE_STATE: return await handleKeyringStoreState(ctx); - case UI_RPC_METHOD_KEYRING_STORE_KEEP_ALIVE: - return handleKeyringStoreKeepAlive(ctx); case UI_RPC_METHOD_KEYRING_DERIVE_WALLET: return await handleKeyringDeriveWallet(ctx, params[0]); case UI_RPC_METHOD_KEYRING_READ_NEXT_DERIVATION_PATH: diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts index dd1030619..ec56c46e9 100644 --- a/packages/common/src/constants.ts +++ b/packages/common/src/constants.ts @@ -140,8 +140,6 @@ export const UI_RPC_METHOD_KEYRING_STORE_CHECK_PASSWORD = "ui-rpc-method-keyring-store-check-password"; export const UI_RPC_METHOD_KEYRING_STORE_CREATE = "ui-rpc-method-keyring-store-create"; -export const UI_RPC_METHOD_KEYRING_STORE_KEEP_ALIVE = - "ui-rpc-method-keyring-store-keep-alive"; export const UI_RPC_METHOD_KEYRING_STORE_LOCK = "ui-rpc-method-keyring-store-lock"; export const UI_RPC_METHOD_KEYRING_STORE_MNEMONIC_CREATE = diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts index 973a28c4d..beac50a06 100644 --- a/packages/common/src/utils.ts +++ b/packages/common/src/utils.ts @@ -84,7 +84,7 @@ export function externalResourceUri( return uri.replace("ar://", "https://arweave.net/"); } if (options.cached) { - return `https://swr.xnfts.dev/web/${uri}`; + return `https://swr.xnfts.dev/1min/${uri}`; } return `${uri}`; } diff --git a/packages/recoil/src/atoms/keyring.tsx b/packages/recoil/src/atoms/keyring.tsx index 7c03aa93c..73895f377 100644 --- a/packages/recoil/src/atoms/keyring.tsx +++ b/packages/recoil/src/atoms/keyring.tsx @@ -21,16 +21,22 @@ export const KeyringStoreStateEnum: { [key: string]: KeyringStoreState } = { */ export const keyringStoreState = atom({ key: "keyringStoreState", - default: selector({ - key: "keyringStoreStateDefault", - get: ({ get }) => { - const background = get(backgroundClient); - return background.request({ - method: UI_RPC_METHOD_KEYRING_STORE_STATE, - params: [], - }); + default: null, + effects: [ + ({ setSelf, getPromise }) => { + const checkState = async () => { + const background = await getPromise(backgroundClient); + const newState = await background.request({ + method: UI_RPC_METHOD_KEYRING_STORE_STATE, + params: [], + }); + setSelf(newState); + await new Promise((resolve) => setTimeout(() => resolve(null), 5000)); + requestAnimationFrame(checkState); + }; + checkState().catch(null); }, - }), + ], }); /** diff --git a/packages/recoil/src/atoms/nft.tsx b/packages/recoil/src/atoms/nft.tsx index 9bb58c0d1..c1a723ec6 100644 --- a/packages/recoil/src/atoms/nft.tsx +++ b/packages/recoil/src/atoms/nft.tsx @@ -239,13 +239,13 @@ export const chatByNftId = selectorFamily< const whitelistedChatCollections = get(collectionChatWL); const whitelistedChatCollection = whitelistedChatCollections.find((x) => { - if ( - x.collectionId !== nft?.metadataCollectionId || - !x.attributeMapping - ) { + if (x.collectionId !== nft?.metadataCollectionId) { return false; } + if (!x.attributeMapping) { + return true; + } const doesNOThaveAttributes = Object.keys( x.attributeMapping || {} ).find((attrName) => { diff --git a/packages/recoil/src/hooks/client.tsx b/packages/recoil/src/hooks/client.tsx index 136b78ab4..37dd77fcd 100644 --- a/packages/recoil/src/hooks/client.tsx +++ b/packages/recoil/src/hooks/client.tsx @@ -3,7 +3,6 @@ import type { ChannelAppUiClient, ChannelAppUiResponder, } from "@coral-xyz/common"; -import { UI_RPC_METHOD_KEYRING_STORE_KEEP_ALIVE } from "@coral-xyz/common"; import { useRecoilValue } from "recoil"; import { backgroundClient, backgroundResponder } from "../atoms"; @@ -15,17 +14,3 @@ export function useBackgroundClient(): ChannelAppUiClient { export function useBackgroundResponder(): ChannelAppUiResponder { return useRecoilValue(backgroundResponder); } - -export function useBackgroundKeepAlive() { - const bg = useBackgroundClient(); - useEffect(() => { - const interval = setInterval(() => { - bg.request({ - method: UI_RPC_METHOD_KEYRING_STORE_KEEP_ALIVE, - params: [], - }); - }, 5 * 60 * 1000); - - return () => clearInterval(interval); - }, []); -}