feat(mobile): dynamic app icon (#277)

![Simulator Screenshot - iPhone 15 Pro - 2024-09-07 at 05.46.19.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/1VEKR8FQ1Qa5iAiqVGqF/dece2dd7-2a5d-4bbd-ba55-f9c03fe9201e.png)

Resolves #270

apps/mobile/android/app/src/main/AndroidManifest.xml

@@ -36,5 +36,61 @@
       </intent-filter>
     </activity>
     <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>
+    <activity-alias android:name="ai.sixpm.app.MainActivitydark" android:enabled="false" android:exported="true" android:icon="@mipmap/dark" android:targetActivity=".MainActivity">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="sixpm"/>
+        <data android:scheme="ai.sixpm.app"/>
+        <data android:scheme="exp+6pm"/>
+      </intent-filter>
+    </activity-alias>
+    <activity-alias android:name="ai.sixpm.app.MainActivitylight" android:enabled="false" android:exported="true" android:icon="@mipmap/light" android:targetActivity=".MainActivity">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="sixpm"/>
+        <data android:scheme="ai.sixpm.app"/>
+        <data android:scheme="exp+6pm"/>
+      </intent-filter>
+    </activity-alias>
+    <activity-alias android:name="ai.sixpm.app.MainActivitydigital" android:enabled="false" android:exported="true" android:icon="@mipmap/digital" android:targetActivity=".MainActivity">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="sixpm"/>
+        <data android:scheme="ai.sixpm.app"/>
+        <data android:scheme="exp+6pm"/>
+      </intent-filter>
+    </activity-alias>
+    <activity-alias android:name="ai.sixpm.app.MainActivityoriginal" android:enabled="false" android:exported="true" android:icon="@mipmap/original" android:targetActivity=".MainActivity">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN"/>
+        <category android:name="android.intent.category.LAUNCHER"/>
+      </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="sixpm"/>
+        <data android:scheme="ai.sixpm.app"/>
+        <data android:scheme="exp+6pm"/>
+      </intent-filter>
+    </activity-alias>
   </application>
 </manifest>

apps/mobile/android/app/src/main/res/values/colors.xml

@@ -1,6 +1,6 @@
 <resources>
-  <color name="splashscreen_background">#ffffff</color>
-  <color name="iconBackground">#ffffff</color>
+  <color name="splashscreen_background">#000000</color>
+  <color name="iconBackground">#000000</color>
   <color name="colorPrimary">#023c69</color>
-  <color name="colorPrimaryDark">#ffffff</color>
+  <color name="colorPrimaryDark">#000000</color>
 </resources>

apps/mobile/android/app/src/main/res/values/styles.xml

@@ -4,7 +4,7 @@
     <item name="android:editTextStyle">@style/ResetEditText</item>
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="android:statusBarColor">#ffffff</item>
+    <item name="android:statusBarColor">#000000</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">
     <item name="android:padding">0dp</item>

apps/mobile/app.json

@@ -10,7 +10,7 @@
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "backgroundColor": "#000000"
     },
     "ios": {
       "supportsTablet": true,
@@ -25,7 +25,7 @@
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
+        "backgroundColor": "#000000"
       },
       "permissions": [
         "android.permission.CAMERA",
@@ -68,6 +68,31 @@
         {
           "faceIDPermission": "Allow $(PRODUCT_NAME) to use Face ID to secure your account"
         }
+      ],
+      [
+        "expo-dynamic-app-icon",
+        {
+          "dark": {
+            "image": "./assets/images/app-icons/dark.png",
+            "prerendered": true,
+            "platforms": ["ios", "android"]
+          },
+          "light": {
+            "image": "./assets/images/app-icons/light.png",
+            "prerendered": true,
+            "platforms": ["ios", "android"]
+          },
+          "digital": {
+            "image": "./assets/images/app-icons/digital.png",
+            "prerendered": true,
+            "platforms": ["ios", "android"]
+          },
+          "original": {
+            "image": "./assets/images/app-icons/original.png",
+            "prerendered": false,
+            "platforms": ["ios", "android"]
+          }
+        }
       ]
     ],
     "experiments": {

apps/mobile/app/(app)/(tabs)/settings.tsx

@@ -37,6 +37,7 @@ import {
   LockKeyholeIcon,
   LogOutIcon,
   MessageSquareQuoteIcon,
+  PencilRulerIcon,
   ScrollTextIcon,
   ShapesIcon,
   Share2Icon,
@@ -173,6 +174,15 @@ export default function SettingsScreen() {
                 }
               />
             </Link>
+            <Link href="/app-icon" asChild>
+              <MenuItem
+                label={t(i18n)`App icon`}
+                icon={PencilRulerIcon}
+                rightSection={
+                  <ChevronRightIcon className="h-5 w-5 text-primary" />
+                }
+              />
+            </Link>
             <Link href="/language" asChild>
               <MenuItem
                 label={t(i18n)`Language`}

apps/mobile/app/(app)/_layout.tsx

@@ -120,6 +120,10 @@ export default function AuthenticatedLayout() {
           name="appearance"
           options={{ headerTitle: t(i18n)`Appearance` }}
         />
+        <Stack.Screen
+          name="app-icon"
+          options={{ headerTitle: t(i18n)`App icon` }}
+        />
         <Stack.Screen
           name="wallet/accounts"
           options={{

apps/mobile/app/(app)/app-icon.tsx

@@ -0,0 +1,97 @@
+import { toast } from '@/components/common/toast'
+import { Badge } from '@/components/ui/badge'
+import { Text } from '@/components/ui/text'
+import { useUserEntitlements } from '@/hooks/use-purchases'
+import { t } from '@lingui/macro'
+import { useLingui } from '@lingui/react'
+import { getAppIcon, setAppIcon } from 'expo-dynamic-app-icon'
+import * as Haptics from 'expo-haptics'
+import { useRouter } from 'expo-router'
+import { CheckIcon, LockIcon } from 'lucide-react-native'
+import { useState } from 'react'
+import { FlatList, Image, Pressable, View } from 'react-native'
+
+const APP_ICONS = [
+  {
+    name: 'dark',
+    source: require('../../assets/images/app-icons/dark.png'),
+    pro: false,
+  },
+  {
+    name: 'light',
+    source: require('../../assets/images/app-icons/light.png'),
+    pro: true,
+  },
+  {
+    name: 'digital',
+    source: require('../../assets/images/app-icons/digital.png'),
+    pro: true,
+  },
+  {
+    name: 'original',
+    source: require('../../assets/images/app-icons/original.png'),
+    pro: false,
+  },
+]
+
+type AppIcon = (typeof APP_ICONS)[number]
+
+export default function AppearanceScreen() {
+  const [selected, setSelected] = useState<string>(getAppIcon() ?? 'dark')
+  const { i18n } = useLingui()
+  const { isPro } = useUserEntitlements()
+  const router = useRouter()
+
+  function renderDynamicIcon({ item }: { item: AppIcon }) {
+    return (
+      <Pressable
+        onPress={() => {
+          if (item.pro && !isPro) {
+            router.push('/paywall')
+            return
+          }
+
+          Haptics.selectionAsync()
+          setAppIcon(item.name)
+          setSelected(item.name)
+          toast.success(t(i18n)`App icon updated!`)
+        }}
+        className="flex-1 flex-row items-center justify-center gap-4 rounded-lg bg-card px-6 py-2 active:bg-muted/50"
+      >
+        <View className="flex-1 flex-row items-center gap-4">
+          <Image
+            source={item.source}
+            className="h-16 w-16 rounded-xl border border-border"
+          />
+          <Text className="text-center text-foreground capitalize">
+            {item.name}
+          </Text>
+        </View>
+        {selected === item.name ? (
+          <CheckIcon className="size-6 text-amount-positive" />
+        ) : item.pro && !isPro ? (
+          <Badge variant="secondary" className="py-1.5">
+            <LockIcon className="size-4 text-primary" />
+          </Badge>
+        ) : null}
+      </Pressable>
+    )
+  }
+
+  return (
+    <FlatList<AppIcon>
+      data={APP_ICONS}
+      keyExtractor={(i) => i.name}
+      ListHeaderComponent={
+        <View className="px-6">
+          <Text className="mb-4 font-sans text-muted-foreground text-sm">
+            {t(i18n)`Choose your preferred app icon`}
+          </Text>
+        </View>
+      }
+      className="bg-card"
+      renderItem={renderDynamicIcon}
+      contentContainerClassName="py-4"
+    />
+  )
+}