resolve #windup

packages/hardhat/hardhat.config.ts

@@ -5,11 +5,9 @@ require("@nomiclabs/hardhat-ethers");
 require("hardhat-deploy");
 require("dotenv").config();
 
-
 module.exports = {
   solidity: "0.8.20",
   networks: {
-
     sepolia: {
       url: `${process.env.SEPOLIA_RPC_URL}`,
       accounts: [`0x${process.env.PRIVATE_KEY}`],

packages/hardhat/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "scripts": {
     "account": "hardhat run scripts/listAccount.ts",
-    "chain": "hardhat node --network hardhat",
+    "chain": "hardhat node --network hardhat ",
     "compile": "hardhat compile",
     "deploy": "hardhat deploy",
     "flatten": "hardhat flatten",

packages/nextjs/app/(app)/account/page.client.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Address } from "viem";
+import { useAccount, useDisconnect } from "wagmi";
+import { Balance } from "~~/components/scaffold-eth";
+import { AddressQRCodeModal } from "~~/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal";
+
+export const AccountPageClient: React.FC = () => {
+  const { address: connectedAddress } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  return (
+    <div>
+      <AddressQRCodeModal address={connectedAddress as Address} modalId="qr-code modal" />
+      <div className="flex justify-center flex-col items-center">
+        <p className="font-medium text-lg">Account Balance</p>
+        <Balance address={connectedAddress as Address} />
+        <button
+          className="bg-red-500 py-2 px-4 m-3 rounded-xl text-white hover:bg-red-400"
+          onClick={() => disconnect()}
+        >
+          Disconnect
+        </button>
+      </div>
+    </div>
+  );
+};

packages/nextjs/app/(app)/account/page.tsx

@@ -0,0 +1,12 @@
+import { AccountPageClient } from "./page.client";
+import { Metadata } from "next";
+
+export const metadata: Metadata = { title: "Account" };
+
+export default function AccountPage() {
+  return (
+    <div className="py-6 px-4">
+      <AccountPageClient />
+    </div>
+  );
+}

packages/nextjs/app/(app)/dashboard/page.tsx

@@ -0,0 +1,15 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Dashboard",
+};
+
+export default function DashboardPage() {
+  return (
+    <div className="">
+      <div>
+        <p>Hello world</p>
+      </div>
+    </div>
+  );
+}

packages/nextjs/app/(app)/layout.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { normalize } from "viem/ens";
+import { useAccount, useEnsAvatar } from "wagmi";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
+
+export default function AppLayout({ children }: { children: React.ReactNode }) {
+  const { address: connectedAddress } = useAccount();
+  const ensAvatarResult = useEnsAvatar({
+    name: normalize("wevm.eth"),
+  });
+
+  return (
+    <main className="w-full max-w-4xl mx-auto sm:px-0 px-3">
+      <div className="py-5 flex justify-between">
+        <Link href={`/dashboard`} className="sm:block hidden">
+          <Image src={`/logo_dark.svg`} alt="Stoneproof" width={160} height={52} />
+        </Link>
+        <Link href={`/dashboard`} className="sm:hidden block">
+          <Image src={`/logo_small.svg`} alt="Stoneproof" width={50} height={40} />
+        </Link>
+        <div>
+          <Link href={`/account`}>
+            <BlockieAvatar address={connectedAddress || ""} size={36} ensImage={ensAvatarResult.data} />
+          </Link>
+        </div>
+      </div>
+      {children}
+    </main>
+  );
+}

packages/nextjs/app/(app)/onboarding/page.tsx

@@ -0,0 +1,13 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Welcome abroad!",
+};
+
+export default function OnBoadingPage() {
+  return (
+    <div className="w-full min-h-screen flex justify-center items-center">
+      <p>Hello world</p>
+    </div>
+  );
+}

packages/nextjs/app/(marketing)/layout.tsx

@@ -1,6 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAccount } from "wagmi";
 import { MarketingLayout } from "~~/components/layout";
 
 export default function MarketingRootLayout({ children }: { children: React.ReactNode }) {
+  const { address: connectedAddress } = useAccount();
+  const { replace } = useRouter();
+
+  useEffect(() => {
+    if (connectedAddress) {
+      replace("/dashboard");
+    }
+  }, [replace, connectedAddress]);
+
   return (
     <MarketingLayout>
       <main>{children}</main>

packages/nextjs/components/dashboard/ClaimRoleCard.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+
+const roles = [
+  { label: "Refiner", role: "REFINER" },
+  { label: "Miner", role: "MINER" },
+  { label: "Transporter", role: "TRANSPORTER" },
+  { label: "Auditor", role: "AUDITOR" },
+  { label: "Inspector", role: "Inspector" },
+];
+
+export const ClaimRoleCard: React.FC = () => {
+  return (
+    <div className="flex flex-col max-w-72 gap-4 bg-neutral-100 px-6 py-4 rounded-xl shadow">
+      <p className="text-2xl text-center text-neutral-800">Congluations!</p>
+      <p className="text-center text-neutral-500">
+        Claim a role that will be used to identify you in Stoneproof platform.
+      </p>
+      <Select>
+        <SelectTrigger className="w-auto">
+          <SelectValue placeholder="Role in chain" />
+        </SelectTrigger>
+        <SelectContent className="bg-white">
+          {roles.map(role => (
+            <SelectItem value={role.role}>{role.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <button className="bg-sky-400 hover:bg-sky-500 transition-all text-white py-2 px-6 rounded-lg">Continue</button>
+    </div>
+  );
+};

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressQRCodeModal.tsx

@@ -11,14 +11,8 @@ export const AddressQRCodeModal = ({ address, modalId }: AddressQRCodeModalProps
   return (
     <>
       <div>
-        <input type="checkbox" id={`${modalId}`} className="modal-toggle" />
         <label htmlFor={`${modalId}`} className="modal cursor-pointer">
           <label className="modal-box relative">
-            {/* dummy input to capture event onclick on modal box */}
-            <input className="h-0 w-0 absolute top-0 left-0" />
-            <label htmlFor={`${modalId}`} className="btn btn-ghost btn-sm btn-circle absolute right-3 top-3">
-              ✕
-            </label>
             <div className="space-y-3 py-6">
               <div className="flex flex-col items-center gap-6">
                 <QRCodeSVG value={address} size={256} />

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx

@@ -53,6 +53,7 @@ export const RainbowKitCustomConnectButton: React.FC<{ className?: string }> = (
                       {chain.name}
                     </span>
                   </div>
+
                   {/* <AddressInfoDropdown
                     address={account.address as Address}
                     displayName={account.displayName}

packages/nextjs/components/ui/select.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp, SortDescIcon } from "lucide-react";
+import { cn } from "~~/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <SortDescIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronUp />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronDown />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

packages/nextjs/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@heroicons/react": "~2.1.5",
     "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
     "@rainbow-me/rainbowkit": "2.1.6",
     "@tanstack/react-query": "~5.28.6",
     "@uniswap/sdk-core": "~4.0.1",