Integration OIDC4VC

App.tsx

@@ -11,6 +11,7 @@ import SplashScreen from 'react-native-splash-screen'
 import Toast from 'react-native-toast-message'
 
 import { animatedComponents } from './app/animated-components'
+import { OpenIDCredentialRecordProvider } from './app/components/Provider/OpenIDCredentialRecordProvider'
 import PushNotifications from './app/components/PushNotifications'
 import ErrorModal from './app/components/modals/ErrorModal'
 import NetInfo from './app/components/network/NetInfo'
@@ -54,31 +55,33 @@ const App = () => {
   return (
     <StoreProvider>
       <AdeyaAgentProvider>
-        <ThemeProvider value={theme}>
-          <AnimatedComponentsProvider value={animatedComponents}>
-            <ConfigurationProvider value={defaultConfiguration}>
-              <CommonUtilProvider>
-                <AuthProvider>
-                  <NetworkProvider>
-                    <StatusBar
-                      hidden={false}
-                      barStyle="light-content"
-                      backgroundColor={theme.ColorPallet.brand.primary}
-                      translucent={false}
-                    />
-                    <NetInfo />
-                    <ErrorModal />
-                    <TourProvider steps={homeTourSteps} overlayColor={'gray'} overlayOpacity={0.7}>
-                      <RootStack />
-                    </TourProvider>
-                    <Toast topOffset={15} config={toastConfig} />
-                    <PushNotifications />
-                  </NetworkProvider>
-                </AuthProvider>
-              </CommonUtilProvider>
-            </ConfigurationProvider>
-          </AnimatedComponentsProvider>
-        </ThemeProvider>
+        <OpenIDCredentialRecordProvider>
+          <ThemeProvider value={theme}>
+            <AnimatedComponentsProvider value={animatedComponents}>
+              <ConfigurationProvider value={defaultConfiguration}>
+                <CommonUtilProvider>
+                  <AuthProvider>
+                    <NetworkProvider>
+                      <StatusBar
+                        hidden={false}
+                        barStyle="light-content"
+                        backgroundColor={theme.ColorPallet.brand.primary}
+                        translucent={false}
+                      />
+                      <NetInfo />
+                      <ErrorModal />
+                      <TourProvider steps={homeTourSteps} overlayColor={'gray'} overlayOpacity={0.7}>
+                        <RootStack />
+                      </TourProvider>
+                      <Toast topOffset={15} config={toastConfig} />
+                      <PushNotifications />
+                    </NetworkProvider>
+                  </AuthProvider>
+                </CommonUtilProvider>
+              </ConfigurationProvider>
+            </AnimatedComponentsProvider>
+          </ThemeProvider>
+        </OpenIDCredentialRecordProvider>
       </AdeyaAgentProvider>
     </StoreProvider>
   )

app/components/OpenId/OpenIDCredentialCard.tsx

@@ -0,0 +1,164 @@
+import {
+  ClaimFormat,
+  GenericCredentialExchangeRecord,
+  getOpenId4VcCredentialMetadata,
+  getW3cCredentialDisplay,
+  getW3cIssuerDisplay,
+  JsonTransformer,
+  W3cCredentialJson,
+  W3cCredentialRecord,
+} from '@adeya/ssi'
+import React from 'react'
+import { Image, ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+
+import { ColorPallet } from '../../theme'
+
+type OpenIdCredentialCardProps = {
+  credentialRecord: GenericCredentialExchangeRecord
+  onPress?(): void
+  textColor?: string
+  shadow?: boolean
+}
+
+export function getTextColorBasedOnBg(bgColor: string) {
+  return Number.parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2 ? '#212529' : '#f6f9fc'
+}
+
+const OpenIdCredentialCard: React.FC<OpenIdCredentialCardProps> = ({ credentialRecord, textColor, onPress }) => {
+  const credential = JsonTransformer.toJSON(
+    (credentialRecord as W3cCredentialRecord).credential.claimFormat === ClaimFormat.JwtVc
+      ? credentialRecord?.credential?.credential
+      : credentialRecord?.credential,
+  ) as W3cCredentialJson
+  const openId4VcMetadata = getOpenId4VcCredentialMetadata(credentialRecord as W3cCredentialRecord)
+  const issuerShow = getW3cIssuerDisplay(credential, openId4VcMetadata)
+  const credentialShow = getW3cCredentialDisplay(credential, openId4VcMetadata)
+
+  const styles = StyleSheet.create({
+    container: {
+      borderRadius: 8,
+      position: 'relative',
+    },
+    card: {
+      width: '100%',
+      borderRadius: 8,
+      height: 164,
+      overflow: 'hidden',
+    },
+    backgroundView: {
+      width: '100%',
+      borderRadius: 8,
+      height: '100%',
+    },
+    cardHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingBottom: 8,
+    },
+    iconContainer: {
+      paddingRight: 16,
+    },
+    textContainer: {
+      flex: 1,
+      alignItems: 'flex-end',
+    },
+    heading: {
+      fontSize: 16,
+      textAlign: 'right',
+    },
+    subtitle: {
+      fontSize: 12,
+      textAlign: 'right',
+      opacity: 0.8,
+    },
+    cardFooter: {
+      paddingTop: 8,
+    },
+    footerTextContainer: {
+      alignItems: 'flex-start',
+    },
+    issuerLabel: {
+      fontSize: 10,
+      opacity: 0.8,
+    },
+    issuerName: {
+      fontSize: 12,
+    },
+    cardBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      width: '100%',
+      height: '100%',
+    },
+    backgroundImage: {
+      width: '100%',
+      height: '100%',
+    },
+    backgroundFallback: {
+      width: '100%',
+      height: '100%',
+    },
+    cardContainer: {
+      flex: 1,
+      padding: 16,
+      justifyContent: 'space-between',
+    },
+  })
+
+  textColor = textColor ? textColor : getTextColorBasedOnBg(ColorPallet.brand.primary ?? '#000')
+
+  return (
+    <View style={[styles.container, { backgroundColor: ColorPallet.brand.primary }]}>
+      <TouchableOpacity
+        style={[styles.card, { backgroundColor: ColorPallet.brand.primary }]}
+        onPress={onPress}
+        activeOpacity={0.7}>
+        <ImageBackground
+          source={{ uri: credentialShow?.backgroundImage?.url }}
+          style={styles.backgroundView}
+          imageStyle={styles.backgroundImage}
+          resizeMode="cover">
+          <View style={styles.cardContainer}>
+            <View style={styles.cardHeader}>
+              <View style={styles.iconContainer}>
+                {issuerShow?.logo?.url ? (
+                  <Image
+                    source={{
+                      uri: issuerShow.logo.url,
+                    }}
+                    resizeMode="contain"
+                    alt={issuerShow.logo.altText}
+                    width={64}
+                    height={48}
+                  />
+                ) : null}
+              </View>
+              <View style={styles.textContainer}>
+                <Text style={[styles.heading, { color: textColor }]} numberOfLines={2}>
+                  {credentialShow.name}
+                </Text>
+                <Text style={[styles.subtitle, { color: textColor }]} numberOfLines={1}>
+                  {credentialShow.description}
+                </Text>
+              </View>
+            </View>
+            <View style={styles.cardFooter}>
+              <View style={styles.footerTextContainer}>
+                <Text style={[styles.issuerLabel, { color: textColor }]}>Issuer</Text>
+                <Text style={[styles.issuerName, { color: textColor }]} numberOfLines={2}>
+                  {issuerShow.name}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </ImageBackground>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+export default OpenIdCredentialCard

app/components/Provider/OpenIDCredentialRecordProvider.tsx

@@ -0,0 +1,78 @@
+import {
+  addRecord,
+  defaultState,
+  filterW3CCredentialsOnly,
+  isW3CCredentialRecord,
+  OpenIDCredentialContext,
+  OpenIDCredentialRecordState,
+  recordsAddedByType,
+  recordsRemovedByType,
+  removeCredential,
+  removeRecord,
+  storeOpenIdCredential,
+  useAdeyaAgent,
+  W3cCredentialRecord,
+} from '@adeya/ssi'
+import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
+
+interface OpenIDCredentialProviderProps {
+  children: React.ReactNode
+}
+
+const OpenIDCredentialRecordContext = createContext<OpenIDCredentialContext>(null as unknown as OpenIDCredentialContext)
+
+export const OpenIDCredentialRecordProvider: React.FC<PropsWithChildren<OpenIDCredentialProviderProps>> = ({
+  children,
+}: OpenIDCredentialProviderProps) => {
+  const [state, setState] = useState<OpenIDCredentialRecordState>(defaultState)
+
+  const { agent } = useAdeyaAgent()
+
+  useEffect(() => {
+    if (!agent) {
+      return
+    }
+    agent.w3cCredentials?.getAllCredentialRecords().then(w3cCredentialRecords => {
+      setState(prev => ({
+        ...prev,
+        w3cCredentialRecords: filterW3CCredentialsOnly(w3cCredentialRecords),
+        isLoading: false,
+      }))
+    })
+  }, [agent])
+
+  useEffect(() => {
+    if (!state.isLoading && agent) {
+      const credentialAdded$ = recordsAddedByType(agent, W3cCredentialRecord).subscribe(record => {
+        //This handler will return ANY creds added to the wallet even DidComm
+        //Sounds like a bug in the hooks package
+        //This check will safe guard the flow untill a fix goes to the hooks
+        if (isW3CCredentialRecord(record)) {
+          setState(addRecord(record, state))
+        }
+      })
+
+      const credentialRemoved$ = recordsRemovedByType(agent, W3cCredentialRecord).subscribe(record => {
+        setState(removeRecord(record, state))
+      })
+
+      return () => {
+        credentialAdded$.unsubscribe()
+        credentialRemoved$.unsubscribe()
+      }
+    }
+  }, [state, agent])
+
+  return (
+    <OpenIDCredentialRecordContext.Provider
+      value={{
+        openIdState: state,
+        storeOpenIdCredential: storeOpenIdCredential,
+        removeCredential: removeCredential,
+      }}>
+      {children}
+    </OpenIDCredentialRecordContext.Provider>
+  )
+}
+
+export const useOpenIDCredentials = () => useContext(OpenIDCredentialRecordContext)

app/components/common/FooterButton.tsx

@@ -0,0 +1,60 @@
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, View } from 'react-native'
+
+import { ColorPallet } from '../../theme'
+import { testIdWithKey } from '../../utils/testable'
+import RecordLoading from '../animated/RecordLoading'
+import Button, { ButtonType } from '../buttons/Button'
+
+type FooterProps = {
+  loading: boolean
+  handleAcceptTouched: () => void
+  toggleDeclineModalVisible: () => void
+  buttonsVisible: boolean
+}
+const CommonFooter: React.FC<FooterProps> = ({
+  loading,
+  buttonsVisible,
+  handleAcceptTouched,
+  toggleDeclineModalVisible,
+}) => {
+  const { t } = useTranslation()
+  const styles = StyleSheet.create({
+    openIdFooterButton: {
+      paddingTop: 10,
+    },
+    header: {
+      paddingHorizontal: 25,
+      paddingVertical: 16,
+      paddingBottom: 26,
+      backgroundColor: ColorPallet.brand.secondaryBackground,
+    },
+  })
+  return (
+    <View style={styles.header}>
+      {loading ? <RecordLoading /> : null}
+      <View style={styles.openIdFooterButton}>
+        <Button
+          title={t('Global.Accept')}
+          accessibilityLabel={t('Global.Accept')}
+          testID={testIdWithKey('AcceptCredentialOffer')}
+          buttonType={ButtonType.Primary}
+          onPress={handleAcceptTouched}
+          disabled={!buttonsVisible}
+        />
+      </View>
+      <View style={styles.openIdFooterButton}>
+        <Button
+          title={t('Global.Decline')}
+          accessibilityLabel={t('Global.Decline')}
+          testID={testIdWithKey('DeclineCredentialOffer')}
+          buttonType={ButtonType.Secondary}
+          onPress={toggleDeclineModalVisible}
+          disabled={!buttonsVisible}
+        />
+      </View>
+    </View>
+  )
+}
+
+export default CommonFooter