wallet-stack 1.0.0-alpha.121

package/src/i18n/saga.test.ts

@@ -0,0 +1,106 @@
+import i18n from 'i18next'
+import DeviceInfo from 'react-native-device-info'
+import { expectSaga } from 'redux-saga-test-plan'
+import { EffectProviders, StaticProvider } from 'redux-saga-test-plan/providers'
+import { call, select } from 'redux-saga/effects'
+import { getAppConfig } from 'src/appConfig'
+import { saveOtaTranslations } from 'src/i18n/otaTranslations'
+import { handleFetchOtaTranslations } from 'src/i18n/saga'
+import {
+  currentLanguageSelector,
+  otaTranslationsAppVersionSelector,
+  otaTranslationsLanguageSelector,
+  otaTranslationsLastUpdateSelector,
+} from 'src/i18n/selectors'
+import { otaTranslationsUpdated } from 'src/i18n/slice'
+
+jest.mock('@crowdin/ota-client', () => {
+  return function () {
+    return {
+      getManifestTimestamp: jest.fn(() => 123456),
+      getStringsByLocale: jest.fn((langCode: string) => {
+        if (langCode === 'en' || langCode === 'de') {
+          return { someNamespace: { someKey: 'someValue ' } }
+        }
+        throw new Error('Unsupported language')
+      }),
+      getContent: jest.fn(() => ({
+        en: ['main/locales/en-US/translation.json'],
+        de: ['main/locales/de/translation.json'],
+      })),
+    }
+  }
+})
+
+jest.mock('i18next', () => ({
+  addResourceBundle: jest.fn(),
+}))
+
+const MockedI18n = jest.mocked(i18n)
+
+describe('i18n sagas', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('handles fetching over the air translations', async () => {
+    const translations = { someNamespace: { someKey: 'someValue ' } }
+    const timestamp = 123456
+    const appVersion = '1.0.0'
+    const mockedVersion = DeviceInfo.getVersion as jest.MockedFunction<typeof DeviceInfo.getVersion>
+    mockedVersion.mockImplementation(() => appVersion)
+    const defaultProviders: (EffectProviders | StaticProvider)[] = [
+      [
+        call(getAppConfig),
+        { experimental: { otaTranslations: { crowdinDistributionHash: 'hash' } } },
+      ],
+      [select(otaTranslationsAppVersionSelector), appVersion],
+      [select(otaTranslationsLanguageSelector), 'en-US'],
+      [select(currentLanguageSelector), 'en-US'],
+      [select(otaTranslationsLastUpdateSelector), timestamp],
+      [call(saveOtaTranslations, { 'en-US': translations }), null],
+    ]
+
+    // last fetched translations are outdated
+    await expectSaga(handleFetchOtaTranslations)
+      .provide([[select(otaTranslationsLastUpdateSelector), 0], ...defaultProviders])
+      .put(
+        otaTranslationsUpdated({
+          otaTranslationsLastUpdate: timestamp,
+          otaTranslationsAppVersion: appVersion,
+          otaTranslationsLanguage: 'en-US',
+        })
+      )
+      .run()
+
+    // last fetched translations are for a different language
+    await expectSaga(handleFetchOtaTranslations)
+      .provide([
+        [select(currentLanguageSelector), 'de'],
+        [call(saveOtaTranslations, { de: translations }), null],
+        ...defaultProviders,
+      ])
+      .put(
+        otaTranslationsUpdated({
+          otaTranslationsLastUpdate: timestamp,
+          otaTranslationsAppVersion: appVersion,
+          otaTranslationsLanguage: 'de',
+        })
+      )
+      .run()
+
+    // last fetched translations are for a previous app version
+    await expectSaga(handleFetchOtaTranslations)
+      .provide([[select(otaTranslationsAppVersionSelector), '0.9.0'], ...defaultProviders])
+      .put(
+        otaTranslationsUpdated({
+          otaTranslationsLastUpdate: timestamp,
+          otaTranslationsAppVersion: appVersion,
+          otaTranslationsLanguage: 'en-US',
+        })
+      )
+      .run()
+
+    expect(MockedI18n.addResourceBundle).toHaveBeenCalledTimes(3)
+  })
+})

package/src/i18n/saga.ts

