From db7205769a6ca358014faf3c39829e12f7d78756 Mon Sep 17 00:00:00 2001
From: brown <brown@berachain.com>
Date: Mon, 16 Dec 2024 17:26:56 -0500
Subject: [PATCH 1/2] feat(hub): update loading times of tokens for swaps and
 pools

---
 .scripts/set-local-install.js                |  16 +++
 .scripts/vercel-local-install.sh             |   5 +
 apps/hub/next.config.mjs                     |   3 +
 apps/hub/src/app/Providers.tsx               |  35 +++--
 apps/hub/src/app/layout.tsx                  |  13 +-
 package.json                                 |   3 +-
 packages/berajs/src/actions/dex/getTokens.ts |  64 +--------
 packages/berajs/src/hooks/useTokens.ts       |   8 +-
 packages/berajs/src/types/dex.ts             |   1 +
 packages/berajs/src/utils/formatTokenList.ts |  60 ++++++++
 packages/berajs/src/utils/index.ts           |   1 +
 packages/shared-ui/src/token-icon.tsx        |  43 ++++--
 packages/ui/package.json                     |   7 +
 packages/ui/src/custom-avatar.tsx            | 144 +++++++++++++++++++
 packages/ui/tsup.config.ts                   |   1 +
 15 files changed, 319 insertions(+), 85 deletions(-)
 create mode 100644 .scripts/set-local-install.js
 create mode 100644 .scripts/vercel-local-install.sh
 create mode 100644 packages/berajs/src/utils/formatTokenList.ts
 create mode 100644 packages/ui/src/custom-avatar.tsx

diff --git a/.scripts/set-local-install.js b/.scripts/set-local-install.js
new file mode 100644
index 000000000..2ad93e82d
--- /dev/null
+++ 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
new file mode 100644
index 000000000..736093fd6
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/apps/hub/next.config.mjs b/apps/hub/next.config.mjs
index 767aa5474..87bf03362 100755
--- 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
index b8a4caa23..e7f7160da 100755
--- 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
index 262f83adf..c8eb9e5e7 100755
--- 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
@@ -55,7 +62,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
       <body
         className={cn("min-h-screen font-sans antialiased", fontSans.variable)}
       >
-        <Providers>
+        <Providers content={fetchedTokenList}>
           <TermOfUseModal />
 
           <PostHogPageView />
diff --git a/package.json b/package.json
index d4a77b708..7e18f23de 100755
--- a/package.json
+++ b/package.json
@@ -36,7 +36,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
index 20f0260ea..ef717c800 100755
--- 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
index 70df2c668..da91dccb7 100755
--- 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
index 1fe3eae1c..11daca5db 100755
--- 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
new file mode 100644
index 000000000..0f284b0ed
--- /dev/null
+++ 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
index 8fab6bdbb..b268b980b 100755
--- a/packages/berajs/src/utils/index.ts
+++ b/packages/berajs/src/utils/index.ts
@@ -15,3 +15,4 @@ export * from "./tokenWrapping";
 export * from "./errorMessages";
 export * from "./isSubgraphStale";
 export * from "./const";
+export * from "./formatTokenList";
diff --git a/packages/shared-ui/src/token-icon.tsx b/packages/shared-ui/src/token-icon.tsx
index 50563c926..eed5491bd 100755
--- a/packages/shared-ui/src/token-icon.tsx
+++ b/packages/shared-ui/src/token-icon.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import Image from "next/image";
 import { useTokens } from "@bera/berajs";
 import { cn } from "@bera/ui";
-import { Avatar, AvatarFallback, AvatarImage } from "@bera/ui/avatar";
+import { CustomAvatar } from "@bera/ui/custom-avatar";
 import { cva, type VariantProps } from "class-variance-authority";
 import { getAddress, isAddress } from "viem";
 
