Add Japan-gated custom logo (#11161)

src/view/icons/Logo.tsx

@@ -10,19 +10,20 @@ import Svg, {
 } from 'react-native-svg'
 import {Image} from 'expo-image'
 
-import {useKawaiiMode} from '#/state/preferences/kawaii'
+import {useLogoVariant} from '#/view/icons/useLogoVariant'
 import {flatten, useTheme} from '#/alf'
 
 const ratio = 57 / 64
 
 type Props = {
+  allowVariants?: boolean
   fill?: PathProps['fill']
   style?: TextProps['style']
 } & Omit<SvgProps, 'style'>
 
 export const Logo = forwardRef(function LogoImpl(props: Props, ref) {
   const t = useTheme()
-  const {fill, ...rest} = props
+  const {allowVariants = true, fill, ...rest} = props
   const gradient = fill === 'sky'
   const styles = flatten(props.style)
   const _fill = gradient
@@ -31,20 +32,23 @@ export const Logo = forwardRef(function LogoImpl(props: Props, ref) {
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 32, 10)
 
-  const isKawaii = useKawaiiMode()
+  const logoVariant = useLogoVariant(allowVariants)
 
-  if (isKawaii) {
+  if (logoVariant !== 'default') {
+    const isJapanLogo = logoVariant === 'japan'
     return (
       <Image
         source={
-          size > 100
-            ? require('../../../assets/kawaii.png')
-            : require('../../../assets/kawaii_smol.png')
+          isJapanLogo
+            ? require('../../../assets/icons/custom_logo_japan.svg')
+            : size > 100
+              ? require('../../../assets/kawaii.png')
+              : require('../../../assets/kawaii_smol.png')
         }
         accessibilityLabel="Bluesky"
         accessibilityHint=""
         accessibilityIgnoresInvertColors
-        style={[{height: size, aspectRatio: 1.4}]}
+        style={[{height: size, aspectRatio: isJapanLogo ? 2 : 1.4}]}
       />
     )
   }

src/view/icons/useLogoVariant.ts

@@ -0,0 +1,20 @@
+import {useKawaiiMode} from '#/state/preferences/kawaii'
+import {useAnalytics} from '#/analytics'
+import {useGeolocation} from '#/geolocation'
+
+export type LogoVariant = 'default' | 'japan' | 'kawaii'
+
+export function useLogoVariant(allowVariants = true): LogoVariant {
+  const ax = useAnalytics()
+  const geolocation = useGeolocation()
+  const kawaii = useKawaiiMode()
+  const japanLogoEnabled =
+    allowVariants &&
+    geolocation.countryCode === 'JP' &&
+    ax.features.enabled(ax.features.CustomLogoJapanEnable)
+
+  if (!allowVariants) return 'default'
+  if (japanLogoEnabled) return 'japan'
+  if (kawaii) return 'kawaii'
+  return 'default'
+}