From 360bce23dc2fd01e61ba05f536b4a83cbb8687e7 Mon Sep 17 00:00:00 2001
From: 0xExp-po <153439271+0xExp-po@users.noreply.github.com>
Date: Sat, 21 Sep 2024 07:36:24 +0900
Subject: [PATCH] Dapp add devote (#56)

---
 dapp/.env.example                             |   4 +
 dapp/package.json                             |   2 +
 dapp/src/components/DonateModal.astro         | 238 ++++++++++++++++++
 dapp/src/components/ProjectInfo.astro         |  91 +++++--
 dapp/src/components/RegisterProject.astro     | 147 ++++++++++-
 dapp/src/components/utils/ModalInput.astro    |  13 +-
 dapp/src/components/utils/PrimaryButton.astro |   2 +-
 dapp/src/contracts/soroban_domain_sdk.ts      |  21 ++
 dapp/src/service/PaymentService.ts            |  66 +++++
 .../service/SorobanDomainContractService.ts   |  31 +++
 dapp/src/styles/global.css                    |   7 +
 11 files changed, 584 insertions(+), 38 deletions(-)
 create mode 100644 dapp/src/components/DonateModal.astro
 create mode 100644 dapp/src/contracts/soroban_domain_sdk.ts
 create mode 100644 dapp/src/service/PaymentService.ts
 create mode 100644 dapp/src/service/SorobanDomainContractService.ts

diff --git a/dapp/.env.example b/dapp/.env.example
index 847effa..9b064f6 100644
--- a/dapp/.env.example
+++ b/dapp/.env.example
@@ -4,6 +4,10 @@ PUBLIC_SOROBAN_RPC_URL="https://soroban-testnet.stellar.org:443"
 
 PUBLIC_TANSU_CONTRACT_ID="CCYM5OC6RTMEUHRK2BRU5YX4G4O745DPLPU4EXVTRCUN7JRJJWXEEXAB"
 PUBLIC_SOROBAN_DOMAIN_CONTRACT_ID="CADDH3WW3EHDEUY4HIQUAZHRPCFQFL4MZIEZBFUIIHJAXZNLQWVC6DV4"
+PUBLIC_TANSU_OWNER_ID="GCMFQP44AR32S7IRIUKNOEJW5PNWOCLRHLQWSHUCSV4QZOMUXZOVA7Q2"
+
+PUBLIC_DEFAULT_FEE=100
+PUBLIC_DEFAULT_TIMEOUT=30
 
 SOROBAN_ACCOUNT="alice"
 SOROBAN_NETWORK="testnet"
diff --git a/dapp/package.json b/dapp/package.json
index 006ddbb..97e38da 100644
--- a/dapp/package.json
+++ b/dapp/package.json
@@ -3,8 +3,10 @@
     "@astrojs/check": "^0.9.3",
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "^5.1.0",
+    "@creit.tech/sorobandomains-sdk": "^0.1.2",
     "@creit.tech/stellar-wallets-kit": "^1.0.0",
     "@nanostores/react": "^0.7.3",
+    "@stellar/stellar-sdk": "^12.3.0",
     "astro": "^4.2.4",
     "install": "^0.13.0",
     "js-sha3": "^0.9.3",
diff --git a/dapp/src/components/DonateModal.astro b/dapp/src/components/DonateModal.astro
new file mode 100644
index 0000000..f312063
--- /dev/null
+++ b/dapp/src/components/DonateModal.astro
@@ -0,0 +1,238 @@
+---
+import Loading from "./utils/Loading.astro";
+
+---
+
+<div
+  id="donate-modal"
+  class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 hidden"
+>
+  <div
+    class="bg-white px-4 sm:px-8 md:px-12 py-8 rounded-2xl relative w-[530px] max-w-[90%]"
+  >
+    <button
+      id="close-donate-modal"
+      class="absolute top-3 right-3 text-zinc-600 hover:text-zinc-600"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
+    
+    <div class="flex flex-col space-y-3 sm:space-y-6 md:space-y-8">
+      <div>
+        <h2 id="donate-modal-title" class="text-xl sm:text-2xl font-bold bg-lime py-1 sm:py-2 px-2 rounded-xl w-min">Contribute</h2>
+      </div>
+      
+      <div class="flex flex-col gap-3 w-full">
+        <div class="flex w-full">
+          <button class="amount-button flex-1 bg-zinc-800 border border-zinc-800 text-lg sm:text-xl md:text-2xl font-semibold text-white py-1 rounded-l-lg">10 XLM</button>
+          <button class="amount-button flex-1 bg-zinc-200 border border-zinc-300 text-lg sm:text-xl md:text-2xl font-semibold text-zinc-600 py-1">100 XLM</button>
+          <button class="amount-button flex-1 bg-zinc-200 border border-zinc-300 text-lg sm:text-xl md:text-2xl font-semibold text-zinc-600 py-1 rounded-r-lg">Other</button>
+        </div>
+        <div class="w-full h-[30px] sm:h-[38px]">
+          <div id="amount-input-container" class="hidden items-center">
+            <div class="flex items-center relative">
+              <span class="absolute left-2 sm:left-3 sm:py-0.5 pr-1 border-r-2 border-zinc-600">XLM</span>
+              <input
+                id="amount-input"
+                type="number"
+                class="w-[120px] sm:w-40 flex-1 border rounded-lg pl-12 sm:pl-14 pr-3 py-0.5 sm:py-1 text-base sm:text-lg text-right"
+                value="10"
+              />
+            </div>
+            <div class="flex w-full justify-center items-center">
+              <p class="text-sm sm:text-base">Minimum amount: 1 XLM</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      
+      <textarea id="donate-message" placeholder="Say something nice..." rows="4" class="w-full border border-zinc-400 bg-zinc-200 rounded-xl p-2 resize-none focus:outline-none"></textarea>
+      
+      <div class="flex items-center">
+        <span class="mr-2 flex items-center">
+          Platform tip:
+          <span class="relative group ml-1">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24">
+              <rect width="24" height="24" rx="2" fill="#3b82f6" />
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12.5 16h-1v-4h-1m1-4h.01M12 8v.01" stroke="white" fill="none" />
+            </svg>
+            <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block w-max max-w-[330px] sm:max-w-none">
+              <div id="donate-tip-popup" class="bg-zinc-800 text-white text-sm py-2 px-4 rounded-lg shadow-lg relative">
+                Help us run the Tansu platform sustainability
+                <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-zinc-800"></div>
+              </div>
+            </div>
+          </span>
+        </span>
+        <div class="flex items-center relative">
+          <span class="absolute left-2 sm:left-3 sm:py-0.5 pr-1 border-r-2 border-zinc-600">XLM</span>
+          <input 
+            id="tip-amount-input" 
+            type="number" 
+            class="w-28 sm:w-36 flex-1 border rounded-lg pl-12 sm:pl-14 pr-3 py-0.5 sm:py-1 text-sm sm:text-base text-right" 
+            value=0
+          />
+        </div>
+      </div>
+      
+      <div class="flex justify-center">
+        <button
+          id="contribute-button"
+          class="bg-zinc-800 text-white text-base sm:text-lg py-2 rounded-xl px-8 sm:px-12 w-max"
+        >
+          <span id="contribute-text">Contribute to <span id="project-name"></span>.xlm</span>
+          <div id="contribute-loader" class="hidden">
+            <Loading theme="dark" />
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+import { sendXLM } from "../service/PaymentService";
+import { getAddressFromDomain } from "../service/SorobanDomainContractService";
+
+  document.addEventListener("astro:page-load", () => {
+    const amountButtons = document.querySelectorAll('.amount-button');
+    const amountInputContainer = document.getElementById('amount-input-container');
+    const amountInput = document.getElementById('amount-input') as HTMLInputElement;
+    const platformTipInput = document.getElementById('tip-amount-input') as HTMLInputElement;
+    let selectedAmount = 10; // Default amount
+
+    amountButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        amountButtons.forEach(btn => btn.classList.remove('bg-zinc-800', 'border-zinc-800', 'text-white'));
+        amountButtons.forEach(btn => btn.classList.add('bg-zinc-200', 'border-zinc-300', 'text-zinc-600'));
+        button.classList.remove('bg-zinc-200','border-zinc-300', 'text-zinc-600');
+        button.classList.add('bg-zinc-800','border-zinc-800', 'text-white');
+        
+        const buttonText = button.textContent?.trim();
+        if (buttonText === 'Other') {
+          amountInputContainer?.classList.remove('hidden');
+          amountInputContainer?.classList.add('flex');
+          selectedAmount = parseFloat(amountInput.value) || 0;
+        } else {
+          amountInputContainer?.classList.remove('flex');
+          amountInputContainer?.classList.add('hidden');
+          selectedAmount = buttonText === '100 XLM' ? 100 : 10;
+        }
+      });
+    });
+
+    const modal = document.getElementById('donate-modal');
+    const closeButton = document.getElementById('close-donate-modal');
+    const modalContent = modal?.querySelector('div');
+
+    if (closeButton && modal) {
+      closeButton.addEventListener('click', () => {
+        modal.classList.add('hidden');
+      });
+
+      // Add click event listener to the modal
+      modal.addEventListener('click', (event) => {
+        if (event.target === modal) {
+          modal.classList.add('hidden');
+        }
+      });
+
+      // Prevent closing when clicking inside the modal content
+      modalContent?.addEventListener('click', (event) => {
+        event.stopPropagation();
+      });
+    }
+
+    const contributeButton = document.getElementById('contribute-button');
+    const contributeText = document.getElementById('contribute-text');
+    const contributeLoader = document.getElementById('contribute-loader');
+
+    if (contributeButton && contributeText && contributeLoader) {
+      contributeButton.addEventListener('click', async () => {
+        // Show loader and hide text
+        contributeText.classList.add('hidden');
+        contributeLoader.classList.remove('hidden');
+
+        const amount = amountInputContainer?.classList.contains('flex') 
+          ? parseFloat(amountInput.value) || 0 
+          : selectedAmount;
+        const tipAmount = parseFloat(platformTipInput.value) || 0;
+        
+        if (amount < 1) {
+          amountInput.style.border = '2px solid red';
+          const minAmountText = document.querySelector('#amount-input-container p') as HTMLElement;
+          if (minAmountText) {
+            minAmountText.style.color = 'red';
+          }
+          setTimeout(() => {
+            amountInput.style.border = '';
+            if (minAmountText) {
+              minAmountText.style.color = '';
+            }
+          }, 2000);
+          // Hide loader and show text again
+          contributeLoader?.classList.add('hidden');
+          contributeText?.classList.remove('hidden');
+          return;
+        }
+        
+        const donateMessage = (document.getElementById('donate-message') as HTMLTextAreaElement).value;
+
+        try {
+          console.log("fetching domain Info...");
+          const domainInfo = await getAddressFromDomain('tansu');
+          if (domainInfo && !domainInfo.error && typeof domainInfo.message === 'object' && 'owner' in domainInfo.message.value) {
+            const domainOwnerAddress = domainInfo.message.value.owner;
+            const payment = await sendXLM(amount.toString(), domainOwnerAddress as string, tipAmount.toString(), donateMessage);
+            if (payment) {
+              alert("You successfully donated.");
+              if (modal) {
+                modal.classList.add('hidden');
+              }
+            } else {
+              alert("Donation failed.");
+            }
+          } else {
+            alert("Cannot read domain information.");
+          }
+        } catch (error) {
+          console.error("Error during contribution:", error);
+          alert("An error occurred during the contribution process.");
+        } finally {
+          // Hide loader and show text again
+          contributeLoader?.classList.add('hidden');
+          contributeText?.classList.remove('hidden');
+        }
+      });
+    }
+    
+      // Function to allow only positive integers
+      const allowOnlyPositiveIntegers = (event: KeyboardEvent) => {
+        if (!/[0-9]/.test(event.key) && event.key !== 'Backspace' && event.key !== 'Delete' && event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+          event.preventDefault();
+        }
+      };
+    
+      // Add event listeners to both input fields
+      [amountInput, platformTipInput].forEach(input => {
+        input.addEventListener('keydown', allowOnlyPositiveIntegers);
+        input.addEventListener('input', () => {
+          input.value = input.value.replace(/[^0-9]/g, '');
+        });
+      });
+  });
+</script>
diff --git a/dapp/src/components/ProjectInfo.astro b/dapp/src/components/ProjectInfo.astro
index 4759ae1..cf4dac5 100644
--- a/dapp/src/components/ProjectInfo.astro
+++ b/dapp/src/components/ProjectInfo.astro
@@ -5,6 +5,7 @@ import Loading from "./utils/Loading.astro";
 import CommitHistory from "./CommitHistory.jsx";
 import PrimaryButton from "./utils/PrimaryButton.astro";
 import ModalInput from "./utils/ModalInput.astro";
