From 715783500a510777cd8c37cd486f1d78215399d7 Mon Sep 17 00:00:00 2001
From: RutvikGhaskataEalf <rutikbhai.ghaskata@aelf.io>
Date: Mon, 30 Dec 2024 21:38:48 +0530
Subject: [PATCH] feat: refactor the tutorials code by adding proper types

---
 .../2-dapp/src/components/modal/index.tsx     | 51 ++++++++++++++++---
 allowance/2-dapp/src/lib/utils.tsx            |  2 +-
 .../2-dapp/src/components/modal/index.tsx     | 51 ++++++++++++++++---
 .../components/create-token-modal/index.tsx   | 23 ++++++---
 staking/2-dapp/src/pages/home/index.tsx       | 16 +++---
 tic-tac-toe/2-dapp/src/lib/utils.tsx          |  2 +-
 todo/2-dapp/src/lib/utils.tsx                 |  2 +-
 todo/2-dapp/src/pages/home/index.tsx          |  2 +-
 8 files changed, 114 insertions(+), 35 deletions(-)

diff --git a/allowance/2-dapp/src/components/modal/index.tsx b/allowance/2-dapp/src/components/modal/index.tsx
index 2840b71..9fb6876 100644
--- a/allowance/2-dapp/src/components/modal/index.tsx
+++ b/allowance/2-dapp/src/components/modal/index.tsx
@@ -1,6 +1,13 @@
+import { ReactNode, MouseEventHandler } from "react";
 import style from "./modal.module.scss";
 
