Add entry to print amount to distribute

packages/nextjs/components/Step1.tsx

@@ -52,7 +52,7 @@ function Step1({ handleNext }: { handleNext: any }) {
         // initial={location.hasOwnProperty("state.name") ? "initial" : "initial2"}
         animate="animate"
         exit="exit"
-        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%]"
+        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%]"
       >
         <Title title="Select attest network">
           Please, select the network you want to validate the attestations from.

packages/nextjs/components/Step2.tsx

@@ -69,7 +69,7 @@ function Step2({ handleNext, handleBack }: { handleNext: any; handleBack: any })
         // initial={location.state.name === "step1" ? "initial" : "initial2"}
         animate="animate"
         exit={goback ? "exit2" : "exit"}
-        className="flex flex-col mb-8 md:mb-0 bg-white w-[90%] rounded-2xl p-10 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
+        className="flex flex-col mb-8 md:mb-0 bg-white w-[90%] rounded-2xl p-10  relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
       >
         <Title title="Enter Schema ID">Enter the Schema ID that granted the attestations.</Title>
         <div className="space-y-4 md:space-y-0 flex flex-col md:flex-row md:space-x-6">

packages/nextjs/components/Step3.tsx

@@ -97,7 +97,7 @@ export default function Step3({ handleNext, handleBack }: { handleNext: any; han
         // initial={location.state.name === "step2" ? "initial" : "initial2"}
         animate="animate"
         exit={goback ? "exit2" : "exit"}
-        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
+        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7  relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
       >
         <Title title="Enter attester address or ENS">
           Enter the attester address or ENS you want to validate the attestations from.

packages/nextjs/components/Step4.tsx

@@ -63,7 +63,7 @@ export default function Step4({ handleNext, handleBack }: { handleNext: any; han
         initial="initial"
         animate="animate"
         exit={goback ? "exit2" : "exit"}
-        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
+        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7  relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
       >
         <Title title="Select distribution network">
           Select the network where you want to disperse your rewards on.

packages/nextjs/components/Step5.tsx

@@ -73,7 +73,7 @@ export default function Step5({ handleNext, handleBack }: { handleNext: any; han
         initial="initial"
         animate="animate"
         exit={goback ? "exit2" : "exit"}
-        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
+        className="flex flex-col  mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
       >
         <Title title="Type of rewards">
           Select the type of rewards you want to disperse, it can be any ERC20 token.

packages/nextjs/components/Step6.tsx

@@ -46,6 +46,7 @@ export default function Step6() {
   const [sum, setSum] = useState(0); //suma total
   const [inputs, setInputs] = useState<any>({}); //  valores de los inputs
   const [attestations, setAttestations] = useState([]); // manejo atestaciones
+  const [distributionAmount, setDistributionAmount] = useState<number>(0); // impresion cantidad distrib
 
   const GET_ATTESTERS = gql`
     query Attestations($schemaID: String!, $attesterAddress: String!) {
@@ -85,6 +86,17 @@ export default function Step6() {
     setSum(sum); // muestra valor
   }
 
+  // Cantidad impresa imput
+  function applyAmmout() {
+    const updatedInputs = Object.keys(inputs).reduce((acc: { [key: string]: number }, key) => {
+      acc[key] = distributionAmount; // asigno valor a cada imput
+
+      return acc;
+    }, {});
+
+    setInputs(updatedInputs);
+  }
+
   //  cambio del imput
   function handleInput(e: any) {
     const { name, value } = e.target;
@@ -149,9 +161,31 @@ export default function Step6() {
         initial="initial"
         animate="animate"
         exit={"exit"}
-        className="flex flex-col mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7 z-30 relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
+        className="flex flex-col mb-8 md:mb-0 bg-white w-[90%] rounded-2xl py-10 px-7  relative bottom-24 text-[14px] md:bottom-0 md:p-0 md:w-[70%] h-full"
       >
-        <Title title="Configure transfer">Transfer funds to multiple receivers.</Title>
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
+          <Title title="Configure transfer">Transfer funds to multiple receivers.</Title>
+
+          <div className="flex items-center mt-4 md:mt-0 space-x-2">
+            <input
+              type="number"
+              value={distributionAmount}
+              onChange={e => setDistributionAmount(+e.target.value)}
+              placeholder="Distribution amount"
+              className=" px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm w-full md:w-32"
+            />
+            <button
+              type="button"
+              onClick={applyAmmout}
+              className="text-gray-500 text-lg font-bold hover:text-gray-700 p-2 rounded-full border border-gray-300 flex items-center justify-center mt-2 md:mt-0 md:ml-2"
+              title="Apply distribution amount"
+              style={{ width: "40px", height: "40px" }}
+            >
+              +
+            </button>
+          </div>
+        </div>
+
         <div className="w-full flex flex-col space-y-4 md:space-y-3 bg-Alabaster p-6 rounded-xl md:p-8 overflow-y-auto">
           <table className="table">
             <thead>