diff --git a/src/app/components/sendForm/index.tsx b/src/app/components/sendForm/index.tsx index ca95a67d5..2bc4bd8fe 100644 --- a/src/app/components/sendForm/index.tsx +++ b/src/app/components/sendForm/index.tsx @@ -13,9 +13,11 @@ import { useSelector } from 'react-redux'; import Info from '@assets/img/info.svg'; import ActionButton from '@components/button'; import { useNavigate } from 'react-router-dom'; -import { useBNSResolver, useDebounce } from '@hooks/useBnsName'; +import { useBnsName, useBNSResolver, useDebounce } from '@hooks/useBnsName'; import { getFiatEquivalent } from '@secretkeylabs/xverse-core/transactions'; import InfoContainer from '@components/infoContainer'; +import useNetworkSelector from '@hooks/useNetwork'; +import TokenImage from '@components/tokenImage'; interface ContainerProps { error: boolean; @@ -195,6 +197,13 @@ const ColumnContainer = styled.div((props) => ({ flexDirection: 'column', marginLeft: props.theme.spacing(8), })); + +const TokenContainer = styled.div((props) => ({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + marginTop: props.theme.spacing(8), +})); interface Props { onPressSend: (recipientID: string, amount: string, memo?: string) => void; currencyType: CurrencyTypes; @@ -243,7 +252,9 @@ function SendForm({ } = useSelector( (state: StoreState) => state.walletState, ); + const network = useNetworkSelector(); const debouncedSearchTerm = useDebounce(recipientAddress, 300); + const associatedBnsName = useBnsName(recipientAddress, network); const associatedAddress = useBNSResolver( debouncedSearchTerm, stxAddress, @@ -260,16 +271,6 @@ function SendForm({ } }, [recepientError, associatedAddress]); - function getTokenIcon() { - if (currencyType === 'STX') { - return ; - } - if (currencyType === 'BTC') { - return ; - } - return null; - } - function getTokenCurrency() { if (fungibleToken) { if (fungibleToken?.ticker) { @@ -311,10 +312,7 @@ function SendForm({ - - {getTokenCurrency()} - {getTokenIcon()} - + {getTokenCurrency()} {`~ $ ${fiatAmount} ${fiatCurrency}`} @@ -342,6 +340,12 @@ function SendForm({ {associatedAddress} )} + {associatedBnsName && currencyType !== 'BTC' && ( + <> + {t('ASSOCIATED_BNS_DOMAIN')} + {associatedBnsName} + + )} ); @@ -375,6 +379,15 @@ function SendForm({ return ( <> + {currencyType !== 'NFT' && ( + + + + )} {!disableAmountInput && renderEnterAmountSection} diff --git a/src/app/components/tokenImage/index.tsx b/src/app/components/tokenImage/index.tsx index 42acaefee..1e6724d0a 100644 --- a/src/app/components/tokenImage/index.tsx +++ b/src/app/components/tokenImage/index.tsx @@ -27,8 +27,8 @@ const TickerIconContainer = styled.div((props) => ({ display: 'flex', alignItems: 'center', justifyContent: 'center', - height: 32, - width: 32, + height: 44, + width: 44, marginRight: props.theme.spacing(3), borderRadius: props.theme.radius(2), backgroundColor: props.color, @@ -39,7 +39,7 @@ const TickerIconText = styled.h1((props) => ({ color: props.theme.colors.white['0'], textAlign: 'center', wordBreak: 'break-all', - fontSize: 10, + fontSize: 13, })); export default function TokenImage(props: TokenImageProps) { diff --git a/src/app/components/topRow/index.tsx b/src/app/components/topRow/index.tsx index 52e7aa92d..0a3f10726 100644 --- a/src/app/components/topRow/index.tsx +++ b/src/app/components/topRow/index.tsx @@ -1,12 +1,15 @@ import styled from 'styled-components'; import ArrowLeft from '@assets/img/dashboard/arrow_left.svg'; -const TopSectionContainer = styled.div({ +const TopSectionContainer = styled.h1((props) => ({ display: 'flex', - flex: 1, + marginTop: props.theme.spacing(11), + marginLeft: props.theme.spacing(8), flexDirection: 'row', justifyContent: 'center', -}); + alignItems: 'center', + position: 'relative', +})); const HeaderText = styled.h1((props) => ({ ...props.theme.body_bold_m, @@ -18,6 +21,8 @@ const BackButton = styled.button({ justifyContent: 'flex-start', backgroundColor: 'transparent', padding: 5, + position: 'absolute', + left: 0, }); const AnimatedBackButton = styled(BackButton)` @@ -31,15 +36,6 @@ const AnimatedBackButton = styled(BackButton)` } `; -const RowContainer = styled.div((props) => ({ - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - paddingTop: props.theme.spacing(11), - alignItems: 'center', - paddingLeft: '5%', - paddingRight: '5%', -})); interface Props { title: string; @@ -48,14 +44,12 @@ interface Props { function TopRow({ title, onClick }: Props) { return ( - - - back button - + + back button + {title} - ); } diff --git a/src/locales/en.json b/src/locales/en.json index dcbe03d4a..17a21f1c7 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -71,7 +71,8 @@ "INSUFFICIENT_BALANCE_FEES": "Insufficient balance when including transaction fees", "NFT_SEND_DETAIL": "This Nft is already sent and is in pending state" }, - "SEND_NFT": "Send NFT" + "SEND_NFT": "Send NFT", + "ASSOCIATED_BNS_DOMAIN": "Associated BNS Name" }, "CONFIRM_TRANSACTION": { "SEND": "Send",