Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

changes made for fix-278 #292

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5,910 changes: 443 additions & 5,467 deletions app/client/pnpm-lock.yaml
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

revert changes

Large diffs are not rendered by default.

Binary file added app/client/public/images/WalletCard.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion app/client/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default function RootLayout({
<link rel="icon" href="/logo.jpeg" type="image/jpeg" />
</head>
<body
className={`${manrope.className} antialiased overflow-hidden text-black`}
className={`${manrope.className} antialiased overflow-x-hidden text-black`}
>
<Providers>{children}</Providers>
</body>
Expand Down
238 changes: 68 additions & 170 deletions app/client/src/app/page.tsx
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! However, can you break it into smaller components to improve modularity and reusability?

Original file line number Diff line number Diff line change
@@ -1,183 +1,81 @@
"use client";
import React, { useState } from "react";
import { useRouter } from "next/navigation";
import { useAccount } from "@starknet-react/core";
import WalletConnector from "@/components/Connector";
import Modal from "@/components/Modal/Modal";
import { Button } from "@/components/Button/Button";
import React from "react";
import { useConnect, Connector } from "@starknet-react/core";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import Header from "@/components/Header/Header";
import WalletSection from "@/components/WalletSection/WalletSection";
import Image from "next/image";
import { useLoginStore } from "@/store/loginStore";
import { LandPlot, ShieldCheck, Wallet, ArrowRight } from "lucide-react";
import { MoonLoader } from "react-spinners";

const Home = () => {
const loginStore = useLoginStore();
const { status, address } = useAccount();
const [isModalOpen, setModalOpen] = useState(false);
const [userType, setUserType] = useState<"inspector" | "owner" | null>(
null
);
const [error, setError] = useState<string | null>(null);
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);

const toggleModal = () => setModalOpen(!isModalOpen);
const walletIdToName = new Map([
["argentX", "Argent X"],
["braavos", "Braavos"],
["argentWebWallet", "Web Wallet"],
["argentMobile", "Argent Mobile"],
]);

const handleFormSubmit = (e: React.FormEvent) => {
e.preventDefault();
setIsLoading(true);
if (!userType) {
setError("Please select a user type.");
return;
}
const walletIcons: { [key: string]: string } = {
braavos: "/icons/wallets/braavos.svg",
argentX: "/icons/wallets/argent-x.svg",
argentWebWallet: "/icons/wallets/web.svg",
argentMobile: "/icons/wallets/argent-x.svg",
};

const allowedUserTypes = ["owner", "inspector"];
if (!allowedUserTypes.includes(userType)) {
setError("Not allowed user type.");
return;
}
window.localStorage.setItem("user-type", userType);
loginStore.setUserType(userType);
router.push("/dashboard");
};
const Home = () => {
const { connectors, connectAsync } = useConnect();

const UserTypeCard = ({
type,
icon: Icon,
title,
description,
}: {
type: "owner" | "inspector";
icon: React.ElementType;
title: string;
description: string;
}) => (
<div
onClick={() => setUserType(type)}
className={`
border-2 p-4 rounded-lg cursor-pointer transition-all duration-300
${
userType === type
? "border-purple-600 bg-purple-50 scale-105"
: "border-gray-200 hover:border-purple-300"
const connect = async (connector: Connector) => {
try {
await connectAsync({ connector });
localStorage.setItem("landver-connector", connector.id);
toast.success("Wallet connected successfully!");
} catch (error: unknown) {
let errorMessage = "Failed to connect wallet.";
if (error instanceof Error) {
if (error.message.includes("rejected")) {
errorMessage =
"Connection rejected. Please try again and approve the connection request.";
} else if (error.message.includes("Connector not found")) {
errorMessage = `${
walletIdToName.get(connector.id) ?? connector.name
} is not installed. Please install the wallet extension first.`;
} else {
errorMessage +=
"Please check if your wallet is properly configured and try again.";
}
`}
>
<div className="flex items-center mb-3">
<Icon
className={`mr-3 ${
userType === type ? "text-purple-600" : "text-gray-500"
}`}
/>
<h3 className="text-lg font-semibold">{title}</h3>
</div>
<p className="text-gray-600">{description}</p>
</div>
);

return (
<div className="min-h-screen bg-[#E9F3F1] py-8 px-4 overflow-y-auto flex flex-col justify-center items-center">
<div className="max-w-4xl w-full mx-auto grid md:grid-cols-2 gap-8 bg-white rounded-2xl shadow-2xl">
{/* Left Side - Descriptive Section */}
<div className="bg-gradient-to-br from-purple-400 to-indigo-700 p-8 md:flex flex-col justify-center text-white hidden">
<Image
src="/images/logo.svg"
alt="landver logo"
height={100}
width={100}
className="mb-6"
/>
<h1 className="text-3xl font-bold mb-4">Land Registry Protocol</h1>
<p className="text-lg mb-6 opacity-80">
Secure, transparent, and efficient land registration powered by blockchain technology.
</p>
<div className="space-y-4">
<div className="flex items-center">
<LandPlot className="mr-3 text-yellow-300" />
<span>Immutable Land Records</span>
</div>
<div className="flex items-center">
<ShieldCheck className="mr-3 text-green-300" />
<span>Verified Ownership Verification</span>
</div>
</div>
</div>

{/* Right Side - Connection & User Type */}
<div className="p-8 flex flex-col justify-center">
{status !== "connected" ? (
<div className="text-center">
<Wallet className="mx-auto text-purple-600 mb-4" size={64} />
<h2 className="text-2xl font-bold mb-4">Connect Your Wallet</h2>
<p className="text-gray-600 mb-6">Connect a supported wallet to access Land Registry</p>
<Button
onClick={toggleModal}
classname="mx-auto flex items-center gap-2 bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700"
>
{!isModalOpen ? (
<>
Connect Wallet
<ArrowRight size={20} />
</>
) : (
<MoonLoader color="#fff" size={20} />
)}
</Button>

{isModalOpen && (
<Modal onClose={toggleModal} isOpen={isModalOpen}>
<div className="text-center">
<h2 className="text-2xl font-bold mb-4">Connect Your Wallet</h2>
<WalletConnector />
</div>
</Modal>
)}
</div>
) : (
<form onSubmit={handleFormSubmit}>
<div className="text-center mb-6">
<p className="text-gray-600">Connected Wallet:</p>
<p className="font-bold text-purple-600">{address?.slice(0, 6)}...{address?.slice(-4)}</p>
</div>

<h2 className="text-2xl font-bold mb-4 text-center">Select Your Role</h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<UserTypeCard
type="owner"
icon={LandPlot}
title="Land Owner"
description="Manage and verify your land ownership"
/>
<UserTypeCard
type="inspector"
icon={ShieldCheck}
title="Land Inspector"
description="Verify and validate land records"
/>
</div>
}

{error && <p className="text-red-500 text-sm mb-4 text-center">{error}</p>}
toast.error(errorMessage);
console.error("Wallet connection error:", error);
}
};

<Button
type="submit"
classname="w-full bg-purple-600 text-white py-3 rounded-lg hover:bg-purple-700 flex items-center justify-center gap-2"
>
{!isLoading ? (
<>
Proceed to Dashboard
<ArrowRight size={20} />
</>
) : (
<MoonLoader color="#fff" size={20} />
)}
</Button>
</form>
)}
</div>
</div>
return (
<div className="min-h-screen bg-gray-50 flex flex-col py-8 lg:px-4 overflow-y-auto">
<ToastContainer />
<div className="flex-grow overflow-y-auto">
<div className="w-full flex flex-col lg:flex-row items-center lg:items-start">
<Header />
<div className="w-full lg:w-1/2 p-6 flex justify-center">
<Image
src="/images/WalletCard.png"
alt="landver logo"
height={400}
width={400}
className="mb-6 max-w-full"
/>
</div>
</div>
);
<WalletSection
connectors={connectors}
connect={connect}
walletIcons={walletIcons}
walletIdToName={walletIdToName}
/>
</div>
</div>
);
};

