👷 (archi) shared components lib POC

apps/ledger-live-desktop/package.json

@@ -74,6 +74,7 @@
     "@ledgerhq/hw-transport-http": "workspace:^",
     "@ledgerhq/hw-transport-vault": "workspace:^",
     "@ledgerhq/client-ids": "workspace:*",
+    "@ledgerhq/crypto-banner": "workspace:*",
     "@ledgerhq/lumen-design-core": "catalog:",
     "@ledgerhq/lumen-ui-react": "0.0.58",
     "@ledgerhq/ledger-key-ring-protocol": "workspace:^",

apps/ledger-live-desktop/src/newArch/features/MarketPerformanceWidget/index.tsx

@@ -1,14 +1,13 @@
 import React from "react";
 import { ABTestingVariants } from "@ledgerhq/types-live";
-import { MarketPerformanceWidgetContainer } from "./components/Container";
-import { useMarketPerformanceWidget } from "./useMarketPerformanceWidget";
+import { CryptoBanner } from "@ledgerhq/crypto-banner";
 
 type Props = {
   variant: ABTestingVariants;
 };
 
 const MarketPerformanceWidget = ({ variant }: Props) => {
-  return <MarketPerformanceWidgetContainer variant={variant} {...useMarketPerformanceWidget()} />;
+  return <CryptoBanner product="lld" version="1.0.0" />;
 };
 
 export default React.memo(MarketPerformanceWidget);

apps/ledger-live-desktop/src/renderer/reducers/index.ts

@@ -21,12 +21,20 @@ import sendFlow, { SendFlowState } from "./sendFlow";
 import onboarding, { OnboardingState } from "./onboarding";
 import { lldRTKApiReducers, LLDRTKApiState } from "./rtkQueryApi";
 import { identitiesSlice, IdentitiesState } from "@ledgerhq/client-ids/store";
+import { cryptoBannerReducer } from "@ledgerhq/crypto-banner";
 import type { PayloadAction, UnknownAction } from "@reduxjs/toolkit";
 
