feat: Created a way to toggle specific buttons on specific states

packages/toolbox-core/src/utils/records/ConnectionsUtil.ts

@@ -0,0 +1,21 @@
+import type { ConnectionRecord } from '@aries-framework/core'
+
+import { DidExchangeState } from '@aries-framework/core'
+
+export class ConnectionsUtil {
+  private static loadingStates: DidExchangeState[] = [
+    DidExchangeState.ResponseSent,
+    DidExchangeState.RequestSent,
+    DidExchangeState.InvitationSent,
+  ]
+
+  public static acceptStates: DidExchangeState[] = [DidExchangeState.InvitationReceived]
+
+  public static isConnectionWaitingForResponse(connection: ConnectionRecord): boolean {
+    return ConnectionsUtil.loadingStates.includes(connection.state)
+  }
+
+  public static isConnectionWaitingForAcceptInput(connection: ConnectionRecord): boolean {
+    return ConnectionsUtil.acceptStates.includes(connection.state)
+  }
+}

packages/toolbox-core/src/utils/records/CredentialsUtil.ts

@@ -0,0 +1,23 @@
+import type { CredentialExchangeRecord } from '@aries-framework/core'
+
+import { CredentialState } from '@aries-framework/core'
+
+export class CredentialsUtil {
+  private static loadingStates: CredentialState[] = [CredentialState.RequestSent, CredentialState.OfferSent]
+
+  private static acceptStates: CredentialState[] = [CredentialState.OfferReceived, CredentialState.CredentialReceived]
+
+  private static declineStates: CredentialState[] = [CredentialState.OfferReceived]
+
+  public static isCredentialWaitingForResponse(credential: CredentialExchangeRecord): boolean {
+    return CredentialsUtil.loadingStates.includes(credential.state)
+  }
+
+  public static isCredentialWaitingForAcceptInput(credential: CredentialExchangeRecord): boolean {
+    return CredentialsUtil.acceptStates.includes(credential.state)
+  }
+
+  public static isCredentialWaitingForDeclineInput(credential: CredentialExchangeRecord): boolean {
+    return CredentialsUtil.declineStates.includes(credential.state)
+  }
+}

packages/toolbox-core/src/utils/records/ProofsUtil.ts

@@ -0,0 +1,22 @@
+import type { ProofExchangeRecord } from '@aries-framework/core'
+
+import { ProofState } from '@aries-framework/core'
+
+export class ProofsUtil {
+  private static loadingStates: ProofState[] = [ProofState.PresentationSent, ProofState.RequestSent]
+
+  private static acceptStates: ProofState[] = [ProofState.RequestReceived]
+  private static declineStates: ProofState[] = [ProofState.RequestReceived]
+
+  public static isProofWaitingForResponse(proof: ProofExchangeRecord): boolean {
+    return ProofsUtil.loadingStates.includes(proof.state)
+  }
+
+  public static isProofWaitingForAcceptInput(proof: ProofExchangeRecord): boolean {
+    return ProofsUtil.acceptStates.includes(proof.state)
+  }
+
+  public static isProofWaitingForDeclineInput(proof: ProofExchangeRecord): boolean {
+    return ProofsUtil.declineStates.includes(proof.state)
+  }
+}

packages/toolbox-ui/src/components/RecordActions.tsx

@@ -0,0 +1,38 @@
+import { ActionIcon, Group, Loader } from '@mantine/core'
+import { IconCheck, IconTrash, IconX } from '@tabler/icons'
+import React from 'react'
+
+interface RecordActionsProps {
+  onDelete?: () => void
+  onDecline?: () => void
+  onAccept?: () => void
+  isLoading?: boolean
+}
+
+export const RecordActions = ({ onAccept, onDecline, onDelete, isLoading }: RecordActionsProps) => {
+  const actions = [
+    onAccept && (
+      <ActionIcon key="accept" color="green" onClick={onAccept}>
+        <IconCheck size={16} stroke={1.5} />
+      </ActionIcon>
+    ),
+
+    onDecline && (
+      <ActionIcon key="reject" color="red" onClick={onDecline}>
+        <IconX size={16} stroke={1.5} />
+      </ActionIcon>
+    ),
+
+    onDelete && (
+      <ActionIcon key="delete" color="red" onClick={onDelete}>
+        <IconTrash size={16} stroke={1.5} />
+      </ActionIcon>
+    ),
+  ].filter(Boolean)
+
+  return (
+    <Group spacing={0} position="right">
+      {isLoading ? <Loader size={20} /> : actions}
+    </Group>
+  )
+}

packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx

