Add features filtering

components/Features.tsx

@@ -1,10 +1,12 @@
 import { Box, HStack, Tag, Text, IconButton } from '@chakra-ui/react'
 import { CheckIcon } from '@chakra-ui/icons'
 import { useFCL } from '../hooks/useFCL'
+import FEATURES_LIST from '../data/features.json'
 
 export default function Features() {
   const { clientConfig } = useFCL()
-  const suggestedFeatures = clientConfig?.discoveryFeaturesSuggested || []
+  const featuresListKeys = FEATURES_LIST.map(f => f.name)
+  const suggestedFeatures = clientConfig?.discoveryFeaturesSuggested?.filter(f => featuresListKeys.includes(f)) || []
 
   return (
     <Box mb={5}>

components/ServiceCard.tsx

@@ -24,6 +24,7 @@ import { Service } from '../types'
 import { getProviderMetadataByAddress } from '../helpers/metadata'
 import { CheckIcon } from '@chakra-ui/icons'
 import { useMemo } from 'react'
+import FEATURES_LIST from '../data/features.json'
 
 type Props = {
   isEnabled: boolean
@@ -54,7 +55,8 @@ export default function ServiceCard({
     appVersion,
     SUPPORTED_VERSIONS.SUGGESTED_FEATURES
   )
-  const suggestedFeatures = clientConfig?.discoveryFeaturesSuggested || []
+  const featuresListKeys = FEATURES_LIST.map(f => f.name)
+  const suggestedFeatures = clientConfig?.discoveryFeaturesSuggested?.filter(f => featuresListKeys.includes(f)) || []
 
 
   const onSelect = () => {

data/features.json

@@ -0,0 +1,14 @@
+[
+    {
+        "name": "self-custody",
+        "description": "Users manage their own keys, giving them full control of their crypto assets. Safekeeping responsibility rests with the user."
+    },
+    {
+        "name": "hardware",
+        "description": "Keys are stored on a physical device, apart from online devices. This enhances security as keys are exposed online only during transactions."
+    },
+    {
+        "name": "custodial",
+        "description": "Keys are held by the wallet. It's convenient but relies on the wallet's trustworthiness, and users don't have full control."
+    }
+]