sent Payment tx, sent registration request to service

ui/app/actions/actions.ts

@@ -2,14 +2,20 @@
 
 import { ORDER_BY, SORT_BY } from "@/comman/types";
 
-export async function checkName(name: string) {
+export async function saveName({
+  name,
+  ownerAddress,
+  amount,
+  txHash,
+  expirationTime,
+}) {
   if (!name) return;
   const payload = {
-    ownerAddress: "string",
+    ownerAddress,
+    amount,
+    txHash,
     domainName: name,
-    expirationTime: 0,
-    amount: 0,
-    txHash: "string",
+    expirationTime: expirationTime,
   };
 
   const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/domains/save`, {
@@ -73,7 +79,6 @@ export async function getDomains({
   return await res.json();
 }
 
-
 export async function getDomainsMetadata(id: string) {
   const res = await fetch(
     `${process.env.NEXT_PUBLIC_API_URL}/domains/${id}/reserved`,

ui/comman/constants.ts

@@ -1,4 +1,8 @@
-export const NETWORK = 'testworld';
-export const defaultWallet = 'B62qoTtn6hP2R1x5d4UQoJos9vjoNGxLhaQn5cSKneu25Q3wpmtPirT';
-export const PUBLIC_APP_BASE_URL = 'https://minascan.io/';
-export const POLLING_INTERVAL = 3000;
+export const fees = {
+  slow: 0.0011,
+  default: 0.0101,
+  fast: 0.2001,
+};
+
+export const accountAddress =
+  "B62qk1sJumHSS1hPKS2fSAbxkkwGcCiieb1PcM4PB182pa1MKE9H9AV";

ui/components/molecules/modals/modalPurchase/index.module.css

@@ -45,12 +45,14 @@
   font-size: 20px;
   color: #597fff;
   cursor: pointer;
+  background-color: #EEF1FF;
 }
 
 .disableActionIcon {
   cursor: default;
   border-color: var(--col--border);
   color: rgba(0, 0, 0, 0.3);
+  background-color: inherit;
 }
 
 .costInformation {

ui/components/molecules/modals/modalPurchase/modalPurchase.tsx

@@ -5,7 +5,10 @@ import style from "./index.module.css";
 import { interBold, interMedium, interSemiBold } from "@/app/fonts";
 import { Button } from "@/components/atoms/button";
 import { Variant } from "@/components/atoms/button/types";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import useWallet from "@/hooks/useWallet";
+import { saveName } from "@/app/actions/actions";
+import { accountAddress, fees } from "@/comman/constants";
 
 type ModalPurchaseProps = {
   name: string;
@@ -19,8 +22,19 @@ const ModalPurchase = ({
   name,
 }: ModalPurchaseProps): JSX.Element => {
   const [selectedPeriod, setSelectedPeriod] = useState<number>(1);
+
   const maxPeriod = 3;
   const minPeriod = 1;
+  const amount = selectedPeriod * 20;
+
+  const {
+    balance,
+    sendResultMessage,
+    accountId,
+    actions: { onSendClick },
+  } = useWallet();
+
+  const isInsufficientBalance = balance.balance < amount;
 
   const increment = (): void => {
     if (selectedPeriod === maxPeriod) return;
@@ -31,6 +45,29 @@ const ModalPurchase = ({
     if (selectedPeriod === minPeriod) return;
     setSelectedPeriod(selectedPeriod - 1);
   };
+
+  const handlePurchase = async (): Promise<void> => {
+    await onSendClick({
+      amount: amount,
+      to: accountAddress,
+      fee: fees.default,
+    });
+  };
+
+  useEffect(() => {
+    if (sendResultMessage?.hash) {
+      (async () => {
+        await saveName({
+          name,
+          amount,
+          ownerAddress: accountId[0],
+          txHash: sendResultMessage.hash,
+          expirationTime: selectedPeriod,
+        });
+      })();
+    }
+  }, [sendResultMessage?.hash]);
+
   return (
     <PopupOverlay
       position="center"
@@ -40,7 +77,8 @@ const ModalPurchase = ({
     >
       <div className={style.wrapper}>
         <div className={classNames(style.header, interMedium.className)}>
-          {name}<span>.mina</span>
+          {name}
+          <span>.mina</span>
         </div>
         <div
           className={classNames(style.periodWrapper, interSemiBold.className)}
@@ -68,18 +106,25 @@ const ModalPurchase = ({
         >
           <div>
             <span>1 year registration</span>
-            <span className={interSemiBold.className}>10 MINA</span>
+            <span className={interSemiBold.className}>{amount} MINA</span>
           </div>
           <div>
             <span>Est. network fee</span>
             <span className={interSemiBold.className}>0.00000312 MINA</span>
           </div>
           <div>
-            <span className={classNames(style.totalText, interBold.className)}>Estimated Total</span>
+            <span className={classNames(style.totalText, interBold.className)}>
+              Estimated Total
+            </span>
             <span className={interSemiBold.className}>10.00000312 MINA</span>
           </div>
         </div>
-        <Button text="Purchase" variant={Variant.blue} disabled />
+        <Button
+          text={isInsufficientBalance ? "Insufficient Balance" : "Purchase"}
+          variant={Variant.blue}
+          onClick={handlePurchase}
+          disabled={isInsufficientBalance}
+        />
       </div>
     </PopupOverlay>
   );

ui/hooks/useAddressBalance.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+
+export type Balance = {
+  balance: number;
+  balanceUsd: number;
+};
+
+const useAddressBalance = (address): { balance: Balance } => {
+  const [balance, setBalance] = useState<Balance>(null);
+
+  const getBalance = async (address): Promise<void> => {
+    try {
+      fetch(
+        `https://minascan.io/qanet/api/api/core/accounts/${address}/balance`
+      )
+        .then((data) => {
+          return data.json();
+        })
+        .then((data) => {
+          setBalance(data);
+        });
+    } catch (error) {}
+  };
+
+  useEffect(() => {
+    if (address) {
+      getBalance(address);
+    }
+  }, [address]);
+
+  return {
+    balance,
+  };
+};
+
+export default useAddressBalance;

