diff --git a/README.md b/README.md index 58660b43..94385f6a 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ While initially built on Starknet, LandVer is designed to be cross-chain compati The project is divided into the following components: -- `backend/`: Node.js and Express-based API server +- `land-registry-backend/`: Node.js and Express-based API server - `docs/`: Documentation for the project, including setup guides and API references - `examples/`: React-based web application - `land_registry/`: Land registry contract diff --git a/app/client/package.json b/app/client/package.json index 6fe029d3..6fe46855 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -23,6 +23,7 @@ "react-dom": "^18", "react-icons": "^5.3.0", "react-spinners": "^0.14.1", + "react-toastify": "^10.0.6", "starknet": "^6.11.0", "starknetkit": "^2.3.3", "tailwind-merge": "^2.5.5", diff --git a/app/client/pnpm-lock.yaml b/app/client/pnpm-lock.yaml index d6facd50..ddd27801 100644 --- a/app/client/pnpm-lock.yaml +++ b/app/client/pnpm-lock.yaml @@ -50,6 +50,9 @@ importers: react-spinners: specifier: ^0.14.1 version: 0.14.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-toastify: + specifier: ^10.0.6 + version: 10.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) starknet: specifier: ^6.11.0 version: 6.11.0 @@ -2053,6 +2056,12 @@ packages: react: ^16.0.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 + react-toastify@10.0.6: + resolution: {integrity: sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==} + peerDependencies: + react: '>=18' + react-dom: '>=18' + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -3920,7 +3929,7 @@ snapshots: debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.1 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.15.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.15.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.15.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.2.1 @@ -3933,7 +3942,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@8.15.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.15.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@8.15.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: @@ -3955,7 +3964,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.15.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.15.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.15.0(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -4964,6 +4973,12 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + react-toastify@10.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + clsx: 2.1.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react@18.3.1: dependencies: loose-envify: 1.4.0 diff --git a/app/client/public/images/LANDVER_BLACK.svg b/app/client/public/images/LANDVER_BLACK.svg new file mode 100644 index 00000000..6f6ef3b2 --- /dev/null +++ b/app/client/public/images/LANDVER_BLACK.svg @@ -0,0 +1,318 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/client/src/app/layout.tsx b/app/client/src/app/layout.tsx index 892f7433..92e624fe 100644 --- a/app/client/src/app/layout.tsx +++ b/app/client/src/app/layout.tsx @@ -1,5 +1,4 @@ import type { Metadata } from "next"; -//import localFont from "next/font/local"; import "./globals.css"; import { Providers } from "./Providers"; @@ -9,10 +8,39 @@ const manrope = Manrope({ }); export const metadata: Metadata = { - title: "Landver Application", - description: "Onchain Land Management", + title: "Landver Application | Onchain Land Management", + description: + "Landver is a blockchain-powered land management platform offering secure and transparent land registration and ownership verification.", + icons: { + icon: "/images/LANDVER_BLACK.svg", + apple: "/images/LANDVER_BLACK.svg", + }, + openGraph: { + title: "Landver Application", + description: + "Experience next-generation on-chain land registration with Landver. Ensure secure, immutable, and transparent land records.", + url: "https://www.demo.landver.net", + type: "website", + images: [ + { + url: "/images/landver-og-image.jpg", // Replace with our Open Graph image URL + width: 1200, + height: 630, + alt: "Landver - Onchain Land Management", + }, + ], + }, + twitter: { + card: "summary_large_image", + site: "@landver0", + title: "Landver Application", + description: + "Discover Landver, the ultimate blockchain solution for land registration and ownership verification.", + images: ["/images/landver-og-image.jpg"], // Replace with our image URL + }, }; + export default function RootLayout({ children, }: Readonly<{ @@ -20,6 +48,9 @@ export default function RootLayout({ }>) { return ( + + + diff --git a/app/client/src/app/page.tsx b/app/client/src/app/page.tsx index 0c0f019e..6c4630eb 100644 --- a/app/client/src/app/page.tsx +++ b/app/client/src/app/page.tsx @@ -1,13 +1,13 @@ -"use client"; - +'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 Image from 'next/image' +import { Button } from "@/components/Button/Button"; +import Image from "next/image"; import { useLoginStore } from "@/store/loginStore"; +import { LandPlot, ShieldCheck, Wallet, ArrowRight } from "lucide-react"; const Home = () => { const loginStore = useLoginStore(); @@ -27,84 +27,151 @@ const Home = () => { return; } - const allowedUserTypes = ["owner", "inspector"] - // this is just in case of mispellings on select options value, to help future devs when make changes here on the userType select - if (!allowedUserTypes.includes(userType)) { - setError("Not allowed user type."); + const allowedUserTypes = ["owner", "inspector"]; + if (!allowedUserTypes.includes(userType)) { + setError("Not allowed user type."); return; } - window.localStorage.setItem("user-type", userType) + window.localStorage.setItem("user-type", userType); loginStore.setUserType(userType); router.push("/dashboard"); }; - return ( - -
- landver logo -

Land Registry

+ const UserTypeCard = ({ + type, + icon: Icon, + title, + description, + }: { + type: "owner" | "inspector"; + icon: React.ElementType; + title: string; + description: string; + }) => ( +
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" + } + `} + > +
+ +

{title}

+
+

{description}

+
+ ); - {status === "connected" ? ( -
-

- Connected as:{" "} - - {address?.slice(0, 6)}...{address?.slice(-4)} - + return ( +

+
+ {/* Left Side - Descriptive Section */} +
+ landver logo +

Land Registry Protocol

+

+ Secure, transparent, and efficient land registration powered by + blockchain technology.

-
-

Select User Type

-
- - +
+
+ + Immutable Land Records +
+
+ + Verified Ownership Verification
+
+
- {error &&

{error}

} + {/* Right Side - Connection & User Type */} +
+ {status !== "connected" ? ( +
+ +

Connect Your Wallet

+

+ Connect a supported wallet to access Land Registry +

+ - - -
- ) : ( - <> - + {isModalOpen && ( + +
+

+ Connect Your Wallet +

+ +
+ + )} +
+ ) : ( +
+
+

Connected Wallet:

+

+ {address?.slice(0, 6)}...{address?.slice(-4)} +

+
+ +

+ Select Your Role +

- {isModalOpen && ( - -
-

Connect Your Wallet

- +
+ +
- + + {error && ( +

{error}

+ )} + + + )} - - )} +
+
); }; -export default Home; +export default Home; \ No newline at end of file diff --git a/app/client/src/components/WalletConnectModal.tsx b/app/client/src/components/WalletConnectModal.tsx index 0684723c..4d181110 100644 --- a/app/client/src/components/WalletConnectModal.tsx +++ b/app/client/src/components/WalletConnectModal.tsx @@ -6,6 +6,8 @@ import { useRouter } from "next/navigation"; // import FadeLoader from "react-spinners/FadeLoader"; import { IoMdClose } from "react-icons/io"; import Image from "next/image"; +import { ToastContainer, toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; const walletIdToName = new Map([ ["argentX", "Argent X"], @@ -15,7 +17,7 @@ const walletIdToName = new Map([ ]); const walletIcons : { - "braavos": string, + "braavos": string, "argentX": string, "argentWebWallet": string, "argentMobile": string, @@ -36,15 +38,29 @@ export function WalletConnectorModal({setShowWalletsModal}:{ setShowWalletsModal async function connect(connector: Connector) { try { await connectAsync({ connector }); - // router.push("/dashboard") if(setShowWalletsModal) setShowWalletsModal(false) - } catch (error) { - console.log(error); + } catch (error: unknown) { + // Create user-friendly error message + 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("not installed")) { + 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."; + } + } + + // Show toast instead of alert + toast.error(errorMessage); + console.error("Wallet connection error:", error); } } return (
+ {/* { connecting && (
diff --git a/app/client/src/views/client/Dashboard.tsx b/app/client/src/views/client/Dashboard.tsx index 1223fce8..80e5c561 100644 --- a/app/client/src/views/client/Dashboard.tsx +++ b/app/client/src/views/client/Dashboard.tsx @@ -148,7 +148,7 @@ export function DashboardClientView() {
- +