wallet-stack 1.0.0-alpha.121

package/src/statsig/index.ts

@@ -0,0 +1,186 @@
+import { DynamicConfig, StatsigUser } from '@statsig/react-native-bindings'
+import _ from 'lodash'
+import { LaunchArguments } from 'react-native-launch-arguments'
+import { ExpectedLaunchArgs, STATSIG_ENABLED } from 'src/config'
+import { FeatureGates } from 'src/statsig/constants'
+import { getDefaultStatsigUser } from 'src/statsig/selector'
+import {
+  StatsigDynamicConfigs,
+  StatsigExperiments,
+  StatsigFeatureGates,
+  StatsigParameter,
+} from 'src/statsig/types'
+import Logger from 'src/utils/Logger'
+import StatsigClientSingleton from './client'
+
+const TAG = 'Statsig'
+
+let gateOverrides: { [key: string]: boolean } = {}
+
+// Only for testing
+export function _getGateOverrides() {
+  return gateOverrides
+}
+
+function getParams<T extends Record<string, StatsigParameter>>({
+  config,
+  defaultValues,
+}: {
+  config: DynamicConfig
+  defaultValues: T
+}) {
+  type Parameter = keyof T
+  type DefaultValue = T[Parameter]
+  const output = {} as T
+  for (const [param, defaultValue] of Object.entries(defaultValues) as [
+    Parameter,
+    DefaultValue,
+  ][]) {
+    output[param] = config.get(param as string, defaultValue) as DefaultValue
+  }
+  return output
+}
+
+export function getExperimentParams<T extends Record<string, StatsigParameter>>({
+  experimentName,
+  defaultValues,
+}: {
+  experimentName: StatsigExperiments
+  defaultValues: T
+}): T {
+  try {
+    if (!STATSIG_ENABLED) {
+      return defaultValues
+    }
+    if (!StatsigClientSingleton.isInitialized()) {
+      Logger.warn(
+        TAG,
+        'getExperimentParams: SDK is uninitialized when getting experiment',
+        experimentName
+      )
+      return defaultValues
+    }
+    const client = StatsigClientSingleton.getInstance()
+
+    const experiment = client.getExperiment(experimentName)
+    return getParams({ config: experiment, defaultValues })
+  } catch (error) {
+    Logger.warn(
+      TAG,
+      `getExperimentParams: Error getting params for experiment: ${experimentName}`,
+      error
+    )
+    return defaultValues
+  }
+}
+
+function _getDynamicConfigParams<T extends Record<string, StatsigParameter>>({
+  configName,
+  defaultValues,
+}: {
+  configName: StatsigDynamicConfigs
+  defaultValues: T
+}): T {
+  try {
+    if (!STATSIG_ENABLED) {
+      return defaultValues
+    }
+    if (!StatsigClientSingleton.isInitialized()) {
+      Logger.warn(
+        TAG,
+        'getDynamicConfigParams: SDK is uninitialized when getting config',
+        configName
+      )
+      return defaultValues
+    }
+    const client = StatsigClientSingleton.getInstance()
+
+    const config = client.getDynamicConfig(configName)
+    return getParams({ config, defaultValues })
+  } catch (error) {
+    Logger.warn(TAG, `Error getting params for dynamic config: ${configName}`, error)
+    return defaultValues
+  }
+}
+
+// Cannot be used to retrieve dynamic config for multichain features
+export function getDynamicConfigParams<T extends Record<string, StatsigParameter>>({
+  configName,
+  defaultValues,
+}: {
+  configName: StatsigDynamicConfigs
+  defaultValues: T
+}): T {
+  return _getDynamicConfigParams({ configName, defaultValues })
+}
+
+export function getFeatureGate(featureGateName: StatsigFeatureGates) {
+  const defaultGateValue = FeatureGates[featureGateName]
+  try {
+    if (featureGateName in gateOverrides) {
+      return gateOverrides[featureGateName]
+    }
+
+    if (!STATSIG_ENABLED) {
+      return defaultGateValue
+    }
+    if (!StatsigClientSingleton.isInitialized()) {
+      Logger.warn(TAG, 'getFeatureGate: SDK is uninitialized when checking gate', featureGateName)
+      return defaultGateValue
+    }
+    const client = StatsigClientSingleton.getInstance()
+
+    return client.checkGate(featureGateName)
+  } catch (error) {
+    Logger.warn(TAG, `Error getting feature gate: ${featureGateName}`, error)
+    return defaultGateValue
+  }
+}
+
+/**
+ * Updates the current Statsig user. If no argument is given, a default StatsigUser
+ * object is used to update the user, based on values from the redux store. If a StatsigUser
+ * object is provided as a parameter, the provided object will be deep merged with the default
+ * object from redux, with the provided object overriding fields in the default
+ * object. The default object also includes a `loadTime` field which is set to
+ * current time, so calling this method with no args will always force a refresh
+ * since `loadTime` will change.
+ *
+ * If the update fails for whatever reason, an error will be logged.
+ *
+ * This function does not update default values in redux; callers are expected to update redux
+ * state themselves.
+ */
+export async function patchUpdateStatsigUser(statsigUser?: StatsigUser) {
+  try {
+    if (!STATSIG_ENABLED) {
+      return
+    }
+    if (!StatsigClientSingleton.isInitialized()) {
+      Logger.warn(TAG, 'patchUpdateStatsigUser: SDK is uninitialized when updating user')
+      return
+    }
+    const defaultUser = getDefaultStatsigUser()
+    await StatsigClientSingleton.updateUser(_.merge(defaultUser, statsigUser))
+  } catch (error) {
+    Logger.error(TAG, 'Failed to update Statsig user', error)
+  }
+}
+
+export function setupOverridesFromLaunchArgs() {
+  try {
+    Logger.debug(TAG, 'Cleaning up local overrides')
+    const newGateOverrides: typeof gateOverrides = {}
+    const { statsigGateOverrides } = LaunchArguments.value<ExpectedLaunchArgs>()
+    if (statsigGateOverrides) {
+      Logger.debug(TAG, 'Setting up gate overrides', statsigGateOverrides)
+      statsigGateOverrides.split(',').forEach((gateOverride: string) => {
+        const [gate, value] = gateOverride.split('=')
+        newGateOverrides[gate] = value === 'true'
+      })
+    }
+    gateOverrides = newGateOverrides
+  } catch (err) {
+    Logger.debug(TAG, 'Overrides setup failed', err)
+  }
+}