-const PopupOverlay = ({ children, isVisible, type }:any) => (
+interface PopupOverlayProps {
+  children: ReactNode;
+  isVisible: boolean;
+  type?: string; // Adjust the type as per your requirements if type has specific values (e.g., a union of strings)
+}
+
+const PopupOverlay = ({ children, isVisible, type }: PopupOverlayProps) => (
   <div
     className={`${style["modal-overlay"]} ${
       isVisible ? style["in-view"] : ""
@@ -9,24 +16,52 @@ const PopupOverlay = ({ children, isVisible, type }:any) => (
     {children}
   </div>
 );
-const PopupInner = ({ children }:any) => (
+
+interface PopupInnerProps {
+  children: ReactNode;
+}
+
+const PopupInner = ({ children }: PopupInnerProps) => (
   <div className={style.modalInner}>{children}</div>
 );
-const PopupBody = ({ children }:any) => (
+
+interface PopupBodyProps {
+  children: ReactNode;
+}
+
+const PopupBody = ({ children }: PopupBodyProps) => (
   <div className={style.modalBody}>{children}</div>
 );
-const PopupClose = (props:any) => (
-  <div className={style["x-mark-wrapper"]} {...props}>
+
+interface PopupCloseProps {
+  onClick?: MouseEventHandler<HTMLDivElement>;
+}
+
+const PopupClose = ({ onClick }: PopupCloseProps) => (
+  <div className={style["x-mark-wrapper"]} onClick={onClick}>
     <span className={style["x-mark"]}></span>
     <span className={style["x-mark"]}></span>
     <span className={style["mask"]}></span>
   </div>
 );
-const PopupTitle = ({ children }:any) => (
+
+interface PopupTitleProps {
+  children: ReactNode;
+}
+
+const PopupTitle = ({ children }: PopupTitleProps) => (
   <h2 className={style.title}>{children}</h2>
 );
-function Modal(props:any) {
-  const { isVisible, title, onClose, children, type } = props;
+
+interface ModalProps {
+  isVisible: boolean;
+  title: ReactNode;
+  onClose: MouseEventHandler<HTMLDivElement>;
+  children: ReactNode;
+  type?: string; // Adjust the type as per your requirements
+}
+
+function Modal({ isVisible, title, onClose, children, type }: ModalProps) {
   return (
     <PopupOverlay isVisible={isVisible} type={type}>
       <PopupInner>
diff --git a/allowance/2-dapp/src/lib/utils.tsx b/allowance/2-dapp/src/lib/utils.tsx
index ecaba15..56105d9 100644
--- a/allowance/2-dapp/src/lib/utils.tsx
+++ b/allowance/2-dapp/src/lib/utils.tsx
@@ -10,7 +10,7 @@ export const removeNotification = (id: number | string, time?: number) => {
   setTimeout(() => toast.done(id), time || 3000);
 };
 
-export const CustomToast = ({ title, message }: any) => (
+export const CustomToast = ({ title, message }: { title: string, message: string }) => (
   <div>
     <h4>{title}</h4>
     <p>{message}</p>
diff --git a/expense-tracker/2-dapp/src/components/modal/index.tsx b/expense-tracker/2-dapp/src/components/modal/index.tsx
index 2840b71..9fb6876 100644
--- a/expense-tracker/2-dapp/src/components/modal/index.tsx
+++ b/expense-tracker/2-dapp/src/components/modal/index.tsx
@@ -1,6 +1,13 @@
+import { ReactNode, MouseEventHandler } from "react";
 import style from "./modal.module.scss";
 
-const PopupOverlay = ({ children, isVisible, type }:any) => (
+interface PopupOverlayProps {
+  children: ReactNode;
+  isVisible: boolean;
+  type?: string; // Adjust the type as per your requirements if type has specific values (e.g., a union of strings)
+}
+
+const PopupOverlay = ({ children, isVisible, type }: PopupOverlayProps) => (
   <div
     className={`${style["modal-overlay"]} ${
       isVisible ? style["in-view"] : ""
@@ -9,24 +16,52 @@ const PopupOverlay = ({ children, isVisible, type }:any) => (
     {children}
   </div>
 );
-const PopupInner = ({ children }:any) => (
+
+interface PopupInnerProps {
+  children: ReactNode;
+}
+
+const PopupInner = ({ children }: PopupInnerProps) => (
   <div className={style.modalInner}>{children}</div>
 );
-const PopupBody = ({ children }:any) => (
+
+interface PopupBodyProps {
+  children: ReactNode;
+}
+
+const PopupBody = ({ children }: PopupBodyProps) => (
   <div className={style.modalBody}>{children}</div>
 );
-const PopupClose = (props:any) => (
-  <div className={style["x-mark-wrapper"]} {...props}>
+
+interface PopupCloseProps {
+  onClick?: MouseEventHandler<HTMLDivElement>;
+}
+
+const PopupClose = ({ onClick }: PopupCloseProps) => (
+  <div className={style["x-mark-wrapper"]} onClick={onClick}>
     <span className={style["x-mark"]}></span>
     <span className={style["x-mark"]}></span>
     <span className={style["mask"]}></span>
   </div>
 );
-const PopupTitle = ({ children }:any) => (
+
+interface PopupTitleProps {
+  children: ReactNode;
+}
+
+const PopupTitle = ({ children }: PopupTitleProps) => (
   <h2 className={style.title}>{children}</h2>
 );
-function Modal(props:any) {
-  const { isVisible, title, onClose, children, type } = props;
+
+interface ModalProps {
+  isVisible: boolean;
+  title: ReactNode;
+  onClose: MouseEventHandler<HTMLDivElement>;
+  children: ReactNode;
+  type?: string; // Adjust the type as per your requirements
+}
+
+function Modal({ isVisible, title, onClose, children, type }: ModalProps) {
   return (
     <PopupOverlay isVisible={isVisible} type={type}>
       <PopupInner>
diff --git a/staking/2-dapp/src/components/create-token-modal/index.tsx b/staking/2-dapp/src/components/create-token-modal/index.tsx
index f284f0e..d032c22 100644
--- a/staking/2-dapp/src/components/create-token-modal/index.tsx
+++ b/staking/2-dapp/src/components/create-token-modal/index.tsx
@@ -4,7 +4,7 @@ import { Id, toast } from "react-toastify";
 import * as z from "zod";
 import AElf from "aelf-sdk";
 import { Buffer } from "buffer";
-
+import { IWalletInfo } from "aelf-sdk/types/wallet";
 import Modal from "../modal";
 import {
   Form,
@@ -36,7 +36,7 @@ const formSchema = z.object({
 interface ITokenValidateResult {
   parentChainHeight: string | number;
   signedTx: string;
-  merklePath: { merklePathNodes: any };
+  merklePath: { merklePathNodes: { hash: string; isLeftChildNode: boolean }[] };
 }
 
 interface ITokenParams {
@@ -54,6 +54,8 @@ interface IProps {
   provider: IPortkeyProvider | null;
 }
 
+interface IssueResult { data: { Logs: { Name: string; Address: string }[]; }; }
+
 const CreateTokenodal = ({
   isModalOpen,
   handleCloseModal,
@@ -83,8 +85,15 @@ const CreateTokenodal = ({
     "4e83df2aa7c8552a75961f9ab9f2f06e01e0dca0203e383da5468bbbe2915c97"
   );
 
-  // Step F - Configure Expense Form
-  const form = useForm<z.infer<typeof formSchema>>({});
+  // Step F - Configure TOKEN Create Form
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      tokenName: "$TOKEN",
+      symbol: "",
+      totalSupply: "",
+    },
+  });
 
   // Step G - Get CrossChain Contract
   const getCrossChainContract = async () => {};
@@ -103,11 +112,11 @@ const CreateTokenodal = ({
 
   // Step L - Validate Mainchain Token Create's Transaction
   const validateToken = async () => {};
-  
-  // Step M - Create a Token on SideChain.
+
+  // Step M - Create a Token on the dAppChain.
   const createTokenOnSideChain = async () => {};
 
-  // Step N - Issue Token on SideChain
+  // Step N - Issue Token on dAppChain
   const issueTokenOnSideChain = async () => {};
 
   // Step O - Transfer TOKEN to Staking Contract
diff --git a/staking/2-dapp/src/pages/home/index.tsx b/staking/2-dapp/src/pages/home/index.tsx
index f5dfbda..3c7c8e5 100644
--- a/staking/2-dapp/src/pages/home/index.tsx
+++ b/staking/2-dapp/src/pages/home/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { IPortkeyProvider } from "@portkey/provider-types";
-import { toast } from "react-toastify";
+import { Id, toast } from "react-toastify";
 import axios from "axios";
 
 import "./home.scss";
@@ -83,7 +83,7 @@ const HomePage = ({ provider, currentWalletAddress }: PageProps) => {
     setIsModalOpen(false);
   };
 
-  // Step S - fetch Fungible Token data
+  // Step R - fetch Fungible Token data
   const fetchTokenData = async () => {};
 
   // useEffect hook to fetch token data periodically when the wallet address is available and the form is not loading
@@ -143,22 +143,22 @@ const HomePage = ({ provider, currentWalletAddress }: PageProps) => {
     handleAmountError(amount);
   }, [amount]);
 
-  // Step T - Function to transfer TOKEN to the Staking Contract
+  // Step S - Function to transfer TOKEN to the Staking Contract
   const transferTokenToStakingContract = async (amount: string) => {};
 
-  // Step U - Function to handle staking of the token
+  // Step T - Function to handle staking of the token
   const handleStaking = async () => {};
 
-  // Step V - Function to fetch deposit data for the current wallet address
+  // Step U - Function to fetch deposit data for the current wallet address
   const fetchDepositData = async () => {};
 
-  // Step W - Function to fetch the total staked amount from the staking contract
+  // Step V - Function to fetch the total staked amount from the staking contract
   const fetchTotalStakedAmount = async () => {};
 
-  // Step X - Function to withdraw staked tokens based on a deposit ID
+  // Step W - Function to withdraw staked tokens based on a deposit ID
   const withdrawStake = async (depositId: string) => {};
 
-  // Step Y - Function to perform an emergency withdrawal of staked tokens based on a deposit ID
+  // Step X - Function to perform an emergency withdrawal of staked tokens based on a deposit ID
   const emergencyWithdrawStake = async (depositId: string) => {};
 
   return (
diff --git a/tic-tac-toe/2-dapp/src/lib/utils.tsx b/tic-tac-toe/2-dapp/src/lib/utils.tsx
index fc01536..d4bbaa4 100644
--- a/tic-tac-toe/2-dapp/src/lib/utils.tsx
+++ b/tic-tac-toe/2-dapp/src/lib/utils.tsx
@@ -10,7 +10,7 @@ export const removeNotification = (id: number | string, time?: number) => {
   setTimeout(() => toast.done(id), time || 3000);
 };
 
-export const CustomToast = ({ title, message }: any) => (
+export const CustomToast = ({ title, message }: {title: string; message:string }) => (
   <div>
     <h4>{title}</h4>
     <p>{message}</p>
diff --git a/todo/2-dapp/src/lib/utils.tsx b/todo/2-dapp/src/lib/utils.tsx
index 4f701a9..8f97352 100644
--- a/todo/2-dapp/src/lib/utils.tsx
+++ b/todo/2-dapp/src/lib/utils.tsx
@@ -10,7 +10,7 @@ export const removeNotification = (id: number | string, time?: number) => {
   setTimeout(() => toast.done(id), time || 3000);
 };
 
-export const CustomToast = ({ title, message }: any) => (
+export const CustomToast = ({ title, message }: {title: string, message: string}) => (
   <div>
     <h4>{title}</h4>
     <p>{message}</p>
diff --git a/todo/2-dapp/src/pages/home/index.tsx b/todo/2-dapp/src/pages/home/index.tsx
index 4bec88c..cef7709 100644
--- a/todo/2-dapp/src/pages/home/index.tsx
+++ b/todo/2-dapp/src/pages/home/index.tsx
@@ -135,7 +135,7 @@ const HomePage = ({ provider, currentWalletAddress }: PageProps) => {
   // step 1 - Check If Contract is Initialized or not 
   const checkIsContractInitialized = async () => {};
 
-  // step 2 - Intitialize The Contract Very First Time
+  // step 2 - Initialize the smart contract
   const initializeContract = async () => {};
 
   // Check whether contract initialized or not