+interface CryptoBannerState {
+  isEnabled: boolean;
+  autoScroll: boolean;
+  scrollSpeed: number;
+}
+
 export type State = LLDRTKApiState & {
   accounts: AccountsState;
   application: ApplicationState;
   countervalues: CountervaluesState;
+  cryptoBanner: CryptoBannerState;
   devices: DevicesState;
   dynamicContent: DynamicContentState;
   identities: IdentitiesState;
@@ -47,6 +55,7 @@ const appReducer = combineReducers({
   accounts,
   application,
   countervalues,
+  cryptoBanner: cryptoBannerReducer,
   devices,
   dynamicContent,
   identities: identitiesSlice.reducer,

apps/ledger-live-desktop/src/renderer/reducers/rtkQueryApi.ts

@@ -3,13 +3,15 @@ import { ofacGeoBlockApi } from "@ledgerhq/live-common/api/ofacGeoBlockApi";
 import { assetsDataApi } from "@ledgerhq/live-common/dada-client/state-manager/api";
 import { cryptoAssetsApi } from "@ledgerhq/cryptoassets/cal-client/state-manager/api";
 import { pushDevicesApi } from "@ledgerhq/client-ids/api";
+import { cryptoBannerApi } from "@ledgerhq/crypto-banner";
 
 // Add new RTK Query API here:
 const APIs = {
   [assetsDataApi.reducerPath]: assetsDataApi,
   [cryptoAssetsApi.reducerPath]: cryptoAssetsApi,
   [ofacGeoBlockApi.reducerPath]: ofacGeoBlockApi,
   [pushDevicesApi.reducerPath]: pushDevicesApi,
+  [cryptoBannerApi.reducerPath]: cryptoBannerApi,
 };
 
 /*

apps/ledger-live-desktop/src/renderer/screens/dashboard/index.tsx

@@ -29,6 +29,7 @@ import AnalyticsOptInPrompt from "LLD/features/AnalyticsOptInPrompt/screens";
 import { useDisplayOnPortfolioAnalytics } from "LLD/features/AnalyticsOptInPrompt/hooks/useDisplayOnPortfolio";
 import SwapWebViewEmbedded from "./components/SwapWebViewEmbedded";
 import BannerSection from "./components/BannerSection";
+import { CryptoBanner } from "@ledgerhq/crypto-banner";
 
 // This forces only one visible top banner at a time
 export const TopBannerContainer = styled.div`
@@ -65,9 +66,6 @@ export default function DashboardPage() {
     [shouldFilterTokenOpsZeroAmount],
   );
 
-  const { enabled: marketPerformanceEnabled, variant: marketPerformanceVariant } =
-    useMarketPerformanceFeatureFlag();
-
   const { isFeatureFlagsAnalyticsPrefDisplayed, analyticsOptInPromptProps } =
     useDisplayOnPortfolioAnalytics();
 
@@ -89,52 +87,7 @@ export default function DashboardPage() {
           <EmptyStateInstalledApps />
         ) : totalAccounts > 0 ? (
           <>
-            {ptxSwapLiveAppOnPortfolio?.enabled ? (
-              <SwapPortfolioGrid>
-                <Box>
-                  <FeaturedButtons hideSwapButton />
-                  <BalanceSummary
-                    counterValue={counterValue}
-                    chartColor={colors.wallet}
-                    range={selectedTimeRange}
-                  />
-                </Box>
-
-                <Box ml={2} minWidth={375} maxWidth={700}>
-                  <SwapWebViewEmbedded height="550px" />
-                </Box>
-              </SwapPortfolioGrid>
-            ) : marketPerformanceEnabled ? (
-              <PortfolioGrid>
-                <BalanceSummary
-                  counterValue={counterValue}
-                  chartColor={colors.wallet}
-                  range={selectedTimeRange}
-                />
-
-                <Box ml={2} minWidth={275}>
-                  <MarketPerformanceWidget variant={marketPerformanceVariant} />
-                </Box>
-              </PortfolioGrid>
-            ) : (
-              <BalanceSummary
-                counterValue={counterValue}
-                chartColor={colors.wallet}
-                range={selectedTimeRange}
-              />
-            )}
-
-            <AssetDistribution />
-            {totalOperations > 0 && (
-              <OperationsList
-                accounts={accounts}
-                title={t("dashboard.recentActivity")}
-                withAccount
-                withSubAccounts
-                filterOperation={filterOperations}
-                t={t}
-              />
-            )}
+            <CryptoBanner product="lld" version="1.0.0" />
           </>
         ) : (
           <EmptyStateAccounts />

apps/ledger-live-desktop/src/state-manager/cryptoBanner.example.ts

@@ -0,0 +1,12 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { cryptoBannerApi, cryptoBannerReducer } from "@ledgerhq/crypto-banner";
+
+export const configureCryptoBannerStore = () => {
+  return configureStore({
+    reducer: {
+      cryptoBanner: cryptoBannerReducer,
+      [cryptoBannerApi.reducerPath]: cryptoBannerApi.reducer,
+    },
+    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(cryptoBannerApi.middleware),
+  });
+};

apps/ledger-live-mobile/package.json

@@ -100,6 +100,7 @@
     "@ledgerhq/hw-transport": "workspace:*",
     "@ledgerhq/hw-transport-http": "workspace:^",
     "@ledgerhq/client-ids": "workspace:^",
+    "@ledgerhq/crypto-banner": "workspace:*",
     "@ledgerhq/icons-ui": "workspace:^",
     "@ledgerhq/ledger-key-ring-protocol": "workspace:^",
     "@ledgerhq/live-config": "workspace:^",

apps/ledger-live-mobile/src/components/CryptoBannerIntegration.example.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { View, StyleSheet, SafeAreaView } from "react-native";
+import { CryptoBanner } from "@ledgerhq/crypto-banner";
+
+export const AppWithCryptoBanner = () => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <CryptoBanner product="llm" version="1.0.0" />
+
+      <View style={styles.content}>{/* Rest of your application */}</View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#000",
+  },
+  content: {
+    flex: 1,
+  },
+});

apps/ledger-live-mobile/src/context/rtkQueryApi.ts

@@ -4,11 +4,13 @@ import { assetsDataApi } from "@ledgerhq/live-common/dada-client/state-manager/a
 import { cryptoAssetsApi } from "@ledgerhq/cryptoassets/cal-client/state-manager/api";
 import { firebaseRemoteConfigApi } from "LLM/api/firebaseRemoteConfigApi";
 import { pushDevicesApi } from "@ledgerhq/client-ids/api";