package/src/statsig/selector.ts

@@ -0,0 +1,17 @@
+import { startOnboardingTimeSelector } from 'src/account/selectors'
+import { walletAddressSelector } from 'src/web3/selectors'
+
+export function getDefaultStatsigUser() {
+  // Inlined to avoid require cycles
+  // like src/statsig/index.ts -> src/redux/store.ts -> src/redux/sagas.ts -> src/positions/saga.ts -> src/statsig/index.ts
+  // and similar
+  const { store } = require('src/redux/store')
+  const state = store.getState()
+  return {
+    userID: walletAddressSelector(state) ?? undefined,
+    custom: {
+      startOnboardingTime: startOnboardingTimeSelector(state),
+      loadTime: Date.now(),
+    },
+  }
+}

package/src/statsig/types.ts

@@ -0,0 +1,52 @@
+export enum StatsigDynamicConfigs {
+  USERNAME_BLOCK_LIST = 'username_block_list',
+  WALLET_NETWORK_TIMEOUT_SECONDS = 'wallet_network_timeout_seconds',
+  DAPP_WEBVIEW_CONFIG = 'dapp_webview_config',
+  SWAP_CONFIG = 'swap_config',
+  CICO_TOKEN_INFO = 'cico_token_info',
+  WALLET_JUMPSTART_CONFIG = 'wallet_jumpstart_config',
+  NFT_CELEBRATION_CONFIG = 'nft_celebration_config',
+  APP_CONFIG = 'app_config',
+  EARN_CONFIG = 'earn_config',
+  DEMO_MODE_CONFIG = 'demo_mode_config',
+  FIAT_CONNECT_CONFIG = 'fiat_connect_config',
+  INVITE_REWARDS_CONFIG = 'invite_rewards_config',
+  DIVVI_SLICES_BOTTOM_SHEET_CONFIG = 'divvi_slices_bottom_sheet_config',
+}
+
+export enum StatsigFeatureGates {
+  SHOW_POSITIONS = 'show_positions',
+  SHOW_CLAIM_SHORTCUTS = 'show_claim_shortcuts',
+  ALLOW_HOOKS_PREVIEW = 'allow_hooks_preview',
+  APP_REVIEW = 'app_review',
+  SHOW_IMPORT_TOKENS_FLOW = 'show_import_tokens_flow',
+  SAVE_CONTACTS = 'save_contacts',
+  SHOW_SWAP_TOKEN_FILTERS = 'show_swap_token_filters',
+  SHUFFLE_SWAP_TOKENS_ORDER = 'shuffle_swap_tokens_order',
+  SHOW_NFT_CELEBRATION = 'show_nft_celebration',
+  SHOW_NFT_REWARD = 'show_nft_reward',
+  SHOW_JUMPSTART_SEND = 'show_jumpstart_send',
+  SHOW_POINTS = 'show_points',
+  SUBSIDIZE_STABLECOIN_EARN_GAS_FEES = 'subsidize_stablecoin_earn_gas_fees',
+  ALLOW_CROSS_CHAIN_SWAPS = 'allow_cross_chain_swaps',
+  SHOW_UK_COMPLIANT_VARIANT = 'show_uk_compliant_variant',
+  ALLOW_EARN_PARTIAL_WITHDRAWAL = 'allow_earn_partial_withdrawal',
+  SHOW_ZERION_TRANSACTION_FEED = 'show_zerion_transaction_feed',
+  SHOW_NEW_ENTER_AMOUNT_FOR_SWAP = 'show_new_enter_amount_for_swap',
+  ALLOW_CROSS_CHAIN_SWAP_AND_DEPOSIT = 'allow_cross_chain_swap_and_deposit',
+  DISABLE_WALLET_CONNECT_V2 = 'disable_wallet_connect_v2',
+  SHOW_DIVVI_SLICES_BOTTOM_SHEET = 'show_divvi_slices_bottom_sheet',
+  RECAPTCHA_ENABLED = 'recaptcha_enabled',
+  USE_SMART_ACCOUNT_CAPABILITIES = 'use_smart_account_capabilities',
+}
+
+export enum StatsigExperiments {
+  SAMPLE = 'sample', // Needed for CI, remove if there are actual experiments
+}
+
+export type StatsigParameter =
+  | string
+  | number
+  | boolean
+  | StatsigParameter[]
+  | { [key: string]: StatsigParameter }

