Merge branch 'develop' into bugfix/LIVE-8553-polkadot-balance-error

apps/ledger-live-mobile/e2e/models/market/marketPage.ts

@@ -0,0 +1,38 @@
+import { getElementById, typeTextByElement, tapByText, tapByElement } from "../../helpers";
+
+export default class MarketPage {
+  searchBar = () => getElementById("search-box");
+  starButton = () => getElementById("star-asset");
+  assetCardBackBtn = () => getElementById("market-back-btn");
+  starMarketListButton = () => getElementById("starred");
+  buyNanoButton = () => getElementById("market-buy-btn");
+  openMarketPlaceButton = () => getElementById("market-place-btn");
+
+  searchAsset(asset: string) {
+    return typeTextByElement(this.searchBar(), asset);
+  }
+
+  openAssetPage(selectAsset: string) {
+    return tapByText(selectAsset);
+  }
+
+  starFavoriteCoin() {
+    return tapByElement(this.starButton());
+  }
+
+  backToAssetList() {
+    return tapByElement(this.assetCardBackBtn());
+  }
+
+  filterStaredAsset() {
+    return tapByElement(this.starMarketListButton());
+  }
+
+  buyNano() {
+    return tapByElement(this.buyNanoButton());
+  }
+
+  openMarketPlace() {
+    return tapByElement(this.openMarketPlaceButton());
+  }
+}

apps/ledger-live-mobile/e2e/models/wallet/portfolioPage.ts