@@ -1,17 +1,19 @@
 import type { ConnectionRecord } from '@aries-framework/core'
 
-import { ActionIcon, Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
-import { IconPencil, IconTrash } from '@tabler/icons'
+import { ConnectionsUtil } from '@animo/toolbox-core/src/utils/records/ConnectionsUtil'
+import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
+import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
 
 interface ConnectionsTableProps {
   records: ConnectionRecord[]
   onDelete: (connection: ConnectionRecord) => void
+  onAccept: (connection: ConnectionRecord) => void
 }
 
-export const ConnectionsTable = ({ records, onDelete }: ConnectionsTableProps) => {
+export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTableProps) => {
   const theme = useMantineTheme()
 
   return (
@@ -26,38 +28,40 @@ export const ConnectionsTable = ({ records, onDelete }: ConnectionsTableProps) =
           </tr>
         </thead>
         <tbody>
-          {records.map((record) => (
-            <tr key={record.id}>
-              <td>
-                <Group spacing="sm">
-                  <SmartAvatar size={30} src={record.imageUrl} radius={30}>
-                    {record.theirLabel}
-                  </SmartAvatar>
+          {records.map((record: ConnectionRecord) => {
+            const isLoading = ConnectionsUtil.isConnectionWaitingForResponse(record)
+            const isWaitingForAccept = ConnectionsUtil.isConnectionWaitingForAcceptInput(record)
+
+            return (
+              <tr key={record.id}>
+                <td>
+                  <Group spacing="sm">
+                    <SmartAvatar size={30} src={record.imageUrl} radius={30}>
+                      {record.theirLabel}
+                    </SmartAvatar>
+                    <Text size="sm" weight={500}>
+                      {record.theirLabel}
+                    </Text>
+                  </Group>
+                </td>
+                <td>
                   <Text size="sm" weight={500}>
-                    {record.theirLabel}
+                    {record.id}
                   </Text>
-                </Group>
-              </td>
-              <td>
-                <Text size="sm" weight={500}>
-                  {record.id}
-                </Text>
-              </td>
-              <td>
-                <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'}>{record.state}</Badge>
-              </td>
-              <td>
-                <Group spacing={0} position="right">
-                  <ActionIcon>
-                    <IconPencil size={16} stroke={1.5} />
-                  </ActionIcon>
-                  <ActionIcon color="red" onClick={() => onDelete(record)}>
-                    <IconTrash size={16} stroke={1.5} />
-                  </ActionIcon>
-                </Group>
-              </td>
-            </tr>
-          ))}
+                </td>
+                <td>
+                  <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'}>{record.state}</Badge>
+                </td>
+                <td>
+                  <RecordActions
+                    onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
+                    onDelete={() => onDelete(record)}
+                    isLoading={isLoading}
+                  />
+                </td>
+              </tr>
+            )
+          })}
         </tbody>
       </Table>
     </ScrollArea>

packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx

@@ -1,19 +1,21 @@
 import type { ConnectionRecord, CredentialExchangeRecord } from '@aries-framework/core'
 
-import { ActionIcon, Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
-import { IconCheck, IconTrash } from '@tabler/icons'
+import { CredentialsUtil } from '@animo/toolbox-core/src/utils/records/CredentialsUtil'
+import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
+import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
 
 interface CredentialsTableProps {
   records: CredentialExchangeRecord[]
   connections: ConnectionRecord[]
   onDelete: (credential: CredentialExchangeRecord) => void
+  onDecline: (credential: CredentialExchangeRecord) => void
   onAccept: (credential: CredentialExchangeRecord) => void
 }
 
-export const CredentialsTable = ({ records, connections, onDelete, onAccept }: CredentialsTableProps) => {
+export const CredentialsTable = ({ records, connections, onDelete, onAccept, onDecline }: CredentialsTableProps) => {
   const theme = useMantineTheme()
 
   return (
@@ -30,6 +32,10 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept }: C
         <tbody>
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id == record.connectionId)
+            const isLoading = CredentialsUtil.isCredentialWaitingForResponse(record)
+            const isWaitingForAccept = CredentialsUtil.isCredentialWaitingForAcceptInput(record)
+            const isWaitingForDecline = CredentialsUtil.isCredentialWaitingForDeclineInput(record)
+
             return (
               <tr key={record.id}>
                 <td>
@@ -51,14 +57,12 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept }: C
                   <Badge variant={theme.colorScheme === 'dark' ? 'light' : 'outline'}>{record.state}</Badge>
                 </td>
                 <td>
-                  <Group spacing={0} position="right">
-                    <ActionIcon color="green">
-                      <IconCheck size={16} stroke={1.5} onClick={() => onAccept(record)} />
-                    </ActionIcon>
-                    <ActionIcon color="red" onClick={() => onDelete(record)}>
-                      <IconTrash size={16} stroke={1.5} />
-                    </ActionIcon>
-                  </Group>
+                  <RecordActions
+                    onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
+                    onDecline={isWaitingForDecline ? () => onDecline(record) : undefined}
+                    onDelete={() => onDelete(record)}
+                    isLoading={isLoading}
+                  />
                 </td>
               </tr>
             )

packages/toolbox-ui/src/components/proofs/ProofsTable.tsx

@@ -1,19 +1,21 @@
 import type { ConnectionRecord, ProofExchangeRecord } from '@aries-framework/core'
 
-import { ActionIcon, Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
-import { IconCheck, IconTrash } from '@tabler/icons'
+import { ProofsUtil } from '@animo/toolbox-core/src/utils/records/ProofsUtil'
+import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
+import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
 
 interface ProofsTableProps {
   records: ProofExchangeRecord[]
   connections: ConnectionRecord[]
   onDelete: (proof: ProofExchangeRecord) => void
   onAccept: (proof: ProofExchangeRecord) => void
+  onDecline: (proof: ProofExchangeRecord) => void
 }
 
-export const ProofsTable = ({ records, connections, onDelete, onAccept }: ProofsTableProps) => {
+export const ProofsTable = ({ records, connections, onDelete, onAccept, onDecline }: ProofsTableProps) => {
   const theme = useMantineTheme()
 
   return (
@@ -30,6 +32,10 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept }: Proofs
         <tbody>
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id === record.connectionId)
+            const isLoading = ProofsUtil.isProofWaitingForResponse(record)
+            const isWaitingForAccept = ProofsUtil.isProofWaitingForAcceptInput(record)
+            const isWaitingForDecline = ProofsUtil.isProofWaitingForDeclineInput(record)
+
             return (
               <tr key={record.id}>
                 <td>
@@ -52,12 +58,12 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept }: Proofs
                 </td>
                 <td>
                   <Group spacing={0} position="right">
-                    <ActionIcon color="green" onClick={() => onAccept(record)}>
-                      <IconCheck size={16} stroke={1.5} />
-                    </ActionIcon>
-                    <ActionIcon color="red" onClick={() => onDelete(record)}>
-                      <IconTrash size={16} stroke={1.5} />
-                    </ActionIcon>
+                    <RecordActions
+                      onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
+                      onDecline={isWaitingForDecline ? () => onDecline(record) : undefined}
+                      onDelete={() => onDelete(record)}
+                      isLoading={isLoading}
+                    />
                   </Group>
                 </td>
               </tr>

packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx

@@ -19,6 +19,10 @@ export const ConnectionsScreen = () => {
     await agent?.oob.receiveInvitationFromUrl(url)
   }
 
+  const acceptRequest = async (connectionId: string) => {
+    await agent?.connections.acceptRequest(connectionId)
+  }
+
   return (
     <>
       <Title size="h2">Connections</Title>
@@ -35,6 +39,7 @@ export const ConnectionsScreen = () => {
           <ConnectionsTable
             records={connectionRecords}
             onDelete={(connection) => agent?.connections.deleteById(connection.id)}
+            onAccept={(connection) => acceptRequest(connection.id)}
           />
         )}
       </div>

packages/toolbox-ui/src/pages/agent/credentials/CredentialsScreen.tsx

@@ -39,6 +39,7 @@ export const CredentialsScreen = () => {
             connections={connectionRecords}
             onDelete={(credential) => agent?.credentials.deleteById(credential.id)}
             onAccept={(credential) => acceptCredential(credential)}
+            onDecline={(credential) => agent?.credentials.declineOffer(credential.id)}
           />
         )}
       </div>

packages/toolbox-ui/src/pages/agent/proofs/ProofsScreen.tsx

@@ -31,6 +31,10 @@ export const ProofsScreen = () => {
     await agent?.proofs.deleteById(proof.id)
   }
 
+  const declineProofRequest = async (proof: ProofExchangeRecord) => {
+    await agent?.proofs.declineRequest(proof.id)
+  }
+
   return (
     <>
       <Title size="h2">Proofs</Title>
@@ -42,6 +46,7 @@ export const ProofsScreen = () => {
           connections={connectionRecords}
           onDelete={deleteProof}
           onAccept={acceptProofRequest}
+          onDecline={declineProofRequest}
         />
       )}
     </>