package/src/storage/keychain.tsx

@@ -0,0 +1,92 @@
+import * as Keychain from '@divvi/react-native-keychain'
+import Logger from 'src/utils/Logger'
+import { ensureError } from 'src/utils/ensureError'
+
+const TAG = 'storage/keychain'
+// the user cancelled error strings are OS specific
+const KEYCHAIN_USER_CANCELLED_ERRORS = [
+  'user canceled the operation',
+  'error: code: 13, msg: cancel',
+  'error: code: 10, msg: fingerprint operation canceled by the user',
+]
+
+interface SecureStorage {
+  key: string
+  value: string
+  options?: Keychain.SetOptions
+}
+
+export function isUserCancelledError(error: Error) {
+  return KEYCHAIN_USER_CANCELLED_ERRORS.some((userCancelledError) =>
+    error.toString().toLowerCase().includes(userCancelledError)
+  )
+}
+
+export async function storeItem({ key, value, options = {} }: SecureStorage) {
+  try {
+    const result = await Keychain.setGenericPassword('CELO', value, {
+      service: key,
+      accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED_THIS_DEVICE_ONLY,
+      ...options,
+    })
+    if (result === false) {
+      throw new Error('Store result false')
+    }
+
+    // check that we can correctly read the keychain before proceeding
+    const retrievedResult = await retrieveStoredItem(key)
+    if (retrievedResult !== value) {
+      await removeStoredItem(key)
+      Logger.error(
+        `${TAG}@storeItem`,
+        `Retrieved value for key '${key}' does not match stored value`
+      )
+      throw new Error(`Retrieved value for key '${key}' does not match stored value`)
+    }
+
+    return result
+  } catch (error) {
+    Logger.error(TAG, 'Error storing item', error, true, value)
+    throw error
+  }
+}
+
+export async function retrieveStoredItem(key: string, options: Keychain.GetOptions = {}) {
+  try {
+    const item = await Keychain.getGenericPassword({
+      service: key,
+      ...options,
+    })
+    if (!item) {
+      return null
+    }
+    return item.password
+  } catch (err) {
+    const error = ensureError(err)
+    if (!isUserCancelledError(error)) {
+      // triggered when biometry verification fails and user cancels the action
+      Logger.error(TAG, 'Error retrieving stored item', error, true)
+    }
+    throw error
+  }
+}
+
+export async function removeStoredItem(key: string) {
+  try {
+    return Keychain.resetGenericPassword({
+      service: key,
+    })
+  } catch (error) {
+    Logger.error(TAG, 'Error clearing item', error, true)
+    throw error
+  }
+}
+
+export async function listStoredItems() {
+  try {
+    return Keychain.getAllGenericPasswordServices({ skipUIAuth: true })
+  } catch (error) {
+    Logger.error(TAG, 'Error listing items', error, true)
+    throw error
+  }
+}

