src/pages/create/index.tsx

@@ -89,13 +89,21 @@ export const CreatePage = () => {
 
     const addUser = (pubkey: string) => {
       setUsers((prev) => {
+        const signers = prev.filter((user) => user.role === UserRole.signer)
+        const viewers = prev.filter((user) => user.role === UserRole.viewer)
+
         const existingUserIndex = prev.findIndex(
           (user) => user.pubkey === pubkey
         )
 
         // add new
-        if (existingUserIndex === -1)
+        if (existingUserIndex === -1) {
-          return [...prev, { pubkey, role: userRole }]
+          if (userRole === UserRole.signer) {
+            return [...signers, { pubkey, role: userRole }, ...viewers]
+          } else {
+            return [...signers, ...viewers, { pubkey, role: userRole }]
+          }
+        }
 
         const existingUser = prev[existingUserIndex]
 
@@ -108,7 +116,11 @@ export const CreatePage = () => {
         updatedUser.role = userRole
         updatedUsers[existingUserIndex] = updatedUser
 
-        return updatedUsers
+        // signers should be placed at the start of the  array
+        return [
+          ...updatedUsers.filter((user) => user.role === UserRole.signer),
+          ...updatedUsers.filter((user) => user.role === UserRole.viewer)
+        ]
       })
     }
 
@@ -527,6 +539,7 @@ const DisplayUser = ({
               .filter((user) => user.role === UserRole.signer)
               .map((user, index) => (
                 <SignerRow
+                  key={`signer-${index}`}
                   userMeta={metadata[user.pubkey]}
                   user={user}
                   index={index}