From 6e617f391576ec1373c4f9908835d600e958cf02 Mon Sep 17 00:00:00 2001 From: ArmandoCode Date: Sun, 16 Jun 2024 16:16:05 -0600 Subject: [PATCH 1/7] fix: add .yarnrc.yml to handle dependency overrides and resolve conflicts --- apps/dashboard/.yarnrc.yml | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 apps/dashboard/.yarnrc.yml diff --git a/apps/dashboard/.yarnrc.yml b/apps/dashboard/.yarnrc.yml new file mode 100644 index 00000000..51fc2284 --- /dev/null +++ b/apps/dashboard/.yarnrc.yml @@ -0,0 +1,8 @@ +# Configuración para sobreescribir dependencias específicas +packageExtensions: + "http-proxy@*": + dependencies: + "eventemitter3": "^5.0.1" + "eventemitter3@4.0.7": + peerDependencies: + "eventemitter3": "^5.0.1" From 29624fd9e25e70e9ae01d3e69c9a22a2d906bd02 Mon Sep 17 00:00:00 2001 From: ArmandoCode Date: Sun, 16 Jun 2024 16:25:45 -0600 Subject: [PATCH 2/7] chore: update dependencies in package.json --- apps/dashboard/package.json | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json index 2669a0c4..c2b495ea 100644 --- a/apps/dashboard/package.json +++ b/apps/dashboard/package.json @@ -11,28 +11,30 @@ "@bandada/credentials": "2.2.9", "@bandada/utils": "2.2.9", "@chakra-ui/icons": "^2.1.1", - "@chakra-ui/react": "^2.5.1", + "@chakra-ui/react": "^2.5.5", "@chakra-ui/styled-system": "^2.0.0", "@chakra-ui/theme-tools": "^2.0.16", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@fontsource-variable/unbounded": "^5.0.5", - "@rainbow-me/rainbowkit": "^0.12.8", + "@rainbow-me/rainbowkit": "^2.1.2", "@semaphore-protocol/data": "patch:@semaphore-protocol/data@npm%3A3.10.0#~/.yarn/patches/@semaphore-protocol-data-npm-3.10.0-48e6c0f59e.patch", + "@tanstack/react-query": "^5.45.0", "ethers": "5.5.1", "framer-motion": "^10.0.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.10.1", "react-router-dom": "^6.8.1", - "siwe": "^1.1.6", - "wagmi": "^0.12.12" + "siwe": "1.1.6", + "viem": "2.x", + "wagmi": "^2.10.2" }, "devDependencies": { - "@types/react": "^18.0.27", - "@types/react-dom": "^18.0.10", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^3.1.0", - "typescript": "^4.9.3", + "typescript": "^5.0.4", "vite": "^4.1.0" } } From 3d9d9a3ee2e3a98aa4a4080d2bda8b0580a35a1c Mon Sep 17 00:00:00 2001 From: ArmandoCode Date: Sun, 16 Jun 2024 17:21:09 -0600 Subject: [PATCH 3/7] refactor: update components to support wagmi and rainbowkit v2 API changes --- .../src/components/add-member-modal.tsx | 514 +++++++++--------- .../new-group-stepper/final-preview-step.tsx | 215 ++++---- 2 files changed, 361 insertions(+), 368 deletions(-) diff --git a/apps/dashboard/src/components/add-member-modal.tsx b/apps/dashboard/src/components/add-member-modal.tsx index cb4ce993..1b8abe0b 100644 --- a/apps/dashboard/src/components/add-member-modal.tsx +++ b/apps/dashboard/src/components/add-member-modal.tsx @@ -1,285 +1,257 @@ -import { getSemaphoreContract } from "@bandada/utils" +import { getSemaphoreContract } from "@bandada/utils"; import { - AbsoluteCenter, - Box, - Button, - Divider, - Heading, - Icon, - IconButton, - Input, - InputGroup, - InputRightElement, - Modal, - ModalBody, - ModalContent, - ModalOverlay, - Text, - Textarea, - Tooltip, - useClipboard -} from "@chakra-ui/react" -import { useCallback, useEffect, useState } from "react" -import { FiCopy } from "react-icons/fi" -import { useSigner } from "wagmi" -import * as bandadaAPI from "../api/bandadaAPI" -import { Group } from "../types" -import parseMemberIds from "../utils/parseMemberIds" + AbsoluteCenter, + Box, + Button, + Divider, + Heading, + Icon, + IconButton, + Input, + InputGroup, + InputRightElement, + Modal, + ModalBody, + ModalContent, + ModalOverlay, + Text, + Textarea, + Tooltip, + useClipboard +} from "@chakra-ui/react"; +import { useCallback, useEffect, useState } from "react"; +import { FiCopy } from "react-icons/fi"; +import { useAccount } from "wagmi"; +import { getWalletClient } from "wagmi/actions"; +import * as bandadaAPI from "../api/bandadaAPI"; +import { Group } from "../types"; +import parseMemberIds from "../utils/parseMemberIds"; +import { configWallets } from "../lib/configWallets"; export type AddMemberModalProps = { - isOpen: boolean - onClose: (value?: string[]) => void - group: Group -} + isOpen: boolean; + onClose: (value?: string[]) => void; + group: Group; +}; export default function AddMemberModal({ - isOpen, - onClose, - group + isOpen, + onClose, + group }: AddMemberModalProps): JSX.Element { - const [_memberIds, setMemberIds] = useState("") - const [_isLoading, setIsLoading] = useState(false) - const { - hasCopied, - value: _clientLink, - setValue: setClientLink, - onCopy - } = useClipboard("") - const { data: signer } = useSigner() - - useEffect(() => { - setMemberIds("") - - if (group.credentials) { - setClientLink( - `${import.meta.env.VITE_CLIENT_URL}?credentialGroupId=${ - group.id - }` - ) + const [_memberIds, setMemberIds] = useState(""); + const [_isLoading, setIsLoading] = useState(false); + const { hasCopied, value: _clientLink, setValue: setClientLink, onCopy } = useClipboard(""); + const { address } = useAccount(); + const [signer, setSigner] = useState(null); + + // Fetch the signer when the address or chain changes + useEffect(() => { + const fetchSigner = async () => { + if (address) { + try { + const walletClient = await getWalletClient(configWallets); + if (walletClient) { + setSigner(walletClient); + } + } catch (error) { + console.error("Failed to get wallet client:", error); } - }, [group, setClientLink]) - - const addMember = useCallback(async () => { - const memberIds = parseMemberIds(_memberIds) - if (memberIds.length === 0) { - alert("Please enter at least one member id!") - return + } + }; + + fetchSigner(); + }, [address]); + + useEffect(() => { + setMemberIds(""); + + if (group.credentials) { + setClientLink( + `${import.meta.env.VITE_CLIENT_URL}?credentialGroupId=${group.id}` + ); + } + }, [group, setClientLink]); + + const addMember = useCallback(async () => { + const memberIds = parseMemberIds(_memberIds); + if (memberIds.length === 0) { + alert("Please enter at least one member id!"); + return; + } + + const uniqueMemberIds = new Set(memberIds); + if (uniqueMemberIds.size !== memberIds.length) { + alert("Please ensure there are no repeated member IDs!"); + return; + } + if (group.type === "on-chain" && group.members) { + const existingMembers = new Set(group.members.map((memberId) => BigInt(memberId))); + + const conflictingMembers = []; + + for (const memberId of memberIds) { + const parsedMemberId = BigInt(memberId); + + if (existingMembers.has(parsedMemberId)) { + conflictingMembers.push(parsedMemberId); } + } - const uniqueMemberIds = new Set(memberIds) - if (uniqueMemberIds.size !== memberIds.length) { - alert("Please ensure there are no repeated member IDs!") - return - } - if (group.type === "on-chain" && group.members) { - const existingMembers = new Set( - group.members.map((memberId) => BigInt(memberId)) - ) - - const conflictingMembers = [] - - for (const memberId of memberIds) { - const parsedMemberId = BigInt(memberId) - - if (existingMembers.has(parsedMemberId)) { - conflictingMembers.push(parsedMemberId) - } - } - - if (conflictingMembers.length > 0) { - if (conflictingMembers.length === 1) { - alert( - `Member ID ${conflictingMembers[0]} already exists in the group.` - ) - } else { - alert( - `Member IDs ${conflictingMembers.join( - ", " - )} already exist in the group.` - ) - } - return - } + if (conflictingMembers.length > 0) { + if (conflictingMembers.length === 1) { + alert(`Member ID ${conflictingMembers[0]} already exists in the group.`); + } else { + alert(`Member IDs ${conflictingMembers.join(", ")} already exist in the group.`); } + return; + } + } - const confirmMessage = ` + const confirmMessage = ` Are you sure you want to add the following members? ${memberIds.join("\n")} - ` - - if (!window.confirm(confirmMessage)) { - return - } - - setIsLoading(true) - - if (group.type === "off-chain") { - if ((await bandadaAPI.addMembers(group.id, memberIds)) === null) { - setIsLoading(false) - return - } - - setIsLoading(false) - onClose(memberIds) - } else { - if (!signer) { - alert("No valid signer for your transaction!") - - setIsLoading(false) - return - } - - try { - const semaphore = getSemaphoreContract("sepolia", signer as any) - - await semaphore.addMembers(group.name, memberIds) - - setIsLoading(false) - onClose(memberIds) - } catch (error) { - alert( - "Some error occurred! Check if you're on Sepolia network and the transaction is signed and completed" - ) - - setIsLoading(false) - } - } - }, [onClose, _memberIds, group, signer]) - - const generateInviteLink = useCallback(async () => { - const inviteLink = await bandadaAPI.generateMagicLink(group.id) - - if (inviteLink === null) { - return - } - - setClientLink(inviteLink) - }, [group, setClientLink]) - - return ( - - - - - - New member - - - {!group.credentials && ( - - - Add member IDs - - -