+import DonateModal from "./DonateModal.astro";
 ---
 
 <div class="relative flex flex-col items-center md:flex-row justify-between">
@@ -13,6 +14,14 @@ import ModalInput from "./utils/ModalInput.astro";
     description="Details about the project"
     id="project-name-topic"
   />
+  <div id="open-donate-modal-button" class="mb-1.5 mt-12 pr-3">
+    <PrimaryButton
+      wrapId="wrap-donate-modal"
+      dataAttr="data-donate-modal"
+      ariaControls="donate-modal"
+      buttonText="Support"
+    />
+  </div>
   <div id="open-update-config-modal-button" class="mb-1.5 mt-12 pr-3 hidden">
     <PrimaryButton
       wrapId="wrap-update-config"
@@ -29,32 +38,35 @@ import ModalInput from "./utils/ModalInput.astro";
   <div
     class="row items-center py-8 sm:py-12 px-4 sm:px-8 md:px-20 w-full md:py-10"
   >
-    <div class="space-y-6 md:w-full">
+    <div class="space-y-6 md:w-full sm:pl-4 md:pl-0">
       <div id="project-name" class="flex items-end space-x-2">
         <p id="project-name-value" class="text-2xl sm:text-4xl font-bold"></p>
       </div>
 
-      <div class="flex flex-col md:flex-row gap-6">
+      <div class="flex flex-col md:flex-row gap-6 lg:gap-12">
         <img
           id="project-thumbnail"
           src="/fallback-image.jpg"
           alt="Project Thumbnail"
