chore: use Next Script component

mrgnlabs · Nov 30, 2023 · 72f8907 · 72f8907
1 parent 0ee86a3
commit 72f8907
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/apps/marginfi-v2-ui/src/pages/_document.tsx b/apps/marginfi-v2-ui/src/pages/_document.tsx
@@ -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>
   );

diff --git a/apps/marginfi-v2-ui/src/pages/swap.tsx b/apps/marginfi-v2-ui/src/pages/swap.tsx
@@ -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>