@@ -44,24 +45,42 @@ export const TokenIcon = ({
   ...props
 }: IconProps) => {
   const { data: tokenData } = useTokens();
+  const [imageError, setImageError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const address = isAddress(adr ?? "") ? getAddress(adr ?? "") : adr;
   const img = useMemo(() => {
     if (tokenData?.tokenDictionary && address && isAddress(address)) {
+      const uploadedToken = tokenData?.tokenDictionary?.[address];
+      if (uploadedToken?.base64) {
+        setIsLoading(false);
+        return `data:image/svg+xml;base64,${uploadedToken.base64}`;
+      }
       return tokenData?.tokenDictionary[address]?.logoURI;
     }
     return "";
   }, [tokenData?.tokenDictionary, tokenData?.tokenDictionary?.[address ?? ""]]);
 
+  const finalImageUrl = imgOverride ?? img ?? "";
+
   return (
-    <Avatar className={cn(IconVariants({ size }), className)} {...props}>
-      <AvatarImage
-        src={imgOverride ?? img}
-        className="rounded-full"
-        alt={address}
-      />
-      <AvatarFallback className="h-full w-full border border-foreground bg-background text-inherit">
-        {symbol ? symbol.slice(0, 3) : "TKN"}
-      </AvatarFallback>
-    </Avatar>
+    <CustomAvatar
+      fallbackText={symbol ? symbol.slice(0, 3) : "TKN"}
+      className={cn(IconVariants({ size }), className)}
+      isNodeLoading={isLoading}
+      imageNode={
+        finalImageUrl && !imageError ? (
+          <Image
+            src={finalImageUrl}
+            alt="Custom Avatar"
+            fill
+            style={{ opacity: isLoading ? 0 : 1 }}
+            className={cn("aspect-square h-full w-full")}
+            onLoad={() => setIsLoading(false)}
+            onError={() => setImageError(true)}
+          />
+        ) : null
+      }
+      {...props}
+    />
   );
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7078451f1..b78bfe578 100755
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -226,6 +226,10 @@
       "import": "./dist/pagination.mjs",
       "types": "./dist/pagination.d.ts"
     },
+    "./custom-avatar": {
+      "import": "./dist/custom-avatar.mjs",
+      "types": "./dist/custom-avatar.d.ts"
+    },
     "./badge": {
       "import": "./dist/badge.mjs",
       "types": "./dist/badge.d.ts"
@@ -396,6 +400,9 @@
       ],
       "radio-group": [
         "dist/radio-group.d.ts"
+      ],
+      "custom-avatar": [
+        "dist/custom-avatar.d.ts"
       ]
     }
   },
