From 8b40e404406a419bfdc5b7b28363bc715102af5c Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Tue, 6 Dec 2022 12:06:12 +0100
Subject: [PATCH 1/4] feat: Created a way to toggle specific buttons on
 specific states

Signed-off-by: Tom Lanser <tom@animo.id>
---
 .../src/components/RecordActions.tsx          | 46 +++++++++++
 .../connections/ConnectionsTable.tsx          | 77 +++++++++++--------
 .../credentials/CredentialsTable.tsx          | 34 +++++---
 .../src/components/proofs/ProofsTable.tsx     | 30 +++++---
 .../agent/connections/ConnectionsScreen.tsx   |  5 ++
 .../agent/credentials/CredentialsScreen.tsx   |  1 +
 .../src/pages/agent/proofs/ProofsScreen.tsx   |  5 ++
 yarn.lock                                     | 22 ++----
 8 files changed, 150 insertions(+), 70 deletions(-)
 create mode 100644 packages/toolbox-ui/src/components/RecordActions.tsx

diff --git a/packages/toolbox-ui/src/components/RecordActions.tsx b/packages/toolbox-ui/src/components/RecordActions.tsx
new file mode 100644
index 0000000..852aa02
--- /dev/null
+++ b/packages/toolbox-ui/src/components/RecordActions.tsx
@@ -0,0 +1,46 @@
+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
+
+  isDeclineable?: boolean
+  isAcceptable?: boolean
+  isLoading?: boolean
+}
+
+export const RecordActions = ({
+  isAcceptable,
+  onAccept,
+  onDecline,
+  isDeclineable,
+  onDelete,
+  isLoading,
+}: RecordActionsProps) => {
+  const actions = [
+    isAcceptable ? (
+      <ActionIcon key="accept" color="green">
+        <IconCheck size={16} stroke={1.5} onClick={onAccept} />
+      </ActionIcon>
+    ) : null,
+
+    isDeclineable ? (
+      <ActionIcon key="reject" color="red" onClick={onDecline}>
+        <IconX size={16} stroke={1.5} />
+      </ActionIcon>
+    ) : null,
+
+    <ActionIcon key="delete" color="red" onClick={onDelete}>
+      <IconTrash size={16} stroke={1.5} />
+    </ActionIcon>,
+  ]
+
+  return (
+    <Group spacing={0} position="right">
+      {isLoading ? <Loader size={20} /> : <>{actions}</>}
+    </Group>
+  )
+}
diff --git a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
index cf8f9d5..29e4339 100644
--- a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
+++ b/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 { DidExchangeState } from '@aries-framework/core'
+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,47 @@ 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) => {
+            const recordState = record.state
+
+            const isLoading =
+              recordState === DidExchangeState.RequestSent ||
+              recordState === DidExchangeState.ResponseSent ||
+              recordState === DidExchangeState.InvitationSent
+
+            const isAcceptable = recordState === DidExchangeState.InvitationReceived
+
+            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={() => onAccept(record)}
+                    onDelete={() => onDelete(record)}
+                    isLoading={isLoading}
+                    isAcceptable={isAcceptable}
+                  />
+                </td>
+              </tr>
+            )
+          })}
         </tbody>
       </Table>
     </ScrollArea>
diff --git a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
index ff8bf62..cb35912 100644
--- a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
+++ b/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 { CredentialState } from '@aries-framework/core'
+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,16 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept }: C
         <tbody>
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id == record.connectionId)
+
+            const recordState = record.state
+
+            const isLoading = recordState === CredentialState.RequestSent || recordState === CredentialState.OfferSent
+
+            const isDeclineable = recordState === CredentialState.OfferReceived
+
+            const isAcceptable =
+              recordState === CredentialState.OfferReceived || recordState === CredentialState.CredentialReceived
+
             return (
               <tr key={record.id}>
                 <td>
@@ -51,14 +63,14 @@ 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
+                    onDecline={() => onDecline(record)}
+                    onAccept={() => onAccept(record)}
+                    onDelete={() => onDelete(record)}
+                    isAcceptable={isAcceptable}
+                    isDeclineable={isDeclineable}
+                    isLoading={isLoading}
+                  />
                 </td>
               </tr>
             )
