Use React context for SolanaConnection

apps/ui/src/contexts/SolanaConnection.tsx

@@ -0,0 +1,31 @@
+import type { ReactElement, ReactNode } from "react";
+import { createContext, useMemo } from "react";
+import shallow from "zustand/shallow.js";
+
+import { Protocol } from "../config/ecosystem";
+import { selectConfig } from "../core/selectors";
+import { useEnvironment } from "../core/store";
+import { SolanaConnection } from "../models";
+
+export const SolanaConnectionContext: React.Context<null | SolanaConnection> =
+  createContext<null | SolanaConnection>(null);
+
+export const SolanaConnectionProvider = ({
+  children,
+}: {
+  readonly children?: ReactNode;
+}): ReactElement => {
+  const { chains } = useEnvironment(selectConfig, shallow);
+  const [{ endpoints }] = chains[Protocol.Solana];
+
+  const connection = useMemo(
+    () => new SolanaConnection(endpoints),
+    [endpoints],
+  );
+
+  return (
+    <SolanaConnectionContext.Provider value={connection}>
+      {children}
+    </SolanaConnectionContext.Provider>
+  );
+};

apps/ui/src/contexts/appContext.tsx

@@ -1,7 +1,10 @@
 import type React from "react";
 
+import { SolanaConnectionProvider } from "./SolanaConnection";
 import { QueryClientProvider } from "./queryClient";
 
 export const AppContext: React.FC = ({ children }) => (
-  <QueryClientProvider>{children}</QueryClientProvider>
+  <SolanaConnectionProvider>
+    <QueryClientProvider>{children}</QueryClientProvider>
+  </SolanaConnectionProvider>
 );

apps/ui/src/hooks/solana/useSolanaConnection.ts

@@ -1,28 +1,12 @@
-import { useQueryClient } from "react-query";
-import shallow from "zustand/shallow.js";
+import { useContext } from "react";
 
-import { Protocol } from "../../config";
-import { selectConfig } from "../../core/selectors";
-import { useEnvironment } from "../../core/store";
-import { SolanaConnection } from "../../models";
+import { SolanaConnectionContext } from "../../contexts/SolanaConnection";
+import type { SolanaConnection } from "../../models/solana";
 
 export const useSolanaConnection = (): SolanaConnection => {
-  const { env } = useEnvironment();
-  const { chains } = useEnvironment(selectConfig, shallow);
-  const [chain] = chains[Protocol.Solana];
-  const { endpoints } = chain;
-
-  const queryClient = useQueryClient();
-  const queryKey = [env, "solanaConnection"];
-
-  const connection =
-    // used as context cache to avoid multiple instances
-    queryClient.getQueryData<SolanaConnection>(queryKey) ||
-    (function createSolanaConnection(): SolanaConnection {
-      const solanaConnection = new SolanaConnection(endpoints);
-      queryClient.setQueryData(queryKey, solanaConnection);
-      return solanaConnection;
-    })();
-
-  return connection;
+  const solanaConnection = useContext(SolanaConnectionContext);
+  if (!solanaConnection) {
+    throw new Error("Missing Solana connection context");
+  }
+  return solanaConnection;
 };

apps/ui/src/models/solana/SolanaConnection.ts

@@ -71,7 +71,6 @@ export class SolanaConnection {
   private readonly parsedTxCache: Map<string, ParsedTransactionWithMeta>;
   private rpcIndex;
   private readonly endpoints: readonly string[];
-
   // TODO: Check if this is still necessary.
   // The websocket library solana/web3.js closes its websocket connection when the subscription list
   // is empty after opening its first time, preventing subsequent subscriptions from receiving responses.
@@ -354,11 +353,6 @@ export class SolanaConnection {
       confirmTransactionInitialTimeout: 60 * 1000,
       disableRetryOnRateLimit: true,
     });
-    this.dummySubscriptionId = this.rawConnection.onAccountChange(
-      Keypair.generate().publicKey,
-      () => {},
-    );
-
     this.getAccountInfo = this.rawConnection.getAccountInfo.bind(
       this.rawConnection,
     );
@@ -379,6 +373,10 @@ export class SolanaConnection {
     );
     this.removeAccountChangeListener =
       this.rawConnection.removeAccountChangeListener.bind(this.rawConnection);
+    this.dummySubscriptionId = this.rawConnection.onAccountChange(
+      Keypair.generate().publicKey,
+      () => {},
+    );
   }
 
   private async callWithRetry<T>(