feat: switch network

backend/src/router/offers/postOffer.ts

@@ -24,7 +24,7 @@ export const postOffer = async (
         },
         nft: {
           connect: {
-            tokenId: req.body.nftTokenId,
+            tokenId: req.body.tokenId,
           },
         },
       },

backend/src/router/user/getCreated.ts

@@ -13,7 +13,12 @@ export const getCreated = async (
           address: req.params.address,
         },
       })
-      .createdNFTs();
+      .createdNFTs({
+        include: {
+          sales: true,
+        },
+      });
+
     res.status(200).json(nfts);
   } catch (error) {
     next(error);

frontend/package.json

@@ -33,6 +33,7 @@
     "embla-carousel-autoplay": "^8.0.0-rc19",
     "embla-carousel-react": "^8.0.0-rc19",
     "ethers": "^5.7.2",
+    "ethers-decode-error": "^1.0.0",
     "lucide-react": "^0.309.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",

frontend/src/App.tsx

@@ -12,27 +12,30 @@ import { Item } from "./pages/Item";
 import { MyAssets } from "./pages/MyAssets";
 import { Toaster } from "./components/ui/toaster";
 import { TestButton } from "./pages/test";
+import { NetworkProvider } from "./context/networkProvider/networkProvider";
 
 function App() {
   const RRLocation = useLocation();
   const { pathname } = RRLocation;
   return (
     <div className="">
       <WalletProvider>
-        {pathname !== "/" && <Header />}
+        <NetworkProvider>
+          {pathname !== "/" && <Header />}
 
-        <ErrorBoundary fallback={<ErrorPage />} onReset={location.reload}>
-          <Suspense fallback={<LoadingPage />}>
-            <Routes>
-              <Route path="/" element={<Home />} />
-              <Route path="/create" element={<Create />} />
-              <Route path="/item/:tokenId" element={<Item />} />
-              <Route path="/myAssets" element={<MyAssets />} />
-              <Route path="/test" element={<TestButton />} />
-            </Routes>
-          </Suspense>
-          <Toaster />
-        </ErrorBoundary>
+          <ErrorBoundary fallback={<ErrorPage />} onReset={location.reload}>
+            <Suspense fallback={<LoadingPage />}>
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/create" element={<Create />} />
+                <Route path="/item/:tokenId" element={<Item />} />
+                <Route path="/myAssets" element={<MyAssets />} />
+                <Route path="/test" element={<TestButton />} />
+              </Routes>
+            </Suspense>
+            <Toaster />
+          </ErrorBoundary>
+        </NetworkProvider>
       </WalletProvider>
     </div>
   );

frontend/src/components/EditOfferModal.tsx

@@ -1,12 +1,18 @@
+import { CalendarIcon } from "@radix-ui/react-icons";
+import { addDays, format } from "date-fns";
+import { CheckCircle2, XCircle } from "lucide-react";
+import { ReactNode, useEffect, useState } from "react";
+
 import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogFooter,
   AlertDialogHeader,
+  AlertDialogOverlay,
   AlertDialogTitle,
-  AlertDialogTrigger,
+  AlertDialogTrigger
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
@@ -25,11 +31,7 @@ import {
 import { useWallet } from "@/context/walletProvider";
 import { cn } from "@/lib/utils";
 import { Offer } from "@/types/types";
-import { CalendarIcon } from "@radix-ui/react-icons";
-import { addDays, format } from "date-fns";
-import { ReactNode, useEffect, useState } from "react";
 import { useToast } from "./ui/use-toast";
-import { CheckCircle2 } from "lucide-react";
 
 type EditOfferModalProps = {
   offer: Offer;
@@ -78,25 +80,37 @@ export const EditOfferModal: React.FC<EditOfferModalProps> = ({
 
   const action = async () => {
     if (!price || price < MIN_PRICE || !accountAddr || !date) {
-      console.log("continue: ", price, accountAddr, date);
       return;
     }
 
-    await placeOffer();
-    toast({
-      title: (
-        <div className="flex items-center justify-start gap-1">
-          <CheckCircle2 className="h-5 w-5 text-emerald-600" />
-          Edit Offer Success!
-        </div>
-      ),
-      description: "Your NFT is created!",
-    });
-    window.location.reload();
+    try {
+      await placeOffer();
+      toast({
+        title: (
+          <div className="flex items-center justify-start gap-1">
+            <CheckCircle2 className="h-5 w-5 text-emerald-600" />
+            Edit Offer Success!
+          </div>
+        ),
+        description: "Your edit is successful!",
+      });
+      window.location.reload();
+    } catch (error) {
+      toast({
+        title: (
+          <div className="flex items-center justify-start gap-1">
+            <XCircle className="h-5 w-5 text-red-600" />
+            Failed to edit offer
+          </div>
+        ),
+        description: "Something went wrong.",
+      });
+    }
   };
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogOverlay className="bg-black/10" />
       <AlertDialogContent className="overflow-auto" onEscapeKeyDown={reset}>
         <AlertDialogHeader>
           <AlertDialogTitle>Edit offer</AlertDialogTitle>

frontend/src/components/Header.tsx

@@ -3,10 +3,50 @@ import { HeaderSideMenu } from "./HeaderSideMenu";
 import { LightLogo } from "../assets";
 import { Button } from "./ui/button";
 import HeaderToggleIcon from "@/assets/HeaderToggleIcon";
-import { ConnectWalletBtn } from "./ConnectWalletBtn";
+import { ConnectWalletBtn } from "./connectWallet/ConnectWalletBtn";
+import { ConnectWalletModal } from "./connectWallet/ConnectWalletModal";
+import { useEffect, useState } from "react";
 
 export const Header = () => {
-  ("");
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const Description = () => (
+    <div className="space-y-3">
+      <p>
+        This app is deployed on Polygon Mumbai test net. To have a full
+        experience, please
+      </p>
+      <ul>
+        <li>1. install Metamask extenstion in your browser</li>
+        <li>2. switch to Mumbai test net</li>
+        <li>3. connect your wallet</li>
+      </ul>
+      <p>
+        To creact or purchase NFTs, you will need some Matic tokens. Go get some
+        <a
+          href="https://faucet.polygon.technology/"
+          className="ml-1 font-semibold underline hover:text-sky-700"
+          target="_blank"
+        >
+          here
+        </a>
+        . It is free.
+      </p>
+
+      <p>
+        If you want to watch this instruction again, you can find it in header.
+      </p>
+    </div>
+  );
+
+  useEffect(() => {
+    const shown = sessionStorage.getItem("shown");
+    console.log(shown);
+
+    if (shown !== "true") {
+      setIsModalOpen(true);
+      sessionStorage.setItem("shown", "true");
+    }
+  }, []);
   return (
     <div className="h-[6rem] bg-gradient-to-b from-gray-100/20 p-7 text-gray-900">
       <div className="mx-auto flex max-w-screen-2xl items-center justify-between gap-6">
@@ -27,9 +67,19 @@ export const Header = () => {
           <Link to="/myAssets">
             <p className="px-3 py-2 hover:text-gray-900/60">My Assets</p>
           </Link>
-          <Link to="/test">
+          <ConnectWalletModal
+            open={isModalOpen}
+            onOpenChange={setIsModalOpen}
+            title={"Welcome!"}
+            description={<Description />}
+          >
+            <button className="px-3 py-2 hover:text-gray-900/60">
+              Instruction
+            </button>
+          </ConnectWalletModal>
+          {/* <Link to="/test">
             <p className="px-3 py-2 hover:text-gray-900/60">test</p>
-          </Link>
+          </Link> */}
         </div>
         <div className="max-md:hidden">
           <ConnectWalletBtn />

frontend/src/components/HeaderSideMenu.tsx

@@ -8,7 +8,7 @@ import {
   SheetFooter,
   SheetTrigger,
 } from "./ui/sheet";
-import { ConnectWalletBtn } from "./ConnectWalletBtn";
+import { ConnectWalletBtn } from "./connectWallet/ConnectWalletBtn";
 import { cn } from "@/lib/utils";
 
 export const HeaderSideMenu: React.FC<PropsWithChildren> = (props) => {