wallet-stack 1.0.0-alpha.121

package/src/identity/saga.test.ts

@@ -0,0 +1,103 @@
+import { expectSaga } from 'redux-saga-test-plan'
+import { select } from 'redux-saga/effects'
+import { showErrorInline } from 'src/alert/actions'
+import { ErrorMessages } from 'src/app/ErrorMessages'
+import {
+  Actions,
+  ValidateRecipientAddressAction,
+  validateRecipientAddressSuccess,
+} from 'src/identity/actions'
+import { AddressValidationType } from 'src/identity/reducer'
+import { watchValidateRecipientAddress } from 'src/identity/saga'
+import { e164NumberToAddressSelector } from 'src/identity/selectors'
+import { currentAccountSelector } from 'src/web3/selectors'
+import {
+  mockAccount,
+  mockAccount2,
+  mockAccountInvite,
+  mockE164NumberInvite,
+  mockE164NumberToAddress,
+  mockInvitableRecipient2,
+} from 'test/values'
+
+describe(watchValidateRecipientAddress, () => {
+  beforeAll(() => {
+    jest.useRealTimers()
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('full validation fails if the inputted address does not belong to the recipient', async () => {
+    const validateAction: ValidateRecipientAddressAction = {
+      type: Actions.VALIDATE_RECIPIENT_ADDRESS,
+      userInputOfFullAddressOrLastFourDigits: mockAccount2,
+      addressValidationType: AddressValidationType.FULL,
+      recipient: mockInvitableRecipient2,
+    }
+
+    await expectSaga(watchValidateRecipientAddress)
+      .provide([
+        [select(currentAccountSelector), mockAccount],
+        [select(e164NumberToAddressSelector), mockE164NumberToAddress],
+      ])
+      .dispatch(validateAction)
+      .put(showErrorInline(ErrorMessages.ADDRESS_VALIDATION_NO_MATCH))
+      .run()
+  })
+
+  it('full validation succeeds if the inputted address belongs to the recipient', async () => {
+    const validateAction: ValidateRecipientAddressAction = {
+      type: Actions.VALIDATE_RECIPIENT_ADDRESS,
+      userInputOfFullAddressOrLastFourDigits: mockAccountInvite,
+      addressValidationType: AddressValidationType.FULL,
+      recipient: mockInvitableRecipient2,
+    }
+
+    await expectSaga(watchValidateRecipientAddress)
+      .provide([
+        [select(currentAccountSelector), mockAccount],
+        [select(e164NumberToAddressSelector), mockE164NumberToAddress],
+      ])
+      .dispatch(validateAction)
+      .put(validateRecipientAddressSuccess(mockE164NumberInvite, mockAccountInvite.toLowerCase()))
+      .run()
+  })
+
+  it('partial validation fails if the inputted address does not belong to the recipient', async () => {
+    const validateAction: ValidateRecipientAddressAction = {
+      type: Actions.VALIDATE_RECIPIENT_ADDRESS,
+      userInputOfFullAddressOrLastFourDigits: mockAccount2.slice(-4),
+      addressValidationType: AddressValidationType.PARTIAL,
+      recipient: mockInvitableRecipient2,
+    }
+
+    await expectSaga(watchValidateRecipientAddress)
+      .provide([
+        [select(currentAccountSelector), mockAccount],
+        [select(e164NumberToAddressSelector), mockE164NumberToAddress],
+      ])
+      .dispatch(validateAction)
+      .put(showErrorInline(ErrorMessages.ADDRESS_VALIDATION_NO_MATCH))
+      .run()
+  })
+
+  it('partial validation succeeds if the inputted address belongs to the recipient', async () => {
+    const validateAction: ValidateRecipientAddressAction = {
+      type: Actions.VALIDATE_RECIPIENT_ADDRESS,
+      userInputOfFullAddressOrLastFourDigits: mockAccountInvite.slice(-4),
+      addressValidationType: AddressValidationType.PARTIAL,
+      recipient: mockInvitableRecipient2,
+    }
+
+    await expectSaga(watchValidateRecipientAddress)
+      .provide([
+        [select(currentAccountSelector), mockAccount],
+        [select(e164NumberToAddressSelector), mockE164NumberToAddress],
+      ])
+      .dispatch(validateAction)
+      .put(validateRecipientAddressSuccess(mockE164NumberInvite, mockAccountInvite.toLowerCase()))
+      .run()
+  })
+})

package/src/identity/saga.ts

@@ -0,0 +1,122 @@
+import { showErrorInline } from 'src/alert/actions'
+import { SendEvents } from 'src/analytics/Events'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { ErrorMessages } from 'src/app/ErrorMessages'
+import {
+  Actions,
+  ValidateRecipientAddressAction,
+  validateRecipientAddressSuccess,
+} from 'src/identity/actions'
+import {
+  doImportContactsWrapper,
+  fetchAddressVerificationSaga,
+  fetchAddressesAndValidateSaga,
+  saveContacts,
+} from 'src/identity/contactMapping'
+import { AddressValidationType } from 'src/identity/reducer'
+import { validateAndReturnMatch } from 'src/identity/secureSend'
+import { e164NumberToAddressSelector } from 'src/identity/selectors'
+import { recipientHasNumber } from 'src/recipients/recipient'
+import Logger from 'src/utils/Logger'
+import { ensureError } from 'src/utils/ensureError'
+import { safely } from 'src/utils/safely'
+import { currentAccountSelector } from 'src/web3/selectors'
+import { cancelled, put, select, spawn, takeEvery, takeLatest, takeLeading } from 'typed-redux-saga'
+
+const TAG = 'identity/saga'
+
+export function* validateRecipientAddressSaga({
+  userInputOfFullAddressOrLastFourDigits,
+  addressValidationType,
+  recipient,
+  requesterAddress,
+}: ValidateRecipientAddressAction) {
+  Logger.debug(TAG, 'Starting Recipient Address Validation')
+  try {
+    if (!recipientHasNumber(recipient)) {
+      throw Error(`Invalid recipient type for Secure Send, does not have e164Number`)
+    }
+
+    const userAddress = yield* select(currentAccountSelector)
+    if (!userAddress) {
+      // This should never happen
+      throw Error(`No userAddress set`)
+    }
+    const e164NumberToAddress = yield* select(e164NumberToAddressSelector)
+    const { e164PhoneNumber } = recipient
+    const possibleRecievingAddresses = e164NumberToAddress[e164PhoneNumber]
+
+    // Should never happen - Secure Send is initiated to deal with
+    // there being several possible addresses
+    if (!possibleRecievingAddresses) {
+      throw Error('There are no possible recipient addresses to validate against')
+    }
+
+    // E164NumberToAddress in redux store only holds verified addresses
+    // Need to add the requester address to the option set in the event
+    // a request is coming from an unverified account
+    if (requesterAddress && !possibleRecievingAddresses.includes(requesterAddress)) {
+      possibleRecievingAddresses.push(requesterAddress)
+    }
+
+    const validatedAddress = validateAndReturnMatch(
+      userInputOfFullAddressOrLastFourDigits,
+      possibleRecievingAddresses,
+      userAddress,
+      addressValidationType
+    )
+
+    AppAnalytics.track(SendEvents.send_secure_complete, {
+      confirmByScan: false,
+      partialAddressValidation: addressValidationType === AddressValidationType.PARTIAL,
+    })
+
+    yield* put(validateRecipientAddressSuccess(e164PhoneNumber, validatedAddress))
+  } catch (err) {
+    const error = ensureError(err)
+    AppAnalytics.track(SendEvents.send_secure_incorrect, {
+      confirmByScan: false,
+      partialAddressValidation: addressValidationType === AddressValidationType.PARTIAL,
+      error: error.message,
+    })
+
+    Logger.error(TAG, 'validateRecipientAddressSaga/Address validation error: ', error)
+    if (Object.values(ErrorMessages).includes(error.message as ErrorMessages)) {
+      yield* put(showErrorInline(error.message as ErrorMessages))
+    } else {
+      yield* put(showErrorInline(ErrorMessages.ADDRESS_VALIDATION_ERROR))
+    }
+  }
+}
+
+function* watchContactMapping() {
+  yield* takeLeading(Actions.IMPORT_CONTACTS, safely(doImportContactsWrapper))
+  yield* takeLatest(
+    Actions.FETCH_ADDRESSES_AND_VALIDATION_STATUS,
+    safely(fetchAddressesAndValidateSaga)
+  )
+}
+
+export function* watchValidateRecipientAddress() {
+  yield* takeLatest(Actions.VALIDATE_RECIPIENT_ADDRESS, safely(validateRecipientAddressSaga))
+}
+
+function* watchFetchAddressVerification() {
+  yield* takeEvery(Actions.FETCH_ADDRESS_VERIFICATION_STATUS, safely(fetchAddressVerificationSaga))
+}
+
+export function* identitySaga() {
+  Logger.debug(TAG, 'Initializing identity sagas')
+  try {
+    yield* spawn(watchContactMapping)
+    yield* spawn(watchValidateRecipientAddress)
+    yield* spawn(watchFetchAddressVerification)
+    yield* spawn(saveContacts) // save contacts on app start
+  } catch (error) {
+    Logger.error(TAG, 'Error initializing identity sagas', error)
+  } finally {
+    if (yield* cancelled()) {
+      Logger.error(TAG, 'identity sagas prematurely cancelled')
+    }
+  }
+}

package/src/identity/secureSend.ts

@@ -0,0 +1,171 @@
+import { ErrorMessages } from 'src/app/ErrorMessages'
+import { AddressValidationType, SecureSendPhoneNumberMapping } from 'src/identity/reducer'
+import { Recipient, recipientHasNumber } from 'src/recipients/recipient'
+import Logger from 'src/utils/Logger'
+
+const TAG = 'identity/secureSend'
+
+// Given addresses can be added and deleted we can't rely on changes in length to signal address changes
+// Not sure if address order in array is consistent so not assuming it
+function newAddressesAdded(oldAddresses: string[], newAddresses: string[]) {
+  const oldAddressesSorted = oldAddresses.sort()
+  const newAddressesSorted = newAddresses.sort()
+
+  for (let i = 0; i < newAddressesSorted.length; i += 1) {
+    if (oldAddressesSorted[i] !== newAddressesSorted[i]) {
+      return true
+    }
+  }
+
+  return false
+}
+
+function last4DigitsAreUnique(addressArr: string[]) {
+  const last4DigitArr = addressArr.map((address) => address.slice(-4).toLowerCase())
+  const last4DigitSet = new Set()
+  last4DigitArr.forEach((endDigits) => last4DigitSet.add(endDigits))
+  return last4DigitArr.length === last4DigitSet.size
+}
+
+// Check if there are multiple addresses but somehow a preferred address hasn't been set yet
+// Should never happen in production but makes the change backwards compatible for testing env
+function accidentallyBypassedValidation(
+  newAddresses: string[] | null,
+  e164Number: string,
+  secureSendPhoneNumberMapping: SecureSendPhoneNumberMapping
+) {
+  const validatedAddress =
+    secureSendPhoneNumberMapping[e164Number] && secureSendPhoneNumberMapping[e164Number].address
+  return newAddresses && newAddresses.length > 1 && !validatedAddress
+}
+
+export function checkIfValidationRequired(
+  oldAddresses: string[],
+  possibleAddresses: string[],
+  userAddress: string,
+  secureSendPhoneNumberMapping: SecureSendPhoneNumberMapping,
+  e164Number: string
+) {
+  // No validation needed if there is only 1 possible address
+  if (possibleAddresses.length < 2) {
+    return AddressValidationType.NONE
+  }
+
+  if (
+    newAddressesAdded(oldAddresses, possibleAddresses) ||
+    accidentallyBypassedValidation(possibleAddresses, e164Number, secureSendPhoneNumberMapping)
+  ) {
+    Logger.debug(TAG, 'Address needs to be validated by user')
+    // Adding user's address so they don't mistakenly verify with last 4 digits of their own address
+    if (last4DigitsAreUnique([userAddress, ...possibleAddresses])) {
+      return AddressValidationType.PARTIAL
+    }
+    return AddressValidationType.FULL
+  }
+
+  return AddressValidationType.NONE
+}
+
+function hasSpecialChars(address: string, addressValidationType: AddressValidationType) {
+  const regex = new RegExp('[^0-9A-Za-z]', 'g')
+  const cleanedAddress = address.replace(regex, '')
+
+  if (cleanedAddress !== address) {
+    const errorMessage =
+      addressValidationType === AddressValidationType.FULL
+        ? ErrorMessages.ADDRESS_VALIDATION_FULL_POORLY_FORMATTED
+        : ErrorMessages.ADDRESS_VALIDATION_PARTIAL_POORLY_FORMATTED
+    throw Error(errorMessage)
+  }
+}
+
+function validateFullAddressAndReturnMatch(
+  userInputtedAddress: string,
+  possibleRecievingAddresses: string[],
+  userAddress: string
+) {
+  if (userInputtedAddress.length !== 42 || userInputtedAddress.slice(0, 2) !== '0x') {
+    throw Error(ErrorMessages.ADDRESS_VALIDATION_FULL_POORLY_FORMATTED)
+  }
+
+  if (userInputtedAddress === userAddress) {
+    throw Error(ErrorMessages.ADDRESS_VALIDATION_FULL_OWN_ADDRESS)
+  }
+
+  if (!possibleRecievingAddresses.includes(userInputtedAddress)) {
+    throw Error(ErrorMessages.ADDRESS_VALIDATION_NO_MATCH)
+  }
+
+  return userInputtedAddress
+}
+
+function validatePartialAddressAndReturnMatch(
+  lastFourDigitsOfUserInputtedAddress: string,
+  possibleRecievingAddresses: string[],
+  userAddress: string
+) {
+  if (lastFourDigitsOfUserInputtedAddress.length !== 4) {
+    throw Error(ErrorMessages.ADDRESS_VALIDATION_PARTIAL_POORLY_FORMATTED)
+  }
+
+  if (lastFourDigitsOfUserInputtedAddress === userAddress.slice(-4)) {
+    throw Error(ErrorMessages.ADDRESS_VALIDATION_PARTIAL_OWN_ADDRESS)
+  }
+
+  const targetAddress = possibleRecievingAddresses.find(
+    (address) => address.slice(-4) === lastFourDigitsOfUserInputtedAddress
+  )
+
+  if (!targetAddress) {
+    throw Error(ErrorMessages.ADDRESS_VALIDATION_NO_MATCH)
+  }
+
+  return targetAddress
+}
+
+export function validateAndReturnMatch(
+  userInputOfFullAddressOrLastFourDigits: string,
+  possibleRecievingAddresses: string[],
+  userAddress: string,
+  addressValidationType: AddressValidationType
+) {
+  const userInput = userInputOfFullAddressOrLastFourDigits.toLowerCase()
+  const possibleAddresses = possibleRecievingAddresses.map((address) => address.toLowerCase())
+  const userOwnAddress = userAddress.toLowerCase()
+
+  hasSpecialChars(userInputOfFullAddressOrLastFourDigits, addressValidationType)
+
+  if (addressValidationType === AddressValidationType.FULL) {
+    return validateFullAddressAndReturnMatch(userInput, possibleAddresses, userOwnAddress)
+  }
+  return validatePartialAddressAndReturnMatch(userInput, possibleAddresses, userOwnAddress)
+}
+
+export function getAddressValidationType(
+  recipient: Recipient,
+  secureSendPhoneNumberMapping: SecureSendPhoneNumberMapping
+) {
+  const e164PhoneNumber = recipient.e164PhoneNumber
+
+  if (
+    !e164PhoneNumber ||
+    !secureSendPhoneNumberMapping[e164PhoneNumber] ||
+    !secureSendPhoneNumberMapping[e164PhoneNumber].addressValidationType
+  ) {
+    return AddressValidationType.NONE
+  }
+
+  return secureSendPhoneNumberMapping[e164PhoneNumber].addressValidationType
+}
+
+export function getSecureSendAddress(
+  recipient: Recipient,
+  secureSendPhoneNumberMapping: SecureSendPhoneNumberMapping
+) {
+  const e164PhoneNumber = recipientHasNumber(recipient) ? recipient.e164PhoneNumber : undefined
+  if (!e164PhoneNumber || !secureSendPhoneNumberMapping[e164PhoneNumber]) {
+    return undefined
+  }
+
+  return secureSendPhoneNumberMapping[e164PhoneNumber].address
+}

package/src/identity/selectors.ts

@@ -0,0 +1,16 @@
+import { RootState } from 'src/redux/reducers'
+
+export const e164NumberToAddressSelector = (state: RootState) => state.identity.e164NumberToAddress
+export const addressToVerificationStatusSelector = (state: RootState) =>
+  state.identity.addressToVerificationStatus
+export const addressToE164NumberSelector = (state: RootState) => state.identity.addressToE164Number
+export const secureSendPhoneNumberMappingSelector = (state: RootState) =>
+  state.identity.secureSendPhoneNumberMapping
+export const importContactsProgressSelector = (state: RootState) =>
+  state.identity.importContactsProgress
+export const addressToDisplayNameSelector = (state: RootState) =>
+  state.identity.addressToDisplayName
+export const lastSavedContactsHashSelector = (state: RootState) =>
+  state.identity.lastSavedContactsHash
+export const shouldRefreshStoredPasswordHashSelector = (state: RootState) =>
+  state.identity.shouldRefreshStoredPasswordHash

package/src/identity/types.ts

@@ -0,0 +1,14 @@
+export enum RecipientVerificationStatus {
+  UNVERIFIED = 0,
+  VERIFIED = 1,
+  UNKNOWN = 2,
+}
+
+export enum ImportContactsStatus {
+  Failed = -1,
+  Stopped = 0,
+  Prepping = 1,
+  Importing = 2,
+  Processing = 3,
+  Done = 5,
+}

package/src/images/Blob.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ViewStyle } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+
+interface Props {
+  width?: number
+  height?: number
+  style?: ViewStyle
+}
+
+export default function Blob({ width = 210, height = 212.5, style }: Props) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 210 212.5" fill="none" style={style}>
+      <Path
+        d="M102.846 -29.5006C109.785 -29.5006 116.724 -29.8502 123.638 -29.3508C126.971 -29.1261 130.652 -28.0025 133.388 -26.13C144.53 -18.4399 155.398 -10.3254 166.292 -2.26089C171.167 1.35942 175.693 5.4291 180.593 8.99948C193.277 18.2625 201.832 30.5965 207.776 44.928C210.661 51.894 210.189 59.2594 209.393 66.4501C206.632 91.3429 200.439 115.287 187.979 137.233C179.598 151.989 167.486 163.35 153.608 172.737C149.504 175.509 144.232 177.007 139.282 178.006C129.483 180.003 119.51 182.525 109.636 182.5C96.181 182.475 82.4771 181.276 69.8676 175.709C44.6237 164.548 24.0059 147.945 10.2772 123.451C0.428372 105.924 -2.38205 87.5228 2.02009 67.8233C9.48134 34.5414 27.1396 7.90092 54.3483 -12.0482C67.6044 -21.7607 82.3776 -29.0013 99.3893 -29.7503C100.558 -29.8002 101.727 -29.9251 102.871 -30C102.871 -29.8252 102.871 -29.6504 102.871 -29.4756L102.846 -29.5006Z"
+        fill="#FFD62C"
+      />
+    </Svg>
+  )
+}