@@ -0,0 +1,92 @@
+import OtaClient from '@crowdin/ota-client'
+import i18n from 'i18next'
+import DeviceInfo from 'react-native-device-info'
+import { getAppConfig } from 'src/appConfig'
+import { saveOtaTranslations } from 'src/i18n/otaTranslations'
+import {
+  currentLanguageSelector,
+  otaTranslationsAppVersionSelector,
+  otaTranslationsLanguageSelector,
+  otaTranslationsLastUpdateSelector,
+} from 'src/i18n/selectors'
+import { otaTranslationsUpdated, setLanguage } from 'src/i18n/slice'
+import Logger from 'src/utils/Logger'
+import { safely } from 'src/utils/safely'
+import { call, put, select, spawn, takeLatest } from 'typed-redux-saga'
+
+const TAG = 'i18n/saga'
+
+export function* handleFetchOtaTranslations() {
+  const appConfig = yield* call(getAppConfig)
+  const otaTranslationsConfig = appConfig.experimental?.otaTranslations
+  if (otaTranslationsConfig === undefined) {
+    Logger.debug(`${TAG}@handleFetchOtaTranslations`, 'OTA translations disabled')
+    return
+  }
+
+  try {
+    const currentLanguage = yield* select(currentLanguageSelector)
+    if (!currentLanguage) {
+      // this is true on first app install if the language cannot be
+      // automatically detected, we should not proceed without a language
+      return
+    }
+
+    const otaClient = new OtaClient(otaTranslationsConfig.crowdinDistributionHash)
+    const crowdinContent = yield* call([otaClient, otaClient.getContent])
+
+    // note that the Crowdin language codes are different from the app
+    // language codes so we need to map them. unfortunately the mapping is not
+    // publically exposed so it is a little cumbersome, and we derive it from
+    // getContent
+    const translationPathRegex = new RegExp(`main/locales/${currentLanguage}/translation\\.json`)
+    const crowdinLanguageCode = Object.entries(crowdinContent).find(([_, paths]) =>
+      paths.some((path) => translationPathRegex.test(path))
+    )?.[0]
+
+    if (!crowdinLanguageCode) {
+      Logger.error(
+        `${TAG}@handleFetchOtaTranslations`,
+        `Failed to find Crowdin language code for app language ${currentLanguage}`
+      )
+      return
+    }
+
+    const lastFetchLanguage = yield* select(otaTranslationsLanguageSelector)
+    const lastFetchTime = yield* select(otaTranslationsLastUpdateSelector)
+    const timestamp = yield* call([otaClient, otaClient.getManifestTimestamp])
+    const lastFetchAppVersion = yield* select(otaTranslationsAppVersionSelector)
+
+    if (
+      lastFetchLanguage !== currentLanguage ||
+      lastFetchTime !== timestamp ||
+      DeviceInfo.getVersion() !== lastFetchAppVersion
+    ) {
+      const translations = yield* call(
+        [otaClient, otaClient.getStringsByLocale],
+        crowdinLanguageCode
+      )
+      i18n.addResourceBundle(currentLanguage, 'translation', translations, true, true)
+
+      yield* call(saveOtaTranslations, { [currentLanguage]: translations })
+      yield* put(
+        otaTranslationsUpdated({
+          otaTranslationsLastUpdate: timestamp,
+          otaTranslationsAppVersion: DeviceInfo.getVersion(),
+          otaTranslationsLanguage: currentLanguage,
+        })
+      )
+    }
+  } catch (error) {
+    Logger.error(`${TAG}@handleFetchOtaTranslations`, 'Failed to fetch OTA translations', error)
+  }
+}
+
+export function* watchOtaTranslations() {
+  yield* takeLatest([setLanguage.type], safely(handleFetchOtaTranslations))
+}
+
+export function* i18nSaga() {
+  yield* spawn(handleFetchOtaTranslations)
+  yield* spawn(watchOtaTranslations)
+}

package/src/i18n/selectors.ts