diff --git a/packages/ui/src/custom-avatar.tsx b/packages/ui/src/custom-avatar.tsx
new file mode 100644
index 000000000..585470397
--- /dev/null
+++ b/packages/ui/src/custom-avatar.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "./utils/cn";
+
+interface CustomAvatarProps
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+  /**
+   * The image source URL to load via a standard <img> element by default.
+   * If this is provided and `imageNode` is not, a standard <img> is used.
+   */
+  src?: string;
+  /**
+   * The alt text for the image if using `src`.
+   */
+  alt?: string;
+  /**
+   * Fallback content to display if the image fails to load or is not provided.
+   * This can be initials, an icon, or any React element.
+   */
+  fallbackText?: React.ReactNode | string;
+  /**
+   * Width of the avatar in pixels.
+   */
+  width?: number;
+  /**
+   * Height of the avatar in pixels.
+   */
+  height?: number;
+  /**
+   * A React node that can be used to render a custom image.
+   * For example, a Next.js <Image> component. If provided, `src` is ignored.
+   */
+  imageNode?: React.ReactNode;
+  /**
+   * Custom className for the fallback element.
+   */
+  fallbackClassName?: string;
+  /**
+   * Whether the avatar is loading.
+   */
+  isNodeLoading?: boolean;
+}
+
+/**
+ * Avatar component that displays an image (img by default), a custom image node, or a fallback.
+ */
+const CustomAvatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  CustomAvatarProps
+>(
+  (
+    {
+      className,
+      src,
+      alt = "Avatar",
+      fallbackText,
+      width = 40,
+      height = 40,
+      imageNode,
+      fallbackClassName,
+      isNodeLoading,
+      ...props
+    },
+    ref,
+  ) => {
+    const [hasError, setHasError] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(true);
+
+    const AvatarFallback = React.useMemo(
+      () => (
+        <AvatarPrimitive.Fallback
+          className={cn(
+            "flex h-full w-full items-center justify-center rounded-full bg-muted",
+            fallbackClassName,
+          )}
+        >
+          {fallbackText ?? "?"}
+        </AvatarPrimitive.Fallback>
+      ),
+      [fallbackText, fallbackClassName],
+    );
+
+    const ImageContent = React.useMemo(() => {
+      if (imageNode) {
+        return (
+          <div className="relative h-full w-full">
+            {imageNode}
+            {isNodeLoading && AvatarFallback}
+          </div>
+        );
+      }
+
+      if (src && !hasError) {
+        return (
+          <>
+            <img
+              src={src}
+              alt={alt}
+              className="h-full w-full rounded-full object-cover"
+              style={{ display: isLoading ? "none" : "block" }}
+              onLoad={() => setIsLoading(false)}
+              onError={() => setHasError(true)}
+              width={width}
+              height={height}
+            />
+            {isLoading && AvatarFallback}
+          </>
+        );
+      }
+
+      return AvatarFallback;
+    }, [
+      imageNode,
+      src,
+      hasError,
+      isLoading,
+      isNodeLoading,
+      alt,
+      width,
+      height,
+      AvatarFallback,
+    ]);
+
+    return (
+      <AvatarPrimitive.Root
+        ref={ref}
+        className={cn(
+          "relative flex shrink-0 overflow-hidden rounded-full",
+          `h-[${height}px] w-[${width}px]`,
+          className,
+        )}
+        {...props}
+      >
+        {ImageContent}
+      </AvatarPrimitive.Root>
+    );
+  },
+);
+CustomAvatar.displayName = "CustomAvatar";
+
+export { CustomAvatar };
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
index 408e2a730..3335ef8eb 100755
--- a/packages/ui/tsup.config.ts
+++ b/packages/ui/tsup.config.ts
@@ -41,6 +41,7 @@ const client = [
   "./src/pagination.tsx",
   "./src/table/index.ts",
   "./src/table/legacy/index.ts",
+  "./src/custom-avatar.tsx",
 ];
 
 const server = [

From 0d08d1fcc63bb392de657f06a3b6bff5ea8b7372 Mon Sep 17 00:00:00 2001
From: brown <brown@berachain.com>
Date: Thu, 19 Dec 2024 14:51:31 -0500
Subject: [PATCH 2/2] fix(hub): separate local and remote fetching logic and
 fix bugs

---
 .scripts/set-local-install.js                | 16 --------
 .scripts/vercel-local-install.sh             |  5 ---
 apps/hub/src/app/Providers.tsx               | 11 ++----
 apps/hub/src/app/layout.tsx                  | 16 +++++---
 package.json                                 |  3 +-
 packages/berajs/src/actions/dex/getTokens.ts | 38 +++----------------
 packages/berajs/src/hooks/useTokens.ts       | 39 +++++++++++++-------
 packages/berajs/src/utils/formatTokenList.ts |  2 +-
 packages/shared-ui/src/token-icon.tsx        | 32 +++++++++++-----
 packages/ui/src/custom-avatar.tsx            |  5 +--
 10 files changed, 68 insertions(+), 99 deletions(-)
 delete mode 100644 .scripts/set-local-install.js
 delete mode 100644 .scripts/vercel-local-install.sh

diff --git a/.scripts/set-local-install.js b/.scripts/set-local-install.js
deleted file mode 100644
index 2ad93e82d..000000000
--- a/.scripts/set-local-install.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 736093fd6..000000000
--- a/.scripts/vercel-local-install.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-# 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
\ No newline at end of file
diff --git a/apps/hub/src/app/Providers.tsx b/apps/hub/src/app/Providers.tsx
index e7f7160da..52b5422d9 100755
--- a/apps/hub/src/app/Providers.tsx
+++ b/apps/hub/src/app/Providers.tsx
@@ -1,13 +1,8 @@
 "use client";
 
 import React, { useEffect, type PropsWithChildren } from "react";
-import {
-  BeraJsProvider,
-  BlockTimeProvider,
-  SWRFallback,
-  formatTokenList,
-} from "@bera/berajs";
-import { chainId, tokenListUrl } from "@bera/config";
+import { BeraJsProvider, BlockTimeProvider, SWRFallback } from "@bera/berajs";
+import { tokenListUrl } from "@bera/config";
 import { BeraWagmi } from "@bera/wagmi";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
@@ -37,7 +32,7 @@ export default function Providers({
             <SWRFallback
               fallback={{
                 [unstable_serialize(["useTokens", tokenListUrl])]:
-                  formatTokenList(content?.tokens ?? [], [], chainId),
+                  content?.tokens,
               }}
             >
               <ThemeProvider
diff --git a/apps/hub/src/app/layout.tsx b/apps/hub/src/app/layout.tsx
index c8eb9e5e7..221ec11dc 100755
--- a/apps/hub/src/app/layout.tsx
+++ b/apps/hub/src/app/layout.tsx
@@ -5,7 +5,7 @@ import { Metadata } from "next";
 import dynamic from "next/dynamic";
 import { IBM_Plex_Sans } from "next/font/google";
 import Script from "next/script";
-import { chainId, hubName, hubUrl, tokenListUrl } from "@bera/config";
+import { hubName, hubUrl, tokenListUrl } from "@bera/config";
 import {
   Footer,
   Header,
@@ -38,11 +38,15 @@ const PostHogPageView = dynamic(() => import("./PostHogPageView"), {
 });
 
 export default async function RootLayout(props: { children: React.ReactNode }) {
-  const fileContent = readFileSync(
-    path.join(process.cwd(), `public/${tokenListUrl}`),
-    "utf8",
-  );
-  const fetchedTokenList = JSON.parse(fileContent);
+  const fetchedTokenList = await (tokenListUrl.startsWith("http")
+    ? fetch(tokenListUrl).then((res) => res.json())
+    : JSON.parse(
+        readFileSync(
+          path.join(process.cwd(), `public/${tokenListUrl}`),
+          "utf8",
+        ),
+      ));
+
   return (
     <html lang="en" className="bg-background">
       <Script
diff --git a/package.json b/package.json
index 7e18f23de..d4a77b708 100755
--- a/package.json
+++ b/package.json
@@ -36,8 +36,7 @@
     "check": "biome check .",
     "prepare": "husky install",
     "upsertenv": "node ./scripts/upsertVercelEnv.js",
-    "knip": "knip --exclude binaries",
-    "local-install": "node ./.scripts/set-local-install.js"
+    "knip": "knip --exclude binaries"
   },
   "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
index ef717c800..78ae70cfa 100755
--- a/packages/berajs/src/actions/dex/getTokens.ts
+++ b/packages/berajs/src/actions/dex/getTokens.ts
@@ -1,42 +1,14 @@
-import { chainId, tokenListUrl } from "@bera/config";
+import { tokenListUrl } from "@bera/config";
 
 import { Token } from "../../types/dex";
-import { formatTokenList, tokenListToDict } from "../../utils/formatTokenList";
 
-export interface GetTokensRequest {
-  externalList?: Token[];
-}
-
-export interface GetTokens {
-  tokenList?: Token[] | undefined;
-  customTokenList?: Token[] | undefined;
-  tokenDictionary?: { [key: string]: Token } | undefined;
-  featuredTokenList?: Token[] | undefined;
-}
-
-export const getTokens = async ({
-  externalList,
-}: GetTokensRequest): Promise<GetTokens> => {
-  console.log("getting tokens", externalList);
-  if (!tokenListUrl) {
-    return {
-      tokenList: [],
-      customTokenList: [...(externalList ?? [])],
-      tokenDictionary: tokenListToDict(externalList ?? []),
-      featuredTokenList: [],
-    };
-  }
+export const getTokens = async (): Promise<Token[]> => {
   try {
     const tokenList = await fetch(tokenListUrl);
-    const temp = await tokenList.json();
-    return formatTokenList(temp.tokens, externalList ?? [], chainId);
+    const tokenData = await tokenList.json();
+    return tokenData.tokens ?? [];
   } catch (error) {
     console.error("Error fetching token list", error);
-    return {
-      tokenList: [...(externalList ?? [])],
-      customTokenList: [...(externalList ?? [])],
-      featuredTokenList: [],
-      tokenDictionary: tokenListToDict(externalList ?? []),
-    };
+    return [];
   }
 };
diff --git a/packages/berajs/src/hooks/useTokens.ts b/packages/berajs/src/hooks/useTokens.ts
index da91dccb7..0b86e0a11 100755
--- a/packages/berajs/src/hooks/useTokens.ts
+++ b/packages/berajs/src/hooks/useTokens.ts
@@ -1,14 +1,22 @@
+import { useMemo } from "react";
+import { chainId, tokenListUrl } from "@bera/config";
 import useSWRImmutable from "swr/immutable";
 import { useLocalStorage } from "usehooks-ts";
-import { tokenListUrl } from "@bera/config";
 
 import {
   DefaultHookOptions,
   DefaultHookReturnType,
-  useBeraJs,
+  formatTokenList,
   type Token,
 } from "..";
-import { GetTokens, getTokens } from "../actions/dex";
+import { getTokens } from "../actions/dex";
+
+export interface GetTokens {
+  tokenList?: Token[] | undefined;
+  customTokenList?: Token[] | undefined;
+  tokenDictionary?: { [key: string]: Token } | undefined;
+  featuredTokenList?: Token[] | undefined;
+}
 
 export interface IUseTokens extends DefaultHookReturnType<GetTokens> {
   addNewToken: (token: Token | undefined) => void;
@@ -18,23 +26,25 @@ export interface IUseTokens extends DefaultHookReturnType<GetTokens> {
 export const useTokens = (options?: DefaultHookOptions): IUseTokens => {
   const TOKEN_KEY = "tokens";
 
-  const { config: beraConfig } = useBeraJs();
-  const config = options?.beraConfigOverride ?? beraConfig;
-
   const [localStorageTokenList, setLocalStorageTokenList] = useLocalStorage<
     Token[]
   >(TOKEN_KEY, []);
-  const swrResponse = useSWRImmutable<GetTokens>(
+
+  const { data: fetchedTokens, ...swrRest } = useSWRImmutable<Token[]>(
     ["useTokens", tokenListUrl],
     async () => {
-      return getTokens({ externalList: localStorageTokenList });
+      return await getTokens();
     },
     {
       ...options?.opts,
-      revalidateOnMount: true,
     },
   );
 
+  const formattedTokenList = useMemo(
+    () => formatTokenList(fetchedTokens ?? [], localStorageTokenList, chainId),
+    [fetchedTokens, localStorageTokenList, chainId],
+  );
+
   const addNewToken = (token: Token | undefined) => {
     // Indicate that this token is now accepted into the default list of tokens
     const acceptedToken = {
@@ -44,7 +54,7 @@ export const useTokens = (options?: DefaultHookOptions): IUseTokens => {
 
     // Check if the token already exists in tokenList
     if (
-      swrResponse.data?.tokenList?.some(
+      formattedTokenList?.tokenList?.some(
         (t: { address: string }) =>
           t.address.toLowerCase() === acceptedToken?.address?.toLowerCase(),
       )
@@ -56,7 +66,7 @@ export const useTokens = (options?: DefaultHookOptions): IUseTokens => {
       ? [...localStorageTokenList]
       : [...localStorageTokenList, acceptedToken as Token];
     setLocalStorageTokenList(updatedData);
-    swrResponse?.mutate();
+    swrRest?.mutate();
     // Update config data and store it in localStorage
   };
 
@@ -67,12 +77,13 @@ export const useTokens = (options?: DefaultHookOptions): IUseTokens => {
 
     const updatedData = [...filteredList];
     setLocalStorageTokenList(updatedData);
-    swrResponse?.mutate();
+    swrRest?.mutate();
   };
 
   return {
-    ...swrResponse,
-    refresh: () => swrResponse?.mutate?.(),
+    ...swrRest,
+    data: formattedTokenList,
+    refresh: () => swrRest?.mutate?.(),
     addNewToken,
     removeToken,
   };
diff --git a/packages/berajs/src/utils/formatTokenList.ts b/packages/berajs/src/utils/formatTokenList.ts
index 0f284b0ed..49a5a47bd 100644
--- a/packages/berajs/src/utils/formatTokenList.ts
+++ b/packages/berajs/src/utils/formatTokenList.ts
@@ -16,7 +16,7 @@ const formatTokenList = (
   externalList: Token[],
   chainId: number,
 ) => {
-  if (!tokenList)
+  if (!tokenList || tokenList.length === 0)
     return {
       tokenList: externalList ?? [],
       customTokenList: externalList ?? [],
diff --git a/packages/shared-ui/src/token-icon.tsx b/packages/shared-ui/src/token-icon.tsx
index eed5491bd..ad9e905e8 100755
--- a/packages/shared-ui/src/token-icon.tsx
+++ b/packages/shared-ui/src/token-icon.tsx
@@ -46,19 +46,31 @@ export const TokenIcon = ({
 }: IconProps) => {
   const { data: tokenData } = useTokens();
   const [imageError, setImageError] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
   const address = isAddress(adr ?? "") ? getAddress(adr ?? "") : adr;
-  const img = useMemo(() => {
-    if (tokenData?.tokenDictionary && address && isAddress(address)) {
-      const uploadedToken = tokenData?.tokenDictionary?.[address];
-      if (uploadedToken?.base64) {
-        setIsLoading(false);
-        return `data:image/svg+xml;base64,${uploadedToken.base64}`;
+
+  let img = "";
+  // check if the token exists in the token dictionary
+  const tokenExists =
+    tokenData?.tokenDictionary &&
+    address &&
+    isAddress(address) &&
+    tokenData?.tokenDictionary?.[address];
+  if (tokenExists) {
+    const uploadedToken = tokenData?.tokenDictionary?.[address];
+    if (uploadedToken?.base64) {
+      if (uploadedToken.base64.startsWith("data:")) {
+        img = uploadedToken.base64;
+      } else {
+        // if the token does not contain image type, we assume it's svg
+        img = `data:image/svg+xml;base64,${uploadedToken.base64}`;
       }
-      return tokenData?.tokenDictionary[address]?.logoURI;
+    } else {
+      img = tokenData?.tokenDictionary?.[address]?.logoURI ?? "";
     }
-    return "";
-  }, [tokenData?.tokenDictionary, tokenData?.tokenDictionary?.[address ?? ""]]);
+  }
+
+  // we assume the token has loaded if it exists in the token dictionary with server side rendering
+  const [isLoading, setIsLoading] = useState(!tokenExists);
 
   const finalImageUrl = imgOverride ?? img ?? "";
 
diff --git a/packages/ui/src/custom-avatar.tsx b/packages/ui/src/custom-avatar.tsx
index 585470397..023f2df40 100644
--- a/packages/ui/src/custom-avatar.tsx
+++ b/packages/ui/src/custom-avatar.tsx
@@ -103,8 +103,6 @@ const CustomAvatar = React.forwardRef<
               style={{ display: isLoading ? "none" : "block" }}
               onLoad={() => setIsLoading(false)}
               onError={() => setHasError(true)}
-              width={width}
-              height={height}
             />
             {isLoading && AvatarFallback}
           </>
@@ -128,8 +126,7 @@ const CustomAvatar = React.forwardRef<
       <AvatarPrimitive.Root
         ref={ref}
         className={cn(
-          "relative flex shrink-0 overflow-hidden rounded-full",
-          `h-[${height}px] w-[${width}px]`,
+          "relative h-10 w-10 flex shrink-0 overflow-hidden rounded-full",
           className,
         )}
         {...props}