package/src/images/Celebration.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+interface Props {
+  width?: number
+  height?: number
+  testID?: string
+}
+
+export default function Celebration({ width = 58, height = 53, testID }: Props) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 58 53" fill="none" testID={testID}>
+      <Path fill="#FD56B5" d="M11.617 22.922 1 52.267l30.61-10.395" />
+      <Path
+        stroke="#000"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.617 22.922 1 52.267l30.61-10.395"
+      />
+      <Path
+        fill="#6E75EE"
+        stroke="#000"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M27.69 26.477c5.654 5.464 8.058 12 5.373 14.598-.74.715-1.794 1.06-3.045 1.064-3.29.015-7.967-2.296-12.062-6.257-5.654-5.464-8.058-12-5.373-14.598 2.688-2.598 9.452-.276 15.106 5.193Z"
+      />
+      <Path
+        stroke="#000"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.148 32.76s8.669-9.555 9.322-18.02M17.952 35.882S37.232 18.483 40.12 6.066M21.187 38.592s15.388-12.395 30.899-11.966M30.719 12.173l1.853-3.9M50.3 20.645l4.411-.474M18.895 14.74l.003-1.205M34.445 25.46l.919-.816M38.931 43.845l1.212.284M25.175 9.514c-3.54-1.826-2.253-4.24-.123-4.367 3.251-.19 3.338-4.909-3.318-4.04M41.038 20.955c-1.644-3.28-.523-5.51 2.257-5.296 2.97.23 7.484 2.323 7.013-3.038-.539-6.13 3.385-6.7 6.692-5.063M41.065 36.892c1.382-3.168 4.289-2.77 5.295-.076 1.005 2.694 4.803 3.838 6.7-.402"
+      />
+    </Svg>
+  )
+}