@@ -0,0 +1,12 @@
+import { RootState } from 'src/redux/reducers'
+
+export const currentLanguageSelector = (state: RootState) => state.i18n.language
+
+export const otaTranslationsLastUpdateSelector = (state: RootState) =>
+  state.i18n.otaTranslationsLastUpdate
+
+export const otaTranslationsAppVersionSelector = (state: RootState) =>
+  state.i18n.otaTranslationsAppVersion
+
+export const otaTranslationsLanguageSelector = (state: RootState) =>
+  state.i18n.otaTranslationsLanguage

package/src/i18n/slice.ts

@@ -0,0 +1,46 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { getRehydratePayload, REHYDRATE, RehydrateAction } from 'src/redux/persist-helper'
+
+interface State {
+  language: string | null
+  otaTranslationsLastUpdate: number
+  otaTranslationsAppVersion: string
+  otaTranslationsLanguage: string
+}
+
+const initialState: State = {
+  language: null,
+  otaTranslationsLastUpdate: 0,
+  otaTranslationsAppVersion: '0',
+  otaTranslationsLanguage: '',
+}
+
+interface OtaTranslationsUpdatedAction {
+  otaTranslationsLastUpdate: number
+  otaTranslationsAppVersion: string
+  otaTranslationsLanguage: string
+}
+
+export const slice = createSlice({
+  name: 'i18n',
+  initialState,
+  reducers: {
+    otaTranslationsUpdated: (state, action: PayloadAction<OtaTranslationsUpdatedAction>) => ({
+      ...state,
+      ...action.payload,
+    }),
+    setLanguage: (state, action: PayloadAction<State['language']>) => {
+      state.language = action.payload
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(REHYDRATE, (state, action: RehydrateAction) => ({
+      ...state,
+      ...getRehydratePayload(action, 'i18n'),
+    }))
+  },
+})
+
+export const { otaTranslationsUpdated, setLanguage } = slice.actions
+
+export default slice.reducer

package/src/i18n/useChangeLanguage.test.tsx

@@ -0,0 +1,53 @@
+import { renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { Provider } from 'react-redux'
+import i18n from 'src/i18n'
+import * as I18nSlice from 'src/i18n/slice'
+import useChangeLanguage from 'src/i18n/useChangeLanguage'
+import Logger from 'src/utils/Logger'
+import { createMockStore } from 'test/utils'
+
+jest.mock('src/i18n')
+
+const mockedI18n = jest.mocked(i18n)
+
+const setLanguageSpy = jest.spyOn(I18nSlice, 'setLanguage')
+const loggerErrorSpy = jest.spyOn(Logger, 'error')
+
+const renderHookWithProvider = () => {
+  const store = createMockStore()
+  return renderHook(() => useChangeLanguage(), {
+    wrapper: (component) => (
+      <Provider store={store}>{component?.children ? component.children : component}</Provider>
+    ),
+  })
+}
+
+describe('useChangeLanguage', () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should handle changing language', async () => {
+    const changeLanguageSpy = jest.fn().mockResolvedValue(true)
+    mockedI18n.changeLanguage.mockImplementationOnce(changeLanguageSpy)
+
+    const { result } = renderHookWithProvider()
+    await result.current('pt-BR')
+
+    expect(setLanguageSpy).toHaveBeenCalledWith('pt-BR')
+    expect(changeLanguageSpy).toHaveBeenCalledWith('pt-BR')
+  })
+
+  it('should handle error when changing language', async () => {
+    const changeLanguageSpy = jest.fn().mockRejectedValue(true)
+    mockedI18n.changeLanguage.mockImplementationOnce(changeLanguageSpy)
+
+    const { result } = renderHookWithProvider()
+    await result.current('pt-BR')
+
+    expect(setLanguageSpy).toHaveBeenCalledWith('pt-BR')
+    expect(changeLanguageSpy).toHaveBeenCalledWith('pt-BR')
+    expect(loggerErrorSpy).toHaveBeenCalledTimes(1)
+  })
+})

package/src/i18n/useChangeLanguage.ts

@@ -0,0 +1,19 @@
+import i18n from 'src/i18n'
+import { setLanguage } from 'src/i18n/slice'
+import { useDispatch } from 'src/redux/hooks'
+import Logger from 'src/utils/Logger'
+
+const TAG = 'i18n/actions'
+
+export default function useChangeLanguage() {
+  const dispatch = useDispatch()
+
+  const handleChangeLanguage = async (language: string | null) => {
+    dispatch(setLanguage(language))
+    return i18n
+      .changeLanguage(language || '')
+      .catch((reason: any) => Logger.error(TAG, 'Failed to change i18n language', reason))
+  }
+
+  return handleChangeLanguage
+}

