feat: add remove member to onchain groups

re #565
bandada-infra · Sep 29, 2024 · d36e9c7 · d36e9c7
1 parent 9a5fa12
commit d36e9c7
Show file tree

Hide file tree

Showing 4 changed files with 404 additions and 45 deletions.
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -18,6 +18,7 @@
         "@emotion/styled": "^11.10.6",
         "@fontsource-variable/unbounded": "^5.0.5",
         "@rainbow-me/rainbowkit": "^0.12.8",
+        "@semaphore-protocol/core": "^4.0.3",
         "@semaphore-protocol/data": "4.0.3",
         "ethers": "5.5.1",
         "framer-motion": "^10.0.1",

diff --git a/apps/dashboard/src/pages/group.tsx b/apps/dashboard/src/pages/group.tsx
@@ -35,6 +35,9 @@ import {
     MdOutlineMoreVert
 } from "react-icons/md"
 import { Link, useNavigate, useParams } from "react-router-dom"
+import { useSigner } from "wagmi"
+import { getSemaphoreContract } from "@bandada/utils"
+import { Group as Semaphorev4Group } from "@semaphore-protocol/core"
 import * as bandadaApi from "../api/bandadaAPI"
 import { getGroup as getOnchainGroup } from "../api/semaphoreAPI"
 import image1 from "../assets/image1.svg"
@@ -65,6 +68,7 @@ export default function GroupPage(): JSX.Element {
             ? _group.admin === admin.id
             : _group.admin === admin.address.toLowerCase())
     )
+    const { data: signer } = useSigner()
 
     useEffect(() => {
         ;(async () => {
@@ -143,17 +147,54 @@ export default function GroupPage(): JSX.Element {
                 return
             }
 
-            if (
-                (await bandadaApi.removeMember(_group!.id, memberId)) === null
-            ) {
-                return
-            }
+            if (_group?.type === "off-chain") {
+                if (
+                    (await bandadaApi.removeMember(_group!.id, memberId)) ===
+                    null
+                ) {
+                    return
+                }
+                _group!.members = _group!.members.filter((m) => m !== memberId)
+            } else {
+                if (!signer) {
+                    alert("No valid signer for your transaction!")
+                    return
+                }
+
+                try {
+                    const semaphore = getSemaphoreContract(
+                        "sepolia",
+                        signer as any
+                    )
+
+                    const semaphorev4Group = new Semaphorev4Group(
+                        _group!.members
+                    )
+
+                    const index = semaphorev4Group.indexOf(memberId)
 
-            _group!.members = _group!.members.filter((m) => m !== memberId)
+                    const merkleProof =
+                        semaphorev4Group.generateMerkleProof(index)
+
+                    await semaphore.removeMember(
+                        _group!.id,
+                        memberId,
+                        merkleProof.siblings
+                    )
+                } catch (error) {
+                    alert(
+                        "Some error occurred! Check if you're on Sepolia network and the transaction is signed and completed"
+                    )
+                    return
+                }
+                _group!.members = _group!.members.map((m) =>
+                    m !== memberId ? m : "0"
+                )
+            }
 
             setGroup({ ..._group! })
         },
-        [_group]
+        [_group, signer]
     )
 
     const removeMembers = useCallback(
@@ -746,46 +787,39 @@ ${memberIds.join("\n")}
                                         </Text>
                                     </HStack>
 
-                                    {_group.type === "off-chain" &&
-                                        isGroupAdmin && (
-                                            <Menu>
-                                                <MenuButton
-                                                    as={IconButton}
-                                                    aria-label="Options"
+                                    {isGroupAdmin && (
+                                        <Menu>
+                                            <MenuButton
+                                                as={IconButton}
+                                                aria-label="Options"
+                                                icon={
+                                                    <Icon
+                                                        color="balticSea.300"
+                                                        boxSize="6"
+                                                        as={MdOutlineMoreVert}
+                                                    />
+                                                }
+                                                variant="link"
+                                            />
+                                            <MenuList>
+                                                <MenuItem
                                                     icon={
                                                         <Icon
+                                                            mt="5px"
                                                             color="balticSea.300"
                                                             boxSize="6"
-                                                            as={
-                                                                MdOutlineMoreVert
-                                                            }
+                                                            as={MdOutlineCancel}
                                                         />
                                                     }
-                                                    variant="link"
-                                                />
-                                                <MenuList>
-                                                    <MenuItem
-                                                        icon={
-                                                            <Icon
-                                                                mt="5px"
-                                                                color="balticSea.300"
-                                                                boxSize="6"
-                                                                as={
-                                                                    MdOutlineCancel
-                                                                }
-                                                            />
-                                                        }
-                                                        onClick={() =>
-                                                            removeMember(
-                                                                memberId
-                                                            )
-                                                        }
-                                                    >
-                                                        Remove
-                                                    </MenuItem>
-                                                </MenuList>
-                                            </Menu>
-                                        )}
+                                                    onClick={() =>
+                                                        removeMember(memberId)
+                                                    }
+                                                >
+                                                    Remove
+                                                </MenuItem>
+                                            </MenuList>
+                                        </Menu>
+                                    )}
                                 </HStack>
                             </Flex>
                         ))

diff --git a/libs/utils/src/getSemaphoreContract.ts b/libs/utils/src/getSemaphoreContract.ts
@@ -44,6 +44,20 @@ export class SemaphoreContract {
 
         return transaction.wait(1)
     }
+
+    async removeMember(
+        groupId: string,
+        member: string,
+        siblings: bigint[]
+    ): Promise<ContractReceipt> {
+        const transaction = await this.contract.removeMember(
+            groupId,
+            member,
+            siblings
+        )
+
+        return transaction.wait(1)
+    }
 }
 
 export default function getSemaphoreContract(