Merge pull request #698 from secretkeylabs/tim/eng-3384-issues-found-…

…in-024 Tim/eng 3384 issues found in 024
secretkeylabs · Dec 5, 2023 · 91deed7 · 91deed7
2 parents d371117 + 3d21ca3
commit 91deed7
Show file tree

Hide file tree

Showing 19 changed files with 230 additions and 289 deletions.
diff --git a/src/app/components/confirmBtcTransactionComponent/index.tsx b/src/app/components/confirmBtcTransactionComponent/index.tsx
@@ -24,6 +24,7 @@ import {
 } from '@secretkeylabs/xverse-core';
 import { useMutation } from '@tanstack/react-query';
 import Callout from '@ui-library/callout';
+import { StickyHorizontalSplitButtonContainer } from '@ui-library/common.styled';
 import { CurrencyTypes } from '@utils/constants';
 import BigNumber from 'bignumber.js';
 import { ReactNode, useEffect, useState } from 'react';
@@ -40,35 +41,8 @@ interface MainContainerProps {
 const OuterContainer = styled.div<MainContainerProps>`
   display: flex;
   flex-direction: column;
-  flex: 1;
-  flex-grow: 1;
-  ...${(props) => (props.isGalleryOpen ? props.theme.scrollbar : {})};
 `;
 
-const Container = styled.div((props) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  marginTop: props.theme.spacing(11),
-}));
-
-interface ButtonProps {
-  isBtcSendBrowserTx?: boolean;
-}
-
-const ButtonContainer = styled.div<ButtonProps>((props) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  position: 'relative',
-  marginBottom: props.isBtcSendBrowserTx ? props.theme.spacing(20) : props.theme.spacing(5),
-}));
-
-const TransparentButtonContainer = styled.div((props) => ({
-  marginLeft: props.theme.spacing(2),
-  marginRight: props.theme.spacing(2),
-  width: '100%',
-}));
-
 const Button = styled.button((props) => ({
   display: 'flex',
   flexDirection: 'row',
@@ -77,6 +51,7 @@ const Button = styled.button((props) => ({
   backgroundColor: 'transparent',
   width: '100%',
   marginTop: props.theme.spacing(10),
+  marginBottom: props.theme.space.m,
 }));
 
 const ButtonText = styled.div((props) => ({
@@ -129,7 +104,6 @@ interface Props {
   assetDetailValue?: string;
   isRestoreFundFlow?: boolean;
   nonOrdinalUtxos?: UTXO[];
-  isBtcSendBrowserTx?: boolean;
   currencyType?: CurrencyTypes;
   isPartOfBundle?: boolean;
   ordinalBundle?: Bundle;
@@ -139,7 +113,6 @@ interface Props {
   setCurrentFeeRate: (feeRate: BigNumber) => void;
   onConfirmClick: (signedTxHex: string) => void;
   onCancelClick: () => void;
-  onBackButtonClick: () => void;
 }
 
 function ConfirmBtcTransactionComponent({
@@ -154,7 +127,6 @@ function ConfirmBtcTransactionComponent({
   assetDetailValue,
   isRestoreFundFlow,
   nonOrdinalUtxos,
-  isBtcSendBrowserTx,
   isPartOfBundle,
   currencyType,
   ordinalBundle,
@@ -164,7 +136,6 @@ function ConfirmBtcTransactionComponent({
   setCurrentFeeRate,
   onConfirmClick,
   onCancelClick,
-  onBackButtonClick,
 }: Props) {
   const { t } = useTranslation('translation');
   const isGalleryOpen: boolean = document.documentElement.clientWidth > 360;
@@ -382,117 +353,100 @@ function ConfirmBtcTransactionComponent({
   return (
     <>
       <OuterContainer isGalleryOpen={isGalleryOpen}>
-        <Container>
-          {showFeeWarning && (
-            <InfoContainer
-              type="Warning"
-              bodyText={t('CONFIRM_TRANSACTION.HIGH_FEE_WARNING_TEXT')}
-            />
-          )}
-
-          {children}
-          <ReviewTransactionText centerAligned={currencyType === 'Ordinal'}>
-            {t('CONFIRM_TRANSACTION.REVIEW_TRANSACTION')}
-          </ReviewTransactionText>
-
-          {isPartOfBundle && (
-            <CalloutContainer>
-              <Callout
-                bodyText={t('NFT_DASHBOARD_SCREEN.FROM_RARE_SAT_BUNDLE')}
-                variant="warning"
-              />
-            </CalloutContainer>
-          )}
-          {holdsRareSats && (
-            <CalloutContainer>
-              <Callout bodyText={t('NFT_DASHBOARD_SCREEN.HOLDS_RARE_SAT')} variant="warning" />
-            </CalloutContainer>
-          )}
-
-          {bundle && <SatsBundle bundle={bundle} />}
-
-          {ordinalTxUtxo ? (
+        {showFeeWarning && (
+          <InfoContainer type="Warning" bodyText={t('CONFIRM_TRANSACTION.HIGH_FEE_WARNING_TEXT')} />
+        )}
+        {/* TODO tim: refactor this not to use children. it should be just another prop */}
+        {children}
+        <ReviewTransactionText centerAligned={currencyType === 'Ordinal'}>
+          {t('CONFIRM_TRANSACTION.REVIEW_TRANSACTION')}
+        </ReviewTransactionText>
+        {isPartOfBundle && (
+          <CalloutContainer>
+            <Callout bodyText={t('NFT_DASHBOARD_SCREEN.FROM_RARE_SAT_BUNDLE')} variant="warning" />
+          </CalloutContainer>
+        )}
+        {holdsRareSats && (
+          <CalloutContainer>
+            <Callout bodyText={t('NFT_DASHBOARD_SCREEN.HOLDS_RARE_SAT')} variant="warning" />
+          </CalloutContainer>
+        )}
+        {currencyType !== 'BTC' && bundle && <SatsBundle bundle={bundle} />}
+        {ordinalTxUtxo ? (
+          <RecipientComponent
+            address={recipients[0]?.address}
+            value={assetDetail ?? ''}
+            valueDetail={assetDetailValue}
+            icon={AssetIcon}
+            currencyType={currencyType || 'Ordinal'}
+            title={t('CONFIRM_TRANSACTION.ASSET')}
+          />
+        ) : (
+          recipients?.map((recipient, index) => (
             <RecipientComponent
-              address={recipients[0]?.address}
-              value={assetDetail ?? ''}
-              valueDetail={assetDetailValue}
-              icon={AssetIcon}
-              currencyType={currencyType || 'Ordinal'}
-              title={t('CONFIRM_TRANSACTION.ASSET')}
+              key={recipient.address}
+              recipientIndex={index + 1}
+              address={recipient.address}
+              value={satsToBtc(recipient.amountSats).toString()}
+              totalRecipient={recipients.length}
+              currencyType="BTC"
+              title={t('CONFIRM_TRANSACTION.AMOUNT')}
+              showSenderAddress={isRestoreFundFlow}
             />
-          ) : (
-            recipients?.map((recipient, index) => (
-              <RecipientComponent
-                key={recipient.address}
-                recipientIndex={index + 1}
-                address={recipient.address}
-                value={satsToBtc(recipient.amountSats).toString()}
-                totalRecipient={recipients.length}
-                currencyType="BTC"
-                title={t('CONFIRM_TRANSACTION.AMOUNT')}
-                showSenderAddress={isRestoreFundFlow}
-              />
-            ))
-          )}
-
+          ))
+        )}
+        <TransactionDetailComponent title={t('CONFIRM_TRANSACTION.NETWORK')} value={network.type} />
+        <TransferFeeView
+          feePerVByte={currentFeeRate}
+          fee={currentFee}
+          currency={t('CONFIRM_TRANSACTION.SATS')}
+        />
+        {!ordinalTxUtxo && (
           <TransactionDetailComponent
-            title={t('CONFIRM_TRANSACTION.NETWORK')}
-            value={network.type}
-          />
-          <TransferFeeView
-            feePerVByte={currentFeeRate}
-            fee={currentFee}
-            currency={t('CONFIRM_TRANSACTION.SATS')}
-          />
-          {!ordinalTxUtxo && (
-            <TransactionDetailComponent
-              title={t('CONFIRM_TRANSACTION.TOTAL')}
-              value={getAmountString(satsToBtc(total), t('BTC'))}
-              subValue={getBtcFiatEquivalent(total, BigNumber(btcFiatRate))}
-              subTitle={t('CONFIRM_TRANSACTION.AMOUNT_PLUS_FEES')}
-            />
-          )}
-          <Button onClick={onAdvancedSettingClick}>
-            <>
-              <ButtonImage src={SettingIcon} />
-              <ButtonText>{t('CONFIRM_TRANSACTION.EDIT_FEES')}</ButtonText>
-            </>
-          </Button>
-          <TransactionSettingAlert
-            visible={showFeeSettings}
-            fee={new BigNumber(currentFee).toString()}
-            feePerVByte={feePerVByte}
-            type={ordinalTxUtxo ? 'Ordinals' : 'BTC'}
-            btcRecipients={recipients}
-            ordinalTxUtxo={ordinalTxUtxo}
-            onApplyClick={onApplyClick}
-            onCrossClick={closeTransactionSettingAlert}
-            nonOrdinalUtxos={nonOrdinalUtxos}
-            loading={loading || ordinalsLoading}
-            isRestoreFlow={isRestoreFundFlow}
-            showFeeSettings={showFeeSettings}
-            setShowFeeSettings={setShowFeeSettings}
+            title={t('CONFIRM_TRANSACTION.TOTAL')}
+            value={getAmountString(satsToBtc(total), t('BTC'))}
+            subValue={getBtcFiatEquivalent(total, BigNumber(btcFiatRate))}
+            subTitle={t('CONFIRM_TRANSACTION.AMOUNT_PLUS_FEES')}
           />
-        </Container>
-        <ErrorContainer>
-          <ErrorText>{error}</ErrorText>
-        </ErrorContainer>
+        )}
+        <Button onClick={onAdvancedSettingClick}>
+          <ButtonImage src={SettingIcon} />
+          <ButtonText>{t('CONFIRM_TRANSACTION.EDIT_FEES')}</ButtonText>
+        </Button>
+        <TransactionSettingAlert
+          visible={showFeeSettings}
+          fee={new BigNumber(currentFee).toString()}
+          feePerVByte={feePerVByte}
+          type={ordinalTxUtxo ? 'Ordinals' : 'BTC'}
+          btcRecipients={recipients}
+          ordinalTxUtxo={ordinalTxUtxo}
+          onApplyClick={onApplyClick}
+          onCrossClick={closeTransactionSettingAlert}
+          nonOrdinalUtxos={nonOrdinalUtxos}
+          loading={loading || ordinalsLoading}
+          isRestoreFlow={isRestoreFundFlow}
+          showFeeSettings={showFeeSettings}
+          setShowFeeSettings={setShowFeeSettings}
+        />
+        {!!error && (
+          <ErrorContainer>
+            <ErrorText>{error}</ErrorText>
+          </ErrorContainer>
+        )}
       </OuterContainer>
-      <ButtonContainer isBtcSendBrowserTx={isBtcSendBrowserTx}>
-        <TransparentButtonContainer>
-          <ActionButton
-            text={t('CONFIRM_TRANSACTION.CANCEL')}
-            transparent
-            onPress={onCancelClick}
-            disabled={
-              loadingBroadcastedTx ||
-              isLoading ||
-              isLoadingOrdData ||
-              isLoadingNonOrdinalBtcSend ||
-              ordinalsLoading
-            }
-          />
-        </TransparentButtonContainer>
+      <StickyHorizontalSplitButtonContainer>
+        <ActionButton
+          text={t('CONFIRM_TRANSACTION.CANCEL')}
+          transparent
+          onPress={onCancelClick}
+          disabled={
+            loadingBroadcastedTx ||
+            isLoading ||
+            isLoadingOrdData ||
+            isLoadingNonOrdinalBtcSend ||
+            ordinalsLoading
+          }
+        />
         <ActionButton
           text={t('CONFIRM_TRANSACTION.CONFIRM')}
           disabled={
@@ -511,7 +465,7 @@ function ConfirmBtcTransactionComponent({
           }
           onPress={handleOnConfirmClick}
         />
-      </ButtonContainer>
+      </StickyHorizontalSplitButtonContainer>
     </>
   );
 }

diff --git a/src/app/components/screenContainer/index.tsx b/src/app/components/screenContainer/index.tsx
@@ -1,19 +1,29 @@
 import useWalletSelector from '@hooks/useWalletSelector';
-import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet } from 'react-router-dom';
 import styled from 'styled-components';
+import { devices } from 'theme';
 
-const RouteContainer = styled.div((props) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100%',
-  width: 360,
-  margin: 'auto',
-  backgroundColor: props.theme.colors.elevation0,
-  border: '1px solid rgba(126, 137,171,0.2)',
-  boxShadow: '0px 8px 28px rgba(0, 0, 0, 0.35)',
-}));
+const RouteContainer = styled.div`
+  // any route should default to the chrome extension window size
+  display: flex;
+  flex-direction: column;
+  height: 600px;
+  width: 360px;
+  margin: auto;
+  background-color: ${(props) => props.theme.colors.elevation0};
+  border: 1px solid rgba(126, 137, 171, 0.2);
+  box-shadow: 0px 8px 28px rgba(0, 0, 0, 0.35);
+
+  // set some basic responsive properties here for when we load routes
+  // in either full screen tabs or popup windows
+  @media only screen and ${devices.min.xs} {
+    max-width: 588px;
+    min-height: 600px;
+    max-height: unset;
+    height: auto;
+  }
+`;
 
 const TestnetContainer = styled.div((props) => ({
   display: 'flex',
@@ -25,7 +35,7 @@ const TestnetContainer = styled.div((props) => ({
 }));
 
 const TestnetText = styled.h1((props) => ({
-  ...props.theme.body_xs,
+  ...props.theme.typography.body_s,
   textAlign: 'center',
   color: props.theme.colors.white_200,
 }));
@@ -34,16 +44,8 @@ function ScreenContainer(): JSX.Element {
   const { network } = useWalletSelector();
   const { t } = useTranslation('translation');
 
-  // We need to set the max height of the app container after the layout is rendered
-  // to prevent the app from being too tall on smaller screens
-  // If we set it directly in the css, it will lock the popup to a tiny height before it has a chance to render
-  useEffect(() => {
-    const container = document.getElementById('app');
-    container!.style.maxHeight = '100vh';
-  }, []);
-
   return (
-    <RouteContainer className="optionsContainer">
+    <RouteContainer>
       {network.type === 'Testnet' && (
         <TestnetContainer>
           <TestnetText>{t('SETTING_SCREEN.TESTNET')}</TestnetText>