diff --git a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
index cab1570..862f917 100644
--- a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
+++ b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
@@ -1,9 +1,10 @@
 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 { ProofState } from '@aries-framework/core'
+import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
+import { RecordActions } from '../RecordActions'
 import { SmartAvatar } from '../SmartAvatar'
 
 interface ProofsTableProps {
@@ -11,9 +12,10 @@ interface ProofsTableProps {
   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,14 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept }: Proofs
         <tbody>
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id === record.connectionId)
+            const recordState = record.state
+
+            const isDeclineable = recordState === ProofState.RequestReceived
+
+            const isAcceptable = recordState === ProofState.RequestReceived
+
+            const isLoading = recordState === ProofState.PresentationSent || recordState === ProofState.RequestSent
+
             return (
               <tr key={record.id}>
                 <td>
@@ -52,12 +62,14 @@ 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
+                      onDecline={() => onDecline(record)}
+                      onAccept={() => onAccept(record)}
+                      onDelete={() => onDelete(record)}
+                      isAcceptable={isAcceptable}
+                      isDeclineable={isDeclineable}
+                      isLoading={isLoading}
+                    />
                   </Group>
                 </td>
               </tr>
diff --git a/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx b/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
index 4ee32ac..cdbc1ce 100644
--- a/packages/toolbox-ui/src/pages/agent/connections/ConnectionsScreen.tsx
+++ b/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>
diff --git a/packages/toolbox-ui/src/pages/agent/credentials/CredentialsScreen.tsx b/packages/toolbox-ui/src/pages/agent/credentials/CredentialsScreen.tsx
index 59a7bea..1f4500c 100644
--- a/packages/toolbox-ui/src/pages/agent/credentials/CredentialsScreen.tsx
+++ b/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>
diff --git a/packages/toolbox-ui/src/pages/agent/proofs/ProofsScreen.tsx b/packages/toolbox-ui/src/pages/agent/proofs/ProofsScreen.tsx
index fe92a10..9928eec 100644
--- a/packages/toolbox-ui/src/pages/agent/proofs/ProofsScreen.tsx
+++ b/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}
         />
       )}
     </>
diff --git a/yarn.lock b/yarn.lock
index 96292ac..1658783 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2558,12 +2558,11 @@ abbrev@1, abbrev@^1.0.0:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
   integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
 
-abort-controller@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
-  integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
-  dependencies:
-    event-target-shim "^5.0.0"
+abort-controller@^3.0.0, "abort-controller@npm:native-abort-controller@latest", native-abort-controller@^1.0.4:
+  name abort-controller
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/native-abort-controller/-/native-abort-controller-1.0.4.tgz#39920155cc0c18209ff93af5bc90be856143f251"
+  integrity sha512-zp8yev7nxczDJMoP6pDxyD20IU0T22eX8VwN2ztDccKvSZhRaV33yP1BGwKSZfXuqWUzsXopVFjBdau9OOAwMQ==
 
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
   version "1.3.8"
@@ -4684,11 +4683,6 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
-event-target-shim@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
-  integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
-
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -7239,12 +7233,6 @@ nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
-native-abort-controller@^1.0.4:
-  name abort-controller
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/native-abort-controller/-/native-abort-controller-1.0.4.tgz#39920155cc0c18209ff93af5bc90be856143f251"
-  integrity sha512-zp8yev7nxczDJMoP6pDxyD20IU0T22eX8VwN2ztDccKvSZhRaV33yP1BGwKSZfXuqWUzsXopVFjBdau9OOAwMQ==
-
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"