-          class="w-full md:w-[40%] object-cover rounded-lg"
+          class="w-full md:w-[40%] max-w-40 sm:max-w-56 md:max-w-80 object-cover rounded-lg"
         />
-        <div class="flex-1 pt-2">
-          <p id="project-description" class="flex-1 text-base sm:text-lg">
-            description
-          </p>
+
+        <div class="flex-1">
+          <h3 class="text-base sm:text-lg md:text-2xl font-semibold">
+            Description
+          </h3>
+          <p id="project-description" class="flex-1 text-base sm:text-lg"></p>
         </div>
       </div>
 
-      <div class="grid grid-cols-1 sm:grid-cols-2">
-        <div id="project-maintainers" class="space-y-1">
+      <div class="flex flex-col md:flex-row gap-6 lg:gap-12">
+        <div id="project-maintainers" class="space-y-1 w-full md:w-[40%] md:max-w-80">
           <h3 class="text-base sm:text-lg md:text-2xl font-semibold">
             Maintainers
           </h3>
           <ul class="list-disc list-outside pl-5"></ul>
         </div>
+
         <div id="project-organization" class="space-y-1">
           <h3 class="text-base sm:text-lg md:text-2xl font-semibold">
             Organization
@@ -63,8 +75,8 @@ import ModalInput from "./utils/ModalInput.astro";
         </div>
       </div>
 
