Evolution Limit Configuration (#1880)

- Evolution LIMITED state
- translations for LIMITED state
- evolution Feature flag

apps/verification-portal/src/lib/features/MultipassStates.ts

@@ -1,8 +1,13 @@
 import { writable, derived } from 'svelte/store';
 import type { DeepAsset } from '@sni/types';
 
+import { isFeatureEnabled } from '$lib/shared/utils';
+
+const canEvolve = isFeatureEnabled('dotphinEvolution');
+
 import {
   MAX_EVOLUTION_LEVEL,
+  EVOLUTION_LIMIT,
   initialStepConfig,
   STATUS,
 } from '$lib/shared/multipassConfig';
@@ -107,6 +112,8 @@ export const evolveStepState = derived(
       return 'INITIAL';
     } else if ($multipassData.evolution.level >= MAX_EVOLUTION_LEVEL) {
       return 'COMPLETE';
+    } else if ($multipassData.evolution.level >= EVOLUTION_LIMIT) {
+      return 'LIMITED';
     } else {
       return 'EVOLVING';
     }
@@ -132,7 +139,8 @@ export const multipassStepConfig = derived(
 
     // Retrieve the disabled status from the initial configuration
     const nftDisabled = initialStepConfig.nft.disabled;
-    const evolutionDisabled = initialStepConfig.evolution.disabled;
+    const evolutionDisabled =
+      initialStepConfig.evolution.disabled && !canEvolve;
 
     // NFT step is locked if the user is logged out or disabled; otherwise, check other conditions
     const nftStatus =
@@ -151,7 +159,9 @@ export const multipassStepConfig = derived(
         : proofsStatus === STATUS.COMPLETE && nftStatus === STATUS.COMPLETE
           ? $multipassData.evolution.level >= MAX_EVOLUTION_LEVEL
             ? STATUS.COMPLETE
-            : STATUS.ACTIVE
+            : $multipassData.evolution.level >= EVOLUTION_LIMIT
+              ? STATUS.LOCKED
+              : STATUS.ACTIVE
           : STATUS.LOCKED;
 
     // Simplified MultipassStepConfig with proper disabled checks

apps/verification-portal/src/lib/shared/i18n/en/index.ts

@@ -207,6 +207,11 @@ const en: BaseTranslation = {
         EVOLVING: {
           subtitle: 'Evolution level {level}/{maxLevel}',
         },
+        LIMITED: {
+          title: 'Come back later to complete the evolution',
+          subtitle:
+            'Evolution level {level}/{maxLevel}.\n(Full evolution coming soon!)',
+        },
         COMPLETE: {
           title: 'Congratulation, you have completed your DOTphin',
           subtitle: 'Your NFT has reached its maximum evolution level',

apps/verification-portal/src/lib/shared/i18n/i18n-types.ts

@@ -585,6 +585,19 @@ type RootTranslation = {
 					 */
 					subtitle: RequiredParams<'level' | 'maxLevel'>
 				}
+				LIMITED: {
+					/**
+					 * C​o​m​e​ ​b​a​c​k​ ​l​a​t​e​r​ ​t​o​ ​c​o​m​p​l​e​t​e​ ​t​h​e​ ​e​v​o​l​u​t​i​o​n
+					 */
+					title: string
+					/**
+					 * E​v​o​l​u​t​i​o​n​ ​l​e​v​e​l​ ​{​l​e​v​e​l​}​/​{​m​a​x​L​e​v​e​l​}​.​
+				​(​F​u​l​l​ ​e​v​o​l​u​t​i​o​n​ ​c​o​m​i​n​g​ ​s​o​o​n​!​)
+					 * @param {unknown} level
+					 * @param {unknown} maxLevel
+					 */
+					subtitle: RequiredParams<'level' | 'maxLevel'>
+				}
 				COMPLETE: {
 					/**
 					 * C​o​n​g​r​a​t​u​l​a​t​i​o​n​,​ ​y​o​u​ ​h​a​v​e​ ​c​o​m​p​l​e​t​e​d​ ​y​o​u​r​ ​D​O​T​p​h​i​n
@@ -1288,6 +1301,17 @@ export type TranslationFunctions = {
 					 */
 					subtitle: (arg: { level: unknown, maxLevel: unknown }) => LocalizedString
 				}
+				LIMITED: {
+					/**
+					 * Come back later to complete the evolution
+					 */
+					title: () => LocalizedString
+					/**
+					 * Evolution level {level}/{maxLevel}.
+				(Full evolution coming soon!)
+					 */
+					subtitle: (arg: { level: unknown, maxLevel: unknown }) => LocalizedString
+				}
 				COMPLETE: {
 					/**
 					 * Congratulation, you have completed your DOTphin

apps/verification-portal/src/lib/shared/multipassConfig.ts

@@ -1,4 +1,5 @@
-export const MAX_EVOLUTION_LEVEL = 7;
+export const MAX_EVOLUTION_LEVEL = 4;
+export const EVOLUTION_LIMIT = 3;
 
 // Multipass step states, derived from API data. Used for dynamic UI/UX and translation based on API Data points
 export type ProofStepState =
@@ -7,7 +8,7 @@ export type ProofStepState =
   | 'HAS_AVAILABLE_PROOFS'
   | 'NO_AVAILABLE_PROOFS';
 export type NftStepState = 'CLAIMED' | 'UNCLAIMED';
-export type EvolveStepState = 'INITIAL' | 'EVOLVING' | 'COMPLETE';
+export type EvolveStepState = 'INITIAL' | 'EVOLVING' | 'LIMITED' | 'COMPLETE';
 
 export type MultipassStepConfig = {
   proofs: {

apps/verification-portal/src/lib/shared/siteConfigs.ts

@@ -6,6 +6,7 @@ export default {
     collectionsTest: false,
     multipassTest: false,
     dotphinWidget: true,
+    dotphinEvolution: false,
   },
   social: {
     discord: 'discord:https://discord.gg/ZXyC3tN87K',

apps/verification-portal/src/lib/widgets/DOTphin/Steps/CardEvolution.svelte

@@ -28,6 +28,8 @@
   <svelte:fragment slot="header">
     {#if $evolveStepState === 'COMPLETE'}
       <CardTitle content={$LL.multipass.state.evolveStep.COMPLETE.title()} />
+    {:else if $evolveStepState === 'LIMITED'}
+      <CardTitle content={$LL.multipass.state.evolveStep.LIMITED.title()} />
     {:else}
       <TimelineActionButton
         umamiID="evolution"
@@ -40,6 +42,13 @@
     {#if $evolveStepState === 'INITIAL'}
       <CardSubtitle content={$LL.multipass.state.evolveStep.INITIAL.subtitle()}
       ></CardSubtitle>
+    {:else if $evolveStepState === 'LIMITED'}
+      <CardSubtitle
+        content={$LL.multipass.state.evolveStep.LIMITED.subtitle({
+          level: $multipassData.evolution.level,
+          maxLevel: MAX_EVOLUTION_LEVEL,
+        })}
+      ></CardSubtitle>
     {:else}
       <CardSubtitle>
         {$LL.multipass.state.evolveStep.EVOLVING.subtitle({