@@ -16,6 +16,7 @@ export default class PortfolioPage {
   portfolioSettingsButton = () => getElementById("settings-icon");
   transferButton = () => getElementById("transfer-button");
   swapTransferMenuButton = () => getElementById("swap-transfer-button");
+  marketTabButton = () => getElementById("tab-bar-market");
 
   async navigateToSettings() {
     await tapByElement(this.portfolioSettingsButton());
@@ -43,4 +44,8 @@ export default class PortfolioPage {
   async openViaDeeplink() {
     await openDeeplink(baseLink);
   }
+
+  openMarketPage() {
+    return tapByElement(this.marketTabButton());
+  }
 }

apps/ledger-live-mobile/e2e/specs/market.spec.ts

@@ -0,0 +1,46 @@
+import * as detox from "detox";
+import PortfolioPage from "../models/wallet/portfolioPage";
+import MarketPage from "../models/market/marketPage";
+import { loadConfig } from "../bridge/server";
+import { isAndroid, getElementByText } from "../helpers";
+
+let portfolioPage: PortfolioPage;
+let marketPage: MarketPage;
+
+describe("Market page for user with no device", () => {
+  beforeAll(async () => {
+    loadConfig("1accountEth", true);
+    portfolioPage = new PortfolioPage();
+    marketPage = new MarketPage();
+  });
+
+  it("should find the researched crypto", async () => {
+    await portfolioPage.waitForPortfolioPageToLoad();
+    await portfolioPage.openMarketPage();
+    await marketPage.searchAsset("btc\n");
+    await detox.expect(getElementByText("Bitcoin (BTC)")).toBeVisible();
+  });
+
+  it("should filter starred asset in the list", async () => {
+    await marketPage.openAssetPage("Bitcoin (BTC)");
+    await marketPage.starFavoriteCoin();
+    await marketPage.backToAssetList();
+    await marketPage.filterStaredAsset();
+    await detox.expect(getElementByText("Bitcoin (BTC)")).toBeVisible();
+  });
+
+  it("should redirect to the buy a nano marketplace page", async () => {
+    await marketPage.openAssetPage("Bitcoin (BTC)");
+    await marketPage.buyNano();
+    await marketPage.openMarketPlace();
+
+    if (isAndroid()) {
+      const url = await detox.web.element(detox.by.web.id("main")).getCurrentUrl();
+      const expectedUrl = "https://shop.ledger.com/";
+
+      expect(url).toContain(expectedUrl);
+    } else {
+      console.warn("Skipping webview check on iOS");
+    }
+  });
+});

apps/ledger-live-mobile/src/components/FabActions/FabButtonBar.tsx

@@ -15,7 +15,7 @@ function FabButtonBar({ data }: Props) {
       showsHorizontalScrollIndicator={false}
       contentContainerStyle={{ paddingHorizontal: 16 }}
     >
-      {data.map(({ children, onPress, Icon, buttonProps, disabled }, index) => (
+      {data.map(({ children, onPress, Icon, buttonProps, disabled, testId }, index) => (
         <Button
           size={"small"}
           Icon={Icon}
@@ -26,6 +26,7 @@ function FabButtonBar({ data }: Props) {
           onPress={onPress}
           key={index}
           mr={3}
+          testID={testId}
         >
           {children}
         </Button>

apps/ledger-live-mobile/src/components/FabActions/hooks/useAssetActions.tsx

@@ -86,6 +86,7 @@ export default function useAssetActions({ currency, accounts }: useAssetActionsP
               label: t("exchange.buy.tabTitle"),
               Icon: iconBuy,
               disabled: isPtxServiceCtaScreensDisabled,
+              testId: "market-buy-btn",
               navigationParams: [
                 NavigatorName.Exchange,
                 {

apps/ledger-live-mobile/src/components/FabActions/index.tsx

@@ -55,6 +55,7 @@ export type ActionButtonEvent = ActionButtonEventProps & {
   Component?: ComponentType;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  testId?: string;
 };
 
 export type ActionButtonProps = {
@@ -64,6 +65,7 @@ export type ActionButtonProps = {
   onPress?: TouchableOpacityProps["onPress"];
   children: React.ReactNode;
   buttonProps?: ButtonProps;
+  testId?: string;
 };
 
 export const FabButtonBarProvider = ({
@@ -163,6 +165,7 @@ export const FabButtonBarProvider = ({
         ? () => onPressWhenDisabled(action)
         : undefined,
       buttonProps: action.buttonProps,
+      testId: action.testId,
     }))
     .sort(a => (a.disabled ? 0 : -1));
 

apps/ledger-live-mobile/src/components/RootNavigator/MainNavigator.tsx

@@ -103,7 +103,12 @@ export default function MainNavigator() {
           headerShown: false,
           unmountOnBlur: true,
           tabBarIcon: props => (
-            <TabIcon Icon={Icons.GraphGrowMedium} i18nKey="tabs.market" {...props} />
+            <TabIcon
+              Icon={Icons.GraphGrowMedium}
+              i18nKey="tabs.market"
+              testID="tab-bar-market"
+              {...props}
+            />
           ),
         }}
         listeners={({ navigation }) => ({

apps/ledger-live-mobile/src/components/TabIcon.tsx

@@ -6,6 +6,7 @@ import styled from "styled-components/native";
 type Props = {
   color: string;
   i18nKey: string;
+  testID?: string;
   Icon: React.ComponentType<{ size?: number; color?: string }>;
 };
 
@@ -16,10 +17,10 @@ const TabIconContainer = styled.View`
   padding-top: ${p => p.theme.space[2]}px;
 `;
 
-export default function TabIcon({ Icon, i18nKey, color }: Props) {
+export default function TabIcon({ Icon, i18nKey, color, testID }: Props) {
   const { t } = useTranslation();
   return (
-    <TabIconContainer>
+    <TabIconContainer testID={testID}>
       <Icon size={24} color={color} />
       <Text
         numberOfLines={1}

apps/ledger-live-mobile/src/components/wrappedUi/Button.tsx

@@ -6,9 +6,16 @@ import { track } from "../../analytics";
 export type WrappedButtonProps = ButtonProps & {
   event?: string;
   eventProperties?: unknown;
+  buttonTestId?: string;
 };
 
-function Button({ onPress, event, eventProperties, ...othersProps }: WrappedButtonProps) {
+function Button({
+  onPress,
+  event,
+  eventProperties,
+  buttonTestId,
+  ...othersProps
+}: WrappedButtonProps) {
   const onPressHandler = useCallback(
     async pressEvent => {
       if (!onPress) return;
@@ -20,7 +27,7 @@ function Button({ onPress, event, eventProperties, ...othersProps }: WrappedButt
     [event, eventProperties, onPress],
   );
 
-  return <UiButton onPress={onPressHandler} {...othersProps} />;
+  return <UiButton onPress={onPressHandler} {...othersProps} buttonTestId={buttonTestId} />;
 }
 
 export default Button;

apps/ledger-live-mobile/src/screens/GetDeviceScreen.tsx

@@ -204,7 +204,20 @@ export default function GetDeviceScreen() {
         </Flex>
       </ScrollListContainer>
       <Flex borderTopColor="neutral.c40" borderTopWidth={1}>
-        <Button mx={6} my={6} type="main" outline={false} onPress={buyLedger} size="large">
+        <Button
+          mx={6}
+          my={6}
+          type="main"
+          outline={false}
+          event="button_clicked"
+          testID="market-place-btn"
+          eventProperties={{
+            button: "Buy your Ledger now",
+            screen: ScreenName.GetDevice,
+          }}
+          onPress={buyLedger}
+          size="large"
+        >
           {t("buyDevice.cta")}
         </Button>
         <Flex px={6} pt={0} pb={5}>

apps/ledger-live-mobile/src/screens/Market/MarketDetail/index.tsx

@@ -41,7 +41,12 @@ type NavigationProps = BaseComposite<
 >;
 
 export const BackButton = ({ navigation }: { navigation: NavigationProps["navigation"] }) => (
-  <Button size="large" onPress={() => navigation.goBack()} Icon={Icons.ArrowLeftMedium} />
+  <Button
+    size="large"
+    onPress={() => navigation.goBack()}
+    Icon={Icons.ArrowLeftMedium}
+    testID="market-back-btn"
+  />
 );
 
 function MarketDetail({ navigation, route }: NavigationProps) {
@@ -192,7 +197,12 @@ function MarketDetail({ navigation, route }: NavigationProps) {
           </Flex>
         }
         TopRightSection={
-          <Button size="large" onPress={toggleStar} iconName={isStarred ? "StarSolid" : "Star"} />
+          <Button
+            testID="star-asset"
+            size="large"
+            onPress={toggleStar}
+            iconName={isStarred ? "StarSolid" : "Star"}
+          />
         }
         BottomSection={
           <>

apps/ledger-live-mobile/src/screens/Market/SearchHeader.tsx

@@ -35,6 +35,7 @@ function SearchHeader({ search, refresh }: Props) {
 
   return (
     <SearchInput
+      testID="search-box"
       value={inputSearch ?? ""}
       onChange={setInputSearch}
       placeholder={t("common.search")}

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

@@ -147,7 +147,7 @@ const BottomSection = ({ navigation }: { navigation: NavigationProps["navigation
     >
       <TrackScreen category="Page" name={"Market"} access={true} />
 
-      <TouchableOpacity onPress={toggleFilterByStarredAccounts}>
+      <TouchableOpacity onPress={toggleFilterByStarredAccounts} testID="starred">
         <Badge bg={filterByStarredAccount ? "primary.c80" : "neutral.c30"}>
           <Icon
             name={filterByStarredAccount ? "StarSolid" : "Star"}

libs/ui/packages/native/src/components/cta/Button/index.tsx

@@ -22,7 +22,7 @@ export type ButtonProps = TouchableOpacityProps &
     children?: React.ReactNode;
     pending?: boolean;
     displayContentWhenPending?: boolean;
-    testID?: string;
+    buttonTestId?: string;
   };
 
 const IconContainer = styled.View<{
@@ -94,6 +94,7 @@ const ButtonContainer = (props: ButtonProps & { hide?: boolean }): React.ReactEl
     iconName,
     pending,
     displayContentWhenPending,
+    buttonTestId,
   } = props;
   const theme = useTheme();
   const { text } = getButtonColorStyle(theme.colors, props);
@@ -113,7 +114,12 @@ const ButtonContainer = (props: ButtonProps & { hide?: boolean }): React.ReactEl
   return (
     <Container hide={hide}>
       {iconPosition === "right" && children ? (
-        <Text variant={ctaTextType[size]} fontWeight={"semiBold"} color={textColor}>
+        <Text
+          testID={buttonTestId}
+          variant={ctaTextType[size]}
+          fontWeight={"semiBold"}
+          color={textColor}
+        >
           {children}
         </Text>
       ) : null}