@bifold/core 1.0.0

package/src/contexts/store.tsx

@@ -0,0 +1,100 @@
+import React, { createContext, Dispatch, useContext, useReducer } from 'react'
+
+import { State } from '../types/state'
+import { generateRandomWalletName } from '../utils/helpers'
+
+import _defaultReducer, { ReducerAction } from './reducers/store'
+import { defaultAutoLockTime } from '../constants'
+
+type Reducer = <S extends State>(state: S, action: ReducerAction<any>) => S
+
+interface StoreProviderProps extends React.PropsWithChildren {
+  initialState?: State
+  reducer?: Reducer
+}
+
+export const defaultState: State = {
+  onboarding: {
+    didSeePreface: false,
+    didAgreeToTerms: false,
+    didCompleteTutorial: false,
+    didCreatePIN: false,
+    didConsiderPushNotifications: false,
+    didConsiderBiometry: false,
+    didNameWallet: false,
+    onboardingVersion: 0,
+    didCompleteOnboarding: false,
+    postAuthScreens: [],
+  },
+  authentication: {
+    didAuthenticate: false,
+  },
+  // NOTE: from Credo 0.4.0 on we use Aries Askar. New wallets will be created with Askar from the start
+  // which we will know when we create the pin while using askar as a dependency.
+  migration: {
+    didMigrateToAskar: false,
+  },
+  loginAttempt: {
+    loginAttempts: 0,
+    servedPenalty: true,
+  },
+  lockout: {
+    displayNotification: false,
+  },
+  preferences: {
+    developerModeEnabled: false,
+    biometryPreferencesUpdated: false,
+    useBiometry: false,
+    usePushNotifications: false,
+    useVerifierCapability: false,
+    useConnectionInviterCapability: false,
+    useDevVerifierTemplates: false,
+    acceptDevCredentials: false,
+    useDataRetention: true,
+    enableWalletNaming: false,
+    walletName: generateRandomWalletName(),
+    preventAutoLock: false,
+    enableShareableLink: false,
+    alternateContactNames: {},
+    autoLockTime: defaultAutoLockTime, // default wallets lockout time to 5 minutes
+  },
+  tours: {
+    seenToursPrompt: false,
+    enableTours: true,
+    seenHomeTour: false,
+    seenCredentialsTour: false,
+    seenCredentialOfferTour: false,
+    seenProofRequestTour: false,
+  },
+  stateLoaded: false,
+  versionInfo: { needsUpdate: false, lastChecked: undefined, version: undefined },
+}
+
+export const StoreContext = createContext<[State, Dispatch<ReducerAction<any>>]>([
+  defaultState,
+  () => {
+    return
+  },
+])
+
+export const mergeReducers = (a: Reducer, b: Reducer): Reducer => {
+  return <S extends State>(state: S, action: ReducerAction<any>): S => {
+    return a(b(state, action), action)
+  }
+}
+
+export const defaultReducer = _defaultReducer
+
+export const StoreProvider: React.FC<StoreProviderProps> = ({ children, initialState, reducer }) => {
+  const _reducer = reducer ?? defaultReducer
+  const _state = initialState ?? defaultState
+  const [state, dispatch] = useReducer(_reducer, _state)
+
+  return <StoreContext.Provider value={[state, dispatch]}>{children}</StoreContext.Provider>
+}
+
+export const useStore = <S extends State>(): [S, Dispatch<ReducerAction<any>>] => {
+  const context = useContext(StoreContext)
+
+  return context as unknown as [S, Dispatch<ReducerAction<any>>]
+}

package/src/contexts/theme.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react'
+
+import { theme, ITheme } from '../theme'
+
+export const ThemeContext = createContext<ITheme>(theme)
+
+export const ThemeProvider = ThemeContext.Provider
+
+export const useTheme = () => useContext(ThemeContext)

package/src/contexts/tour/tour-context.tsx

