From 2f2d88b725f06f877a2fc02965fa26a7defc1e46 Mon Sep 17 00:00:00 2001 From: Tim Man Date: Mon, 4 Dec 2023 15:32:47 +0800 Subject: [PATCH 01/15] fix: move confirm btc route to render on responsive layout and some minor UI fixes on confirm btc screen --- .../confirmBtcTransactionComponent/index.tsx | 230 +++++++----------- src/app/layouts/sendLayout.tsx | 37 +-- src/app/routes/index.tsx | 16 +- .../screens/confirmBtcTransaction/index.tsx | 7 - .../confirmOrdinalTransaction/index.tsx | 1 - .../restoreFunds/restoreOrdinals/index.tsx | 2 +- src/app/screens/sendOrdinal/index.tsx | 14 +- src/app/ui-library/common.styled.ts | 24 ++ src/theme/index.ts | 3 +- 9 files changed, 144 insertions(+), 190 deletions(-) diff --git a/src/app/components/confirmBtcTransactionComponent/index.tsx b/src/app/components/confirmBtcTransactionComponent/index.tsx index 6cf5e32e4..14ea0cb1c 100644 --- 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` 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((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 ( <> - - {showFeeWarning && ( - - )} - - {children} - - {t('CONFIRM_TRANSACTION.REVIEW_TRANSACTION')} - - - {isPartOfBundle && ( - - - - )} - {holdsRareSats && ( - - - - )} - - {bundle && } - - {ordinalTxUtxo ? ( + {showFeeWarning && ( + + )} + {/* TODO tim: refactor this not to use children. it should be another prop */} + {children} + + {t('CONFIRM_TRANSACTION.REVIEW_TRANSACTION')} + + {isPartOfBundle && ( + + + + )} + {holdsRareSats && ( + + + + )} + {bundle && } + {ordinalTxUtxo ? ( + + ) : ( + recipients?.map((recipient, index) => ( - ) : ( - recipients?.map((recipient, index) => ( - - )) - )} - + )) + )} + + + {!ordinalTxUtxo && ( - - {!ordinalTxUtxo && ( - - )} - - - - - {error} - + )} + + + {!!error && ( + + {error} + + )} - - - - + + - + ); } diff --git a/src/app/layouts/sendLayout.tsx b/src/app/layouts/sendLayout.tsx index dc5ca3537..630eea0cf 100644 --- a/src/app/layouts/sendLayout.tsx +++ b/src/app/layouts/sendLayout.tsx @@ -8,23 +8,24 @@ import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; import { breakpoints, devices } from 'theme'; -interface ContainerProps { - isGallery?: boolean; -} - -const ScrollContainer = styled.div((props) => ({ - display: 'flex', - flex: 1, - flexDirection: 'column', - ...props.theme.scrollbar, -})); +const ScrollContainer = styled.div` + display: flex; + flex: 1; + flex-direction: column; + justify-content: space-between; + ${(props) => props.theme.scrollbar} +`; -const Container = styled.div` +const Container = styled.div` display: flex; flex-direction: column; margin: auto; - margin-top: ${(props) => props.theme.space.xxs}; - padding: 0 ${(props) => props.theme.space.s}; + margin-top: 0; + margin-bottom: ${(props) => props.theme.space.xxs}; + padding-top: 0; + padding-left: ${(props) => props.theme.space.xs}; + padding-right: ${(props) => props.theme.space.xs}; + padding-bottom: 0; width: 100%; height: 100%; max-width: ${breakpoints.xs}px; @@ -33,11 +34,13 @@ const Container = styled.div` @media only screen and ${devices.min.s} { flex: initial; max-width: 588px; + max-height: unset; + height: auto; border: 1px solid ${(props) => props.theme.colors.elevation3}; border-radius: ${(props) => props.theme.space.s}; padding-top: ${(props) => props.theme.space.l}; - padding-left: ${(props) => (props.isGallery ? props.theme.space.m : 0)}; - padding-right: ${(props) => (props.isGallery ? props.theme.space.m : 0)}; + padding-left: ${(props) => props.theme.space.m}; + padding-right: ${(props) => props.theme.space.m}; padding-bottom: ${(props) => props.theme.space.xxl}; margin-top: ${(props) => props.theme.space.xxxxl}; } @@ -57,7 +60,6 @@ const Button = styled.button` display: flex; background-color: transparent; margin-bottom: ${(props) => props.theme.space.l}; - margin-left: ${(props) => props.theme.space.s}; `; function SendLayout({ @@ -73,7 +75,6 @@ function SendLayout({ const { t } = useTranslation('translation', { keyPrefix: 'SEND' }); const isScreenLargerThanXs = document.documentElement.clientWidth > Number(breakpoints.xs); const year = new Date().getFullYear(); - const isGalleryOpen: boolean = document.documentElement.clientWidth > 360; return ( <> @@ -83,7 +84,7 @@ function SendLayout({ )} - + {isScreenLargerThanXs && !hideBackButton && onClickBack && (