package/src/styles/accessibility.ts

@@ -0,0 +1,7 @@
+import { PixelRatio } from 'react-native'
+
+export function getSizing(maxSize: number = 38, baseSize: number = 16) {
+  return baseSize * PixelRatio.getFontScale() < maxSize
+    ? baseSize * PixelRatio.getFontScale()
+    : maxSize
+}

package/src/styles/appTheme.ts

@@ -0,0 +1,13 @@
+import { DefaultTheme } from '@react-navigation/native'
+import colors from 'src/styles/colors'
+
+// Global app theme used by react-navigation
+const appTheme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    background: colors.backgroundPrimary,
+  },
+}
+
+export default appTheme

package/src/styles/colors.tsx

@@ -0,0 +1,78 @@
+import { getAppConfig } from 'src/appConfig'
+
+// Designer Created Figma Colors
+// from https://www.figma.com/design/erFfzHvSTm5g1sjK6jWyEH/Working-Design-System?node-id:2100-4881&node-type:frame&t:vKGGXrs3Torz7kFE-0
+const colors = {
+  // backgrounds
+  backgroundPrimary: '#FFFFFF', // Main background color for the app, used for primary surfaces (screens, navigation).
+  backgroundSecondary: '#F8F9F9', // Subtle contrast background for secondary surfaces like cards, panels, or inputs.
+  backgroundTertiary: '#E6E6E6', // Low-emphasis background for subtle supporting areas, typically used when both primary and secondary backgrounds are present, and an additional layer of distinction is needed.
+  backgroundScrim: '#000000', // Semi-transparent underlay behind bottom sheets, modals, dialogs, and other temporary surfaces to dim the background.
+  backgroundSplash: '#ff5050', // Background color for splash screen (e.g., when requesting biometrics on app launch)
+
+  // text, icons, and other content
+  contentPrimary: '#2E3338', // main content on primary background
+  contentSecondary: '#757575', // supporting context on primary background
+  contentTertiary: '#FFFFFF', // content on colored backgrounds
+  textLink: '#757575', // underlined text links on primary background
+
+  // borders, shadows, highlights, visual effects
+  borderPrimary: '#E6E6E6', // Border color used to create emphasis or highlight key areas.
+  borderSecondary: '#E6E6E6', // Border color used to define or separate secondary content.
+  softShadow: 'rgba(156, 164, 169, 0.4)',
+  lightShadow: 'rgba(48, 46, 37, 0.15)',
+  barShadow: 'rgba(129, 134, 139, 0.5)',
+  skeletonPlaceholderHighlight: '#FFFFFF', // animated highlight color on skeleton loaders
+  skeletonPlaceholderBackground: '#E6E6E6', // background color on skeleton loaders
+  loadingIndicator: '#1AB775', // spinner or loading indicator
+
+  // interactive elements
+  navigationTopPrimary: '#2E3338', // color for text and icons on top navigation
+  navigationTopSecondary: '#757575', // secondary color for text and icons on top navigation
+  navigationBottomPrimary: '#2E3338', // color for text and icons on bottom navigation
+  navigationBottomSecondary: '#757575', // secondary color for text and icons on bottom navigation
+  bottomSheetHandle: '#757575', // color for bottom sheet handle
+  buttonPrimaryBackground: '#2E3338', // Background color for primary buttons (high-priority actions).
+  buttonPrimaryContent: '#FFFFFF', // Text and icon color for primary buttons.
+  buttonPrimaryBorder: '#2E3338', // Border color for primary buttons.
+  buttonSecondaryBackground: '#F8F9F9', // Background color for secondary buttons (less emphasized actions).
+  buttonSecondaryContent: '#2E3338', // Text and icon color for secondary buttons.
+  buttonSecondaryBorder: '#E6E6E6', // Border color for secondary buttons.
+  buttonTertiaryBackground: '#FFFFFF', // Background color for tertiary buttons (minimal or low-emphasis actions).
+  buttonTertiaryContent: '#2E3338', // Text and icon color for tertiary buttons.
+  buttonTertiaryBorder: '#E6E6E6', // Border color for tertiary buttons.
+  buttonQuickActionBackground: '#F1FDF1', // Background color for quick action buttons (specialized high-priority actions).
+  buttonQuickActionContent: '#137211', // Text and icon color for quick action buttons.
+  buttonQuickActionBorder: '#F1FDF1', // Border color for quick action buttons.
+  textInputBackground: '#FFFFFF', // Background color for text input fields.
+  qrTabBarPrimary: '#2E3338', // color for text and icons on QR tab bar
+  qrTabBarSecondary: '#FFFFFF', // secondary color for text and icons on QR tab bar
+
+  // statuses and UI feedback colors
+  disabled: '#E6E6E6', // Used for disabled elements that are non-interactive or visually de-emphasized.
+  inactive: '#757575', // Represents inactive or placeholder elements, often less prominent but still visible.
+  info: '#F8F9F9', // Background for neutral or informational states, typically non-critical.
+  successPrimary: '#137211', // Indicates successful actions or positive states, often used for icons or highlights.
+  successSecondary: '#F1FDF1', // Subtle background for success states, such as notifications or banners.
+  warningPrimary: '#9C6E00', // Highlights warning states, used to draw attention to cautionary information.
+  warningSecondary: '#FFF9EA', // Subtle background for warning states, providing gentle emphasis without overpowering.
+  errorPrimary: '#C93717', // Represents error or failure states, used for critical feedback or alerts.
+  errorSecondary: '#FBF2F0', // Subtle background for error states, providing softer emphasis in contexts like modals or notifications.
+
+  // brand colors for decorative elements
+  accent: '#1AB775', // Accent color for emphasizing key elements, such as highlights, icons, or decorative details.
+  secondaryAccent: '#D6FE21', // Secondary accent color for emphasizing key elements, such as highlights, icons, or decorative details.
+  brandGradientLeft: '#26d98a', // Starting color for the brand gradient, used in backgrounds or borders to reinforce brand identity.
+  brandGradientRight: '#ffd52c', // Ending color for the brand gradient, used in backgrounds or borders to reinforce brand identity.
+  contentOnboardingComplete: '#FFFFFF', // Text and image color for onboarding completion screen
+  backgroundOnboardingComplete: '#ff5050', // Background color for onboarding completion screen
+} as const
+
+const themeColors = {
+  ...colors,
+  ...(getAppConfig().themes?.default?.colors ?? {}),
+} as const
+
+export type ColorValue = string
+
+export default themeColors