package/src/images/DivviLogo.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import Colors from 'src/styles/colors'
+
+const DivviLogo = () => (
+  <Svg width={85} height={29} viewBox="0 0 71 24" fill="none">
+    <Path
+      fill={Colors.contentPrimary}
+      d="M18.048 0H5.952A5.952 5.952 0 0 0 0 5.952v12.096A5.952 5.952 0 0 0 5.952 24h12.096A5.952 5.952 0 0 0 24 18.048V5.952A5.952 5.952 0 0 0 18.048 0Z"
+    />
+    <Path
+      fill={Colors.backgroundPrimary}
+      d="M8.845 5.142 5.143 8.844a.807.807 0 0 0 0 1.142l8.876 8.875a.807.807 0 0 0 1.141 0l3.702-3.702a.807.807 0 0 0 0-1.141L9.987 5.142a.807.807 0 0 0-1.142 0ZM17.872 10.445V6.39a.257.257 0 0 0-.256-.256H13.56a.257.257 0 0 0-.18.441l4.056 4.057c.16.16.441.045.441-.18l-.005-.006ZM6.128 13.56v4.056c0 .14.115.256.256.256h4.056c.231 0 .346-.276.18-.441l-4.056-4.057c-.16-.16-.441-.045-.441.18l.005.006Z"
+    />
+    <Path
+      fill={Colors.contentPrimary}
+      d="M28.763 7.95H28V2.72h.641l.21.402c.068-.083.142-.152.223-.21a1.304 1.304 0 0 1 .57-.227c.108-.016.223-.025.345-.025.276 0 .53.048.763.142.235.095.437.227.607.395a1.812 1.812 0 0 1 .546 1.312c0 .26-.048.504-.144.729a1.803 1.803 0 0 1-1.005.977 2.015 2.015 0 0 1-.767.143c-.122 0-.238-.01-.35-.029a1.825 1.825 0 0 1-.322-.078 1.585 1.585 0 0 1-.292-.146 1.55 1.55 0 0 1-.262-.217V7.95Zm0-3.438c0 .185.028.35.083.495.059.144.14.266.243.366.107.1.232.175.376.227.147.052.309.079.486.079s.339-.03.486-.09a1.107 1.107 0 0 0 .618-.614c.058-.143.088-.297.088-.463a1.137 1.137 0 0 0-.721-1.084 1.227 1.227 0 0 0-.471-.089c-.177 0-.34.028-.486.082-.144.052-.27.128-.376.228-.104.1-.184.222-.243.37-.055.144-.083.309-.083.493Zm3.674 0a1.724 1.724 0 0 1 .592-1.315c.185-.166.4-.296.649-.391.248-.095.516-.142.805-.142.288 0 .556.047.804.142.25.095.467.225.65.391.184.166.33.361.436.587.106.225.159.468.159.728 0 .261-.053.504-.16.73-.105.224-.251.42-.436.586a2.04 2.04 0 0 1-.649.387 2.235 2.235 0 0 1-.804.143c-.289 0-.557-.048-.805-.143a2.098 2.098 0 0 1-.649-.387 1.724 1.724 0 0 1-.592-1.315Zm.763 0a1.09 1.09 0 0 0 .376.832c.116.105.251.186.405.246.157.059.324.089.502.089.177 0 .344-.03.5-.09.158-.059.294-.14.41-.245a1.127 1.127 0 0 0 .376-.832 1.127 1.127 0 0 0-.376-.832 1.26 1.26 0 0 0-.41-.248 1.408 1.408 0 0 0-.5-.09c-.178 0-.345.03-.502.09a1.264 1.264 0 0 0-.683.618 1.09 1.09 0 0 0-.098.462Zm8.873-1.791h.816l-1.472 3.558h-.642l-.877-2.584-.94 2.584h-.638l-1.404-3.558h.815l.915 2.556.907-2.556h.71l.88 2.545.93-2.545Zm4.767 2.52v.729a1.947 1.947 0 0 1-.694.295 3.81 3.81 0 0 1-.854.093c-.301 0-.576-.048-.824-.143a1.975 1.975 0 0 1-.641-.39 1.77 1.77 0 0 1-.414-.587 1.835 1.835 0 0 1-.144-.73c0-.26.05-.502.148-.724a1.858 1.858 0 0 1 1.73-1.12c.269 0 .517.044.745.131.23.088.428.21.596.366a1.735 1.735 0 0 1 .539 1.276v.246h-2.98c.02.147.06.282.121.405.063.124.15.23.258.317.112.087.247.156.407.206.162.047.353.071.573.071.248 0 .497-.033.747-.1.251-.068.48-.182.687-.34Zm-1.692-1.898c-.147 0-.28.022-.399.067a1.08 1.08 0 0 0-.315.175.97.97 0 0 0-.338.536h2.1a.834.834 0 0 0-.323-.568.935.935 0 0 0-.315-.157 1.46 1.46 0 0 0-.41-.053Zm4.698-.64.232.764a1.197 1.197 0 0 0-.531-.124c-.18 0-.328.027-.445.082a.62.62 0 0 0-.269.23.952.952 0 0 0-.136.367 2.821 2.821 0 0 0-.039.49V6.28h-.763V2.721h.642l.209.401c.063-.073.124-.137.182-.192a.906.906 0 0 1 .402-.224 1.251 1.251 0 0 1 .516-.004Zm4.251 2.538v.729a1.95 1.95 0 0 1-.694.295 3.806 3.806 0 0 1-.854.093c-.302 0-.576-.048-.824-.143a1.97 1.97 0 0 1-.641-.39 1.763 1.763 0 0 1-.414-.587 1.835 1.835 0 0 1-.144-.73c0-.26.05-.502.148-.724a1.85 1.85 0 0 1 .998-.978c.23-.095.474-.142.732-.142.268 0 .517.044.745.131.23.088.428.21.595.366a1.735 1.735 0 0 1 .54 1.276v.246h-2.98c.02.147.06.282.121.405.064.124.15.23.258.317.112.087.247.156.407.206.161.047.352.071.573.071.248 0 .497-.033.748-.1.25-.068.479-.182.686-.34Zm-1.693-1.898a1.118 1.118 0 0 0-.713.242.962.962 0 0 0-.338.536h2.1a.847.847 0 0 0-.107-.323.744.744 0 0 0-.216-.245.942.942 0 0 0-.316-.157 1.457 1.457 0 0 0-.41-.053ZM57.957 1l.763.338v4.941h-.641l-.21-.401a1.18 1.18 0 0 1-.492.355 1.345 1.345 0 0 1-.304.082 2.215 2.215 0 0 1-1.109-.117 1.9 1.9 0 0 1-.607-.392 1.85 1.85 0 0 1-.542-1.315 1.837 1.837 0 0 1 .542-1.315c.17-.166.372-.297.607-.391a2.142 2.142 0 0 1 1.446-.032 1.317 1.317 0 0 1 .547.359V1Zm0 3.488c0-.185-.029-.35-.087-.495a.966.966 0 0 0-.243-.366 1.031 1.031 0 0 0-.376-.227 1.41 1.41 0 0 0-.482-.079c-.177 0-.339.03-.485.09a1.11 1.11 0 0 0-.377.245 1.125 1.125 0 0 0-.242.37 1.216 1.216 0 0 0-.087.462c0 .168.029.324.087.469.058.142.14.265.242.37.105.104.23.186.377.245.146.06.308.089.485.089s.338-.026.482-.078a.999.999 0 0 0 .618-.597 1.34 1.34 0 0 0 .088-.498Zm3.906 1.791V1l.762.338v1.774a1.256 1.256 0 0 1 .547-.36 2.15 2.15 0 0 1 .68-.11c.278 0 .533.048.766.143.235.094.438.225.607.39a1.835 1.835 0 0 1 .543 1.315 1.826 1.826 0 0 1-.546 1.316c-.17.166-.372.297-.608.392a2.002 2.002 0 0 1-.762.142 2.077 2.077 0 0 1-.661-.107 1.432 1.432 0 0 1-.281-.146 1.404 1.404 0 0 1-.246-.22v.412h-.801Zm.762-1.791c0 .184.029.35.084.497.058.145.14.268.243.37.106.1.232.175.376.228.147.052.308.078.486.078.176 0 .339-.03.485-.09a1.104 1.104 0 0 0 .619-.614c.058-.145.087-.301.087-.47 0-.165-.029-.32-.087-.462a1.104 1.104 0 0 0-.618-.615 1.287 1.287 0 0 0-.486-.089c-.178 0-.34.027-.486.079-.144.052-.27.128-.376.227a1.04 1.04 0 0 0-.243.366c-.056.145-.084.31-.084.495Zm5.04 1.653L66.11 2.72h.797l1.13 2.591 1.185-2.591H70L67.62 8l-.656-.292.702-1.567ZM35.217 9.06l2.238.943V23.2h-1.857l-.457-.933a2.896 2.896 0 0 1-.543.505c-.197.133-.41.244-.638.333a3.19 3.19 0 0 1-.714.19 5.4 5.4 0 0 1-.8.057 4.841 4.841 0 0 1-1.933-.38 4.703 4.703 0 0 1-1.533-1.048 5.101 5.101 0 0 1-1.009-1.58 5.181 5.181 0 0 1-.362-1.943c0-.698.121-1.349.362-1.952a4.983 4.983 0 0 1 1.01-1.57 4.595 4.595 0 0 1 1.523-1.048 4.909 4.909 0 0 1 1.942-.381c.273 0 .537.022.79.067.255.038.499.098.734.18.235.083.457.191.666.324.21.133.403.295.581.486V9.06Zm.02 9.332c0-.445-.068-.841-.2-1.19a2.384 2.384 0 0 0-1.4-1.438 3.056 3.056 0 0 0-1.105-.19c-.4 0-.768.072-1.105.218-.33.14-.612.337-.847.59-.235.255-.419.553-.552.896-.133.342-.2.714-.2 1.114 0 .406.067.784.2 1.133s.317.65.552.904c.235.248.517.445.847.59.337.14.705.21 1.105.21.406 0 .774-.06 1.105-.18.33-.128.612-.312.847-.553.241-.248.425-.546.552-.895.133-.356.2-.759.2-1.21Zm5.122-4.723h2.237V23.2H40.36v-9.531Zm-.248-3.39c0-.19.035-.371.105-.542.076-.172.175-.321.295-.448s.264-.225.428-.295a1.32 1.32 0 0 1 1.076 0 1.338 1.338 0 0 1 .743.743c.07.171.105.352.105.542 0 .19-.035.372-.105.543a1.342 1.342 0 0 1-.743.743 1.424 1.424 0 0 1-1.075 0 1.262 1.262 0 0 1-.429-.295 1.567 1.567 0 0 1-.295-.448 1.423 1.423 0 0 1-.105-.543ZM48.566 23.2l-4.16-9.531h2.39l2.57 6.275 2.704-6.275h2.39L50.128 23.2h-1.562Zm10.398 0-4.161-9.531h2.39l2.57 6.275 2.705-6.275h2.39L60.524 23.2h-1.561Zm7.54-9.531h2.238V23.2h-2.237v-9.531Zm-.247-3.39c0-.19.035-.371.105-.542.076-.172.174-.321.295-.448.12-.127.263-.225.428-.295a1.323 1.323 0 0 1 1.076 0 1.34 1.34 0 0 1 .743.743c.07.171.105.352.105.542 0 .19-.035.372-.105.543a1.342 1.342 0 0 1-.742.743 1.427 1.427 0 0 1-1.077 0 1.262 1.262 0 0 1-.428-.295 1.567 1.567 0 0 1-.295-.448 1.423 1.423 0 0 1-.105-.543Z"
+    />
+  </Svg>
+)
+
+export default DivviLogo