@@ -0,0 +1,160 @@
+import { createContext, ReactElement, useContext } from 'react'
+import { LayoutRectangle } from 'react-native'
+
+import { BaseTourID, TourID } from '../../types/tour'
+
+export type Tours = {
+  [key: TourID]: TourStep[]
+}
+
+export interface RenderProps {
+  /**
+   * The ID of the current tour selected
+   */
+  currentTour: TourID
+  /**
+   * The index of the current step the tour is on.
+   */
+  currentStep: number
+  /**
+   * Directly change the current spotlight
+   */
+  changeSpot?: (spot: LayoutRectangle) => void
+  /**
+   * Goes to the next step, if any. Stops the tour on the last step.
+   */
+  next: () => void
+  /**
+   * Goes to the previous step, if any.
+   */
+  previous: () => void
+  /**
+   * Terminates the tour execution.
+   */
+  stop: () => void
+}
+
+export interface OSConfig<T> {
+  /**
+   * Generic setting which only applies to Android
+   */
+  android: T
+  /**
+   * Generic setting which only applies to iOS
+   */
+  ios: T
+  /**
+   * Generic setting which only applies to Web
+   */
+  web: T
+}
+
+export type BackdropPressBehavior = 'continue' | 'stop' | ((options: Tour) => void)
+
+export interface TourStep {
+  /**
+   * Overrides the behavior of pressing the tour's backdrop for this specific
+   * step. You can use either one of the following values:
+   * - A callback function with the {@link Tour} options object in the
+   * first argument. This allows more granular control over the tour.
+   * - The `continue` literal string, which is a shortcut to move to the next
+   * step, and stop the tour on the last step.
+   * - the `stop` literal string, which is a shortcut to stop the tour.
+   *
+   * **NOTE:** You can also define a default behavior on the
+   * `TourProvider` props.
+   */
+  onBackdropPress?: BackdropPressBehavior
+  /**
+   * A function or React function component to render the tooltip of the step.
+   * It receives the {@link RenderProps} so you can access the context of the
+   * tour within the tooltip.
+   */
+  Render: (props: RenderProps) => ReactElement
+}
+
+export interface Tour {
+  /**
+   * The ID of the tour
+   */
+  currentTour: TourID
+  /**
+   * The current step index.
+   */
+  currentStep?: number
+  /**
+   * Manually change the current spot (useful for steps that don't have an associated AttachTourStep)
+   */
+  changeSpot: (spot: LayoutRectangle) => void
+  /**
+   * Goes to the next step, if any. Stops the tour on the last step.
+   */
+  next: () => void
+  /**
+   * Goes to the previous step, if any.
+   */
+  previous: () => void
+  /**
+   * Kicks off a tour from step `0`.
+   */
+  start: (tourId: TourID) => void
+  /**
+   * Terminates the tour execution.
+   */
+  stop: () => void
+}
+
+export interface TourCtx extends Tour {
+  /**
+   * Programmatically change the spot layout
+   *
+   * @param spot the spot layout
+   */
+  changeSpot: (spot: LayoutRectangle) => void
+  /**
+   * The spotlight layout.
+   */
+  spot: LayoutRectangle
+  /**
+   * A dictionnary where the key is...
+   */
+  tours: Tours
+}
+
+export const ORIGIN_SPOT: LayoutRectangle = {
+  height: 0,
+  width: 0,
+  x: 0,
+  y: 0,
+}
+
+export const TourContext = createContext<TourCtx>({
+  currentTour: BaseTourID.HomeTour,
+  currentStep: undefined,
+  changeSpot: () => undefined,
+  next: () => undefined,
+  previous: () => undefined,
+  spot: ORIGIN_SPOT,
+  start: () => undefined,
+  tours: {},
+  stop: () => undefined,
+})
+
+/**
+ * React hook to access the {@link Tour} context.
+ *
+ * @returns the Tour context
+ */
+export function useTour(): Tour {
+  const { currentTour, currentStep, changeSpot, next, previous, start, stop } = useContext(TourContext)
+
+  return {
+    currentTour,
+    currentStep,
+    changeSpot,
+    next,
+    previous,
+    start,
+    stop,
+  }
+}

package/src/contexts/tour/tour-provider.tsx