package/src/styles/fonts.tsx

@@ -0,0 +1,143 @@
+import { StyleSheet } from 'react-native'
+import Colors from 'src/styles/colors'
+
+const Inter = {
+  Regular: 'Inter-Regular',
+  Medium: 'Inter-Medium',
+  SemiBold: 'Inter-SemiBold',
+  Bold: 'Inter-Bold',
+}
+
+/**
+ * Figma TypeScale Styles
+ */
+export const typeScale = StyleSheet.create({
+  displayLarge: {
+    fontFamily: Inter.Bold,
+    fontSize: 80,
+    lineHeight: 80,
+    letterSpacing: -2.4,
+    color: Colors.contentPrimary,
+  },
+  displayMedium: {
+    fontFamily: Inter.Bold,
+    fontSize: 56,
+    lineHeight: 64,
+    letterSpacing: -1.12,
+    color: Colors.contentPrimary,
+  },
+  displaySmall: {
+    fontFamily: Inter.Bold,
+    fontSize: 40,
+    lineHeight: 48,
+    letterSpacing: -0.8,
+    color: Colors.contentPrimary,
+  },
+  titleLarge: {
+    fontFamily: Inter.Bold,
+    fontSize: 32,
+    lineHeight: 40,
+    letterSpacing: -0.32,
+    color: Colors.contentPrimary,
+  },
+  titleMedium: {
+    fontFamily: Inter.Bold,
+    fontSize: 24,
+    lineHeight: 32,
+    color: Colors.contentPrimary,
+  },
+  titleSmall: {
+    fontFamily: Inter.Bold,
+    fontSize: 20,
+    lineHeight: 28,
+    color: Colors.contentPrimary,
+  },
+  labelSemiBoldLarge: {
+    fontFamily: Inter.SemiBold,
+    fontSize: 18,
+    lineHeight: 28,
+    color: Colors.contentPrimary,
+  },
+  labelSemiBoldMedium: {
+    fontFamily: Inter.SemiBold,
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.contentPrimary,
+  },
+  labelSemiBoldSmall: {
+    fontFamily: Inter.SemiBold,
+    fontSize: 14,
+    lineHeight: 20,
+    color: Colors.contentPrimary,
+  },
+  labelSemiBoldXSmall: {
+    fontFamily: Inter.SemiBold,
+    fontSize: 12,
+    lineHeight: 16,
+    color: Colors.contentPrimary,
+  },
+  labelLarge: {
+    fontFamily: Inter.Medium,
+    fontSize: 18,
+    lineHeight: 28,
+    color: Colors.contentPrimary,
+  },
+  labelMedium: {
+    fontFamily: Inter.Medium,
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.contentPrimary,
+  },
+  labelSmall: {
+    fontFamily: Inter.Medium,
+    fontSize: 14,
+    lineHeight: 20,
+    color: Colors.contentPrimary,
+  },
+  labelXSmall: {
+    fontFamily: Inter.Medium,
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.12,
+    color: Colors.contentPrimary,
+  },
+  labelXXSmall: {
+    fontFamily: Inter.Medium,
+    fontSize: 10,
+    lineHeight: 12,
+    letterSpacing: 0.2,
+    color: Colors.contentPrimary,
+  },
+  bodyLarge: {
+    fontFamily: Inter.Regular,
+    fontSize: 18,
+    lineHeight: 28,
+    color: Colors.contentPrimary,
+  },
+  bodyMedium: {
+    fontFamily: Inter.Regular,
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.contentPrimary,
+  },
+  bodySmall: {
+    fontFamily: Inter.Regular,
+    fontSize: 14,
+    lineHeight: 20,
+    color: Colors.contentPrimary,
+  },
+  bodyXSmall: {
+    fontFamily: Inter.Regular,
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.12,
+    color: Colors.contentPrimary,
+  },
+  bodyXXSmall: {
+    fontFamily: Inter.Regular,
+    fontSize: 10,
+    lineHeight: 12,
+    letterSpacing: 0.2,
+    color: Colors.contentPrimary,
+  },
+})

