ui: bugfix, change isSmalScreen logic, add scroll to tiers info

ambrosus · Dec 17, 2024 · 2a8695d · 2a8695d
1 parent 8d6ef36
commit 2a8695d
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 31 deletions.
diff --git a/src/components/svg/icons/v2/harbor/StakeIcon.tsx b/src/components/svg/icons/v2/harbor/StakeIcon.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { COLORS } from '@constants/colors';
+
+export const StakeIcon = ({ scale = 1, color = COLORS.neutral600 }) => {
+  const width = 20 * scale;
+  const height = 20 * scale;
+
+  return (
+    <Svg width={width} height={height} fill="none">
+      <Path
+        fill={color}
+        d="M14 7.5h-3.375v3.7l1.725-1.725a.618.618 0 0 1 .442-.183c.158 0 .316.058.441.183a.629.629 0 0 1 0 .883l-2.791 2.792a.629.629 0 0 1-.884 0l-2.791-2.792a.629.629 0 0 1 0-.883.629.629 0 0 1 .883 0L9.375 11.2V7.5H6c-2.667 0-4.333 1.667-4.333 4.333v2.159c0 2.675 1.666 4.341 4.333 4.341h7.992c2.666 0 4.333-1.666 4.333-4.333v-2.167C18.333 9.167 16.667 7.5 14 7.5ZM10.625 2.292A.63.63 0 0 0 10 1.667a.63.63 0 0 0-.625.625V7.5h1.25V2.292Z"
+      />
+    </Svg>
+  );
+};
diff --git a/src/components/svg/icons/v2/harbor/index.ts b/src/components/svg/icons/v2/harbor/index.ts
@@ -7,3 +7,4 @@ export { SuccessIcon } from './SuccessIcon';
 export { ErrorIcon } from './ErrorIcon';
 export { HarborAccountAction } from './HarborAccountAction';
 export { CircleInfoIcon } from './CircleInfoIcon';