@@ -0,0 +1,160 @@
+import React, { forwardRef, Ref, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import { ColorValue, LayoutRectangle } from 'react-native'
+
+import { TourOverlay } from '../../components/tour/TourOverlay'
+import { BaseTourID, ChildFn, TourID } from '../../types/tour'
+import { isChildFunction } from '../../utils/helpers'
+
+import {
+  BackdropPressBehavior,
+  OSConfig,
+  Tour,
+  TourContext,
+  TourCtx,
+  TourStep,
+  ORIGIN_SPOT,
+  Tours,
+} from './tour-context'
+
+export interface TourProviderProps {
+  children: React.ReactNode | ChildFn<Tour>
+  /**
+   * Define if the animations in the tour should use the native driver or not.
+   * A boolean can be used to apply the same value to both Android and iOS, or
+   * an object with `android` and `ios` keys can be used to define a value for
+   * each OS.
+   *
+   * @default false
+   */
+  nativeDriver?: boolean | OSConfig<boolean>
+  /**
+   * Sets the default behavior of pressing the tour's backdrop. You can use
+   * either one of the following values:
+   * - A callback function with the {@link Tour} options object in the
+   * first argument. This allows more franular control over the tour.
+   * - The `continue` literal string, which is a shortcut to move to the next
+   * step, and stop the tour on the last step.
+   * - the `stop` literal string, which is a shortcut to stop the tour.
+   *
+   * **NOTE:** You can also override this behavior on each step configuration.
+   */
+  onBackdropPress?: BackdropPressBehavior
+  /**
+   * The color of the overlay of the tour.
+   *
+   * @default black
+   */
+  overlayColor?: ColorValue
+  /**
+   * The opacity applied to the overlay of the tour (between 0 to 1).
+   *
+   * @default 0.45
+   */
+  overlayOpacity?: number
+  /**
+   * The list of steps for the home tour.
+   */
+  tours: Tours
+}
+
+const TourProviderComponent = (props: TourProviderProps, ref: Ref<Tour>) => {
+  const {
+    children,
+    onBackdropPress,
+    overlayColor = 'black',
+    overlayOpacity = 0.45,
+    tours,
+    nativeDriver = false,
+  } = props
+
+  const [currentTour, setCurrentTour] = useState<TourID>(BaseTourID.HomeTour)
+  const [currentStep, setCurrentStep] = useState<number>()
+  const [spot, setSpot] = useState(ORIGIN_SPOT)
+
+  const renderStep = useCallback(
+    (index: number): void | Promise<void> => {
+      if (tours[currentTour]?.[index] !== undefined) {
+        setCurrentStep(index)
+      }
+    },
+    [currentTour, tours]
+  )
+
+  const changeSpot = useCallback((newSpot: LayoutRectangle): void => {
+    setSpot(newSpot)
+  }, [])
+
+  const start = useCallback(
+    (tourId: TourID): void => {
+      setCurrentTour(tourId)
+      renderStep(0)
+    },
+    [renderStep]
+  )
+
+  const stop = useCallback((): void => {
+    setCurrentStep(undefined)
+    setSpot(ORIGIN_SPOT)
+  }, [])
+
+  const next = useCallback((): void => {
+    if (currentTour && currentStep !== undefined && tours[currentTour]) {
+      currentStep === tours[currentTour].length - 1 ? stop() : renderStep(currentStep + 1)
+    }
+  }, [stop, renderStep, currentStep, currentTour, tours])
+
+  const previous = useCallback((): void => {
+    if (currentStep !== undefined && currentStep > 0) {
+      renderStep(currentStep - 1)
+    }
+  }, [renderStep, currentStep])
+
+  const tourStep = useMemo((): TourStep => {
+    return tours?.[currentTour]?.[currentStep ?? 0] ?? { Render: () => <></> }
+  }, [currentTour, currentStep, tours])
+
+  const tour = useMemo(
+    (): TourCtx => ({
+      changeSpot,
+      currentTour,
+      currentStep,
+      next,
+      previous,
+      spot,
+      start,
+      stop,
+      tours,
+    }),
+    [changeSpot, currentTour, currentStep, next, previous, spot, start, stop, tours]
+  )
+
+  useImperativeHandle(ref, () => ({
+    currentTour,
+    currentStep,
+    changeSpot,
+    next,
+    previous,
+    start,
+    stop,
+  }))
+
+  return (
+    <TourContext.Provider value={tour}>
+      {isChildFunction(children) ? <TourContext.Consumer>{children}</TourContext.Consumer> : <>{children}</>}
+
+      <TourOverlay
+        color={overlayColor}
+        currentStep={currentStep}
+        currentTour={currentTour}
+        changeSpot={changeSpot}
+        backdropOpacity={overlayOpacity}
+        onBackdropPress={onBackdropPress}
+        spot={spot}
+        tourStep={tourStep}
+        nativeDriver={nativeDriver}
+      />
+    </TourContext.Provider>
+  )
+}
+
+export const TourProvider = forwardRef<Tour, TourProviderProps>(TourProviderComponent)

package/src/hooks/bundle-resolver.ts

@@ -0,0 +1,95 @@
+import {
+  CredentialOverlay,
+  Field,
+  OCABundle,
+  OCABundleResolveAllParams,
+  OCABundleResolveDefaultParams,
+  OCABundleResolvePresentationFieldsParams,
+} from '@bifold/oca/build/legacy'
+import { TOKENS, useServices } from '../container-api'
+import { useEffect, useState } from 'react'
+import { BaseOverlay, BrandingOverlay, LegacyBrandingOverlay } from '@bifold/oca'
+
+type BundleResolverParams<T> = T extends CredentialOverlay<BrandingOverlay | BaseOverlay | LegacyBrandingOverlay>
+  ? OCABundleResolveAllParams
+  : T extends OCABundle
+  ? OCABundleResolveDefaultParams
+  : T extends Field[]
+  ? OCABundleResolvePresentationFieldsParams
+  : never
+
+function isOCABundleResolveDefaultParams(
+  params: OCABundleResolveDefaultParams | OCABundleResolveAllParams
+): params is OCABundleResolveDefaultParams {
+  return 'meta' in params && !('attributes' in params)
+}
+
+function isOCABundleResolveAllParams(
+  params: OCABundleResolveAllParams | OCABundleResolveDefaultParams
+): params is OCABundleResolveAllParams {
+  return 'attributes' in params && 'meta' in params
+}
+
+function isOCABundleResolvePresentationFieldsParams(params: any): params is OCABundleResolvePresentationFieldsParams {
+  return 'attributes' in params && !('meta' in params)
+}
+
+export function useBranding<
+  T extends CredentialOverlay<BrandingOverlay | BaseOverlay | LegacyBrandingOverlay> | OCABundle | Field
+>(params: BundleResolverParams<T>) {
+  const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
+  const [overlay, setOverlay] = useState<T>({} as T)
+
+  useEffect(() => {
+    if (isOCABundleResolveDefaultParams(params)) {
+      bundleResolver.resolveDefaultBundle(params).then((bundle) => {
+        if (bundle) {
+          setOverlay(
+            (o) =>
+              ({
+                ...o,
+                ...bundle,
+                brandingOverlay: bundle.brandingOverlay,
+              } as T)
+          )
+        }
+      })
+    } else if (isOCABundleResolveAllParams(params)) {
+      bundleResolver.resolveAllBundles(params).then((bundle) => {
+        setOverlay(
+          (o) =>
+            ({
+              ...o,
+              ...bundle,
+              brandingOverlay: bundle.brandingOverlay,
+            } as T)
+        )
+      })
+    } else if (isOCABundleResolvePresentationFieldsParams(params)) {
+      bundleResolver.presentationFields(params).then((fields) => {
+        setOverlay(
+          (o) =>
+            ({
+              ...o,
+              presentationFields: fields,
+            } as T)
+        )
+      })
+    } else {
+      bundleResolver.resolve(params).then((bundle) => {
+        if (bundle) {
+          setOverlay(
+            (o) =>
+              ({
+                ...o,
+                ...bundle,
+                brandingOverlay: bundle.brandingOverlay,
+              } as T)
+          )
+        }
+      })
+    }
+  }, [params, bundleResolver])
+
+  return { overlay }
+}