From 239d1ac354fa9b0b19c4ca4f5253b0f9a50f5ba0 Mon Sep 17 00:00:00 2001
From: alimaktabi <maktabi876@gmail.com>
Date: Wed, 7 Feb 2024 10:06:22 +0330
Subject: [PATCH 1/7] fixed update fetch data after login

---
 context/gasTapProvider.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/context/gasTapProvider.tsx b/context/gasTapProvider.tsx
index 4c65766d..fbf4e2cd 100644
--- a/context/gasTapProvider.tsx
+++ b/context/gasTapProvider.tsx
@@ -309,8 +309,7 @@ export const GasTapProvider: FC<
   }, []);
 
   useEffect(() => {
-    if (!userToken || chainList.length) return;
-    updateChainList();
+    if (!userToken) return;
     updateActiveClaimHistory();
     updateOneTimeClaimedList();
     updateFuelChampionList();

From 5b440c0dc1376e4786a244eed30da2e3e682179e Mon Sep 17 00:00:00 2001
From: Abbas Nosrati <96720246+abbasnosrati@users.noreply.github.com>
Date: Sun, 11 Feb 2024 22:25:18 +0330
Subject: [PATCH 2/7] Feature provider nextjs (#49)

* create constant file

* set chain name

* refactor to use token requirement

* refactor to use token requirement

* remove extra file

* add gastap donation api

* add user donation type

* fixed image address

* remove comments

* remove dead code

* add donation card component

* search component

* update getUserDistributions api address

* remove comment

* fixed style

* add filters

* disable nft section

* change crete token tap distribution type content

* snake case tokenAddress

* fixed text-[10px] to text-2xl

* change text-[14px] to text-sm

* change text-[14px] to text-sm

* change text-[14px] to text-sm

* fixed text-[] to tailwind class

* move method prop outside of component

* remove and add use client

* remove log

* set token tap constraint api

* add token tap detail and verification route

* fixed type

* use form data  to send data

* set userTokenDistribution

* fixed style

* get user distribution from api

* create detail and verification page

* get constraint from token tap api

* fixed type

* fixed return

* delete extra file

* fixed typo

* edit new style

* fixed set max number of entry

* edit style

* refactor requirement functionality

* fixed build error

* fixed bug

* remove logs

* remove log

* fixed uploaded file type

* remove dead code

* create distribution function

* fixed bug

* check allowance after approve

* remove logs

* create erc20 token distribution helper

* remove approve state use token distribution helper
---
 app/contribution-hub/ChainList.tsx            |   9 +-
 .../ConstraintDetailsModal.tsx                | 223 +++++++--
 app/contribution-hub/CsvFileInput.tsx         |  14 +-
 app/contribution-hub/DisplaySteps.tsx         |   2 +-
 app/contribution-hub/SelectMethodInput.tsx    |  79 +++-
 app/contribution-hub/content.module.scss      |   4 +-
 .../gas-tap/components/Content.tsx            | 438 +++++++++++++-----
 .../components/ProvideGasFeeContent.tsx       |   6 +-
 app/contribution-hub/gas-tap/create/page.tsx  |   2 -
 app/contribution-hub/gas-tap/layout.tsx       |   6 -
 app/contribution-hub/pagination.tsx           |   2 +-
 .../prize-tap/components/CardTimer.tsx        |  10 +-
 .../prize-tap/components/Content.tsx          |  32 +-
 .../components/CreateRaffleModal/index.tsx    |  80 ----
 .../OfferPrizeForm/ContactInformation.tsx     |   6 +-
 .../components/DepositContent.tsx             |   4 +-
 .../components/DisplaySelectedTokenOrNft.tsx  |   4 +-
 .../ShowPreviewModal/FormYouFilled.tsx        |  12 +-
 .../RaffleCardTimerSubmitContribution.tsx     |   2 +-
 .../ShowPreviewModal/RenderInitialBody.tsx    |   6 +-
 .../ShowPreviewModal/RenderSocialMedia.tsx    |   2 +-
 .../OfferPrizeForm/DepositPrize/index.tsx     |   2 +-
 .../InformationVerification.tsx               |   4 +-
 .../OfferPrizeForm/NewAddedConstraint.tsx     |   2 +-
 .../components/AddNftIdListModal.tsx          |  24 +-
 .../components/SelectChainDropDown.tsx        |   6 +-
 .../PrizeInfo/components/SelectTokenOrNft.tsx |  57 ++-
 .../OfferPrizeForm/PrizeInfo/index.tsx        |   8 +-
 .../components/ConstraintListModal.tsx        |   2 +-
 .../OfferPrizeForm/Requirements/index.tsx     |   4 +-
 .../components/ManualDuration.tsx             |   2 +-
 .../components/PeopleLimitation.tsx           |   4 +-
 .../components/StartDateComp.tsx              |   6 +-
 .../components/OfferPrizeForm/index.tsx       |   2 +-
 .../prize-tap/components/SearchInput.tsx      |   1 -
 .../prize-tap/components/content.module.scss  |   4 +-
 app/contribution-hub/styles.scss              |   2 +-
 .../components/CardTimerTokenTap.tsx          |  10 +-
 .../token-tap/components/Content.tsx          | 306 ++++++++++--
 .../components/DepositContent.tsx             |   6 +-
 .../components/DisplaySelectedTokenOrNft.tsx  |   4 +-
 .../ShowPreviewModal/FormYouFilled.tsx        |  22 +-
 .../ShowPreviewModal/RenderInitialBody.tsx    |  15 +-
 .../ShowPreviewModal/RenderSocialMedia.tsx    |   2 +-
 .../OfferTokenForm/DepositToken/index.tsx     |  33 +-
 .../OfferTokenForm/NewAddedConstraint.tsx     |   2 +-
 .../TokenContactInformation.tsx               |  22 +-
 .../components/AddNftIdListModal.tsx          |  24 +-
 .../components/SelectChainDropDown.tsx        |   6 +-
 .../TokenInfo/components/SelectTokenOrNft.tsx |  48 +-
 .../OfferTokenForm/TokenInfo/index.tsx        |  10 +-
 .../TokenInformationVerification.tsx          |   4 +-
 .../components/ConstraintListModal.tsx        |   2 +-
 .../TokenTapRequirements/index.tsx            |   4 +-
 .../components/ManualDuration.tsx             |   6 +-
 .../components/PeopleLimitation.tsx           |   4 +-
 .../components/StartDateComp.tsx              |   6 +-
 .../TokenTapTimeEnrollLimitation/index.tsx    |   6 +-
 .../components/OfferTokenForm/index.tsx       |  34 +-
 .../token-tap/create/layout.tsx               |   4 +-
 .../token-tap/details/[id]/layout.tsx         |  31 ++
 .../token-tap/details/[id]/page.tsx           |  10 +
 app/contribution-hub/token-tap/layout.tsx     |  12 -
 .../token-tap/verification/[id]/layout.tsx    |  30 ++
 .../token-tap/verification/[id]/page.tsx      |  11 +
 .../Modals/FundTransactionModal/index.tsx     |   2 +-
 app/prizetap/components/Linea/index.tsx       |   8 +-
 app/prizetap/components/RafflesList.tsx       |  41 +-
 .../landing/prizeTap/raffleTimer.tsx          |  68 +--
 .../containers/provider-dashboard/Header.tsx  |  10 +-
 .../helpers/approveErc20Token.ts              |  25 +-
 .../helpers/checkCollectionAddress.ts         |  99 ++--
 .../helpers/createErc20TokenDistribution.ts   | 226 +++++----
 .../helpers/getErc20TokenContract.ts          |  37 +-
 .../helpers/getErc20TokenContractTokenTap.ts  |  55 +++
 .../hooks/useAddRequirement.ts                |   9 +-
 .../containers/provider-dashboard/layout.tsx  |   2 +-
 constants/contributionHub.ts                  |  85 ++++
 constants/providerDashboard.tsx               |   4 -
 context/providerDashboardContext.tsx          | 110 +----
 context/providerDashboardTokenTapContext.tsx  | 265 +++--------
 types/provider-dashboard.ts                   |  56 ++-
 utils/api/provider-dashboard.ts               |  17 +-
 utils/routes.ts                               |   3 +
 utils/serverApis/contributionHub.ts           |  37 +-
 85 files changed, 1775 insertions(+), 1131 deletions(-)
 create mode 100644 app/contribution-hub/token-tap/details/[id]/layout.tsx
 create mode 100644 app/contribution-hub/token-tap/details/[id]/page.tsx
 delete mode 100644 app/contribution-hub/token-tap/layout.tsx
 create mode 100644 app/contribution-hub/token-tap/verification/[id]/layout.tsx
 create mode 100644 app/contribution-hub/token-tap/verification/[id]/page.tsx
 create mode 100644 components/containers/provider-dashboard/helpers/getErc20TokenContractTokenTap.ts
 create mode 100644 constants/contributionHub.ts
 delete mode 100644 constants/providerDashboard.tsx

diff --git a/app/contribution-hub/ChainList.tsx b/app/contribution-hub/ChainList.tsx
index fffe26c5..3f8cc6d7 100644
--- a/app/contribution-hub/ChainList.tsx
+++ b/app/contribution-hub/ChainList.tsx
@@ -7,14 +7,18 @@ interface Props {
   setRequirementParamsList: any;
   requirementParamsList: any;
   allChainList: Chain[] | undefined;
+  selectedChain: Chain | undefined;
+  setSelectedChain: (chain: Chain | undefined) => void;
 }
 
 const ChainList = ({
   setRequirementParamsList,
   requirementParamsList,
   allChainList,
+  selectedChain,
+  setSelectedChain,
 }: Props) => {
-  const [selectedChain, setSelectedChain] = useState<Chain | undefined>();
+  // const [selectedChain, setSelectedChain] = useState<Chain | undefined>();
 
   const handleSelectChain = (chian: Chain) => {
     setSelectedChain(chian);
@@ -42,7 +46,8 @@ const ChainList = ({
     const chain = allChainList!.find(
       (item) => item.pk === requirementParamsList.CHAIN
     );
-    setSelectedChain(chain);
+    setSelectedChain(chain!);
+    setChainName(chain!.chainName);
   }, [requirementParamsList]);
 
   useOutsideClick(ref, () => {
diff --git a/app/contribution-hub/ConstraintDetailsModal.tsx b/app/contribution-hub/ConstraintDetailsModal.tsx
index 84a9464a..e072e22b 100644
--- a/app/contribution-hub/ConstraintDetailsModal.tsx
+++ b/app/contribution-hub/ConstraintDetailsModal.tsx
@@ -1,14 +1,17 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { RequirementProps, ConstraintProps, Chain } from "@/types";
 import useAddRequirement from "@/components/containers/provider-dashboard/hooks/useAddRequirement";
 import Icon from "@/components/ui/Icon";
 import ChainList from "@/app/contribution-hub/ChainList";
 import SelectMethodInput from "@/app/contribution-hub/SelectMethodInput";
 import { useWalletProvider } from "@/utils/wallet";
-import { isAddress } from "viem";
-import { checkCollectionAddress } from "@/components/containers/provider-dashboard/helpers/checkCollectionAddress";
+import { isAddress, zeroAddress } from "viem";
+import {
+  checkNftCollectionAddress,
+  checkTokenContractAddress,
+} from "@/components/containers/provider-dashboard/helpers/checkCollectionAddress";
 import CsvFileInput from "./CsvFileInput";
 
 interface CreateModalParam {
@@ -18,6 +21,12 @@ interface CreateModalParam {
   constraintFile: any;
   allChainList: Chain[];
   setConstraintFile: (item: any) => void;
+  requirementList: RequirementProps[];
+  isCollectionValid: boolean;
+  setIsCollectionValid: (e: boolean) => void;
+  setErrorMessage: (message: string) => void;
+  decimals: number | undefined;
+  setDecimals: (decimal: number | undefined) => void;
 }
 
 interface DetailsModal {
@@ -29,16 +38,14 @@ interface DetailsModal {
   allChainList: Chain[];
 }
 
-const ConstraintDetailsModal = ({
+const ConstraintDetailsModal: FC<DetailsModal> = ({
   constraint,
   handleBackToConstraintListModal,
   requirementList,
   insertRequirement,
   updateRequirement,
   allChainList,
-}: DetailsModal) => {
-  const provider = useWalletProvider();
-
+}) => {
   const addRequirements = useAddRequirement(
     handleBackToConstraintListModal,
     insertRequirement,
@@ -54,6 +61,10 @@ const ConstraintDetailsModal = ({
 
   const [constraintFile, setConstraintFile] = useState<any>();
 
+  const [isCollectionValid, setIsCollectionValid] = useState<boolean>(false);
+
+  const [decimals, setDecimals] = useState<number | undefined>();
+
   const createRequirementParamsList = () => {
     if (constraint.params.length > 0) {
       setRequirementParamsList(
@@ -82,14 +93,15 @@ const ConstraintDetailsModal = ({
     }
   }, []);
 
-  const checkingParamsValidation = async () => {
+  const checkingParamsValidation = () => {
     if (!requirementParamsList) return false;
     if (
-      !requirementParamsList.COLLECTION_ADDRESS ||
+      !requirementParamsList.ADDRESS ||
       !requirementParamsList.CHAIN ||
-      !requirementParamsList.MINIMUM
+      !requirementParamsList.MINIMUM ||
+      Number(requirementParamsList.MINIMUM) <= 0
     ) {
-      !requirementParamsList.COLLECTION_ADDRESS
+      !requirementParamsList.ADDRESS
         ? setErrorMessage("Please enter collection address.")
         : !requirementParamsList.CHAIN
         ? setErrorMessage("Please select chain.")
@@ -97,27 +109,11 @@ const ConstraintDetailsModal = ({
       return false;
     }
 
-    if (requirementParamsList.COLLECTION_ADDRESS) {
-      const step2Check = isAddress(requirementParamsList.COLLECTION_ADDRESS);
-      const chain = allChainList?.find(
-        (item) => Number(item.pk) === Number(requirementParamsList.CHAIN)
-      );
-
-      if (!chain) return false;
-
-      const res = await checkCollectionAddress(
-        provider,
-        requirementParamsList.COLLECTION_ADDRESS,
-        Number(chain.chainId)
-      );
-
-      (!step2Check || !res) && setErrorMessage("Invalid contract address.");
-      return step2Check && res;
-    }
+    if (!isCollectionValid) return false;
+    return true;
   };
 
   const checkCsvFileUploadedValidation = () => {
-    console.log(requirementParamsList, requirementParamsList.CSV_FILE);
     if (!requirementParamsList) return false;
     if (!requirementParamsList.CSV_FILE) {
       setErrorMessage("Please upload a csv file.");
@@ -126,9 +122,12 @@ const ConstraintDetailsModal = ({
     return true;
   };
 
-  const handleAddRequirement = async () => {
-    if (constraint.name === "core.HasNFTVerification") {
-      const res = await checkingParamsValidation();
+  const handleAddRequirement = () => {
+    if (
+      constraint.name === "core.HasNFTVerification" ||
+      constraint.name === "core.HasTokenVerification"
+    ) {
+      const res = checkingParamsValidation();
       if (!res) return;
     }
 
@@ -144,7 +143,8 @@ const ConstraintDetailsModal = ({
       constraint.title,
       isNotSatisfy,
       requirementParamsList,
-      constraintFile
+      constraintFile,
+      decimals
     );
   };
 
@@ -160,7 +160,7 @@ const ConstraintDetailsModal = ({
       >
         <Icon
           iconSrc="/assets/images/provider-dashboard/arrow-left.svg"
-          className="cursor-pointer z-[999999]"
+          className="cursor-pointer"
         />
       </div>
       <div className="w-full flex gap-4 h-[32px] mb-2">
@@ -194,12 +194,18 @@ const ConstraintDetailsModal = ({
         constraintFile={constraintFile}
         setConstraintFile={setConstraintFile}
         allChainList={allChainList}
+        requirementList={requirementList}
+        isCollectionValid={isCollectionValid}
+        setIsCollectionValid={setIsCollectionValid}
+        setErrorMessage={setErrorMessage}
+        decimals={decimals}
+        setDecimals={setDecimals}
       />
       <div className="mb-4">{constraint.description}</div>
-      <div className="text-error text-[10px] min-h-[15px]">{errorMessage}</div>
+      <div className="text-error text-2xs min-h-[15px]">{errorMessage}</div>
       <div
         onClick={handleAddRequirement}
-        className="flex cursor-pointer  bg-gray40 text-[14px] font-semibold text-white h-[44px] border-2 border-gray70 rounded-xl items-center justify-center mb-2"
+        className="flex cursor-pointer  bg-gray40 text-sm font-semibold text-white h-[44px] border-2 border-gray70 rounded-xl items-center justify-center mb-2"
       >
         Add Requirement
       </div>
@@ -207,51 +213,166 @@ const ConstraintDetailsModal = ({
   );
 };
 
-const CreateParams = ({
+const CreateParams: FC<CreateModalParam> = ({
   constraint,
   setRequirementParamsList,
   requirementParamsList,
   constraintFile,
   setConstraintFile,
   allChainList,
-}: CreateModalParam) => {
-  const [reqNftAddress, setReqNftAddress] = useState("");
+  requirementList,
+  isCollectionValid,
+  setIsCollectionValid,
+  setErrorMessage,
+  decimals,
+  setDecimals,
+}) => {
+  const [collectionAddress, setCollectionAddress] = useState("");
+  const [isNativeToken, setIsNativeToken] = useState<boolean>(false);
+  const [selectedChain, setSelectedChain] = useState<Chain | undefined>();
+  const requirement = requirementList.find((item) => item.pk == constraint.pk);
+
+  const provider = useWalletProvider();
 
   useEffect(() => {
-    if (!requirementParamsList) return;
-    setReqNftAddress(requirementParamsList.COLLECTION_ADDRESS);
-  }, [requirementParamsList]);
+    if (requirement) {
+      if (!requirement.params) return;
+      setCollectionAddress(requirement.params.ADDRESS);
+      if (requirement.params.ADDRESS === zeroAddress) {
+        setIsNativeToken(true);
+      } else {
+        checkCollectionContract();
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!collectionAddress) return;
+    const isAddressValid = isAddress(collectionAddress);
+    !isAddressValid && setErrorMessage("Invalid contract address.");
+    isAddressValid && setErrorMessage("");
+    if (isAddressValid) {
+      if (collectionAddress === zeroAddress) {
+        setIsCollectionValid(true);
+        setDecimals(18);
+        return;
+      } else {
+        checkCollectionContract();
+      }
+    } else {
+      setIsCollectionValid(false);
+    }
+  }, [collectionAddress, selectedChain, isNativeToken]);
+
+  const checkCollectionContract = async () => {
+    if (!selectedChain) return;
+    let res = false;
+
+    if (constraint.name === "core.HasNFTVerification") {
+      res = await checkNftCollectionAddress(
+        provider,
+        requirementParamsList.ADDRESS,
+        Number(selectedChain.chainId)
+      );
+      setDecimals(18);
+    }
+
+    if (constraint.name === "core.HasTokenVerification") {
+      if (requirementParamsList.ADDRESS == zeroAddress) {
+        setDecimals(18);
+        return true;
+      }
+      res = await checkTokenContractAddress(
+        provider,
+        requirementParamsList.ADDRESS,
+        Number(selectedChain.chainId),
+        setDecimals
+      );
+    }
+    !res && setErrorMessage("Invalid contract address.");
+    setIsCollectionValid(res);
+  };
 
   const handleChangeCollection = (address: string) => {
-    setReqNftAddress(address);
+    setCollectionAddress(address);
     setRequirementParamsList({
       ...requirementParamsList,
-      ["COLLECTION_ADDRESS"]: address,
+      ["ADDRESS"]: address,
     });
   };
 
-  if (constraint.params.length === 0) return;
+  if (constraint.params.length === 0) return null;
+
+  if (
+    constraint.name === "core.HasNFTVerification" ||
+    constraint.name === "core.HasTokenVerification"
+  ) {
+    const isNft: boolean = constraint.name === "core.HasNFTVerification";
+
+    const handleSelectNativeToken = (isNative: boolean) => {
+      if (!selectedChain) return;
+      setIsNativeToken((prev) => !prev);
+      !isNative ? setCollectionAddress(zeroAddress) : setCollectionAddress("");
+      setRequirementParamsList({
+        ...requirementParamsList,
+        ["ADDRESS"]: !isNative ? zeroAddress : "",
+      });
+    };
 
-  if (constraint.name === "core.HasNFTVerification") {
     return (
       <div className="flex flex-col gap-3">
         <ChainList
           setRequirementParamsList={setRequirementParamsList}
           requirementParamsList={requirementParamsList}
           allChainList={allChainList}
+          selectedChain={selectedChain}
+          setSelectedChain={setSelectedChain}
         />
-        <div className="nftAddress_requirement_input overflow-hidden pl-4 flex rounded-2xl bg-gray40 border items-center h-[43px] border-gray50">
+
+        {!isNft && (
+          <div
+            onClick={() => handleSelectNativeToken(isNativeToken)}
+            className={`${
+              !selectedChain ? "opacity-50" : "opacity-1 cursor-pointer"
+            } -mb-1 flex gap-2 items-center mt-2 min-h-[20px] max-w-[110px]`}
+          >
+            <Icon
+              iconSrc={
+                isNativeToken
+                  ? "/assets/images/provider-dashboard/check-true.svg"
+                  : "/assets/images/provider-dashboard/checkbox.svg"
+              }
+            />
+            is native token
+          </div>
+        )}
+
+        <div
+          className={`${
+            isNativeToken || !selectedChain ? "opacity-50" : "opacity-1"
+          } nftAddress_requirement_input overflow-hidden pl-4 flex rounded-2xl bg-gray40 border items-center h-[43px] border-gray50`}
+        >
           <input
-            name="nftAddressRequirement"
-            placeholder="Paste NFT address"
+            name={isNft ? "nftAddressRequirement" : "tokenAddressRequirement"}
+            disabled={isNativeToken || !selectedChain}
+            placeholder={isNft ? "Paste NFT address" : "Paste Token address"}
             className="bg-inherit w-full h-full"
-            value={reqNftAddress ?? ""}
+            value={
+              collectionAddress && collectionAddress != zeroAddress
+                ? collectionAddress
+                : ""
+            }
             onChange={(e) => handleChangeCollection(e.target.value)}
           />
         </div>
+
         <SelectMethodInput
           setRequirementParamsList={setRequirementParamsList}
           requirementParamsList={requirementParamsList}
+          isNft={isNft}
+          requirement={requirement}
+          isDisabled={!collectionAddress}
+          decimals={decimals}
         />
       </div>
     );
@@ -264,9 +385,11 @@ const CreateParams = ({
         requirementParamsList={requirementParamsList}
         setConstraintFile={setConstraintFile}
         constraintFile={constraintFile}
+        requirement={requirement}
       />
     );
   }
+
   return <></>;
 };
 
diff --git a/app/contribution-hub/CsvFileInput.tsx b/app/contribution-hub/CsvFileInput.tsx
index d2bbcad5..d63063d2 100644
--- a/app/contribution-hub/CsvFileInput.tsx
+++ b/app/contribution-hub/CsvFileInput.tsx
@@ -1,5 +1,6 @@
 "use client";
 import Icon from "@/components/ui/Icon";
+import { RequirementProps } from "@/types";
 import React, { useEffect, useState } from "react";
 
 interface Prop {
@@ -7,22 +8,25 @@ interface Prop {
   setRequirementParamsList: any;
   setConstraintFile: (item: any) => void;
   constraintFile: any;
+  requirement: RequirementProps | undefined;
 }
 const CsvFileInput = ({
   setRequirementParamsList,
   requirementParamsList,
   setConstraintFile,
-  constraintFile,
+  requirement,
 }: Prop) => {
   const [isUploadedFileValid, setIsUploadedFileValid] =
     useState<boolean>(false);
-
-  console.log(constraintFile);
   const [uploadedFileName, setUploadedFileName] = useState<string | null>();
 
   useEffect(() => {
     if (!requirementParamsList) return;
     if (!requirementParamsList.CSV_FILE) return;
+    if (requirement) {
+      if (!requirement.constraintFile) return;
+      setConstraintFile(requirement.constraintFile);
+    }
     setIsUploadedFileValid(true);
     setUploadedFileName(requirementParamsList.CSV_FILE);
   }, [requirementParamsList]);
@@ -77,7 +81,7 @@ const CsvFileInput = ({
               type="file"
               className="uploadFileInput w-[100%] flex cursor-pointer p-3 text-gray100"
               onChange={(e) => handleChangeUploadedFile(e)}
-              accept=".csv, .txt"
+              accept=".csv"
             />
           </div>
         </div>
@@ -86,7 +90,7 @@ const CsvFileInput = ({
           <p className="text-gray100">file name: {uploadedFileName}</p>
           <button
             onClick={handleClearUploadedFile}
-            className="text-white text-[10px] border border-gray60 bg-gray20 p-2 rounded-xl"
+            className="text-white text-2xs border border-gray60 bg-gray20 p-2 rounded-xl"
           >
             Reset file
           </button>
diff --git a/app/contribution-hub/DisplaySteps.tsx b/app/contribution-hub/DisplaySteps.tsx
index e8636cdf..541b30a5 100644
--- a/app/contribution-hub/DisplaySteps.tsx
+++ b/app/contribution-hub/DisplaySteps.tsx
@@ -14,7 +14,7 @@ const DisplaySteps = ({ page, displaySteps }: Prop) => {
     >
       {displaySteps.map((item, index) => (
         <div
-          className="flex items-center gap-3 relative text-[12px] text-white"
+          className="flex items-center gap-3 relative text-xs text-white"
           key={index}
         >
           <div className="rounded-full bg-gray30 overflow-hidden w-[26px] h-[26px] z-[1]">
diff --git a/app/contribution-hub/SelectMethodInput.tsx b/app/contribution-hub/SelectMethodInput.tsx
index 5d207586..afee4d0f 100644
--- a/app/contribution-hub/SelectMethodInput.tsx
+++ b/app/contribution-hub/SelectMethodInput.tsx
@@ -1,20 +1,36 @@
 import Icon from "@/components/ui/Icon";
+import { RequirementProps } from "@/types";
 import { useOutsideClick } from "@/utils/hooks/dom";
+import { fromWei, toWei } from "@/utils/numbersBigNumber";
 import React, { useEffect, useRef, useState } from "react";
+import Big from "big.js";
 
 export enum SelectMethod {
   Minimum = "Minimum",
   Maximum = "Maximum",
 }
 
+interface MethodProp {
+  minimum: string;
+  maximum: string;
+}
+
 interface Prop {
   setRequirementParamsList: (e: any) => void;
   requirementParamsList: any;
+  isNft: boolean;
+  requirement: RequirementProps | undefined;
+  isDisabled: boolean;
+  decimals: number | undefined;
 }
 
 const SelectMethodInput = ({
   setRequirementParamsList,
   requirementParamsList,
+  requirement,
+  isNft,
+  isDisabled,
+  decimals,
 }: Prop) => {
   const [selectedMethod, setSelectedMethod] = useState<string | undefined>();
   const [showItems, setShowItems] = useState<boolean>(false);
@@ -24,14 +40,9 @@ const SelectMethodInput = ({
     setShowItems(false);
   };
 
-  interface MethodProp {
-    minimum: number;
-    maximum: number;
-  }
-
   const [methodValues, setMethodValues] = useState<MethodProp>({
-    minimum: 0,
-    maximum: 0,
+    minimum: "0",
+    maximum: "0",
   });
 
   const ref = useRef<HTMLDivElement>(null);
@@ -43,31 +54,56 @@ const SelectMethodInput = ({
   const handleChangeMethodValues = (e: string) => {
     const value =
       e === "increase"
-        ? methodValues.minimum! + 1
-        : Math.max(1, methodValues.minimum - 1);
+        ? Number(methodValues.minimum!) + 1
+        : Math.max(0, Number(methodValues.minimum) - 1);
+    handleChange(value.toString());
+  };
 
+  const handleChange = (e: string) => {
     setMethodValues({
       ...methodValues,
-      minimum: value,
+      minimum: isNft ? e.replace(/[^0-9]/g, "") : e,
+    });
+    setRequirementParamsList({
+      ...requirementParamsList,
+      ["MINIMUM"]: isNft
+        ? e.replace(/[^0-9]/g, "")
+        : e
+        ? new Big(toWei(e, decimals)).toFixed()
+        : "",
     });
-
-    setRequirementParamsList({ ...requirementParamsList, ["MINIMUM"]: value });
   };
 
   useEffect(() => {
-    if (!requirementParamsList) return;
-    if (!requirementParamsList.MINIMUM) return;
+    if (!methodValues.minimum) return;
+    handleChange(methodValues.minimum);
+  }, [decimals]);
+
+  useEffect(() => {
+    if (!requirement) return;
     handleSelectMethod();
     setMethodValues({
       ...methodValues,
-      minimum: requirementParamsList.MINIMUM,
+      minimum: isNft
+        ? requirement.params.MINIMUM
+        : new Big(
+            fromWei(
+              requirement.params.MINIMUM,
+              requirement.decimals ? requirement.decimals : 18
+            )
+          ).toFixed(),
     });
-  }, [requirementParamsList]);
+  }, []);
+
+  const handleShowItems = () => {
+    if (isDisabled) return;
+    setShowItems(!showItems);
+  };
 
   return (
     <div ref={ref} className="relative ">
       <div
-        onClick={() => setShowItems(!showItems)}
+        onClick={() => handleShowItems()}
         className="flex w-full items-center justify-between bored border-gray50 bg-gray40 rounded-xl px-3 h-[43px] cursor-pointer"
       >
         <div
@@ -83,6 +119,7 @@ const SelectMethodInput = ({
           height="8px"
         />
       </div>
+
       {showItems && (
         <div className="absolute w-full top-12 bg-gray40 rounded-xl border border-gray50 overflow-y-scroll">
           <div
@@ -100,15 +137,9 @@ const SelectMethodInput = ({
             className="bg-inherit h-full px-2 w-full "
             name={SelectMethod.Minimum}
             type="number"
-            step={1}
             min={0}
             value={methodValues.minimum}
-            onChange={(e: any) =>
-              setMethodValues({
-                ...methodValues,
-                minimum: Number(e.target.value) ?? "",
-              })
-            }
+            onChange={(e) => handleChange(e.target.value)}
           />
           <div className="flex flex-col gap-3">
             <Icon
diff --git a/app/contribution-hub/content.module.scss b/app/contribution-hub/content.module.scss
index 5ba719fd..f51ad747 100644
--- a/app/contribution-hub/content.module.scss
+++ b/app/contribution-hub/content.module.scss
@@ -75,11 +75,11 @@
 }
 
 .requireModal {
-  @apply text-[14px] font-semibold flex flex-col gap-2 items-center justify-center cursor-pointer max-w-[184px] h-[84px] bg-gray40 border border-gray70 rounded-xl;
+  @apply text-sm font-semibold flex flex-col gap-2 items-center justify-center cursor-pointer max-w-[184px] h-[84px] bg-gray40 border border-gray70 rounded-xl;
 }
 
 .requireModalIntegration {
-  @apply bg-gray40 border mt-1 border-gray70 text-gray100 text-[14px] font-semibold cursor-pointer max-w-[376px] rounded-xl px-3 h-[48px] flex items-center justify-between;
+  @apply bg-gray40 border mt-1 border-gray70 text-gray100 text-sm font-semibold cursor-pointer max-w-[376px] rounded-xl px-3 h-[48px] flex items-center justify-between;
 }
 
 .provider-dashboard-input {
diff --git a/app/contribution-hub/gas-tap/components/Content.tsx b/app/contribution-hub/gas-tap/components/Content.tsx
index 4034ea94..1fece803 100644
--- a/app/contribution-hub/gas-tap/components/Content.tsx
+++ b/app/contribution-hub/gas-tap/components/Content.tsx
@@ -2,44 +2,312 @@
 
 import {
   ProviderDashboardButton,
+  ProviderDashboardButtonRejected,
   ProviderDashboardButtonSuccess,
 } from "../../Buttons";
 import Icon from "@/components/ui/Icon";
-import SearchInput from "@/app/gastap/components/searchInput";
+import SearchInput from "../../prize-tap/components/SearchInput";
 import Link from "next/link";
 import RoutePath from "@/utils/routes";
+import { useCallback, useEffect, useState } from "react";
+import { useUserProfileContext } from "@/context/userProfile";
+import { getUserDonations } from "@/utils/api";
+import { useRefreshWithInitial } from "@/utils/hooks/refresh";
+import { FAST_INTERVAL } from "@/constants";
+import {
+  EvmFilters,
+  MainnetFilters,
+  StatusFilters,
+  UserDonation,
+  filterProps,
+} from "@/types";
+
+interface DonationProps {
+  donation: UserDonation;
+}
+
+enum Status {
+  Rejected = "Rejected",
+  Pending = "Pending",
+  Verified = "Verified",
+}
+
+const DonationCard = ({ donation }: DonationProps) => {
+  const isTestnet = donation.faucet.chain.isTestnet;
+  const status = donation.status;
+  return (
+    <div>
+      <div className="bg-gray30 border-2 border-gray40 w-full p-4 rounded-xl">
+        <div className="flex justify-between items-center text-gray90">
+          <div className="flex items-center text-white gap-2 font-medium text-base;">
+            <Icon iconSrc={donation.faucet.gasImageUrl} />
+            <p>{donation.faucet.chain.chainName}</p>
+          </div>
+          <div className="flex gap-2 text-2xs items-center justify-center">
+            <div className="text-center w-[50px] bg-gray50 px-1 py-[3px] rounded-md">
+              {donation.faucet.chain.chainType}
+            </div>
+            <div className="text-center w-[50px] bg-gray50 px-1 py-[3px] rounded-md">
+              {isTestnet ? "Testnet" : "Mainnet"}
+            </div>
+          </div>
+        </div>
+        <div className="flex mt-4 justify-between items-center">
+          <div className="text-gray90 text-xs">
+            <div className="mb-2">
+              Currency{" "}
+              <span className="text-white ml-2">
+                {" "}
+                {donation.faucet.chain.nativeCurrencyName}
+              </span>
+            </div>
+            <div>
+              Refill Amount{" "}
+              <span className="text-white ml-2">{donation.value}</span>
+            </div>
+          </div>
+          <div>
+            {status == Status.Pending && (
+              <ProviderDashboardButton className="animate-blinking">
+                <p>Pending...</p>
+              </ProviderDashboardButton>
+            )}
+            {status == Status.Rejected && (
+              <ProviderDashboardButtonRejected>
+                <p>Rejected</p>
+              </ProviderDashboardButtonRejected>
+            )}
+            {status == Status.Verified && (
+              <ProviderDashboardButtonSuccess>
+                <p>Done</p>
+              </ProviderDashboardButtonSuccess>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 const GasTapContent = () => {
+  const [userDonations, setUserDonations] = useState<UserDonation[]>([]);
+  const [loading, setLoading] = useState(false);
+  const { userToken } = useUserProfileContext();
+
+  const filter: filterProps = {
+    statusFilter: StatusFilters.All,
+    mainnetFilter: MainnetFilters.All,
+    evmFilter: EvmFilters.All,
+  };
+
+  const [selectedFilter, setSelectedFilter] = useState<filterProps>(filter);
+
+  const [filteredItem, setFilteredItem] = useState<UserDonation[]>([]);
+
+  const handleGetUserDonations = useCallback(async () => {
+    if (!userToken) return;
+    try {
+      const donations = await getUserDonations(userToken);
+      setUserDonations(donations.results);
+      setLoading(false);
+    } catch (e: any) {
+      setLoading(false);
+    }
+  }, [userToken]);
+
+  const handleSelectFilter = (filter: string, value: string) => {
+    if (selectedFilter[filter as keyof filterProps] == value) return;
+    setSelectedFilter({ ...selectedFilter, [filter]: value });
+    setFilteredItem([]);
+  };
+
+  const canDisplayAll =
+    selectedFilter.evmFilter === "All" &&
+    selectedFilter.mainnetFilter === "All" &&
+    selectedFilter.statusFilter === "All";
+
+  const [searchPhrase, setSearchPhrase] = useState<string>("");
+
+  const filterByPhrase = (filteredItem: UserDonation[]) => {
+    if (searchPhrase) {
+      setFilteredItem(
+        filteredItem.filter(
+          (item) =>
+            item.faucet.chain.chainName
+              .toLocaleLowerCase()
+              .includes(searchPhrase.toLocaleLowerCase()) ||
+            item.faucet.chain.chainId.includes(searchPhrase) ||
+            item.value.includes(searchPhrase)
+        )
+      );
+    } else {
+      setFilteredItem(filteredItem);
+    }
+  };
+
+  useEffect(() => {
+    if (canDisplayAll) {
+      setFilteredItem(userDonations);
+      filterByPhrase(userDonations);
+      return;
+    } else {
+      let filteredItem = userDonations.filter((item) =>
+        selectedFilter.statusFilter != "All"
+          ? item.status === selectedFilter.statusFilter
+          : item
+      );
+
+      filteredItem = filteredItem.filter((item) =>
+        selectedFilter.evmFilter != "All"
+          ? item.faucet.chain.chainType === selectedFilter.evmFilter
+          : item
+      );
+
+      const isTestnet = selectedFilter.mainnetFilter === MainnetFilters.Testnet;
+      filteredItem = filteredItem.filter((item) =>
+        selectedFilter.mainnetFilter != "All"
+          ? item.faucet.chain.isTestnet === isTestnet
+          : item
+      );
+
+      filterByPhrase(filteredItem);
+    }
+  }, [userDonations, selectedFilter, canDisplayAll, searchPhrase]);
+
+  const handleSetSearchPhrase = (str: string) => {
+    const debounce = setTimeout(() => {
+      setSearchPhrase(str);
+    }, 700);
+    return () => clearTimeout(debounce);
+  };
+
+  useRefreshWithInitial(
+    () => {
+      setLoading(true);
+      handleGetUserDonations();
+    },
+    FAST_INTERVAL,
+    []
+  );
+
   return (
     <div>
       <div>
-        <div className="flex flex-col md:flex-row  items-center justify-between ">
-          <SearchInput className="w-full md:w-1/3 st" />
-          <div className="provider-dashboard__status justify-center mt-5 md:mt-0 flex h-[40px] text-[12px] items-center align-center text-gray90 bg-gray40 border-2 border-gray30 rounded-xl w-full  md:w-auto">
-            <div>All</div>
-            <div>ongoing</div>
-            <div>verified</div>
-            <div>rejected</div>
-            <div>finished</div>
+        <div className="flex flex-col lg:flex-row  items-center gap-2 lg:gap-2 justify-between">
+          <SearchInput
+            className="w-full  sm:max-w-[270px] st"
+            handleSetSearchPhrase={handleSetSearchPhrase}
+          />
+          <div className="flex flex-col lg:flex-row gap-2 lg:gap-1 w-full sm:w-auto select-none">
+            <div className="provider-dashboard__status justify-center md:mt-0 flex h-[40px] text-xs items-center align-center text-gray90 bg-gray40 border-2 border-gray30 rounded-xl w-full  md:w-auto">
+              <div
+                className={`${
+                  selectedFilter.statusFilter == StatusFilters.All &&
+                  "text-gray100"
+                }`}
+                onClick={() => handleSelectFilter("statusFilter", "All")}
+              >
+                All
+              </div>
+              <div
+                className={`${
+                  selectedFilter.statusFilter == StatusFilters.Pending &&
+                  "text-gray100"
+                }`}
+                onClick={() => handleSelectFilter("statusFilter", "Pending")}
+              >
+                ongoing
+              </div>
+              <div
+                className={`${
+                  selectedFilter.statusFilter == StatusFilters.Verified &&
+                  "text-gray100"
+                }`}
+                onClick={() => handleSelectFilter("statusFilter", "Verified")}
+              >
+                verified
+              </div>
+              <div
+                className={`${
+                  selectedFilter.statusFilter == StatusFilters.Rejected &&
+                  "text-gray100"
+                }`}
+                onClick={() => handleSelectFilter("statusFilter", "Rejected")}
+              >
+                rejected
+              </div>
+            </div>
+            <div className="provider-dashboard__status justify-center md:mt-0 flex h-[40px] text-xs items-center align-center text-gray90 bg-gray40 border-2 border-gray30 rounded-xl w-full  md:w-auto">
+              <div
+                className={`${
+                  selectedFilter.mainnetFilter == MainnetFilters.All &&
+                  "text-gray100"
+                }`}
+                onClick={() => handleSelectFilter("mainnetFilter", "All")}
+              >
+                All
+              </div>
+              <div
+                className={`${
+                  selectedFilter.mainnetFilter == MainnetFilters.Testnet &&
+                  "text-gray100"
+                }`}
+                onClick={() => handleSelectFilter("mainnetFilter", "Testnet")}
+              >
+                Testnet
+              </div>
+              <div
+                className={`${
+                  selectedFilter.mainnetFilter == MainnetFilters.Mainnet &&
+                  "text-gray100"
+                }`}
+                onClick={() => handleSelectFilter("mainnetFilter", "Mainnet")}
+              >
+                Mainnet
+              </div>
+            </div>
+            <div className="provider-dashboard__status  justify-center md:mt-0 flex h-[40px] text-xs items-center align-center text-gray90 bg-gray40 border-2 border-gray30 rounded-xl w-full  md:w-auto">
+              <div
+                className={`${
+                  selectedFilter.evmFilter == EvmFilters.All && "text-gray100"
+                }`}
+                onClick={() => handleSelectFilter("evmFilter", "All")}
+              >
+                All
+              </div>
+              <div
+                className={`${
+                  selectedFilter.evmFilter == EvmFilters.Evm && "text-gray100"
+                }`}
+                onClick={() => handleSelectFilter("evmFilter", "EVM")}
+              >
+                EVM
+              </div>
+              <div
+                className={`${
+                  selectedFilter.evmFilter == EvmFilters.NonEvm &&
+                  "text-gray100"
+                }`}
+                onClick={() => handleSelectFilter("evmFilter", "NonEvm")}
+              >
+                nonEVM
+              </div>
+            </div>
           </div>
         </div>
         <div className="refill-token h-auto md:h-[78px] mt-4 flex w-full justify-between overflow-hidden items-center">
           <div className="flex flex-col sm:flex-row justify-between w-full items-center py-5 px-7 text-white">
             <div className="flex items-center relative">
               <div>
-                <p className="text-[16px] font-semibold">
-                  Refill Gas Tap Tokens
-                </p>{" "}
-                <p className="text-[14px] text-gray100">Provide Gas Fee.</p>
+                <p className="text-base font-semibold">Refill Gas Tap Tokens</p>{" "}
+                <p className="text-sm text-gray100">Provide Gas Fee.</p>
               </div>
               <Icon
                 className="absolute right-0 sm:right-[-45px] top-[-17px]  h-[150px] sm:h-[80px]"
                 iconSrc="/assets/images/provider-dashboard/gas-bg.png"
-                // height="80px"
               />
             </div>
             <Link
-              // onClick={() => handleSelectProvideGasFee(true)}
               href={RoutePath.PROVIDER_GASTAP_CREATE}
               className="flex mt-5 sm:mt-0 items-center justify-center cursor-pointer border-2 border-white rounded-[12px] bg-[#0C0C17] w-[226px] h-[46px]"
             >
@@ -48,111 +316,53 @@ const GasTapContent = () => {
           </div>
         </div>
         <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-          <div className="bg-gray30 border-2 border-gray40 w-full  p-4 rounded-xl">
-            <div className="flex justify-between items-center text-gray90">
-              <div className="flex items-center text-white gap-2 font-medium text-[16px];">
-                <Icon iconSrc="/assets/images/provider-dashboard/ic_polygon.svg" />
-                <p>Polygon</p>
-              </div>
-              <div className="flex gap-2 text-[10px] items-center justify-center">
-                <div className="text-center w-[50px] bg-gray50 px-1 py-[3px] rounded-[6px]">
-                  EVM
-                </div>
-                <div className="text-center w-[50px] bg-gray50 px-1 py-[3px] rounded-[6px]">
-                  Mainnet
-                </div>
-              </div>
-            </div>
-            <div className="flex mt-4 justify-between items-center">
-              <div className="text-gray90 text-[12px]">
-                <div className="mb-2">
-                  Currency <span className="text-white ml-2"> Matic</span>
-                </div>
-                <div>
-                  Refill Amount <span className="text-white ml-2">2,137</span>
-                </div>
-              </div>
-              <div>
-                <ProviderDashboardButton className="animate-blinking">
-                  <p>Pending...</p>
-                </ProviderDashboardButton>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-gray30 border-2 border-gray40 w-full  p-4 rounded-xl">
-            <div className="flex justify-between items-center text-gray90">
-              <div className="flex items-center text-white gap-2 font-medium text-[16px];">
-                <Icon iconSrc="/assets/images/provider-dashboard/ic_polygon.svg" />
-                <p>Polygon</p>
-              </div>
-              <div className="flex gap-2 text-[10px] items-center justify-center">
-                <div className="text-center w-[50px] bg-gray50 px-1 py-[3px] rounded-[6px]">
-                  EVM
-                </div>
-                <div className="text-center w-[50px] bg-gray50 px-1 py-[3px] rounded-[6px]">
-                  Mainnet
-                </div>
-              </div>
-            </div>
-            <div className="flex mt-4 justify-between items-center">
-              <div className="text-gray90 text-[12px]">
-                <div className="mb-2">
-                  Currency <span className="text-white ml-2"> Matic</span>
-                </div>
-                <div>
-                  Refill Amount <span className="text-white ml-2">2,137</span>
-                </div>
-              </div>
-              <div>
-                <ProviderDashboardButtonSuccess
-                  data-testid={`chain-show-claim`}
-                  className="text-sm m-auto"
-                >
-                  <p>Done</p>
-                </ProviderDashboardButtonSuccess>
-              </div>
-            </div>
+          {filteredItem.length > 0 &&
+            filteredItem.map((item, index) => (
+              <DonationCard donation={item} key={index} />
+            ))}
+        </div>
+        {filteredItem.length == 0 && loading && canDisplayAll && (
+          <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 animate-fadeInOut">
+            <Skeleton />
+            <Skeleton />
+            <Skeleton />
           </div>
+        )}
 
-          <div className="bg-gray30 border-2 border-gray40 w-full  p-4 rounded-xl">
-            <div className="flex justify-between items-center text-gray90">
-              <div className="flex items-center text-white gap-2 font-medium text-[16px];">
-                <Icon iconSrc="/assets/images/provider-dashboard/ic_polygon.svg" />
-                <p>Polygon</p>
-              </div>
-              <div className="flex gap-2 text-[10px] items-center justify-center">
-                <div className="text-center w-[50px] bg-gray50 px-1 py-[3px] rounded-[6px]">
-                  EVM
-                </div>
-                <div className="text-center w-[50px] bg-gray50 px-1 py-[3px] rounded-[6px]">
-                  Mainnet
-                </div>
-              </div>
-            </div>
-            <div className="flex mt-4 justify-between items-center">
-              <div className="text-gray90 text-[12px]">
-                <div className="mb-2">
-                  Currency <span className="text-white ml-2"> Matic</span>
-                </div>
-                <div>
-                  Refill Amount <span className="text-white ml-2">2,137</span>
-                </div>
-              </div>
-              <div>
-                <ProviderDashboardButtonSuccess
-                  data-testid={`chain-show-claim`}
-                  className="text-sm m-auto"
-                >
-                  <p>Done</p>
-                </ProviderDashboardButtonSuccess>
-              </div>
-            </div>
+        {filteredItem.length == 0 && !loading && (
+          <div className="w-full text-center animate-fadeIn">
+            No items found{" "}
           </div>
-        </div>
+        )}
       </div>
     </div>
   );
 };
 
 export default GasTapContent;
+
+const Skeleton = () => {
+  return (
+    <div className="bg-gray30 border-2 border-gray40 w-full p-4 rounded-xl">
+      <div className="flex justify-between items-center">
+        <div className="flex gap-2">
+          <div className="w-[30px] h-[30px] bg-gray50 rounded-md"></div>
+          <p className="w-[80px] h-[30px] bg-gray50 rounded-md"></p>
+        </div>
+        <div className="flex gap-2 items-center justify-center">
+          <div className="h-[20px] w-[50px] bg-gray50 px-1 py-[3px] rounded-md"></div>
+          <div className="h-[20px] w-[50px] bg-gray50 px-1 py-[3px] rounded-md"></div>
+        </div>
+      </div>
+      <div className="flex mt-4 justify-between items-center">
+        <div>
+          <div className="mb-2 w-[70px] h-[20px] bg-gray50 rounded-md"></div>
+          <div className="w-[70px] h-[20px] bg-gray50 rounded-md"></div>
+        </div>
+        <div>
+          <div className="w-[100px] h-[30px] bg-gray50 rounded-md"></div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/contribution-hub/gas-tap/components/ProvideGasFeeContent.tsx b/app/contribution-hub/gas-tap/components/ProvideGasFeeContent.tsx
index 74f7e557..7b545bb6 100644
--- a/app/contribution-hub/gas-tap/components/ProvideGasFeeContent.tsx
+++ b/app/contribution-hub/gas-tap/components/ProvideGasFeeContent.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import FundTransactionModal from "@/app/gastap/components/Modals/FundTransactionModal";
 import SelectChainModal from "@/app/gastap/components/Modals/SelectChainModal";
 import { ClaimButton } from "@/components/ui/Button/button";
@@ -222,7 +224,7 @@ const ProvideGasFeeContent: FC<{ initialChainId?: number }> = ({
         </div>
         <div className="w-full max-w-[452px] ">
           <div className="z-10 mt-5 flex flex-col items-center">
-            <p className="text-[14px] font-semibold mb-2">Provide Gas Fee</p>
+            <p className="text-sm font-semibold mb-2">Provide Gas Fee</p>
             <div className=" flex items-center">
               <p className="text-xs text-gray100 max-w-[300px]">
                 100% of contributions will fund distributions and transaction
@@ -270,7 +272,7 @@ const ProvideGasFeeContent: FC<{ initialChainId?: number }> = ({
                 />
                 <div
                   onClick={() => setFundAmount(balance.data?.formatted!)}
-                  className="bg-gray20 select-not hover:bg-gray40 border border-gray100 text-gray100 text-[12px] flex items-center w-[52px] h-[28px] rounded-xl justify-center cursor-pointer"
+                  className="bg-gray20 select-not hover:bg-gray40 border border-gray100 text-gray100 text-xs flex items-center w-[52px] h-[28px] rounded-xl justify-center cursor-pointer"
                 >
                   Max
                 </div>
diff --git a/app/contribution-hub/gas-tap/create/page.tsx b/app/contribution-hub/gas-tap/create/page.tsx
index edbd4e16..9af7c27c 100644
--- a/app/contribution-hub/gas-tap/create/page.tsx
+++ b/app/contribution-hub/gas-tap/create/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import ProvideGasFeeContent from "../components/ProvideGasFeeContent";
 
 const Page = () => {
diff --git a/app/contribution-hub/gas-tap/layout.tsx b/app/contribution-hub/gas-tap/layout.tsx
index 60a32708..926f8798 100644
--- a/app/contribution-hub/gas-tap/layout.tsx
+++ b/app/contribution-hub/gas-tap/layout.tsx
@@ -1,14 +1,8 @@
-import { getUserDonationsServer } from "@/utils/serverApis";
-import { cookies } from "next/headers";
 import { FC, PropsWithChildren } from "react";
 
 const ProviderDashboardGasTapLayout: FC<PropsWithChildren> = async ({
   children,
 }) => {
-  const cookieStore = cookies();
-  const token = cookieStore.get("userToken");
-  const userDonationList = await getUserDonationsServer(token!.value);
-  console.log(userDonationList);
   return <>{children}</>;
 };
 
diff --git a/app/contribution-hub/pagination.tsx b/app/contribution-hub/pagination.tsx
index f5463019..aa45280c 100644
--- a/app/contribution-hub/pagination.tsx
+++ b/app/contribution-hub/pagination.tsx
@@ -25,7 +25,7 @@ const Pagination = ({
           <ProviderDashboardButtonSubmit
             $width="100%"
             onClick={handleNextPage}
-            className="text-[14px] md:text-[12px] lg:text-[14px] mt-[2px]"
+            className="text-sm md:text-xs lg:text-sm mt-[2px]"
           >
             <p>Submit Contribution</p>
           </ProviderDashboardButtonSubmit>
diff --git a/app/contribution-hub/prize-tap/components/CardTimer.tsx b/app/contribution-hub/prize-tap/components/CardTimer.tsx
index 47285dc4..a7934356 100644
--- a/app/contribution-hub/prize-tap/components/CardTimer.tsx
+++ b/app/contribution-hub/prize-tap/components/CardTimer.tsx
@@ -62,28 +62,28 @@ export const ProviderDashboardCardTimer = ({
     <div>
       {(start && Number(days) >= 1) || !start ? (
         <div className="prize-card__timer flex items-center justify-between rounded-xl gap-4 md:px-3 py-2 bg-gray50">
-          <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+          <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
             <p className="prize-card__timer-item-value text-white font-semibold">
               {days}
             </p>
             <p className="prize-card__timer-item-label text-gray90">d</p>
           </div>
           <p className="text-sm text-white">:</p>
-          <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+          <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
             <p className="prize-card__timer-item-value text-white font-semibold">
               {hours}
             </p>
             <p className="prize-card__timer-item-label text-gray90">h</p>
           </div>
           <p className="text-sm text-white">:</p>
-          <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+          <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
             <p className="prize-card__timer-item-value text-white font-semibold">
               {minutes}
             </p>
             <p className="prize-card__timer-item-label text-gray90">m</p>
           </div>
           <p className="text-sm text-white">:</p>
-          <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+          <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
             <p className="prize-card__timer-item-value text-white font-semibold">
               {seconds}
             </p>
@@ -94,7 +94,7 @@ export const ProviderDashboardCardTimer = ({
         Number(minutes) > 0 ||
         Number(hours) > 0 ||
         Number(seconds) > 0 ? (
-        <div className="text-[10px] text-warn mt-[65px]">
+        <div className="text-2xs text-warn mt-[65px]">
           Ends in {hours} hours and {minutes} minutes and {seconds} seconds.
         </div>
       ) : null}
diff --git a/app/contribution-hub/prize-tap/components/Content.tsx b/app/contribution-hub/prize-tap/components/Content.tsx
index cb70ae81..36161d21 100644
--- a/app/contribution-hub/prize-tap/components/Content.tsx
+++ b/app/contribution-hub/prize-tap/components/Content.tsx
@@ -13,17 +13,15 @@ import {
   ProviderDashboardButtonShowDetails,
 } from "../../Buttons";
 import SearchInput from "./SearchInput";
-// import { usePrizeOfferFormContext } from "@/context/providerDashboardContext";
 import { ProviderDashboardCardTimer } from "./CardTimer";
 import Styles from "./content.module.scss";
 import "./content.module.scss";
-// import OfferPrizeForm from "./OfferPrizeForm";
 import WinnersModal from "./Modals/winnersModal";
 import RoutePath from "@/utils/routes";
 import Link from "next/link";
 import { useUserProfileContext } from "@/context/userProfile";
 import { getUserRaffles } from "@/utils/api";
-import { useFastRefresh, useRefreshWithInitial } from "@/utils/hooks/refresh";
+import { useRefreshWithInitial } from "@/utils/hooks/refresh";
 import { FAST_INTERVAL } from "@/constants";
 
 interface PrizeCardProp {
@@ -41,8 +39,6 @@ enum RaffleStatus {
 }
 
 const PrizeCard = ({ prize }: PrizeCardProp) => {
-  // const { handleCheckForReason } = usePrizeOfferFormContext();
-
   const [winnersResultRaffle, setWinnersResultRaffle] =
     useState<UserRafflesProps | null>(null);
 
@@ -67,7 +63,7 @@ const PrizeCard = ({ prize }: PrizeCardProp) => {
               width="15px"
               height="14px"
             />
-            <p className="text-gray100 text-[10px] font-medium">
+            <p className="text-gray100 text-2xs font-medium">
               on {prize.chain.chainName}
             </p>
           </div>
@@ -85,7 +81,7 @@ const PrizeCard = ({ prize }: PrizeCardProp) => {
         </div>
         <div>
           <div className="providePrize_stats flex justify-between my-2">
-            <div className={"text-white text-[14px] font-medium"}>
+            <div className={"text-white text-sm font-medium"}>
               {prize.prizeName}
             </div>
             {new Date(prize.startAt) < new Date() &&
@@ -115,7 +111,7 @@ const PrizeCard = ({ prize }: PrizeCardProp) => {
               </ProviderDashboardButtonRejected>
             )}
           </div>
-          <div className="providePrize_creator text-[12px] text-gray90 font-medium">
+          <div className="providePrize_creator text-xs text-gray90 font-medium">
             by {prize.creatorName}
           </div>
         </div>
@@ -143,7 +139,7 @@ const PrizeCard = ({ prize }: PrizeCardProp) => {
             new Date(prize.deadline) < new Date()) ? (
           <div className="providePrize_timer absolute bottom-3 right-4 left-4">
             {prize.numberOfOnchainEntries ? (
-              <div className="providePrize_Spots bg-gray50 rounded-xl text-[14px] font-medium text-white h-[48px] my-3 flex items-center justify-center">
+              <div className="providePrize_Spots bg-gray50 rounded-xl text-sm font-medium text-white h-[48px] my-3 flex items-center justify-center">
                 {prize.maxNumberOfEntries - prize.numberOfOnchainEntries}{" "}
                 {prize.status === RaffleStatus.FINISHED
                   ? " Spots Enrolled"
@@ -169,7 +165,7 @@ const PrizeCard = ({ prize }: PrizeCardProp) => {
               startTime={prize.startAt}
               FinishTime={prize.deadline}
             />
-            <div className="providePrize_Spots absolute bottom-0 right-4 left-4 bg-gray50 rounded-xl text-[14px] font-medium text-white h-[48px] my-3 flex items-center justify-center">
+            <div className="providePrize_Spots absolute bottom-0 right-4 left-4 bg-gray50 rounded-xl text-sm font-medium text-white h-[48px] my-3 flex items-center justify-center">
               <div className="relative w-full text-center">
                 <p>
                   {prize.maxNumberOfEntries - prize.numberOfOnchainEntries}{" "}
@@ -198,7 +194,7 @@ const PrizeCard = ({ prize }: PrizeCardProp) => {
           </div>
         ) : (
           <div className="providePrize_timer absolute bottom-3 right-4 left-4">
-            <div className="providePrize_Spots bg-gray50 rounded-xl text-[14px] font-medium text-white h-[48px] my-3 flex items-center justify-center">
+            <div className="providePrize_Spots bg-gray50 rounded-xl text-sm font-medium text-white h-[48px] my-3 flex items-center justify-center">
               <p>
                 {prize.numberOfOnchainEntries}{" "}
                 {prize.numberOfOnchainEntries > 1 ? "spots" : "spot"} Enrolled
@@ -206,7 +202,7 @@ const PrizeCard = ({ prize }: PrizeCardProp) => {
             </div>
             <div
               onClick={() => handleWinnersResult(prize)}
-              className="bg-gray50 rounded-xl cursor-pointer border border-gray70 text-[10px] font-medium text-gray100 h-[48px] flex items-center justify-center"
+              className="bg-gray50 rounded-xl cursor-pointer border border-gray70 text-2xs font-medium text-gray100 h-[48px] flex items-center justify-center"
             >
               <p>
                 {prize.numberOfOnchainEntries >= 1 &&
@@ -339,7 +335,7 @@ const PrizeTapContent = () => {
             handleSetSearchPhrase={handleSetSearchPhrase}
           />
           <div
-            className={`${Styles.providerDashboardStatus} select-not justify-center mt-5 md:mt-0 flex h-[40px] text-[12px] items-center align-center text-gray90 bg-gray40 border-2 border-gray30 rounded-xl w-full  md:w-auto`}
+            className={`${Styles.providerDashboardStatus} select-not justify-center mt-5 md:mt-0 flex h-[40px] text-xs items-center align-center text-gray90 bg-gray40 border-2 border-gray30 rounded-xl w-full  md:w-auto`}
           >
             <div
               className={`${
@@ -389,8 +385,8 @@ const PrizeTapContent = () => {
           <div className="flex flex-col sm:flex-row justify-between w-full items-center py-5 px-7 text-white">
             <div className="flex items-center relative">
               <div>
-                <p className="text-[16px] font-semibold">Offer a New Prize</p>{" "}
-                <p className="text-[14px] text-gray100">
+                <p className="text-base font-semibold">Offer a New Prize</p>{" "}
+                <p className="text-sm text-gray100">
                   Here you can provide an NFT or Token for Prize Tap.
                 </p>
               </div>
@@ -443,10 +439,10 @@ const Skeleton = () => {
           </div>
           <div>
             <div className="providePrize_stats flex justify-between my-2">
-              <div className="text-white text-[14px] font-medium rounded bg-gray50 w-[30%] h-[20px]"></div>
-              <div className="text-white text-[14px] font-medium rounded bg-gray50 w-[30%] h-[20px]"></div>
+              <div className="text-white text-sm font-medium rounded bg-gray50 w-[30%] h-[20px]"></div>
+              <div className="text-white text-sm font-medium rounded bg-gray50 w-[30%] h-[20px]"></div>
             </div>
-            <div className="providePrize_creator text-[12px] text-gray90 font-medium bg-gray50 w-[30%] h-[20px] mt-5"></div>
+            <div className="providePrize_creator text-xs text-gray90 font-medium bg-gray50 w-[30%] h-[20px] mt-5"></div>
           </div>
 
           <div className="absolute bottom-3 right-4 left-0">
diff --git a/app/contribution-hub/prize-tap/components/CreateRaffleModal/index.tsx b/app/contribution-hub/prize-tap/components/CreateRaffleModal/index.tsx
index ff2cc343..3874eec4 100644
--- a/app/contribution-hub/prize-tap/components/CreateRaffleModal/index.tsx
+++ b/app/contribution-hub/prize-tap/components/CreateRaffleModal/index.tsx
@@ -10,13 +10,10 @@ import {
   useWalletNetwork,
 } from "@/utils/wallet";
 import { ClaimButton } from "@/components/ui/Button/button";
-import Icon from "@/components/ui/Icon";
-import { Text } from "@/components/ui/text.style";
 import Modal from "@/components/ui/Modal/modal";
 
 const CreateRaffleModalBody = ({ chain }: { chain: Chain }) => {
   const { address, isConnected } = useWalletAccount();
-
   const { chain: activeChain } = useWalletNetwork();
   const chainId = activeChain?.id;
   const { switchChain } = useNetworkSwitcher();
@@ -29,15 +26,6 @@ const CreateRaffleModalBody = ({ chain }: { chain: Chain }) => {
   function renderWrongNetworkBody(chain: Chain) {
     return (
       <>
-        {/* <DropIconWrapper data-testid={`chain-claim-wrong-network`}>
-					<Icon
-						className="chain-logo z-10 mt-14 mb-10"
-						width="auto"
-						height="110px"
-						iconSrc={selectedRaffleForEnroll!.isPrizeNft ? tokenImgLink : selectedRaffleForEnroll!.imageUrl}
-						alt=""
-					/>
-				</DropIconWrapper> */}
         <p className="text-sm font-medium text-white mt-2 mb-12 text-center px-4 leading-6">
           You need to switch to the <strong>{chain.chainName}</strong> network.
         </p>
@@ -79,79 +67,11 @@ const CreateRaffleModalBody = ({ chain }: { chain: Chain }) => {
     );
   }
 
-  function renderSuccessBody() {
-    const handleShareClaimTwitter = () => {
-      // 	const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
-      // 		`I won ${selectedRaffleForEnroll?.name} from @Unitap_app among ${
-      // 			selectedRaffleForEnroll?.numberOfOnchainEntries
-      // 		} participants. 🤩🎉 (raffled off by @${selectedRaffleForEnroll?.twitterUrl.split('/').at(-1)})
-      // 		Try your luck to win valuable prizes at `,
-      // 	)}&url=${encodeURIComponent('unitap.app/prize-tap')}`;
-      // 	window.open(twitterUrl, '_blank');
-      // };
-      // const handleShareEnrollTwitter = () => {
-      // 	const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
-      // 		`Trying my chances to win ${
-      // 			selectedRaffleForEnroll?.name
-      // 		} at @unitap_app (raffled off by @${selectedRaffleForEnroll?.twitterUrl.split('/').at(-1)}) 💚💜
-      // 			Feeling lucky? 😎 `,
-      // 	)}&url=${encodeURIComponent('unitap.app/prize-tap')}`;
-      // 	window.open(twitterUrl, '_blank');
-    };
-
-    return (
-      <>
-        <span className="flex justify-center items-center font-medium mb-3">
-          {/* <Text className="!mb-0" width="100%" fontSize="14" color="space_green" textAlign="center">
-								successfully enrolled in {selectedRaffleForEnroll?.name} raffle
-							</Text> */}
-          <Icon
-            iconSrc="assets/images/modal/successful-state-check.svg"
-            width="22px"
-            height="auto"
-            className="ml-2"
-          />
-        </span>
-
-        <Text
-          width="100%"
-          fontSize="14"
-          color="second_gray_light"
-          className="underline cursor-pointer"
-          mb={3}
-          $textAlign="center"
-          // onClick={() => window.open(getTxUrl(chain, claimOrEnrollWithMetamaskResponse!.txHash!), '_blank')}
-        >
-          view on explorer
-        </Text>
-
-        <div className="relative w-full">
-          <button
-            // onClick={handleShareEnrollTwitter}
-            className={`gradient-outline-twitter-button w-full flex items-center justify-center bg-gray00 transition-all duration-75 hover:bg-gray20 rounded-xl border-gray00 px-3 py-4`}
-          >
-            <p className="text-sm font-semibold text-twitter">
-              Share on Twitter
-            </p>
-          </button>
-          <Icon
-            iconSrc="/assets/images/gas-tap/twitter-share.svg"
-            className="w-6 h-6 absolute right-4 top-1/2 z-10 pointer-events-none -translate-y-1/2"
-            width="auto"
-            height="26px"
-          />
-        </div>
-      </>
-    );
-  }
-
   const getEnrollModalBody = () => {
     if (!userProfile) return <RenderBrightNotConnectedBody />;
 
     if (!isConnected) return <RenderWalletNotConnectedBody />;
 
-    // if (createRaffleResponse?.state === 'Done') return renderSuccessBody();
-
     if (!chainId || chainId.toString() !== chain.chainId)
       return renderWrongNetworkBody(chain);
 
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/ContactInformation.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/ContactInformation.tsx
index 9df35e01..0410b640 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/ContactInformation.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/ContactInformation.tsx
@@ -85,7 +85,7 @@ const ContactInformation = ({
             {index == 3 && <p className="mt-2 mb-3">Contact info</p>}
             <section className="relative" key={index}>
               <div
-                className={`flex gap-5 overflow-hidden text-gray80 text-[12px] bg-gray40 border ${
+                className={`flex gap-5 overflow-hidden text-gray80 text-xs bg-gray40 border ${
                   index >= 3 ? "mb-2" : ""
                 } ${
                   (field.required && showErrors && !data[field.name]) ||
@@ -110,14 +110,14 @@ const ContactInformation = ({
                 />
               </div>
               {field.required && showErrors && !data[field.name] && (
-                <p className="text-error text-[10px] m-0 -bottom-4 p-0 absolute left-1">
+                <p className="text-error text-2xs m-0 -bottom-4 p-0 absolute left-1">
                   Required
                 </p>
               )}
               {showErrors &&
                 data[field.name] &&
                 !(socialMediaValidation as any)[field.name] && (
-                  <p className="text-error text-[10px] m-0 mt-[2px] p-0 absolute left-1">
+                  <p className="text-error text-2xs m-0 mt-[2px] p-0 absolute left-1">
                     Invalid input
                   </p>
                 )}
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/DepositContent.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/DepositContent.tsx
index 42dcd8f3..452b2ab5 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/DepositContent.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/DepositContent.tsx
@@ -22,8 +22,8 @@ const DepositContent = ({
         width={isNFT ? "84x" : "90px"}
       />
       <div>
-        <p className="text-[14px] font-semibold text-white">{title}</p>
-        <p className="text-gray100 text-[12px] mt-2">{description}</p>
+        <p className="text-sm font-semibold text-white">{title}</p>
+        <p className="text-gray100 text-xs mt-2">{description}</p>
       </div>
     </div>
   );
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/DisplaySelectedTokenOrNft.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/DisplaySelectedTokenOrNft.tsx
index 9d066ff6..ca9b27f7 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/DisplaySelectedTokenOrNft.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/DisplaySelectedTokenOrNft.tsx
@@ -7,7 +7,7 @@ interface Prop {
 
 const DisplaySelectedTokenOrNft = ({ data }: Prop) => {
   return (
-    <div className="flex w-full text-white text-[14px] mt-4 ">
+    <div className="flex w-full text-white text-sm mt-4 ">
       {!data.isNft ? (
         <div className=" gap-1 w-full flex bg-gray50 rounded-xl h-[43px] overflow-hidden">
           <div className="flex gap-2 items-center bg-gray30 px-4 min-w-[123px]">
@@ -33,7 +33,7 @@ const DisplaySelectedTokenOrNft = ({ data }: Prop) => {
                 {data.nftTokenIds.length} {data.nftName}{" "}
                 {data.nftTokenIds.length > 1 ? "NFTs" : "NFT"}
               </div>
-              <div className="text-gray90 text-[10px]">
+              <div className="text-gray90 text-2xs">
                 {data.nftTokenIds.join(", ")}
               </div>
             </div>
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/FormYouFilled.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/FormYouFilled.tsx
index 9aaa75ee..a0f1fea9 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/FormYouFilled.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/FormYouFilled.tsx
@@ -49,7 +49,7 @@ const FormYouFilled = ({ data }: Prop) => {
           <p className="mb-8">{prizeName}</p>
         </div>
         <div className="flex items-center bg-gray50 justify-center gap-2 absolute bottom-[-12px] left-7 border border-gray70 rounded-[3px] p-1 min-w-[150px] min-h-[25px]">
-          <p className="text-gray100 text-[10px] font-semibold">
+          <p className="text-gray100 text-2xs font-semibold">
             on{" "}
             {data.selectedChain?.chainName ? data.selectedChain.chainName : ""}
           </p>
@@ -60,7 +60,7 @@ const FormYouFilled = ({ data }: Prop) => {
           />
         </div>
       </div>
-      <div className="bg-gray30 border border-gray40 rounded-md min-h-[100px] max-h-[208px] text-[14px] text-white p-4">
+      <div className="bg-gray30 border border-gray40 rounded-md min-h-[100px] max-h-[208px] text-sm text-white p-4">
         <div className="flex justify-between">
           <div className="flex items-center">
             <p>{prizeName}</p>
@@ -98,10 +98,10 @@ const FormYouFilled = ({ data }: Prop) => {
             ) : null}
           </div>
         </div>
-        <div className="text-gray80 text-[16px] mt-1 mb-2">
+        <div className="text-gray80 text-base mt-1 mb-2">
           by {data.provider}
         </div>
-        <div className="text-[14px] text-gray100 text-xs leading-5 mb-6 grow shrink-0 basis-auto text-justify">
+        <div className="text-sm h-[40px] max-h-[40px] text-justify">
           {data.description}
         </div>
         <div className="flex gap-2 mb-2 ">
@@ -109,7 +109,7 @@ const FormYouFilled = ({ data }: Prop) => {
             ? requirementList.map((item, index) => {
                 return (
                   <div
-                    className="text-gray100 border border-gray70 bg-gray50 p-1 px-2 text-[10px] rounded"
+                    className="text-gray100 border border-gray70 bg-gray50 p-1 px-2 text-2xs rounded"
                     key={index}
                   >
                     {item.isNotSatisfy && "Not "} {item.title}
@@ -125,7 +125,7 @@ const FormYouFilled = ({ data }: Prop) => {
         >
           <span className="flex flex-row items-center justify-between w-full gap-4 ">
             <div className="flex flex-row gap-4 justify-between w-full  items-center bg-gray40 px-5 h-full py-1 rounded-xl">
-              <p className="text-[12px] text-gray100">0 people enrolled</p>
+              <p className="text-xs text-gray100">0 people enrolled</p>
               <RaffleCardTimerSubmitContribution
                 startTime={new Date(data.startTimeStamp * 1000).toString()}
                 FinishTime={new Date(data.endTimeStamp * 1000).toString()}
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RaffleCardTimerSubmitContribution.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RaffleCardTimerSubmitContribution.tsx
index d154edc7..5e6d3e37 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RaffleCardTimerSubmitContribution.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RaffleCardTimerSubmitContribution.tsx
@@ -49,7 +49,7 @@ export const RaffleCardTimerSubmitContribution = ({
   }, []);
 
   return (
-    <div className="prize-card__timer flex items-center justify-between rounded-xl gap-4 md:px-3 p-1 text-[8px]">
+    <div className="prize-card__timer flex items-center justify-between rounded-xl gap-4 md:px-3 text-[8px]">
       <div className="prize-card__timer-item flex flex-col justify-between items-center">
         <p className="prize-card__timer-item-value text-white font-semibold">
           {days}
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RenderInitialBody.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RenderInitialBody.tsx
index 0fdd4414..41ed63ec 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RenderInitialBody.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RenderInitialBody.tsx
@@ -51,7 +51,7 @@ const RenderInitialBody = ({ data }: Prop) => {
   ]);
   return (
     <div className="flex flex-col select-none">
-      <div className="text-gray100 text-[14px] ">
+      <div className="text-gray100 text-sm ">
         This is how your card will appear. If you are sure of the accuracy of
         the form you filled out, please submit your contribution.
       </div>
@@ -62,7 +62,7 @@ const RenderInitialBody = ({ data }: Prop) => {
             <ProviderDashboardButtonSubmit
               onClick={handleCheckConnection}
               $width="100%"
-              className="text-[14px] md:text-[12px] lg:text-[14px] mt-5"
+              className="text-sm md:text-xs lg:text-sm mt-5"
               data-testid="fund-action"
             >
               Switch Network
@@ -89,7 +89,7 @@ const RenderInitialBody = ({ data }: Prop) => {
             <ProviderDashboardButtonSubmit
               onClick={handleCreateRaffle}
               $width="100%"
-              className="text-[14px] md:text-[12px] lg:text-[14px] mt-5"
+              className="text-sm md:text-xs lg:text-sm mt-5"
               disabled={createRaffleLoading}
             >
               {createRaffleLoading ? (
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RenderSocialMedia.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RenderSocialMedia.tsx
index da24b836..0b23fb7e 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RenderSocialMedia.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/components/ShowPreviewModal/RenderSocialMedia.tsx
@@ -10,7 +10,7 @@ interface Prop {
 
 const RenderSocialMedia = ({ data }: Prop) => {
   return (
-    <div className="grid gap-5 text-gray100 text-[12px] grid-cols-[1fr] md:grid-cols-[1fr_1fr]">
+    <div className="grid gap-5 text-gray100 text-xs grid-cols-[1fr] md:grid-cols-[1fr_1fr]">
       {socialMedias.map(
         (item, index) =>
           data[item as keyof ProviderDashboardFormDataProp] && (
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/index.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/index.tsx
index f9f9b910..3117c7a8 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/index.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/DepositPrize/index.tsx
@@ -127,7 +127,7 @@ const DepositPrize = ({
       ) : address && !isRightChain && data.selectedChain ? (
         <ProviderDashboardButtonSubmit
           onClick={handleCheckConnection}
-          className="text-[14px] max-w-[452px] mt-[2px]"
+          className="text-sm max-w-[452px] mt-[2px]"
           data-testid="fund-action"
         >
           Switch Network
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/InformationVerification.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/InformationVerification.tsx
index 0c17ee9d..b665b841 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/InformationVerification.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/InformationVerification.tsx
@@ -9,10 +9,10 @@ import RoutePath from "@/utils/routes";
 const InformationVerification = () => {
   const { selectedRaffleForCheckReason } = usePrizeOfferFormContext();
   return (
-    <div className="flex flex-col gap-5 w-full max-w-[452px] text-gray100 font-medium text-[12px] text-center animate-fadeIn">
+    <div className="flex flex-col gap-5 w-full max-w-[452px] text-gray100 font-medium text-xs text-center animate-fadeIn">
       <div className="flex flex-col gap-5 min-h-[292px]">
         <Icon iconSrc="/assets/images/provider-dashboard/diamond.png" />
-        <div className="flex items-center text-[14px] justify-center text-white font-semibold gap-2">
+        <div className="flex items-center text-sm justify-center text-white font-semibold gap-2">
           {!selectedRaffleForCheckReason ? (
             <div className="flex items-center gap-2">
               {" "}
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/NewAddedConstraint.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/NewAddedConstraint.tsx
index 70cd690a..d6fc5f6f 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/NewAddedConstraint.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/NewAddedConstraint.tsx
@@ -47,7 +47,7 @@ const NewAddedConstraint = ({ requirement }: Props) => {
         <div className="flex items-center gap-3">
           <div
             onClick={handleClick}
-            className="cursor-pointer flex items-center justify-center p-[2px] text-gray90 text-[10px] w-[60px]  font-semibold bg-gray70 border border-gray80 rounded-lg"
+            className="cursor-pointer flex items-center justify-center p-[2px] text-gray90 text-2xs w-[60px]  font-semibold bg-gray70 border border-gray80 rounded-lg"
           >
             Edit
           </div>
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/AddNftIdListModal.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/AddNftIdListModal.tsx
index c3a33834..31eaa1ad 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/AddNftIdListModal.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/AddNftIdListModal.tsx
@@ -239,7 +239,7 @@ const AddNftIdListModalModalBody = () => {
               </div>
               {!!Number(nftRange.to) &&
                 Number(nftRange.from) >= Number(nftRange.to) && (
-                  <p className="absolute -bottom-4 left-0` text-[10px] text-error">
+                  <p className="absolute -bottom-4 left-0` text-2xs text-error">
                     Invalid range
                   </p>
                 )}
@@ -247,7 +247,7 @@ const AddNftIdListModalModalBody = () => {
               !uploadedFile &&
               !invalidInput &&
               !(Number(nftRange.from) >= Number(nftRange.to)) ? (
-                <p className="absolute -bottom-4 left-0` text-[10px] text-error">
+                <p className="absolute -bottom-4 left-0` text-2xs text-error">
                   {error}
                 </p>
               ) : null}
@@ -258,7 +258,7 @@ const AddNftIdListModalModalBody = () => {
         {selectedTab === tabsName.PASTE_IDS && (
           <div className="relative">
             <div
-              className={`flex text-gray80 text-[12px] mt-1  bg-gray40 border border-gray60 rounded-xl w-full  overflow-hidden ${
+              className={`flex text-gray80 text-xs mt-1  bg-gray40 border border-gray60 rounded-xl w-full  overflow-hidden ${
                 uploadedFile ? "opacity-[0.5]" : ""
               }`}
             >
@@ -275,13 +275,13 @@ const AddNftIdListModalModalBody = () => {
               </div>
             </div>
             {error && !textAreaData && !invalidInput ? (
-              <p className="absolute -bottom-4 left-0 text-[10px] text-error">
+              <p className="absolute -bottom-4 left-0 text-2xs text-error">
                 {error}
               </p>
             ) : null}
 
             {error && textAreaData && invalidInput ? (
-              <p className="absolute -bottom-4 left-0 text-[10px] text-error">
+              <p className="absolute -bottom-4 left-0 text-2xs text-error">
                 {error}
               </p>
             ) : null}
@@ -302,7 +302,7 @@ const AddNftIdListModalModalBody = () => {
             </p>
             <div>
               <div
-                className={` flex relative text-gray80 text-[12px] bg-gray40 border border-gray60 rounded-xl h-[44px]  w-full max-w-[452px] mt-3 ${
+                className={` flex relative text-gray80 text-xs bg-gray40 border border-gray60 rounded-xl h-[44px]  w-full max-w-[452px] mt-3 ${
                   textAreaData || nftRange.to || nftRange.from
                     ? "opacity-[.5]"
                     : ""
@@ -327,12 +327,12 @@ const AddNftIdListModalModalBody = () => {
                     </div>
 
                     {error && !uploadedFile && !invalidInput ? (
-                      <p className="absolute bottom-[-17px] left-0 text-[10px] text-error">
+                      <p className="absolute bottom-[-17px] left-0 text-2xs text-error">
                         {error}
                       </p>
                     ) : null}
                     {error && uploadedFile && invalidInput ? (
-                      <p className="absolute bottom-[-17px] left-0 text-[10px] text-error">
+                      <p className="absolute bottom-[-17px] left-0 text-2xs text-error">
                         {error}
                       </p>
                     ) : null}
@@ -344,7 +344,7 @@ const AddNftIdListModalModalBody = () => {
                     </p>
                     <button
                       onClick={handleClearUploadedFile}
-                      className="text-white text-[10px] border border-gray60 bg-gray20 p-2 rounded-xl"
+                      className="text-white text-2xs border border-gray60 bg-gray20 p-2 rounded-xl"
                     >
                       Reset Uploaded file
                     </button>
@@ -366,17 +366,17 @@ const AddNftIdListModalModalBody = () => {
               ></Lottie>
             </div>
           )}
-          <p className="absolute left-0 text-error text-[12px]">
+          <p className="absolute left-0 text-error text-xs">
             {nftStatus.length > 0 && "Invalid NFT IDs is entered"}
           </p>
 
           {error && !!uploadedFile && nftIds.length > 0 && (
-            <p className="absolute left-0 text-error text-[12px]">{error}</p>
+            <p className="absolute left-0 text-error text-xs">{error}</p>
           )}
 
           <button
             onClick={handleAddNft}
-            className={`flex w-full items-center justify-center mt-5 rounded-xl h-[43px] text-[14px] font bg-gray40 border-2 border-gray60 font-semibold overflow-hidden ${
+            className={`flex w-full items-center justify-center mt-5 rounded-xl h-[43px] text-sm font bg-gray40 border-2 border-gray60 font-semibold overflow-hidden ${
               nftContractStatus.isValid === ContractValidationStatus.NotValid ||
               (selectedTab == tabsName.CHOOSE_RANGE &&
                 (!nftRange.to || !nftRange.from)) ||
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/SelectChainDropDown.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/SelectChainDropDown.tsx
index bcfe492d..cca688ca 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/SelectChainDropDown.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/SelectChainDropDown.tsx
@@ -56,7 +56,7 @@ const SelectChainDropDown = ({ showErrors }: Prop) => {
           ) : null}
           <input
             disabled={isShowingDetails}
-            className="w-full bg-transparent text-white px-2 text-[14px]"
+            className="w-full bg-transparent text-white px-2 text-sm"
             type="text"
             value={chainName ? chainName : ""}
             placeholder="Search for Chain"
@@ -82,7 +82,7 @@ const SelectChainDropDown = ({ showErrors }: Prop) => {
                       setShowItems(false);
                       handleSelectChain(chain);
                     }}
-                    className="flex w-full items-center gap-2 text-white text-[14px] h-[46px] px-2 hover:bg-gray70 rounded-xl"
+                    className="flex w-full items-center gap-2 text-white text-sm h-[46px] px-2 hover:bg-gray70 rounded-xl"
                   >
                     <Icon iconSrc={chain.logoUrl} width="24px" />
                     <p>{chain.chainName}</p>
@@ -95,7 +95,7 @@ const SelectChainDropDown = ({ showErrors }: Prop) => {
                       setShowItems(false);
                       handleSelectChain(chain);
                     }}
-                    className="flex w-full items-center gap-2 text-white text-[14px] h-[46px] px-2 hover:bg-gray70 rounded-xl"
+                    className="flex w-full items-center gap-2 text-white text-sm h-[46px] px-2 hover:bg-gray70 rounded-xl"
                   >
                     <Icon iconSrc={chain.logoUrl} width="24px" />
                     <p>{chain.chainName}</p>
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/SelectTokenOrNft.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/SelectTokenOrNft.tsx
index a55fe7b7..19457c51 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/SelectTokenOrNft.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/components/SelectTokenOrNft.tsx
@@ -85,12 +85,15 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
         data.selectedChain && isRightChain ? "w-full" : "setOpacity w-full"
       }
     >
-      <section className="flex text-gray80 text-[12px] bg-gray30 border border-gray50 rounded-xl h-[43px] items-center w-full max-w-[452px] overflow-hidden">
+      <section className="flex text-gray80 text-xs bg-gray30 border border-gray50 rounded-xl h-[43px] items-center w-full max-w-[452px] overflow-hidden">
         <div
           className={`
           ${!data.isNft && "text-white font-medium bg-gray40 border-gray50"}
            flex cursor-pointer items-center justify-center border-r border-r-gray50 w-[50%] h-full `}
-          onClick={() => handleSelectTokenOrNft(false)}
+          onClick={() => {
+            if (!isRightChain) return;
+            handleSelectTokenOrNft(false);
+          }}
         >
           Token
         </div>
@@ -98,7 +101,10 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
           className={`
           ${data.isNft && "text-white font-medium  bg-gray40 border-gray50"}
            flex cursor-pointer items-center justify-center border-l border-l-gray50 w-[50%] h-full`}
-          onClick={() => handleSelectTokenOrNft(true)}
+          onClick={() => {
+            if (!isRightChain) return;
+            handleSelectTokenOrNft(true);
+          }}
         >
           NFT
         </div>
@@ -107,8 +113,11 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
         <div className="flex flex-col gap-5 w-full mt-4">
           <div className="relative">
             <div
-              className="flex items-center justify-center gap-1 text-white text-[10px] mb-[9px] cursor-pointer max-w-[140px]"
-              onClick={() => handleSelectNativeToken(data.isNativeToken)}
+              className="flex items-center justify-center gap-1 text-white text-2xs mb-[9px] cursor-pointer max-w-[140px]"
+              onClick={() => {
+                if (!isRightChain) return;
+                handleSelectNativeToken(data.isNativeToken);
+              }}
             >
               <Icon
                 height="16px"
@@ -119,11 +128,11 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                     : "/assets/images/provider-dashboard/check-true.svg"
                 }
               />
-              <p className="text-[14px] text-gray100 ml-1">use native token</p>
+              <p className="text-sm text-gray100 ml-1">use native token</p>
             </div>
 
             <div
-              className={`flex text-gray100 text-[12px] bg-gray40 border-[1.4px] 
+              className={`flex text-gray100 text-xs bg-gray40 border-[1.4px] 
               rounded-xl h-[43px] max-w-[452px] overflow-hidden 
               ${data.isNativeToken ? "opacity-[.5]" : "opacity-1"} 
               ${tokenAddressError ? "border-error" : "border-gray50"}`}
@@ -171,13 +180,13 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
             </div>
             {tokenContractStatus.isValid ===
               ContractValidationStatus.NotValid && (
-              <p className="text-error text-[10px] m-0 p-0 mt-[2px] absolute ">
+              <p className="text-error text-2xs m-0 p-0 mt-[2px] absolute ">
                 Invalid Token Contract Address
               </p>
             )}
 
             {showErrors && !data.tokenContractAddress && (
-              <p className="text-error text-[10px] m-0 p-0 mt-[2px] absolute left-1">
+              <p className="text-error text-2xs m-0 p-0 mt-[2px] absolute left-1">
                 Required
               </p>
             )}
@@ -239,7 +248,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                 className="py-2"
               />
               <div
-                className={`flex gap-2 text-gray100 opacity-50 text-[12px] bg-gray40 border border-gray50 rounded-xl h-[43px] pr-4 items-center justify-between overflow-hidden w-full max-w-[452px]`}
+                className={`flex gap-2 text-gray100 opacity-50 text-xs bg-gray40 border border-gray50 rounded-xl h-[43px] pr-4 items-center justify-between overflow-hidden w-full max-w-[452px]`}
               >
                 <div className="bg-gray30 flex h-full w-full max-w-[148px] items-center justify-center text-center">
                   <p>Total Amount</p>
@@ -256,16 +265,16 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
 
             {showErrors &&
             (!data.totalAmount || Number(data.totalAmount) <= 0) ? (
-              <p className="text-error text-[10px] mt-[2px] m-0 p-0 absolute -bottom-4">
+              <p className="text-error text-2xs mt-[2px] m-0 p-0 absolute -bottom-4">
                 Required
               </p>
             ) : Number(data.winnersCount) > 500 ? (
-              <p className="text-error text-[10px] mt-[2px] m-0 p-0 absolute -bottom-4">
+              <p className="text-error text-2xs mt-[2px] m-0 p-0 absolute -bottom-4">
                 The maximum number of winners is 500.
               </p>
             ) : (
               insufficientBalance && (
-                <p className="text-error text-[10px] mt-[2px] m-0 p-0 absolute -bottom-4">
+                <p className="text-error text-2xs mt-[2px] m-0 p-0 absolute -bottom-4">
                   Insufficient Balance
                 </p>
               )
@@ -277,7 +286,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
           <div className="relative">
             <div
               className={`
-							 flex text-gray100 text-[12px] bg-gray40 border ${
+							 flex text-gray100 text-xs bg-gray40 border ${
                  nftAddressError ? "border-error" : "border-gray50"
                } ${
                 data.nftTokenIds.length >= 1 ? "opacity-[0.5]" : "opacity-1"
@@ -319,13 +328,13 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
               )}
             </div>
             {showErrors && !data.nftContractAddress && (
-              <p className="text-error text-[10px] m-0 p-0 mt-[2px] absolute left-1">
+              <p className="text-error text-2xs m-0 p-0 mt-[2px] absolute left-1">
                 Required
               </p>
             )}
             {nftContractStatus.isValid ===
               ContractValidationStatus.NotValid && (
-              <p className="text-error text-[10px] m-0 p-0 mt-[2px] absolute ">
+              <p className="text-error text-2xs m-0 p-0 mt-[2px] absolute ">
                 Invalid NFT Contract Address
               </p>
             )}
@@ -340,7 +349,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
             </div>
             <div
               className={`
-							 flex text-gray100 text-[12px] bg-gray40 border ${
+							 flex text-gray100 text-xs bg-gray40 border ${
                  Number(numberOfNfts) > 500 ||
                  (data.nftTokenIds.length > 0 &&
                    data.nftTokenIds.length != Number(numberOfNfts))
@@ -375,23 +384,23 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                 />
               </div>
               {Number(numberOfNfts) > 500 && (
-                <p className="absolute text-error text-[10px] m-0 p-0 -bottom-4 left-0">
+                <p className="absolute text-error text-2xs m-0 p-0 -bottom-4 left-0">
                   Maximum is 500
                 </p>
               )}
             </div>
             {data.nftTokenIds.length > 0 &&
               data.nftTokenIds.length != Number(numberOfNfts) && (
-                <p className="absolute text-error text-[10px] m-0 p-0 -bottom-4 left-0">
+                <p className="absolute text-error text-2xs m-0 p-0 -bottom-4 left-0">
                   Number of NFTs are not equal with Number of NFts you added.
                 </p>
               )}
           </div>
           {data.nftTokenIds.length > 0 ? (
             <div className="flex relative justify-between items-center mt-[4px] bg-gray50 border max-h-[44px] border-gray60 rounded-xl p-2 px-5">
-              <div className="text-white text-[12px]">
+              <div className="text-white text-xs">
                 <p>{data.nftTokenIds.length} NFT ID added</p>
-                <div className="flex text-gray90 text-[10px]">
+                <div className="flex text-gray90 text-2xs">
                   <p>
                     {data.nftTokenIds.length > 1
                       ? data.nftTokenIds.join(", ")
@@ -402,7 +411,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
               <div className="flex gap-3">
                 <button
                   onClick={() => openAddNftIdListModal()}
-                  className="text-gray90 text-[10px] w-[60px] h-[20px] rounded bg-gray70 border border-gray80 flex items-center justify-center"
+                  className="text-gray90 text-2xs w-[60px] h-[20px] rounded bg-gray70 border border-gray80 flex items-center justify-center"
                 >
                   Edit
                 </button>
@@ -420,7 +429,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                   if (!numberOfNfts) return;
                   openAddNftIdListModal();
                 }}
-                className={`flex text-white text-[12px] ${
+                className={`flex text-white text-xs ${
                   nftContractStatus.isValid ===
                     ContractValidationStatus.NotValid ||
                   !numberOfNfts ||
@@ -443,7 +452,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                 </div>
               </div>
               {data.nftTokenIds.length == 0 && showErrors && (
-                <p className="absolute text-error text-[10px] m-0 p-0 mt-[2px] ml-1">
+                <p className="absolute text-error text-2xs m-0 p-0 mt-[2px] ml-1">
                   Required
                 </p>
               )}
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/index.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/index.tsx
index d7fc0cfa..db5b454e 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/index.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/PrizeInfo/index.tsx
@@ -82,7 +82,7 @@ const PrizeInfo = ({
       >
         <section className="w-full relative">
           <div
-            className={`flex gap-2 text-gray80 text-[12px] bg-gray40 border ${
+            className={`flex gap-2 text-gray80 text-xs bg-gray40 border ${
               showErrors && !data.provider ? "border-error" : "border-gray50 "
             } rounded-xl h-[43px] pr-4 items-center justify-between overflow-hidden w-full max-w-[452px]`}
           >
@@ -101,7 +101,7 @@ const PrizeInfo = ({
             <p>{data.provider?.length}/30</p>
           </div>
           {showErrors && !data.provider && (
-            <p className="text-error text-[10px] m-0 mt-[2px] p-0 absolute left-1">
+            <p className="text-error text-2xs m-0 mt-[2px] p-0 absolute left-1">
               Required
             </p>
           )}
@@ -113,7 +113,7 @@ const PrizeInfo = ({
 
         <section className="w-full relative">
           <div
-            className={`flex gap-2 text-gray100 text-[12px] bg-gray40 border ${
+            className={`flex gap-2 text-gray100 text-xs bg-gray40 border ${
               showErrors && !data.description
                 ? "border-error"
                 : "border-gray50 "
@@ -134,7 +134,7 @@ const PrizeInfo = ({
             <p>{data.description?.length}/100</p>
           </div>
           {showErrors && !data.description && (
-            <p className="text-error text-[10px] m-0 mt-[2px] p-0 absolute left-1">
+            <p className="text-error text-2xs m-0 mt-[2px] p-0 absolute left-1">
               Required
             </p>
           )}
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/Requirements/components/ConstraintListModal.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/Requirements/components/ConstraintListModal.tsx
index 55536a95..32a0b08c 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/Requirements/components/ConstraintListModal.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/Requirements/components/ConstraintListModal.tsx
@@ -51,7 +51,7 @@ export const InitialBody = () => {
           className="cursor-pointer z-[999999]"
         />
       </div>
-      <p className="text-white text-[14px] font-medium">General</p>
+      <p className="text-white text-sm font-medium">General</p>
       <div className="grid grid-cols-2 gap-2.5 row-gap-2 w-full items-center justify-center text-center">
         {constraintsListApi!.map((constraint, index) => (
           <div
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/Requirements/index.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/Requirements/index.tsx
index e74a98c5..3797a158 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/Requirements/index.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/Requirements/index.tsx
@@ -14,7 +14,7 @@ const Requirements = ({
 
   return (
     <div className="flex flex-col justify-center items-center w-full animate-fadeIn">
-      <div className="text-gray100 min-h-[424px] text-[12px] font-medium flex flex-col w-full  max-w-[452px] min-w-[300px] select-not">
+      <div className="text-gray100 min-h-[424px] text-xs font-medium flex flex-col w-full  max-w-[452px] min-w-[300px] select-not">
         <p className="mb-4">
           Add any requirements for Enrolling or leave it free.
         </p>
@@ -23,7 +23,7 @@ const Requirements = ({
         ))}
         <div
           onClick={openRequirementModal}
-          className=" flex cursor-pointer items-center gap-2 bg-gray40 h-[44px] rounded-xl px-4 text-white text-[12px]"
+          className=" flex cursor-pointer items-center gap-2 bg-gray40 h-[44px] rounded-xl px-4 text-white text-xs"
         >
           <Icon
             iconSrc="/assets/images/provider-dashboard/add-requirement.svg"
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/ManualDuration.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/ManualDuration.tsx
index fca87e31..062f0fc5 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/ManualDuration.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/ManualDuration.tsx
@@ -36,7 +36,7 @@ const ManualDuration = ({ showErrors }: ManualDurationProp) => {
           </div>
         ))}
       </div>
-      <div className="text-[14px] grid gap-11 grid-cols-1 md:grid-cols-2 items-center justify-between mt-4 md:mt-2">
+      <div className="text-sm grid gap-11 grid-cols-1 md:grid-cols-2 items-center justify-between mt-4 md:mt-2">
         <div className="text-gray100  cursor-pointer underline w-full">
           <EndDateComp showErrors={showErrors} />
         </div>
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/PeopleLimitation.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/PeopleLimitation.tsx
index 5ccf4e53..cd740e59 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/PeopleLimitation.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/PeopleLimitation.tsx
@@ -8,7 +8,7 @@ interface PeopleLimitationProp {
 const PeopleLimitation = ({ showErrors }: PeopleLimitationProp) => {
   const { data, handleChange, isShowingDetails } = usePrizeOfferFormContext();
   return (
-    <div className="text-gray80 text-[12px] w-full max-w-[452px] relative mt-[-2px] ">
+    <div className="text-gray80 text-xs w-full max-w-[452px] relative mt-[-2px] ">
       <div
         className={`border ${
           showErrors && !showErrors.maximumLimitationStatus
@@ -31,7 +31,7 @@ const PeopleLimitation = ({ showErrors }: PeopleLimitationProp) => {
         />
       </div>
       {showErrors && !showErrors.maximumLimitationStatus && (
-        <p className="text-error text-[10px] m-0 p-0 absolute mt-1">
+        <p className="text-error text-2xs m-0 p-0 absolute mt-1">
           {showErrors?.maximumLimitationMessage}
         </p>
       )}
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/StartDateComp.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/StartDateComp.tsx
index e121a5c3..935af523 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/StartDateComp.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/TimeEnrollLimitation/components/StartDateComp.tsx
@@ -42,13 +42,13 @@ const StartDateComp = ({ showErrors }: StartDateCompProp) => {
   return (
     <div className="relative w-full">
       <div
-        className={`flex text-[12px] bg-gray40 border ${
+        className={`flex text-xs bg-gray40 border ${
           showErrors && showErrors.startDateStatus == false
             ? "border-error"
             : "border-gray50"
         } rounded-xl h-[43px] items-center w-full max-w-[452px] overflow-hidden`}
       >
-        <p className="text-gray100 text-[12px] w-full max-w-[148px] bg-gray30 h-full flex items-center justify-center">
+        <p className="text-gray100 text-xs w-full max-w-[148px] bg-gray30 h-full flex items-center justify-center">
           Start Date & Time
         </p>
         <DatePicker
@@ -82,7 +82,7 @@ const StartDateComp = ({ showErrors }: StartDateCompProp) => {
         />
       </div>
       {showErrors && showErrors.startDateStatus == false && (
-        <p className="text-error text-[10px] m-0 mt-[2px] p-0 absolute">
+        <p className="text-error text-2xs m-0 mt-[2px] p-0 absolute">
           {showErrors && showErrors.statDateStatusMessage}
         </p>
       )}
diff --git a/app/contribution-hub/prize-tap/components/OfferPrizeForm/index.tsx b/app/contribution-hub/prize-tap/components/OfferPrizeForm/index.tsx
index 2455dd1b..f63a5e07 100644
--- a/app/contribution-hub/prize-tap/components/OfferPrizeForm/index.tsx
+++ b/app/contribution-hub/prize-tap/components/OfferPrizeForm/index.tsx
@@ -57,7 +57,7 @@ const OfferPrizeForm = ({ detailRafflePk, verificationRafflePK }: FromProp) => {
         {page >= 1 && page < 5 && (
           <Icon
             onClick={prevPage}
-            className="absolute text-white text-[20px] top-5 left-5 cursor-pointer select-not"
+            className="absolute text-white text-xl top-5 left-5 cursor-pointer select-not"
             iconSrc="/assets/images/provider-dashboard/arrow-left.svg"
           />
         )}
diff --git a/app/contribution-hub/prize-tap/components/SearchInput.tsx b/app/contribution-hub/prize-tap/components/SearchInput.tsx
index c9fda652..849408af 100644
--- a/app/contribution-hub/prize-tap/components/SearchInput.tsx
+++ b/app/contribution-hub/prize-tap/components/SearchInput.tsx
@@ -26,7 +26,6 @@ const SearchInput = ({
     const phrase: string = event.target.value;
     setSearchPhraseInput(phrase);
     handleSetSearchPhrase(phrase);
-    // changeSearchPhrase!(phrase);
     updateURLQuery(phrase);
   };
 
diff --git a/app/contribution-hub/prize-tap/components/content.module.scss b/app/contribution-hub/prize-tap/components/content.module.scss
index ff00cb27..dfb71435 100644
--- a/app/contribution-hub/prize-tap/components/content.module.scss
+++ b/app/contribution-hub/prize-tap/components/content.module.scss
@@ -75,11 +75,11 @@
 }
 
 .requireModal {
-  @apply text-[14px] font-semibold flex flex-col gap-2 items-center justify-center cursor-pointer max-w-[184px] h-[84px] bg-gray40 border border-gray70 rounded-xl;
+  @apply text-sm font-semibold flex flex-col gap-2 items-center justify-center cursor-pointer max-w-[184px] h-[84px] bg-gray40 border border-gray70 rounded-xl;
 }
 
 .requireModalIntegration {
-  @apply bg-gray40 border mt-1 border-gray70 text-gray100 text-[14px] font-semibold cursor-pointer max-w-[376px] rounded-xl px-3 h-[48px] flex items-center justify-between;
+  @apply bg-gray40 border mt-1 border-gray70 text-gray100 text-sm font-semibold cursor-pointer max-w-[376px] rounded-xl px-3 h-[48px] flex items-center justify-between;
 }
 
 .provider-dashboard-input {
diff --git a/app/contribution-hub/styles.scss b/app/contribution-hub/styles.scss
index 7ef7b36c..8ecd7f47 100644
--- a/app/contribution-hub/styles.scss
+++ b/app/contribution-hub/styles.scss
@@ -3,7 +3,7 @@
 }
 
 .requireModal {
-  @apply text-[14px] font-semibold flex flex-col gap-2 items-center justify-center cursor-pointer max-w-[184px] h-[84px] bg-gray40 border border-gray70 rounded-xl;
+  @apply text-sm font-semibold flex flex-col gap-2 items-center justify-center cursor-pointer max-w-[184px] h-[84px] bg-gray40 border border-gray70 rounded-xl;
 }
 
 .enrollment-duration-wrap > div:last-child {
diff --git a/app/contribution-hub/token-tap/components/CardTimerTokenTap.tsx b/app/contribution-hub/token-tap/components/CardTimerTokenTap.tsx
index 0b0897a9..ae580b8e 100644
--- a/app/contribution-hub/token-tap/components/CardTimerTokenTap.tsx
+++ b/app/contribution-hub/token-tap/components/CardTimerTokenTap.tsx
@@ -80,29 +80,29 @@ export const CardTimerTokenTap = ({
           : "Starts in"}
         :
       </p>
-      <div className="prize-card__timer bg-gray40 flex items-center justify-between rounded-xl gap-4 md:px-3 py-2">
-        <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer bg-gray50 flex items-center justify-between rounded-xl gap-4 px-8 py-2">
+        <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
           <p className="prize-card__timer-item-value text-white font-semibold">
             {days}
           </p>
           <p className="prize-card__timer-item-label text-gray90">d</p>
         </div>
         <p className="text-sm text-white">:</p>
-        <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+        <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
           <p className="prize-card__timer-item-value text-white font-semibold">
             {hours}
           </p>
           <p className="prize-card__timer-item-label text-gray90">h</p>
         </div>
         <p className="text-sm text-white">:</p>
-        <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+        <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
           <p className="prize-card__timer-item-value text-white font-semibold">
             {minutes}
           </p>
           <p className="prize-card__timer-item-label text-gray90">m</p>
         </div>
         <p className="text-sm text-white">:</p>
-        <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+        <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
           <p className="prize-card__timer-item-value text-white font-semibold">
             {seconds}
           </p>
diff --git a/app/contribution-hub/token-tap/components/Content.tsx b/app/contribution-hub/token-tap/components/Content.tsx
index 205307c4..9436ac29 100644
--- a/app/contribution-hub/token-tap/components/Content.tsx
+++ b/app/contribution-hub/token-tap/components/Content.tsx
@@ -4,35 +4,44 @@ import {
   ProviderDashboardButton,
   ProviderDashboardButtonCheck,
   ProviderDashboardButtonRejected,
+  ProviderDashboardButtonShowDetails,
   ProviderDashboardButtonSuccess,
   ProviderDashboardButtonVerifying,
 } from "../../Buttons";
 
 import Icon from "@/components/ui/Icon";
-import SearchInput from "@/app/contribution-hub/prize-tap/components/SearchInput";
-import { ProviderDashboardCardTimer } from "@/app/contribution-hub/prize-tap/components/CardTimer";
+import SearchInput from "../../prize-tap/components/SearchInput";
 import Styles from "./content.module.scss";
 import Link from "next/link";
 import RoutePath from "@/utils/routes";
 import { getUserDistributions } from "@/utils/api/provider-dashboard";
 import { useRefreshWithInitial } from "@/utils/hooks/refresh";
 import { FAST_INTERVAL } from "@/constants";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useUserProfileContext } from "@/context/userProfile";
 import { UserTokenDistribution } from "@/types/provider-dashboard";
 import { CardTimerTokenTap } from "./CardTimerTokenTap";
 
-const handleSetSearchPhrase = () => {};
-
 interface DistributionCardProp {
   distribution: UserTokenDistribution;
 }
 
+enum Filters {
+  All = "All",
+  Pending = "PENDING",
+  Verified = "VERIFIED",
+  Rejected = "REJECTED",
+  Finished = "Finished",
+}
+
 const DistributionCard = ({ distribution }: DistributionCardProp) => {
   const [finished, setFinished] = useState<boolean>(false);
   const [isStarted, setIsStarted] = useState<boolean>(false);
+  const isStart = new Date(distribution.startAt) < new Date();
+  const isFinished = new Date(distribution.deadline) < new Date();
+  const status = distribution.status;
   return (
-    <div className="bg-gray30 border-2 border-gray40 w-full p-4 rounded-xl relative h-[264px]">
+    <div className="bg-gray30 border-2 border-gray40 w-full select-none p-4 rounded-xl relative h-[264px] ">
       <div className="provideToken-item-container">
         <div className="flex justify-between items-center">
           <div className="flex items-center gap-3">
@@ -41,29 +50,44 @@ const DistributionCard = ({ distribution }: DistributionCardProp) => {
               width="36px"
               height="36px"
             />
-            <p className="text-[14px] font-medium text-white">
+            <p className="text-sm font-medium text-white">
               {distribution.name}
             </p>
           </div>
           <div>
-            {isStarted && !finished && (
+            {status === Filters.Rejected && (
+              <ProviderDashboardButtonRejected>
+                <p>Rejected</p>
+              </ProviderDashboardButtonRejected>
+            )}
+            {status === Filters.Pending && (
+              <ProviderDashboardButtonVerifying>
+                Verifying
+              </ProviderDashboardButtonVerifying>
+            )}
+            {isStart && !isFinished && status == Filters.Verified && (
               <ProviderDashboardButton className="animate-blinking">
                 <p>Ongoing...</p>
               </ProviderDashboardButton>
             )}
-            {finished && (
-              <div className="bg-gray50 border flex items-center justify-center border-gray70 rounded-md w-[100px] h-6 text-[10px] text-gray100">
+            {!isStart && status == Filters.Verified && (
+              <ProviderDashboardButtonSuccess>
+                <p>Verified</p>
+              </ProviderDashboardButtonSuccess>
+            )}
+            {isFinished && status == Filters.Verified && (
+              <div className="bg-gray50 border flex items-center justify-center border-gray70 rounded-md w-[100px] h-6 text-2xs text-gray100">
                 Finished
               </div>
             )}
           </div>
         </div>
-        <div className="text-[10px] font-medium mt-2 text-white">
+        <div className="text-2xs font-medium mt-2 text-white">
           Decentralized verification system
         </div>
         <div className="flex justify-between my-3">
           <div className="flex items-center gap-3">
-            <div className="text-gray100 text-[10px]">
+            <div className="text-gray100 text-2xs">
               on {distribution.chain.chainName}
             </div>
             <Icon
@@ -73,25 +97,60 @@ const DistributionCard = ({ distribution }: DistributionCardProp) => {
             />
           </div>
           <div className="flex items-center gap-3">
-            <div className="text-gray80 text-[10px]">non-Repeatable</div>
+            <div className="text-gray80 text-xs">non-Repeatable</div>
             <Icon
               iconSrc="/assets/images/provider-dashboard/reload.svg"
-              width="14px"
-              height="14px"
+              width="16px"
+              height="16px"
             />
           </div>
         </div>
-        <div className="provideToken_Spots bg-gray50 rounded-xl text-[14px] font-medium text-white h-[48px] my-3 flex items-center justify-center ">
-          30 Spots Left
+        <div className="pt-2">
+          {isStart && isFinished && status === Filters.Verified && (
+            <div className="bg-gray50 rounded-xl text-sm  font-medium text-white h-[48px] flex items-center justify-center ">
+              {distribution.numberOfClaims} Spots Enrolled
+            </div>
+          )}
+
+          {isStart && !isFinished && status === Filters.Verified && (
+            <div className="bg-gray50 rounded-xl text-sm font-medium text-white h-[48px]  flex items-center justify-center ">
+              {distribution.maxNumberOfClaims - distribution.numberOfClaims}{" "}
+              Spots left
+            </div>
+          )}
         </div>
-        <div className="provideToken_timer absolute bottom-2 right-4 left-4">
-          <CardTimerTokenTap
-            startTime={distribution.startAt}
-            FinishTime={distribution.deadline}
-            finished={finished}
-            setFinished={setFinished}
-            setIsStarted={setIsStarted}
-          />
+        <div className="absolute bottom-2 right-4 left-4">
+          {status == Filters.Verified && (
+            <CardTimerTokenTap
+              startTime={distribution.startAt}
+              FinishTime={distribution.deadline}
+              finished={finished}
+              setFinished={setFinished}
+              setIsStarted={setIsStarted}
+            />
+          )}
+
+          {status == Filters.Pending && (
+            <Link
+              href={RoutePath.PROVIDER_TOKENTAP_DETAILS + "/" + distribution.id}
+            >
+              <ProviderDashboardButtonShowDetails>
+                Show Details
+              </ProviderDashboardButtonShowDetails>
+            </Link>
+          )}
+
+          <Link
+            href={
+              RoutePath.PROVIDER_TOKENTAP_VERIFICATION + "/" + distribution.id
+            }
+          >
+            {status === Filters.Rejected && (
+              <ProviderDashboardButtonCheck>
+                Check For Reasons
+              </ProviderDashboardButtonCheck>
+            )}
+          </Link>
         </div>
       </div>
     </div>
@@ -99,42 +158,161 @@ const DistributionCard = ({ distribution }: DistributionCardProp) => {
 };
 
 const TokenTapContent = () => {
+  const { userToken } = useUserProfileContext();
+
   const [userDistributions, setUserDistributions] = useState<
-    UserTokenDistribution[] | undefined
-  >();
+    UserTokenDistribution[]
+  >([]);
 
-  const { userToken } = useUserProfileContext();
+  const [filteredItems, setFilteredItems] = useState<UserTokenDistribution[]>(
+    []
+  );
+
+  const [selectedFilter, setSelectedFilter] = useState<Filters>(Filters.All);
+
+  const handleSelectFilter = (filter: any) => {
+    if (filter == selectedFilter) return;
+    setFilteredItems([]);
+    setSelectedFilter(filter);
+  };
+
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const [searchPhrase, setSearchPhrase] = useState<string>("");
+
+  const handleSetSearchPhrase = (str: string) => {
+    const debounce = setTimeout(() => {
+      setSearchPhrase(str);
+    }, 700);
+    return () => clearTimeout(debounce);
+  };
 
   const handleGetUserDistribution = useCallback(async () => {
     if (!userToken) return;
-    const res = await getUserDistributions(userToken);
-    console.log(res);
-    setUserDistributions(res);
+    try {
+      const distributions = await getUserDistributions(userToken);
+      setUserDistributions(distributions);
+      setLoading(false);
+    } catch (e: any) {
+      setLoading(false);
+    }
   }, [userToken]);
 
+  useEffect(() => {
+    if (selectedFilter === Filters.All) {
+      setFilteredItems(userDistributions);
+    }
+
+    if (selectedFilter === Filters.Rejected) {
+      setFilteredItems(
+        userDistributions.filter((item) => item.status === Filters.Rejected)
+      );
+    }
+
+    // this is ongoing filter. we have no pending filter to display
+    if (selectedFilter === Filters.Pending) {
+      setFilteredItems(
+        userDistributions.filter(
+          (item) =>
+            item.status === Filters.Verified &&
+            new Date(item.startAt) < new Date() &&
+            new Date(item.deadline) > new Date()
+        )
+      );
+    }
+
+    if (selectedFilter === Filters.Verified) {
+      setFilteredItems(
+        userDistributions.filter(
+          (item) =>
+            item.status === Filters.Verified &&
+            item.status === Filters.Verified &&
+            new Date(item.startAt) > new Date()
+        )
+      );
+    }
+
+    if (selectedFilter === Filters.Finished) {
+      setFilteredItems(
+        userDistributions.filter(
+          (item) =>
+            item.status === Filters.Verified &&
+            new Date(item.deadline) < new Date()
+        )
+      );
+    }
+    if (searchPhrase) {
+      setFilteredItems(
+        filteredItems.filter(
+          (item) =>
+            item.chain.chainName
+              .toLocaleLowerCase()
+              .includes(searchPhrase.toLocaleLowerCase()) ||
+            item.name
+              .toLocaleLowerCase()
+              .includes(searchPhrase.toLocaleLowerCase()) ||
+            item.chain.chainId.includes(searchPhrase)
+        )
+      );
+    }
+  }, [userDistributions, selectedFilter, searchPhrase]);
+
   useRefreshWithInitial(
     () => {
-      // setUserRafflesLoading(true);
+      setLoading(true);
       handleGetUserDistribution();
     },
     FAST_INTERVAL,
     []
   );
   return (
-    <>
-      <div className="flex flex-col md:flex-row items-center justify-between ">
+    <div>
+      <div className="flex flex-col md:flex-row items-center justify-between select-none">
         <SearchInput
           className="w-full md:w-1/3"
           handleSetSearchPhrase={handleSetSearchPhrase}
         />
         <div
-          className={`${Styles.provider_dashboard__status} justify-center mt-5 md:mt-0 flex h-[40px] text-[12px] items-center align-center text-gray90 bg-gray40 border-2 border-gray30 rounded-xl w-full  md:w-auto`}
+          className={`${Styles.provider_dashboard__status} justify-center mt-5 md:mt-0 flex h-[40px] text-xs items-center align-center text-gray90 bg-gray40 border-2 border-gray30 rounded-xl w-full  md:w-auto`}
         >
-          <div>All</div>
-          <div>ongoing</div>
-          <div>verified</div>
-          <div>rejected</div>
-          <div>finished</div>
+          <div
+            className={`${selectedFilter === Filters.All && "text-gray100"}`}
+            onClick={() => handleSelectFilter(Filters.All)}
+          >
+            All
+          </div>
+          <div
+            className={`${
+              selectedFilter === Filters.Pending && "text-gray100"
+            }`}
+            onClick={() => handleSelectFilter(Filters.Pending)}
+          >
+            ongoing
+          </div>
+          <div
+            className={`${
+              selectedFilter === Filters.Verified && "text-gray100"
+            }`}
+            onClick={() => handleSelectFilter(Filters.Verified)}
+          >
+            verified
+          </div>
+          <div
+            className={`${
+              selectedFilter === Filters.Rejected && "text-gray100"
+            }`}
+            onClick={() => handleSelectFilter(Filters.Rejected)}
+          >
+            rejected
+          </div>
+          <div
+            className={`${
+              selectedFilter === Filters.Finished && "text-gray100"
+            }`}
+            onClick={() => handleSelectFilter(Filters.Finished)}
+          >
+            finished
+          </div>
         </div>
       </div>
       <div
@@ -143,8 +321,8 @@ const TokenTapContent = () => {
         <div className="flex flex-col sm:flex-row justify-between w-full items-center py-5 px-7 text-white">
           <div className="flex items-center relative">
             <div>
-              <p className="text-[16px] font-semibold">Offer a New Token</p>{" "}
-              <p className="text-[14px] text-gray100">
+              <p className="text-base font-semibold">Offer a New Token</p>{" "}
+              <p className="text-sm text-gray100">
                 Here you can provide Token for Token Tap.
               </p>
             </div>
@@ -162,13 +340,51 @@ const TokenTapContent = () => {
         </div>
       </div>
       <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-        {userDistributions &&
-          userDistributions.map((distribution, index: number) => (
+        {filteredItems.length > 0 &&
+          filteredItems.map((distribution, index: number) => (
             <DistributionCard key={index} distribution={distribution} />
           ))}
       </div>
-    </>
+
+      {loading &&
+        filteredItems.length == 0 &&
+        selectedFilter === Filters.All && (
+          <div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 animate-fadeInOut">
+            <Skeleton />
+            <Skeleton />
+            <Skeleton />
+          </div>
+        )}
+
+      {filteredItems.length === 0 && !loading && (
+        <div className="text-center animate-fadeIn">
+          <p>No items found.</p>
+        </div>
+      )}
+    </div>
   );
 };
 
 export default TokenTapContent;
+
+const Skeleton = () => {
+  return (
+    <div className="bg-gray30 border-2 border-gray40 w-full p-4 rounded-xl">
+      <div className="w-full flex items-center justify-between">
+        <div className="flex gap-2 items-center">
+          <div className="min-w-[40px] min-h-[40px] bg-gray50 rounded-[50%]"></div>
+          <div className="min-w-[50px] min-h-[20px] bg-gray50"></div>
+        </div>
+        <div className="min-h-[25px] min-w-[100px] rounded-lg bg-gray50"></div>
+      </div>
+      <div className="min-h-[20px] w-[170px] rounded-md mt-3 bg-gray50"></div>
+      <div className="flex justify-between">
+        <div className="w-[85px] h-[15px] rounded-md mt-3 bg-gray50"></div>
+        <div className="w-[85px] h-[15px] rounded-md mt-3 bg-gray50"></div>
+      </div>
+      <div className="w-full h-[44px] rounded-xl mt-4 bg-gray50"></div>
+      <div className="w-[40px] h-[20px] rounded-xl mt-8 bg-gray50"></div>
+      <div className="w-full h-[50px] rounded-xl mt-3 bg-gray50"></div>
+    </div>
+  );
+};
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/DepositContent.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/DepositContent.tsx
index 430025d4..547b7ccf 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/DepositContent.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/DepositContent.tsx
@@ -9,10 +9,10 @@ type DepositContentProp = {
 const DepositContent = ({ title, description, icon }: DepositContentProp) => {
   return (
     <div className="text-center">
-      <Icon iconSrc={icon} className="mb-5" />
+      <Icon iconSrc={icon} className="mb-5" width="90px" height="90px" />
       <div>
-        <p className="text-[14px] font-semibold text-white">{title}</p>
-        <p className="text-gray100 text-[12px] mt-2">{description}</p>
+        <p className="text-sm font-semibold text-white">{title}</p>
+        <p className="text-gray100 text-xs mt-2">{description}</p>
       </div>
     </div>
   );
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/DisplaySelectedTokenOrNft.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/DisplaySelectedTokenOrNft.tsx
index 9d066ff6..ca9b27f7 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/DisplaySelectedTokenOrNft.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/DisplaySelectedTokenOrNft.tsx
@@ -7,7 +7,7 @@ interface Prop {
 
 const DisplaySelectedTokenOrNft = ({ data }: Prop) => {
   return (
-    <div className="flex w-full text-white text-[14px] mt-4 ">
+    <div className="flex w-full text-white text-sm mt-4 ">
       {!data.isNft ? (
         <div className=" gap-1 w-full flex bg-gray50 rounded-xl h-[43px] overflow-hidden">
           <div className="flex gap-2 items-center bg-gray30 px-4 min-w-[123px]">
@@ -33,7 +33,7 @@ const DisplaySelectedTokenOrNft = ({ data }: Prop) => {
                 {data.nftTokenIds.length} {data.nftName}{" "}
                 {data.nftTokenIds.length > 1 ? "NFTs" : "NFT"}
               </div>
-              <div className="text-gray90 text-[10px]">
+              <div className="text-gray90 text-2xs">
                 {data.nftTokenIds.join(", ")}
               </div>
             </div>
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/FormYouFilled.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/FormYouFilled.tsx
index 4b1d00e0..b11fbc32 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/FormYouFilled.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/FormYouFilled.tsx
@@ -1,20 +1,8 @@
 "use client";
 
-import styled from "styled-components";
 import { ProviderDashboardFormDataProp } from "@/types";
-import { DV } from "@/components/ui/designVariables";
 import { useTokenTapFromContext } from "@/context/providerDashboardTokenTapContext";
 import Icon from "@/components/ui/Icon";
-import { ProviderDashboardButtonSubmit } from "@/app/contribution-hub/Buttons";
-import RaffleCardTimerSubmitContribution from "./RaffleCardTimerSubmitContribution";
-
-const Action = styled.div`
-	display: flex;
-
-	// @media only screen and (max-width: ${DV.breakpoints.smallDesktop}) {
-		flex-direction: column;
-	}
-`;
 
 interface Prop {
   data: ProviderDashboardFormDataProp;
@@ -50,18 +38,16 @@ const FormYouFilled = ({ data }: Prop) => {
                   className="cursor-pointer"
                 />
               </div>
-              <p className="text-[10px]">Decentralized verification system</p>
+              <p className="text-2xs">Decentralized verification system</p>
             </div>
           </div>
-          <div className="text-gray100 text-[10px] mt-3">
-            {data.description}
-          </div>
+          <div className="text-gray100 text-2xs mt-3">{data.description}</div>
           <div className="flex gap-2  mt-3">
             {requirementList.length > 0
               ? requirementList.map((item, index) => {
                   return (
                     <div
-                      className="text-gray100 border border-gray70 bg-gray50 p-1 px-2 text-[10px] rounded"
+                      className="text-gray100 border border-gray70 bg-gray50 p-1 px-2 text-2xs rounded"
                       key={index}
                     >
                       {item.isNotSatisfy && "Not "} {item.title}
@@ -82,7 +68,7 @@ const FormYouFilled = ({ data }: Prop) => {
             height="12px"
           />
         </div>
-        <div className="flex text-gray90 text-[10px] bg-gray20 h-full items-center gap-2 px-2">
+        <div className="flex text-gray90 text-2xs bg-gray20 h-full items-center gap-2 px-2">
           Repeats Weekly
           <div className="opacity-50">
             <Icon
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/RenderInitialBody.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/RenderInitialBody.tsx
index e3b82fd9..9e67c3ae 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/RenderInitialBody.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/RenderInitialBody.tsx
@@ -17,8 +17,11 @@ interface Prop {
 }
 
 const RenderInitialBody = ({ data }: Prop) => {
-  const { handleCreateRaffle, createRaffleLoading, createRaffleResponse } =
-    useTokenTapFromContext();
+  const {
+    handleCreateDistribution,
+    createRaffleLoading,
+    createRaffleResponse,
+  } = useTokenTapFromContext();
   const { address, isConnected } = useWalletAccount();
   const { chain } = useWalletNetwork();
 
@@ -51,7 +54,7 @@ const RenderInitialBody = ({ data }: Prop) => {
   ]);
   return (
     <div className="flex flex-col select-none">
-      <div className="text-gray100 text-[14px] ">
+      <div className="text-gray100 text-sm ">
         This is how your card will appear. If you are sure of the accuracy of
         the form you filled out, please submit your contribution.
       </div>
@@ -62,7 +65,7 @@ const RenderInitialBody = ({ data }: Prop) => {
             <ProviderDashboardButtonSubmit
               onClick={handleCheckConnection}
               $width="100%"
-              className="text-[14px] md:text-[12px] lg:text-[14px] mt-5"
+              className="text-sm md:text-xs lg:text-sm mt-5"
               data-testid="fund-action"
             >
               Switch Network
@@ -87,9 +90,9 @@ const RenderInitialBody = ({ data }: Prop) => {
         <div className="w-full flex items-end justify-end">
           <div className="w-[200px]">
             <ProviderDashboardButtonSubmit
-              onClick={handleCreateRaffle}
+              onClick={handleCreateDistribution}
               $width="100%"
-              className="text-[14px] md:text-[12px] lg:text-[14px] mt-5"
+              className="text-sm md:text-xs lg:text-sm mt-5"
               disabled={createRaffleLoading}
             >
               {createRaffleLoading ? (
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/RenderSocialMedia.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/RenderSocialMedia.tsx
index da24b836..0b23fb7e 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/RenderSocialMedia.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/components/ShowPreviewModal/RenderSocialMedia.tsx
@@ -10,7 +10,7 @@ interface Prop {
 
 const RenderSocialMedia = ({ data }: Prop) => {
   return (
-    <div className="grid gap-5 text-gray100 text-[12px] grid-cols-[1fr] md:grid-cols-[1fr_1fr]">
+    <div className="grid gap-5 text-gray100 text-xs grid-cols-[1fr] md:grid-cols-[1fr_1fr]">
       {socialMedias.map(
         (item, index) =>
           data[item as keyof ProviderDashboardFormDataProp] && (
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/index.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/index.tsx
index 9c6d2f20..6fc0a0ba 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/index.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/DepositToken/index.tsx
@@ -4,7 +4,6 @@ import { ProviderFormPaginationProp } from "@/types";
 import DepositContent from "./components/DepositContent";
 import DisplaySelectedTokenOrNft from "./components/DisplaySelectedTokenOrNft";
 import Pagination from "@/app/contribution-hub/pagination";
-import CreateRaffleModal from "@/app/contribution-hub/prize-tap/components/CreateRaffleModal";
 import { useCallback, useEffect, useMemo } from "react";
 import ShowPreviewModal from "./components/ShowPreviewModal";
 import { useTokenTapFromContext } from "@/context/providerDashboardTokenTapContext";
@@ -29,7 +28,7 @@ const tokenDescription = {
   description: `Please proceed with depositing the Token for which you have completed the corresponding form. Please wait
 	momentarily as we validate your request. In the event of rejection, the token will promptly returned to
 	your designated wallet.`,
-  icon: "/assets/images/provider-dashboard/tokenSelected.svg",
+  icon: "/assets/images/provider-dashboard/deposit-token.png",
 };
 
 const DepositToken = ({
@@ -41,11 +40,6 @@ const DepositToken = ({
     data,
     page,
     createRaffleResponse,
-    isErc20Approved,
-    isApprovedAll,
-    handleApproveErc721Token,
-    handleApproveErc20Token,
-    approveLoading,
     isShowingDetails,
   } = useTokenTapFromContext();
 
@@ -87,12 +81,6 @@ const DepositToken = ({
     setIsWalletPromptOpen,
   ]);
 
-  const approve = data.isNativeToken
-    ? true
-    : data.isNft
-    ? isApprovedAll
-    : isErc20Approved;
-
   useEffect(() => {
     createRaffleResponse?.state === "Done" ? handleChangeFormPageNext() : null;
   }, [createRaffleResponse, handleChangeFormPageNext]);
@@ -130,7 +118,7 @@ const DepositToken = ({
       ) : address && !isRightChain && data.selectedChain ? (
         <ProviderDashboardButtonSubmit
           onClick={handleCheckConnection}
-          className="text-[14px] max-w-[452px] mt-[2px]"
+          className="text-sm max-w-[452px] mt-[2px]"
           data-testid="fund-action"
         >
           Switch Network
@@ -144,20 +132,6 @@ const DepositToken = ({
         >
           Connect Wallet
         </ProviderDashboardButtonSubmit>
-      ) : !approve && !isShowingDetails ? (
-        <ProviderDashboardButtonSubmit
-          $width="100%"
-          height="42px"
-          className="max-w-[452px] mt-[2px]"
-          onClick={
-            data.isNft && !isApprovedAll
-              ? handleApproveErc721Token
-              : handleApproveErc20Token
-          }
-          disabled={approveLoading}
-        >
-          <p>{approveLoading ? "Approving Contract..." : "Approve Contract"}</p>
-        </ProviderDashboardButtonSubmit>
       ) : (
         <Pagination
           handleChangeFormPagePrev={handleChangeFormPagePrev}
@@ -166,9 +140,6 @@ const DepositToken = ({
           func="submit"
         />
       )}
-      {data.selectedChain && !isShowingDetails && (
-        <CreateRaffleModal chain={data.selectedChain} />
-      )}
     </div>
   );
 };
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/NewAddedConstraint.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/NewAddedConstraint.tsx
index c63ead0d..6c39f30c 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/NewAddedConstraint.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/NewAddedConstraint.tsx
@@ -47,7 +47,7 @@ const NewAddedConstraint = ({ requirement }: Props) => {
         <div className="flex items-center gap-3">
           <div
             onClick={handleClick}
-            className="cursor-pointer flex items-center justify-center p-[2px] text-gray90 text-[10px] w-[60px]  font-semibold bg-gray70 border border-gray80 rounded-lg"
+            className="cursor-pointer flex items-center justify-center p-[2px] text-gray90 text-2xs w-[60px]  font-semibold bg-gray70 border border-gray80 rounded-lg"
           >
             Edit
           </div>
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenContactInformation.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenContactInformation.tsx
index 347bb6bf..debb04cf 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenContactInformation.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenContactInformation.tsx
@@ -77,13 +77,23 @@ const ContactInformation = ({
           Your website, twitter & discord will be shown on PrizeTap card.
         </p>
       </div>
-      <div className="text-gray100 text-[12px] min-h-[400px] font-medium flex flex-col gap-5 w-full max-w-[452px]">
+      <div className="text-gray100 text-xs min-h-[400px] font-medium flex flex-col gap-5 w-full max-w-[452px]">
         {contactFields.map((field, index) => (
           <div key={index}>
-            {index == 3 ? <p className=" mb-2">Contact info</p> : ""}
+            {index == 3 ? (
+              <div className="flex items-center mb-2 gap-2">
+                <p className="">Contact info </p>
+                <div className="bg-gray90 h-[3px] w-[3px] rounded-full"></div>{" "}
+                <span className="text-gray90 text-2xs">
+                  These info will not share with anybody.
+                </span>
+              </div>
+            ) : (
+              ""
+            )}
             <section className="relative" key={index}>
               <div
-                className={`flex gap-5 overflow-hidden text-gray80 text-[12px] bg-gray40 border ${
+                className={`flex gap-5 overflow-hidden text-gray80 text-xs bg-gray40 border ${
                   (field.required && showErrors && !data[field.name]) ||
                   (showErrors &&
                     data[field.name] &&
@@ -106,14 +116,14 @@ const ContactInformation = ({
                 />
               </div>
               {field.required && showErrors && !data[field.name] && (
-                <p className="text-error text-[10px] m-0 mt-[2px] p-0 absolute left-1">
+                <p className="text-error text-2xs m-0 mt-[2px] p-0 absolute left-1">
                   Required
                 </p>
               )}
               {showErrors &&
                 data[field.name] &&
                 !(socialMediaValidation as any)[field.name] && (
-                  <p className="text-error text-[10px] m-0 mt-[2px] p-0 absolute left-1">
+                  <p className="text-error text-2xs m-0 mt-[2px] p-0 absolute left-1">
                     Invalid input
                   </p>
                 )}
@@ -123,7 +133,7 @@ const ContactInformation = ({
         <section>
           <textarea
             placeholder="Please provide any necessary information"
-            className="text-white text-[12px] focus:!outline-none placeholder-gray80 bg-gray40 border border-gray50 rounded-xl max-h-[55px] p-1 pl-3 w-full"
+            className="text-white text-xs focus:!outline-none placeholder-gray80 bg-gray40 border border-gray50 rounded-xl max-h-[55px] p-1 pl-3 w-full"
             name="necessaryInfo"
             onChange={handleChange}
             value={data.necessaryInfo ? data.necessaryInfo : ""}
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/AddNftIdListModal.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/AddNftIdListModal.tsx
index 0b1eacff..515d15a0 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/AddNftIdListModal.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/AddNftIdListModal.tsx
@@ -239,7 +239,7 @@ const AddNftIdListModalModalBody = () => {
               </div>
               {!!Number(nftRange.to) &&
                 Number(nftRange.from) >= Number(nftRange.to) && (
-                  <p className="absolute -bottom-4 left-0` text-[10px] text-error">
+                  <p className="absolute -bottom-4 left-0` text-2xs text-error">
                     Invalid range
                   </p>
                 )}
@@ -247,7 +247,7 @@ const AddNftIdListModalModalBody = () => {
               !uploadedFile &&
               !invalidInput &&
               !(Number(nftRange.from) >= Number(nftRange.to)) ? (
-                <p className="absolute -bottom-4 left-0` text-[10px] text-error">
+                <p className="absolute -bottom-4 left-0` text-2xs text-error">
                   {error}
                 </p>
               ) : null}
@@ -258,7 +258,7 @@ const AddNftIdListModalModalBody = () => {
         {selectedTab === tabsName.PASTE_IDS && (
           <div className="relative">
             <div
-              className={`flex text-gray80 text-[12px] mt-1  bg-gray40 border border-gray60 rounded-xl w-full  overflow-hidden ${
+              className={`flex text-gray80 text-xs mt-1  bg-gray40 border border-gray60 rounded-xl w-full  overflow-hidden ${
                 uploadedFile ? "opacity-[0.5]" : ""
               }`}
             >
@@ -275,13 +275,13 @@ const AddNftIdListModalModalBody = () => {
               </div>
             </div>
             {error && !textAreaData && !invalidInput ? (
-              <p className="absolute -bottom-4 left-0 text-[10px] text-error">
+              <p className="absolute -bottom-4 left-0 text-2xs text-error">
                 {error}
               </p>
             ) : null}
 
             {error && textAreaData && invalidInput ? (
-              <p className="absolute -bottom-4 left-0 text-[10px] text-error">
+              <p className="absolute -bottom-4 left-0 text-2xs text-error">
                 {error}
               </p>
             ) : null}
@@ -302,7 +302,7 @@ const AddNftIdListModalModalBody = () => {
             </p>
             <div>
               <div
-                className={` flex relative text-gray80 text-[12px] bg-gray40 border border-gray60 rounded-xl h-[44px]  w-full max-w-[452px] mt-3 ${
+                className={` flex relative text-gray80 text-xs bg-gray40 border border-gray60 rounded-xl h-[44px]  w-full max-w-[452px] mt-3 ${
                   textAreaData || nftRange.to || nftRange.from
                     ? "opacity-[.5]"
                     : ""
@@ -327,12 +327,12 @@ const AddNftIdListModalModalBody = () => {
                     </div>
 
                     {error && !uploadedFile && !invalidInput ? (
-                      <p className="absolute bottom-[-17px] left-0 text-[10px] text-error">
+                      <p className="absolute bottom-[-17px] left-0 text-2xs text-error">
                         {error}
                       </p>
                     ) : null}
                     {error && uploadedFile && invalidInput ? (
-                      <p className="absolute bottom-[-17px] left-0 text-[10px] text-error">
+                      <p className="absolute bottom-[-17px] left-0 text-2xs text-error">
                         {error}
                       </p>
                     ) : null}
@@ -344,7 +344,7 @@ const AddNftIdListModalModalBody = () => {
                     </p>
                     <button
                       onClick={handleClearUploadedFile}
-                      className="text-white text-[10px] border border-gray60 bg-gray20 p-2 rounded-xl"
+                      className="text-white text-2xs border border-gray60 bg-gray20 p-2 rounded-xl"
                     >
                       Reset Uploaded file
                     </button>
@@ -366,17 +366,17 @@ const AddNftIdListModalModalBody = () => {
               ></Lottie>
             </div>
           )}
-          <p className="absolute left-0 text-error text-[12px]">
+          <p className="absolute left-0 text-error text-xs">
             {nftStatus.length > 0 && "Invalid NFT IDs is entered"}
           </p>
 
           {error && !!uploadedFile && nftIds.length > 0 && (
-            <p className="absolute left-0 text-error text-[12px]">{error}</p>
+            <p className="absolute left-0 text-error text-xs">{error}</p>
           )}
 
           <button
             onClick={handleAddNft}
-            className={`flex w-full items-center justify-center mt-5 rounded-xl h-[43px] text-[14px] font bg-gray40 border-2 border-gray60 font-semibold overflow-hidden ${
+            className={`flex w-full items-center justify-center mt-5 rounded-xl h-[43px] text-sm font bg-gray40 border-2 border-gray60 font-semibold overflow-hidden ${
               nftContractStatus.isValid === ContractValidationStatus.NotValid ||
               (selectedTab == tabsName.CHOOSE_RANGE &&
                 (!nftRange.to || !nftRange.from)) ||
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/SelectChainDropDown.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/SelectChainDropDown.tsx
index 2062c0a4..b60e057c 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/SelectChainDropDown.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/SelectChainDropDown.tsx
@@ -56,7 +56,7 @@ const SelectChainDropDown = ({ showErrors }: Prop) => {
           ) : null}
           <input
             disabled={isShowingDetails}
-            className="w-full bg-transparent text-white px-2 text-[14px]"
+            className="w-full bg-transparent text-white px-2 text-sm"
             type="text"
             value={chainName ? chainName : ""}
             placeholder="Search for Chain"
@@ -82,7 +82,7 @@ const SelectChainDropDown = ({ showErrors }: Prop) => {
                       setShowItems(false);
                       handleSelectChain(chain);
                     }}
-                    className="flex w-full items-center gap-2 text-white text-[14px] h-[46px] px-2 hover:bg-gray70 rounded-xl"
+                    className="flex w-full items-center gap-2 text-white text-sm h-[46px] px-2 hover:bg-gray70 rounded-xl"
                   >
                     <Icon iconSrc={chain.logoUrl} width="24px" />
                     <p>{chain.chainName}</p>
@@ -95,7 +95,7 @@ const SelectChainDropDown = ({ showErrors }: Prop) => {
                       setShowItems(false);
                       handleSelectChain(chain);
                     }}
-                    className="flex w-full items-center gap-2 text-white text-[14px] h-[46px] px-2 hover:bg-gray70 rounded-xl"
+                    className="flex w-full items-center gap-2 text-white text-sm h-[46px] px-2 hover:bg-gray70 rounded-xl"
                   >
                     <Icon iconSrc={chain.logoUrl} width="24px" />
                     <p>{chain.chainName}</p>
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/SelectTokenOrNft.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/SelectTokenOrNft.tsx
index 7f5e064c..b0ebc0a6 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/SelectTokenOrNft.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/components/SelectTokenOrNft.tsx
@@ -85,7 +85,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
         data.selectedChain && isRightChain ? "w-full" : "setOpacity w-full"
       }
     >
-      <section className="flex text-gray80 text-[12px] bg-gray30 border border-gray50 rounded-xl h-[43px] items-center w-full max-w-[452px] overflow-hidden">
+      <section className="flex text-gray80 text-xs bg-gray30 border border-gray50 rounded-xl h-[43px] items-center w-full max-w-[452px] overflow-hidden">
         <div
           className={`
           ${!data.isNft && "text-white font-medium bg-gray40 border-gray50"}
@@ -98,7 +98,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
           className={`
           ${data.isNft && "text-white font-medium  bg-gray40 border-gray50"}
            flex cursor-pointer items-center justify-center border-l border-l-gray50 w-[50%] h-full`}
-          onClick={() => handleSelectTokenOrNft(true)}
+          // onClick={() => handleSelectTokenOrNft(true)}
         >
           NFT
         </div>
@@ -107,7 +107,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
         <div className="flex flex-col gap-5 w-full mt-4">
           <div className="relative">
             <div
-              className="flex items-center justify-center gap-1 text-white text-[10px] mb-[9px] cursor-pointer max-w-[140px]"
+              className="flex items-center justify-center gap-1 text-white text-2xs mb-[9px] cursor-pointer max-w-[140px]"
               onClick={() => handleSelectNativeToken(data.isNativeToken)}
             >
               <Icon
@@ -119,11 +119,11 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                     : "/assets/images/provider-dashboard/check-true.svg"
                 }
               />
-              <p className="text-[14px] text-gray100 ml-1">use native token</p>
+              <p className="text-sm text-gray100 ml-1">use native token</p>
             </div>
 
             <div
-              className={`flex text-gray80 text-[12px] bg-gray40 border-[1.4px] 
+              className={`flex text-gray100 text-xs bg-gray40 border-[1.4px] 
               rounded-xl h-[43px] max-w-[452px] overflow-hidden 
               ${data.isNativeToken ? "opacity-[.5]" : "opacity-1"} 
               ${tokenAddressError ? "border-error" : "border-gray50"}`}
@@ -171,13 +171,13 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
             </div>
             {tokenContractStatus.isValid ===
               ContractValidationStatus.NotValid && (
-              <p className="text-error text-[10px] m-0 p-0 mt-[2px] absolute ">
+              <p className="text-error text-2xs m-0 p-0 mt-[2px] absolute ">
                 Invalid Token Contract Address
               </p>
             )}
 
             {showErrors && !data.tokenContractAddress && (
-              <p className="text-error text-[10px] m-0 p-0 mt-[2px] absolute left-1">
+              <p className="text-error text-2xs m-0 p-0 mt-[2px] absolute left-1">
                 Required
               </p>
             )}
@@ -190,7 +190,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
               } `}
             >
               <div
-                className={`flex gap-2 text-gray80 text-[12px] bg-gray40 border-gray50 border-2 rounded-xl h-[43px] pr-4 items-center justify-between overflow-hidden w-full max-w-[452px]`}
+                className={`flex gap-2 text-gray100 text-xs bg-gray40 border-gray50 border-2 rounded-xl h-[43px] pr-4 items-center justify-between overflow-hidden w-full max-w-[452px]`}
               >
                 <div className="bg-gray30 flex h-full w-full max-w-[148px] items-center justify-center text-center">
                   Number of claims
@@ -216,7 +216,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                 className="py-2"
               />
               <div
-                className={`flex gap-2 text-gray80 text-[12px] bg-gray40 border border-gray50 rounded-xl h-[43px] pr-4 items-center justify-between overflow-hidden w-full max-w-[452px]`}
+                className={`flex gap-2 text-gray100 text-xs bg-gray40 border border-gray50 rounded-xl h-[43px] pr-4 items-center justify-between overflow-hidden w-full max-w-[452px]`}
               >
                 <div className="bg-gray30 flex h-full w-full max-w-[148px] items-center justify-center text-center">
                   <p>Amount per claim</p>
@@ -239,7 +239,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                 className="py-2"
               />
               <div
-                className={`flex gap-2 text-gray80 opacity-50 text-[12px] bg-gray40 border border-gray50 rounded-xl h-[43px] pr-4 items-center justify-between overflow-hidden w-full max-w-[452px]`}
+                className={`flex gap-2 text-gray100 opacity-50 text-xs bg-gray40 border border-gray50 rounded-xl h-[43px] pr-4 items-center justify-between overflow-hidden w-full max-w-[452px]`}
               >
                 <div className="bg-gray30 flex h-full w-full max-w-[148px] items-center justify-center text-center">
                   <p>Total Amount</p>
@@ -256,16 +256,16 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
 
             {showErrors &&
             (!data.totalAmount || Number(data.totalAmount) <= 0) ? (
-              <p className="text-error text-[10px] mt-[2px] m-0 p-0 absolute -bottom-4">
+              <p className="text-error text-2xs mt-[2px] m-0 p-0 absolute -bottom-4">
                 Required
               </p>
             ) : Number(data.winnersCount) > 500 ? (
-              <p className="text-error text-[10px] mt-[2px] m-0 p-0 absolute -bottom-4">
+              <p className="text-error text-2xs mt-[2px] m-0 p-0 absolute -bottom-4">
                 The maximum number of winners is 500.
               </p>
             ) : (
               insufficientBalance && (
-                <p className="text-error text-[10px] mt-[2px] m-0 p-0 absolute -bottom-4">
+                <p className="text-error text-2xs mt-[2px] m-0 p-0 absolute -bottom-4">
                   Insufficient Balance
                 </p>
               )
@@ -277,7 +277,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
           <div className="relative">
             <div
               className={`
-							 flex text-gray80 text-[12px] bg-gray40 border-[1.4px] ${
+							 flex text-gray80 text-xs bg-gray40 border-[1.4px] ${
                  nftAddressError ? "border-error" : "border-gray50"
                } ${
                 data.nftTokenIds.length >= 1 ? "opacity-[0.5]" : "opacity-1"
@@ -319,13 +319,13 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
               )}
             </div>
             {showErrors && !data.nftContractAddress && (
-              <p className="text-error text-[10px] m-0 p-0 mt-[2px] absolute left-1">
+              <p className="text-error text-2xs m-0 p-0 mt-[2px] absolute left-1">
                 Required
               </p>
             )}
             {nftContractStatus.isValid ===
               ContractValidationStatus.NotValid && (
-              <p className="text-error text-[10px] m-0 p-0 mt-[2px] absolute ">
+              <p className="text-error text-2xs m-0 p-0 mt-[2px] absolute ">
                 Invalid NFT Contract Address
               </p>
             )}
@@ -340,7 +340,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
             </div>
             <div
               className={`
-							 flex text-gray80 text-[12px] bg-gray40 border ${
+							 flex text-gray80 text-xs bg-gray40 border ${
                  Number(numberOfNfts) > 500 ||
                  (data.nftTokenIds.length > 0 &&
                    data.nftTokenIds.length != Number(numberOfNfts))
@@ -375,23 +375,23 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                 />
               </div>
               {Number(numberOfNfts) > 500 && (
-                <p className="absolute text-error text-[10px] m-0 p-0 -bottom-4 left-0">
+                <p className="absolute text-error text-2xs m-0 p-0 -bottom-4 left-0">
                   Maximum is 500
                 </p>
               )}
             </div>
             {data.nftTokenIds.length > 0 &&
               data.nftTokenIds.length != Number(numberOfNfts) && (
-                <p className="absolute text-error text-[10px] m-0 p-0 -bottom-4 left-0">
+                <p className="absolute text-error text-2xs m-0 p-0 -bottom-4 left-0">
                   Number of NFTs are not equal with Number of NFts you added.
                 </p>
               )}
           </div>
           {data.nftTokenIds.length > 0 ? (
             <div className="flex relative justify-between items-center mt-[4px] bg-gray50 border max-h-[44px] border-gray60 rounded-xl p-2 px-5">
-              <div className="text-white text-[12px]">
+              <div className="text-white text-xs">
                 <p>{data.nftTokenIds.length} NFT ID added</p>
-                <div className="flex text-gray90 text-[10px]">
+                <div className="flex text-gray90 text-2xs">
                   <p>
                     {data.nftTokenIds.length > 1
                       ? data.nftTokenIds.join(", ")
@@ -402,7 +402,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
               <div className="flex gap-3">
                 <button
                   onClick={() => openAddNftIdListModal()}
-                  className="text-gray90 text-[10px] w-[60px] h-[20px] rounded bg-gray70 border border-gray80 flex items-center justify-center"
+                  className="text-gray90 text-2xs w-[60px] h-[20px] rounded bg-gray70 border border-gray80 flex items-center justify-center"
                 >
                   Edit
                 </button>
@@ -420,7 +420,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                   if (!numberOfNfts) return;
                   openAddNftIdListModal();
                 }}
-                className={`flex text-white text-[12px] ${
+                className={`flex text-white text-xs ${
                   nftContractStatus.isValid ===
                     ContractValidationStatus.NotValid ||
                   !numberOfNfts ||
@@ -443,7 +443,7 @@ const SelectTokenOrNft = ({ showErrors, isRightChain }: Prop) => {
                 </div>
               </div>
               {data.nftTokenIds.length == 0 && showErrors && (
-                <p className="absolute text-error text-[10px] m-0 p-0 mt-[2px] ml-1">
+                <p className="absolute text-error text-2xs m-0 p-0 mt-[2px] ml-1">
                   Required
                 </p>
               )}
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/index.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/index.tsx
index 1ec671be..f94b29c0 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/index.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInfo/index.tsx
@@ -83,7 +83,7 @@ const TokenInfo = ({
       >
         <section className="w-full relative">
           <div
-            className={`flex gap-2 text-gray80 text-[12px] bg-gray40 border ${
+            className={`flex gap-2 text-gray80 text-xs bg-gray40 border ${
               showErrors && !data.provider ? "border-error" : "border-gray50 "
             } rounded-xl h-[43px] pr-4 items-center justify-between overflow-hidden w-full max-w-[452px]`}
           >
@@ -102,7 +102,7 @@ const TokenInfo = ({
             <p>{data.provider?.length}/30</p>
           </div>
           {showErrors && !data.provider && (
-            <p className="text-error text-[10px] m-0 mt-[2px] p-0 absolute left-1">
+            <p className="text-error text-2xs m-0 mt-[2px] p-0 absolute left-1">
               Required
             </p>
           )}
@@ -114,7 +114,7 @@ const TokenInfo = ({
 
         <section className="w-full relative">
           <div
-            className={`flex gap-2 text-gray80 text-[12px] bg-gray40 border ${
+            className={`flex gap-2 text-gray100 text-xs bg-gray40 border ${
               showErrors && !data.description
                 ? "border-error"
                 : "border-gray50 "
@@ -132,10 +132,10 @@ const TokenInfo = ({
               disabled={isShowingDetails || !address}
               value={data.description ? data.description : ""}
             />
-            <p>{data.description?.length}/100</p>
+            <p className="text-gray80">{data.description?.length}/100</p>
           </div>
           {showErrors && !data.description && (
-            <p className="text-error text-[10px] m-0 mt-[2px] p-0 absolute left-1">
+            <p className="text-error text-2xs m-0 mt-[2px] p-0 absolute left-1">
               Required
             </p>
           )}
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInformationVerification.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInformationVerification.tsx
index 43c91939..c799b134 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInformationVerification.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenInformationVerification.tsx
@@ -9,10 +9,10 @@ import RoutePath from "@/utils/routes";
 const TokenInformationVerification = () => {
   const { selectedRaffleForCheckReason } = useTokenTapFromContext();
   return (
-    <div className="flex flex-col gap-5 w-full max-w-[452px] text-gray100 font-medium text-[12px] text-center animate-fadeIn">
+    <div className="flex flex-col gap-5 w-full max-w-[452px] text-gray100 font-medium text-xs text-center animate-fadeIn">
       <div className="flex flex-col gap-5 min-h-[292px]">
         <Icon iconSrc="/assets/images/landing/tokentap-icon.png" />
-        <div className="flex items-center text-[14px] justify-center text-white font-semibold gap-2">
+        <div className="flex items-center text-sm justify-center text-white font-semibold gap-2">
           {!selectedRaffleForCheckReason ? (
             <div className="flex items-center gap-2">
               {" "}
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapRequirements/components/ConstraintListModal.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapRequirements/components/ConstraintListModal.tsx
index 42fbc0c3..5d7f586c 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapRequirements/components/ConstraintListModal.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapRequirements/components/ConstraintListModal.tsx
@@ -51,7 +51,7 @@ const InitialBody = () => {
           className="cursor-pointer z-[999999]"
         />
       </div>
-      <p className="text-white text-[14px] font-medium">General</p>
+      <p className="text-white text-sm font-medium">General</p>
       <div className="grid grid-cols-2 gap-2.5 row-gap-2 w-full items-center justify-center text-center">
         {constraintsListApi!.map((constraint, index) => (
           <div
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapRequirements/index.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapRequirements/index.tsx
index ad8cb75d..815bb5d8 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapRequirements/index.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapRequirements/index.tsx
@@ -14,7 +14,7 @@ const TokenTapRequirements = ({
 
   return (
     <div className="flex flex-col justify-center items-center w-full animate-fadeIn">
-      <div className="text-gray100 min-h-[424px] text-[12px] font-medium flex flex-col w-full  max-w-[452px] min-w-[300px] select-not">
+      <div className="text-gray100 min-h-[424px] text-xs font-medium flex flex-col w-full  max-w-[452px] min-w-[300px] select-not">
         <p className="mb-4">
           Add any requirements for Enrolling or leave it free.
         </p>
@@ -23,7 +23,7 @@ const TokenTapRequirements = ({
         ))}
         <div
           onClick={openRequirementModal}
-          className=" flex cursor-pointer items-center gap-2 bg-gray40 h-[44px] rounded-xl px-4 text-white text-[12px]"
+          className=" flex cursor-pointer items-center gap-2 bg-gray40 h-[44px] rounded-xl px-4 text-white text-xs"
         >
           <Icon
             iconSrc="/assets/images/provider-dashboard/add-requirement.svg"
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/ManualDuration.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/ManualDuration.tsx
index 398684ef..1c2b1674 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/ManualDuration.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/ManualDuration.tsx
@@ -18,8 +18,8 @@ const ManualDuration = ({ showErrors }: ManualDurationProp) => {
   } = useTokenTapFromContext();
 
   return (
-    <div className="w-full text-gray100">
-      <p className="mb-2 text-xs">Set Enrollment Duration:</p>
+    <div className="w-full text-gray90">
+      <p className="mb-2 text-xs">Set Claim Duration:</p>
       <div className=" w-full flex select-not enrollment-duration-wrap justify-between items-center h-[43px] bg-gray30 text-gray90 text-xs text-center border border-gray50 rounded-xl overflow-hidden">
         {enrollmentDurations.map((item) => (
           <div
@@ -36,7 +36,7 @@ const ManualDuration = ({ showErrors }: ManualDurationProp) => {
           </div>
         ))}
       </div>
-      <div className="text-[14px] grid gap-11 grid-cols-1 md:grid-cols-2 items-center justify-between mt-4 md:mt-2">
+      <div className="text-sm grid gap-11 grid-cols-1 md:grid-cols-2 items-center justify-between mt-4 md:mt-2">
         <div className="text-gray100  cursor-pointer underline w-full">
           <EndDateComp showErrors={showErrors} />
         </div>
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/PeopleLimitation.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/PeopleLimitation.tsx
index 068bd931..cab79682 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/PeopleLimitation.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/PeopleLimitation.tsx
@@ -8,7 +8,7 @@ interface PeopleLimitationProp {
 const PeopleLimitation = ({ showErrors }: PeopleLimitationProp) => {
   const { data, handleChange, isShowingDetails } = useTokenTapFromContext();
   return (
-    <div className="text-gray80 text-[12px] w-full max-w-[452px] relative mt-[-2px] ">
+    <div className="text-gray80 text-xs w-full max-w-[452px] relative mt-[-2px] ">
       <div
         className={`border ${
           showErrors && !showErrors.maximumLimitationStatus
@@ -31,7 +31,7 @@ const PeopleLimitation = ({ showErrors }: PeopleLimitationProp) => {
         />
       </div>
       {showErrors && !showErrors.maximumLimitationStatus && (
-        <p className="text-error text-[10px] m-0 p-0 absolute mt-1">
+        <p className="text-error text-2xs m-0 p-0 absolute mt-1">
           {showErrors?.maximumLimitationMessage}
         </p>
       )}
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/StartDateComp.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/StartDateComp.tsx
index face12c4..01cc0b92 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/StartDateComp.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/components/StartDateComp.tsx
@@ -42,13 +42,13 @@ const StartDateComp = ({ showErrors }: StartDateCompProp) => {
   return (
     <div className="relative w-full">
       <div
-        className={`flex text-[12px] bg-gray40 border ${
+        className={`flex text-xs bg-gray40 border ${
           showErrors && showErrors.startDateStatus == false
             ? "border-error"
             : "border-gray50"
         } rounded-xl h-[43px] items-center w-full max-w-[452px] overflow-hidden`}
       >
-        <p className="text-gray100 text-[12px] w-full max-w-[148px] bg-gray30 h-full flex items-center justify-center">
+        <p className="text-gray100 text-xs w-full max-w-[148px] bg-gray30 h-full flex items-center justify-center">
           Start Date & Time
         </p>
         <DatePicker
@@ -82,7 +82,7 @@ const StartDateComp = ({ showErrors }: StartDateCompProp) => {
         />
       </div>
       {showErrors && showErrors.startDateStatus == false && (
-        <p className="text-error text-[10px] m-0 mt-[2px] p-0 absolute">
+        <p className="text-error text-2xs m-0 mt-[2px] p-0 absolute">
           {showErrors && showErrors.statDateStatusMessage}
         </p>
       )}
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/index.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/index.tsx
index cbd635cf..6f79ee4a 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/index.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/TokenTapTimeEnrollLimitation/index.tsx
@@ -78,7 +78,7 @@ const TokenTapTimeEnrollLimitation = ({
             <p
               className={`${
                 !claimPeriodic ? "text-gray100" : "text-gray90"
-              } text-[10px]`}
+              } text-2xs`}
             >
               (Each person can claim once.)
             </p>
@@ -99,7 +99,7 @@ const TokenTapTimeEnrollLimitation = ({
             <p
               className={`${
                 claimPeriodic ? "text-gray100" : "text-gray90"
-              } text-[10px]`}
+              } text-2xs`}
             >
               (Each person can claim once in a month.)
             </p>
@@ -107,7 +107,7 @@ const TokenTapTimeEnrollLimitation = ({
         </div>
         <StartDateComp showErrors={showErrors} />
         <ManualDuration showErrors={showErrors} />
-        <PeopleLimitation showErrors={showErrors} />
+        {/* <PeopleLimitation showErrors={showErrors} /> */}
       </div>
       <Pagination
         handleChangeFormPagePrev={handleChangeFormPagePrev}
diff --git a/app/contribution-hub/token-tap/components/OfferTokenForm/index.tsx b/app/contribution-hub/token-tap/components/OfferTokenForm/index.tsx
index 21907695..6e17b172 100644
--- a/app/contribution-hub/token-tap/components/OfferTokenForm/index.tsx
+++ b/app/contribution-hub/token-tap/components/OfferTokenForm/index.tsx
@@ -11,23 +11,31 @@ import {
 } from "@/app/contribution-hub/constants/forms";
 
 interface FromProp {
-  detailRafflePk?: string | undefined;
-  verificationRafflePK?: string | undefined;
+  detailDistributionPk?: string | undefined;
+  verificationDistributePK?: string | undefined;
 }
 
-const OfferTokenForm = ({ detailRafflePk, verificationRafflePK }: FromProp) => {
-  const { handleCheckForReason, handleShowUserDetails, page, setPage } =
-    useTokenTapFromContext();
+const OfferTokenForm = ({
+  detailDistributionPk,
+  verificationDistributePK,
+}: FromProp) => {
+  const {
+    handleCheckForReason,
+    handleShowUserDetails,
+    page,
+    setPage,
+    userDistribution,
+  } = useTokenTapFromContext();
 
   const { display, prevPage } = usePagination(page, setPage, tokenTapForms);
 
-  // useEffect(() => {
-  //   if (!userRaffle) {
-  //     return;
-  //   }
-  //   if (detailRafflePk) handleShowUserDetails(userRaffle);
-  //   if (verificationRafflePK) handleCheckForReason(userRaffle);
-  // }, [detailRafflePk, userRaffle]);
+  useEffect(() => {
+    if (!userDistribution) {
+      return;
+    }
+    if (detailDistributionPk) handleShowUserDetails(userDistribution);
+    if (verificationDistributePK) handleCheckForReason(userDistribution);
+  }, [detailDistributionPk, userDistribution]);
 
   return (
     <div className="flex flex-col md:flex-row gap-5 select-none">
@@ -36,7 +44,7 @@ const OfferTokenForm = ({ detailRafflePk, verificationRafflePK }: FromProp) => {
         {page >= 1 && page < 5 && (
           <Icon
             onClick={prevPage}
-            className="absolute text-white text-[20px] top-5 left-5 cursor-pointer select-not"
+            className="absolute text-white text-xl top-5 left-5 cursor-pointer select-not"
             iconSrc="/assets/images/provider-dashboard/arrow-left.svg"
           />
         )}
diff --git a/app/contribution-hub/token-tap/create/layout.tsx b/app/contribution-hub/token-tap/create/layout.tsx
index fa75a1bb..e8c58100 100644
--- a/app/contribution-hub/token-tap/create/layout.tsx
+++ b/app/contribution-hub/token-tap/create/layout.tsx
@@ -1,6 +1,6 @@
 import TokenTapProvider from "@/context/providerDashboardTokenTapContext";
 import {
-  getConstraintListServer,
+  getTokenTapConstraintListServer,
   getFaucetListServer,
 } from "@/utils/serverApis";
 import { FC, PropsWithChildren } from "react";
@@ -9,7 +9,7 @@ const ProviderDashboardPrizeTapLayout: FC<PropsWithChildren> = async ({
   children,
 }) => {
   const chainsApi = await getFaucetListServer();
-  const constraintLisApi = await getConstraintListServer();
+  const constraintLisApi = await getTokenTapConstraintListServer();
   return (
     <TokenTapProvider
       allChains={chainsApi}
diff --git a/app/contribution-hub/token-tap/details/[id]/layout.tsx b/app/contribution-hub/token-tap/details/[id]/layout.tsx
new file mode 100644
index 00000000..08ca98f2
--- /dev/null
+++ b/app/contribution-hub/token-tap/details/[id]/layout.tsx
@@ -0,0 +1,31 @@
+import TokenTapProvider from "@/context/providerDashboardTokenTapContext";
+import { getUserDistributionListServerSide } from "@/utils/serverApis";
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { FC, PropsWithChildren } from "react";
+
+const ProviderDashboardDetailsLayout: FC<
+  PropsWithChildren & { params: { id: string } }
+> = async ({ children, params }) => {
+  const cookieStore = cookies();
+
+  const distributions = await getUserDistributionListServerSide(
+    cookieStore.get("userToken")!.value
+  );
+
+  const distribution = distributions.find(
+    (item) => item.id === Number(params.id)
+  );
+
+  if (!distribution) {
+    redirect("/contribution-hub/token-tap");
+  }
+
+  return (
+    <TokenTapProvider distributionInit={distribution}>
+      {children}
+    </TokenTapProvider>
+  );
+};
+
+export default ProviderDashboardDetailsLayout;
diff --git a/app/contribution-hub/token-tap/details/[id]/page.tsx b/app/contribution-hub/token-tap/details/[id]/page.tsx
new file mode 100644
index 00000000..c3835197
--- /dev/null
+++ b/app/contribution-hub/token-tap/details/[id]/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+import { useParams } from "next/navigation";
+import OfferTokenForm from "../../components/OfferTokenForm";
+
+const Page = () => {
+  const params = useParams();
+  return <OfferTokenForm detailDistributionPk={params.id as string} />;
+};
+
+export default Page;
diff --git a/app/contribution-hub/token-tap/layout.tsx b/app/contribution-hub/token-tap/layout.tsx
deleted file mode 100644
index 297f08c6..00000000
--- a/app/contribution-hub/token-tap/layout.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import ProviderDashboardTokenTapProvider from "@/context/providerDashboardTokenTapContext";
-import { FC, PropsWithChildren } from "react";
-
-const ProviderDashboardGasTapLayout: FC<PropsWithChildren> = ({ children }) => {
-  return (
-    <ProviderDashboardTokenTapProvider>
-      {children}
-    </ProviderDashboardTokenTapProvider>
-  );
-};
-
-export default ProviderDashboardGasTapLayout;
diff --git a/app/contribution-hub/token-tap/verification/[id]/layout.tsx b/app/contribution-hub/token-tap/verification/[id]/layout.tsx
new file mode 100644
index 00000000..a221cd5a
--- /dev/null
+++ b/app/contribution-hub/token-tap/verification/[id]/layout.tsx
@@ -0,0 +1,30 @@
+import { FC, PropsWithChildren } from "react";
+import TokenTapProvider from "@/context/providerDashboardTokenTapContext";
+import { cookies } from "next/headers";
+import { getUserDistributionListServerSide } from "@/utils/serverApis";
+import { redirect } from "next/navigation";
+
+const ProviderDashboardVerificationLayout: FC<
+  PropsWithChildren & { params: { id: string } }
+> = async ({ children, params }) => {
+  const cookieStore = cookies();
+
+  const distributions = await getUserDistributionListServerSide(
+    cookieStore.get("userToken")!.value
+  );
+
+  const distribution = distributions.find(
+    (item) => item.id === Number(params.id)
+  );
+
+  if (!distribution) {
+    redirect("/contribution-hub/token-tap");
+  }
+  return (
+    <TokenTapProvider distributionInit={distribution}>
+      {children}
+    </TokenTapProvider>
+  );
+};
+
+export default ProviderDashboardVerificationLayout;
diff --git a/app/contribution-hub/token-tap/verification/[id]/page.tsx b/app/contribution-hub/token-tap/verification/[id]/page.tsx
new file mode 100644
index 00000000..f1f7256a
--- /dev/null
+++ b/app/contribution-hub/token-tap/verification/[id]/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+import React from "react";
+import OfferTokenForm from "../../components/OfferTokenForm";
+import { useParams } from "next/navigation";
+
+const Page = () => {
+  const params = useParams();
+  return <OfferTokenForm verificationDistributePK={params.id as string} />;
+};
+
+export default Page;
diff --git a/app/gastap/components/Modals/FundTransactionModal/index.tsx b/app/gastap/components/Modals/FundTransactionModal/index.tsx
index 3cbd0470..6aa52081 100644
--- a/app/gastap/components/Modals/FundTransactionModal/index.tsx
+++ b/app/gastap/components/Modals/FundTransactionModal/index.tsx
@@ -36,7 +36,7 @@ const FundTransactionModal = ({
       <>
         <Icon
           mb={3}
-          iconSrc="assets/images/fund/success-provide-spaceman.svg"
+          iconSrc="/assets/images/fund/success-provide-spaceman.svg"
         ></Icon>
         {selectedChain && (
           <>
diff --git a/app/prizetap/components/Linea/index.tsx b/app/prizetap/components/Linea/index.tsx
index 1ce45a67..d230f8ec 100644
--- a/app/prizetap/components/Linea/index.tsx
+++ b/app/prizetap/components/Linea/index.tsx
@@ -127,7 +127,7 @@ export const LineaRaffleCard: FC<{
               </div>
             </div>
             <div className="absolute bottom-[-10px] left-[40px] rounded-md flex items-center bg-gray50 border-2 border-gray70 min-w-[130px] justify-center">
-              <p className="text-gray100 text-[10px] p-1">on</p>
+              <p className="text-gray100 text-2xs p-1">on</p>
               <img
                 src="/assets/images/prize-tap/linea.svg"
                 className="ml-2"
@@ -286,7 +286,7 @@ export const LineaRaffleCard: FC<{
                   <span className="flex flex-col md:flex-row items-center justify-between w-full gap-4 ">
                     <div className="flex flex-col sm:flex-row gap-4 justify-between w-full md:items-center bg-gray40 px-5 py-1 rounded-xl">
                       <div className="flex flex-col gap-1">
-                        <p className="text-[10px] text-white">
+                        <p className="text-2xs text-white">
                           {start ? "Winners in:" : "Starts in:"}
                         </p>
                       </div>
@@ -321,7 +321,7 @@ export const LineaRaffleCard: FC<{
                   <span className="flex flex-col md:flex-row items-center justify-between w-full gap-4">
                     <div className="flex flex-col sm:flex-row gap-4 justify-between w-full md:items-center bg-gray40 px-5 py-1 rounded-xl">
                       <div className="flex flex-col gap-1">
-                        <p className="text-[10px] text-white">
+                        <p className="text-2xs text-white">
                           {start ? "Winners in:" : "Starts in:"}
                         </p>
                       </div>
@@ -343,7 +343,7 @@ export const LineaRaffleCard: FC<{
                 ) : (
                   <span className="flex flex-col md:flex-row items-center justify-between w-full gap-4 ">
                     <div className="flex gap-4 overflow-hidden px-5 h-[48px] justify-between w-full items-center winner-box-bg  py-1 rounded-xl">
-                      <p className="text-[10px] text-white">
+                      <p className="text-2xs text-white">
                         Raffle is done, check the winners:{" "}
                       </p>
                       {/* <Icon
diff --git a/app/prizetap/components/RafflesList.tsx b/app/prizetap/components/RafflesList.tsx
index 0783249d..2bd8df38 100644
--- a/app/prizetap/components/RafflesList.tsx
+++ b/app/prizetap/components/RafflesList.tsx
@@ -190,10 +190,7 @@ const RaffleCard: FC<{ raffle: Prize; isHighlighted?: boolean }> = ({
             </div>
           </div>
           <div className="absolute bottom-[-10px] left-[40px] rounded-md flex items-center bg-gray50 border-2 border-gray70 min-w-[130px] justify-center">
-            <p className="text-gray100 text-[10px] p-1">
-              {" "}
-              on {chain.chainName}{" "}
-            </p>
+            <p className="text-gray100 text-2xs p-1"> on {chain.chainName} </p>
             <Icon iconSrc={chain.logoUrl} width="20px" height="16px" />
           </div>
         </div>
@@ -334,10 +331,10 @@ const RaffleCard: FC<{ raffle: Prize; isHighlighted?: boolean }> = ({
                 <span className="flex flex-col md:flex-row items-center justify-between w-full gap-4 ">
                   <div className="flex flex-col sm:flex-row gap-4 justify-between w-full md:items-center bg-gray40 px-5 py-1 rounded-xl">
                     <div className="flex flex-col gap-1">
-                      <p className="text-[10px] text-white">
+                      <p className="text-2xs text-white">
                         {start ? "Winners Announced in:" : "Starts in:"}
                       </p>
-                      <p className="text-[10px] text-gray100">
+                      <p className="text-2xs text-gray100">
                         {maxNumberOfEntries >= 1_000_000_000
                           ? `${numberWithCommas(
                               numberOfOnchainEntries
@@ -385,10 +382,10 @@ const RaffleCard: FC<{ raffle: Prize; isHighlighted?: boolean }> = ({
                 <span className="flex flex-col md:flex-row items-center justify-between w-full gap-4 ">
                   <div className="flex flex-col sm:flex-row gap-4 justify-between w-full md:items-center bg-gray40 px-5 py-1 rounded-xl">
                     <div className="flex flex-col gap-1">
-                      <p className="text-[10px] text-white">
+                      <p className="text-2xs text-white">
                         {start ? "Winners Announced in:" : "Starts in:"}
                       </p>
-                      <p className="text-[10px] text-gray100">
+                      <p className="text-2xs text-gray100">
                         {maxNumberOfEntries >= 1_000_000_000
                           ? `${numberWithCommas(
                               numberOfOnchainEntries
@@ -435,10 +432,10 @@ const RaffleCard: FC<{ raffle: Prize; isHighlighted?: boolean }> = ({
                 <span className="flex flex-col md:flex-row items-center justify-between w-full gap-4 ">
                   <div className="flex flex-col sm:flex-row gap-4 justify-between w-full md:items-center bg-gray40 px-5 py-1 rounded-xl">
                     <div className="flex flex-col gap-1">
-                      <p className="text-[10px] text-white">
+                      <p className="text-2xs text-white">
                         {start ? "Winners Announced in:" : "Starts in:"}
                       </p>
-                      <p className="text-[10px] text-gray100">
+                      <p className="text-2xs text-gray100">
                         {maxNumberOfEntries >= 1_000_000_000
                           ? `${numberWithCommas(
                               numberOfOnchainEntries
@@ -471,7 +468,7 @@ const RaffleCard: FC<{ raffle: Prize; isHighlighted?: boolean }> = ({
                         className={`${
                           !winnersEntry.length &&
                           new Date(deadline) < new Date()
-                            ? "text-[14px]"
+                            ? "text-sm"
                             : ""
                         } text-transparent bg-clip-text bg-g-primary`}
                       >
@@ -491,7 +488,7 @@ const RaffleCard: FC<{ raffle: Prize; isHighlighted?: boolean }> = ({
               ) : winnersEntry && !userClaimEntry ? (
                 <div className="flex w-full flex-1 items-center gap-4">
                   <span className="overflow-hidden font-medium md:leading-[normal] leading-[15px] flex h-[70px] md:h-[48px] w-full items-center bg-gray10 py-1 rounded-xl align-center justify-between">
-                    <p className="text-[10px] ml-4 text-gray100">
+                    <p className="text-2xs ml-4 text-gray100">
                       {maxNumberOfEntries >= 1_000_000_000
                         ? `${numberWithCommas(
                             numberOfOnchainEntries
@@ -531,7 +528,7 @@ const RaffleCard: FC<{ raffle: Prize; isHighlighted?: boolean }> = ({
                 !userClaimEntry.claimingPrizeTx ? (
                 <span className="flex flex-col md:flex-row items-center justify-between w-full gap-4 ">
                   <div className="flex gap-4 overflow-hidden px-5 h-[48px] justify-between w-full items-center winner-box-bg  py-1 rounded-xl">
-                    <p className="text-[10px] text-white">
+                    <p className="text-2xs text-white">
                       Congratulations @
                       {userProfile?.username ||
                         shortenAddress(userProfile?.wallets?.[0].address)}{" "}
@@ -560,7 +557,7 @@ const RaffleCard: FC<{ raffle: Prize; isHighlighted?: boolean }> = ({
               ) : (
                 <span className="flex flex-col md:flex-row items-center justify-between w-full gap-4 ">
                   <div className="flex gap-4 overflow-hidden pl-5 h-[48px] justify-between w-full items-center winner-box-bg  py-1 rounded-xl">
-                    <p className="text-[10px] text-white">
+                    <p className="text-2xs text-white">
                       Congratulations @
                       {userProfile?.username ||
                         shortenAddress(userProfile?.wallets?.[0].address)}
@@ -658,28 +655,28 @@ export const RaffleCardTimer = ({
 
   return (
     <div className="prize-card__timer flex items-center justify-between rounded-xl gap-4 md:px-3 py-2">
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value text-white font-semibold">
           {days}
         </p>
         <p className="prize-card__timer-item-label text-gray90">d</p>
       </div>
       <p className="text-sm text-white">:</p>
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value text-white font-semibold">
           {hours}
         </p>
         <p className="prize-card__timer-item-label text-gray90">h</p>
       </div>
       <p className="text-sm text-white">:</p>
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value text-white font-semibold">
           {minutes}
         </p>
         <p className="prize-card__timer-item-label text-gray90">m</p>
       </div>
       <p className="text-sm text-white">:</p>
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value text-white font-semibold">
           {seconds}
         </p>
@@ -732,19 +729,19 @@ export const RaffleCardTimerLandingPage = ({
 
   return (
     <div className="prize-card__timer flex gap-1 md:px-1 mt-[-2px] text-gray100 items-center">
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value font-semibold">{days}</p>
       </div>
       <p className="text-sm">:</p>
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value font-semibold">{hours}</p>
       </div>
       <p className="text-sm">:</p>
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value font-semibold">{minutes}</p>
       </div>
       <p className="text-sm">:</p>
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value font-semibold">{seconds}</p>
       </div>
     </div>
diff --git a/components/containers/landing/prizeTap/raffleTimer.tsx b/components/containers/landing/prizeTap/raffleTimer.tsx
index a5d3c363..ac5898c0 100644
--- a/components/containers/landing/prizeTap/raffleTimer.tsx
+++ b/components/containers/landing/prizeTap/raffleTimer.tsx
@@ -1,70 +1,70 @@
-"use client"
+"use client";
 
-import { useState, useMemo, useEffect } from "react"
+import { useState, useMemo, useEffect } from "react";
 
 type RaffleCardTimerProps = {
-  startTime: string
-  FinishTime: string
-}
+  startTime: string;
+  FinishTime: string;
+};
 
 export const RaffleCardTimerLandingPage = ({
   startTime,
   FinishTime,
 }: RaffleCardTimerProps) => {
-  const [now, setNow] = useState(new Date())
-  const [days, setDays] = useState("00")
-  const [hours, setHours] = useState("00")
-  const [minutes, setMinutes] = useState("00")
-  const [seconds, setSeconds] = useState("00")
+  const [now, setNow] = useState(new Date());
+  const [days, setDays] = useState("00");
+  const [hours, setHours] = useState("00");
+  const [minutes, setMinutes] = useState("00");
+  const [seconds, setSeconds] = useState("00");
 
-  let startTimeDate = useMemo(() => new Date(startTime), [startTime])
-  let FinishTimeDate = useMemo(() => new Date(FinishTime), [FinishTime])
+  let startTimeDate = useMemo(() => new Date(startTime), [startTime]);
+  let FinishTimeDate = useMemo(() => new Date(FinishTime), [FinishTime]);
 
   let deadline = useMemo(
     () =>
       startTimeDate.getTime() > now.getTime() ? startTimeDate : FinishTimeDate,
     [startTimeDate, FinishTimeDate, now]
-  )
+  );
 
   useEffect(() => {
-    const diff = deadline.getTime() - now.getTime()
+    const diff = deadline.getTime() - now.getTime();
     if (diff <= 0) {
-      return
+      return;
     }
-    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
-    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
-    const seconds = Math.floor((diff % (1000 * 60)) / 1000)
-    setSeconds(seconds < 10 ? `0${seconds}` : seconds.toString())
-    setMinutes(minutes < 10 ? `0${minutes}` : minutes.toString())
-    setHours(hours < 10 ? `0${hours}` : hours.toString())
-    setDays(days < 10 ? `0${days}` : days.toString())
-  }, [now, deadline])
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+    setSeconds(seconds < 10 ? `0${seconds}` : seconds.toString());
+    setMinutes(minutes < 10 ? `0${minutes}` : minutes.toString());
+    setHours(hours < 10 ? `0${hours}` : hours.toString());
+    setDays(days < 10 ? `0${days}` : days.toString());
+  }, [now, deadline]);
 
   useEffect(() => {
-    const interval = setInterval(() => setNow(new Date()), 1000)
+    const interval = setInterval(() => setNow(new Date()), 1000);
     return () => {
-      clearInterval(interval)
-    }
-  }, [])
+      clearInterval(interval);
+    };
+  }, []);
 
   return (
     <div className="prize-card__timer flex gap-1 md:px-1 mt-[-2px] text-gray100 items-center">
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value font-semibold">{days}</p>
       </div>
       <p className="text-sm">:</p>
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value font-semibold">{hours}</p>
       </div>
       <p className="text-sm">:</p>
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value font-semibold">{minutes}</p>
       </div>
       <p className="text-sm">:</p>
-      <div className="prize-card__timer-item flex flex-col justify-between items-center text-[10px]">
+      <div className="prize-card__timer-item flex flex-col justify-between items-center text-2xs">
         <p className="prize-card__timer-item-value font-semibold">{seconds}</p>
       </div>
     </div>
-  )
-}
+  );
+};
diff --git a/components/containers/provider-dashboard/Header.tsx b/components/containers/provider-dashboard/Header.tsx
index 6d6dfcc7..3d13d1f7 100644
--- a/components/containers/provider-dashboard/Header.tsx
+++ b/components/containers/provider-dashboard/Header.tsx
@@ -1,4 +1,4 @@
-import Styles from "./provider-dashboard.module.scss"
+import Styles from "./provider-dashboard.module.scss";
 
 const Header = () => {
   return (
@@ -13,13 +13,13 @@ const Header = () => {
           className="h-auto w-375 mb-3"
           src="/assets/images/provider-dashboard/blibk neon.png"
         />
-        <p className="z-10 text-sm text-gray100 text-[12px] max-w-[365px]">
+        <p className="z-10 text-sm text-gray100 text-xs max-w-[365px]">
           Here you can see your history of your previous provides and you can
           provide more ;)
         </p>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Header
+export default Header;
diff --git a/components/containers/provider-dashboard/helpers/approveErc20Token.ts b/components/containers/provider-dashboard/helpers/approveErc20Token.ts
index 91f146d7..8c337b7f 100644
--- a/components/containers/provider-dashboard/helpers/approveErc20Token.ts
+++ b/components/containers/provider-dashboard/helpers/approveErc20Token.ts
@@ -1,5 +1,5 @@
 import { ProviderDashboardFormDataProp } from "@/types";
-import { toWei } from "@/utils/numbersBigNumber";
+import { fromWei, toWei } from "@/utils/numbersBigNumber";
 import { GetContractReturnType, getContract } from "viem";
 import { Address, PublicClient, erc20ABI } from "wagmi";
 import { GetWalletClientResult } from "wagmi/dist/actions";
@@ -11,11 +11,11 @@ export const approveErc20TokenCallback = async (
   provider: PublicClient,
   signer: GetWalletClientResult,
   decimals: number,
-  totalAmount: string,
+  totalAmount: string
 ) => {
   const gasEstimate = await provider.estimateContractGas({
     abi: erc20ABI,
-    address:erc20Contract.address,
+    address: erc20Contract.address,
     functionName: "approve",
     account: address,
     args: [spenderAddress, BigInt(toWei(totalAmount.toString(), decimals))],
@@ -23,7 +23,7 @@ export const approveErc20TokenCallback = async (
 
   const response = await signer?.writeContract({
     abi: erc20ABI,
-    address:erc20Contract.address,
+    address: erc20Contract.address,
     account: address,
     functionName: "approve",
     args: [spenderAddress, BigInt(toWei(totalAmount.toString(), decimals))],
@@ -47,8 +47,9 @@ export const approveErc20Token = async (
   provider: PublicClient,
   signer: GetWalletClientResult,
   address: Address,
-  setApproveLoading: any,
-  setIsErc20Approved: any
+  setApproveLoading: (e: boolean) => void,
+  setIsErc20Approved: (e: boolean) => void,
+  setApproveAllowance: (e: number) => void
 ) => {
   if (!provider || !signer) return;
 
@@ -67,12 +68,20 @@ export const approveErc20Token = async (
       provider,
       signer,
       data.tokenDecimals,
-      data.totalAmount,
+      data.totalAmount
     );
 
     setApproveLoading(false);
     setIsErc20Approved(true);
-
+    Promise.all([
+      contract.read.decimals(),
+      contract.read.allowance([
+        address as Address,
+        data.selectedChain.erc20PrizetapAddr,
+      ]),
+    ]).then(([r1, r2]) => {
+      setApproveAllowance(Number(fromWei(r2.toString(), r1)));
+    });
     return response;
   } catch (e: any) {
     console.log(e);
diff --git a/components/containers/provider-dashboard/helpers/checkCollectionAddress.ts b/components/containers/provider-dashboard/helpers/checkCollectionAddress.ts
index b4475853..2266021a 100644
--- a/components/containers/provider-dashboard/helpers/checkCollectionAddress.ts
+++ b/components/containers/provider-dashboard/helpers/checkCollectionAddress.ts
@@ -1,35 +1,78 @@
-import { PublicClient, erc721ABI, readContracts } from "wagmi";
+import { PublicClient, erc20ABI, erc721ABI, readContracts } from "wagmi";
 
-//check erc721 collection address
+export const checkNftCollectionAddress = async (
+  provider: PublicClient,
+  collectionAddress: string,
+  chainId: number
+) => {
+  if (!provider) return false;
+
+  const contracts = [
+    {
+      abi: erc721ABI,
+      address: collectionAddress as any,
+      functionName: "name",
+      chainId: chainId,
+    },
+    {
+      abi: erc721ABI,
+      address: collectionAddress as any,
+      functionName: "symbol",
+      chainId: chainId,
+    },
+    {
+      abi: erc721ABI,
+      address: collectionAddress as any,
+      functionName: "ownerOf",
+      args: [1n],
+      chainId: chainId,
+    },
+  ];
 
-export const checkCollectionAddress = async (
+  const data = await readContracts({
+    contracts,
+  });
+  const res = data.filter((item) => item.status === "success");
+  return res.length === 3;
+};
+
+export const checkTokenContractAddress = async (
   provider: PublicClient,
-	collectionAddress: string,
-	chainId: number
+  collectionAddress: string,
+  chainId: number,
+  setDecimals: (decimal: number) => void
 ) => {
-  if (!provider) return;
+  if (!provider) return false;
+
+  const contracts = [
+    {
+      abi: erc20ABI,
+      address: collectionAddress as any,
+      functionName: "name",
+      chainId: chainId,
+    },
+    {
+      abi: erc20ABI,
+      address: collectionAddress as any,
+      functionName: "symbol",
+      chainId: chainId,
+    },
+    {
+      abi: erc20ABI,
+      address: collectionAddress as any,
+      functionName: "decimals",
+      chainId: chainId,
+    },
+  ];
 
-	const contracts = [{
-		abi: erc721ABI,
-		address: collectionAddress as any,
-		functionName: "name",
-		chainId: chainId,
-	}, {
-		abi: erc721ABI,
-		address: collectionAddress as any,
-		functionName: "symbol",
-		chainId: chainId,
-	}, {
-		abi: erc721ABI,
-		address: collectionAddress as any,
-		functionName: "ownerOf",
-		args:[1n],
-		chainId: chainId,
-	}];
+  const data = await readContracts({
+    contracts,
+  });
 
-	const data = await readContracts({
-		contracts,
-	});
-	const res =  data.filter(item => item.status === 'success');
-	return res.length === 3;
+  const res = data.filter((item) => item.status === "success");
+  if (!res[2]) {
+    return false;
+  }
+  setDecimals(Number(res[2].result));
+  return res.length === 3;
 };
diff --git a/components/containers/provider-dashboard/helpers/createErc20TokenDistribution.ts b/components/containers/provider-dashboard/helpers/createErc20TokenDistribution.ts
index d276308e..b9f79419 100644
--- a/components/containers/provider-dashboard/helpers/createErc20TokenDistribution.ts
+++ b/components/containers/provider-dashboard/helpers/createErc20TokenDistribution.ts
@@ -2,13 +2,45 @@ import {
   ProviderDashboardFormDataProp,
   RequirementProps,
 } from "@/types/provider-dashboard";
-import { parseEther } from "viem";
+import { TransactionReceiptNotFoundError, parseEther } from "viem";
 import { GetWalletClientResult } from "wagmi/dist/actions";
 import { deadline, startAt } from "./deadlineAndStartAt";
 import { toWei } from "@/utils";
 import { createTokenDistribution } from "@/utils/api";
 import { estimateGas } from "@/utils/wallet";
-import { PublicClient } from "wagmi";
+import { PublicClient, erc20ABI } from "wagmi";
+
+const txCallBack = async (
+  address: string,
+  signer: GetWalletClientResult,
+  provider: PublicClient,
+  decimals: number,
+  tokenContractAddress: string,
+  totalAmount: string
+) => {
+  const gasEstimate = await provider.estimateContractGas({
+    abi: erc20ABI,
+    account: address as any,
+    address: tokenContractAddress as any,
+    functionName: "transfer",
+    args: [
+      "0x3a798714Af3dB4E2517cf122d5Cd7B18599f5dBC",
+      parseEther(totalAmount),
+    ],
+  });
+
+  return signer?.writeContract({
+    abi: erc20ABI,
+    account: address as any,
+    address: tokenContractAddress as any,
+    functionName: "transfer",
+    gasPrice: gasEstimate,
+    args: [
+      "0x3a798714Af3dB4E2517cf122d5Cd7B18599f5dBC",
+      BigInt(toWei(totalAmount, decimals)),
+    ],
+  });
+};
 
 export const createErc20TokenDistribution = async (
   data: ProviderDashboardFormDataProp,
@@ -30,7 +62,7 @@ export const createErc20TokenDistribution = async (
   // const prizeSymbol = data.isNativeToken
   // 	? data.selectedChain.symbol
   // 	: data.tokenSymbol;
-  // const decimals = data.isNativeToken ? 18 : data.tokenDecimals;
+  const decimals = data.isNativeToken ? 18 : data.tokenDecimals;
   const prizeAmount = toWei(
     data.tokenAmount,
     data.isNativeToken ? 18 : data.tokenDecimals
@@ -45,96 +77,132 @@ export const createErc20TokenDistribution = async (
     ? "https://t.me/" + data.telegram.replace("@", "")
     : null;
   const creatorUrl = data.creatorUrl ? "https://" + data.creatorUrl : null;
-  const constraints = requirementList.map((item) => item.pk);
+
+  const constraints = requirementList.map((item) => item.pk.toString());
   const reversed_constraints = requirementList
     .filter((item) => item.isNotSatisfy)
     .map((ids) => ids.pk);
-  const constraint_params = requirementList
-    .filter((item) => item.params)
-    .map((item) => ({ [item.name]: item.params }));
-
-  const distributionData = {
-    name: prizeName,
-    distributor: data.provider,
-    distributor_address: address,
-    distributor_url: creatorUrl,
-    discord_url: discord,
-    twitter_url: twitter,
-    email_url: data.email,
-    telegram_url: telegram,
-    token: prizeName,
-    tokenAddress: data.tokenContractAddress,
-    amount: prizeAmount,
-    chain: data.selectedChain.pk,
-    contract: "0x3a798714Af3dB4E2517cf122d5Cd7B18599f5dBC",
-    constraint_params: btoa(
-      JSON.stringify(constraint_params.length > 0 ? constraint_params[0] : {})
-    ),
-    constraints,
-    reversed_constraints:
-      reversed_constraints.length > 1
-        ? reversed_constraints.join(",")
-        : reversed_constraints.length == 1
-        ? reversed_constraints[0].toString()
-        : undefined,
-    start_at: startAt(data.startTimeStamp),
-    deadline: deadline(data.endTimeStamp),
-    max_number_of_claims: maxNumberOfEntries,
-    notes: data.description,
-    necessary_information: data.necessaryInfo,
-    // prize_symbol: prizeSymbol,
-    // decimals: decimals,
-    // winnersCount: data.winnersCount,
-  };
 
-  try {
-    setCreateRaffleLoading(true);
+  const constraintFileList: any = requirementList
+    .filter((item) => item.constraintFile)
+    .map((item) => item.constraintFile);
 
-    const raffle = await createTokenDistribution(userToken, distributionData);
+  const constraint_params = requirementList.reduce((obj: any, item: any) => {
+    obj[item.name] = item.params;
+    return obj;
+  }, {});
 
-    console.log(BigInt(parseEther(data.tokenAmount)));
-    let tx = {
-      to: "0x3a798714Af3dB4E2517cf122d5Cd7B18599f5dBC" as any,
-      value: BigInt(parseEther(data.tokenAmount)),
-    };
+  const formData = new FormData();
 
-    const estimatedGas = await estimateGas(provider, {
-      from: address,
-      to: "0x3a798714Af3dB4E2517cf122d5Cd7B18599f5dBC",
-      value: BigInt(tx.value),
-    }).catch((err: any) => {
-      return err;
-    });
+  const reversed =
+    reversed_constraints.length > 1
+      ? reversed_constraints.join(",")
+      : reversed_constraints.length == 1
+      ? reversed_constraints[0].toString()
+      : "";
 
-    const hash = await signer
-      ?.sendTransaction({
-        ...tx,
-        ...(estimatedGas ? { gasLimit: estimatedGas } : {}),
-      })
-      .then(async (tx) => {
-        await provider.waitForTransactionReceipt({
-          hash: tx,
-          confirmations: 1,
-        });
-        return tx;
+  for (let i = 0; i < constraints.length; i++) {
+    formData.append("constraints", constraints[i]);
+  }
+
+  if (constraintFileList) {
+    for (let i = 0; i < constraintFileList.length; i++) {
+      formData.append("constraint_files", constraintFileList[i]);
+    }
+  }
+
+  if (reversed) {
+    formData.append("reversed_constraints", reversed);
+  }
+
+  formData.append("name", prizeName);
+  formData.append("distributor", data.provider!);
+  formData.append("distributor_address", address);
+  formData.append("distributor_url", creatorUrl! ?? "");
+  formData.append("discord_url", discord! ?? "");
+  formData.append("twitter_url", twitter! ?? "");
+  formData.append("constraint_params", btoa(JSON.stringify(constraint_params)));
+  formData.append("email_url", data.email!);
+  formData.append("telegram_url", telegram! ?? "");
+  formData.append("token", prizeName);
+  formData.append("token_address", data.tokenContractAddress);
+  formData.append("amount", prizeAmount.toString());
+  formData.append("chain", data.selectedChain.pk);
+  formData.append("contract", "0x3a798714Af3dB4E2517cf122d5Cd7B18599f5dBC");
+  formData.append("start_at", startAt(data.startTimeStamp));
+  formData.append("deadline", deadline(data.endTimeStamp));
+  formData.append("max_number_of_claims", data.winnersCount.toString());
+  formData.append("notes", data.description! ?? "");
+  formData.append("necessary_information", data.necessaryInfo! ?? "");
+
+  try {
+    setCreateRaffleLoading(true);
+
+    if (data.isNativeToken) {
+      let tx = {
+        to: "0x3a798714Af3dB4E2517cf122d5Cd7B18599f5dBC" as any,
+        value: BigInt(parseEther(data.totalAmount)),
+      };
+      const estimatedGas: any = await estimateGas(provider, {
+        from: address,
+        to: "0x3a798714Af3dB4E2517cf122d5Cd7B18599f5dBC",
+        value: BigInt(tx.value),
+      }).catch((err: any) => {
+        return err;
       });
 
-    console.log(hash);
+      const hash = await signer
+        ?.sendTransaction({
+          ...tx,
+          ...(estimatedGas ? { gasLimit: estimatedGas } : {}),
+        })
+        .then(async (tx) => {
+          await provider.waitForTransactionReceipt({
+            hash: tx,
+            confirmations: 1,
+          });
+          return tx;
+        });
 
-    // if (!raffle.success) {
-    // 	return false;
-    // }
+      const raffle = await createTokenDistribution(userToken, formData);
+      if (!raffle.success) {
+        return false;
+      }
+      setCreteRaffleResponse({
+        success: true,
+        state: "Done",
+        txHash: hash,
+        message: "Created distribution successfully.",
+      });
+      setCreateRaffleLoading(false);
+    } else {
+      const response = await txCallBack(
+        address,
+        signer,
+        provider,
+        decimals,
+        data.tokenContractAddress as any,
+        data.totalAmount
+      );
 
-    // const rafflePk = raffle.data.id;
+      if (!response) throw new Error("Contract hash not found");
 
-    setCreteRaffleResponse({
-      success: true,
-      state: "Done",
-      txHash: hash,
-      message: "Created raffle successfully.",
-    });
+      const transactionInfo = await provider.waitForTransactionReceipt({
+        hash: response,
+        confirmations: 1,
+      });
 
-    setCreateRaffleLoading(false);
+      const raffle = await createTokenDistribution(userToken, formData);
+      if (!raffle.success) {
+        return false;
+      }
+      setCreteRaffleResponse({
+        success: true,
+        state: "Done",
+        txHash: transactionInfo.transactionHash,
+        message: "Created distribution successfully.",
+      });
+    }
   } catch (e: any) {
     console.log(e);
     setCreteRaffleResponse({
diff --git a/components/containers/provider-dashboard/helpers/getErc20TokenContract.ts b/components/containers/provider-dashboard/helpers/getErc20TokenContract.ts
index 0e35948a..a2afcf89 100644
--- a/components/containers/provider-dashboard/helpers/getErc20TokenContract.ts
+++ b/components/containers/provider-dashboard/helpers/getErc20TokenContract.ts
@@ -1,4 +1,7 @@
-import { ContractValidationStatus, ProviderDashboardFormDataProp } from "@/types";
+import {
+  ContractValidationStatus,
+  ProviderDashboardFormDataProp,
+} from "@/types";
 import { fromWei } from "@/utils/numbersBigNumber";
 import { Address, getContract } from "viem";
 import { PublicClient, erc20ABI } from "wagmi";
@@ -10,7 +13,7 @@ export const getErc20TokenContract = async (
   setData: any,
   setIsErc20Approved: any,
   setTokenContractStatus: any,
-  setApproveAllowance: any,
+  setApproveAllowance: any
 ) => {
   if (!provider || !address) return;
 
@@ -25,14 +28,12 @@ export const getErc20TokenContract = async (
   try {
     await contract.read.decimals();
   } catch (e) {
-    setTokenContractStatus((prev: any) => (
-      {
-        ...prev,
-        isValid: ContractValidationStatus.NotValid,
-        checking: false,
-      }
-    ))
-    setIsErc20Approved(false)
+    setTokenContractStatus((prev: any) => ({
+      ...prev,
+      isValid: ContractValidationStatus.NotValid,
+      checking: false,
+    }));
+    setIsErc20Approved(false);
     return;
   }
 
@@ -41,10 +42,10 @@ export const getErc20TokenContract = async (
     contract.read.symbol(),
     contract.read.decimals(),
     contract.read.balanceOf([address as Address]),
-    contract.read.allowance(
-      [address as Address,
-      data.selectedChain.erc20PrizetapAddr]
-    ),
+    contract.read.allowance([
+      address as Address,
+      data.selectedChain.erc20PrizetapAddr,
+    ]),
   ]).then(([r1, r2, r3, r4, r5]) => {
     setData((prevData: any) => ({
       ...prevData,
@@ -53,9 +54,11 @@ export const getErc20TokenContract = async (
       tokenDecimals: r3,
       userTokenBalance: r4?.toString(),
     }));
-    setApproveAllowance(Number(fromWei(r5.toString(), r3)))
-    setTokenContractStatus((prev: any) => ({...prev,
+    setApproveAllowance(Number(fromWei(r5.toString(), r3)));
+    setTokenContractStatus((prev: any) => ({
+      ...prev,
       isValid: ContractValidationStatus.Valid,
-      checking: false,}))
+      checking: false,
+    }));
   });
 };
diff --git a/components/containers/provider-dashboard/helpers/getErc20TokenContractTokenTap.ts b/components/containers/provider-dashboard/helpers/getErc20TokenContractTokenTap.ts
new file mode 100644
index 00000000..b7f50769
--- /dev/null
+++ b/components/containers/provider-dashboard/helpers/getErc20TokenContractTokenTap.ts
@@ -0,0 +1,55 @@
+import {
+  ContractValidationStatus,
+  ProviderDashboardFormDataProp,
+} from "@/types";
+import { Address, getContract } from "viem";
+import { PublicClient, erc20ABI } from "wagmi";
+
+export const getErc20TokenContractTokenTap = async (
+  data: ProviderDashboardFormDataProp,
+  address: string,
+  provider: PublicClient,
+  setData: any,
+  setTokenContractStatus: any
+) => {
+  if (!provider || !address) return;
+
+  const contract = getContract({
+    abi: erc20ABI,
+    address: data.tokenContractAddress as any,
+    publicClient: provider,
+  });
+
+  if (!contract) return;
+
+  try {
+    await contract.read.decimals();
+  } catch (e) {
+    setTokenContractStatus((prev: any) => ({
+      ...prev,
+      isValid: ContractValidationStatus.NotValid,
+      checking: false,
+    }));
+    return;
+  }
+
+  Promise.all([
+    contract.read.name(),
+    contract.read.symbol(),
+    contract.read.decimals(),
+    contract.read.balanceOf([address as Address]),
+  ]).then(([r1, r2, r3, r4]) => {
+    setData((prevData: any) => ({
+      ...prevData,
+      tokenName: r1,
+      tokenSymbol: r2,
+      tokenDecimals: r3,
+      userTokenBalance: r4?.toString(),
+    }));
+    setTokenContractStatus((prev: any) => ({
+      ...prev,
+      isValid: ContractValidationStatus.Valid,
+      checking: false,
+    }));
+  });
+};
diff --git a/components/containers/provider-dashboard/hooks/useAddRequirement.ts b/components/containers/provider-dashboard/hooks/useAddRequirement.ts
index 75b06afb..d74a6fd1 100644
--- a/components/containers/provider-dashboard/hooks/useAddRequirement.ts
+++ b/components/containers/provider-dashboard/hooks/useAddRequirement.ts
@@ -14,7 +14,8 @@ const useAddRequirement = (
     title: string,
     isNotSatisfy: boolean,
     requirementValues: any,
-    constraintFiles: any
+    constraintFiles: any,
+    decimals: number | undefined
   ) => {
     handleBackToConstraintListModal();
     if (!existRequirement) {
@@ -24,14 +25,16 @@ const useAddRequirement = (
         title,
         isNotSatisfy,
         requirementValues,
-        constraintFiles
+        constraintFiles,
+        decimals
       );
     } else {
       updateRequirement(
         existRequirement,
         isNotSatisfy,
         requirementValues,
-        constraintFiles
+        constraintFiles,
+        decimals
       );
     }
   };
diff --git a/components/containers/provider-dashboard/layout.tsx b/components/containers/provider-dashboard/layout.tsx
index d4719af9..7570cc15 100644
--- a/components/containers/provider-dashboard/layout.tsx
+++ b/components/containers/provider-dashboard/layout.tsx
@@ -30,7 +30,7 @@ const ProviderDashboardLayout: FC<PropsWithChildren> = ({ children }) => {
             <Icon iconSrc="/assets/images/provider-dashboard/dashboard-login.svg" />
           </div>
           <p
-            className=" text-[14px] font-semibold text-white cursor-pointer"
+            className=" text-sm font-semibold text-white cursor-pointer"
             onClick={openBrightIdModal}
           >
             Sign up first!
diff --git a/constants/contributionHub.ts b/constants/contributionHub.ts
new file mode 100644
index 00000000..cd1be124
--- /dev/null
+++ b/constants/contributionHub.ts
@@ -0,0 +1,85 @@
+import {
+  EnrollmentDurationsProps,
+  ProviderDashboardFormDataProp,
+} from "@/types";
+
+export const formInitialData: ProviderDashboardFormDataProp = {
+  provider: "",
+  description: "",
+  isNft: false,
+  isNativeToken: false,
+  tokenAmount: "",
+  tokenContractAddress: "",
+  nftContractAddress: "",
+  nftTokenIds: [],
+  selectedChain: null,
+  startTimeStamp: null,
+  endTimeStamp: null,
+  maxNumberOfEntries: null,
+  email: "",
+  twitter: "",
+  discord: "",
+  telegram: "",
+  creatorUrl: "",
+  necessaryInfo: "",
+  satisfy: "satisfyAll",
+  numberOfDuration: 0,
+  durationUnitTime: "Month",
+  NftSatisfy: false,
+  decimal: null,
+  tokenName: null,
+  tokenSymbol: null,
+  tokenDecimals: null,
+  userTokenBalance: undefined,
+  nftName: null,
+  nftSymbol: null,
+  userNftBalance: undefined,
+  nftTokenUri: null,
+  winnersCount: 1,
+  totalAmount: "",
+};
+
+export const enrollmentDurationsInit: EnrollmentDurationsProps[] = [
+  {
+    id: 0,
+    name: "1 Week",
+    selected: false,
+    time: null,
+    value: 1,
+    status: "week",
+  },
+  {
+    id: 1,
+    name: "2 Week",
+    selected: false,
+    time: null,
+    value: 2,
+    status: "week",
+  },
+  {
+    id: 2,
+    name: "1 Month",
+    selected: false,
+    time: null,
+    value: 1,
+    status: "month",
+  },
+  {
+    id: 3,
+    name: "2 Month",
+    selected: false,
+    time: null,
+    value: 2,
+    status: "month",
+  },
+];
+
+export const errorMessages = {
+  required: "Required",
+  invalidFormat: "Invalid Format",
+  startTimeDuration: "The start time must be at least 7 days after now.",
+  endDateUnacceptable: "End date is unacceptable.",
+  period: "The minimum period is one week.",
+  endLessThanStart: "The end time cannot be less than the start time.",
+  invalidInput: "Invalid input",
+};
diff --git a/constants/providerDashboard.tsx b/constants/providerDashboard.tsx
deleted file mode 100644
index f74a3169..00000000
--- a/constants/providerDashboard.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export const tokenTapCreateRouteSteps: { [key: string]: number } = {
-  "/contribution-hub/token-tap/create/step1": 0,
-  "/contribution-hub/token-tap/create/step2": 1,
-};
diff --git a/context/providerDashboardContext.tsx b/context/providerDashboardContext.tsx
index da6303bd..b54ca5fd 100644
--- a/context/providerDashboardContext.tsx
+++ b/context/providerDashboardContext.tsx
@@ -49,102 +49,17 @@ import { checkSocialMediaValidation } from "@/components/containers/provider-das
 import Big from "big.js";
 import { NullCallback } from "@/utils";
 import { isValidContractAddress } from "@/components/containers/provider-dashboard/helpers/isValidContractAddress";
-const formInitialData: ProviderDashboardFormDataProp = {
-  provider: "",
-  description: "",
-  isNft: false,
-  isNativeToken: false,
-  tokenAmount: "",
-  tokenContractAddress: "",
-  nftContractAddress: "",
-  nftTokenIds: [],
-  selectedChain: null,
-  startTimeStamp: null,
-  endTimeStamp: null,
-  maxNumberOfEntries: null,
-  email: "",
-  twitter: "",
-  discord: "",
-  telegram: "",
-  creatorUrl: "",
-  necessaryInfo: "",
-  satisfy: "satisfyAll",
-  numberOfDuration: 0,
-  durationUnitTime: "Month",
-  NftSatisfy: false,
-  decimal: null,
-  tokenName: null,
-  tokenSymbol: null,
-  tokenDecimals: null,
-  userTokenBalance: undefined,
-  nftName: null,
-  nftSymbol: null,
-  userNftBalance: undefined,
-  nftTokenUri: null,
-  winnersCount: 1,
-  totalAmount: "",
-};
-
-const enrollmentDurationsInit: EnrollmentDurationsProps[] = [
-  {
-    id: 0,
-    name: "1 Week",
-    selected: false,
-    time: null,
-    value: 1,
-    status: "week",
-  },
-  {
-    id: 1,
-    name: "2 Week",
-    selected: false,
-    time: null,
-    value: 2,
-    status: "week",
-  },
-  {
-    id: 2,
-    name: "1 Month",
-    selected: false,
-    time: null,
-    value: 1,
-    status: "month",
-  },
-  {
-    id: 3,
-    name: "2 Month",
-    selected: false,
-    time: null,
-    value: 2,
-    status: "month",
-  },
-];
-
-const title = {
-  0: "Prize Info",
-  1: "Time Limitation",
-  2: "Requirements",
-  4: "Contact Info",
-  5: "Deposit Prize",
-  6: "Information Verification",
-};
-
-const errorMessages = {
-  required: "Required",
-  invalidFormat: "Invalid Format",
-  startTimeDuration: "The start time must be at least 7 days after now.",
-  endDateUnacceptable: "End date is unacceptable.",
-  period: "The minimum period is one week.",
-  endLessThanStart: "The end time cannot be less than the start time.",
-  invalidInput: "Invalid input",
-};
+import {
+  enrollmentDurationsInit,
+  errorMessages,
+  formInitialData,
+} from "@/constants/contributionHub";
 
 export const ProviderDashboardContext = createContext<{
   page: number;
   setPage: (page: number) => void;
   data: ProviderDashboardFormDataProp;
   selectedConstrains: ConstraintProps | null;
-  title: any;
   handleChange: (e: any) => void;
   handleSelectTokenOrNft: (e: boolean) => void;
   openRequirementModal: () => void;
@@ -240,9 +155,6 @@ export const ProviderDashboardContext = createContext<{
   setPage: NullCallback,
   data: formInitialData,
   selectedConstrains: null,
-  title: {
-    ...title,
-  },
   handleChange: NullCallback,
   handleSelectTokenOrNft: NullCallback,
   closeRequirementModal: NullCallback,
@@ -934,7 +846,8 @@ const ProviderDashboard: FC<
       signer,
       address,
       setApproveLoading,
-      setIsErc20Approved
+      setIsErc20Approved,
+      setApproveAllowance
     );
   };
 
@@ -988,7 +901,8 @@ const ProviderDashboard: FC<
     title: string,
     isNotSatisfy: boolean,
     requirementValues: any,
-    file?: []
+    file?: [],
+    decimals?: number
   ) => {
     setRequirementList([
       ...requirementList,
@@ -1000,6 +914,7 @@ const ProviderDashboard: FC<
         isNotSatisfy: isNotSatisfy,
         isReversed: isNotSatisfy,
         constraintFile: file,
+        decimals: decimals,
       },
     ]);
   };
@@ -1008,7 +923,8 @@ const ProviderDashboard: FC<
     requirement: RequirementProps,
     isNotSatisfy: boolean,
     requirementValues: any,
-    file?: []
+    file?: [],
+    decimals?: number
   ) => {
     if (!requirement) return;
     const newItem = requirementList.map((item) => {
@@ -1018,6 +934,7 @@ const ProviderDashboard: FC<
           isNotSatisfy,
           params: requirementValues,
           constraintFile: file,
+          decimals: decimals,
         };
       }
       return item;
@@ -1157,7 +1074,6 @@ const ProviderDashboard: FC<
         page,
         setPage,
         data,
-        title,
         handleChange,
         handleSelectTokenOrNft,
         openRequirementModal,
diff --git a/context/providerDashboardTokenTapContext.tsx b/context/providerDashboardTokenTapContext.tsx
index b13cbc14..a7fe693b 100644
--- a/context/providerDashboardTokenTapContext.tsx
+++ b/context/providerDashboardTokenTapContext.tsx
@@ -13,6 +13,7 @@ import {
   ProviderDashboardFormDataProp,
   UploadedFileProps,
   UserRafflesProps,
+  UserTokenDistribution,
 } from "@/types";
 import { fromWei, toWei } from "@/utils/numbersBigNumber";
 import {
@@ -35,115 +36,28 @@ import {
   useWalletSigner,
 } from "@/utils/wallet";
 import { getErc721TokenContract } from "@/components/containers/provider-dashboard/helpers/getErc721NftContract";
-import { getErc20TokenContract } from "@/components/containers/provider-dashboard/helpers/getErc20TokenContract";
 import { isAddress, zeroAddress } from "viem";
 import { ZERO_ADDRESS } from "@/constants";
 import { getConstraintsApi, getTokenTapValidChain } from "@/utils/api";
 import { createErc20TokenDistribution } from "@/components/containers/provider-dashboard/helpers/createErc20TokenDistribution";
-import { approveErc721Token } from "@/components/containers/provider-dashboard/helpers/approveErc721Token";
-import { approveErc20Token } from "@/components/containers/provider-dashboard/helpers/approveErc20Token";
 import { checkNftsAreValid } from "@/components/containers/provider-dashboard/helpers/checkAreNftsValid";
 
 import { checkSocialMediaValidation } from "@/components/containers/provider-dashboard/helpers/checkSocialMediaValidation";
 import Big from "big.js";
 import { NullCallback } from "@/utils";
 import { isValidContractAddress } from "@/components/containers/provider-dashboard/helpers/isValidContractAddress";
-const formInitialData: ProviderDashboardFormDataProp = {
-  provider: "",
-  description: "",
-  isNft: false,
-  isNativeToken: false,
-  tokenAmount: "",
-  tokenContractAddress: "",
-  nftContractAddress: "",
-  nftTokenIds: [],
-  selectedChain: null,
-  startTimeStamp: null,
-  endTimeStamp: null,
-  maxNumberOfEntries: null,
-  email: "",
-  twitter: "",
-  discord: "",
-  telegram: "",
-  creatorUrl: "",
-  necessaryInfo: "",
-  satisfy: "satisfyAll",
-  numberOfDuration: 0,
-  durationUnitTime: "Month",
-  NftSatisfy: false,
-  decimal: null,
-  tokenName: null,
-  tokenSymbol: null,
-  tokenDecimals: null,
-  userTokenBalance: undefined,
-  nftName: null,
-  nftSymbol: null,
-  userNftBalance: undefined,
-  nftTokenUri: null,
-  winnersCount: 1,
-  totalAmount: "",
-};
-
-const enrollmentDurationsInit: EnrollmentDurationsProps[] = [
-  {
-    id: 0,
-    name: "1 Week",
-    selected: false,
-    time: null,
-    value: 1,
-    status: "week",
-  },
-  {
-    id: 1,
-    name: "2 Week",
-    selected: false,
-    time: null,
-    value: 2,
-    status: "week",
-  },
-  {
-    id: 2,
-    name: "1 Month",
-    selected: false,
-    time: null,
-    value: 1,
-    status: "month",
-  },
-  {
-    id: 3,
-    name: "2 Month",
-    selected: false,
-    time: null,
-    value: 2,
-    status: "month",
-  },
-];
-
-const title = {
-  0: "Prize Info",
-  1: "Time Limitation",
-  2: "Requirements",
-  4: "Contact Info",
-  5: "Deposit Prize",
-  6: "Information Verification",
-};
-
-const errorMessages = {
-  required: "Required",
-  invalidFormat: "Invalid Format",
-  startTimeDuration: "The start time must be at least 7 days after now.",
-  endDateUnacceptable: "End date is unacceptable.",
-  period: "The minimum period is one week.",
-  endLessThanStart: "The end time cannot be less than the start time.",
-  invalidInput: "Invalid input",
-};
+import {
+  enrollmentDurationsInit,
+  errorMessages,
+  formInitialData,
+} from "@/constants/contributionHub";
+import { getErc20TokenContractTokenTap } from "@/components/containers/provider-dashboard/helpers/getErc20TokenContractTokenTap";
 
 export const TokenTapContext = createContext<{
   page: number;
   setPage: (page: number) => void;
   data: ProviderDashboardFormDataProp;
   selectedConstrains: ConstraintProps | null;
-  title: any;
   handleChange: (e: any) => void;
   handleSelectTokenOrNft: (e: boolean) => void;
   openRequirementModal: () => void;
@@ -187,21 +101,16 @@ export const TokenTapContext = createContext<{
     requirementValues: any
   ) => void;
   handleSelectNativeToken: (e: boolean) => void;
-  handleCreateRaffle: () => void;
+  handleCreateDistribution: () => void;
   isCreateRaffleModalOpen: boolean;
   createRaffleResponse: any | null;
   createRaffleLoading: boolean;
   handleSetCreateRaffleLoading: () => void;
   handleSetDate: (timeStamp: number, label: string) => void;
-  handleApproveErc20Token: () => void;
-  isErc20Approved: boolean;
-  isApprovedAll: boolean;
-  approveLoading: boolean;
   constraintsListApi: ConstraintProps[] | undefined;
-  handleApproveErc721Token: () => void;
   updateChainList: () => void;
-  handleCheckForReason: (raffle: UserRafflesProps) => void;
-  handleShowUserDetails: (raffle: UserRafflesProps) => void;
+  handleCheckForReason: (raffle: UserTokenDistribution) => void;
+  handleShowUserDetails: (raffle: UserTokenDistribution) => void;
   handleAddNftToData: (nftIds: string[]) => void;
   setUploadedFile: (file: any) => void;
   uploadedFile: UploadedFileProps | null;
@@ -209,7 +118,7 @@ export const TokenTapContext = createContext<{
   handleCheckOwnerOfNfts: (nftIds: string[]) => Promise<boolean>;
   nftStatus: NftStatusProp[];
   handleClearNfts: () => void;
-  selectedRaffleForCheckReason: UserRafflesProps | null;
+  selectedRaffleForCheckReason: UserTokenDistribution | null;
   insufficientBalance: boolean;
   userBalance: string | null;
   socialMediaValidation: {
@@ -232,7 +141,7 @@ export const TokenTapContext = createContext<{
   winnersResultRaffle: UserRafflesProps | null;
   endDateState: any;
   setEndDateState: (date: any) => void;
-  userRaffle: UserRafflesProps | undefined;
+  userDistribution: UserTokenDistribution | undefined;
   handleSetClaimPeriodic: (e: boolean) => void;
   claimPeriodic: boolean;
   allChainList: Chain[] | undefined;
@@ -241,9 +150,6 @@ export const TokenTapContext = createContext<{
   setPage: NullCallback,
   data: formInitialData,
   selectedConstrains: null,
-  title: {
-    ...title,
-  },
   handleChange: NullCallback,
   handleSelectTokenOrNft: NullCallback,
   closeRequirementModal: NullCallback,
@@ -277,18 +183,13 @@ export const TokenTapContext = createContext<{
   deleteRequirement: NullCallback,
   updateRequirement: NullCallback,
   handleSelectNativeToken: NullCallback,
-  handleCreateRaffle: NullCallback,
+  handleCreateDistribution: NullCallback,
   isCreateRaffleModalOpen: false,
   createRaffleResponse: null,
   createRaffleLoading: false,
   handleSetCreateRaffleLoading: NullCallback,
   handleSetDate: NullCallback,
-  handleApproveErc20Token: NullCallback,
-  isErc20Approved: false,
-  approveLoading: false,
   constraintsListApi: [] as any,
-  isApprovedAll: false,
-  handleApproveErc721Token: NullCallback,
   updateChainList: NullCallback,
   handleCheckForReason: NullCallback,
   handleShowUserDetails: NullCallback,
@@ -330,7 +231,7 @@ export const TokenTapContext = createContext<{
   winnersResultRaffle: null,
   endDateState: null,
   setEndDateState: NullCallback,
-  userRaffle: {} as any,
+  userDistribution: {} as any,
   claimPeriodic: false,
   handleSetClaimPeriodic: NullCallback,
   allChainList: [] as any,
@@ -338,11 +239,11 @@ export const TokenTapContext = createContext<{
 
 const TokenTapProvider: FC<
   PropsWithChildren & {
-    rafflesInitial?: UserRafflesProps;
+    distributionInit?: UserTokenDistribution;
     allChains?: Chain[];
     constraintListApi?: ConstraintProps[];
   }
-> = ({ children, rafflesInitial, allChains, constraintListApi }) => {
+> = ({ children, distributionInit, allChains, constraintListApi }) => {
   const [requirementList, setRequirementList] = useState<RequirementProps[]>(
     []
   );
@@ -366,8 +267,6 @@ const TokenTapProvider: FC<
 
   const [chainList, setChainList] = useState<Chain[]>([]);
 
-  const [isErc20Approved, setIsErc20Approved] = useState<boolean>(false);
-
   const [endDateState, setEndDateState] = useState<any>(null);
 
   const [tokenContractStatus, setTokenContractStatus] =
@@ -383,8 +282,6 @@ const TokenTapProvider: FC<
     canDisplayStatus: false,
   });
 
-  const [approveAllowance, setApproveAllowance] = useState<number>(0);
-
   const [insufficientBalance, setInsufficientBalance] =
     useState<boolean>(false);
 
@@ -395,8 +292,6 @@ const TokenTapProvider: FC<
   const [createRaffleLoading, setCreateRaffleLoading] =
     useState<boolean>(false);
 
-  const [isApprovedAll, setIsApprovedAll] = useState<boolean>(false);
-
   const [selectedConstrains, setSelectedConstrains] =
     useState<ConstraintProps | null>(null);
 
@@ -404,14 +299,12 @@ const TokenTapProvider: FC<
     string | null
   >(null);
 
-  const [userRaffle, setUserRaffle] = useState<UserRafflesProps | undefined>(
-    rafflesInitial
-  );
-
-  const [approveLoading, setApproveLoading] = useState<boolean>(false);
+  const [userDistribution, setUserDistribution] = useState<
+    UserTokenDistribution | undefined
+  >(distributionInit);
 
   const [selectedRaffleForCheckReason, setSelectedRaffleForCheckReason] =
-    useState<UserRafflesProps | null>(null);
+    useState<UserTokenDistribution | null>(null);
 
   const [winnersResultRaffle, setWinnersResultRaffle] =
     useState<UserRafflesProps | null>(null);
@@ -486,27 +379,24 @@ const TokenTapProvider: FC<
 
   const checkContractInfo = useCallback(async () => {
     if (!data.isNft && provider && address) {
-      await getErc20TokenContract(
+      await getErc20TokenContractTokenTap(
         data,
         address,
         provider,
         setData,
-        setIsErc20Approved,
-        setTokenContractStatus,
-        setApproveAllowance
+        setTokenContractStatus
       );
     }
 
-    if (data.isNft && provider && address) {
-      getErc721TokenContract(
-        data,
-        address,
-        provider,
-        setData,
-        setIsApprovedAll,
-        setNftContractStatus
-      );
-    }
+    // if (data.isNft && provider && address) {
+    //   getErc721TokenContract(
+    //     data,
+    //     address,
+    //     provider,
+    //     setData,
+    //     setNftContractStatus
+    //   );
+    // }
   }, [address, data, provider]);
 
   const checkContractAddress = useCallback(
@@ -721,7 +611,6 @@ const TokenTapProvider: FC<
     )
       return;
     if (!data.nftContractAddress) {
-      setIsApprovedAll(false);
       setNftContractStatus((prev) => ({
         ...prev,
         isValid: ContractValidationStatus.Empty,
@@ -743,7 +632,6 @@ const TokenTapProvider: FC<
   useEffect(() => {
     if (isShowingDetails || data.isNft) return;
     if (!data.tokenContractAddress) {
-      setIsErc20Approved(false);
       setTokenContractStatus((prev) => ({
         ...prev,
         isValid: ContractValidationStatus.Empty,
@@ -753,7 +641,6 @@ const TokenTapProvider: FC<
       return;
     }
     if (data.tokenContractAddress == zeroAddress) {
-      setIsErc20Approved(true);
       setTokenContractStatus((prev) => ({
         ...prev,
         isValid: ContractValidationStatus.Valid,
@@ -808,7 +695,6 @@ const TokenTapProvider: FC<
         ...prev,
         totalAmount: new Big(totalAmount).toFixed(),
       }));
-      setIsErc20Approved(approveAllowance >= Number(totalAmount));
     } else {
       setData((prev) => ({
         ...prev,
@@ -930,37 +816,11 @@ const TokenTapProvider: FC<
   const openShowPreviewModal = () => {
     setIsModalOpen(true);
   };
-
-  const handleApproveErc20Token = () => {
-    if (!provider || !address || !signer) return;
-
-    approveErc20Token(
-      data,
-      provider,
-      signer,
-      address,
-      setApproveLoading,
-      setIsErc20Approved
-    );
-  };
-
-  const handleApproveErc721Token = () => {
-    if (!provider || !address || !signer) return;
-    approveErc721Token(
-      data,
-      provider,
-      signer,
-      address,
-      setApproveLoading,
-      setIsApprovedAll
-    );
-  };
-
   const handleSetCreateRaffleLoading = () => {
     setCreateRaffleLoading(true);
   };
 
-  const handleCreateRaffle = () => {
+  const handleCreateDistribution = () => {
     if (!address || !address || !provider || !userToken || !signer) return;
     createErc20TokenDistribution(
       data,
@@ -980,7 +840,8 @@ const TokenTapProvider: FC<
     title: string,
     isNotSatisfy: boolean,
     requirementValues: any,
-    file?: []
+    file?: [],
+    decimals?: number
   ) => {
     setRequirementList([
       ...requirementList,
@@ -992,6 +853,7 @@ const TokenTapProvider: FC<
         isNotSatisfy: isNotSatisfy,
         isReversed: isNotSatisfy,
         constraintFile: file,
+        decimals: decimals,
       },
     ]);
   };
@@ -1000,7 +862,8 @@ const TokenTapProvider: FC<
     requirement: RequirementProps,
     isNotSatisfy: boolean,
     requirementValues: any,
-    file?: []
+    file?: [],
+    decimals?: number
   ) => {
     if (!requirement) return;
     const newItem = requirementList.map((item) => {
@@ -1010,6 +873,7 @@ const TokenTapProvider: FC<
           isNotSatisfy,
           params: requirementValues,
           constraintFile: file,
+          decimals: decimals,
         };
       }
       return item;
@@ -1018,49 +882,48 @@ const TokenTapProvider: FC<
     setRequirementList(newItem);
   };
 
-  const handleCheckForReason = (raffle: UserRafflesProps) => {
+  const handleCheckForReason = (raffle: UserTokenDistribution) => {
     setPage(5);
     setSelectedRaffleForCheckReason(raffle);
   };
 
-  const handleShowUserDetails = async (raffle: UserRafflesProps) => {
+  const handleShowUserDetails = async (raffle: UserTokenDistribution) => {
     setChainName(raffle.chain.chainName);
     setData((prev) => ({
       ...prev,
-      provider: raffle.creatorName,
+      provider: raffle.distributor,
       selectedChain: raffle.chain,
-      description: raffle.description,
-      isNft: raffle.isPrizeNft,
-      isNativeToken: raffle.prizeAsset == ZERO_ADDRESS,
-      tokenAmount: new Big(
-        fromWei(raffle.prizeAmount, raffle.decimals)
-      ).toFixed(),
-      tokenContractAddress: raffle.isPrizeNft ? "" : raffle.prizeAsset,
-      nftContractAddress: raffle.isPrizeNft ? raffle.prizeAsset : "",
+      description: raffle.notes,
+      isNft: false,
+      isNativeToken: raffle.tokenAddress == ZERO_ADDRESS,
+      tokenAmount: new Big(fromWei(raffle.amount, 18)).toFixed(),
+      tokenContractAddress: raffle.tokenAddress,
+      // nftContractAddress: raffle.isPrizeNft ? raffle.prizeAsset : "",
       startTimeStamp: Date.parse(raffle.startAt) / 1000,
       endTimeStamp: Date.parse(raffle.deadline) / 1000,
       limitEnrollPeopleCheck:
-        raffle.maxNumberOfEntries != 1000000000 ? true : false,
+        raffle.maxNumberOfClaims != 1000000000 ? true : false,
       maxNumberOfEntries:
-        raffle.maxNumberOfEntries != 1000000000
-          ? raffle.maxNumberOfEntries.toString()
+        raffle.maxNumberOfClaims != 1000000000
+          ? raffle.maxNumberOfClaims.toString()
           : null,
-      winnersCount: raffle.winnersCount,
-      nftTokenIds: raffle.nftIds ? raffle.nftIds.split(",") : [],
+      winnersCount: raffle.maxNumberOfClaims,
+      // nftTokenIds: raffle.nftIds ? raffle.nftIds.split(",") : [],
       twitter: raffle.twitterUrl,
       discord: raffle.discordUrl,
-      creatorUrl: raffle.creatorUrl,
+      creatorUrl: raffle.distributorUrl,
       telegram: raffle.telegramUrl,
       email: raffle.emailUrl,
       necessaryInfo: raffle.necessaryInformation,
-      tokenSymbol: raffle.prizeSymbol,
-      nftName: raffle.prizeName,
+      // tokenSymbol: raffle.prizeSymbol,
+      // nftName: raffle.prizeName,
     }));
     setIsShowingDetails(true);
     setSelectNewOffer(true);
-    setNumberOfNfts(
-      raffle.nftIds ? raffle.nftIds.split(",").length.toString() : ""
-    );
+    setSelectedChain(raffle.chain);
+    // setNumberOfNfts(
+    //   raffle.nftIds ? raffle.nftIds.split(",").length.toString() : ""
+    // );
     setConstraintsListApi(await getConstraintsApi());
     setRequirementList(
       raffle.constraints.map((constraint) =>
@@ -1150,7 +1013,6 @@ const TokenTapProvider: FC<
         page,
         setPage,
         data,
-        title,
         handleChange,
         handleSelectTokenOrNft,
         openRequirementModal,
@@ -1183,7 +1045,7 @@ const TokenTapProvider: FC<
         deleteRequirement,
         updateRequirement,
         handleSelectNativeToken,
-        handleCreateRaffle,
+        handleCreateDistribution,
         closeCreateRaffleModal,
         isCreateRaffleModalOpen,
         openCreteRaffleModal,
@@ -1191,12 +1053,7 @@ const TokenTapProvider: FC<
         createRaffleLoading,
         handleSetCreateRaffleLoading,
         handleSetDate,
-        handleApproveErc20Token,
-        isErc20Approved,
-        approveLoading,
         constraintsListApi,
-        isApprovedAll,
-        handleApproveErc721Token,
         updateChainList,
         handleCheckForReason,
         handleShowUserDetails,
@@ -1224,7 +1081,7 @@ const TokenTapProvider: FC<
         handleWinnersResult: setWinnersResultRaffle,
         endDateState,
         setEndDateState,
-        userRaffle,
+        userDistribution,
         claimPeriodic,
         handleSetClaimPeriodic: setClaimPeriodic,
         allChainList,
diff --git a/types/provider-dashboard.ts b/types/provider-dashboard.ts
index 7a0bbbfb..14940d6b 100644
--- a/types/provider-dashboard.ts
+++ b/types/provider-dashboard.ts
@@ -1,5 +1,5 @@
 import { UserProfile } from "./auth";
-import { Chain } from "./gastap";
+import { Chain, Faucet } from "./gastap";
 import { WinnerEntry } from "./prizetap";
 
 export type ProviderDashboardFormDataProp = {
@@ -72,6 +72,7 @@ export interface RequirementProps {
   isNotSatisfy: boolean;
   isReversed: boolean;
   constraintFile?: [];
+  decimals: number | undefined;
 }
 
 export interface UserRafflesProps {
@@ -151,7 +152,9 @@ export type ErrorObjectProp = {
 };
 
 export enum ContractValidationStatus {
-  Valid, NotValid, Empty
+  Valid,
+  NotValid,
+  Empty,
 }
 
 export interface ContractStatus {
@@ -169,7 +172,6 @@ export interface DisplayStepsProps {
   description: string;
 }
 
-
 export interface NftRangeProps {
   from: string;
   to: string;
@@ -189,7 +191,6 @@ export interface UploadedFileProps {
   fileContent: any;
 }
 
-
 export interface ContactField {
   name: keyof ProviderDashboardFormDataProp;
   placeholder: string;
@@ -198,9 +199,9 @@ export interface ContactField {
   baseUrl: string;
 }
 
-
 export interface UserTokenDistribution {
   id: number;
+  amount: string;
   chain: Chain;
   constraints: RequirementProps[];
   contract: string;
@@ -214,10 +215,10 @@ export interface UserTokenDistribution {
   isActive: boolean;
   isClaimable: boolean;
   isExpired: boolean;
-  isMaxedOut : boolean;
+  isMaxedOut: boolean;
   maxNumberOfClaims: number;
-  name : string;
-  necessaryInformation : string | null;
+  name: string;
+  necessaryInformation: string | null;
   notes: string;
   numberOfClaims: number;
   rejectionReason: string | null;
@@ -228,5 +229,40 @@ export interface UserTokenDistribution {
   tokenAddress: string;
   tokenImageUrl: string;
   totalClaimsSinceLastRound: number;
-  twitterUrl: string | null
-}
\ No newline at end of file
+  twitterUrl: string | null;
+}
+
+export interface UserDonation {
+  datetime: string;
+  faucet: Faucet;
+  status: string;
+  totalPrice: null;
+  txHash: string;
+  userProfile: UserProfile;
+  value: string;
+}
+
+export enum MainnetFilters {
+  All = "All",
+  Mainnet = "Mainnet",
+  Testnet = "Testnet",
+}
+
+export enum EvmFilters {
+  All = "All",
+  Evm = "EVM",
+  NonEvm = "NonEvm",
+}
+
+export enum StatusFilters {
+  All = "All",
+  Pending = "Pending",
+  Verified = "Verified",
+  Rejected = "Rejected",
+}
+
+export interface filterProps {
+  statusFilter: StatusFilters;
+  mainnetFilter: MainnetFilters;
+  evmFilter: EvmFilters;
+}
diff --git a/utils/api/provider-dashboard.ts b/utils/api/provider-dashboard.ts
index 41344aae..64deaf61 100644
--- a/utils/api/provider-dashboard.ts
+++ b/utils/api/provider-dashboard.ts
@@ -54,7 +54,7 @@ export async function getUserRaffles(token: string) {
 
 export const getUserDistributions = async (token: string) => {
   const response = await axiosInstance.get(
-    `/api/tokentap/token-distribution-list/`,
+    `/api/tokentap/user-token-distributions/`,
     {
       headers: {
         Authorization: `Token ${token}`,
@@ -79,9 +79,22 @@ export async function createTokenDistribution(token: string, data: any) {
     {
       headers: {
         Authorization: `Token ${token}`,
-        "Content-Type": "application/json",
+        "Content-Type": "multipart/form-data",
       },
     }
   );
   return response.data;
 }
+
+export const getUserDonations = async (token: string) => {
+  const response = await axiosInstance.get(
+    `/api/gastap/user/donation/?page=1`,
+    {
+      headers: {
+        Authorization: `Token ${token}`,
+      },
+    }
+  );
+
+  return response.data;
+};
diff --git a/utils/routes.ts b/utils/routes.ts
index 975288fd..b7b84937 100644
--- a/utils/routes.ts
+++ b/utils/routes.ts
@@ -12,6 +12,9 @@ enum RoutePath {
   PROVIDER_GASTAP_CREATE = "/contribution-hub/gas-tap/create",
   PROVIDER_TOKENTAP = "/contribution-hub/token-tap",
   PROVIDER_TOKENTAP_CREATE = "/contribution-hub/token-tap/create",
+  PROVIDER_TOKENTAP_DETAILS = "/contribution-hub/token-tap/details",
+  PROVIDER_TOKENTAP_VERIFICATION = "/contribution-hub/token-tap/verification",
+
   PROVIDER_PRIZETAP = "/contribution-hub/prize-tap",
   PROVIDER_PRIZETAP_CREATE = "/contribution-hub/prize-tap/create",
   PROVIDER_PRIZETAP_DETAILS = "/contribution-hub/prize-tap/details",
diff --git a/utils/serverApis/contributionHub.ts b/utils/serverApis/contributionHub.ts
index 5905a054..9f10d79e 100644
--- a/utils/serverApis/contributionHub.ts
+++ b/utils/serverApis/contributionHub.ts
@@ -1,4 +1,8 @@
-import { UserRafflesProps, ConstraintProps } from "@/types";
+import {
+  UserRafflesProps,
+  ConstraintProps,
+  UserTokenDistribution,
+} from "@/types";
 
 export const getUserRaffleListServerSide = async (token?: string) => {
   if (!token) return [];
@@ -17,11 +21,11 @@ export const getUserRaffleListServerSide = async (token?: string) => {
   return res as UserRafflesProps[];
 };
 
-
 export const getUserDistributionListServerSide = async (token?: string) => {
   if (!token) return [];
   const res = await fetch(
-    process.env.NEXT_PUBLIC_API_URL! + "/api/tokentap/token-distribution-list/",
+    process.env.NEXT_PUBLIC_API_URL! +
+      "/api/tokentap/user-token-distributions/",
     {
       cache: "no-store",
       headers: {
@@ -32,38 +36,39 @@ export const getUserDistributionListServerSide = async (token?: string) => {
 
   if (!Array.isArray(res)) return [];
 
-  return res as UserRafflesProps[];
+  return res as UserTokenDistribution[];
 };
 
 export const getConstraintListServer = async () => {
   const res = await fetch(
     process.env.NEXT_PUBLIC_API_URL! + "/api/prizetap/get-constraints/",
     {
-      cache: "no-store"
+      cache: "no-store",
     }
   ).then((res) => res.json());
 
-  if(!Array.isArray(res)) return [];
+  if (!Array.isArray(res)) return [];
 
-  return res as ConstraintProps[]
-}
+  return res as ConstraintProps[];
+};
 
 export const getTokenTapConstraintListServer = async () => {
   const res = await fetch(
-    process.env.NEXT_PUBLIC_API_URL! + "/api/prizetap/get-constraints/",
+    process.env.NEXT_PUBLIC_API_URL! + "/api/tokentap/get-constraints/",
     {
-      cache: "no-store"
+      cache: "no-store",
     }
   ).then((res) => res.json());
 
-  if(!Array.isArray(res)) return [];
+  if (!Array.isArray(res)) return [];
 
-  return res as ConstraintProps[]
-}
+  return res as ConstraintProps[];
+};
 
 export const getUserDonationsServer = async (token?: string) => {
   const res = await fetch(
-    process.env.NEXT_PUBLIC_API_URL! + '/api/gastap/user/donation/?page=1&page_size=2',
+    process.env.NEXT_PUBLIC_API_URL! +
+      "/api/gastap/user/donation/?page=1&page_size=2",
     {
       cache: "no-store",
       headers: {
@@ -71,5 +76,5 @@ export const getUserDonationsServer = async (token?: string) => {
       },
     }
   ).then((res) => res.json());
-  return res
-}
\ No newline at end of file
+  return res;
+};

From 1d4fa92afd3bcc92c4469365227ac53d7856f235 Mon Sep 17 00:00:00 2001
From: Ali Maktabi <67747298+alimaktabi@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:15:14 +0330
Subject: [PATCH 3/7] fixed tiny bugs on address change, and design on profile
 page

---
 app/profile/page.tsx                           |  2 +-
 .../ConnectWalletModal/unknownWallet.tsx       | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index a974e362..10643771 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -64,7 +64,7 @@ const Profile = async () => {
         </div>
 
         <div className="my-10 py-10 relative">
-          <div className="flex flex-wrap justify-between overflow-hidden opacity-20 gap-10">
+          <div className="flex select-none flex-wrap justify-between overflow-hidden opacity-20 gap-10">
             <SeasonMission
               className="opacity-20"
               title="Gnosis Explorer"
diff --git a/components/containers/modals/ConnectWalletModal/unknownWallet.tsx b/components/containers/modals/ConnectWalletModal/unknownWallet.tsx
index aac5bc93..5b4a40e8 100644
--- a/components/containers/modals/ConnectWalletModal/unknownWallet.tsx
+++ b/components/containers/modals/ConnectWalletModal/unknownWallet.tsx
@@ -3,18 +3,26 @@
 import Icon from "@/components/ui/Icon";
 import { shortenAddress } from "@/utils";
 import { useWalletAccount } from "@/utils/wallet";
-import {
-  ClaimButton,
-  WhiteOutlinedButton,
-} from "@/components/ui/Button/button";
-import { FC } from "react";
+import { ClaimButton } from "@/components/ui/Button/button";
+import { FC, useEffect, useRef } from "react";
 import { WalletState } from ".";
+import { Address } from "viem";
 
 const UnknownWalletBody: FC<{
   setWalletState: (state: WalletState) => void;
 }> = ({ setWalletState }) => {
   const { address } = useWalletAccount();
 
+  const previousAddressRef = useRef<Address | null>();
+
+  useEffect(() => {
+    if (!address) return;
+    if (!previousAddressRef.current) previousAddressRef.current = address;
+
+    if (address !== previousAddressRef.current)
+      setWalletState(WalletState.Prompt);
+  }, [address, setWalletState]);
+
   return (
     <div className="text-center">
       <Icon

From e65893a1e3a94bc9a7b146b163c1a2e877dea4a1 Mon Sep 17 00:00:00 2001
From: Ali Maktabi <67747298+alimaktabi@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:22:28 +0330
Subject: [PATCH 4/7] fixed raffles list design

---
 app/prizetap/components/RafflesList.tsx |   5 +-
 app/prizetap/styles.scss                | 428 ++++++++++++++++++++++++
 2 files changed, 431 insertions(+), 2 deletions(-)

diff --git a/app/prizetap/components/RafflesList.tsx b/app/prizetap/components/RafflesList.tsx
index 2bd8df38..8fbdf382 100644
--- a/app/prizetap/components/RafflesList.tsx
+++ b/app/prizetap/components/RafflesList.tsx
@@ -22,6 +22,7 @@ import { getAssetUrl, shortenAddress } from "@/utils";
 
 // import Styles from "@/components/containers/provider-dashboard/prize-tap/content.module.scss";
 import { zeroAddress } from "viem";
+import { useFastRefresh } from "@/utils/hooks/refresh";
 
 export const Action = styled.div`
   display: flex;
@@ -134,9 +135,9 @@ const RaffleCard: FC<{ raffle: Prize; isHighlighted?: boolean }> = ({
     [userProfile, winnersEntry]
   );
 
-  useEffect(() => {
+  useFastRefresh(() => {
     setStarted(new Date(startAt) < new Date());
-  }, [new Date()]);
+  }, [startAt]);
 
   // let tokenImgLink: string | undefined = tokenUri
   //   ? `https://ipfs.io/ipfs/QmYmSSQMHaKBByB3PcZeTWesBbp3QYJswMFZYdXs1H3rgA/${
diff --git a/app/prizetap/styles.scss b/app/prizetap/styles.scss
index 33656a08..579c1952 100644
--- a/app/prizetap/styles.scss
+++ b/app/prizetap/styles.scss
@@ -19,3 +19,431 @@
   @apply text-white;
   @apply p-3 rounded-[10px];
 }
+
+.providerDashboardStatus {
+  & div {
+    @apply py-[10px] px-3 cursor-pointer min-w-[60px] text-center;
+  }
+  & div:not(:last-child) {
+    @apply border-r-2 border-r-gray30;
+  }
+}
+
+.providerDashboardTabs {
+  position: relative;
+  border-radius: 12px 12px 0px 0px;
+}
+
+.refillToken {
+  @apply bg-no-repeat bg-cover border border-2 rounded-[16px] border-gray40;
+  background-image: url("/assets/images/provider-dashboard/bg.png");
+}
+
+.providePrize__amount {
+  position: relative;
+  @apply text-gray20;
+  background: radial-gradient(
+    174.04% 3217.67% at 17.05% 37.02%,
+    #2a3837 0%,
+    #3f2b44 42.19%,
+    #322837 100%
+  );
+  -webkit-text-stroke: 7px transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 1.8em;
+  font-weight: 600;
+  padding: 10px;
+
+  &:after {
+    content: attr(data-amount);
+    position: absolute;
+    z-index: 9;
+    background: linear-gradient(
+      91.35deg,
+      #4bf2a2 -4.66%,
+      #a89fe7 56.06%,
+      #e1c4f4 73.07%,
+      #dd40cd 111.44%
+    );
+    @apply text-gray20;
+    -webkit-text-stroke: 2px transparent;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: #13131e;
+    left: 10px;
+  }
+}
+
+.offerPrizeSteps {
+  border-radius: 12px;
+  @apply bg-cover bg-no-repeat;
+  background: url("/assets/images/provider-dashboard/prize-offer-step-bg.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.chines-list-dropDown::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.chines-list-dropDown {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.prizeForm-current-step-icon {
+  @apply rounded-full bg-gray30 overflow-hidden w-[26px] h-[26px] rounded-full;
+}
+
+.requireModal {
+  @apply text-sm font-semibold flex flex-col gap-2 items-center justify-center cursor-pointer max-w-[184px] h-[84px] bg-gray40 border border-gray70 rounded-xl;
+}
+
+.requireModalIntegration {
+  @apply bg-gray40 border mt-1 border-gray70 text-gray100 text-sm font-semibold cursor-pointer max-w-[376px] rounded-xl px-3 h-[48px] flex items-center justify-between;
+}
+
+.provider-dashboard-input {
+  @apply placeholder-gray80 text-white w-full bg-transparent h-[100%];
+}
+.prize-card-bg-1 {
+  @apply lg:bg-[url("/assets/images/prize-tap/nft-cover.svg")] bg-no-repeat p-0 pl-0 lg:pr-0 lg:p-4 lg:pl-6;
+}
+
+.prize-card-linea {
+  @apply lg:bg-[url('/assets/images/prize-tap/linia-raffle-bg.svg')] bg-no-repeat p-0 pl-0 lg:pr-0 lg:p-4 lg:pl-6;
+}
+
+.prize-card-bg-2 {
+  @apply lg:bg-[url("/assets/images/prize-tap/cover.svg")] bg-no-repeat p-0 pl-0 lg:pr-0 lg:p-4 lg:pl-6;
+}
+
+.prize-tap-header-bg {
+  background-image: url("/assets/images/prize-tap/header-bg.svg");
+  @apply bg-no-repeat bg-cover bg-center;
+}
+
+.deposit-prize-nft-cover {
+  background-image: url("/assets/images/prize-tap/nft-cover.svg");
+  @apply bg-no-repeat bg-cover bg-center;
+  object-fit: contain;
+}
+
+.prize-tap-enrolled:hover {
+  &:before {
+    background: radial-gradient(
+      174.04% 3217.67% at 17.05% 37.02%,
+      #2a3837 0%,
+      #3f2b44 42.19%,
+      #322837 100%
+    ) !important;
+  }
+}
+
+.winner-box-bg {
+  background-color: #10101b;
+  // background-image: url('../public/assets/images/prize-tap/winner_bg.svg');
+  @apply bg-no-repeat bg-cover bg-center;
+}
+
+.claimed-prize {
+  > div {
+    background: linear-gradient(
+      91.35deg,
+      #4bf2a2 0.66%,
+      #a89fe7 10.06%,
+      #e1c4f4 20.07%,
+      #dd40cd 28.44%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    // font-size: 14px;
+    // font-weight: 600;
+    margin-left: 10px;
+  }
+
+  @apply bg-g-primary relative z-10 before:content-[''];
+  @apply before:block before:rounded-lg before:-z-10 before:absolute before:inset-[2px] before:bg-[radial-gradient(174.04%_3217.67%_at_17.05%_37.02%,#2A3837_0%,#3F2B44_42.19%,#322837_100%)];
+  @apply text-white;
+  @apply p-3 rounded-[10px];
+}
+
+.prize-success-stroke {
+  h1 {
+    padding: 2px;
+    text-align: center;
+    // text-transform: uppercase;
+    /* Warning: no fallback */
+    margin: 2em 0 2em 0;
+    background: -webkit-linear-gradient(
+      12deg,
+      #4bf2a2 -4.66%,
+      #a89fe7 56.06%,
+      #e1c4f4 73.07%,
+      #dd40cd 111.44%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-stroke: 3px transparent;
+    color: inherit;
+  }
+}
+
+.prize__amount {
+  position: relative;
+  @apply text-gray20;
+  background: radial-gradient(
+    174.04% 3217.67% at 17.05% 37.02%,
+    #2a3837 0%,
+    #3f2b44 42.19%,
+    #322837 100%
+  );
+  -webkit-text-stroke: 6px transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 1.6em;
+  font-weight: 600;
+
+  &:after {
+    content: attr(data-amount);
+    position: absolute;
+    z-index: 9;
+    background: linear-gradient(
+      91.35deg,
+      #4bf2a2 -4.66%,
+      #a89fe7 56.06%,
+      #e1c4f4 73.07%,
+      #dd40cd 111.44%
+    );
+    @apply text-gray20;
+    -webkit-text-stroke: 2px transparent;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: #1b1b26;
+    left: 0px;
+  }
+}
+
+.raffle-logo-container {
+  background: linear-gradient(#4bf2a200, #a89fe700, #c990ee, #71969e);
+  border-radius: 14px;
+  z-index: -1;
+}
+
+.select-not {
+  @apply select-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+.rmdp-wrapper {
+  background-color: #1b1b29 !important;
+  @apply text-gray100;
+  border: 2px solid #4c4c5c !important;
+  border-radius: 16px !important;
+}
+
+.sd {
+  color: #b5b5c6 !important;
+  background-color: #242431;
+}
+
+.sd:hover {
+  background-color: #303043 !important;
+  color: #b5b5c6 !important;
+}
+
+.rmdp-arrow-container {
+  display: flex !important;
+  align-items: center !important;
+  height: 25px !important;
+  width: 25px !important;
+}
+
+.rmdp-day {
+  font-weight: 600;
+}
+.rmdp-day > span:hover {
+  background-color: #303043 !important;
+  color: white !important;
+}
+
+.rmdp-arrow-container:hover {
+  background-color: #16161b !important;
+}
+
+.rmdp-arrow {
+  border-right: 2px solid #b5b5c6 !important;
+  border-bottom: 2px solid #b5b5c6 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin: 0 !important;
+}
+
+.rmdp-header-values,
+.rmdp-day {
+  color: white !important;
+  font-size: 0 !important;
+  display: flex;
+  column-gap: 10px;
+}
+// .rmdp-arrow
+
+.rmdp-header-values > span {
+  display: flex;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 14px !important;
+  border-radius: 6px !important;
+  background-color: #242431 !important;
+  height: 27px !important;
+  min-width: 81px !important;
+  font-weight: 500 !important;
+}
+
+.rmdp-week > div {
+  color: #67677b !important;
+  font-weight: 500;
+  letter-spacing: 0.42px;
+}
+
+.rmdp-week {
+  column-gap: 10px !important;
+}
+
+.rmdp-month-picker,
+.rmdp-year-picker {
+  background: #1e1e2c !important;
+  border-radius: 16px !important;
+}
+
+.rmdp-selected > span {
+  background: #4ce6a1 !important;
+  color: #161623 !important;
+  z-index: 1000000 !important;
+}
+
+.rmdp-selected > span:hover {
+  background: #4ce6a1 !important;
+  color: #161623 !important;
+}
+
+.rmdp-today > span {
+  // background: #242431 !important;
+  // border: 2px solid #67677b;
+  // color: #b5b5c6 !important;
+}
+
+.rmdp-time-picker input {
+  background: none !important;
+  color: white !important;
+  letter-spacing: 0.42px;
+  font-weight: 600;
+}
+
+.rmdp-time-picker {
+  margin: 5px !important;
+}
+
+.date-picker-input {
+  padding-left: 20px;
+  background: none;
+  color: #b5b5c6;
+  width: 100%;
+  height: 48px;
+}
+
+.date-picker-input::placeholder {
+  color: #b5b5c664;
+}
+
+.rmdp-action-buttons > button,
+.rmdp-am {
+  color: white !important;
+  font-weight: 600;
+}
+
+.rmdp-action-buttons {
+  border-top: none !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rmdp-top-class {
+  border-bottom: 2px solid #4c4c5c !important;
+}
+
+.rmdp-action-buttons > button {
+  width: 155px;
+  border-radius: 8px;
+  border: 1px solid #242431;
+  color: white !important;
+}
+
+.rmdp-action-buttons > button:nth-child(2) {
+  background: #212130 !important;
+}
+
+.rmdp-day-picker {
+  margin-top: 20px;
+}
+.rmdp-month-picker,
+.rmdp-year-picker {
+  margin-left: 10px;
+  background-color: #161623 !important;
+  border: 2px solid #1e1e2c !important;
+  max-width: 325px;
+}
+
+.setOpacity {
+  opacity: 0.3;
+}
+
+.providePrize__amount_modal {
+  position: relative;
+  @apply text-gray20;
+  background: radial-gradient(
+    174.04% 3217.67% at 17.05% 37.02%,
+    #2a3837 0%,
+    #3f2b44 42.19%,
+    #322837 100%
+  );
+  -webkit-text-stroke: 4px transparent;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 1.4em;
+  font-weight: 600;
+  // padding: 10px;
+  letter-spacing: 0.5px;
+
+  &:after {
+    content: attr(data-amount);
+    position: absolute;
+    z-index: 9;
+    background: linear-gradient(
+      91.35deg,
+      #4bf2a2 -4.66%,
+      #a89fe7 56.06%,
+      #e1c4f4 73.07%,
+      #dd40cd 111.44%
+    );
+    @apply text-gray20;
+    -webkit-text-stroke: 1px transparent;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: #13131e;
+  }
+}
+
+.form-you-filed::-webkit-scrollbar {
+  width: 1px;
+  height: 3px;
+}
+
+.uploadFileInput::file-selector-button {
+  display: none;
+}
+
+.nftIdTextarea::placeholder {
+  @apply text-gray80;
+}

From 68405653a2589122484c7575f2d90da7e1b9bc79 Mon Sep 17 00:00:00 2001
From: Ali Maktabi <67747298+alimaktabi@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:34:02 +0330
Subject: [PATCH 5/7] fixed refresh hooks bug

---
 utils/hooks/refresh.tsx | 98 +++++++++++++++++++++++++----------------
 1 file changed, 61 insertions(+), 37 deletions(-)

diff --git a/utils/hooks/refresh.tsx b/utils/hooks/refresh.tsx
index 941473fe..ea72ddcd 100644
--- a/utils/hooks/refresh.tsx
+++ b/utils/hooks/refresh.tsx
@@ -4,69 +4,93 @@ import {
   MEDIUM_INTERVAL,
   SLOW_INTERVAL,
 } from "@/constants";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export const useFastRefresh = (
-  callback: CallableFunction,
-  dependencies: any[] = []
+  callback: () => void,
+  dependencies: any[] = [],
+  fastInterval: number = FAST_INTERVAL
 ) => {
+  const callbackRef = useRef<() => void>();
+
   useEffect(() => {
-    const timeout = setInterval(() => {
-      callback();
-    }, FAST_INTERVAL);
+    callbackRef.current = callback;
+  }, [callback]);
 
-    return () => {
-      clearInterval(timeout);
-    };
-  }, [...dependencies, callback]);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (callbackRef.current) {
+        callbackRef.current();
+      }
+    }, fastInterval);
+
+    return () => clearInterval(intervalId);
+  }, [fastInterval, ...dependencies]);
 };
 
 export const useMediumRefresh = (
-  callback: CallableFunction,
-  dependencies: any[] = []
+  callback: () => void,
+  dependencies: any[] = [],
+  mediumInterval: number = MEDIUM_INTERVAL
 ) => {
+  const callbackRef = useRef<() => void>();
+
   useEffect(() => {
-    const timeout = setInterval(() => {
-      callback();
-    }, MEDIUM_INTERVAL);
+    callbackRef.current = callback;
+  }, [callback]);
 
-    return () => {
-      clearInterval(timeout);
-    };
-  }, dependencies);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (callbackRef.current) {
+        callbackRef.current();
+      }
+    }, mediumInterval);
+
+    return () => clearInterval(intervalId);
+  }, [mediumInterval, ...dependencies]);
 };
 
 export const useSlowRefresh = (
-  callback: CallableFunction,
-  dependencies: any[] = []
+  callback: () => void,
+  dependencies: any[] = [],
+  slowInterval: number = SLOW_INTERVAL
 ) => {
+  const callbackRef = useRef<() => void>();
+
   useEffect(() => {
-    const timeout = setInterval(() => {
-      callback();
-    }, SLOW_INTERVAL);
+    callbackRef.current = callback;
+  }, [callback]);
 
-    return () => {
-      clearInterval(timeout);
-    };
-  }, dependencies);
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (callbackRef.current) {
+        callbackRef.current();
+      }
+    }, slowInterval);
+
+    return () => clearInterval(intervalId);
+  }, [slowInterval, ...dependencies]);
 };
 
 export const useRefreshWithInitial = (
-  callback: CallableFunction,
+  callback: () => void,
   interval: IntervalType,
   dependencies: any[] = []
 ) => {
+  const callbackRef = useRef<() => void>();
+
   useEffect(() => {
-    const timeout = setInterval(() => {
-      callback();
-    }, interval);
+    callbackRef.current = callback;
+  }, [callback]);
 
-    callback();
+  useEffect(() => {
+    if (interval && callbackRef.current) {
+      const intervalId = setInterval(callbackRef.current, interval);
+      callbackRef.current(); // Initial callback execution
 
-    return () => {
-      clearInterval(timeout);
-    };
-  }, dependencies);
+      return () => clearInterval(intervalId);
+    }
+  }, [interval, ...dependencies]);
 };
 
 export const usePreventNavigation = (isActive: boolean, message?: string) => {

From 904c85b43a06f83804df12befd9e4f8ff60f2001 Mon Sep 17 00:00:00 2001
From: Ali Maktabi <67747298+alimaktabi@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:36:02 +0330
Subject: [PATCH 6/7] fixed on logout claim gas list reset

---
 context/gasTapProvider.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/context/gasTapProvider.tsx b/context/gasTapProvider.tsx
index fbf4e2cd..7bc74e42 100644
--- a/context/gasTapProvider.tsx
+++ b/context/gasTapProvider.tsx
@@ -322,6 +322,13 @@ export const GasTapProvider: FC<
     userToken,
   ]);
 
+  useEffect(() => {
+    if (userToken) return;
+
+    setOneTimeClaimedGasList([]);
+    setActiveClaimHistory([]);
+  }, [userToken]);
+
   useEffect(() => {
     if (activeChain) {
       setActiveClaimReceipt(

From 20a56606b6ef2291cc1b83a20d4506b7be8bfa9c Mon Sep 17 00:00:00 2001
From: alimaktabi <maktabi876@gmail.com>
Date: Sat, 17 Feb 2024 15:57:30 +0330
Subject: [PATCH 7/7] added wallet connect domain verification

---
 public/.well-known/walletconnect.txt | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 public/.well-known/walletconnect.txt

diff --git a/public/.well-known/walletconnect.txt b/public/.well-known/walletconnect.txt
new file mode 100644
index 00000000..ad9652a2
--- /dev/null
+++ b/public/.well-known/walletconnect.txt
@@ -0,0 +1 @@
+c7a8a6ec-5cc3-4556-afb1-2466b34302b7=4222d1d179501770a5ba12ae930cad1188a34a46b91824486a720141b362711c
\ No newline at end of file