Sort activated feature gates (#473)

Setup feature gate sorting so that activated gates (mainnet, devnet)
show up last, but their intra-ordering preserved

<img width="1098" alt="Screenshot 2025-02-26 at 11 57 44 PM"
src="https://github.com/user-attachments/assets/db3e5bc7-0896-4a28-a34d-1b41b46a9e32"
/>

app/utils/feature-gate/featureGate.tsx

@@ -16,21 +16,43 @@ export function UpcomingFeatures() {
         return null;
     }
 
-    const filteredFeatures = (FEATURES as FeatureInfoType[]).filter((feature: FeatureInfoType) => {
-        switch (cluster) {
-            case Cluster.MainnetBeta:
-                // Show features activated on devnet and testnet
-                return feature.devnetActivationEpoch !== null && feature.testnetActivationEpoch !== null;
-            case Cluster.Devnet:
-                // Show features activated on testnet, mark if already activated on devnet
-                return feature.testnetActivationEpoch !== null;
-            case Cluster.Testnet:
-                // Only show features not yet activated on testnet
-                return feature.testnetActivationEpoch === null;
-            default:
-                return false;
-        }
-    });
+    const filteredFeatures = (FEATURES as FeatureInfoType[])
+        .filter((feature: FeatureInfoType) => {
+            switch (cluster) {
+                case Cluster.MainnetBeta:
+                    // Show features activated on devnet and testnet
+                    return feature.devnetActivationEpoch !== null && feature.testnetActivationEpoch !== null;
+                case Cluster.Devnet:
+                    // Show features activated on testnet, mark if already activated on devnet
+                    return feature.testnetActivationEpoch !== null;
+                case Cluster.Testnet:
+                    // Only show features not yet activated on testnet
+                    return feature.testnetActivationEpoch === null;
+                default:
+                    return false;
+            }
+        })
+        .sort((a, b) => {
+            // Helper function to check if a feature is activated on current cluster
+            const isActivated = (feature: FeatureInfoType) => {
+                switch (cluster) {
+                    case Cluster.MainnetBeta:
+                        return feature.mainnetActivationEpoch !== null;
+                    case Cluster.Devnet:
+                        return feature.devnetActivationEpoch !== null;
+                    case Cluster.Testnet:
+                        return feature.testnetActivationEpoch !== null;
+                    default:
+                        return false;
+                }
+            };
+
+            // Sort activated features to end while preserving existing ordering
+            const aActivated = isActivated(a);
+            const bActivated = isActivated(b);
+            if (aActivated === bActivated) return 0;
+            return aActivated ? 1 : -1;
+        });
 
     if (filteredFeatures.length === 0) {
         return null;