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/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 { useConfiguration } from '../../../slices/configuration/configurationSelectors'
 import {
   createInvitation,
   fetchConnectionById,
@@ -36,9 +37,10 @@ export const SetupConnection: React.FC<Props> = ({
 }) => {
   const dispatch = useAppDispatch()
   const isCompleted = connectionState === 'response-sent' || connectionState === 'completed'
+  const { useLegacyInvitation } = useConfiguration()
 
   useEffect(() => {
-    if (!isCompleted) dispatch(createInvitation())
+    if (!isCompleted) dispatch(createInvitation({ useLegacyInvitation }))
   }, [])
 
   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 { useConfiguration } from '../../../slices/configuration/configurationSelectors'
 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 { useLegacyInvitation } = useConfiguration()
 
   useEffect(() => {
-    if (!isCompleted) dispatch(createInvitation(entity))
+    if (!isCompleted) {
+      dispatch(createInvitation({ entity, useLegacyInvitation }))
+    }
   }, [])
 
   useInterval(

client/src/slices/configuration/configurationSelectors.ts

@@ -0,0 +1,5 @@
+import type { RootState } from '../../store/configureStore'
+
+import { useSelector } from 'react-redux'
+
+export const useConfiguration = () => useSelector((state: RootState) => state.configuration)

client/src/slices/configuration/configurationSlice.ts

@@ -0,0 +1,23 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+interface ConfigurationState {
+  useLegacyInvitation: boolean
+}
+
+const initialState: ConfigurationState = {
+  useLegacyInvitation: true,
+}
+
+const configurationSlice = createSlice({
+  name: 'configuration',
+  initialState,
+  reducers: {
+    setLegacyInvitation: (state, action) => {
+      state.useLegacyInvitation = action.payload
+    },
+  },
+})
+
+export const { setLegacyInvitation } = configurationSlice.actions
+
+export default configurationSlice.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?.useLegacyInvitation
+      ? await Api.createLegacyInvitation(entity?.name, entity?.imageUrl)
+      : await Api.createOobInvitation(entity?.name, entity?.imageUrl)
+
+    return response.data
+  }
+)

client/src/slices/index.ts

@@ -1,6 +1,7 @@
 import { combineReducers } from 'redux'
 
 import charactersSlice from './characters/charactersSlice'
+import configurationSlice from './configuration/configurationSlice'
 import connectionSlice from './connection/connectionSlice'
 import credentialsSlice from './credentials/credentialsSlice'
 import onboardingSlice from './onboarding/onboardingSlice'
@@ -19,6 +20,7 @@ const rootReducer = combineReducers({
   credentials: credentialsSlice,
   onboarding: onboardingSlice,
   preferences: preferencesSlice,
+  configuration: configurationSlice,
   proof: proofSlice,
   section: sectionSlice,
   useCases: useCaseSlice,

client/src/slices/types.ts

@@ -100,6 +100,11 @@ export interface Entity {
   imageUrl?: string
 }
 
+export interface CreateInvitationProps {
+  entity?: Entity
+  useLegacyInvitation?: 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,
 }
 

client/src/utils/KBar.tsx

@@ -6,6 +6,7 @@ import Confetti from 'react-confetti'
 import { confettiFade } from '../FramerAnimations'
 import { useAppDispatch } from '../hooks/hooks'
 import { fetchAllCharacters } from '../slices/characters/charactersThunks'
+import { setLegacyInvitation } from '../slices/configuration/configurationSlice'
 import { usePreferences } from '../slices/preferences/preferencesSelectors'
 import { resetDashboard, setDarkMode } from '../slices/preferences/preferencesSlice'
 import { fetchWallets } from '../slices/wallets/walletsThunks'
@@ -63,9 +64,115 @@ export const KBar: React.FunctionComponent<PropsWithChildren> = ({ children }) =
         dispatch(fetchAllCharacters())
       },
     },
+    {
+      id: 'configuration',
+      name: 'Choose demo configuration options...',
+      shortcut: ['o'],
+      keywords: 'configuration',
+      section: 'Configuration',
+    },
+    {
+      id: 'ledger',
+      name: 'Select ledger',
+      keywords: 'ledger',
+      section: '',
+      parent: 'configuration',
+    },
+    {
+      id: 'BCovrin',
+      name: 'BCovrin',
+      keywords: 'BCovrin',
+      section: '',
+      perform: () => {
+        alert('BCovrin ledger selected!')
+      },
+      parent: 'ledger',
+    },
+    {
+      id: 'issue-credential-protocol-version',
+      name: 'Select credential protocol version',
+      keywords: 'issue-credential-protocol-version',
+      section: '',
+      parent: 'configuration',
+    },
+    {
+      id: 'issue-credential-protocol-version-1',
+      name: 'v1',
+      keywords: 'issue-credential-protocol-version-1',
+      section: '',
+      perform: () => {
+        alert('Credential Protocol Version 1 selected')
+      },
+      parent: 'issue-credential-protocol-version',
+    },
+    {
+      id: 'issue-credential-protocol-version-2',
+      name: 'v2',
+      keywords: 'issue-credential-protocol-version-2',
+      section: '',
+      perform: () => {
+        alert('Credential Protocol Version 2 selected')
+      },
+      parent: 'issue-credential-protocol-version',
+    },
+    {
+      id: 'present-proof-protocol-version',
+      name: 'Select proof protocol version',
+      keywords: 'present-proof-protocol-version',
+      section: '',
+      parent: 'configuration',
+    },
+    {
+      id: 'present-proof-protocol-version-1',
+      name: 'v1',
+      keywords: 'present-proof-protocol-version-1',
+      section: '',
+      perform: () => {
+        alert('Proof Protocol Version 1 selected')
+      },
+      parent: 'present-proof-protocol-version',
+    },
+    {
+      id: 'present-proof-protocol-version-2',
+      name: 'v2',
+      keywords: 'present-proof-protocol-version-2',
+      section: '',
+      perform: () => {
+        alert('Proof Protocol Version 2 selected')
+      },
+      parent: 'present-proof-protocol-version',
+    },
+    {
+      id: 'invitation-method',
+      name: 'Select invitation method',
+      keywords: 'invitation-method',
+      section: '',
+      parent: 'configuration',
+    },
+    {
+      id: 'invitation-method-oob',
+      name: 'Out-of-band invitation',
+      keywords: 'invitation-method-oob',
+      section: '',
+      perform: () => {
+        dispatch(setLegacyInvitation(false))
+      },
+      parent: 'invitation-method',
+    },
+    {
+      id: 'invitation-method-legacy',
+      name: 'Legacy invitation',
+      keywords: 'invitation-method-legacy',
+      section: '',
+      perform: () => {
+        dispatch(setLegacyInvitation(true))
+      },
+      parent: 'invitation-method',
+    },
     {
       id: 'theme',
       name: 'Change theme…',
+      shortcut: ['t'],
       keywords: 'interface color dark light',
       section: 'Preferences',
     },

cypress/e2e/usecase_page.cy.ts

@@ -58,7 +58,7 @@ describe('UseCase Page', () => {
 
     cy.get('[data-cy=select-use-case]').first().click()
 
-    cy.intercept('POST', `${API_URL}/connections/create-invitation`).as('createInvitation')
+    // cy.intercept('POST', `${API_URL}/oob/create-invitation`).as('createInvitation')
     cy.get('[data-cy=start-container]')
     cy.get('[data-cy=small-button]').click()