package/src/icons/Activity.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import colors, { ColorValue } from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  size?: number
+  color?: ColorValue
+}
+
+function Activity({ color = colors.contentPrimary, size = 24 }: Props) {
+  return (
+    <Svg width={size} height={size} fill="none" viewBox="0 0 24 24">
+      <Path
+        fill={color}
+        d="M8 17a.968.968 0 0 0 .713-.288A.964.964 0 0 0 9 16a.968.968 0 0 0-.288-.713A.964.964 0 0 0 8 15a.968.968 0 0 0-.713.288A.964.964 0 0 0 7 16c0 .283.096.521.288.713.192.192.43.288.712.287Zm0-4a.968.968 0 0 0 .713-.288A.964.964 0 0 0 9 12a.968.968 0 0 0-.288-.713A.964.964 0 0 0 8 11a.968.968 0 0 0-.713.288A.964.964 0 0 0 7 12c0 .283.096.521.288.713.192.192.43.288.712.287Zm0-4a.968.968 0 0 0 .713-.288A.964.964 0 0 0 9 8a.968.968 0 0 0-.288-.713A.964.964 0 0 0 8 7a.968.968 0 0 0-.713.288A.964.964 0 0 0 7 8c0 .283.096.521.288.713.192.192.43.288.712.287Zm3 8h6v-2h-6v2Zm0-4h6v-2h-6v2Zm0-4h6V7h-6v2ZM5 21c-.55 0-1.021-.196-1.413-.588A1.922 1.922 0 0 1 3 19V5c0-.55.196-1.021.588-1.413A1.922 1.922 0 0 1 5 3h14c.55 0 1.021.196 1.413.588.392.392.588.863.587 1.412v14c0 .55-.196 1.021-.588 1.413A1.922 1.922 0 0 1 19 21H5Zm0-2h14V5H5v14Z"
+      />
+    </Svg>
+  )
+}
+
+export default React.memo(Activity)

package/src/icons/Apple.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors from 'src/styles/colors'
+
+const AppleIcon = ({ color = Colors.contentPrimary }) => (
+  <Svg width={32} height={32} viewBox="0 0 32 32" fill="none">
+    <Path
+      fill={color}
+      d="M22.442 24.531c-1.12 1.055-2.343.889-3.52.389-1.246-.511-2.388-.534-3.703 0-1.645.689-2.514.489-3.497-.389-5.577-5.588-4.754-14.098 1.577-14.41 1.543.078 2.617.823 3.52.89 1.349-.267 2.64-1.034 4.08-.934 1.726.133 3.029.8 3.886 2-3.566 2.078-2.72 6.644.548 7.921-.651 1.667-1.497 3.322-2.902 4.544l.011-.011Zm-5.737-14.476c-.171-2.477 1.897-4.522 4.274-4.722.332 2.867-2.674 5-4.274 4.722Z"
+    />
+  </Svg>
+)
+
+export default AppleIcon

package/src/icons/ArrowDown.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  color?: ColorValue
+  size?: number
+}
+
+const ArrowDown = ({ color = Colors.contentPrimary, size = 24 }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M11.053 4.5L12.947 4.5L12.947 15.8636L18.1553 10.6553L19.5 12L12 19.5L4.5 12L5.8447 10.6553L11.053 15.8636L11.053 4.5Z"
+      fill={color}
+    />
+  </Svg>
+)
+
+export default React.memo(ArrowDown)

package/src/icons/ArrowRightThick.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  color?: ColorValue
+  size?: number
+}
+
+const ArrowRightThick = ({ color = colors.contentPrimary, size = 24 }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M14 18L12.6 16.55L16.15 13H4V11H16.15L12.6 7.45L14 6L20 12L14 18Z" fill={color} />
+  </Svg>
+)
+
+export default React.memo(ArrowRightThick)