-      <div class="grid grid-cols-1 sm:grid-cols-2">
-        <div id="project-links">
+      <div class="flex flex-col md:flex-row gap-6 lg:gap-12">
+        <div id="project-links" class="w-full md:w-[40%] md:max-w-80">
           <div class="hidden sm:block space-y-2">
             <div class="flex flex-col">
               <h3 class="text-base sm:text-lg md:text-2xl font-semibold mb-2">
@@ -85,7 +97,7 @@ import ModalInput from "./utils/ModalInput.astro";
           <div id="links" class="sm:hidden mb-4 flex gap-2 items-center"></div>
         </div>
 
-        <div>
+        <div class="md:w-[calc(60%-24px)]">
           <div class="flex flex-col">
             <h3 class="text-base sm:text-lg md:text-2xl font-semibold mb-2">
               Syncronize status
@@ -212,6 +224,8 @@ import ModalInput from "./utils/ModalInput.astro";
   </div>
 </Modal>
 
+<DonateModal />
+
 <script>
   import { loadedPublicKey } from "./stellar-wallets-kit";
   import { updateConfig } from "../service/WriteContractService";
@@ -221,6 +235,7 @@ import ModalInput from "./utils/ModalInput.astro";
     loadConfigData,
     loadProjectInfo,
     loadProjectLatestSha,
+    loadProjectName,
     setProject,
   } from "../service/StateService";
   import { projectInfoLoaded } from "../utils/store.js";
@@ -343,8 +358,8 @@ import ModalInput from "./utils/ModalInput.astro";
           "project-organization-name",
         );
         if (organizationElement) {
-          if (configData && configData.organizationName) {
-            organizationElement.textContent = configData.organizationName;
+          if (configData) {
+            organizationElement.textContent = configData.organizationName || "Not available";
           }
         }
 
@@ -369,6 +384,13 @@ import ModalInput from "./utils/ModalInput.astro";
                 "github",
               );
             }
+          } else {
+            addLinkButton(
+              officialLinks,
+              "GitHub",
+              projectInfo.config.url,
+              "github",
+            );
           }
         }
 
@@ -443,6 +465,19 @@ import ModalInput from "./utils/ModalInput.astro";
               githubLink.appendChild(websiteIcon);
               links.appendChild(githubLink);
             }
+          } else {
+            const githubLink = document.createElement("a");
+            githubLink.href = projectInfo.config.url;
+            githubLink.target = "_blank";
+            githubLink.rel = "noopener noreferrer";
+
+            const websiteIcon = document.createElement("img");
+            websiteIcon.src = "/icons/github.svg";
+            websiteIcon.alt = "Website";
+            websiteIcon.className = "w-5 h-5";
+
+            githubLink.appendChild(websiteIcon);
+            links.appendChild(githubLink);
           }
 
           if (configData && configData.socialLinks) {
@@ -625,6 +660,21 @@ import ModalInput from "./utils/ModalInput.astro";
         if (modalConfigHash) {
           modalConfigHash.value = projectInfo.config.hash;
         }
+
+        //Support modal content
+        const loadedName =  loadProjectName();
+        if (loadedName) {
+          const projectNameSpan = document.getElementById('contribute-text');
+          if (projectNameSpan) {
+            projectNameSpan.innerHTML = `Contribute to <span id="project-name">${loadedName}</span>.xlm`;
+          }
+          
+          const donateTipPopup = document.getElementById('donate-tip-popup');
+          if (donateTipPopup) {
+            donateTipPopup.innerHTML = `Help us run the ${loadedName} platform sustainability
+                <div class="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-zinc-800"></div>`;
+          }
+        }
       }
     }
 