From 5d8167e7eead75ca54cdfd669cde9ca6240032ee Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Wed, 7 Dec 2022 17:33:07 +0100
Subject: [PATCH 2/4] feat: Processed comments and added utils for the record
 types we are using now.

Signed-off-by: Tom Lanser <tom@animo.id>
---
 .../src/utils/records/ConnectionUtil.ts       | 27 +++++++++++++++
 .../src/utils/records/CredentialUtil.ts       | 27 +++++++++++++++
 .../src/utils/records/ProofUtil.ts            | 26 ++++++++++++++
 .../src/components/RecordActions.tsx          | 34 +++++++------------
 .../connections/ConnectionsTable.tsx          | 17 +++-------
 .../credentials/CredentialsTable.tsx          | 19 +++--------
 .../src/components/proofs/ProofsTable.tsx     | 16 +++------
 7 files changed, 108 insertions(+), 58 deletions(-)
 create mode 100644 packages/toolbox-core/src/utils/records/ConnectionUtil.ts
 create mode 100644 packages/toolbox-core/src/utils/records/CredentialUtil.ts
 create mode 100644 packages/toolbox-core/src/utils/records/ProofUtil.ts

diff --git a/packages/toolbox-core/src/utils/records/ConnectionUtil.ts b/packages/toolbox-core/src/utils/records/ConnectionUtil.ts
new file mode 100644
index 0000000..0fcb5d8
--- /dev/null
+++ b/packages/toolbox-core/src/utils/records/ConnectionUtil.ts
@@ -0,0 +1,27 @@
+import type { ConnectionRecord } from '@aries-framework/core'
+
+import { DidExchangeState } from '@aries-framework/core'
+
+interface ConnectionActions {
+  isAcceptable: boolean
+}
+
+export class ConnectionUtil {
+  private static loadingStates: DidExchangeState[] = [
+    DidExchangeState.ResponseSent,
+    DidExchangeState.RequestSent,
+    DidExchangeState.InvitationSent,
+  ]
+
+  public static acceptStates: DidExchangeState[] = [DidExchangeState.InvitationReceived]
+
+  public static isConnectionWaitingForResponse(connection: ConnectionRecord): boolean {
+    return ConnectionUtil.loadingStates.includes(connection.state)
+  }
+
+  public static isConnectionWaitingForInput(connection: ConnectionRecord): ConnectionActions {
+    return {
+      isAcceptable: ConnectionUtil.acceptStates.includes(connection.state),
+    }
+  }
+}
diff --git a/packages/toolbox-core/src/utils/records/CredentialUtil.ts b/packages/toolbox-core/src/utils/records/CredentialUtil.ts
new file mode 100644
index 0000000..d183bf2
--- /dev/null
+++ b/packages/toolbox-core/src/utils/records/CredentialUtil.ts
@@ -0,0 +1,27 @@
+import type { CredentialExchangeRecord } from '@aries-framework/core'
+
+import { CredentialState } from '@aries-framework/core'
+
+interface CredentialActions {
+  isAcceptable: boolean
+  isDeclineable: boolean
+}
+
+export class CredentialUtil {
+  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 CredentialUtil.loadingStates.includes(credential.state)
+  }
+
+  public static isCredentialWaitingForInput(credential: CredentialExchangeRecord): CredentialActions {
+    return {
+      isAcceptable: CredentialUtil.acceptStates.includes(credential.state),
+      isDeclineable: CredentialUtil.declineStates.includes(credential.state),
+    }
+  }
+}
diff --git a/packages/toolbox-core/src/utils/records/ProofUtil.ts b/packages/toolbox-core/src/utils/records/ProofUtil.ts
new file mode 100644
index 0000000..4cb9e3a
--- /dev/null
+++ b/packages/toolbox-core/src/utils/records/ProofUtil.ts
@@ -0,0 +1,26 @@
+import type { ProofExchangeRecord } from '@aries-framework/core'
+
+import { ProofState } from '@aries-framework/core'
+
+interface ProofActions {
+  isAcceptable: boolean
+  isDeclineable: boolean
+}
+
+export class ProofUtil {
+  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 ProofUtil.loadingStates.includes(proof.state)
+  }
+
+  public static isProofWaitingForInput(proof: ProofExchangeRecord): ProofActions {
+    return {
+      isAcceptable: ProofUtil.acceptStates.includes(proof.state),
+      isDeclineable: ProofUtil.declineStates.includes(proof.state),
+    }
+  }
+}
diff --git a/packages/toolbox-ui/src/components/RecordActions.tsx b/packages/toolbox-ui/src/components/RecordActions.tsx
index 852aa02..e06e297 100644
--- a/packages/toolbox-ui/src/components/RecordActions.tsx
+++ b/packages/toolbox-ui/src/components/RecordActions.tsx
@@ -6,37 +6,29 @@ interface RecordActionsProps {
   onDelete?: () => void
   onDecline?: () => void
   onAccept?: () => void
-
-  isDeclineable?: boolean
-  isAcceptable?: boolean
   isLoading?: boolean
 }
 