package/src/icons/Attention.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors, { ColorValue } from 'src/styles/colors'
+
+const AttentionIcon = ({
+  color = Colors.warningPrimary,
+  size = 16,
+  testId,
+}: {
+  color?: ColorValue
+  size?: number
+  testId?: string
+}) => (
+  <Svg width={size} height={size} fill="none" testID={testId} viewBox="0 0 16 16">
+    <Path
+      d="M7.2 10.4h1.6V12H7.2v-1.6Zm0-6.4h1.6v4.8H7.2V4Zm.792-4C3.576 0 0 3.584 0 8s3.576 8 7.992 8C12.416 16 16 12.416 16 8s-3.584-8-8.008-8ZM8 14.4A6.398 6.398 0 0 1 1.6 8c0-3.536 2.864-6.4 6.4-6.4 3.536 0 6.4 2.864 6.4 6.4 0 3.536-2.864 6.4-6.4 6.4Z"
+      fill={color}
+    />
+  </Svg>
+)
+
+export default AttentionIcon

package/src/icons/BackChevron.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { ColorValue } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import Colors from 'src/styles/colors'
+
+export interface Props {
+  height?: number
+  color?: ColorValue
+}
+
+function BackChevron({ color = Colors.contentPrimary, height = 16 }: Props) {
+  return (
+    <Svg height={height} width={height / 2} viewBox="0 0 8 16" fill="none" testID="BackChevron">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.707 13.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L2.414 7l5.293 5.293a1 1 0 0 1 0 1.414Z"
+        fill={color}
+      />
+    </Svg>
+  )
+}
+
+export default BackChevron

package/src/icons/Backspace.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  height?: number
+  width?: number
+  color?: string
+}
+
+export default class Backspace extends React.PureComponent<Props> {
+  render() {
+    const { height = 30, width = 30, color = colors.contentPrimary } = this.props
+    return (
+      <Svg
+        xmlns="http://www.w3.org/2000/svg"
+        height={height}
+        width={width}
+        viewBox="0 0 35 18"
+        fill="none"
+      >
+        <Path
+          d="M1.82198 9.7422L9.57436 16.7422C9.75813 16.9081 9.99693 17 10.2445 17H33C33.5523 17 34 16.5523 34 16V2C34 1.44772 33.5523 1 33 1H10.2445C9.99693 1 9.75813 1.09186 9.57436 1.25779L1.82198 8.25779C1.38221 8.65488 1.38221 9.34512 1.82198 9.7422Z"
+          stroke={color}
+          strokeWidth="3"
+        />
+        <Path d="M17 5L25 13M17 13L25 5" stroke={color} strokeWidth="3" />
+      </Svg>
+    )
+  }
+}

