diff --git a/src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx b/src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx
index cc7b640..d32e4bc 100644
--- a/src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx
+++ b/src/Pages/OptiFiiExpense/wallet/BenifitStepThree.jsx
@@ -45,7 +45,7 @@ const BenifitStepThree = () => {
All transaction
-
+
Transaction above
diff --git a/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx b/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
index 823da94..352df09 100644
--- a/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
+++ b/src/Pages/OptiFiiExpense/wallet/CreateBenefitWalletModal.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
import {
Box, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalCloseButton, Text, Input, Select, Stack,
HStack,
@@ -18,7 +18,7 @@ import RupeeSlider from '../../../Components/RupeeSlider/RupeeSlider';
import BenifitStepOne from './BenifitStepOne';
import BenifitStepTwo from './BenifitStepTwo';
import BenifitStepThree from './BenifitStepThree';
-
+
const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
// Define steps
const steps = [
@@ -30,6 +30,8 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
// Use useState to control the active step
const [activeStep, setActiveStep] = useState(0);
+ const stepRefs = useRef([]); // Create refs for each step
+
const nextStep = () => {
if (activeStep < steps.length - 1) {
@@ -46,9 +48,9 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
return (
{/* Modal component */}
-
+
-
+
Create Benefit Wallet
@@ -68,7 +70,7 @@ const CreateBenefitWalletModal = ({ isOpen, onClose }) => {
},
}}
>
- {/* Set the stepper width to 130% */}
+
{steps.map((step, index) => (