package/src/images/GuideKeyIcon.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import Svg, { Ellipse, Path } from 'svgs'
+
+interface Props {
+  height?: number
+  width?: number
+}
+
+export default class GuideKeyIcon extends React.PureComponent<Props> {
+  render() {
+    const { height = 115, width = 154 } = this.props
+    return (
+      <Svg width={width} height={height} viewBox="0 0 154 115" fill="none">
+        <Path
+          d="M85.88 60.094H71.31m-9.713 8.846v-8.846h9.713m0 0v8.846"
+          stroke="#2E3338"
+          strokeWidth={2}
+        />
+        <Ellipse cx={91.803} cy={60.094} rx={5.923} ry={5.897} stroke="#2E3338" strokeWidth={2} />
+        <Path
+          d="M80.896 15.302c-24.38-1.09-49.05 11.16-64.854 32.729 0-29.571 34.048-46.692 62.78-45.408 28.733 1.283 54.5 22.815 53.601 42.754-15.761-18.078-27.148-28.986-51.527-30.075Z"
+          fill="#FFE768"
+          style={{
+            mixBlendMode: 'multiply',
+          }}
+        />
+        <Path
+          d="M71.675 97.395c23.588 6.231 38.906-.497 58.958-18.222-12.183 22.218-37.095 38.111-64.895 30.769-27.8-7.343-39.09-34.793-29.318-57.202 2.962 18.28 11.667 38.425 35.255 44.655Z"
+          fill="#42D689"
+          style={{
+            mixBlendMode: 'multiply',
+          }}
+        />
+        <Path
+          d="M41.95 47.095c-8.603 18.556-5.09 39.795 5.859 59.551-20.077-10.012-26.532-39.977-16.393-61.847 10.14-21.87 37.142-30.378 52.212-22.863l-.056.011c-14.845 2.973-33.03 6.616-41.622 25.148Z"
+          fill="#FF6F43"
+          style={{
+            mixBlendMode: 'multiply',
+          }}
+        />
+        <Path
+          d="M115.46 59.159c1.019-20.829-7.488-37.09-26.026-50.664 22.892 1.11 38.498 22.012 38.498 50.664s-27.83 46.586-45.013 45.753c17.536-9.616 31.523-24.925 32.541-45.753Z"
+          fill="#92D8FF"
+          style={{
+            mixBlendMode: 'multiply',
+          }}
+        />
+      </Svg>
+    )
+  }
+}