package/src/icons/BankIcon.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  height?: number
+  width?: number
+  color?: string
+}
+
+export default class BankIcon extends React.PureComponent<Props> {
+  render() {
+    const { height = 32, width = 32, color = colors.accent } = this.props
+    return (
+      <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
+        <Path
+          d="M11.2852 0.594128C11.0584 0.424838 10.783 0.333374 10.5 0.333374C10.217 0.333374 9.9416 0.424838 9.71483 0.594128L0.414167 7.53696C-0.373333 8.12438 0.0425834 9.37563 1.02433 9.37563H19.9763C20.9586 9.37563 21.3739 8.12438 20.587 7.53696L11.2852 0.594128ZM10.5 6.16788C10.1906 6.16788 9.89384 6.04496 9.67504 5.82617C9.45625 5.60738 9.33333 5.31063 9.33333 5.00121C9.33333 4.69179 9.45625 4.39505 9.67504 4.17625C9.89384 3.95746 10.1906 3.83454 10.5 3.83454C10.8094 3.83454 11.1062 3.95746 11.325 4.17625C11.5438 4.39505 11.6667 4.69179 11.6667 5.00121C11.6667 5.31063 11.5438 5.60738 11.325 5.82617C11.1062 6.04496 10.8094 6.16788 10.5 6.16788ZM0 20.3125C0 18.6209 1.37083 17.25 3.0625 17.25H9.9995C9.56118 18.0026 9.33124 18.8583 9.33333 19.7292C9.33333 20.5167 9.51708 21.2605 9.842 21.9167H0.729167C0.326667 21.9167 0 21.59 0 21.1875V20.3125ZM11.6667 15.5607C12.3718 15.1389 13.1783 14.9166 14 14.9173V10.5423H11.6667V15.5607ZM16.3333 14.9173H18.6667V10.5423H16.3333V14.9173ZM4.66667 16.084H2.33333V10.5423H4.66667V16.084ZM7 10.5423V16.084H9.33333V10.5423H7ZM14.1458 16.084C13.6632 16.0779 13.1842 16.1676 12.7365 16.3481C12.2889 16.5286 11.8815 16.7961 11.5381 17.1353C11.1946 17.4744 10.922 17.8783 10.7358 18.3237C10.5497 18.769 10.4539 19.2468 10.4539 19.7295C10.4539 20.2122 10.5497 20.69 10.7358 21.1353C10.922 21.5807 11.1946 21.9846 11.5381 22.3237C11.8815 22.6629 12.2889 22.9304 12.7365 23.1109C13.1842 23.2914 13.6632 23.3811 14.1458 23.375H15.0208C15.2142 23.375 15.3997 23.2982 15.5364 23.1615C15.6732 23.0247 15.75 22.8393 15.75 22.6459C15.75 22.4525 15.6732 22.267 15.5364 22.1303C15.3997 21.9935 15.2142 21.9167 15.0208 21.9167H14.1458C13.5657 21.9167 13.0093 21.6862 12.599 21.276C12.1888 20.8658 11.9583 20.3094 11.9583 19.7292C11.9583 19.149 12.1888 18.5926 12.599 18.1824C13.0093 17.7722 13.5657 17.5417 14.1458 17.5417H15.0208C15.2142 17.5417 15.3997 17.4649 15.5364 17.3281C15.6732 17.1914 15.75 17.0059 15.75 16.8125C15.75 16.6192 15.6732 16.4337 15.5364 16.2969C15.3997 16.1602 15.2142 16.0834 15.0208 16.0834H14.1458V16.084ZM19.6875 16.084C20.1701 16.0779 20.6491 16.1676 21.0968 16.3481C21.5444 16.5286 21.9518 16.7961 22.2953 17.1353C22.6387 17.4744 22.9114 17.8783 23.0975 18.3237C23.2836 18.769 23.3795 19.2468 23.3795 19.7295C23.3795 20.2122 23.2836 20.69 23.0975 21.1353C22.9114 21.5807 22.6387 21.9846 22.2953 22.3237C21.9518 22.6629 21.5444 22.9304 21.0968 23.1109C20.6491 23.2914 20.1701 23.3811 19.6875 23.375H18.8125C18.6191 23.375 18.4336 23.2982 18.2969 23.1615C18.1602 23.0247 18.0833 22.8393 18.0833 22.6459C18.0833 22.4525 18.1602 22.267 18.2969 22.1303C18.4336 21.9935 18.6191 21.9167 18.8125 21.9167H19.6875C20.2677 21.9167 20.8241 21.6862 21.2343 21.276C21.6445 20.8658 21.875 20.3094 21.875 19.7292C21.875 19.149 21.6445 18.5926 21.2343 18.1824C20.8241 17.7722 20.2677 17.5417 19.6875 17.5417H18.8125C18.6191 17.5417 18.4336 17.4649 18.2969 17.3281C18.1602 17.1914 18.0833 17.0059 18.0833 16.8125C18.0833 16.6192 18.1602 16.4337 18.2969 16.2969C18.4336 16.1602 18.6191 16.0834 18.8125 16.0834H19.6875V16.084ZM13.4167 19.7292C13.4167 19.3261 13.7433 19 14.1458 19H19.6875C19.8809 19 20.0664 19.0769 20.2031 19.2136C20.3398 19.3504 20.4167 19.5358 20.4167 19.7292C20.4167 19.9226 20.3398 20.1081 20.2031 20.2448C20.0664 20.3816 19.8809 20.4584 19.6875 20.4584H14.1458C13.7433 20.4584 13.4167 20.1317 13.4167 19.7292Z"
+          fill={color}
+        />
+      </Svg>
+    )
+  }
+}