+export { StakeIcon } from './StakeIcon';
diff --git a/src/components/templates/DropDownPanel/index.tsx b/src/components/templates/DropDownPanel/index.tsx
@@ -24,7 +24,7 @@ interface ToolTipProps {
   contentContainerStyle?: ViewStyle;
   headerStyle?: ViewStyle;
   contentWrapperStyle?: ViewStyle;
-  onPress?: () => void;
+  onPress?: (payload?: string) => void;
 }
 
 export const DropDownPanel = ({
@@ -62,7 +62,7 @@ export const DropDownPanel = ({
     );
     initialRotation.value = withTiming(isToolTipClose ? 90 : -90);
     if (onPress) {
-      onPress();
+      onPress(isToolTipClose ? 'open' : 'close');
     }
   };
 

diff --git a/src/features/harbor/components/base/preview-modules/form-template/index.tsx b/src/features/harbor/components/base/preview-modules/form-template/index.tsx
@@ -9,7 +9,7 @@ import { styles } from './styles';
 import { Row, Spacer, Text } from '@components/base';
 import { COLORS } from '@constants/colors';
 import { scale } from '@utils/scaling';
-import { PrimaryButton } from '@components/modular';
+import { PrimaryButton, TokenLogo } from '@components/modular';
 import { TextOrSpinner } from '@components/composite';
 
 export const FormTemplate = ({
@@ -47,7 +47,13 @@ export const FormTemplate = ({
             {t(item.name)}
           </Text>
         )}
-        <Row>
+        <Row alignItems="center">
+          {!!item?.symbol && (
+            <>
+              <TokenLogo scale={0.7} token={item.symbol} />
+              <Spacer horizontal value={scale(4)} />
+            </>
+          )}
           <Text
             fontSize={scale(14)}
             color={COLORS.neutral900}
@@ -57,7 +63,7 @@ export const FormTemplate = ({
           </Text>
           {!!item.timeSymbol && (
             <Text fontSize={scale(14)} color={COLORS.neutral900}>
-              {t(item.timeSymbol)}
+              !!!{t(item.timeSymbol)}
             </Text>
           )}
           {!!item.symbol && (

diff --git a/src/features/harbor/components/base/preview-modules/success-template/copy-hash/index.tsx b/src/features/harbor/components/base/preview-modules/success-template/copy-hash/index.tsx
@@ -6,9 +6,10 @@ import { Row, Text } from '@components/base';
 import { GlobeIcon } from '@components/svg/icons/v2';
 import { StringUtils } from '@utils/string';
 import { COLORS } from '@constants/colors';
-import { contentBox } from '@components/styles';
 import { Toast, ToastPosition, ToastType } from '@components/modular';
 import { scale } from '@utils/scaling';
+import { contentBox } from '@components/styles';
+import { styles } from './styles';
 
 interface CopyHashModel {
   hash: string;
@@ -27,16 +28,13 @@ export const CopyHash = ({ hash }: CopyHashModel) => {
 
   return (
     <Pressable onPress={onTxPress}>
-      <Row style={contentBox}>
+      <Row alignItems="center" justifyContent="center" style={contentBox}>
         <GlobeIcon color={COLORS.neutral600} />
-        <Text fontSize={scale(12)}>{t('common.transaction')}</Text>
-        <Text
-          fontSize={scale(12)}
-          style={{
-            textDecorationLine: 'underline',
-            color: COLORS.neutral900
-          }}
-        >
+        <Text color={COLORS.neutral500} fontSize={scale(12)}>
+          {' '}
+          {t('common.transaction')}{' '}
+        </Text>
+        <Text fontSize={scale(12)} style={styles.hash}>
           {' '}
           {StringUtils.formatAddress(hash, 10, 0)}
         </Text>

diff --git a/src/features/harbor/components/base/preview-modules/success-template/copy-hash/styles.tsx b/src/features/harbor/components/base/preview-modules/success-template/copy-hash/styles.tsx
@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+import { COLORS } from '@constants/colors';
+
+export const styles = StyleSheet.create({
+  hash: {
+    textDecorationLine: 'underline',
+    color: COLORS.neutral900
+  }
+});
diff --git a/src/features/harbor/components/base/stake-info-container/index.tsx b/src/features/harbor/components/base/stake-info-container/index.tsx
@@ -8,12 +8,12 @@ import { COLORS } from '@constants/colors';
 import { scale } from '@utils/scaling';
 import { useNavigation } from '@react-navigation/native';
 import { HarborNavigationProp } from '@appTypes/navigation/harbor';
-import { PlusIcon } from '@components/svg/icons/v2';
 import { NumberUtils } from '@utils/number';
 import { CryptoCurrencyCode } from '@appTypes';
 import { styles } from './styles';
 import { useAMBPrice } from '@hooks';
 import { HarborDataModel } from '@entities/harbor/model/types';
+import { StakeIcon } from '@components/svg/icons/v2/harbor';
 
 interface StakeInfoContainerProps {
   loading: boolean;
@@ -65,7 +65,9 @@ export const StakeInfoContainer = ({
               <Text fontSize={scale(12)}>{t('harbor.staked.amount')}</Text>
               <Spacer value={scale(8)} />
               <Text style={styles.topText} color={COLORS.neutral900}>
-                {NumberUtils.limitDecimalCount(formatEther(userStaked), 2)}
+                {NumberUtils.numberToTransformedLocale(
+                  NumberUtils.limitDecimalCount(formatEther(userStaked), 2)
+                )}
               </Text>
             </View>
           </Row>
@@ -97,10 +99,12 @@ export const StakeInfoContainer = ({
 
       <Spacer value={scale(16)} />
       <PrimaryButton onPress={navigateToStake}>
-        <Row>
-          <PlusIcon color={COLORS.neutral0} />
+        <Row justifyContent="center" alignItems="center">
+          <StakeIcon color={COLORS.neutral0} />
           <Spacer horizontal value={scale(10)} />
-          <Text color={COLORS.neutral0}>{t('staking.header')}</Text>
+          <Text align="justify" color={COLORS.neutral0}>
+            {t('staking.header')}
+          </Text>
         </Row>
       </PrimaryButton>
     </View>

diff --git a/src/features/harbor/components/base/tiers-info-container/index.tsx b/src/features/harbor/components/base/tiers-info-container/index.tsx
@@ -9,7 +9,13 @@ import { DropDownPanel } from '@components/templates';
 import { styles } from './styles';
 import { TierInfoItem } from '../tier-info-item';
 
-export const TiersInfoContainer = () => {
+interface TierInfoContainerProps {
+  onToggleTiers?: (payload?: string) => void;
+}
+
+export const TiersInfoContainer = ({
+  onToggleTiers
+}: TierInfoContainerProps) => {
   const { t } = useTranslation();
   const headerContent = useMemo(
     () => (
@@ -50,7 +56,19 @@ export const TiersInfoContainer = () => {
           content="harbor.tier.4.content"
         />
       </Row>
+      <Spacer value={scale(12)} />
+      <Row justifyContent="center">
+        <Text color={COLORS.brand600} fontSize={scale(12)}>
+          {t('harbor.tier.info')}
+        </Text>
+      </Row>
     </View>
   );
-  return <DropDownPanel header={headerContent} content={dropDownContent} />;
+  return (
+    <DropDownPanel
+      onPress={onToggleTiers}
+      header={headerContent}
+      content={dropDownContent}
+    />
+  );
 };
diff --git a/src/features/harbor/components/tabs/stake-amb-tab/index.tsx b/src/features/harbor/components/tabs/stake-amb-tab/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { RefreshControl, ScrollView, View } from 'react-native';
 import { scale } from '@utils/scaling';
 import { Spacer } from '@components/base';
@@ -9,8 +9,10 @@ import {
   StakeInfoContainer,
   TiersInfoContainer
 } from '@features/harbor/components/base';
+import { isSmallScreen } from '@utils/deviceSpecification';
 
-export const StakeAMBTab = ({}) => {
+export const StakeAMBTab = () => {
+  const scrollRef = useRef<ScrollView>(null);
   const { data: harborData, loading, updateAll } = useHarborStore();
   const { wallet } = useWalletStore();
 
@@ -25,15 +27,38 @@ export const StakeAMBTab = ({}) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [wallet?.address]);
 
+  const [extraHeight, setExtraHeight] = useState(50);
+
+  const onScrollTo = (value: number) => {
+    if (isSmallScreen) {
+      scrollRef.current?.scrollTo({ y: value, animated: true });
+    }
+  };
+
+  const onToggleTiers = (event?: string) => {
+    switch (event) {
+      case 'open':
+        setExtraHeight(400);
+        onScrollTo(extraHeight);
+        break;
+      default:
+        setExtraHeight(50);
+        onScrollTo(0);
+        break;
+    }
+  };
+
   return (
     <View>
       <ScrollView
+        ref={scrollRef}
         refreshControl={renderRefetchController}
         style={styles.wrapper}
       >
         <StakeInfoContainer harborData={harborData} loading={loading} />
         <Spacer value={scale(15)} />
-        <TiersInfoContainer />
+        <TiersInfoContainer onToggleTiers={onToggleTiers} />
+        <Spacer value={extraHeight} />
       </ScrollView>
     </View>
   );

diff --git a/src/features/harbor/components/tabs/stake-amb-tab/styles.ts b/src/features/harbor/components/tabs/stake-amb-tab/styles.ts
@@ -2,5 +2,5 @@ import { StyleSheet } from 'react-native';
 import { scale } from '@utils/scaling';
 
 export const styles = StyleSheet.create({
-  wrapper: { height: '100%', paddingHorizontal: scale(8) }
+  wrapper: { paddingHorizontal: scale(8) }
 });
diff --git a/src/localization/locales/English.json b/src/localization/locales/English.json
@@ -551,6 +551,8 @@
   "harbor.tier.4.header": "3yrs+ Stakers",
   "harbor.tier.4.content": "100% rewards available immediately, increasing by 1% every 250K blocks.",
 
+  "harbor.tier.info": "Remaining rewards are available as $BOND, which can be exchanged on the Bond marketplace.",
+
   "harbor.requests.date": "Requests date",
   "harbor.unlock.date": "Unlock date",
   "harbor.empty.withdrawals.list": "There are no withdrawal requests at the moment.",

diff --git a/src/localization/locales/Turkish.json b/src/localization/locales/Turkish.json
@@ -549,6 +549,8 @@
   "harbor.tier.4.header": "!!!3yrs+ Stakers",
   "harbor.tier.4.content": "!!!100% rewards available immediately, increasing by 1% every 250K blocks.",
 
+  "harbor.tier.info": "!!!Remaining rewards are available as $BOND, which can be exchanged on the Bond marketplace.",
+
   "harbor.requests.date": "!!!Requests date",
   "harbor.unlock.date": "!!!Unlock date",
   "harbor.empty.withdrawals.list": "!!!There are no withdrawal requests at the moment.",

diff --git a/src/screens/Harbor/ProcessStake/ProcessStake.tsx b/src/screens/Harbor/ProcessStake/ProcessStake.tsx
@@ -189,15 +189,13 @@ export const ProcessStake = () => {
           <View>
             <Spacer value={scale(8)} />
             <StakedBalanceInfo
-              stakedValue={NumberUtils.limitDecimalCount(
-                +formatEther(userStaked),
-                2
+              stakedValue={NumberUtils.numberToTransformedLocale(
+                NumberUtils.limitDecimalCount(+formatEther(userStaked), 2)
               )}
               coin="AMB"
               title={t('harbor.staked.balance')}
             />
             <Spacer value={scale(8)} />
-
             <InputWithoutTokenSelect
               inputError={inputError}
               value={amountToStake}

diff --git a/src/utils/deviceSpecification.ts b/src/utils/deviceSpecification.ts
@@ -2,4 +2,6 @@ import { DEVICE_HEIGHT } from '@constants/variables';
 
 const smallScreenHeight = [667, 812];
 
-export const isSmallScreen = smallScreenHeight.includes(DEVICE_HEIGHT);
+const minimum = Math.max(...smallScreenHeight);
+
+export const isSmallScreen = DEVICE_HEIGHT <= minimum;