export default Home;
export default Home;
38 changes: 38 additions & 0 deletions app/client/src/components/FeatureList/FeatureList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
"use client";
import React from "react";

const features = [
"Effortless land registration with unique property IDs.",
"Streamlined land inspection and verification for trusted records.",
"Immutable, blockchain security for ownership and transactions.",
];

const FeatureList: React.FC = () => {
return (
<div className="space-y-4">
{features.map((text, index) => (
<div key={index} className="flex items-center gap-3 text-[#1F1F1F]">
<div className="flex items-center justify-center h-6 w-6 rounded-full bg-[#E9E7F9]">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 26 26"
strokeWidth={2}
stroke="#6E62E5"
className="h-5 w-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M5 13l4 4L19 7"
/>
</svg>
</div>
<p className="text-base">{text}</p>
</div>
))}
</div>
);
};

export default FeatureList;
32 changes: 32 additions & 0 deletions app/client/src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
"use client";
import React from "react";
import Image from "next/image";
import FeatureList from "@/components/FeatureList/FeatureList";

const Header: React.FC = () => {
return (
<div className="w-full lg:w-1/2 p-6 lg:p-8 flex flex-col items-center lg:items-start lg:text-left">
<Image
src="/images/logo.svg"
alt="landver logo"
height={100}
width={100}
className="mb-6"
/>
<h1 className="text-3xl lg:text-4xl lg:w-2/3 font-bold mb-4 text-[#6E62E5]">
Land Registry Protocol
</h1>
<p className="text-lg mb-6 opacity-80 text-[#5E5B5B] text-center">
Secure, transparent, and efficient land registration powered by blockchain
technology.
</p>
<p className="text-lg mb-6 text-[#6b21a8] font-semibold">
A Secure Platform for Land Registration, Inspection, and Validation on
Starknet
</p>
<FeatureList />
</div>
);
};

export default Header;
36 changes: 36 additions & 0 deletions app/client/src/components/WalletButton/WalletButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
"use client";
import React from "react";
import Image from "next/image";
import type { Connector } from "@starknet-react/core";

interface WalletButtonProps {
connector: Connector;
onClick: (connector: Connector) => void;
walletIcons: { [key: string]: string };
walletIdToName: Map<string, string>;
}

const WalletButton: React.FC<WalletButtonProps> = ({
connector,
onClick,
walletIcons,
walletIdToName,
}) => {
return (
<div
key={connector.id}
onClick={() => onClick(connector)}
className="flex flex-row justify-center items-center gap-4 rounded-lg border-2 py-2 px-10 md:px-20 lg:px-40 border-[#d3d3f3] text-[#6364D5] cursor-pointer hover:scale-95 transition-transform w-full max-w-lg"
>
<Image
src={walletIcons[connector.id]}
alt={`${connector.name} logo`}
height={20}
width={20}
/>
<span>{walletIdToName.get(connector.id) ?? connector.name}</span>
</div>
);
};

export default WalletButton;
Loading
Loading