@@ -710,6 +760,17 @@ import ModalInput from "./utils/ModalInput.astro";
         }
       });
     }
+    
+    const supportButton = document.querySelector("[data-donate-modal]");
+    const donateModal = document.getElementById("donate-modal");
+
+    if (supportButton && donateModal) {
+      supportButton.addEventListener("click", () => {
+        donateModal.classList.remove("hidden");
+        donateModal.classList.add("flex");
+      });
+    }
+
 
     const viewCommitHistory = document.getElementById("view-commit-history");
     const jumpToLatestCommit = document.getElementById("jump-to-latest-commit");
@@ -801,7 +862,7 @@ import ModalInput from "./utils/ModalInput.astro";
       button.target = "_blank";
       button.rel = "noopener noreferrer";
       button.className =
-        "flex items-center space-x-1 bg-zinc-200 hover:bg-zinc-300 rounded-lg px-3 py-1 text-sm";
+        "flex items-center space-x-1 bg-zinc-300 hover:bg-zinc-400 rounded-lg px-3 py-1 text-sm";
 
       const icon = document.createElement("span");
       icon.innerHTML = getIconSVG(iconName);
diff --git a/dapp/src/components/RegisterProject.astro b/dapp/src/components/RegisterProject.astro
index 52dcc71..8259b20 100644
--- a/dapp/src/components/RegisterProject.astro
+++ b/dapp/src/components/RegisterProject.astro
@@ -9,11 +9,11 @@ import ModalInput from "./utils/ModalInput.astro";
 </div>
 
 <div
-  class="relative flex flex-col items-center md:flex-row my-6 bg-zinc-100 rounded-[45px]"
+  class="relative flex flex-col items-center lg:flex-row my-6 bg-zinc-100 rounded-[45px]"
 >
-  <div class="row items-center py-12 px-4 md:px-20 md:w-8/12 md:py-10">
-    <div class="space-y-8 md:w-full">
-      <label class="block mb-2 text-base font-medium text-black">
+  <div class="row items-center py-12 px-4 sm:px-12 md:px-20 md:py-10 w-full lg:w-8/12 max-w-[680px] lg:max-w-none">
+    <div class="space-y-8 lg:w-full">
+      <label class="block mb-2 text-base font-medium text-black relative">
         Project
         <ModalInput
           id="project_name"
@@ -24,8 +24,9 @@ import ModalInput from "./utils/ModalInput.astro";
           maxlength="15"
           onkeyup="this.value=this.value.replace(/[^a-z]/g,'');"
         />
+        <span id="project_name_error" class="text-orange-500 hidden absolute left-0 top-full text-sm">Invalid project name</span>
       </label>
-      <label class="block mb-2 text-base font-medium text-black">
+      <label class="block mb-2 text-base font-medium text-black relative">
         Maintainers
         <ModalInput
           id="maintainers"
@@ -33,9 +34,9 @@ import ModalInput from "./utils/ModalInput.astro";
           placeholder="List of maintainers' addresses as G...,G..."
           required
         />
+        <span id="maintainers_error" class="text-orange-500 hidden absolute left-0 top-full text-sm">Invalid maintainers</span>
       </label>
-
-      <label class="block mb-2 text-base font-medium text-black">
+      <label class="block mb-2 text-base font-medium text-black relative">
         GitHub repository URL
         <ModalInput
           id="config_url"
@@ -43,9 +44,9 @@ import ModalInput from "./utils/ModalInput.astro";
           placeholder="GitHub repository URL"
           required
         />
+        <span id="config_url_error" class="text-orange-500 hidden absolute left-0 top-full text-sm">Invalid GitHub URL</span>
       </label>
-
-      <label class="block mb-2 text-base font-medium text-black">
+      <label class="block mb-2 text-base font-medium text-black relative">
         Information file hash
         <ModalInput
           id="config_hash"
@@ -55,6 +56,7 @@ import ModalInput from "./utils/ModalInput.astro";
           minlength="64"
           maxlength="64"
         />
+        <span id="config_hash_error" class="text-orange-500 hidden absolute left-0 top-full text-sm">Invalid file hash</span>
       </label>
 
       <div id="wrap-register-button">
@@ -76,11 +78,16 @@ import ModalInput from "./utils/ModalInput.astro";
 </div>
 
 <script>
