diff --git a/apps/hub/src/app/pools/components/process-steps.tsx b/apps/hub/src/app/pools/components/process-steps.tsx
index 5a0ada46e..28fb87028 100644
--- a/apps/hub/src/app/pools/components/process-steps.tsx
+++ b/apps/hub/src/app/pools/components/process-steps.tsx
@@ -22,13 +22,17 @@ const ProcessSteps = ({
* @type {(arg0: number) => void}
*/
setCurrentStep,
- currentStep,
+ /**
+ * Array of booleans indicating if the selections / etc of each step is verified good (true) or not (false)
+ * @type {boolean[]}
+ */
+ verifiedSteps,
}: {
titles: string[];
selectedStep: number;
completedSteps: number[];
setCurrentStep: (arg0: number) => void;
- currentStep: number;
+ verifiedSteps: boolean[];
}) => {
function isStepSelectable(index: number) {
// NOTE: we check -1 to allow you to go back to the current (partially-completed) step
@@ -63,9 +67,12 @@ const ProcessSteps = ({
)}
{title}
- {completedSteps.includes(index) && (
-
- )}
+ {completedSteps.includes(index) &&
+ (verifiedSteps[index] ? (
+
+ ) : (
+
+ ))}
diff --git a/apps/hub/src/app/pools/create/CreatePageContent.tsx b/apps/hub/src/app/pools/create/CreatePageContent.tsx
index 6733b918b..d49f43df7 100755
--- a/apps/hub/src/app/pools/create/CreatePageContent.tsx
+++ b/apps/hub/src/app/pools/create/CreatePageContent.tsx
@@ -425,58 +425,59 @@ export default function CreatePageContent() {
poolType,
});
- const isNextButtonDisabled = (): boolean => {
- switch (currentStep) {
- // Pool type
- case 0:
- return false;
- // Select tokens
- case 1:
- if (
- poolCreateTokens.some((token) => token.address.length === 0) ||
- (poolType === PoolType.Weighted &&
- weights.some((weight) => weight === 0n))
- ) {
- return true;
- }
- return false;
- // Deposit liquidity
- case 2:
- if (
+ const getStepVerification = (): boolean[] => {
+ // So we can show a checkmark for steps that are completed
+ return [
+ // Step 0: Pool type (always complete)
+ true,
+
+ // Step 1: Select tokens
+ !(
+ poolCreateTokens.some((token) => token.address.length === 0) ||
+ (poolType === PoolType.Weighted &&
+ weights.some((weight) => weight === 0n))
+ ),
+
+ // Step 2: Deposit liquidity
+ !(
+ (
initialLiquidityTokens.some(
(token) =>
!token.amount ||
Number(token.amount) <= 0 ||
token.amount === "" ||
token.exceeding,
- ) ||
- poolCreateTokens.length !== initialLiquidityTokens.length // NOTE: this should never be possible.
- ) {
- return true;
- }
- return false;
- // Set parameters
- case 3:
- return (
- !owner ||
- (ownershipType === OwnershipType.Custom && !isAddress(owner)) ||
- (poolType === PoolType.ComposableStable && !amplification)
- );
- // Set info
- case 4:
- return !poolName || !poolSymbol;
- default:
- return false;
- }
+ ) || poolCreateTokens.length !== initialLiquidityTokens.length
+ ) // NOTE: this should never be possible.
+ ),
+
+ // Step 3: Set parameters
+ !(
+ !owner ||
+ (ownershipType === OwnershipType.Custom && !isAddress(owner)) ||
+ (poolType === PoolType.ComposableStable && !amplification)
+ ),
+
+ // Step 4: Set info
+ !(!poolName || !poolSymbol),
+ ];
};
+ const [verifiedSteps, setVerifiedSteps] = useState(
+ getStepVerification(),
+ );
+
useEffect(() => {
- setNextButtonDisabled(isNextButtonDisabled());
+ const verifiedSteps = getStepVerification();
+ setNextButtonDisabled(!verifiedSteps[currentStep]);
+ setVerifiedSteps(verifiedSteps);
}, [
+ poolType,
poolCreateTokens,
poolName,
poolSymbol,
owner,
+ weights,
ownershipType,
currentStep,
initialLiquidityTokens,
@@ -534,7 +535,7 @@ export default function CreatePageContent() {
selectedStep={currentStep}
completedSteps={completedSteps}
setCurrentStep={setCurrentStep}
- currentStep={currentStep}
+ verifiedSteps={verifiedSteps}
/>
{currentStep === 0 && (
@@ -731,7 +732,11 @@ export default function CreatePageContent() {
setCompletedSteps([...completedSteps, currentStep]);
}
}}
- disabled={nextButtonDisabled}
+ disabled={
+ currentStep === LAST_FORM_STEP_NUM
+ ? verifiedSteps.some((v) => !v)
+ : nextButtonDisabled
+ }
className={cn(
"w-32 self-end pr-4",
nextButtonDisabled