package/src/icons/Celebration.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import Colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  size?: number
+  color?: string
+}
+
+const Celebration = ({ size = 24, color = Colors.contentPrimary }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      fill={color}
+      d="M2 22 7 8l9 9-14 5Zm3.3-3.3 7.05-2.5-4.55-4.55-2.5 7.05Zm9.25-6.15L13.5 11.5l5.6-5.6a2.624 2.624 0 0 1 1.925-.8c.75 0 1.392.267 1.925.8l.6.6-1.05 1.05-.6-.6a1.187 1.187 0 0 0-.875-.35c-.35 0-.642.117-.875.35l-5.6 5.6Zm-4-4L9.5 7.5l.6-.6c.233-.233.35-.517.35-.85 0-.333-.117-.617-.35-.85l-.65-.65L10.5 3.5l.65.65c.533.533.8 1.167.8 1.9 0 .733-.267 1.367-.8 1.9l-.6.6Zm2 2L11.5 9.5l3.6-3.6c.233-.233.35-.525.35-.875s-.117-.642-.35-.875l-1.6-1.6 1.05-1.05 1.6 1.6c.533.533.8 1.175.8 1.925s-.267 1.392-.8 1.925l-3.6 3.6Zm4 4L15.5 13.5l1.6-1.6a2.624 2.624 0 0 1 1.925-.8c.75 0 1.392.267 1.925.8l1.6 1.6-1.05 1.05-1.6-1.6a1.187 1.187 0 0 0-.875-.35c-.35 0-.642.117-.875.35l-1.6 1.6Z"
+    />
+  </Svg>
+)
+export default Celebration

package/src/icons/CheckCircle.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  size?: number
+  color?: string
+  testID?: string
+}
+
+const CheckCircle = ({ size = 24, color = Colors.contentPrimary, testID }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" testID={testID}>
+    <Path
+      fill={color}
+      d="m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7c0 .283.092.517.275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2c1.383 0 2.683.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
+    />
+  </Svg>
+)
+export default CheckCircle

package/src/icons/Checkmark.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import colors from 'src/styles/colors'
+import Svg, { Path } from 'svgs'
+
+interface Props {
+  height?: number
+  width?: number
+  color?: string
+  stroke?: boolean
+  testID?: string
+}
+
+export default class Checkmark extends React.PureComponent<Props> {
+  render() {
+    const { height = 32, width = 32, color = colors.accent, stroke = false, testID } = this.props
+    return (
+      <Svg width={width} height={height} viewBox="0 0 24 24" fill="none" testID={testID}>
+        <Path
+          d="M20.5 7.33 9.186 18.643 4 13.458l1.33-1.33 3.856 3.847L19.17 6 20.5 7.33Z"
+          fill={color}
+          stroke={stroke ? color : undefined}
+        />
+      </Svg>
+    )
+  }
+}

package/src/icons/CircleArrowIcon.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import colors from 'src/styles/colors'
+import globalStyles from 'src/styles/styles'
+
+const SIZE = 24
+
+interface Props {
+  style?: ViewStyle
+}
+
+export default function CircleArrowIcon({ style }: Props) {
+  return (
+    <View style={[styles.container, style]}>
+      <Svg width={13} height={9} viewBox="0 0 13 9" fill="none">
+        <Path
+          d="M1 4.5h11m0 0L8.264 1M12 4.5L8.264 8"
+          stroke={colors.contentPrimary}
+          strokeWidth={1.5}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...globalStyles.softShadowLight,
+    backgroundColor: colors.backgroundPrimary,
+    width: SIZE,
+    height: SIZE,
+    borderRadius: SIZE / 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/icons/CircledIcon.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import colors, { ColorValue } from 'src/styles/colors'
+
+interface Props {
+  backgroundColor?: ColorValue
+  radius?: number
+  style?: StyleProp<ViewStyle>
+  children?: React.ReactNode
+  borderColor?: ColorValue
+}
+
+export default function CircledIcon({
+  backgroundColor = colors.accent,
+  radius = 50,
+  borderColor,
+  style,
+  children,
+}: Props) {
+  return (
+    <View
+      style={[
+        {
+          backgroundColor,
+          height: radius,
+          width: radius,
+          borderRadius: radius,
+        },
+        borderColor && {
+          borderColor,
+          borderWidth: 1,
+        },
+        styles.container,
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})