render OwnableValidatorForm view

advanced/wallets/react-wallet-v2/src/components/ModuleForm.tsx

@@ -0,0 +1,16 @@
+import { Fragment, useMemo } from 'react'
+import OwnableValidatorForm from '@/views/OwnableValidatorForm'
+import { ModuleView } from '@/data/ERC7579ModuleData'
+
+export default function ModuleForm({ view }: { view?: ModuleView }) {
+  const componentView = useMemo(() => {
+    switch (view) {
+      case 'OwnableValidatorForm':
+        return <OwnableValidatorForm />
+      default:
+        return null
+    }
+  }, [view])
+
+  return <Fragment>{componentView}</Fragment>
+}

advanced/wallets/react-wallet-v2/src/data/ERC7579ModuleData.ts

@@ -15,13 +15,21 @@ export const moduleTypeIds = {
   hook: 4
 }
 export const PERMISSION_VALIDATOR_ADDRESS = '0x6671AD9ED29E2d7a894E80bf48b7Bf03Ee64A0f4'
+export type ModuleView =
+  | 'PermissionValidatorForm'
+  | 'OwnableValidatorForm'
+  | 'MFAValidatorForm'
+  | 'WebAuthnValidatorForm'
+  | 'ScheduleOrdersExecutorForm'
+  | 'ScheduleTransfersExecutorForm'
 
 export type Module = {
   name: string
   type: number
   description: string
   moduleAddress: string
   moduleData: string
+  view?: ModuleView
 }
 export const supportedModules: Module[] = [
   {
@@ -37,7 +45,8 @@ export const supportedModules: Module[] = [
     moduleAddress: OWNABLE_VALIDATOR_ADDRESS,
     description: `The Ownable Validator module is a module that allows you to add multiple ECDSA owners to an account.
      The owners can then be used to sign transactions to be executed on the account.`,
-    moduleData: ''
+    moduleData: '',
+    view: 'OwnableValidatorForm'
   },
   {
     name: `Muti-factor Validator`,

advanced/wallets/react-wallet-v2/src/views/ModulesManagement.tsx

@@ -1,11 +1,13 @@
-import { supportedModules } from '@/data/ERC7579ModuleData'
+import { ModuleView, supportedModules } from '@/data/ERC7579ModuleData'
 import { isERC7579ModuleInstalled, installERC7579Module } from '@/utils/ERC7579AccountUtils'
 import { styledToast } from '@/utils/HelperUtil'
-import { Button, Card, Loading, Row, Text } from '@nextui-org/react'
+import { Collapse, Loading, Text } from '@nextui-org/react'
 import { Fragment, useCallback, useEffect, useState } from 'react'
 import { Address, Chain } from 'viem'
+import ModuleForm from '@/components/ModuleForm'
 
 type ModulesWithStatus = {
+  view?: ModuleView
   isInstalled: boolean
   name: string
   type: number
@@ -92,35 +94,18 @@ export default function ModulesManagement({
       {modulesStatusLoading ? (
         <Loading />
       ) : (
-        modulesWithStatus.map(module => (
-          <Card bordered key={module.moduleAddress} css={{ marginBottom: '$5' }}>
-            <Card.Body>
-              <Row justify="space-between" align="center">
-                <Text>{module.name}</Text>
-                {module.isInstalled ? (
-                  <Button auto color={'error'} disabled>
-                    Uninstall
-                  </Button>
-                ) : (
-                  <Button
-                    auto
-                    disabled={module.name !== 'Permission Validator' || accountType !== 'Safe'}
-                    onClick={() =>
-                      onInstall(
-                        accountAddress,
-                        chain?.id.toString(),
-                        module.type.toString(),
-                        module.moduleAddress
-                      )
-                    }
-                  >
-                    Install
-                  </Button>
-                )}
-              </Row>
-            </Card.Body>
-          </Card>
-        ))
+        <Collapse.Group>
+          {modulesWithStatus.map(module => (
+            <Collapse
+              key={module.moduleAddress}
+              title={<Text h5>{module.name}</Text>}
+              subtitle={module.isInstalled ? 'Installed' : 'Not Installed'}
+            >
+              <Text>{module.description}</Text>
+              {!module.isInstalled && <ModuleForm view={module.view} />}
+            </Collapse>
+          ))}
+        </Collapse.Group>
       )}
     </Fragment>
   )

advanced/wallets/react-wallet-v2/src/views/OwnableValidatorForm.tsx

@@ -0,0 +1,26 @@
+import { supportedModules } from '@/data/ERC7579ModuleData'
+import { isERC7579ModuleInstalled, installERC7579Module } from '@/utils/ERC7579AccountUtils'
+import { styledToast } from '@/utils/HelperUtil'
+import { Button, Card, Input, Loading, Row, Text, Textarea } from '@nextui-org/react'
+import { Fragment, useCallback, useEffect, useState } from 'react'
+import { Address, Chain } from 'viem'
+
+export default function OwnableValidatorForm() {
+  const [isLoading, setLoading] = useState(false)
+
+  return (
+    <Card css={{ marginBottom: '$5' }}>
+      <Card.Body>
+        <Input css={{ marginBottom: '$5' }} bordered placeholder="owner count" />
+        <Input css={{ marginBottom: '$5' }} bordered placeholder="threshold" />
+        <Textarea
+          css={{ marginBottom: '$5' }}
+          bordered
+          label="Owner's addresses"
+          placeholder="Enter comma separated addresses."
+        />
+        <Button auto>Install</Button>
+      </Card.Body>
+    </Card>
+  )
+}