[ENG-5196] [ENG-5199] Remove Transactions title when there are tabs, …

…remove right arrow for Reset wallet (#609) * [ENG-5196] [ENG-5199] Remove Transactions title when there are tabs, remove right arrow for Reset wallet * Update the transactionHistory e2e test * Remove the unnecessary prop type from the Button component
secretkeylabs · Oct 3, 2024 · 8fe7bac · 8fe7bac
1 parent 3472503
commit 8fe7bac
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 71 deletions.
diff --git a/src/app/components/resetWallet/index.tsx b/src/app/components/resetWallet/index.tsx
@@ -31,6 +31,7 @@ function ResetWalletPrompt({
   openResetWalletScreen,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'SETTING_SCREEN' });
+
   return (
     <Sheet
       visible={showResetWalletPrompt}

diff --git a/src/app/screens/backupWallet/index.tsx b/src/app/screens/backupWallet/index.tsx
@@ -10,8 +10,8 @@ import styled from 'styled-components';
 
 const Container = styled.div((props) => ({
   flex: 1,
-  paddingLeft: props.theme.spacing(8),
-  paddingRight: props.theme.spacing(8),
+  paddingLeft: props.theme.space.m,
+  paddingRight: props.theme.space.m,
   display: 'flex',
   flexDirection: 'column',
 }));
@@ -27,7 +27,7 @@ const ContentContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
-  marginBottom: props.theme.spacing(32),
+  marginBottom: props.theme.space.xxxl,
 }));
 
 const Title = styled.h1((props) => ({
@@ -46,7 +46,7 @@ const BackupActionsContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
   justifyContent: 'space-between',
-  marginTop: props.theme.spacing(20),
+  marginTop: props.theme.space.xxl,
   width: '100%',
   columnGap: props.theme.space.xs,
 }));
@@ -55,7 +55,7 @@ const LoadingContainer = styled.div((props) => ({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  marginTop: props.theme.spacing(20),
+  marginTop: props.theme.space.xxl,
   width: '100%',
 }));
 