-export const RecordActions = ({
-  isAcceptable,
-  onAccept,
-  onDecline,
-  isDeclineable,
-  onDelete,
-  isLoading,
-}: RecordActionsProps) => {
+export const RecordActions = ({ onAccept, onDecline, onDelete, isLoading }: RecordActionsProps) => {
   const actions = [
-    isAcceptable ? (
-      <ActionIcon key="accept" color="green">
-        <IconCheck size={16} stroke={1.5} onClick={onAccept} />
+    onAccept && (
+      <ActionIcon key="accept" color="green" onClick={onAccept}>
+        <IconCheck size={16} stroke={1.5} />
       </ActionIcon>
-    ) : null,
+    ),
 
-    isDeclineable ? (
+    onDecline && (
       <ActionIcon key="reject" color="red" onClick={onDecline}>
         <IconX size={16} stroke={1.5} />
       </ActionIcon>
-    ) : null,
+    ),
 
-    <ActionIcon key="delete" color="red" onClick={onDelete}>
-      <IconTrash 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">
diff --git a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
index 29e4339..3594a87 100644
--- a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
+++ b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
@@ -1,6 +1,6 @@
 import type { ConnectionRecord } from '@aries-framework/core'
 
-import { DidExchangeState } from '@aries-framework/core'
+import { ConnectionUtil } from '@animo/toolbox-core/src/utils/records/ConnectionUtil'
 import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
@@ -28,15 +28,9 @@ export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTab
           </tr>
         </thead>
         <tbody>
-          {records.map((record) => {
-            const recordState = record.state
-
-            const isLoading =
-              recordState === DidExchangeState.RequestSent ||
-              recordState === DidExchangeState.ResponseSent ||
-              recordState === DidExchangeState.InvitationSent
-
-            const isAcceptable = recordState === DidExchangeState.InvitationReceived
+          {records.map((record: ConnectionRecord) => {
+            const isLoading = ConnectionUtil.isConnectionWaitingForResponse(record)
+            const { isAcceptable } = ConnectionUtil.isConnectionWaitingForInput(record)
 
             return (
               <tr key={record.id}>
@@ -60,10 +54,9 @@ export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTab
                 </td>
                 <td>
                   <RecordActions
-                    onAccept={() => onAccept(record)}
+                    onAccept={isAcceptable ? () => onAccept(record) : undefined}
                     onDelete={() => onDelete(record)}
                     isLoading={isLoading}
-                    isAcceptable={isAcceptable}
                   />
                 </td>
               </tr>
diff --git a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
index cb35912..a98a4d9 100644
--- a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
+++ b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
@@ -1,6 +1,6 @@
 import type { ConnectionRecord, CredentialExchangeRecord } from '@aries-framework/core'
 
-import { CredentialState } from '@aries-framework/core'
+import { CredentialUtil } from '@animo/toolbox-core/src/utils/records/CredentialUtil'
 import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
@@ -32,15 +32,8 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
         <tbody>
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id == record.connectionId)
-
-            const recordState = record.state
-
-            const isLoading = recordState === CredentialState.RequestSent || recordState === CredentialState.OfferSent
-
-            const isDeclineable = recordState === CredentialState.OfferReceived
-
-            const isAcceptable =
-              recordState === CredentialState.OfferReceived || recordState === CredentialState.CredentialReceived
+            const isLoading = CredentialUtil.isCredentialWaitingForResponse(record)
+            const { isDeclineable, isAcceptable } = CredentialUtil.isCredentialWaitingForInput(record)
 
             return (
               <tr key={record.id}>
@@ -64,11 +57,9 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
                 </td>
                 <td>
                   <RecordActions
-                    onDecline={() => onDecline(record)}
-                    onAccept={() => onAccept(record)}
+                    onAccept={isAcceptable ? () => onAccept(record) : undefined}
+                    onDecline={isDeclineable ? () => onDecline(record) : undefined}
                     onDelete={() => onDelete(record)}
-                    isAcceptable={isAcceptable}
-                    isDeclineable={isDeclineable}
                     isLoading={isLoading}
                   />
                 </td>
diff --git a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
index 862f917..d7b0cd1 100644
--- a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
+++ b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
@@ -1,5 +1,6 @@
 import type { ConnectionRecord, ProofExchangeRecord } from '@aries-framework/core'
 
+import { ProofUtil } from '@animo/toolbox-core/src/utils/records/ProofUtil'
 import { ProofState } from '@aries-framework/core'
 import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
@@ -32,13 +33,8 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept, onDeclin
         <tbody>
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id === record.connectionId)
-            const recordState = record.state
-
-            const isDeclineable = recordState === ProofState.RequestReceived
-
-            const isAcceptable = recordState === ProofState.RequestReceived
-
-            const isLoading = recordState === ProofState.PresentationSent || recordState === ProofState.RequestSent
+            const isLoading = ProofUtil.isProofWaitingForResponse(record)
+            const { isDeclineable, isAcceptable } = ProofUtil.isProofWaitingForInput(record)
 
             return (
               <tr key={record.id}>
@@ -63,11 +59,9 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept, onDeclin
                 <td>
                   <Group spacing={0} position="right">
                     <RecordActions
-                      onDecline={() => onDecline(record)}
-                      onAccept={() => onAccept(record)}
+                      onAccept={isAcceptable ? () => onAccept(record) : undefined}
+                      onDecline={isDeclineable ? () => onDecline(record) : undefined}
                       onDelete={() => onDelete(record)}
-                      isAcceptable={isAcceptable}
-                      isDeclineable={isDeclineable}
                       isLoading={isLoading}
                     />
                   </Group>

From c2cdcc06dcd6dca5eb07d803c1d64508005b0145 Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Wed, 7 Dec 2022 18:02:54 +0100
Subject: [PATCH 3/4] fix: Linting removed fragment

Signed-off-by: Tom Lanser <tom@animo.id>
---
 packages/toolbox-ui/src/components/RecordActions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/toolbox-ui/src/components/RecordActions.tsx b/packages/toolbox-ui/src/components/RecordActions.tsx
index e06e297..a78aa6e 100644
--- a/packages/toolbox-ui/src/components/RecordActions.tsx
+++ b/packages/toolbox-ui/src/components/RecordActions.tsx
@@ -32,7 +32,7 @@ export const RecordActions = ({ onAccept, onDecline, onDelete, isLoading }: Reco
 
   return (
     <Group spacing={0} position="right">
-      {isLoading ? <Loader size={20} /> : <>{actions}</>}
+      {isLoading ? <Loader size={20} /> : actions}
     </Group>
   )
 }

From a57ba297aff31dbe85a1bfdb433d49ace2e8b802 Mon Sep 17 00:00:00 2001
From: Tom Lanser <tom@animo.id>
Date: Wed, 7 Dec 2022 18:13:38 +0100
Subject: [PATCH 4/4] refactor: Changed some namings and splitted waiting for
 input function

Signed-off-by: Tom Lanser <tom@animo.id>
---
 .../{ConnectionUtil.ts => ConnectionsUtil.ts} | 14 ++++---------
 .../{CredentialUtil.ts => CredentialsUtil.ts} | 20 ++++++++-----------
 .../records/{ProofUtil.ts => ProofsUtil.ts}   | 20 ++++++++-----------
 .../connections/ConnectionsTable.tsx          |  8 ++++----
 .../credentials/CredentialsTable.tsx          | 11 +++++-----
 .../src/components/proofs/ProofsTable.tsx     | 12 +++++------
 6 files changed, 36 insertions(+), 49 deletions(-)
 rename packages/toolbox-core/src/utils/records/{ConnectionUtil.ts => ConnectionsUtil.ts} (58%)
 rename packages/toolbox-core/src/utils/records/{CredentialUtil.ts => CredentialsUtil.ts} (55%)
 rename packages/toolbox-core/src/utils/records/{ProofUtil.ts => ProofsUtil.ts} (54%)

diff --git a/packages/toolbox-core/src/utils/records/ConnectionUtil.ts b/packages/toolbox-core/src/utils/records/ConnectionsUtil.ts
similarity index 58%
rename from packages/toolbox-core/src/utils/records/ConnectionUtil.ts
rename to packages/toolbox-core/src/utils/records/ConnectionsUtil.ts
index 0fcb5d8..ee514a4 100644
--- a/packages/toolbox-core/src/utils/records/ConnectionUtil.ts
+++ b/packages/toolbox-core/src/utils/records/ConnectionsUtil.ts
@@ -2,11 +2,7 @@ import type { ConnectionRecord } from '@aries-framework/core'
 
 import { DidExchangeState } from '@aries-framework/core'
 
-interface ConnectionActions {
-  isAcceptable: boolean
-}
-
-export class ConnectionUtil {
+export class ConnectionsUtil {
   private static loadingStates: DidExchangeState[] = [
     DidExchangeState.ResponseSent,
     DidExchangeState.RequestSent,
@@ -16,12 +12,10 @@ export class ConnectionUtil {
   public static acceptStates: DidExchangeState[] = [DidExchangeState.InvitationReceived]
 
   public static isConnectionWaitingForResponse(connection: ConnectionRecord): boolean {
-    return ConnectionUtil.loadingStates.includes(connection.state)
+    return ConnectionsUtil.loadingStates.includes(connection.state)
   }
 
-  public static isConnectionWaitingForInput(connection: ConnectionRecord): ConnectionActions {
-    return {
-      isAcceptable: ConnectionUtil.acceptStates.includes(connection.state),
-    }
+  public static isConnectionWaitingForAcceptInput(connection: ConnectionRecord): boolean {
+    return ConnectionsUtil.acceptStates.includes(connection.state)
   }
 }
diff --git a/packages/toolbox-core/src/utils/records/CredentialUtil.ts b/packages/toolbox-core/src/utils/records/CredentialsUtil.ts
similarity index 55%
rename from packages/toolbox-core/src/utils/records/CredentialUtil.ts
rename to packages/toolbox-core/src/utils/records/CredentialsUtil.ts
index d183bf2..12ab9b2 100644
--- a/packages/toolbox-core/src/utils/records/CredentialUtil.ts
+++ b/packages/toolbox-core/src/utils/records/CredentialsUtil.ts
@@ -2,12 +2,7 @@ import type { CredentialExchangeRecord } from '@aries-framework/core'
 
 import { CredentialState } from '@aries-framework/core'
 
-interface CredentialActions {
-  isAcceptable: boolean
-  isDeclineable: boolean
-}
-
-export class CredentialUtil {
+export class CredentialsUtil {
   private static loadingStates: CredentialState[] = [CredentialState.RequestSent, CredentialState.OfferSent]
 
   private static acceptStates: CredentialState[] = [CredentialState.OfferReceived, CredentialState.CredentialReceived]
@@ -15,13 +10,14 @@ export class CredentialUtil {
   private static declineStates: CredentialState[] = [CredentialState.OfferReceived]
 
   public static isCredentialWaitingForResponse(credential: CredentialExchangeRecord): boolean {
-    return CredentialUtil.loadingStates.includes(credential.state)
+    return CredentialsUtil.loadingStates.includes(credential.state)
+  }
+
+  public static isCredentialWaitingForAcceptInput(credential: CredentialExchangeRecord): boolean {
+    return CredentialsUtil.acceptStates.includes(credential.state)
   }
 
-  public static isCredentialWaitingForInput(credential: CredentialExchangeRecord): CredentialActions {
-    return {
-      isAcceptable: CredentialUtil.acceptStates.includes(credential.state),
-      isDeclineable: CredentialUtil.declineStates.includes(credential.state),
-    }
+  public static isCredentialWaitingForDeclineInput(credential: CredentialExchangeRecord): boolean {
+    return CredentialsUtil.declineStates.includes(credential.state)
   }
 }
diff --git a/packages/toolbox-core/src/utils/records/ProofUtil.ts b/packages/toolbox-core/src/utils/records/ProofsUtil.ts
similarity index 54%
rename from packages/toolbox-core/src/utils/records/ProofUtil.ts
rename to packages/toolbox-core/src/utils/records/ProofsUtil.ts
index 4cb9e3a..7455b51 100644
--- a/packages/toolbox-core/src/utils/records/ProofUtil.ts
+++ b/packages/toolbox-core/src/utils/records/ProofsUtil.ts
@@ -2,25 +2,21 @@ import type { ProofExchangeRecord } from '@aries-framework/core'
 
 import { ProofState } from '@aries-framework/core'
 
-interface ProofActions {
-  isAcceptable: boolean
-  isDeclineable: boolean
-}
-
-export class ProofUtil {
+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 ProofUtil.loadingStates.includes(proof.state)
+    return ProofsUtil.loadingStates.includes(proof.state)
+  }
+
+  public static isProofWaitingForAcceptInput(proof: ProofExchangeRecord): boolean {
+    return ProofsUtil.acceptStates.includes(proof.state)
   }
 
-  public static isProofWaitingForInput(proof: ProofExchangeRecord): ProofActions {
-    return {
-      isAcceptable: ProofUtil.acceptStates.includes(proof.state),
-      isDeclineable: ProofUtil.declineStates.includes(proof.state),
-    }
+  public static isProofWaitingForDeclineInput(proof: ProofExchangeRecord): boolean {
+    return ProofsUtil.declineStates.includes(proof.state)
   }
 }
diff --git a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
index 3594a87..df2b8f3 100644
--- a/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
+++ b/packages/toolbox-ui/src/components/connections/ConnectionsTable.tsx
@@ -1,6 +1,6 @@
 import type { ConnectionRecord } from '@aries-framework/core'
 
-import { ConnectionUtil } from '@animo/toolbox-core/src/utils/records/ConnectionUtil'
+import { ConnectionsUtil } from '@animo/toolbox-core/src/utils/records/ConnectionsUtil'
 import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
@@ -29,8 +29,8 @@ export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTab
         </thead>
         <tbody>
           {records.map((record: ConnectionRecord) => {
-            const isLoading = ConnectionUtil.isConnectionWaitingForResponse(record)
-            const { isAcceptable } = ConnectionUtil.isConnectionWaitingForInput(record)
+            const isLoading = ConnectionsUtil.isConnectionWaitingForResponse(record)
+            const isWaitingForAccept = ConnectionsUtil.isConnectionWaitingForAcceptInput(record)
 
             return (
               <tr key={record.id}>
@@ -54,7 +54,7 @@ export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTab
                 </td>
                 <td>
                   <RecordActions
-                    onAccept={isAcceptable ? () => onAccept(record) : undefined}
+                    onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
                     onDelete={() => onDelete(record)}
                     isLoading={isLoading}
                   />
diff --git a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
index a98a4d9..b641df4 100644
--- a/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
+++ b/packages/toolbox-ui/src/components/credentials/CredentialsTable.tsx
@@ -1,6 +1,6 @@
 import type { ConnectionRecord, CredentialExchangeRecord } from '@aries-framework/core'
 
-import { CredentialUtil } from '@animo/toolbox-core/src/utils/records/CredentialUtil'
+import { CredentialsUtil } from '@animo/toolbox-core/src/utils/records/CredentialsUtil'
 import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
@@ -32,8 +32,9 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
         <tbody>
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id == record.connectionId)
-            const isLoading = CredentialUtil.isCredentialWaitingForResponse(record)
-            const { isDeclineable, isAcceptable } = CredentialUtil.isCredentialWaitingForInput(record)
+            const isLoading = CredentialsUtil.isCredentialWaitingForResponse(record)
+            const isWaitingForAccept = CredentialsUtil.isCredentialWaitingForAcceptInput(record)
+            const isWaitingForDecline = CredentialsUtil.isCredentialWaitingForDeclineInput(record)
 
             return (
               <tr key={record.id}>
@@ -57,8 +58,8 @@ export const CredentialsTable = ({ records, connections, onDelete, onAccept, onD
                 </td>
                 <td>
                   <RecordActions
-                    onAccept={isAcceptable ? () => onAccept(record) : undefined}
-                    onDecline={isDeclineable ? () => onDecline(record) : undefined}
+                    onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
+                    onDecline={isWaitingForDecline ? () => onDecline(record) : undefined}
                     onDelete={() => onDelete(record)}
                     isLoading={isLoading}
                   />
diff --git a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
index d7b0cd1..fd30491 100644
--- a/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
+++ b/packages/toolbox-ui/src/components/proofs/ProofsTable.tsx
@@ -1,7 +1,6 @@
 import type { ConnectionRecord, ProofExchangeRecord } from '@aries-framework/core'
 
-import { ProofUtil } from '@animo/toolbox-core/src/utils/records/ProofUtil'
-import { ProofState } from '@aries-framework/core'
+import { ProofsUtil } from '@animo/toolbox-core/src/utils/records/ProofsUtil'
 import { Badge, Group, ScrollArea, Table, Text, useMantineTheme } from '@mantine/core'
 import React from 'react'
 
@@ -33,8 +32,9 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept, onDeclin
         <tbody>
           {records.map((record) => {
             const connection = connections.find((connection) => connection.id === record.connectionId)
-            const isLoading = ProofUtil.isProofWaitingForResponse(record)
-            const { isDeclineable, isAcceptable } = ProofUtil.isProofWaitingForInput(record)
+            const isLoading = ProofsUtil.isProofWaitingForResponse(record)
+            const isWaitingForAccept = ProofsUtil.isProofWaitingForAcceptInput(record)
+            const isWaitingForDecline = ProofsUtil.isProofWaitingForDeclineInput(record)
 
             return (
               <tr key={record.id}>
@@ -59,8 +59,8 @@ export const ProofsTable = ({ records, connections, onDelete, onAccept, onDeclin
                 <td>
                   <Group spacing={0} position="right">
                     <RecordActions
-                      onAccept={isAcceptable ? () => onAccept(record) : undefined}
-                      onDecline={isDeclineable ? () => onDecline(record) : undefined}
+                      onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
+                      onDecline={isWaitingForDecline ? () => onDecline(record) : undefined}
                       onDelete={() => onDelete(record)}
                       isLoading={isLoading}
                     />