package/src/styles/hapticFeedback.ts

@@ -0,0 +1,27 @@
+import ReactNativeHapticFeedback, { HapticFeedbackTypes } from 'react-native-haptic-feedback'
+import { hapticFeedbackEnabledSelector } from 'src/app/selectors'
+import { store } from 'src/redux/store'
+
+const options = {
+  enableVibrateFallback: false,
+  ignoreAndroidSystemSettings: false,
+}
+
+const triggerHapticFeedback = (type: HapticFeedbackTypes) => {
+  const hapticFeedbackEnabled = hapticFeedbackEnabledSelector(store.getState())
+  if (hapticFeedbackEnabled) {
+    ReactNativeHapticFeedback.trigger(type, options)
+  }
+}
+
+export const vibrateInformative = () => {
+  triggerHapticFeedback(HapticFeedbackTypes.impactMedium)
+}
+
+export const vibrateSuccess = () => {
+  triggerHapticFeedback(HapticFeedbackTypes.notificationSuccess)
+}
+
+export const vibrateError = () => {
+  triggerHapticFeedback(HapticFeedbackTypes.notificationError)
+}

package/src/styles/progressDots.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native'
+import colors from 'src/styles/colors'
+
+const CIRCLE_SIZE = 5
+
+const circle = {
+  flex: 0,
+  height: CIRCLE_SIZE,
+  width: CIRCLE_SIZE,
+  borderRadius: CIRCLE_SIZE,
+  marginHorizontal: 3,
+}
+
+export default StyleSheet.create({
+  circlePassive: {
+    ...circle,
+    backgroundColor: colors.disabled,
+  },
+  circleActive: {
+    ...circle,
+    backgroundColor: colors.accent,
+  },
+})