refactor: remove branding folder (#5813)

### Description

This PR:
1. remove branding folder and move all assets to the intended `android`,
`ios`, `src` directories
2. in the `images` folder, put all `.png` files in an `assets` sub
folder. these images continue to be exported from `Images.ts`.
3. move "branded" components from `icons` to `images` - these are all
files that use custom colours, but eventually should be all icons that
are not generic (e.g. Material UI icons)
4. remove branding script and references to it

### Test plan

n/a

### Related issues

- Fixes RET-1156

### Backwards compatibility

Y

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [ ] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

---------

Co-authored-by: Alex Bakoushin <[email protected]>

.gitignore

@@ -119,21 +119,7 @@ e2e/test-results/*
 secrets.json
 !__mocks__/secrets.json
 
-# Branding
-# See scripts/sync_branding.sh
-android/app/src/main/res/drawable*
-android/app/src/main/res/layout*
-android/app/src/main/res/mipmap*
-ios/celo/Base.lproj/*
-!ios/celo/Base.lproj/InfoPlist.strings
-ios/celo/Images.xcassets/
 ios/.xcode.env
-src/brandingConfig.ts
-src/icons/LogoHeart.tsx
-src/icons/Logo.tsx
-src/icons/WelcomeLogo.tsx
-src/images/*
-!src/images/Images.ts
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*

WALLET.md

@@ -616,9 +616,9 @@ If they do not have fixes and they do not apply to production, you may ignore th
 
 ### Branding
 
-Images, icons, and links related to the brand are stored in the `branding` folder. When running `yarn install`, the script `scripts/sync_branding.sh` is run to clone these files into the appropriate places in the app.
+Images related to the brand are stored in the `src/images` folder. When adding new images, we also include the 1.5x, 2x, 3x, and 4x versions. The app will automatically download the appropriate size.
 
-When adding new images to the `branding` folder, we also include the 1.5x, 2x, 3x, and 4x versions. The app will automatically download the appropriate size.
+Links related to the brand are stored in the `src/brandingConfig.ts` file.
 
 ### Troubleshooting
 

package.json

@@ -33,7 +33,7 @@
     "dev:emulator:list": "$ANDROID_HOME/emulator/emulator -list-avds",
     "dev:emulator:run": "$ANDROID_HOME/emulator/emulator -avd",
     "knip:depcheck": "knip --include dependencies",
-    "test": "export TZ=UTC && ./scripts/sync_branding.sh && jest --silent",
+    "test": "export TZ=UTC && jest --silent",
     "test:all": "yarn lint && yarn build:ts && yarn test",
     "test:ci": "yarn test --coverage --maxWorkers=3",
     "test:watch": "yarn test --watch --maxWorkers=4",
@@ -51,7 +51,7 @@
     "e2e:test:ios-release": "detox test -c ios.release -l verbose",
     "pre-deploy": "./scripts/pre-deploy.sh",
     "deploy:update-disclaimer": "yarn licenses generate-disclaimer --prod > src/account/LicenseDisclaimer.txt && ./scripts/copy_license_to_android_assets.sh",
-    "postinstall": "patch-package && yarn keys:decrypt && ./scripts/sync_branding.sh && ./scripts/copy_license_to_android_assets.sh",
+    "postinstall": "patch-package && yarn keys:decrypt && ./scripts/copy_license_to_android_assets.sh",
     "keys:decrypt": "bash scripts/key_placer.sh decrypt",
     "keys:encrypt": "bash scripts/key_placer.sh encrypt"
   },

src/account/__snapshots__/AccountKeyEducation.test.tsx.snap

@@ -148,7 +148,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
                 resizeMode="contain"
                 source={
                   {
-                    "testUri": "../../../src/images/account-key-1.png",
+                    "testUri": "../../../src/images/assets/account-key-1.png",
                   }
                 }
                 style={
@@ -218,7 +218,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
                 resizeMode="contain"
                 source={
                   {
-                    "testUri": "../../../src/images/account-key-2.png",
+                    "testUri": "../../../src/images/assets/account-key-2.png",
                   }
                 }
                 style={
@@ -288,7 +288,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
                 resizeMode="contain"
                 source={
                   {
-                    "testUri": "../../../src/images/account-key-3.png",
+                    "testUri": "../../../src/images/assets/account-key-3.png",
                   }
                 }
                 style={
@@ -358,7 +358,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
                 resizeMode="contain"
                 source={
                   {
-                    "testUri": "../../../src/images/account-key-4.png",
+                    "testUri": "../../../src/images/assets/account-key-4.png",
                   }
                 }
                 style={

src/account/__snapshots__/GoldEducation.test.tsx.snap

@@ -148,7 +148,7 @@ exports[`renders correctly 1`] = `
                 resizeMode="contain"
                 source={
                   {
-                    "testUri": "../../../src/images/celo-education-1.png",
+                    "testUri": "../../../src/images/assets/celo-education-1.png",
                   }
                 }
                 style={
@@ -218,7 +218,7 @@ exports[`renders correctly 1`] = `
                 resizeMode="contain"
                 source={
                   {
-                    "testUri": "../../../src/images/celo-education-2.png",
+                    "testUri": "../../../src/images/assets/celo-education-2.png",
                   }
                 }
                 style={
@@ -288,7 +288,7 @@ exports[`renders correctly 1`] = `
                 resizeMode="contain"
                 source={
                   {
-                    "testUri": "../../../src/images/celo-education-3.png",
+                    "testUri": "../../../src/images/assets/celo-education-3.png",
                   }
                 }
                 style={
@@ -358,7 +358,7 @@ exports[`renders correctly 1`] = `
                 resizeMode="contain"
                 source={
                   {
-                    "testUri": "../../../src/images/celo-education-4.png",
+                    "testUri": "../../../src/images/assets/celo-education-4.png",
                   }
                 }
                 style={

src/backup/BackupIntroduction.tsx

@@ -12,7 +12,7 @@ import BackupPhraseContainer, {
 import { useAccountKey } from 'src/backup/utils'
 import Button from 'src/components/Button'
 import TextButton from 'src/components/TextButton'
-import Logo from 'src/icons/Logo'
+import Logo from 'src/images/Logo'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'

branding/src/brandingConfig.ts → src/brandingConfig.ts

@@ -1,15 +1,10 @@
 export const APP_NAME = 'Valora'
 export const WEB_LINK = 'https://valora.xyz/'
-export const CELO_FAUCET_LINK = 'https://celo.org/app'
-export const CELO_TERMS_LINK = 'https://celo.org/terms'
 export const TOS_LINK = 'https://valora.xyz/terms'
 export const PRIVACY_LINK = 'https://valora.xyz/privacy'
 export const FAQ_LINK = 'https://valora.xyz/faq'
 export const FUNDING_LINK = 'https://valora.xyz/fund-wallet'
-export const CELO_REWARDS_LINK = 'https://celo.org/celo-rewards-education'
 export const FORUM_LINK = 'https://forum.celo.org/c/valora/8'
-export const INVITE_REWARDS_LEARN_MORE = 'https://valora.xyz/support/invite-rewards-learn-more'
-export const DAPPS_LEARN_MORE = 'https://valora.xyz/support/dapps-learn-more'
 export const SWAP_LEARN_MORE = 'https://valora.xyz/support/swap-learn-more'
 export const TRANSACTION_FEES_LEARN_MORE = 'https://valora.xyz/support/transaction-fees-learn-more'
 export const INVITE_REWARDS_NFTS_LEARN_MORE =

src/components/BeatingHeartLoader.tsx

@@ -7,7 +7,7 @@ import Animated, {
   withSequence,
   withTiming,
 } from 'react-native-reanimated'
-import LogoHeart from 'src/icons/LogoHeart'
+import LogoHeart from 'src/images/LogoHeart'
 
 const BeatingHeartLoader = ({ size }: { size: number }) => {
   const scale = useSharedValue(1)

src/dappsExplorer/DappCard.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
-import { DappExplorerEvents } from 'src/analytics/Events'
 import AppAnalytics from 'src/analytics/AppAnalytics'
+import { DappExplorerEvents } from 'src/analytics/Events'
 import Card from 'src/components/Card'
 import Touchable from 'src/components/Touchable'
 import { favoriteDappIdsSelector } from 'src/dapps/selectors'
 import { favoriteDapp, unfavoriteDapp } from 'src/dapps/slice'
 import { Dapp, DappSection } from 'src/dapps/types'
-import Star from 'src/icons/Star'
 import StarOutline from 'src/icons/StarOutline'
+import Star from 'src/images/Star'
 import { useDispatch, useSelector } from 'src/redux/hooks'
 import { Colors } from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'

src/earn/EarnDepositBottomSheet.tsx

@@ -16,7 +16,7 @@ import { PROVIDER_ID } from 'src/earn/constants'
 import { depositStatusSelector } from 'src/earn/selectors'
 import { depositStart } from 'src/earn/slice'
 import InfoIcon from 'src/icons/InfoIcon'
-import Logo from 'src/icons/Logo'
+import Logo from 'src/images/Logo'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { useSelector } from 'src/redux/hooks'

src/earn/EarnInfoScreen.tsx

@@ -9,11 +9,11 @@ import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import { APP_NAME, EARN_STABLECOINS_LEARN_MORE } from 'src/config'
 import { EarnTabType } from 'src/earn/types'
 import ArrowDown from 'src/icons/ArrowDown'
-import Blob from 'src/icons/Blob'
 import CircledIcon from 'src/icons/CircledIcon'
 import EarnCoins from 'src/icons/EarnCoins'
-import Logo from 'src/icons/Logo'
-import Palm from 'src/icons/Palm'
+import Blob from 'src/images/Blob'
+import Logo from 'src/images/Logo'
+import Palm from 'src/images/Palm'
 import { headerWithCloseButton } from 'src/navigator/Headers'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'

src/fiatExchanges/__snapshots__/CashInSuccess.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`CashinInSuccess renders correctly with a provider 1`] = `
       resizeMode="contain"
       source={
         {
-          "testUri": "../../../src/images/fiat-exchange.png",
+          "testUri": "../../../src/images/assets/fiat-exchange.png",
         }
       }
     />
@@ -200,7 +200,7 @@ exports[`CashinInSuccess renders correctly without a provider 1`] = `
       resizeMode="contain"
       source={
         {
-          "testUri": "../../../src/images/fiat-exchange.png",
+          "testUri": "../../../src/images/assets/fiat-exchange.png",
         }
       }
     />

src/home/NotificationBox.tsx

@@ -17,8 +17,8 @@ import { dismissNotification } from 'src/home/actions'
 import { DEFAULT_PRIORITY } from 'src/home/reducers'
 import { getExtraNotifications } from 'src/home/selectors'
 import { Notification, NotificationBannerCTATypes, NotificationType } from 'src/home/types'
-import GuideKeyIcon from 'src/icons/GuideKeyHomeCardIcon'
 import KeylessBackup from 'src/icons/KeylessBackup'
+import GuideKeyIcon from 'src/images/GuideKeyHomeCardIcon'
 import { getVerified, learnCelo } from 'src/images/Images'
 import { ensurePincode, navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'

src/home/__snapshots__/NotificationBox.test.tsx.snap

@@ -429,7 +429,7 @@ exports[`NotificationBox renders correctly for with all notifications 1`] = `
                 resizeMode="contain"
                 source={
                   {
-                    "testUri": "../../../src/images/get-verified.png",
+                    "testUri": "../../../src/images/assets/get-verified.png",
                   }
                 }
                 style={
@@ -845,7 +845,7 @@ exports[`NotificationBox renders correctly for with all notifications 1`] = `
                 resizeMode="contain"
                 source={
                   {
-                    "testUri": "../../../src/images/learn-celo.png",
+                    "testUri": "../../../src/images/assets/learn-celo.png",
                   }
                 }
                 style={

src/images/Images.ts

@@ -1,28 +1,28 @@
-export const accountKey1 = require('src/images/account-key-1.png')
-export const accountKey2 = require('src/images/account-key-2.png')
-export const accountKey3 = require('src/images/account-key-3.png')
-export const accountKey4 = require('src/images/account-key-4.png')
-export const background = require('src/images/background.jpg')
-export const backupKey = require('src/images/backup-key.png')
-export const biometryFace = require('src/images/biometry-face.png')
-export const biometryFaceId = require('src/images/biometry-face-id.png')
-export const biometryFingerprint = require('src/images/biometry-fingerprint.png')
-export const biometryIris = require('src/images/biometry-iris.png')
-export const biometryTouchId = require('src/images/biometry-touch-id.png')
-export const celoEducation1 = require('src/images/celo-education-1.png')
-export const celoEducation2 = require('src/images/celo-education-2.png')
-export const celoEducation3 = require('src/images/celo-education-3.png')
-export const celoEducation4 = require('src/images/celo-education-4.png')
-export const email = require('src/images/email.png')
-export const fiatExchange = require('src/images/fiat-exchange.png')
-export const getVerified = require('src/images/get-verified.png')
-export const inviteModal = require('src/images/invite-modal.png')
-export const inviteWithRewards = require('src/images/invite-rewards.png')
-export const learnCelo = require('src/images/learn-celo.png')
-export const notificationInvite = require('src/images/notification-invite.png')
-export const onboardingEducation1 = require('src/images/onboarding-education-1.png')
-export const onboardingEducation2 = require('src/images/onboarding-education-2.png')
-export const onboardingEducation3 = require('src/images/onboarding-education-3.png')
-export const pointsCardBackground = require('src/images/points-card-background.png')
-export const pointsIllustration = require('src/images/points-illustration.png')
-export const welcomeBackground = require('src/images/intro-background.png')
+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 background = require('src/images/assets/background.jpg')
+export const backupKey = require('src/images/assets/backup-key.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 inviteModal = require('src/images/assets/invite-modal.png')
+export const inviteWithRewards = require('src/images/assets/invite-rewards.png')
+export const learnCelo = require('src/images/assets/learn-celo.png')
+export const notificationInvite = require('src/images/assets/notification-invite.png')
+export const onboardingEducation1 = require('src/images/assets/onboarding-education-1.png')
+export const onboardingEducation2 = require('src/images/assets/onboarding-education-2.png')
+export const onboardingEducation3 = require('src/images/assets/onboarding-education-3.png')
+export const pointsCardBackground = require('src/images/assets/points-card-background.png')
+export const pointsIllustration = require('src/images/assets/points-illustration.png')
+export const welcomeBackground = require('src/images/assets/intro-background.png')

src/jumpstart/JumpstartAddAssets.tsx

@@ -10,8 +10,8 @@ import { BottomSheetRefType } from 'src/components/BottomSheet'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import CustomHeader from 'src/components/header/CustomHeader'
 import { CICOFlow, FiatExchangeFlow } from 'src/fiatExchanges/utils'
-import Palm from 'src/icons/Palm'
-import WaveCurve from 'src/icons/WaveCurve'
+import Palm from 'src/images/Palm'
+import WaveCurve from 'src/images/WaveCurve'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { isAppSwapsEnabledSelector } from 'src/navigator/selectors'

src/jumpstart/JumpstartTransactionDetailsScreen.tsx

@@ -19,7 +19,7 @@ import TokenDisplay from 'src/components/TokenDisplay'
 import TokenIcon, { IconSize } from 'src/components/TokenIcon'
 import CustomHeader from 'src/components/header/CustomHeader'
 import Checkmark from 'src/icons/Checkmark'
-import Logo from 'src/icons/Logo'
+import Logo from 'src/images/Logo'
 import { fetchClaimStatus } from 'src/jumpstart/fetchClaimStatus'
 import { jumpstartReclaimStatusSelector } from 'src/jumpstart/selectors'
 import { jumpstartReclaimErrorDismissed, jumpstartReclaimStarted } from 'src/jumpstart/slice'

src/navigator/TabNavigator.tsx

@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next'
 import { StyleSheet } from 'react-native'
 import TabDiscover from 'src/dappsExplorer/TabDiscover'
 import TabHome from 'src/home/TabHome'
-import Logo from 'src/icons/Logo'
 import Discover from 'src/icons/navigator/Discover'
 import Wallet from 'src/icons/navigator/Wallet'
+import Logo from 'src/images/Logo'
 import { tabHeader } from 'src/navigator/Headers'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'

src/onboarding/ChooseYourAdventure.tsx

@@ -10,9 +10,9 @@ import TextButton from 'src/components/TextButton'
 import Touchable from 'src/components/Touchable'
 import { FiatExchangeFlow } from 'src/fiatExchanges/utils'
 import EarnCoins from 'src/icons/EarnCoins'
-import LogoHeart from 'src/icons/LogoHeart'
 import PlusIcon from 'src/icons/PlusIcon'
 import ProfilePlus from 'src/icons/ProfilePlus'
+import LogoHeart from 'src/images/LogoHeart'
 import { nuxNavigationOptionsNoBackButton } from 'src/navigator/Headers'
 import {
   navigate,

src/onboarding/registration/ProtectWallet.tsx

@@ -6,10 +6,10 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { recoveryPhraseInOnboardingStarted } from 'src/account/actions'
 import { RecoveryPhraseInOnboardingStatus } from 'src/account/reducer'
 import { recoveryPhraseInOnboardingStatusSelector } from 'src/account/selectors'
-import { OnboardingEvents } from 'src/analytics/Events'
 import AppAnalytics from 'src/analytics/AppAnalytics'
+import { OnboardingEvents } from 'src/analytics/Events'
 import OnboardingCard from 'src/components/OnboardingCard'
-import GuideKeyIcon from 'src/icons/GuideKeyIcon'
+import GuideKeyIcon from 'src/images/GuideKeyIcon'
 import { HeaderTitleWithSubtitle, nuxNavigationOptionsOnboarding } from 'src/navigator/Headers'
 import { ensurePincode, navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'

src/onboarding/registration/RegulatoryTerms.tsx

@@ -11,7 +11,7 @@ import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import DevSkipButton from 'src/components/DevSkipButton'
 import { PRIVACY_LINK, TOS_LINK } from 'src/config'
 import { withTranslation } from 'src/i18n'
-import Logo from 'src/icons/Logo'
+import Logo from 'src/images/Logo'
 import { nuxNavigationOptions } from 'src/navigator/Headers'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'

src/onboarding/success/OnboardingSuccessScreen.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Image, StyleSheet, Text, View } from 'react-native'
-import Logo from 'src/icons/Logo'
 import { background } from 'src/images/Images'
+import Logo from 'src/images/Logo'
 import { nuxNavigationOptionsNoBackButton } from 'src/navigator/Headers'
 import { Screens } from 'src/navigator/Screens'
 import { goToNextOnboardingScreen, onboardingPropsSelector } from 'src/onboarding/steps'