Env

frontend/.env.example

@@ -0,0 +1,6 @@
+
+NEXT_PUBLIC_RPC_URL=
+RPC_URL=
+
+DATABASE_URL=
+

frontend/src/app/manufacturer/page.tsx → frontend/src/app/manufacturer/account/page.tsx

@@ -1,4 +1,4 @@
-import ManufacturerForm from '../components/ManufacturerForm';
+import ManufacturerForm from '@/components/manufacturer/ManufacturerForm';
 
 export default function ManufacturerPage() {
   return (

frontend/src/app/scan/[product]/page.tsx

@@ -1,17 +1,6 @@
 'use client';
-
-import Link from 'next/link';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useAccount } from '@starknet-react/core';
-import {
-  DiscordIcon,
-  LearnmoreIcon,
-  MenuIcon,
-  ScanIcon,
-  TelegramIcon,
-  TwitterIcon,
-} from '@/assets/icons';
-import AddressBar from '@/components/Addressbar';
 import ScanProduct from '@/components/Scan';
 import ConnectModal from '@/components/ConnectModal';
 import { useParams } from 'next/navigation';
@@ -37,10 +26,6 @@ export default function ScanPage() {
 
   return (
     <main className=" w-full md:h-fit bg-product-overview-mobile md:bg-product-overview bg-no-repeat bg-cover bg-center pb-[80px]">
-      {/* Product Preview 
-			//TODO: center, add background, make it responsive and pixel perfect
-			//TODO: https://www.figma.com/design/dwXPww5jcUl55azC9EQ8H0/SCANGUARD?node-id=14-13&node-type=canvas&t=Q8gtO0EqfOBYEqke-0
-			*/}
       <ProductPreview productId="product" />
       {open && <ScanProduct />}
 

frontend/src/components/ConnectModal.tsx

@@ -23,26 +23,26 @@ const Wallet = ({
   alt: string;
   src: string;
   connector: Connector;
-  closeModal: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  closeModal: () => void;
 }) => {
   const { connect } = useConnect();
   const isSvg = src?.startsWith('<svg');
 
   function handleConnectWallet(e: React.MouseEvent<HTMLButtonElement>): void {
     connect({ connector });
-    closeModal(e);
+    closeModal();
     localStorage.setItem('lastUsedConnector', connector.name);
   }
 
   return (
     <button
-      className="flex gap-4 items-center text-start p-[.2rem] hover:bg-outline-grey hover:rounded-[10px] transition-all cursor-pointer"
+      className="flex  gap-x-4  gap-y-6 w-full hover:border-[0.5px]  p-3 hover:bg-[#F64F14] hover:p-3 hover:rounded-[8px]  hover:border-[#F64F14] items-center   transition-all cursor-pointer"
       onClick={(e) => handleConnectWallet(e)}
     >
-      <div className="h-[2.2rem] w-[2.2rem] rounded-[5px]">
+      <div className="h-[2.2rem] w-[2.2rem] ">
         {isSvg ? (
           <div
-            className="h-full w-full object-cover rounded-[5px]"
+            className="h-full w-full object-cover "
             dangerouslySetInnerHTML={{
               __html: src ?? '',
             }}
@@ -58,20 +58,13 @@ const Wallet = ({
           />
         )}
       </div>
-      <p className="flex-1">{name}</p>
+      <p className=" text-white text-capitalize">{`Connect ${name}`}</p>
     </button>
   );
 };
 
 const ConnectModal = ({ isOpen, onClose }: Props) => {
   const [animate, setAnimate] = useState(false);
-  const closeModal = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    setAnimate(false);
-    setTimeout(() => {
-      onClose();
-    }, 400);
-  };
 
   useEffect(() => {
     if (isOpen) {
@@ -84,23 +77,20 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
   return (
     <GenericModal
       isOpen={isOpen}
-      onClose={closeModal}
+      onClose={onClose}
       animate={animate}
-      className={`w-[90vw] mx-auto md:h-[30rem] md:w-[45rem] text-white `}
+      className={` text-white `}
     >
-      <div className="flex p-4 w-full lg:p-0 lg:grid lg:grid-cols-5">
-        <div className="basis-5/6 lg:col-span-2  lg:border-r-[1px] lg:border-solid lg:border-outline-grey lg:py-4 lg:pl-8">
+      <div className="flex p-4 w-full lg:p-0 ">
+        <div className="basis-5/6 lg:col-span-2  l lg:py-4 lg:pl-8">
           <h2 className="text-center my-4 lg:text-start font-bold text-white text-[1.125em]">
-            Connect a Wallet
+            Connect  Wallet
           </h2>
         </div>
         <div className="ml-auto lg:col-span-3 lg:py-4 lg:pr-8">
           <button
-            onClick={(e) => {
-              closeModal(e);
-              e.stopPropagation();
-            }}
-            className="w-8 h-8  grid place-content-center rounded-full bg-outline-grey  "
+            onClick={onClose}
+            className="w-8 h-8  grid place-content-center rounded-full bg-secondary  "
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -109,21 +99,20 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
               viewBox="0 0 24 24"
             >
               <path
-                fill="currentColor"
+                fill="white"
                 d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
               />
             </svg>
           </button>
         </div>
       </div>
-      <div className="flex flex-col flex-1 justify-between lg:grid lg:grid-cols-5 ">
-        <div className="px-8  lg:h-full lg:col-span-2  lg:border-r-[1px] lg:border-solid lg:border-outline-grey">
-          <h4 className="mb-[1rem] text-text-grey font-semibold">Popular</h4>
 
-          <div className="flex flex-col gap-4 py-8">
+      <div className="flex  flex-col flex-1 justify-between  ">
+        <div className="px-8 ">
+          <div className="flex  flex-col gap-4 py-4">
             {connectors.map((connector, index) => (
               <Wallet
-                closeModal={closeModal}
+                closeModal={onClose}
                 key={connector.id || index}
                 src={connector.icon.toString()!}
                 name={connector.name}
@@ -133,59 +122,7 @@ const ConnectModal = ({ isOpen, onClose }: Props) => {
             ))}
           </div>
         </div>
-        <div className="p-4 border-t-[.5px] border-solid  border-red h-fit lg:h-full lg:border-none lg:col-span-3 lg:px-8 lg:py-0 lg:flex lg:flex-col">
-          <h2 className="lg:text-center lg:mb-[3rem] lg:text-[1.125em]  font-bold">
-            What is a wallet?
-          </h2>
-          <article className="hidden lg:flex  flex-col gap-8 place-content-center text-[0.875em] justify-self-center self-center ">
-            <div className="grid grid-cols-10 items-center  gap-4">
-              <div className="col-span-2 border-solid border-[2px] border-white rounded-[10px] h-[3rem] w-[3rem]">
-                <Image
-                  alt="text"
-                  loader={loader}
-                  src={
-                    'https://media.istockphoto.com/id/1084096262/vector/concept-of-mobile-payments-wallet-connected-with-mobile-phone.jpg?s=612x612&w=0&k=20&c=noILf6rTUyxN41JnmeFhUmqQWiCWoXlg0zCLtcrabD4='
-                  }
-                  width={100}
-                  height={100}
-                  className="h-full w-full object-cover rounded-[10px]"
-                />
-              </div>
-              <div className="col-span-8 flex flex-col gap-2 ">
-                <h4 className="text-[1.14em] font-bold">
-                  A home for your digital assets
-                </h4>
-                <p className="text-text-grey">
-                  Wallets are used to send, receive, store, and display digital
-                  assets like Ethereum and NFTs.
-                </p>
-              </div>
-            </div>
-            <div className="grid grid-cols-10 items-center  gap-4">
-              <div className="col-span-2 border-solid border-[2px] border-white rounded-[10px] h-[3rem] w-[3rem]">
-                <Image
-                  alt="text"
-                  loader={loader}
-                  src={
-                    'https://media.licdn.com/dms/image/D4E12AQFyWdLwXcJu3Q/article-cover_image-shrink_720_1280/0/1687854784940?e=2147483647&v=beta&t=nNDH-9XEcVYcb1PAc3S78ndQze0126KPOSZmnmMERNg'
-                  }
-                  width={100}
-                  height={100}
-                  className="h-full w-full object-cover rounded-[10px]"
-                />
-              </div>
-              <div className="col-span-8 flex flex-col gap-2 ">
-                <h4 className="text-[1.14em] font-bold">
-                  A new way to sign-in
-                </h4>
-                <p className="text-text-grey pb-2">
-                  Instead of creating new accounts and passwords on every
-                  website, just connect your wallet.
-                </p>
-              </div>
-            </div>
-          </article>
-        </div>
+
       </div>
     </GenericModal>
   );

frontend/src/components/ConnectWallet.tsx

@@ -1,15 +1,26 @@
 import { roboto } from '@/app/fonts';
+import { useState } from 'react';
+import ConnectModal from './ConnectModal';
 
 const ConnectWallet = (props: any) => {
+  const [isOpen, setisOpen] = useState<boolean>(false)
   return (
-    <button
-      className={`w-[12.5rem] h-14 grid py-2 px-[1.25rem]
+    <div>
+      <button
+        onClick={() => setisOpen(!isOpen)}
+        className={`w-[12.5rem] h-14 grid py-2 px-[1.25rem]
           place-items-center rounded-2xl gap-2 text-textPrimary
           font-medium text-base bg-primary ${roboto.variable} font-roboto`}
-      {...props}
-    >
-      CONNECT WALLET
-    </button>
+        {...props}
+      >
+        CONNECT WALLET
+      </button>
+
+      {
+        isOpen && <ConnectModal isOpen={isOpen} onClose={() => setisOpen(false)} />
+      }
+
+    </div>
   );
 };