ui/hooks/useWallet.ts

@@ -1,6 +1,6 @@
-
 import { useEffect, useState } from "react";
 import { useLocalStorage } from "./useLocalStorage";
+import useAddressBalance, { Balance } from "./useAddressBalance";
 export type SendPaymentresponse = {
   hash?: string;
   message?: string;
@@ -16,28 +16,49 @@ export type OnSend = (
 
 export const isConnectedAuro = "isConnectedAuro";
 
+type sendResultMessage = {
+  hash: string;
+  message?: string;
+  result: boolean;
+};
+
 interface IUseGlobal {
-  accountId,
-  connectMessage,
+  accountId;
+  balance: Balance;
+  connectMessage;
+  sendResultMessage: sendResultMessage;
   actions: {
-    setWalletData: (
-      payload: any
-    ) => any
+    setWalletData: (payload: any) => any;
     onConnectWallet: () => Promise<void>;
     onDisconnectWallet: () => Promise<void>;
     setConnectMessage: (value: string | null) => void;
+    onSendClick: ({
+      amount,
+      to,
+      fee,
+      meme,
+    }: {
+      amount: number;
+      to: string;
+      fee: number;
+      meme?: string;
+    }) => Promise<void>;
   };
 }
 
 export default function useWallet(): IUseGlobal {
-    const [account, setAccount] = useLocalStorage('account');
+  const [account, setAccount] = useLocalStorage("account");
 
   const [walletData, setWalletData] = useState(null);
   const [, setIsConnectedAuro] = useLocalStorage(isConnectedAuro);
+  const [sendResultMessage, setSendResultMessage] =
+    useState<sendResultMessage>();
+
+  useEffect(() => {
+    !!account && setWalletData(JSON.parse(account));
+  }, []);
 
-useEffect(() => {
-    !!account && setWalletData(JSON.parse(account))
-}, [])
+  const balance = useAddressBalance(walletData?.accountId?.[0]);
 
   const setConnectMessage = (connectMessage) =>
     setWalletData({ ...walletData, connectMessage: connectMessage });
@@ -54,6 +75,7 @@ useEffect(() => {
       });
 
       const data = await minaAdapter.requestAccounts().catch((err) => err);
+
       if (data.message) {
         setWalletData({ ...walletData, connectMessage: data.message });
       } else {
@@ -63,27 +85,49 @@ useEffect(() => {
           connectMessage: "Connected",
         });
         setIsConnectedAuro(true);
-        setAccount(JSON.stringify({
-          ...walletData,
-          accountId: data,
-          connectMessage: "Connected",
-        }));
+        setAccount(
+          JSON.stringify({
+            ...walletData,
+            accountId: data,
+            connectMessage: "Connected",
+          })
+        );
       }
     }
   };
 
   const onDisconnectWallet = async (): Promise<void> => {
     setWalletData(null);
     setIsConnectedAuro(false);
-    setAccount(null)
+    setAccount(null);
   };
+
+  const onSendClick = async ({ amount, to, fee, memo }) => {
+    let sendResult = await minaAdapter
+      .sendPayment({
+        amount,
+        to,
+        fee,
+        memo,
+      })
+      .catch((err) => err);
+    setSendResultMessage({
+      hash: sendResult.hash,
+      message: sendResult.message,
+      result: !!sendResult.hash,
+    });
+  };
+
   return {
     ...walletData,
+    balance,
+    sendResultMessage,
     actions: {
       setWalletData,
       onConnectWallet,
       onDisconnectWallet,
       setConnectMessage,
+      onSendClick,
     },
   };
 }