package/src/images/Images.ts

@@ -0,0 +1,22 @@
+export const accountKey1 = require('src/images/assets/account-key-1.png')
+export const accountKey2 = require('src/images/assets/account-key-2.png')
+export const accountKey3 = require('src/images/assets/account-key-3.png')
+export const accountKey4 = require('src/images/assets/account-key-4.png')
+export const biometryFace = require('src/images/assets/biometry-face.png')
+export const biometryFaceId = require('src/images/assets/biometry-face-id.png')
+export const biometryFingerprint = require('src/images/assets/biometry-fingerprint.png')
+export const biometryIris = require('src/images/assets/biometry-iris.png')
+export const biometryTouchId = require('src/images/assets/biometry-touch-id.png')
+export const celoEducation1 = require('src/images/assets/celo-education-1.png')
+export const celoEducation2 = require('src/images/assets/celo-education-2.png')
+export const celoEducation3 = require('src/images/assets/celo-education-3.png')
+export const celoEducation4 = require('src/images/assets/celo-education-4.png')
+export const email = require('src/images/assets/email.png')
+export const fiatExchange = require('src/images/assets/fiat-exchange.png')
+export const getVerified = require('src/images/assets/get-verified.png')
+export const learnCelo = require('src/images/assets/learn-celo.png')
+export const pointsCardBackground = require('src/images/assets/points-card-background.png')
+export const pointsIllustration = require('src/images/assets/points-illustration.png')
+export const walletSafe = require('src/images/assets/wallet-safe.png')
+export const earnCardBackground = require('src/images/assets/earn-card-background.png')
+export const divviPie = require('src/images/assets/pie.png')

