feat: #14 List role titles in a DAO

frontend_v2/components/Role.tsx

@@ -0,0 +1,34 @@
+import { useReadContract } from "wagmi";
+import { abi } from "../../smart-contracts/ignition/deployments/chain-11155420/artifacts/DaoModule#Dao.json";
+import { useIsMounted } from "../hooks/useIsMounted";
+
+export default function Role({ orgAddress, roleIndex }: any) {
+    console.log('Role')
+
+    const { data, isLoading } = useReadContract({
+        abi,
+        address: orgAddress,
+        functionName: 'roles',
+        args: [roleIndex]
+    })
+    console.log('data:', data )
+
+    if (!useIsMounted || isLoading) {
+        return (
+            <>
+                Loading role...
+                <div className="mt-4 animate-spin text-6xl">🐸</div>
+            </>
+        )
+    }
+
+    let roleTitle: any = null
+    if (data != undefined) {
+        roleTitle = String(data)
+    }
+    return (
+        <>
+            <h2 className="text-4xl">Role: {roleTitle}</h2>
+        </>
+    )
+  }

frontend_v2/components/Roles.tsx

@@ -1,6 +1,7 @@
 import { useReadContract } from "wagmi";
 import { abi } from "../../smart-contracts/ignition/deployments/chain-11155420/artifacts/DaoModule#Dao.json";
 import { useIsMounted } from "../hooks/useIsMounted";
+import Role from "./Role";
 
 export default function Roles({ orgAddress }: any) {
     console.log('Roles')
@@ -21,17 +22,27 @@ export default function Roles({ orgAddress }: any) {
         )
     }
 
+    let rolesCount: any = null
+    if (data != undefined) {
+        rolesCount = Number(data)
+    }
+    console.log('rolesCount:', rolesCount)
+
+    if (rolesCount == 0) {
+        return (
+            <>
+                No roles have been added yet
+            </>
+        )
+    }
+
     return (
       <>
-        <div className="bg-white rounded-2xl p-4">
-            Role title 1
-        </div>
-        <div className="mt-4 bg-white rounded-2xl p-4">
-            Role title 2
-        </div>
-        <div className="mt-4 bg-white rounded-2xl p-4">
-            Role title 3
-        </div>
+        {[...Array(rolesCount)].map((data, index) => (
+            <div className="mt-4 bg-white rounded-2xl p-4">
+                <Role orgAddress={orgAddress} roleIndex={index} />
+            </div>
+        ))}
       </>
     )
   }