Pass custom filter options in ROFL updates tab

Author: buberdds

.changelog/1777.feature.md

@@ -0,0 +1 @@
+ROFL apps support

src/app/components/RuntimeTransactionMethod/index.tsx

@@ -74,6 +74,17 @@ export const getRuntimeTxMethodOptions = (t: TFunction, layer: Layer): SelectOpt
     )
 }
 
+export const getRuntimeRoflUpdatesMethodOptions = (t: TFunction): SelectOptionBase[] => {
+  const options = ['rofl.Create', 'rofl.Remove', 'rofl.Update']
+
+  return options.map(
+    (method): SelectOptionBase => ({
+      value: method,
+      label: getRuntimeTransactionLabel(t, method),
+    }),
+  )
+}
+
 /**
  * The method call body. Defined by the runtime.
  *

src/app/pages/RoflAppDetailsPage/RoflAppUpdatesCard.tsx

@@ -1,17 +1,20 @@
 import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
 import { updatesContainerId } from '../../utils/tabAnchors'
 import { LinkableCardLayout } from '../../components/LinkableCardLayout'
 import { RuntimeTransactions } from '../../components/Transactions'
 import { RuntimeTransactionTypeFilter } from '../../components/Transactions/RuntimeTransactionTypeFilter'
+import { getRuntimeRoflUpdatesMethodOptions } from '../..//components/RuntimeTransactionMethod'
 import { RoflAppDetailsContext, useRoflAppUpdates } from './hooks'
 
 export const RoflAppUpdatesCard: FC<RoflAppDetailsContext> = context => {
+  const { t } = useTranslation()
   const { method, setMethod, scope } = context
-
   const { isMobile } = useScreenSize()
+  const customOptions = getRuntimeRoflUpdatesMethodOptions(t)
 
   return (
     <LinkableCardLayout
@@ -24,13 +27,24 @@ export const RoflAppUpdatesCard: FC<RoflAppDetailsContext> = context => {
           }}
         >
           {!isMobile && (
-            <RuntimeTransactionTypeFilter layer={scope.layer} value={method} setValue={setMethod} />
+            <RuntimeTransactionTypeFilter
+              layer={scope.layer}
+              value={method}
+              setValue={setMethod}
+              customOptions={customOptions}
+            />
           )}
         </Box>
       }
     >
       {isMobile && (
-        <RuntimeTransactionTypeFilter layer={scope.layer} value={method} setValue={setMethod} expand />
+        <RuntimeTransactionTypeFilter
+          layer={scope.layer}
+          value={method}
+          setValue={setMethod}
+          expand
+          customOptions={customOptions}
+        />
       )}
       <RoflAppUpdates {...context} />
     </LinkableCardLayout>