package/src/images/Logo.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg'
+import { getAppConfig } from 'src/appConfig'
+import Colors from 'src/styles/colors'
+
+interface Props {
+  size?: number
+  color?: string
+  backgroundColor?: string
+  style?: ViewStyle
+  testID?: string
+  translateY?: number
+}
+
+export default function Logo({
+  style,
+  size = 32,
+  translateY = 0,
+  color = Colors.contentPrimary,
+  backgroundColor = Colors.backgroundPrimary,
+  testID,
+}: Props) {
+  const themesConfig = getAppConfig().themes?.default
+  const CustomLogo = themesConfig?.assets?.brandLogo
+  if (CustomLogo) {
+    return (
+      <View testID={testID} style={[styles.container, style, { transform: [{ translateY }] }]}>
+        <CustomLogo size={size} color={color} />
+      </View>
+    )
+  }
+
+  return (
+    <View testID={testID} style={[styles.container, style, { transform: [{ translateY }] }]}>
+      <Svg width={size} height={size} viewBox="0 0 180 180" fill="none">
+        <G clipPath="url(#a)">
+          <G mask="url(#b)">
+            <Path
+              fill={color}
+              d="M135.357 0H44.643C19.987 0 0 19.987 0 44.643v90.714C0 160.013 19.987 180 44.643 180h90.714C160.013 180 180 160.013 180 135.357V44.643C180 19.987 160.013 0 135.357 0Z"
+            />
+            <Path
+              fill={backgroundColor}
+              d="M66.339 38.568 38.575 66.332a6.055 6.055 0 0 0 0 8.564l66.565 66.564a6.054 6.054 0 0 0 8.563 0l27.764-27.764a6.054 6.054 0 0 0 0-8.563L74.902 38.568a6.055 6.055 0 0 0-8.563 0ZM134.041 78.34V47.916a1.926 1.926 0 0 0-1.918-1.918h-30.426c-1.73 0-2.596 2.068-1.354 3.31l30.426 30.425c1.204 1.204 3.31.339 3.31-1.353l-.038-.038ZM45.959 101.697v30.426c0 1.053.865 1.918 1.918 1.918h30.426c1.73 0 2.595-2.068 1.354-3.31l-30.426-30.426c-1.203-1.203-3.31-.338-3.31 1.354l.038.038Z"
+            />
+          </G>
+        </G>
+        <Defs>
+          <ClipPath id="a">
+            <Path fill={backgroundColor} d="M0 0h180v180H0z" />
+          </ClipPath>
+        </Defs>
+      </Svg>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    shadowOffset: { width: 0, height: 0 },
+    shadowRadius: 2,
+    shadowOpacity: 1,
+    shadowColor: 'rgba(46, 51, 56, 0.15)',
+  },
+})