+  import { getProject, getProjectFromName, getProjectHash } from "../service/ReadContractService";
+  import { initializeProjectState, loadProjectName, setConfigData, setProject, setProjectLatestSha, setProjectRepoInfo } from "../service/StateService";
   import { registerProject } from "../service/WriteContractService";
   import { navigate } from "astro:transitions/client";
+  import { getAuthorRepo } from "../utils/editLinkFunctions";
+  import { fetchTOMLFromConfigUrl } from "../service/GithubService";
   const SOROBAN_DOMAIN_CONTRACT_ID = `${import.meta.env.PUBLIC_SOROBAN_DOMAIN_CONTRACT_ID}`;
 
   document.addEventListener("astro:page-load", () => {
+    initializeProjectState();
     const project_name = document.getElementById(
       "project_name",
     ) as HTMLInputElement;
@@ -106,11 +113,73 @@ import ModalInput from "./utils/ModalInput.astro";
       "[data-register-project]",
     ) as HTMLButtonElement;
 
+    project_name.value = loadProjectName() || "";
+
+    const project_name_error = document.getElementById("project_name_error") as HTMLSpanElement;
+    const maintainers_error = document.getElementById("maintainers_error") as HTMLSpanElement;
+    const config_url_error = document.getElementById("config_url_error") as HTMLSpanElement;
+    const config_hash_error = document.getElementById("config_hash_error") as HTMLSpanElement;
+
+    function showError(input: HTMLInputElement, errorSpan: HTMLSpanElement, message: string) {
+      errorSpan.textContent = message;
+      errorSpan.classList.remove("hidden");
+      input.style.border = "2px solid red";
+      setTimeout(() => {
+        errorSpan.classList.add("hidden");
+        input.style.border = "";
+      }, 5000);
+    }
+
+    function isValidGithubUrl(url: string) {
+      return /^https:\/\/github\.com\/[^\/]+\/[^\/]+$/.test(url);
+    }
+
     if (button) {
       button.addEventListener("click", async () => {
         wrap_loader.style.display = "block";
         wrap_button.style.display = "none";
 
+        let isValid = true;
+
+        // Check project name
+        const project = await getProjectFromName(project_name.value);
+        if (project && project.name && project.name === project_name.value) {
+          isValid = false;
+          showError(project_name, project_name_error, "Project name already registered");
+        }
+
+        // Check maintainers
+        if (!maintainers.value.trim()) {
+          isValid = false;
+          showError(maintainers, maintainers_error, "Maintainers cannot be empty");
+        } else {
+          const addressList = maintainers.value.split(',').map(addr => addr.trim());
+          const invalidAddresses = addressList.filter(addr => !addr.startsWith('G') || addr.length !== 56);
+          if (invalidAddresses.length > 0) {
+            isValid = false;
+            showError(maintainers, maintainers_error, "Invalid maintainer address(es). Each address should start with 'G' and be 56 characters long.");
+          }
+        }
+
+        // Check GitHub URL
+        if (!isValidGithubUrl(config_url.value)) {
+          isValid = false;
+          showError(config_url, config_url_error, "Invalid GitHub repository URL");
+        }
+
+        // Check file hash
+        if (config_hash.value.length !== 64) {
+          isValid = false;
+          showError(config_hash, config_hash_error, "File hash must be 64 characters long");
+        }
+
+        if (!isValid) {
+          wrap_loader.style.display = "none";
+          wrap_button.style.display = "block";
+          return;
+        }
+
+        // If all checks pass, proceed with registration
         const register_status = await registerProject(
           project_name.value,
           maintainers.value,
@@ -118,13 +187,69 @@ import ModalInput from "./utils/ModalInput.astro";
           config_hash.value,
           SOROBAN_DOMAIN_CONTRACT_ID,
         );
-
+        
         wrap_loader.style.display = "none";
         wrap_button.style.display = "block";
         if (!register_status) {
           alert("Project could not be registered! Please retry.");
         } else {
-          navigate("/project");
+          const project = await getProject();
+          if (project && project.name && project.config && project.maintainers) {
+            setProject(project);
+            const { username, repoName } = getAuthorRepo(project.config.url);
+            if (username && repoName) {
+              setProjectRepoInfo(username, repoName);
+            }
+            const tomlData = await fetchTOMLFromConfigUrl(project.config.url);
+            if (tomlData) {
+              const configData = {
+                projectName: project.name,
+                logoImageLink: tomlData.DOCUMENTATION?.ORG_LOGO || "",
+                thumbnailImageLink: tomlData.DOCUMENTATION?.ORG_THUMBNAIL || "",
+                description: tomlData.DOCUMENTATION?.ORG_DESCRIPTION || "",
+                companyName: tomlData.DOCUMENTATION?.ORG_NAME || "",
+                officials: {
+                  websiteLink: tomlData.DOCUMENTATION?.ORG_URL || "",
+                  githubLink: tomlData.DOCUMENTATION?.ORG_GITHUB || "",
+                },
+                socialLinks: {
+                  ...(tomlData.DOCUMENTATION?.ORG_TWITTER && {
+                    twitter: tomlData.DOCUMENTATION.ORG_TWITTER,
+                  }),
+                  ...(tomlData.DOCUMENTATION?.ORG_TELEGRAM && {
+                    telegram: tomlData.DOCUMENTATION.ORG_TELEGRAM,
+                  }),
+                  ...(tomlData.DOCUMENTATION?.ORG_DISCORD && {
+                    discord: tomlData.DOCUMENTATION.ORG_DISCORD,
+                  }),
+                  ...(tomlData.DOCUMENTATION?.ORG_INSTAGRAM && {
+                    instagram: tomlData.DOCUMENTATION.ORG_INSTAGRAM,
+                  }),
+                  ...(tomlData.DOCUMENTATION?.ORG_FACEBOOK && {
+                    facebook: tomlData.DOCUMENTATION.ORG_FACEBOOK,
+                  }),
+                  ...(tomlData.DOCUMENTATION?.ORG_REDDIT && {
+                    reddit: tomlData.DOCUMENTATION.ORG_REDDIT,
+                  }),
+                },
+                authorGithubNames: tomlData.PRINCIPALS?.map((p: { github: any; }) => p.github) || [],
+                maintainersAddresses: tomlData.ACCOUNTS || [],
+              };
+              setConfigData(configData);
+            } else {
+              setConfigData({});
+            }
+        
+            const latestSha = await getProjectHash();
+            if (
+              typeof latestSha === 'string' &&
+              latestSha.match(/^[a-f0-9]{40}$/)
+            ) {
+              setProjectLatestSha(latestSha);
+            } else setProjectLatestSha("");
+            
+            navigate("/project");
+          }
         }
       });
     }
diff --git a/dapp/src/components/utils/ModalInput.astro b/dapp/src/components/utils/ModalInput.astro
index 96b9c93..810e56c 100644
--- a/dapp/src/components/utils/ModalInput.astro
+++ b/dapp/src/components/utils/ModalInput.astro
@@ -1,15 +1,4 @@
 ---
-interface Props {
-  type?: string;
-  id: string;
-  name?: string;
-  placeholder?: string;
-  required?: boolean;
-  inputClass?: string;
-  minlength?: string;
-  maxlength?: string;
-}
-
 const {
   type = "text",
   id,
@@ -19,6 +8,7 @@ const {
   inputClass = "",
   minlength,
   maxlength,
+  onKeyUp,
   ...rest
 } = Astro.props;
 ---
@@ -32,5 +22,6 @@ const {
   required={required}
   minlength={minlength}
   maxlength={maxlength}
+  onkeyup={onKeyUp}
   {...rest}
 />
diff --git a/dapp/src/components/utils/PrimaryButton.astro b/dapp/src/components/utils/PrimaryButton.astro
index 0feb1d4..0a3db8d 100644
--- a/dapp/src/components/utils/PrimaryButton.astro
+++ b/dapp/src/components/utils/PrimaryButton.astro
@@ -21,7 +21,7 @@ const {
 <div id={wrapId}>
   <button
     id={buttonId}
-    class={`w-full px-5 py-4 sm:py-5 bg-zinc-900 rounded-[14px] justify-center gap-2.5 inline-flex ${buttonClass}`}
+    class={`w-full px-5 py-3 sm:py-4 bg-zinc-900 rounded-[14px] justify-center gap-2.5 inline-flex ${buttonClass}`}
     aria-controls={ariaControls}
     {...dataAttr && { [dataAttr]: "" }}
   >
diff --git a/dapp/src/contracts/soroban_domain_sdk.ts b/dapp/src/contracts/soroban_domain_sdk.ts
new file mode 100644
index 0000000..79c8a4b
--- /dev/null
+++ b/dapp/src/contracts/soroban_domain_sdk.ts
@@ -0,0 +1,21 @@
+import * as SDK from '@stellar/stellar-sdk';
+import { SorobanDomainsSDK } from '@creit.tech/sorobandomains-sdk';
+
+const rpcUrl = import.meta.env.PUBLIC_SOROBAN_RPC_URL;
+const networkPassphrase = import.meta.env.PUBLIC_SOROBAN_NETWORK_PASSPHRASE;
+const contractId = import.meta.env.PUBLIC_SOROBAN_DOMAIN_CONTRACT_ID;
+const defaultFee = import.meta.env.PUBLIC_DEFAULT_FEE;
+const defaultTimeout = import.meta.env.PUBLIC_DEFAULT_TIMEOUT;
+const simulationAccount = import.meta.env.PUBLIC_TANSU_OWNER_ID;
+
+const sdk: SorobanDomainsSDK = new SorobanDomainsSDK({
+  stellarSDK: SDK,
+  rpc: new SDK.SorobanRpc.Server(rpcUrl || 'https://soroban-testnet.stellar.org:443'),
+  network: (networkPassphrase as SDK.Networks) || SDK.Networks.TESTNET,
+  contractId: contractId || '',
+  defaultFee: defaultFee || '100',
+  defaultTimeout: parseInt(defaultTimeout || '30'),
+  simulationAccount: simulationAccount || '',
+});
+
+export default sdk;
\ No newline at end of file
diff --git a/dapp/src/service/PaymentService.ts b/dapp/src/service/PaymentService.ts
new file mode 100644
index 0000000..b24edce
--- /dev/null
+++ b/dapp/src/service/PaymentService.ts
@@ -0,0 +1,66 @@
+import { kit, loadedPublicKey } from "../components/stellar-wallets-kit";
+import * as StellarSdk from "@stellar/stellar-sdk";
+
+async function sendXLM(donateAmount: string, projectAddress: string, tipAmount: string, donateMessage: string): Promise<boolean> {
+  const senderPublicKey = loadedPublicKey();
+
+  const tansuAddress = import.meta.env.PUBLIC_TANSU_OWNER_ID;
+
+  if (!senderPublicKey) {
+    alert("Please connect your wallet first");
+    return false;
+  }
+
+  try {
+    // Fetch the sender's account details from the Stellar network
+    const server = new StellarSdk.Horizon.Server("https://horizon-testnet.stellar.org");
+    const account = await server.loadAccount(senderPublicKey);
+    
+    // Create the transaction
+    const transactionBuilder = new StellarSdk.TransactionBuilder(account, {
+      fee: StellarSdk.BASE_FEE,
+      networkPassphrase: StellarSdk.Networks.TESTNET,
+    })
+    .addOperation(StellarSdk.Operation.payment({
+      destination: projectAddress,
+      asset: StellarSdk.Asset.native(),
+      amount: donateAmount,
+    }))
+    .addMemo(StellarSdk.Memo.text(donateMessage));
+    
+    // Add tip operation only if tipAmount is not "0"
+    if (tipAmount !== "0") {
+      transactionBuilder.addOperation(StellarSdk.Operation.payment({
+        destination: tansuAddress,
+        asset: StellarSdk.Asset.native(),
+        amount: tipAmount,
+      }));
+    }
+
+    const transaction = transactionBuilder
+      .setTimeout(StellarSdk.TimeoutInfinite)
+      .build();
+
+      // Sign and send the transaction
+      const { signedTxXdr } = await kit.signTransaction(transaction.toXDR());
+      
+    try {
+      const result = await server.submitTransaction(
+        StellarSdk.TransactionBuilder.fromXDR(signedTxXdr, StellarSdk.Networks.TESTNET)
+      );
+      console.log("Transaction successful:", JSON.stringify(result, null, 2));
+      return true;
+    } catch (error) {
+      console.error("Error response from Stellar:", JSON.stringify(error, null, 2));
+      return false;
+    }
+    
+  } catch (error) {
+    console.error("Error sending XLM:", JSON.stringify(error, null, 2));
+    return false;
+  }
+}
+
+export {
+  sendXLM,
+};
diff --git a/dapp/src/service/SorobanDomainContractService.ts b/dapp/src/service/SorobanDomainContractService.ts
new file mode 100644
index 0000000..07634ea
--- /dev/null
+++ b/dapp/src/service/SorobanDomainContractService.ts
@@ -0,0 +1,31 @@
+import type { Record } from '@creit.tech/sorobandomains-sdk';
+import { Domain404Error } from '@creit.tech/sorobandomains-sdk';
+import sdk from '../contracts/soroban_domain_sdk';
+
+async function getAddressFromDomain (
+  domainName: string,
+) {
+  try {
+    const domainRecord: Record = await sdk.searchDomain({ domain: domainName });
+    return {
+      "error": false,
+      "message": domainRecord,
+    }
+  } catch (e) {
+    if (e instanceof Error && e.name === Domain404Error.name) {
+      return {
+        "error": true,
+        "message": "SDK error",
+      }
+    } else {
+      return {
+        "error": true,
+        "message": "Simulation error",
+      }
+    }
+  }
+}
+
+export {
+  getAddressFromDomain,
+}
\ No newline at end of file
diff --git a/dapp/src/styles/global.css b/dapp/src/styles/global.css
index f1a0142..f853748 100644
--- a/dapp/src/styles/global.css
+++ b/dapp/src/styles/global.css
@@ -34,3 +34,10 @@
 ::-webkit-scrollbar-thumb:hover {
   background-color: #555 !important;
 }
+
+/* Custom number input */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}