Integrate K2 Alpine into Core Mobile (#1846)

packages/core-mobile/app/ContextApp.tsx

@@ -10,6 +10,7 @@ import Toast from 'react-native-toast-notifications'
 import JailMonkey from 'jail-monkey'
 import { RootSiblingParent } from 'react-native-root-siblings'
 import { K2ThemeProvider } from '@avalabs/k2-mobile'
+import { K2AlpineThemeProvider } from '@avalabs/k2-alpine'
 import JailbrokenWarning from 'screens/onboarding/JailbrokenWarning'
 import { PosthogContextProvider } from 'contexts/PosthogContext'
 import { StatusBar, View } from 'react-native'
@@ -37,11 +38,13 @@ const ContextProviders: FC<PropsWithChildren> = ({ children }) => (
   <EncryptedStoreProvider>
     <ReactQueryProvider>
       <PosthogContextProvider>
-        <K2ThemeProvider>
-          <ApplicationContextProvider>
-            <DeeplinkContextProvider>{children}</DeeplinkContextProvider>
-          </ApplicationContextProvider>
-        </K2ThemeProvider>
+        <K2AlpineThemeProvider>
+          <K2ThemeProvider>
+            <ApplicationContextProvider>
+              <DeeplinkContextProvider>{children}</DeeplinkContextProvider>
+            </ApplicationContextProvider>
+          </K2ThemeProvider>
+        </K2AlpineThemeProvider>
       </PosthogContextProvider>
     </ReactQueryProvider>
   </EncryptedStoreProvider>

packages/core-mobile/app/navigation/WalletScreenStack/WalletScreenStack.tsx

@@ -102,7 +102,6 @@ import AdvancedStackScreen, {
 } from '../wallet/AdvancedStackScreen'
 import { createModals } from './createModals'
 
-// @ts-expect-error lazy import is fine but typescript doesn't like it
 const PolyfillCrypto = React.lazy(() => import('react-native-webview-crypto'))
 
 type Props = {

packages/core-mobile/app/navigation/wallet/TabNavigator.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/no-unstable-nested-components */
+import { lazy } from 'react'
 import AppNavigation, { Tabs } from 'navigation/AppNavigation'
 import HomeSVG from 'components/svg/HomeSVG'
 import WatchlistSVG from 'components/svg/WatchlistSVG'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { useApplicationContext } from 'contexts/ApplicationContext'
 import PortfolioStackScreen from 'navigation/wallet/PortfolioScreenStack'
 import React, { useState } from 'react'
-import WatchlistTab from 'screens/watchlist/WatchlistTabView'
 import TopNavigationHeader from 'navigation/TopNavigationHeader'
 import { getCommonBottomTabOptions, TabButton } from 'navigation/NavUtils'
 import EarnSVG from 'components/svg/EarnSVG'
@@ -18,8 +18,14 @@ import { Fab } from 'components/Fab'
 import { addTab, selectActiveTab, selectAllTabs } from 'store/browser'
 import { useDispatch, useSelector } from 'react-redux'
 import AnalyticsService from 'services/analytics/AnalyticsService'
+import { withK2Alpine } from 'utils/withK2Alpine'
 import EarnScreenStack from './EarnScreenStack/EarnScreenStack'
 
+const WatchlistTab = withK2Alpine(
+  lazy(() => import('screens/watchlist/WatchlistTabView')),
+  lazy(() => import('screens/watchlist/WatchlistTabViewK2Alpine'))
+)
+
 export type TabNavigatorParamList = {
   [AppNavigation.Tabs.Portfolio]: { showBackButton?: boolean }
   [AppNavigation.Tabs.Watchlist]: undefined
@@ -43,6 +49,7 @@ const TabNavigator: () => JSX.Element = () => {
 
   const renderEarnTab: () => null | JSX.Element = () => {
     if (earnBlocked) return null
+
     return (
       <Tab.Screen
         name={AppNavigation.Tabs.Stake}

packages/core-mobile/app/screens/watchlist/WatchlistTabViewK2Alpine.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { View, Text } from '@avalabs/k2-alpine'
+
+const WatchlistTabK2Alpine = (): JSX.Element => {
+  return (
+    <View sx={{ flex: 1, backgroundColor: '$surfacePrimary' }}>
+      <Text variant="heading1" sx={{ color: '$textPrimary' }}>
+        Hello from K2 Alpine
+      </Text>
+    </View>
+  )
+}
+
+export default WatchlistTabK2Alpine

packages/core-mobile/app/services/posthog/PostHogService.ts

@@ -14,13 +14,15 @@ import {
 import { getPosthogDeviceInfo } from './utils'
 
 class PostHogService implements PostHogServiceInterface {
+  #posthogCaptureUrl: string
+
   constructor(
     private posthogAnalyticsKey: string,
     private posthogUrl: string,
     private posthogFeatureFlagsKey: string
-  ) {}
-
-  #posthogCaptureUrl = `${this.posthogUrl}/capture/`
+  ) {
+    this.#posthogCaptureUrl = `${posthogUrl}/capture/`
+  }
 
   distinctId: string | undefined
   userId: string | undefined

packages/core-mobile/app/services/posthog/types.ts

@@ -27,7 +27,8 @@ export enum FeatureGates {
   LOG_ERRORS_TO_SENTRY = 'log-errors-to-sentry',
   BLOCKAID_TRANSACTION_VALIDATION = 'blockaid-transaction-validation',
   BLOCKAID_DAPP_SCAN = 'blockaid-dapp-scan',
-  BALANCE_CHANGE_NOTIFICATIONS = 'balance-change-notifications'
+  BALANCE_CHANGE_NOTIFICATIONS = 'balance-change-notifications',
+  K2_ALPINE = 'k2-alpine'
 }
 
 export enum FeatureVars {

packages/core-mobile/app/store/posthog/slice.ts

@@ -331,6 +331,14 @@ export const selectIsBalanceChangeNotificationsBlocked = (
   )
 }
 
+export const selectIsK2AlpineBlocked = (state: RootState): boolean => {
+  const { featureFlags } = state.posthog
+  return (
+    !featureFlags[FeatureGates.K2_ALPINE] ||
+    !featureFlags[FeatureGates.EVERYTHING]
+  )
+}
+
 // actions
 export const { regenerateUserId, toggleAnalytics, setFeatureFlags } =
   posthogSlice.actions

packages/core-mobile/app/store/posthog/types.ts

@@ -27,7 +27,8 @@ export const DefaultFeatureFlagConfig = {
   [FeatureGates.SEEDLESS_SIGNING]: true,
   [FeatureGates.BLOCKAID_TRANSACTION_VALIDATION]: true,
   [FeatureGates.BLOCKAID_DAPP_SCAN]: true,
-  [FeatureGates.BALANCE_CHANGE_NOTIFICATIONS]: false
+  [FeatureGates.BALANCE_CHANGE_NOTIFICATIONS]: false,
+  [FeatureGates.K2_ALPINE]: false
 }
 
 export const initialState = {

packages/core-mobile/app/utils/withK2Alpine.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { selectIsK2AlpineBlocked } from 'store/posthog/slice'
+
+/**
+ * This HoC is used to implement a gradual rollout of the new K2 Alpine design.
+ *
+ * It does the following:
+ * - conditionally renders either the old or the new version of a component based on K2 ALPINE feature flag.
+ * - ensures both the old and new components are interchangeable by enforcing that they accept the same props.
+ * - ensures that both old and new components are lazily loaded via React.lazy.
+ *
+ * Example usage:
+ * const WatchlistTab = withK2Alpine(
+ *  lazy(() => import('screens/watchlist/WatchlistTabView')),
+ *  lazy(() => import('screens/watchlist/WatchlistTabViewK2Alpine'))
+ * )
+ */
+export const withK2Alpine = <P extends object>(
+  OldComponent: React.LazyExoticComponent<React.ComponentType<P>>,
+  NewComponent: React.LazyExoticComponent<React.ComponentType<P>>
+): React.ComponentType<P> => {
+  return (props: P) => {
+    const isK2AlpineBlocked = useSelector(selectIsK2AlpineBlocked)
+    const Component = isK2AlpineBlocked ? OldComponent : NewComponent
+    // @ts-ignore react lazy doesn't work well with generic typing
+    return <Component {...props} />
+  }
+}