From 63d09d523c87c2b1f773523fc69ae1ac280df8fe Mon Sep 17 00:00:00 2001
From: ArturHoncharuk <73081258+ArturHoncharuk@users.noreply.github.com>
Date: Tue, 28 Jan 2025 16:37:01 +0200
Subject: [PATCH 1/2] refactor(ui): update stake info components with inline
 styling and consistent typography

---
 .../base/stake-info-container/index.tsx       | 46 +++++++++++++++----
 .../base/stake-info-container/styles.ts       | 14 +-----
 .../components/RateInfo/RateInfo.tsx          | 36 +++++++++++++--
 .../components/RateInfo/styles.ts             |  9 +---
 4 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/src/features/harbor/components/base/stake-info-container/index.tsx b/src/features/harbor/components/base/stake-info-container/index.tsx
index 0bb1a22f1..88070c71f 100644
--- a/src/features/harbor/components/base/stake-info-container/index.tsx
+++ b/src/features/harbor/components/base/stake-info-container/index.tsx
@@ -72,23 +72,51 @@ export const StakeInfoContainer = ({
           <Spacer value={scale(15)} />
           <View style={styles.infoMain}>
             <Row justifyContent={'space-between'}>
-              <Text style={styles.infoTitleText}>{t('harbor.apr')}</Text>
-              <Text style={styles.aprText}>{harborAPR} %</Text>
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.neutral600}
+              >
+                {t('harbor.apr')}
+              </Text>
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.success500}
+              >
+                {harborAPR} %
+              </Text>
             </Row>
-            <Spacer value={scale(8)} />
             <Row justifyContent={'space-between'}>
-              <Text style={styles.infoTitleText}>
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.neutral600}
+              >
                 {t('harbor.total.staked')}
               </Text>
-              <Text style={styles.intoText}>{totalAMBStaked} AMB</Text>
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.neutral900}
+              >
+                {totalAMBStaked} AMB
+              </Text>
             </Row>
-            <Spacer value={scale(8)} />
             <Row justifyContent={'space-between'}>
-              <Text style={styles.infoTitleText}>
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.neutral600}
+              >
                 {t('harbor.total.staked.value')}
               </Text>
-              <Text style={styles.intoText}>
-                $ {NumberUtils.minimiseAmount(+totalStakedOnHarbor.usd)}
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.neutral900}
+              >
+                ${NumberUtils.minimiseAmount(+totalStakedOnHarbor.usd)}
               </Text>
             </Row>
           </View>
diff --git a/src/features/harbor/components/base/stake-info-container/styles.ts b/src/features/harbor/components/base/stake-info-container/styles.ts
index ce2c109b7..cdeb88810 100644
--- a/src/features/harbor/components/base/stake-info-container/styles.ts
+++ b/src/features/harbor/components/base/stake-info-container/styles.ts
@@ -18,17 +18,7 @@ export const styles = StyleSheet.create({
   infoMain: {
     backgroundColor: COLORS.neutral100,
     borderRadius: 16,
-    padding: scale(10)
-  },
-  infoTitleText: {
-    color: COLORS.neutral600,
-    fontSize: scale(14)
-  },
-  intoText: {
-    color: COLORS.neutral900,
-    fontSize: scale(14)
-  },
-  aprText: {
-    color: COLORS.success500
+    padding: scale(10),
+    rowGap: 12
   }
 });
diff --git a/src/screens/Harbor/ProcessStake/components/RateInfo/RateInfo.tsx b/src/screens/Harbor/ProcessStake/components/RateInfo/RateInfo.tsx
index d0177a39e..598a00a38 100644
--- a/src/screens/Harbor/ProcessStake/components/RateInfo/RateInfo.tsx
+++ b/src/screens/Harbor/ProcessStake/components/RateInfo/RateInfo.tsx
@@ -15,18 +15,44 @@ export const RateInfo = ({ availableToStake, rate = 1 }: RateInfoModel) => {
   return (
     <View style={styles.main}>
       <Row justifyContent="space-between">
-        <Text style={styles.title}>{t('harbor.exchange.rate')}</Text>
-        <Text style={styles.text}>
+        <Text
+          fontSize={14}
+          fontFamily="Inter_500Medium"
+          color={COLORS.neutral600}
+        >
+          {t('harbor.exchange.rate')}
+        </Text>
+        <Text
+          fontSize={14}
+          fontFamily="Inter_500Medium"
+          color={COLORS.neutral900}
+        >
           1 AMB = {rate}
           {CryptoCurrencyCode.stAMB}
         </Text>
       </Row>
       <Spacer value={scale(16)} />
       <Row justifyContent="space-between">
-        <Text style={styles.title}>{t('harbor.stake.available')}</Text>
-        <Text style={styles.text}>
+        <Text
+          fontSize={14}
+          fontFamily="Inter_500Medium"
+          color={COLORS.neutral600}
+        >
+          {t('harbor.stake.available')}
+        </Text>
+        <Text
+          fontSize={14}
+          fontFamily="Inter_500Medium"
+          color={COLORS.neutral900}
+        >
           {NumberUtils.minimiseAmount(+availableToStake)}{' '}
-          <Text color={COLORS.neutral600}>AMB</Text>
+          <Text
+            fontSize={14}
+            fontFamily="Inter_500Medium"
+            color={COLORS.neutral600}
+          >
+            AMB
+          </Text>
         </Text>
       </Row>
     </View>
diff --git a/src/screens/Harbor/ProcessStake/components/RateInfo/styles.ts b/src/screens/Harbor/ProcessStake/components/RateInfo/styles.ts
index 42a593817..c2cb0dbe8 100644
--- a/src/screens/Harbor/ProcessStake/components/RateInfo/styles.ts
+++ b/src/screens/Harbor/ProcessStake/components/RateInfo/styles.ts
@@ -6,14 +6,7 @@ import { scale } from '@utils';
 export const styles = StyleSheet.create({
   main: {
     ...contentBox,
+    padding: scale(16),
     backgroundColor: COLORS.neutral100
-  },
-  title: {
-    fontSize: scale(14),
-    color: COLORS.neutral600
-  },
-  text: {
-    fontSize: scale(12),
-    color: COLORS.neutral900
   }
 });

From 5f2e6e203c072f1125e237f92238bb2f2fdf9f65 Mon Sep 17 00:00:00 2001
From: ArturHoncharuk <73081258+ArturHoncharuk@users.noreply.github.com>
Date: Tue, 28 Jan 2025 16:43:50 +0200
Subject: [PATCH 2/2] feat(products): conditionally filter BrowserScreen in
 production

---
 .../components/templates/products-list/index.tsx  | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/features/products/components/templates/products-list/index.tsx b/src/features/products/components/templates/products-list/index.tsx
index 410f07db0..1a99f2d30 100644
--- a/src/features/products/components/templates/products-list/index.tsx
+++ b/src/features/products/components/templates/products-list/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import {
   SectionList,
   SectionListData,
@@ -41,11 +41,22 @@ export const ProductsList = () => {
     []
   );
 
+  const devSupportedProducts = useMemo(
+    () =>
+      PRODUCTS(t).map((section) => ({
+        ...section,
+        data: section.data.filter(
+          (item) => !(!__DEV__ && item.route === 'BrowserScreen')
+        )
+      })),
+    [t]
+  );
+
   return (
     <SectionList<Product, SectionizedProducts>
       bounces={false}
       keyExtractor={(item) => item.id.toString()}
-      sections={PRODUCTS(t)}
+      sections={devSupportedProducts}
       renderSectionHeader={renderSectionHeader}
       renderItem={renderProductItem}
       style={styles.container}