Merge pull request #275 from sunrise-stake/feature/optimisations

Feature/optimisations

packages/app/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@brokerloop/ttlcache": "^3.2.3",
     "@civic/profile": "^0.1.5",
     "@headlessui/react": "^1.7.12",
     "@heroicons/react": "^2.0.13",

packages/app/src/App.tsx

@@ -23,6 +23,7 @@ import { ForestProvider } from "./common/context/forestContext";
 import { HelpProvider } from "./common/context/HelpContext";
 import { Routes } from "./Routes";
 import { NFTsProvider } from "./common/context/NFTsContext";
+import { cachedRPCFetch } from "./api/cachedRPCFetch";
 
 require("./solana-wallet-adapter.css");
 
@@ -48,7 +49,13 @@ const App: FC = () => {
 
   return (
     <>
-      <ConnectionProvider endpoint={endpoint}>
+      <ConnectionProvider
+        endpoint={endpoint}
+        config={{
+          fetch: cachedRPCFetch,
+          commitment: "confirmed",
+        }}
+      >
         <WalletProvider wallets={wallets} autoConnect>
           <WalletModalProvider>
             <SunriseProvider>

packages/app/src/Routes.tsx

@@ -15,7 +15,6 @@ import { Link, useLocation } from "react-router-dom";
 import { Layout } from "./common/partials/Layout";
 import { debounce } from "./common/utils";
 import { useHelp } from "./common/context/HelpContext";
-import { TipjarApp } from "./tipjar/TipjarApp";
 
 export enum AppRoute {
   Connect = "/connect", // not a route at present TODO fix
@@ -24,7 +23,6 @@ export enum AppRoute {
   Hub = "/",
   Lock = "/lock",
   Stake = "/stake",
-  TipJar = "/earthday",
 }
 
 export const Routes: FC = () => {
@@ -36,7 +34,6 @@ export const Routes: FC = () => {
     locking: useRef<null | HTMLDivElement>(null),
     lost: useRef<null | HTMLDivElement>(null),
     staking: useRef<null | HTMLDivElement>(null),
-    tipjar: useRef<null | HTMLDivElement>(null),
   };
   const [currentRouteApp, setCurrentRouteApp] =
     useState<null | MutableRefObject<null | HTMLDivElement>>(null);
@@ -109,16 +106,6 @@ export const Routes: FC = () => {
               setCurrentHelpRoute(AppRoute.Stake);
             },
           },
-          {
-            path: AppRoute.TipJar,
-            onMatch: () => {
-              appRefs.tipjar.current?.scrollIntoView({
-                behavior: "smooth",
-              });
-              setCurrentRouteApp(appRefs.tipjar);
-              setCurrentHelpRoute(AppRoute.TipJar);
-            },
-          },
           {
             path: "/*",
             onMatch: () => {
@@ -155,12 +142,6 @@ export const Routes: FC = () => {
           ref={appRefs.staking}
           active={currentRouteApp === appRefs.staking}
         />
-        <TipjarApp
-          id="tipjar-app"
-          className="App TipjarApp"
-          ref={appRefs.tipjar}
-          active={currentRouteApp === appRefs.tipjar}
-        />
         <div
           id="lost-app"
           className="App LostApp flex flex-col min-h-screen justify-center items-center"

packages/app/src/api/cachedRPCFetch.ts

@@ -0,0 +1,45 @@
+import { TTLCache } from "@brokerloop/ttlcache";
+
+const cache = new TTLCache<string, Response>({
+  ttl: 3000,
+  max: 10,
+  clock: Date,
+});
+
+const CACHEABLE_RPC_METHODS = [
+  "getBalance",
+  "getAccountInfo",
+  "getEpochInfo",
+  "getTokenAccountBalance",
+  "getTokenSupply",
+];
+
+const cacheableRequest = (options: RequestInit): boolean => {
+  const parsedBody = JSON.parse(options.body as string);
+  return CACHEABLE_RPC_METHODS.includes(parsedBody.method);
+};
+
+const requestToKey = (url: RequestInfo | URL, options: RequestInit): string => {
+  const parsedBody = JSON.parse(options.body as string);
+  delete parsedBody.id;
+  return `${JSON.stringify(url)}${JSON.stringify(parsedBody)}`;
+};
+
+export const cachedRPCFetch: typeof fetch = async (url, options) => {
+  if (options && cacheableRequest(options)) {
+    const cacheKey = requestToKey(url, options);
+    const cachedResponse = cache.get(cacheKey);
+    if (cachedResponse) {
+      console.log("cache hit");
+      return cachedResponse.clone();
+    } else {
+      console.log("cache miss - key: ", cacheKey);
+    }
+  }
+  const response = await fetch(url, options);
+  if (response.ok && options && cacheableRequest(options)) {
+    const cacheKey = requestToKey(url, options);
+    cache.set(cacheKey, response.clone());
+  }
+  return response;
+};

packages/app/src/api/db.ts

@@ -1,7 +1,11 @@
 import {
+  type GetNeighboursResponse,
   type Mint,
   type MintResponse,
   type MongoResponse,
+  type NeighbourEntry,
+  type RawGetNeighboursResponse,
+  type RawNeighbourEntry,
   type Transfer,
   type TransferResponse,
 } from "./types";
@@ -16,6 +20,7 @@ const STUBS = {
   sender: sendingStub,
   recipient: receiptStub,
 };
+const GET_NEIGHBOURS_URL = process.env.REACT_APP_GET_NEIGHBOURS_URL ?? "";
 const MONGODB_API_URL = process.env.REACT_APP_MONGODB_API_URL ?? "";
 const MONGODB_READ_TOKEN = process.env.REACT_APP_MONGODB_READ_TOKEN ?? "";
 const buildTransferRecord = (transfer: TransferResponse): Transfer => ({
@@ -30,6 +35,37 @@ const buildMintRecord = (mint: MintResponse): Mint => ({
   sender: mint.sender !== undefined ? new PublicKey(mint.sender) : undefined,
   amount: mint.amount,
 });
+
+const fromRawNeighbourEntry = (
+  rawEntry: RawNeighbourEntry
+): NeighbourEntry => ({
+  ...rawEntry,
+  address: new PublicKey(rawEntry.address),
+  start: new Date(rawEntry.start),
+  end: new Date(rawEntry.end),
+  sender: new PublicKey(rawEntry.sender),
+  recipient: new PublicKey(rawEntry.recipient),
+});
+
+export const getNeighbours = async (
+  address: PublicKey,
+  depth: number
+): Promise<GetNeighboursResponse> =>
+  fetch(`${GET_NEIGHBOURS_URL}/${address.toBase58()}?depth=${depth}`)
+    .then(async (resp) => resp.json() as Promise<RawGetNeighboursResponse>)
+    .then((rawResponse) => ({
+      firstTransfer: new Date(rawResponse.firstTransfer),
+      lastTransfer: new Date(rawResponse.lastTransfer),
+      neighbours: {
+        senderResult: rawResponse.neighbours.senderResult.map(
+          fromRawNeighbourEntry
+        ),
+        recipientResult: rawResponse.neighbours.recipientResult.map(
+          fromRawNeighbourEntry
+        ),
+      },
+    }));
+
 const getDBData = async <T>(
   collection: "mints" | "transfers",
   types: Array<"recipient" | "sender">,