feat: added configuration options to K-menu

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/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/OnboardingPage.tsx

@@ -41,7 +41,6 @@ export const OnboardingPage: React.FC = () => {
       dispatch(fetchAllUseCasesByCharId(currentCharacter.id))
       navigate('/dashboard')
     } else {
-      dispatch({ type: 'demo/RESET' })
       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)
@@ -97,6 +98,8 @@ export const AcceptCredential: React.FC<Props> = ({ content, connectionId, crede
     dispatch({ type: 'demo/RESET' })
   }
 
+  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/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
@@ -65,6 +70,6 @@ const connectionSlice = createSlice({
   },
 })
 
-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
@@ -90,6 +95,6 @@ const credentialSlice = createSlice({
   },
 })
 
-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/types.ts

@@ -100,6 +100,11 @@ export interface Entity {
   imageUrl?: string
 }
 
+export interface CreateInvitationProps {
+  entity?: Entity
+  useLegacyInvitations?: boolean
+}
+
 export interface Colors {
   primary: string
   secondary: string

client/src/store/configureStore.tsx

@@ -8,7 +8,7 @@ import rootReducer from '../slices/index'
 export const persistConfig = {
   key: 'redux-store-root',
   storage,
-  whitelist: ['preferences', 'characters', 'onboarding', 'credentials', 'connection'],
+  whitelist: ['preferences', 'configuration', 'characters', 'onboarding', 'credentials', 'connection'],
   version: 4,
 }