From 0b769d75f07df29978baf3deed1915b3780a9c1a Mon Sep 17 00:00:00 2001
From: Solomon Emmanuel <soulex04292003@gmail.com>
Date: Fri, 13 Dec 2024 17:00:53 +0100
Subject: [PATCH] fix: modal content and error messages

---
 app/client/src/components/Connector.tsx       | 42 +++++++++++++++----
 app/client/src/components/Modal/Modal.tsx     |  4 +-
 .../src/components/WalletConnectModal.tsx     |  4 +-
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/app/client/src/components/Connector.tsx b/app/client/src/components/Connector.tsx
index d0a54cba..c15db06d 100644
--- a/app/client/src/components/Connector.tsx
+++ b/app/client/src/components/Connector.tsx
@@ -6,6 +6,7 @@ import { WalletConnectorModal } from "@/components/WalletConnectModal"
 
 
 import type { WalletConnectorProps } from "@/types/interfaces";
+import { Check } from "lucide-react";
 
 
 export default function WalletConnector({
@@ -25,13 +26,40 @@ export default function WalletConnector({
   return (
     <div>
       {status === "disconnected" && (
-        <Button
-          onClick={() => setShowModal(true)}
-          classname="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700"
-          // className="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2"
-        >
-          Connect Wallet Securely
-        </Button>
+        <div className="  bg-gray-100" >
+  <div className="bg-white rounded-lg shadow-lg p-8 max-w-lg text-center ">
+    <h2 className="text-xl font-semibold text-gray-900 mb-6">
+      A Secure Platform for Land Registration, Inspection, and Validation on Starknet
+    </h2>
+    <ul className="text-left space-y-4 mb-6">
+      <li className="flex items-start">
+        <Check className="text-purple-600 mt-1 mr-2" />
+        <span className="text-gray-700">
+          Effortless land registration with unique property IDs.
+        </span>
+      </li>
+      <li className="flex items-start">
+        <Check className="text-purple-600 mt-1 mr-2" />
+        <span className="text-gray-700">
+          Streamlined land inspection and verification for trusted records.
+        </span>
+      </li>
+      <li className="flex items-start">
+        <Check className="text-purple-600 mt-1 mr-2" />
+        <span className="text-gray-700">
+          Immutable, blockchain security for ownership and transactions.
+        </span>
+      </li>
+    </ul>
+    <Button
+      onClick={() => setShowModal(true)}
+      classname="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700"
+    >
+      Connect Wallet Securely
+    </Button>
+  </div>
+</div>
+
       )}
 
       {status === "connected" && (
diff --git a/app/client/src/components/Modal/Modal.tsx b/app/client/src/components/Modal/Modal.tsx
index 177ce599..498b2f70 100644
--- a/app/client/src/components/Modal/Modal.tsx
+++ b/app/client/src/components/Modal/Modal.tsx
@@ -18,10 +18,10 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
 
   return (
     <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
+      className="fixed inset-0 bg-black bg-opacity-50 flex  justify-center items-center z-50"
       onClick={handleBackgroundClick}
     >
-      <div className="relative bg-white rounded-lg shadow-lg w-full max-w-md p-6">
+      <div className="relative bg-white rounded-lg shadow-lg w-full  max-w-md p-6">
         {/* Close Button */}
         <button
           className="absolute top-4 right-4 text-gray-500 hover:text-gray-800"
diff --git a/app/client/src/components/WalletConnectModal.tsx b/app/client/src/components/WalletConnectModal.tsx
index 4d181110..e251ebe2 100644
--- a/app/client/src/components/WalletConnectModal.tsx
+++ b/app/client/src/components/WalletConnectModal.tsx
@@ -45,14 +45,14 @@ export function WalletConnectorModal({setShowWalletsModal}:{ setShowWalletsModal
       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")) {
+        } 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.";
         }
       }
 
-      // Show toast instead of alert
+    
       toast.error(errorMessage);
       console.error("Wallet connection error:", error);
     }