+import { cryptoBannerApi } from "@ledgerhq/crypto-banner";
 
 // Add new RTK Query API here:
 const APIs = {
   [assetsDataApi.reducerPath]: assetsDataApi,
   [cryptoAssetsApi.reducerPath]: cryptoAssetsApi,
+  [cryptoBannerApi.reducerPath]: cryptoBannerApi,
   [firebaseRemoteConfigApi.reducerPath]: firebaseRemoteConfigApi,
   [ofacGeoBlockApi.reducerPath]: ofacGeoBlockApi,
   [pushDevicesApi.reducerPath]: pushDevicesApi,

apps/ledger-live-mobile/src/reducers/index.ts

@@ -25,6 +25,7 @@ import wallet from "./wallet";
 import walletconnect from "./walletconnect";
 import walletSync from "./walletSync";
 import { identitiesSlice } from "@ledgerhq/client-ids/store";
+import { cryptoBannerReducer } from "@ledgerhq/crypto-banner";
 import type { UnknownAction } from "@reduxjs/toolkit";
 
 export type AppStore = Store<State>;
@@ -35,6 +36,7 @@ const appReducer = combineReducers({
   auth,
   ble,
   countervalues,
+  cryptoBanner: cryptoBannerReducer,
   dynamicContent,
   earn,
   identities: identitiesSlice.reducer,

apps/ledger-live-mobile/src/reducers/types.ts

@@ -379,12 +379,19 @@ export type LargeMoverState = {
 
 // === ROOT STATE ===
 
+interface CryptoBannerState {
+  isEnabled: boolean;
+  autoScroll: boolean;
+  scrollSpeed: number;
+}
+
 export type State = LLMRTKApiState & {
   accounts: AccountsState;
   appstate: AppState;
   auth: AuthState;
   ble: BleState;
   countervalues: CountervaluesState;
+  cryptoBanner: CryptoBannerState;
   dynamicContent: DynamicContentState;
   earn: EarnState;
   identities: IdentitiesState;

apps/ledger-live-mobile/src/screens/Portfolio/index.tsx

@@ -54,6 +54,7 @@ import { getAccountCurrency } from "@ledgerhq/live-common/account/index";
 import { PORTFOLIO_VIEW_ID, TOP_CHAINS } from "~/utils/constants";
 import { buildFeatureFlagTags } from "~/utils/datadogUtils";
 import { renderItem } from "LLM/utils/renderItem";
+import { CryptoBanner } from "@ledgerhq/crypto-banner";
 
 type NavigationProps = BaseComposite<
   StackNavigatorProps<WalletTabNavigatorStackParamList, ScreenName.Portfolio>
@@ -242,14 +243,15 @@ function PortfolioScreen({ navigation }: NavigationProps) {
     <>
       <CheckLanguageAvailability />
       <CheckTermOfUseUpdate />
-      <Animated.View style={{ flex: 1 }}>
-        <RefreshableCollapsibleHeaderFlatList
+      <Animated.View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        {/* <RefreshableCollapsibleHeaderFlatList
           data={data}
           renderItem={renderItem<React.JSX.Element>}
           keyExtractor={(_: unknown, index: number) => String(index)}
           showsVerticalScrollIndicator={false}
           testID={showAssets ? "PortfolioAccountsList" : "PortfolioEmptyList"}
-        />
+        /> */}
+        <CryptoBanner product="llm" version="1.0.0" />
         <AddAccountDrawer
           isOpened={isAddModalOpened}
           onClose={closeAddModal}

apps/ledger-live-mobile/src/state-manager/cryptoBanner.example.ts

@@ -0,0 +1,12 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { cryptoBannerApi, cryptoBannerReducer } from "@ledgerhq/crypto-banner";
+
+export const configureCryptoBannerStore = () => {
+  return configureStore({
+    reducer: {
+      cryptoBanner: cryptoBannerReducer,
+      [cryptoBannerApi.reducerPath]: cryptoBannerApi.reducer,
+    },
+    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(cryptoBannerApi.middleware),
+  });
+};

features/cryptoBanner/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../.eslintrc.json",
+  "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          {
+            "group": ["@apps/*"],
+            "message": "Features should not import from apps"
+          }
+        ]
+      }
+    ]
+  }
+}

features/cryptoBanner/.gitignore

@@ -0,0 +1,9 @@
+lib/
+lib-es/
+dist/
+node_modules/
+coverage/
+*.log
+.DS_Store
+.turbo/
+