feat: added configuration options to K-menu (#109)

Signed-off-by: Jim Ezesinachi <[email protected]>

client/src/App.tsx

@@ -42,7 +42,7 @@ function App() {
     if (connectionDate && lastServerReset) {
       if (connectionDate < lastServerReset) {
         navigate('/')
-        dispatch({ type: 'demo/RESET' })
+        dispatch({ type: 'demo/resetState' })
       }
     }
   }, [connectionDate, lastServerReset])

client/src/api/ConnectionApi.ts

@@ -2,7 +2,15 @@ import type { AxiosResponse } from 'axios'
 
 import { apiCall } from './BaseUrl'
 
-export const createInvitation = (agentName?: string, agentImageUrl?: string): Promise<AxiosResponse> => {
+export const createOobInvitation = (agentName?: string, agentImageUrl?: string): Promise<AxiosResponse> => {
+  return apiCall.post('/oob/create-invitation', {
+    autoAcceptConnection: true,
+    label: agentName,
+    imageUrl: agentImageUrl,
+  })
+}
+
+export const createLegacyInvitation = (agentName?: string, agentImageUrl?: string): Promise<AxiosResponse> => {
   return apiCall.post('/oob/create-legacy-invitation', {
     autoAcceptConnection: true,
     label: agentName,

client/src/api/CredentialApi.ts

@@ -3,9 +3,13 @@ import type { AxiosResponse } from 'axios'
 
 import { apiCall } from './BaseUrl'
 
-export const issueCredential = async (connectionId: string, data: CredentialData): Promise<AxiosResponse> => {
+export const issueCredential = async (
+  connectionId: string,
+  data: CredentialData,
+  protocolVersion: 'v1' | 'v2'
+): Promise<AxiosResponse> => {
   return apiCall.post(`/credentials/offer-credential`, {
-    protocolVersion: 'v1',
+    protocolVersion: protocolVersion,
     connectionId: connectionId,
     credentialFormats: {
       indy: {

client/src/pages/dashboard/DashboardPage.tsx

@@ -62,12 +62,12 @@ export const DashboardPage: React.FC = () => {
   const ERROR_DESCRIPTION = `That's not gone well. Please restart the demo.`
   const routeError = () => {
     navigate('/demo')
-    dispatch({ type: 'demo/RESET' })
+    dispatch({ type: 'demo/resetState' })
   }
 
   const completeDemo = () => {
     navigate('/')
-    dispatch({ type: 'demo/RESET' })
+    dispatch({ type: 'demo/resetState' })
 
     if (currentCharacter)
       trackEvent('demo-character-completed', {

client/src/pages/dashboard/components/ProfileCard.tsx

@@ -22,7 +22,7 @@ export const ProfileCard: React.FC<Props> = ({ currentCharacter }) => {
   before you switch to another character.`
 
   const reset = () => {
-    dispatch({ type: 'demo/RESET' })
+    dispatch({ type: 'demo/resetState' })
   }
 
   const cancel = () => {

client/src/pages/landing/components/MainSection.tsx

@@ -83,6 +83,7 @@ export const MainSection: React.FC = () => {
       </div>
       <div className="flex flex-row justify-start text-base sxl:text-lg  font-normal mt-6">
         <motion.button
+          data-cy="try-demo-button"
           variants={fadeDelay}
           whileHover={buttonHover}
           className="bg-animo-black dark:bg-animo-white text-animo-white dark:text-animo-black py-3 px-5 rounded-lg font-semibold shadow-sm dark:shadow-none select-none "

client/src/pages/onboarding/OnboardingContainer.tsx

@@ -219,7 +219,7 @@ export const OnboardingContainer: React.FC<Props> = ({
       dispatch(fetchAllUseCasesByCharId(currentCharacter.id))
     } else {
       // something went wrong so reset
-      dispatch({ type: 'demo/RESET' })
+      dispatch({ type: 'demo/resetState' })
     }
   }
 
@@ -235,7 +235,7 @@ export const OnboardingContainer: React.FC<Props> = ({
 
   const leave = () => {
     navigate('/')
-    dispatch({ type: 'demo/RESET' })
+    dispatch({ type: 'demo/resetState' })
   }
 
   return (

client/src/pages/onboarding/OnboardingPage.tsx

@@ -41,7 +41,7 @@ export const OnboardingPage: React.FC = () => {
       dispatch(fetchAllUseCasesByCharId(currentCharacter.id))
       navigate('/dashboard')
     } else {
-      dispatch({ type: 'demo/RESET' })
+      dispatch({ type: 'demo/resetState' })
       dispatch(fetchWallets())
       dispatch(fetchAllCharacters())
       setMounted(true)

client/src/pages/onboarding/steps/AcceptCredential.tsx

@@ -49,10 +49,11 @@ export const AcceptCredential: React.FC<Props> = ({ content, connectionId, crede
     (x) => x.state === 'credential-issued' || x.state === 'done'
   )
 
+  let { protocolVersion } = useCredentials()
   useEffect(() => {
     if (credentials.length === 0) {
       currentCharacter.starterCredentials.forEach((item) => {
-        dispatch(issueCredential({ connectionId: connectionId, cred: item }))
+        dispatch(issueCredential({ connectionId: connectionId, cred: item, protocolVersion }))
         trackEvent('credential-issued')
       })
       setCredentialsIssued(true)
@@ -94,9 +95,11 @@ export const AcceptCredential: React.FC<Props> = ({ content, connectionId, crede
 
   const routeError = () => {
     navigate('/demo')
-    dispatch({ type: 'demo/RESET' })
+    dispatch({ type: 'demo/resetState' })
   }
 
+  protocolVersion = useCredentials().protocolVersion
+
   const sendNewCredentials = () => {
     credentials.forEach((cred) => {
       if (cred.state !== 'credential-issued' && cred.state !== 'done') {
@@ -110,7 +113,8 @@ export const AcceptCredential: React.FC<Props> = ({ content, connectionId, crede
           )
         })
 
-        if (newCredential) dispatch(issueCredential({ connectionId: connectionId, cred: newCredential }))
+        if (newCredential)
+          dispatch(issueCredential({ connectionId: connectionId, cred: newCredential, protocolVersion }))
       }
     })
     closeFailedRequestModal()

client/src/pages/onboarding/steps/SetupConnection.tsx

@@ -10,6 +10,7 @@ import { Loader } from '../../../components/Loader'
 import { QRCode } from '../../../components/QRCode'
 import { useAppDispatch } from '../../../hooks/hooks'
 import { useInterval } from '../../../hooks/useInterval'
+import { useConnection } from '../../../slices/connection/connectionSelectors'
 import {
   createInvitation,
   fetchConnectionById,
@@ -36,9 +37,10 @@ export const SetupConnection: React.FC<Props> = ({
 }) => {
   const dispatch = useAppDispatch()
   const isCompleted = connectionState === 'response-sent' || connectionState === 'completed'
+  const { useLegacyInvitations } = useConnection()
 
   useEffect(() => {
-    if (!isCompleted) dispatch(createInvitation())
+    if (!isCompleted) dispatch(createInvitation({ useLegacyInvitations }))
   }, [])
 
   useEffect(() => {

client/src/pages/useCase/steps/StepConnection.tsx

@@ -10,6 +10,7 @@ import { fade, fadeX } from '../../../FramerAnimations'
 import { QRCode } from '../../../components/QRCode'
 import { useAppDispatch } from '../../../hooks/hooks'
 import { useInterval } from '../../../hooks/useInterval'
+import { useConnection } from '../../../slices/connection/connectionSelectors'
 import {
   createInvitation,
   fetchConnectionById,
@@ -27,9 +28,12 @@ export const StepConnection: React.FC<Props> = ({ step, connection, entity }) =>
   const dispatch = useAppDispatch()
   const { id, state, invitationUrl, outOfBandId } = connection
   const isCompleted = state === 'response-sent' || state === 'completed'
+  const { useLegacyInvitations } = useConnection()
 
   useEffect(() => {
-    if (!isCompleted) dispatch(createInvitation(entity))
+    if (!isCompleted) {
+      dispatch(createInvitation({ entity, useLegacyInvitations }))
+    }
   }, [])
 
   useInterval(

client/src/pages/useCase/steps/StepCredential.tsx

@@ -11,6 +11,7 @@ import { ActionCTA } from '../../../components/ActionCTA'
 import { Loader } from '../../../components/Loader'
 import { useAppDispatch } from '../../../hooks/hooks'
 import { useInterval } from '../../../hooks/useInterval'
+import { useCredentials } from '../../../slices/credentials/credentialsSelectors'
 import {
   deleteCredentialById,
   fetchCredentialsByConId,
@@ -42,6 +43,8 @@ export const StepCredential: React.FC<Props> = ({ step, connectionId, issueCrede
   )
   const [issuedCredData, setIssuedCredData] = useState<CredentialData[]>([])
 
+  let { protocolVersion } = useCredentials()
+
   const issueCreds = () => {
     // get attributes from proof
     let attributes: Attribute[] = []
@@ -60,7 +63,7 @@ export const StepCredential: React.FC<Props> = ({ step, connectionId, issueCrede
 
     // issue credentials
     credentialData.forEach((item) => {
-      dispatch(issueCredential({ connectionId: connectionId, cred: item }))
+      dispatch(issueCredential({ connectionId: connectionId, cred: item, protocolVersion }))
       trackEvent('credential-issued')
     })
   }
@@ -76,6 +79,8 @@ export const StepCredential: React.FC<Props> = ({ step, connectionId, issueCrede
     !credentialsAccepted ? 1000 : null
   )
 
+  protocolVersion = useCredentials().protocolVersion
+
   const sendNewCredentials = () => {
     credentials.forEach((cred) => {
       if (cred.state !== 'credential-issued' && cred.state !== 'done') {
@@ -88,7 +93,8 @@ export const StepCredential: React.FC<Props> = ({ step, connectionId, issueCrede
             credClass.metadata.get<CredReqMetadata>('_internal/indyCredential')?.credentialDefinitionId
           )
         })
-        if (newCredential) dispatch(issueCredential({ connectionId: connectionId, cred: newCredential }))
+        if (newCredential)
+          dispatch(issueCredential({ connectionId: connectionId, cred: newCredential, protocolVersion }))
       }
     })
     closeFailedRequestModal()

client/src/slices/characters/charactersSlice.ts

@@ -44,6 +44,9 @@ const characterSlice = createSlice({
         state.isLoading = false
         state.currentCharacter = action.payload
       })
+      .addCase('demo/resetState', () => {
+        return initialState
+      })
   },
 })
 

client/src/slices/connection/connectionSlice.ts

@@ -8,6 +8,7 @@ export interface ConnectionState {
   invitationUrl?: string
   outOfBandId?: string
   isLoading: boolean
+  useLegacyInvitations: boolean
 }
 
 const initialState: ConnectionState = {
@@ -16,6 +17,7 @@ const initialState: ConnectionState = {
   invitationUrl: undefined,
   outOfBandId: undefined,
   isLoading: false,
+  useLegacyInvitations: true,
 }
 
 const connectionSlice = createSlice({
@@ -28,6 +30,9 @@ const connectionSlice = createSlice({
       state.invitationUrl = undefined
       state.isLoading = false
     },
+    setUseLegacyInvitations: (state, action) => {
+      state.useLegacyInvitations = action.payload
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -62,9 +67,15 @@ const connectionSlice = createSlice({
         state.invitationUrl = undefined
         state.isLoading = false
       })
+      .addCase('demo/resetState', (state) => {
+        return {
+          ...initialState,
+          useLegacyInvitations: state.useLegacyInvitations,
+        }
+      })
   },
 })
 
-export const { clearConnection } = connectionSlice.actions
+export const { clearConnection, setUseLegacyInvitations } = connectionSlice.actions
 
 export default connectionSlice.reducer

client/src/slices/connection/connectionThunks.ts

@@ -1,4 +1,4 @@
-import type { Entity } from '../../slices/types'
+import type { CreateInvitationProps } from '../../slices/types'
 
 import { createAsyncThunk } from '@reduxjs/toolkit'
 
@@ -14,7 +14,15 @@ export const fetchConnectionByOutOfBandId = createAsyncThunk('connection/fetchBy
   return response.data
 })
 
-export const createInvitation = createAsyncThunk('connection/createInvitation', async (entity?: Entity) => {
-  const response = await Api.createInvitation(entity?.name, entity?.imageUrl)
-  return response.data
-})
+export const createInvitation = createAsyncThunk(
+  'connection/createInvitation',
+  async (createInvitationOptions?: CreateInvitationProps) => {
+    const entity = createInvitationOptions?.entity
+
+    const response = createInvitationOptions?.useLegacyInvitations
+      ? await Api.createLegacyInvitation(entity?.name, entity?.imageUrl)
+      : await Api.createOobInvitation(entity?.name, entity?.imageUrl)
+
+    return response.data
+  }
+)

client/src/slices/credentials/credentialsSlice.ts

@@ -15,6 +15,7 @@ interface CredentialState {
   issuedCredentials: CredentialExchangeRecord[]
   isLoading: boolean
   isIssueCredentialLoading: boolean
+  protocolVersion: 'v1' | 'v2'
   error: SerializedError | undefined
 }
 
@@ -23,6 +24,7 @@ const initialState: CredentialState = {
   issuedCredentials: [],
   isLoading: true,
   isIssueCredentialLoading: true,
+  protocolVersion: 'v1',
   error: undefined,
 }
 
@@ -36,6 +38,9 @@ const credentialSlice = createSlice({
       )
       state.credentials = []
     },
+    setProtocolVersion: (state, action) => {
+      state.protocolVersion = action.payload
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -87,9 +92,15 @@ const credentialSlice = createSlice({
         state.credentials = []
         state.isLoading = false
       })
+      .addCase('demo/resetState', (state) => {
+        return {
+          ...initialState,
+          protocolVersion: state.protocolVersion,
+        }
+      })
   },
 })
 
-export const { clearCredentials } = credentialSlice.actions
+export const { clearCredentials, setProtocolVersion } = credentialSlice.actions
 
 export default credentialSlice.reducer

client/src/slices/credentials/credentialsThunks.ts

@@ -11,8 +11,8 @@ export const fetchCredentialsByConId = createAsyncThunk('credentials/fetchAllByC
 
 export const issueCredential = createAsyncThunk(
   'credentials/issueCredential',
-  async (data: { connectionId: string; cred: CredentialData }) => {
-    const response = await Api.issueCredential(data.connectionId, data.cred)
+  async (data: { connectionId: string; cred: CredentialData; protocolVersion: 'v1' | 'v2' }) => {
+    const response = await Api.issueCredential(data.connectionId, data.cred, data.protocolVersion)
     return response.data
   }
 )

client/src/slices/onboarding/onboardingSlice.ts

@@ -34,6 +34,11 @@ const onboardingSlice = createSlice({
       state.isCompleted = false
     },
   },
+  extraReducers: (builder) => {
+    builder.addCase('demo/resetState', () => {
+      return initialState
+    })
+  },
 })
 
 export const {

client/src/slices/preferences/preferencesSlice.ts

@@ -50,7 +50,7 @@ const preferencesSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder
-      .addCase('demo/RESET', (state) => {
+      .addCase('demo/resetState', (state) => {
         state.darkMode = localStorage.getItem('theme') === 'dark'
         state.connectionDate = undefined
       })

client/src/slices/proof/proofSlice.ts

@@ -54,6 +54,9 @@ const proofSlice = createSlice({
         state.proof = undefined
         state.isLoading = false
       })
+      .addCase('demo/resetState', () => {
+        return initialState
+      })
   },
 })