done integrate plug wallet

package.json

@@ -10,6 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@dfinity/agent": "^2.1.2",
+    "@dfinity/candid": "^2.1.2",
+    "@dfinity/principal": "^2.1.2",
     "@headlessui/react": "^2.1.10",
     "@heroicons/react": "^2.1.5",
     "@radix-ui/react-label": "^2.1.0",
@@ -22,6 +25,7 @@
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.10",
     "react-router-dom": "^6.27.0",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "sweetalert2": "^11.14.4",
     "tailwind-merge": "^2.5.4"
   },

src/App.jsx

@@ -1,17 +1,40 @@
-import { Route, Routes } from "react-router-dom"
-import Footer from "./components/fixed/Footer"
-import Navbar from "./components/fixed/Navbar"
-import AuctionDetail from "./views/AuctionDetail"
-import Verification from "./views/Verification"
-import Home from "./views/Home"
-import Auction from "./views/Auction"
-import { CreateAuction } from "./views/CreateAuction"
+import { Route, Routes } from "react-router-dom";
+import Footer from "./components/fixed/Footer";
+import Navbar from "./components/fixed/Navbar";
+import AuctionDetail from "./views/AuctionDetail";
+import Verification from "./views/Verification";
+import Home from "./views/Home";
+import Auction from "./views/Auction";
+import { CreateAuction } from "./views/CreateAuction";
+import { connectWallet, getActorWithLogin, getActorWithoutLogin } from "./service/connector";
+import { useEffect, useState } from "react";
 
 function App() {
+  const [connectedPrincipal, setConnectedPrincipal] = useState("");
+
+  const handleConnect = async () => {
+    const principal = await connectWallet();
+    if (principal) {
+      setConnectedPrincipal(principal);
+    }
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (connectedPrincipal) {
+        const data = await getActorWithLogin();
+        if (data) {
+          const bal = await data.getUserPrincipalArray();
+          console.log(bal);
+        }
+      }
+    };
+    fetchData();
+  }, [connectedPrincipal]);
 
   return (
     <div className="font-poppins mx-10">
-      <Navbar />
+      <Navbar handleConnect={handleConnect} principal={connectedPrincipal} />
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/auction" element={<Auction />} />
@@ -21,7 +44,7 @@ function App() {
       </Routes>
       <Footer />
     </div>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/fixed/Navbar.jsx

@@ -1,8 +1,8 @@
 import { navList } from "../../utils/list";
-import plug from "../../assets/plug.png"
-
-const Navbar = () => {
+import plug from "../../assets/plug.png";
+import { truncate } from "../../lib/utils";
 
+const Navbar = ({ handleConnect, principal }) => {
   return (
     <div
       className={`-mx-10 bg-darkBrown text-white border-b border-n-6 shadow-xl`}
@@ -25,10 +25,22 @@ const Navbar = () => {
             ))}
           </div>
         </nav>
-        <button className="bg-white p-3 rounded-xl hover:scale-105 duration-200 flex flex-row space-x-1 items-center">
-            <img src={plug} alt="plug" className="h-7"/>
+        {principal ? (
+          <button
+            className="bg-white p-3 rounded-xl hover:scale-105 duration-200 flex flex-row space-x-1 items-center"
+          >
+            <img src={plug} alt="plug" className="h-7" />
+            <h1 className="text-black font-semibold">{truncate(principal, 4, 4, 11)}</h1>
+          </button>
+        ) : (
+          <button
+            onClick={() => handleConnect()}
+            className="bg-white p-3 rounded-xl hover:scale-105 duration-200 flex flex-row space-x-1 items-center"
+          >
+            <img src={plug} alt="plug" className="h-7" />
             <h1 className="text-black font-semibold">Connect Wallet</h1>
-        </button>
+          </button>
+        )}
       </div>
     </div>
   );

src/idl/service.did.js

@@ -0,0 +1,14 @@
+export const idlFactory = ({ IDL }) => {
+    const UserPrincipal = IDL.Record({
+      username: IDL.Text,
+      princi: IDL.Principal,
+      wallet: IDL.Principal,
+    });
+    return IDL.Service({
+      addUserPrincipal: IDL.Func([IDL.Text, IDL.Principal], [], []),
+      getUserPrincipalArray: IDL.Func([], [IDL.Vec(UserPrincipal)], ["query"]),
+    });
+  };
+  export const init = ({ IDL }) => {
+    return [];
+  };

src/lib/utils.js

@@ -3,4 +3,21 @@ import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs) {
   return twMerge(clsx(inputs));
+}
+
+export function truncate(
+  text,
+  startChar,
+  endChar,
+  maxLength
+) {
+  if (text.length > maxLength) {
+    let start = text.substring(0, startChar);
+    let end = text.substring(text.length - endChar, text.length);
+    while (start.length + end.length < maxLength) {
+      start = start + ".";
+    }
+    return start + end;
+  }
+  return text;
 }

src/service/connector.js

@@ -0,0 +1,39 @@
+import { idlFactory } from "../idl/service.did";
+import { Actor, HttpAgent } from "@dfinity/agent";
+
+const nnsCanisterId = "7z2b7-ciaaa-aaaap-ahxba-cai";
+const host = "https://ic0.app";
+
+export async function connectWallet() {
+  const whitelist = [nnsCanisterId];
+  try {
+    await window?.ic?.plug?.requestConnect({
+      whitelist,
+    });
+    return window.ic.plug.principalId;
+  } catch (error) {
+    console.log(error);
+    return;
+  }
+}
+
+export async function getActorWithoutLogin() {
+  const agent = new HttpAgent({ host: host });
+  const actor = Actor.createActor(idlFactory, {
+    agent,
+    canisterId: nnsCanisterId,
+  });
+  return actor;
+}
+
+export async function getActorWithLogin() {
+  const publicKey = await window.ic.plug.agent.getPrincipal();
+  if (publicKey) {
+    const agent = new HttpAgent({ publicKey, host: host });
+    const actor = Actor.createActor(idlFactory, {
+      agent,
+      canisterId: nnsCanisterId,
+    });
+    return actor;
+  }
+}

src/views/CreateAuction.jsx

@@ -422,4 +422,4 @@ export function CreateAuction() {
       </div>
     </div>
   );
-}
+}

vite.config.js

@@ -1,7 +1,20 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import rollupNodePolyFill from "rollup-plugin-polyfill-node";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: "globalThis",
+      },
+    },
+  },
+  build: {
+    rollupOptions: {
+      plugins: [rollupNodePolyFill()],
+    },
+  },
+});