feat: update ui

web/package.json

@@ -15,7 +15,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.15.0",
-    "jupiverse-kit": "^1.2.0",
+    "jupiverse-kit": "^1.2.1",
     "lucide-react": "^0.469.0",
     "next": "14.2.21",
     "next-nprogress-bar": "^2.4.3",

web/src/app/layout.tsx

@@ -1,13 +1,16 @@
 import type { Metadata } from "next";
 import { Space_Grotesk } from "next/font/google";
+
 import "./globals.css";
+import "jupiverse-kit/dist/index.css";
+
 import Navbar from "@/components/shared/navbar";
-import { WalletProvider } from "jupiverse-kit";
-import { Toaster } from "jupiverse-kit";
 import NProgressBar from "@/components/ui/nprogressbar";
 import { UniverseBackground } from "@/components/ui/universe-background";
-import "jupiverse-kit/dist/index.css";
 import { ThemeProvider } from "@/components/providers/theme-provider";
+import { WalletProvider } from "@/components/providers/wallet-provider";
+
+import { Toaster } from "sonner";
 
 const spaceGrotesk = Space_Grotesk({ subsets: ["latin"] });
 
@@ -37,7 +40,7 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <WalletProvider rpcUrl={process.env.NEXT_PUBLIC_RPC_URL}>
+          <WalletProvider>
             <UniverseBackground />
             <NProgressBar>
               <main className="min-h-screen">

web/src/app/swap/page.tsx

@@ -10,6 +10,8 @@ const Page = () => {
           process.env.NEXT_PUBLIC_RPC_URL ||
           "https://api.mainnet-beta.solana.com"
         }
+        referralKey={process.env.NEXT_PUBLIC_REFERRAL_KEY as string}
+        platformFeeBps={20}
       />
     </div>
   );

web/src/components/providers/wallet-provider.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { JupiverseKitProvider } from "jupiverse-kit";
+import { useTheme } from "next-themes";
+
+import { Connection } from "@solana/web3.js";
+import { useWallet } from "@solana/wallet-adapter-react";
+
+export function WalletProvider({ children }: { children: React.ReactNode }) {
+  const connection = new Connection(process.env.NEXT_PUBLIC_RPC_URL as string);
+  const wallet = useWallet();
+  const { theme } = useTheme();
+
+  return (
+    <JupiverseKitProvider
+      endpoint={process.env.NEXT_PUBLIC_RPC_URL as string}
+      theme={theme as "light" | "dark" | "jupiter"}
+      autoConnect={true}
+      lang="en"
+      env="mainnet-beta"
+      walletConnectProjectId={process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID}
+      metadata={{
+        name: "Jupiverse Kit Test",
+        description: "Jupiverse Kit Test",
+        url: "https://jupiversekit.vercel.app",
+        iconUrls: ["https://jupiversekit.vercel.app/favicon.ico"],
+      }}
+    >
+      {children}
+    </JupiverseKitProvider>
+  );
+}

web/src/components/shared/navbar.tsx

@@ -13,9 +13,9 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 import { itemVariants, navVariants } from "@/utils/motion";
-import { WalletConnectButton } from "jupiverse-kit";
 import Image from "next/image";
 import { ThemeToggle } from "./theme-toggle";
+import { UnifiedWalletButton } from "@jup-ag/wallet-adapter";
 
 const Navbar = () => {
   return (
@@ -64,7 +64,7 @@ const Navbar = () => {
           variants={itemVariants}
           className="hidden md:flex flex-1 justify-end items-center gap-2"
         >
-          <WalletConnectButton />
+          <UnifiedWalletButton />
           <ThemeToggle />
         </motion.div>
 
@@ -107,7 +107,7 @@ const Navbar = () => {
                   </Link>
                 ))}
                 <div className="pt-4 border-t border-gray-800 w-full flex justify-center">
-                  <WalletConnectButton />
+                  <UnifiedWalletButton />
                 </div>
               </div>
               <div className="absolute bottom-4 right-4">