mrgnlabs · chambaz · Nov 30, 2023 · Nov 30, 2023 · Nov 30, 2023 · Nov 30, 2023
@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import Head from "next/head";
 import { useUiStore } from "~/store";
 import { WalletButton } from "./Wallet";
 import { Mobile } from "~/mediaQueries";
@@ -12,23 +13,28 @@ const PageHeader: FC<PageHeaderProps> = ({ children }) => {
   const [isFetchingData] = useUiStore((state) => [state.isFetchingData]);
 
   return (
-    <div className="flex w-full h-[90px] sm:h-[60px] justify-center items-center border-y bg-[url('/WaveBG3.png')]">
-      <div className="w-full xl:w-4/5 px-4 xl:max-w-7xl flex flex-row justify-between items-center border-solid font-aeonik font-normal text-2xl sm:text-3xl">
-        <div className="flex gap-4 justify-center items-center">
+    <>
+      <Head>
+        <link rel="preload" as="image" href="/WaveBG3.png" type="image/png" />
+      </Head>
+      <div className="flex w-full h-[90px] sm:h-[60px] justify-center items-center border-y bg-[url('/WaveBG3.png')]">
+        <div className="w-full xl:w-4/5 px-4 xl:max-w-7xl flex flex-row justify-between items-center border-solid font-aeonik font-normal text-2xl sm:text-3xl">
+          <div className="flex gap-4 justify-center items-center">
+            <Mobile>
+              <div className="ml-[4px]">
+                <IconMrgn size={18} className={`${isFetchingData ? "animate-pulse" : ""}`} />
+              </div>
+            </Mobile>
+            <div>{children}</div>
+          </div>
           <Mobile>
-            <div className="ml-[4px]">
-              <IconMrgn size={18} className={`${isFetchingData ? "animate-pulse" : ""}`} />
+            <div className="flex justify-center items-center gap-3">
+              <WalletButton />
             </div>
           </Mobile>
-          <div>{children}</div>
         </div>
-        <Mobile>
-          <div className="flex justify-center items-center gap-3">
-            <WalletButton />
-          </div>
-        </Mobile>
       </div>
-    </div>
+    </>
   );
 };
 

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { useRouter } from "next/router";
-import { toast } from "react-toastify";
 import { useCookies } from "react-cookie";
 import { minidenticon } from "minidenticons";
 import { useAnchorWallet, useWallet, WalletContextState } from "@solana/wallet-adapter-react";
@@ -11,10 +10,11 @@ import { Web3AuthNoModal } from "@web3auth/no-modal";
 import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
 import { SolanaWallet, SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
 import base58 from "bs58";
-import { Wallet } from "@mrgnlabs/mrgn-common";
 
 import { showErrorToast } from "~/utils/toastUtils";
 
+import type { Wallet } from "@mrgnlabs/mrgn-common";
+
 // wallet adapter context type to override with web3auth data
 // this allows us to pass web3auth wallet to 3rd party services that expect wallet adapter
 type WalletContextOverride = {

@@ -1,21 +1,19 @@
 import { Html, Head, Main, NextScript } from "next/document";
+import Script from "next/script";
 
 export default function Document() {
   return (
     <Html lang="en">
       <Head>
-        {
-          // eslint-disable-next-line @next/next/no-sync-scripts
-          <script
-            data-project-id="97CJsmFvWji6khP1F3Qa409ZryBNxEsiwpa8pKLM"
-            src="https://snippet.meticulous.ai/v1/meticulous.js"
-          />
-        }
+        <Script
+          data-project-id="97CJsmFvWji6khP1F3Qa409ZryBNxEsiwpa8pKLM"
+          src="https://snippet.meticulous.ai/v1/meticulous.js"
+        />
       </Head>
       <body className="no-scrollbar">
         <Main />
         <NextScript />
-        <script defer src="https://terminal.jup.ag/main-v1.js" data-preload />
+        <Script src="https://terminal.jup.ag/main-v1.js" strategy="beforeInteractive" />
       </body>
     </Html>
   );

@@ -1,24 +1,30 @@
 "use client";
 
 import React from "react";
+
+import Script from "next/script";
+
 import config from "~/config";
-import { PageHeader } from "~/components/common/PageHeader";
 import { useWalletContext } from "~/hooks/useWalletContext";
 
+import { PageHeader } from "~/components/common/PageHeader";
+
 const SwapPage = () => {
   const { walletContextState } = useWalletContext();
 
-  React.useEffect(() => {
-    window.Jupiter.init({
-      displayMode: "integrated",
-      integratedTargetId: "integrated-terminal",
-      endpoint: config.rpcEndpoint,
-      passThroughWallet: walletContextState.wallet,
-    });
-  }, [walletContextState.wallet]);
-
   return (
     <>
+      <Script
+        src="https://terminal.jup.ag/main-v1.js"
+        onReady={() => {
+          window.Jupiter.init({
+            displayMode: "integrated",
+            integratedTargetId: "integrated-terminal",
+            endpoint: config.rpcEndpoint,
+            passThroughWallet: walletContextState.wallet,
+          });
+        }}
+      />
       <PageHeader>
         <div className="h-full flex flex-row gap-1 items-center">
           <span>swap</span>

@@ -4,11 +4,12 @@ import { Connection, PublicKey } from "@solana/web3.js";
 import { create, StateCreator } from "zustand";
 import * as solanaStakePool from "@solana/spl-stake-pool";
 import { EPOCHS_PER_YEAR, StakeData, fetchStakeAccounts } from "~/utils";
-import { TokenInfo, TokenInfoMap, TokenListContainer } from "@solana/spl-token-registry";
 import { TokenAccount, TokenAccountMap, fetchBirdeyePrices } from "@mrgnlabs/marginfi-v2-ui-state";
 import { persist } from "zustand/middleware";
 import BN from "bn.js";
 
+import type { TokenInfo, TokenInfoMap } from "@solana/spl-token-registry";
+
 const STAKEVIEW_APP_URL = "https://stakeview.app/apy/prev3.json";
 const BASELINE_VALIDATOR_ID = "mrgn28BhocwdAUEenen3Sw2MR9cPKDpLkDvzDdR7DBD";
 
@@ -259,6 +260,10 @@ async function fetchJupiterTokenInfo(): Promise<TokenInfoMap> {
     ? await fetch("https://token.jup.ag/strict")
     : await fetch("https://token.jup.ag/all")
   ).json();
+
+  // Dynamically import TokenListContainer when needed
+  const { TokenListContainer } = await import("@solana/spl-token-registry");
+
   const res = new TokenListContainer(tokens);
   const list = res.filterByChainId(101).getList();
   const tokenMap = list

@@ -69,7 +69,7 @@ const stateCreator: StateCreator<UiState, [], []> = (set, get) => ({
   isFilteredUserPositions: false,
   lendingMode: LendingModes.LEND,
   poolFilter: PoolTypes.ALL,
-  sortOption: SORT_OPTIONS_MAP[SortType.APY_DESC],
+  sortOption: SORT_OPTIONS_MAP[SortType.TVL_DESC],
 
   // Actions
   setIsMenuDrawerOpen: (isOpen: boolean) => set({ isMenuDrawerOpen: isOpen }),