feat(hub): update loading times of tokens for swaps and pools

berachain · Dec 16, 2024 · 429b76b · 429b76b
1 parent d7dbcb4
commit 429b76b
Show file tree

Hide file tree

Showing 15 changed files with 320 additions and 85 deletions.
diff --git a/.scripts/set-local-install.js b/.scripts/set-local-install.js
@@ -0,0 +1,16 @@
+const { execSync } = require("child_process");
+const path = require("path");
+
+try {
+  const scriptPath = path.resolve(__dirname, "vercel-local-install.sh");
+  console.log("Running local installation script...");
+
+  execSync(`bash ${scriptPath}`, {
+    stdio: "inherit",
+  });
+
+  console.log("Local installation completed successfully");
+} catch (error) {
+  console.error("Error during local installation:", error.message);
+  process.exit(1);
+}
diff --git a/.scripts/vercel-local-install.sh b/.scripts/vercel-local-install.sh
@@ -0,0 +1,5 @@
+# if secrets folder exists, copy the static folder to the apps
+if [ -d "secrets/static" ]; then
+    mkdir -p apps/hub/public/internal-env
+    cp -r secrets/static/* apps/hub/public/internal-env
+fi
diff --git a/apps/hub/next.config.mjs b/apps/hub/next.config.mjs
@@ -39,6 +39,9 @@ const config = {
       "res.cloudinary.com",
       "raw.githubusercontent.com",
       "s3.amazonaws.com",
+      "assets.coingecko.com",
+      "artio-static-asset-public.s3.ap-southeast-1.amazonaws.com", // clean this up with new links
+      // Add google cdn here as well
     ],
   },
 };

diff --git a/apps/hub/src/app/Providers.tsx b/apps/hub/src/app/Providers.tsx
@@ -1,14 +1,24 @@
 "use client";
 
 import React, { useEffect, type PropsWithChildren } from "react";
-import { BeraJsProvider, BlockTimeProvider } from "@bera/berajs";
+import {
+  BeraJsProvider,
+  BlockTimeProvider,
+  SWRFallback,
+  formatTokenList,
+} from "@bera/berajs";
+import { chainId, tokenListUrl } from "@bera/config";
 import { BeraWagmi } from "@bera/wagmi";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
+import { unstable_serialize } from "swr";
 
 import { ThemeProvider } from "~/components/theme-provider";
 
-export default function Providers({ children }: PropsWithChildren<any>) {
+export default function Providers({
+  children,
+  content,
+}: PropsWithChildren<any>) {
   useEffect(() => {
     if (!process.env.NEXT_PUBLIC_POSTHOG_KEY) {
       return;
@@ -24,14 +34,21 @@ export default function Providers({ children }: PropsWithChildren<any>) {
       <BeraWagmi>
         <BeraJsProvider configOverride={undefined}>
           <BlockTimeProvider>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="dark"
-              forcedTheme="dark"
-              themes={["dark"]}
+            <SWRFallback
+              fallback={{
+                [unstable_serialize(["useTokens", tokenListUrl])]:
+                  formatTokenList(content?.tokens ?? [], [], chainId),
+              }}
             >
-              {children}
-            </ThemeProvider>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="dark"
+                forcedTheme="dark"
+                themes={["dark"]}
+              >
+                {children}
+              </ThemeProvider>
+            </SWRFallback>
           </BlockTimeProvider>
         </BeraJsProvider>
       </BeraWagmi>

diff --git a/apps/hub/src/app/layout.tsx b/apps/hub/src/app/layout.tsx
@@ -1,9 +1,11 @@
 import "../styles/globals.css";
+import { readFileSync } from "fs";
+import path from "path";
 import { Metadata } from "next";
 import dynamic from "next/dynamic";
 import { IBM_Plex_Sans } from "next/font/google";
 import Script from "next/script";
-import { hubName, hubUrl } from "@bera/config";
+import { chainId, hubName, hubUrl, tokenListUrl } from "@bera/config";
 import {
   Footer,
   Header,
@@ -35,7 +37,12 @@ const PostHogPageView = dynamic(() => import("./PostHogPageView"), {
   ssr: false,
 });
 
-export default function RootLayout(props: { children: React.ReactNode }) {
+export default async function RootLayout(props: { children: React.ReactNode }) {
+  const fileContent = readFileSync(
+    path.join(process.cwd(), `public/${tokenListUrl}`),
+    "utf8",
+  );
+  const fetchedTokenList = JSON.parse(fileContent);
   return (
     <html lang="en" className="bg-background">
       <Script
@@ -52,7 +59,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
         })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`,
         }}
       />
-      <Providers>
+      <Providers content={fetchedTokenList}>
         <body
           className={cn(
             "min-h-screen font-sans antialiased",

diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
     "check": "biome check .",
     "prepare": "husky install",
     "upsertenv": "node ./scripts/upsertVercelEnv.js",
-    "knip": "knip --exclude binaries"
+    "knip": "knip --exclude binaries",
+    "local-install": "node ./.scripts/set-local-install.js"
   },
   "dependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^3.7.2",

diff --git a/packages/berajs/src/actions/dex/getTokens.ts b/packages/berajs/src/actions/dex/getTokens.ts
@@ -1,11 +1,10 @@
-import { chainId } from "@bera/config";
+import { chainId, tokenListUrl } from "@bera/config";
 
-import { BeraConfig } from "../../types";
 import { Token } from "../../types/dex";
+import { formatTokenList, tokenListToDict } from "../../utils/formatTokenList";
 
 export interface GetTokensRequest {
   externalList?: Token[];
-  config: BeraConfig;
 }
 
 export interface GetTokens {
@@ -15,22 +14,11 @@ export interface GetTokens {
   featuredTokenList?: Token[] | undefined;
 }
 
-/**
- * fetch and format the token list
- */
-function tokenListToDict(list: Token[]): { [key: string]: Token } {
-  return list.reduce((acc, item) => {
-    // @ts-ignore
-    acc[item.address] = item;
-    return acc;
-  }, {});
-}
-
 export const getTokens = async ({
   externalList,
-  config,
 }: GetTokensRequest): Promise<GetTokens> => {
-  if (!config.endpoints?.tokenList) {
+  console.log("getting tokens", externalList);
+  if (!tokenListUrl) {
     return {
       tokenList: [],
       customTokenList: [...(externalList ?? [])],
@@ -39,49 +27,9 @@ export const getTokens = async ({
     };
   }
   try {
-    const tokenList = await fetch(config.endpoints?.tokenList);
+    const tokenList = await fetch(tokenListUrl);
     const temp = await tokenList.json();
-    if (!temp.tokens)
-      return {
-        tokenList: externalList ?? [],
-        customTokenList: externalList ?? [],
-        featuredTokenList: [],
-        tokenDictionary: {},
-      };
-    const defaultList = temp.tokens
-      .filter(
-        (token: any) =>
-          !token.chainId || Number(token.chainId) === Number(chainId),
-      )
-      .map((token: any) => {
-        return { ...token, default: true };
-      });
-
-    const isFeatured = (tag: string) => tag === "featured";
-
-    const defaultFeaturedList = defaultList
-      .filter((token: any) => {
-        return token.tags.some(isFeatured);
-      })
-      .map((token: any) => {
-        return { ...token, default: true };
-      });
-
-    const list = [...defaultList, ...(externalList ?? [])];
-
-    const uniqueList = list.filter(
-      (item, index) =>
-        list.findIndex((i) => i.address === item.address) === index,
-    );
-
-    console.log({ uniqueList, temp, defaultList, defaultFeaturedList });
-
-    return {
-      tokenList: uniqueList,
-      customTokenList: [...(externalList ?? [])],
-      tokenDictionary: tokenListToDict(list),
-      featuredTokenList: defaultFeaturedList ?? [],
-    };
+    return formatTokenList(temp.tokens, externalList ?? [], chainId);
   } catch (error) {
     console.error("Error fetching token list", error);
     return {

diff --git a/packages/berajs/src/hooks/useTokens.ts b/packages/berajs/src/hooks/useTokens.ts
@@ -1,5 +1,6 @@
 import useSWRImmutable from "swr/immutable";
 import { useLocalStorage } from "usehooks-ts";
+import { tokenListUrl } from "@bera/config";
 
 import {
   DefaultHookOptions,
@@ -24,12 +25,13 @@ export const useTokens = (options?: DefaultHookOptions): IUseTokens => {
     Token[]
   >(TOKEN_KEY, []);
   const swrResponse = useSWRImmutable<GetTokens>(
-    ["defaultTokenList", localStorageTokenList, config],
+    ["useTokens", tokenListUrl],
     async () => {
-      return getTokens({ externalList: localStorageTokenList, config });
+      return getTokens({ externalList: localStorageTokenList });
     },
     {
       ...options?.opts,
+      revalidateOnMount: true,
     },
   );
 
@@ -54,6 +56,7 @@ export const useTokens = (options?: DefaultHookOptions): IUseTokens => {
       ? [...localStorageTokenList]
       : [...localStorageTokenList, acceptedToken as Token];
     setLocalStorageTokenList(updatedData);
+    swrResponse?.mutate();
     // Update config data and store it in localStorage
   };
 
@@ -64,6 +67,7 @@ export const useTokens = (options?: DefaultHookOptions): IUseTokens => {
 
     const updatedData = [...filteredList];
     setLocalStorageTokenList(updatedData);
+    swrResponse?.mutate();
   };
 
   return {

diff --git a/packages/berajs/src/types/dex.ts b/packages/berajs/src/types/dex.ts
@@ -15,6 +15,7 @@ export type Token = {
   usdValue?: string;
   beraValue?: string;
   weight?: number;
+  base64?: string;
 };
 
 export interface TokenWithAmount extends Token {

diff --git a/packages/berajs/src/utils/formatTokenList.ts b/packages/berajs/src/utils/formatTokenList.ts
@@ -0,0 +1,60 @@
+import { Token } from "../types";
+
+/**
+ * fetch and format the token list
+ */
+function tokenListToDict(list: Token[]): { [key: string]: Token } {
+  return list.reduce((acc, item) => {
+    // @ts-ignore
+    acc[item.address] = item;
+    return acc;
+  }, {});
+}
+
+const formatTokenList = (
+  tokenList: Token[],
+  externalList: Token[],
+  chainId: number,
+) => {
+  if (!tokenList)
+    return {
+      tokenList: externalList ?? [],
+      customTokenList: externalList ?? [],
+      featuredTokenList: [],
+      tokenDictionary: {},
+    };
+  const defaultList = tokenList
+    .filter(
+      (token: any) =>
+        !token.chainId || Number(token.chainId) === Number(chainId),
+    )
+    .map((token: any) => {
+      return { ...token, default: true };
+    });
+
+  const isFeatured = (tag: string) => tag === "featured";
+
+  const defaultFeaturedList = defaultList
+    .filter((token: any) => {
+      return token.tags.some(isFeatured);
+    })
+    .map((token: any) => {
+      return { ...token, default: true };
+    });
+
+  const list = [...defaultList, ...(externalList ?? [])];
+
+  const uniqueList = list.filter(
+    (item, index) =>
+      list.findIndex((i) => i.address === item.address) === index,
+  );
+
+  return {
+    tokenList: uniqueList,
+    customTokenList: [...(externalList ?? [])],
+    tokenDictionary: tokenListToDict(list),
+    featuredTokenList: defaultFeaturedList ?? [],
+  };
+};
+
+export { formatTokenList, tokenListToDict };
diff --git a/packages/berajs/src/utils/index.ts b/packages/berajs/src/utils/index.ts
@@ -13,3 +13,5 @@ export * from "./formatNumber";
 export * from "./formatTimestamps";
 export * from "./tokenWrapping";
 export * from "./errorMessages";
+export * from "./const";
+export * from "./formatTokenList";