Merge pull request #56 from animo/feature/TBX-50

feat: Possibility to create invite with QR generation and clipboard support

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

@@ -9,7 +9,12 @@ export class ConnectionsUtil {
     DidExchangeState.InvitationSent,
   ]
 
-  public static acceptStates: DidExchangeState[] = [DidExchangeState.InvitationReceived]
+  public static acceptStates: DidExchangeState[] = [
+    DidExchangeState.InvitationReceived,
+    DidExchangeState.RequestReceived,
+  ]
+
+  public static declineStates: DidExchangeState[] = [DidExchangeState.RequestReceived]
 
   public static isConnectionWaitingForResponse(connection: ConnectionRecord): boolean {
     return ConnectionsUtil.loadingStates.includes(connection.state)
@@ -18,4 +23,8 @@ export class ConnectionsUtil {
   public static isConnectionWaitingForAcceptInput(connection: ConnectionRecord): boolean {
     return ConnectionsUtil.acceptStates.includes(connection.state)
   }
+
+  public static isConnectionWaitingForDeclineInput(connection: ConnectionRecord): boolean {
+    return ConnectionsUtil.declineStates.includes(connection.state)
+  }
 }

packages/toolbox-ui/package.json

@@ -29,8 +29,10 @@
     "@mantine/core": "^5.7.1",
     "@mantine/form": "^5.7.2",
     "@mantine/hooks": "^5.7.2",
+    "@mantine/modals": "^5.10.0",
     "@mantine/notifications": "^5.8.4",
     "@tabler/icons": "^1.111.0",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3"

packages/toolbox-ui/src/ToolboxApp.tsx

@@ -2,12 +2,14 @@ import type { ColorScheme, MantineThemeOverride } from '@mantine/core'
 import type { RouterProviderProps } from 'react-router-dom'
 
 import { ColorSchemeProvider, MantineProvider } from '@mantine/core'
+import { ModalsProvider } from '@mantine/modals'
 import { NotificationsProvider } from '@mantine/notifications'
 import React from 'react'
 import { RouterProvider } from 'react-router-dom'
 
 import { GlobalErrorHandler } from './components/GlobalErrorHandler'
 import { useConfigUnsafe } from './contexts/ConfigProvider'
+import { PresentInviteModal } from './modals/PresentInviteModal'
 
 interface ToolboxAppProps {
   router: RouterProviderProps['router']
@@ -40,9 +42,11 @@ export const ToolboxApp = ({ router }: ToolboxAppProps) => {
     <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
       <MantineProvider withGlobalStyles withNormalizeCSS theme={toolboxTheme(colorScheme)}>
         <NotificationsProvider position="top-right">
-          <GlobalErrorHandler>
-            <RouterProvider router={router} />
-          </GlobalErrorHandler>
+          <ModalsProvider modals={{ presentInvite: PresentInviteModal }}>
+            <GlobalErrorHandler>
+              <RouterProvider router={router} />
+            </GlobalErrorHandler>
+          </ModalsProvider>
         </NotificationsProvider>
       </MantineProvider>
     </ColorSchemeProvider>

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

@@ -11,6 +11,7 @@ interface ConnectionsTableProps {
   records: ConnectionRecord[]
   onDelete: (connection: ConnectionRecord) => void
   onAccept: (connection: ConnectionRecord) => void
+  onDecline: (connection: ConnectionRecord) => void
 }
 
 const useStyles = createStyles(() => ({
@@ -33,7 +34,7 @@ const useStyles = createStyles(() => ({
   },
 }))
 
-export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTableProps) => {
+export const ConnectionsTable = ({ records, onDelete, onAccept, onDecline }: ConnectionsTableProps) => {
   const { classes } = useStyles()
   const theme = useMantineTheme()
 
@@ -52,6 +53,7 @@ export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTab
           {records.map((record: ConnectionRecord) => {
             const isLoading = ConnectionsUtil.isConnectionWaitingForResponse(record)
             const isWaitingForAccept = ConnectionsUtil.isConnectionWaitingForAcceptInput(record)
+            const isWaitingForDecline = ConnectionsUtil.isConnectionWaitingForDeclineInput(record)
 
             return (
               <tr key={record.id}>
@@ -76,6 +78,7 @@ export const ConnectionsTable = ({ records, onDelete, onAccept }: ConnectionsTab
                 <td className={classes.actionsSize}>
                   <RecordActions
                     onAccept={isWaitingForAccept ? () => onAccept(record) : undefined}
+                    onDecline={isWaitingForDecline ? () => onDecline(record) : undefined}
                     onDelete={() => onDelete(record)}
                     isLoading={isLoading}
                   />

packages/toolbox-ui/src/modals/PresentInviteModal.tsx

@@ -0,0 +1,49 @@
+import type { ContextModalProps } from '@mantine/modals'
+
+import { Box, Center, createStyles, Divider, Text } from '@mantine/core'
+import { showNotification } from '@mantine/notifications'
+import { QRCodeSVG } from 'qrcode.react'
+import React from 'react'
+
+import { PrimaryButton } from '../components/generic'
+
+const useStyles = createStyles((theme) => ({
+  qrCode: {
+    borderRadius: theme.radius.sm,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[0] : theme.white,
+    padding: theme.spacing.xs,
+  },
+}))
+
+export const PresentInviteModal = ({ innerProps }: ContextModalProps<{ inviteUrl: string }>) => {
+  const { classes } = useStyles()
+  const { inviteUrl } = innerProps
+
+  const copyToClipboard = async () => {
+    await window.navigator.clipboard.writeText(inviteUrl)
+
+    showNotification({
+      title: 'Invitation copied to clipboard',
+      message: 'You can now use it how you like',
+    })
+  }
+
+  return (
+    <>
+      <Center>
+        <Box className={classes.qrCode}>
+          <Box h={250} w={250}>
+            <QRCodeSVG value={inviteUrl} size={250} />
+          </Box>
+        </Box>
+      </Center>
+      <Text mt="xs" align="center">
+        Scan this QR code with your mobile device.
+      </Text>
+      <Divider label="OR" labelPosition="center" mb="xs" />
+      <PrimaryButton fullWidth onClick={copyToClipboard}>
+        Copy url
+      </PrimaryButton>
+    </>
+  )
+}

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

@@ -1,10 +1,13 @@
 import { useAgent, useConnections } from '@aries-framework/react-hooks'
 import { Button, Flex, TextInput, Title } from '@mantine/core'
 import { useForm } from '@mantine/form'
+import { openContextModal } from '@mantine/modals'
+import { showNotification } from '@mantine/notifications'
 import React from 'react'
 
 import { Loading } from '../../../components/Loading'
 import { ConnectionsTable } from '../../../components/connections/ConnectionsTable'
+import { PrimaryButton } from '../../../components/generic'
 
 interface ConnectionInviteValues {
   url: string
@@ -23,6 +26,33 @@ export const ConnectionsScreen = () => {
     await agent?.connections.acceptRequest(connectionId)
   }
 
+  const declineRequest = async (connectionId: string) => {
+    await agent?.connections.deleteById(connectionId)
+  }
+
+  const createInvite = async () => {
+    const invite = await agent?.oob.createLegacyInvitation()
+
+    if (!invite) {
+      showNotification({
+        title: 'Error',
+        message: 'Could not create invitation',
+        color: 'red',
+      })
+      return
+    }
+
+    const url = invite.invitation.toUrl({ domain: 'https://example.com' })
+
+    openContextModal({
+      modal: 'presentInvite',
+      title: 'Connection invitation',
+      innerProps: {
+        inviteUrl: url,
+      },
+    })
+  }
+
   return (
     <>
       <Title size="h2" mb={20}>
@@ -32,6 +62,7 @@ export const ConnectionsScreen = () => {
         <Flex gap={10} mb={20}>
           <TextInput placeholder="Invite url" {...form.getInputProps('url')} />
           <Button type="submit">Receive invite</Button>
+          <PrimaryButton onClick={() => createInvite()}>Create Invite</PrimaryButton>
         </Flex>
       </form>
       <div>
@@ -42,6 +73,7 @@ export const ConnectionsScreen = () => {
             records={connectionRecords}
             onDelete={(connection) => agent?.connections.deleteById(connection.id)}
             onAccept={(connection) => acceptRequest(connection.id)}
+            onDecline={(connection) => declineRequest(connection.id)}
           />
         )}
       </div>

yarn.lock

@@ -1464,6 +1464,13 @@
   resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-5.7.2.tgz#29ffa4f68c61145dd091e07763854c4624e254f9"
   integrity sha512-g+fxcnQwEeVM/5h+SAX/rDNL2s1652DGbP4xxfNg6yFqqhQzmtxQN7xsmkZ+ffx8wKhbsP5z13x6WZoxuJQh9Q==
 
+"@mantine/modals@^5.10.0":
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/@mantine/modals/-/modals-5.10.0.tgz#b02cadfd875375eeea87f7135848fc0d1bbe869c"
+  integrity sha512-SP9mPoa7FlfGkVzjVMUZ36i7YmYMh7p/9CoeWT/0Rcy7WmOfotNBbs/H/9CXdMNVNZTkehEeHoKeVy9oEkk2zg==
+  dependencies:
+    "@mantine/utils" "5.10.0"
+
 "@mantine/notifications@^5.8.4":
   version "5.8.4"
   resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-5.8.4.tgz#87a7edba7e39393226cb9b5a385c4f45afff94b9"
@@ -1480,6 +1487,11 @@
     clsx "1.1.1"
     csstype "3.0.9"
 
+"@mantine/[email protected]":
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-5.10.0.tgz#d77bdbd4fbf0ef7b10dd0c6480ce9a035dd31ae9"
+  integrity sha512-mHnNm0ajIa8qLAIEwv82N6+7YKecynOA3I8vzgBHXS2x4HwGsHITFYGmMh2LNpx5dRL034tObfEFYZXqncyEDw==
+
 "@mantine/[email protected]":
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-5.7.1.tgz#d6890be0650cdd499afd2d954713901672d15711"
@@ -8201,6 +8213,11 @@ pvutils@^1.1.3:
   resolved "https://registry.yarnpkg.com/pvutils/-/pvutils-1.1.3.tgz#f35fc1d27e7cd3dfbd39c0826d173e806a03f5a3"
   integrity sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==
 
+qrcode.react@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+  integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
+
 [email protected]:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"