feat: Create + Send SDR request

examples/react-graphql/client/src/components/Credential/Credential.tsx

@@ -39,9 +39,7 @@ const Component: React.FC<Props> = ({ onClick, detailMode, fields, jwt, iss, sub
           return (
             <Box mb={1} key={i}>
               <Box>
-                <Text caps fontSize={1}>
-                  {S.String.titleize(field.type)}
-                </Text>
+                <Text fontSize={1}>{S.String.titleize(field.type)}</Text>
               </Box>
               <Box justifyContent={'flex-start'}>
                 {fieldValueImage ? (

examples/react-graphql/client/src/layout/Page.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { Box, Heading } from 'rimble-ui'
 
-const Component = (props: any) => {
+interface Props {
+  padding?: number
+  title: string
+}
+
+const Component: React.FC<Props> = ({ padding, children, title }) => {
   return (
     <>
       <Box
@@ -13,10 +18,10 @@ const Component = (props: any) => {
         display={'flex'}
         justifyContent={'space-between'}
       >
-        <Heading as={'h4'}>{props.title}</Heading>
+        <Heading as={'h4'}>{title}</Heading>
       </Box>
-      <Box flex={1} pb={64} className={'scroll-container'}>
-        {props.children}
+      <Box p={padding} flex={1} pb={64} className={'scroll-container'}>
+        {children}
       </Box>
     </>
   )

examples/react-graphql/client/src/queries.ts

@@ -65,6 +65,12 @@ export const actionSignVc = gql`
     actionSignVc(did: $did, data: $data)
   }
 `
+
+export const actionSignSDR = gql`
+  mutation signSDR($did: String!, $data: SDRInput!) {
+    actionSignSDR(did: $did, data: $data)
+  }
+`
 export const actionSendJwt = gql`
   mutation actionSendJwt($from: String!, $to: String!, $jwt: String!) {
     actionSendJwt(from: $from, to: $to, jwt: $jwt)

examples/react-graphql/client/src/views/Request/Request.tsx

@@ -1,9 +1,207 @@
-import React from 'react'
-import { Box, Heading } from 'rimble-ui'
+import React, { useState, useContext } from 'react'
+import { Box, Button, Field, Text, Form, Flex, Input, Loader, Checkbox } from 'rimble-ui'
 import Page from '../../layout/Page'
+import Panel from '../../components/Panel/Panel'
+import { AppContext } from '../../context/AppProvider'
+import { useQuery, useMutation } from '@apollo/react-hooks'
+import * as queries from '../../queries'
+
+declare global {
+  interface Window {
+    toastProvider: any
+  }
+}
 
 const Component = () => {
-  return <Page title={'Request Data'}></Page>
+  const [appState] = useContext(AppContext)
+  const [isSending, setIsSending] = useState(false)
+  const [receiver, setReceiver] = useState('did:web:uport.me')
+  const [claims, updateClaims] = useState<any>([])
+  const [claimType, updateClaimType] = useState()
+  const [claimReason, updateClaimReason] = useState()
+  const [claimTypeRequired, updateClaimTypeRequired] = useState(false)
+  const [jwt, setJwt] = useState()
+  const [actionSendJwt] = useMutation(queries.actionSendJwt, {
+    onCompleted: response => {
+      if (response && response.actionSendJwt) {
+        setIsSending(false)
+        window.toastProvider.addMessage('Request sent!', { variant: 'success' })
+      }
+    },
+  })
+
+  const [actionSignSDR] = useMutation(queries.actionSignSDR, {
+    onCompleted: response => {
+      if (response && response.actionSignSDR) {
+        setJwt(response.actionSignSDR)
+        setIsSending(true)
+
+        if (receiver) {
+          setIsSending(true)
+
+          actionSendJwt({
+            variables: {
+              from: appState.defaultDid,
+              to: receiver,
+              jwt: response.actionSignSDR,
+            },
+          })
+        }
+      }
+    },
+  })
+
+  const addClaimField = (type: string, reason: string, essential: boolean) => {
+    const field = {
+      claimType: type,
+      reason,
+      essential,
+    }
+    const updatedClaims = claims.concat([field])
+    updateClaims(updatedClaims)
+    updateClaimType('')
+    updateClaimReason('')
+    updateClaimTypeRequired(false)
+  }
+
+  const removeClaimField = (index: number) => {
+    const updatedClaims = claims.filter((item: any, i: number) => i !== index)
+    updateClaims(updatedClaims)
+  }
+
+  const sendRequest = () => {
+    actionSignSDR({
+      variables: {
+        did: appState.defaultDid,
+        data: {
+          tag: 'tag-' + Date.now().toString(),
+          sub: receiver || null,
+          claims: claims,
+        },
+      },
+    })
+  }
+
+  return (
+    <Page title={'Request'} padding={3}>
+      <Panel heading={'Selective disclosure request'}>
+        <Box p={3}>
+          <Flex mx={-3} flexWrap={'wrap'}>
+            <Box width={1} px={3}>
+              <Field label="Sender" width={1}>
+                <Input
+                  border={0}
+                  type="text"
+                  disabled
+                  required
+                  backgroundColor={'#313131'}
+                  value={appState.defaultDid}
+                  spellCheck={false}
+                  width={1}
+                />
+              </Field>
+            </Box>
+          </Flex>
+
+          <Flex mx={-3} flexWrap={'wrap'}>
+            <Box width={1} px={3}>
+              <Field label="Receiver" width={1}>
+                <Input
+                  spellCheck={false}
+                  border={0}
+                  type="text"
+                  required
+                  backgroundColor={'#313131'}
+                  value={receiver}
+                  onChange={(e: any) => setReceiver(e.target.value)}
+                  width={1}
+                />
+              </Field>
+            </Box>
+          </Flex>
+
+          <Flex mx={-3} flexWrap={'wrap'}>
+            <Box width={[1, 1, 1 / 2]} px={3}>
+              <Field label="Claim type" width={1}>
+                <Input
+                  type="text"
+                  required
+                  border={0}
+                  backgroundColor={'#313131'}
+                  value={claimType}
+                  onChange={(e: any) => updateClaimType(e.target.value)}
+                  width={1}
+                  placeholder={'name'}
+                />
+              </Field>
+            </Box>
+            <Box width={[1, 1, 1 / 2]} px={3}>
+              <Field label="Claim reason" width={1}>
+                <Form.Input
+                  type="text"
+                  border={0}
+                  backgroundColor={'#313131'}
+                  value={claimReason}
+                  onChange={(e: any) => updateClaimReason(e.target.value)}
+                  width={1}
+                  placeholder={'We need this'}
+                />
+              </Field>
+            </Box>
+          </Flex>
+
+          <Flex mx={-3} flexWrap={'wrap'}>
+            <Box px={3}>
+              <Button
+                variant={'success'}
+                disabled={!claimType}
+                small
+                onClick={() => addClaimField(claimType, claimReason, claimTypeRequired)}
+              >
+                Add
+              </Button>
+            </Box>
+            <Box px={3}>
+              <Checkbox
+                label="Required"
+                my={2}
+                checked={claimTypeRequired}
+                onClick={() => updateClaimTypeRequired(!claimTypeRequired)}
+              />
+            </Box>
+          </Flex>
+
+          <Box py={3}>
+            {claims.map((c: any, i: number) => {
+              return (
+                <Box key={i} borderRadius={5} p={3} bg={'#1C1C1C'} mb={3}>
+                  <Text fontSize={1} fontFamily={'Monaco, Lucida Console'} color={'#8a8a8a'}>
+                    {c.claimType}
+                  </Text>
+                  <Text fontSize={1} fontFamily={'Monaco, Lucida Console'} color={'#8a8a8a'}>
+                    {c.reason}
+                  </Text>
+                  <Text fontSize={1} fontFamily={'Monaco, Lucida Console'} color={'#8a8a8a'}>
+                    {c.essential ? 'Required' : 'Not Required'}
+                  </Text>
+                </Box>
+              )
+            })}
+          </Box>
+
+          <Flex flexWrap={'wrap'}>
+            {isSending ? (
+              <Loader size="40px" />
+            ) : (
+              <Button onClick={() => sendRequest()} disabled={claims.length === 0}>
+                Sign and send
+              </Button>
+            )}
+          </Flex>
+        </Box>
+      </Panel>
+    </Page>
+  )
 }
 
 export default Component