diff --git a/src/app/screens/coinDashboard/index.tsx b/src/app/screens/coinDashboard/index.tsx
@@ -50,7 +50,7 @@ const SecondaryContainer = styled.div((props) => ({
   flexDirection: 'column',
   paddingLeft: props.theme.space.m,
   paddingRight: props.theme.space.m,
-  marginTop: props.theme.space.xl,
+  marginTop: props.theme.space.l,
   marginBottom: props.theme.space.xl,
   h1: {
     ...props.theme.typography.body_medium_m,
@@ -295,6 +295,7 @@ export default function CoinDashboard() {
             brc20Token={protocol === 'brc-20' ? selectedFt?.principal || null : null}
             runeToken={protocol === 'runes' ? selectedFt?.name || null : null}
             runeSymbol={protocol === 'runes' ? selectedFt?.runeSymbol || null : null}
+            withTitle={!displayTabs}
           />
         )}
         {showStxContract && (

diff --git a/src/app/screens/coinDashboard/transactionsHistoryList.tsx b/src/app/screens/coinDashboard/transactionsHistoryList.tsx
@@ -34,18 +34,18 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-const ListItemsContainer = styled.div({
+const ListItemsContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-});
+  marginTop: props.theme.space.l,
+}));
 
 const ListHeader = styled.h1((props) => ({
-  marginTop: props.theme.spacing(20),
-  marginBottom: props.theme.spacing(12),
-  marginLeft: props.theme.spacing(8),
-  marginRight: props.theme.spacing(8),
-  ...props.theme.headline_s,
+  ...props.theme.typography.headline_xs,
+  margin: props.theme.space.m,
+  marginTop: 0,
+  marginBottom: props.theme.space.l,
 }));
 
 const LoadingContainer = styled.div({
@@ -65,16 +65,16 @@ const NoTransactionsContainer = styled.div((props) => ({
 }));
 
 const GroupContainer = styled(animated.div)((props) => ({
-  marginBottom: props.theme.spacing(8),
+  marginBottom: props.theme.space.m,
 }));
 
 const SectionHeader = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
   marginBottom: props.theme.spacing(7),
-  paddingLeft: props.theme.spacing(8),
-  paddingRight: props.theme.spacing(8),
+  paddingLeft: props.theme.space.m,
+  paddingRight: props.theme.space.m,
 }));
 
 const SectionSeparator = styled.div((props) => ({
@@ -86,17 +86,9 @@ const SectionSeparator = styled.div((props) => ({
 const SectionTitle = styled.p((props) => ({
   ...props.theme.body_xs,
   color: props.theme.colors.white_200,
-  marginRight: props.theme.spacing(4),
+  marginRight: props.theme.space.xs,
 }));
 
-interface TransactionsHistoryListProps {
-  coin: CurrencyTypes;
-  stxTxFilter: string | null;
-  brc20Token: string | null;
-  runeToken: string | null;
-  runeSymbol: string | null;
-}
-
 const sortTransactionsByBlockHeight = (transactions: BtcTransactionData[]) =>
   transactions.sort((txA, txB) => {
     if (txB.blockHeight > txA.blockHeight) {
@@ -189,8 +181,24 @@ const filterStxTxs = (
     );
   });
 
-export default function TransactionsHistoryList(props: TransactionsHistoryListProps) {
-  const { coin, stxTxFilter, brc20Token, runeToken, runeSymbol } = props;
+type Props = {
+  coin: CurrencyTypes;
+  stxTxFilter: string | null;
+  brc20Token: string | null;
+  runeToken: string | null;
+  runeSymbol: string | null;
+  withTitle?: boolean;
+};
+
+function TransactionsHistoryList({
+  coin,
+  stxTxFilter,
+  brc20Token,
+  runeToken,
+  runeSymbol,
+  withTitle = true,
+}: Props) {
+  const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
   const selectedAccount = useSelectedAccount();
   const { network, selectedAccountType } = useWalletSelector();
   const btcClient = useBtcClient();
@@ -209,7 +217,6 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
     },
   });
 
-  const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
   const wallet = selectedAccount
     ? {
         ...selectedAccount,
@@ -249,7 +256,7 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
 
   return (
     <ListItemsContainer>
-      <ListHeader>{t('TRANSACTION_HISTORY_TITLE')}</ListHeader>
+      {withTitle && <ListHeader>{t('TRANSACTION_HISTORY_TITLE')}</ListHeader>}
       {groupedTxs &&
         !isLoading &&
         Object.keys(groupedTxs).map((group) => (
@@ -317,3 +324,5 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
     </ListItemsContainer>
   );
 }
+
+export default TransactionsHistoryList;
diff --git a/src/app/screens/ordinalDetail/index.tsx b/src/app/screens/ordinalDetail/index.tsx
@@ -526,7 +526,7 @@ function OrdinalDetailScreen() {
           <Button
             variant="tertiary"
             icon={<img src={ArrowLeft} alt="go back" />}
-            dataTestId="back-to-gallery"
+            data-testid="back-to-gallery"
             onClick={handleBackButtonClick}
             title={backButtonText}
           />
@@ -561,7 +561,7 @@ function OrdinalDetailScreen() {
           <Button
             variant="tertiary"
             icon={<img src={ArrowLeft} alt="go back" />}
-            dataTestId="back-button"
+            data-testid="back-button"
             onClick={handleBackButtonClick}
             title={backButtonText}
           />

diff --git a/src/app/screens/settings/index.tsx b/src/app/screens/settings/index.tsx
@@ -17,8 +17,8 @@ const Container = styled.div`
 
 const Title = styled.h1((props) => ({
   ...props.theme.typography.headline_l,
-  paddingTop: props.theme.space.xxl,
-  paddingBottom: props.theme.space.m,
+  marginTop: props.theme.space.xxl,
+  marginBottom: props.theme.space.s,
 }));
 
 function Setting() {

diff --git a/src/app/screens/settings/security/backupWallet/index.tsx b/src/app/screens/settings/security/backupWallet/index.tsx
@@ -3,7 +3,7 @@ import BottomBar from '@components/tabBar';
 import TopRow from '@components/topRow';
 import useSeedVault from '@hooks/useSeedVault';
 import SeedCheck from '@screens/backupWalletSteps/seedCheck';
-import { Container, Title } from '@screens/settings/index.styles';
+import { Container } from '@screens/settings/index.styles';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -12,16 +12,10 @@ import styled from 'styled-components';
 const EnterPasswordContainer = styled.div((props) => ({
   width: '100%',
   height: '100%',
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  position: 'fixed',
   zIndex: 10,
   background: props.theme.colors.elevation0,
   backdropFilter: 'blur(16px)',
-  padding: 16,
-  paddingTop: props.theme.spacing(40),
+  paddingTop: props.theme.space.l,
 }));
 
 const SeedphraseContainer = styled.div((props) => ({
@@ -30,10 +24,10 @@ const SeedphraseContainer = styled.div((props) => ({
 
 function BackupWalletScreen() {
   const { t } = useTranslation('translation');
-  const [password, setPassword] = useState<string>('');
-  const [error, setError] = useState<string>('');
-  const [loading, setLoading] = useState<boolean>(false);
-  const [showSeed, setShowSeed] = useState<boolean>(false);
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [showSeed, setShowSeed] = useState(false);
   const [seed, setSeed] = useState('');
   const navigate = useNavigate();
   const { getSeed, unlockVault } = useSeedVault();
@@ -49,7 +43,7 @@ function BackupWalletScreen() {
     };
   }, []);
 
-  const goBack = () => {
+  const handleBackButtonClick = () => {
     navigate(-1);
   };
 
@@ -69,9 +63,8 @@ function BackupWalletScreen() {
 
   return (
     <>
-      <TopRow onClick={goBack} />
+      <TopRow onClick={handleBackButtonClick} />
       <Container>
-        <Title>{t('SETTING_SCREEN.BACKUP_WALLET')}</Title>
         {!showSeed && (
           <EnterPasswordContainer>
             <PasswordInput
@@ -80,15 +73,16 @@ function BackupWalletScreen() {
               enteredPassword={password}
               setEnteredPassword={setPassword}
               handleContinue={handlePasswordNextClick}
-              handleBack={goBack}
+              handleBack={handleBackButtonClick}
               passwordError={error}
               stackButtonAlignment
               loading={loading}
+              autoFocus
             />
           </EnterPasswordContainer>
         )}
         <SeedphraseContainer>
-          {showSeed && <SeedCheck seedPhrase={seed} onContinue={goBack} />}
+          {showSeed && <SeedCheck seedPhrase={seed} onContinue={handleBackButtonClick} />}
         </SeedphraseContainer>
       </Container>
       <BottomBar tab="settings" />

diff --git a/src/app/screens/settings/security/index.tsx b/src/app/screens/settings/security/index.tsx
@@ -109,6 +109,7 @@ function Security() {
           text={t('RESET_WALLET')}
           onClick={openResetWalletPrompt}
           showWarningTitle
+          showArrow={false}
         />
         <ResetWalletPrompt
           showResetWalletPrompt={showResetWalletPrompt}

diff --git a/src/app/screens/settings/settingComponent/index.tsx b/src/app/screens/settings/settingComponent/index.tsx
@@ -26,11 +26,11 @@ const TitleText = styled.h1((props) => ({
   paddingTop: props.theme.space.xl,
 }));
 
-const ComponentText = styled.h1<{
-  textColor: string;
+const ComponentText = styled.p<{
+  $textColor: string;
 }>((props) => ({
   ...props.theme.typography.body_medium_l,
-  color: props.textColor,
+  color: props.$textColor,
   flex: 1,
   textAlign: 'left',
 }));
@@ -79,6 +79,7 @@ type Props = {
   onClick?: () => void;
   showDivider?: boolean;
   showWarningTitle?: boolean;
+  showArrow?: boolean;
   toggle?: boolean;
   toggleValue?: boolean;
   description?: string;
@@ -95,6 +96,7 @@ function SettingComponent({
   link,
   showDivider,
   showWarningTitle,
+  showArrow = true,
   toggle,
   toggleValue,
   description,
@@ -103,6 +105,7 @@ function SettingComponent({
   isLoading,
 }: Props) {
   const theme = useTheme();
+
   return (
     <Wrapper>
       <ColumnContainer>
@@ -113,15 +116,17 @@ function SettingComponent({
         >
           <Column>
             <ComponentText
-              textColor={showWarningTitle ? theme.colors.feedback.error : theme.colors.white['200']}
+              $textColor={showWarningTitle ? theme.colors.feedback.error : theme.colors.white_200}
             >
               {text}
             </ComponentText>
             {description && <DescriptionText>{description}</DescriptionText>}
           </Column>
           {textDetail && <ComponentDescriptionText>{textDetail}</ComponentDescriptionText>}
           {!toggle && link && <ArrowUpRight color={theme.colors.white_0} size={16} weight="bold" />}
-          {!toggle && !link && <CaretRight color={theme.colors.white_0} size={16} weight="bold" />}
+          {!toggle && !link && showArrow && (
+            <CaretRight color={theme.colors.white_0} size={16} weight="bold" />
+          )}
           {isLoading && <Spinner color="white" size={16} />}
           {toggle && toggleFunction && !isLoading && (
             <Toggle onChange={toggleFunction} checked={toggleValue ?? false} disabled={disabled} />