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 (
-
-
-
-
+
+
+
{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",