Improve send form

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 <TickerImage src={IconStacks} />;
-    }
-    if (currencyType === 'BTC') {
-      return <TickerImage src={IconBitcoin} />;
-    }
-    return null;
-  }
-
   function getTokenCurrency() {
     if (fungibleToken) {
       if (fungibleToken?.ticker) {
@@ -311,10 +312,7 @@ function SendForm({
         <InputFieldContainer>
           <InputField value={amount} placeholder="0" onChange={onInputChange} />
         </InputFieldContainer>
-        <TickerContainer>
-          <Text>{getTokenCurrency()}</Text>
-          {getTokenIcon()}
-        </TickerContainer>
+        <Text>{getTokenCurrency()}</Text>
       </AmountInputContainer>
       <SubText>{`~ $ ${fiatAmount} ${fiatCurrency}`}</SubText>
     </Container>
@@ -342,6 +340,12 @@ function SendForm({
           <AssociatedText>{associatedAddress}</AssociatedText>
         </>
       )}
+      {associatedBnsName && currencyType !== 'BTC' && (
+      <>
+        <SubText>{t('ASSOCIATED_BNS_DOMAIN')}</SubText>
+        <AssociatedText>{associatedBnsName}</AssociatedText>
+      </>
+      )}
     </Container>
   );
 
@@ -375,6 +379,15 @@ function SendForm({
   return (
     <>
       <ScrollContainer>
+        {currencyType !== 'NFT' && (
+        <TokenContainer>
+          <TokenImage
+            token={currencyType || undefined}
+            loading={false}
+            fungibleToken={fungibleToken || undefined}
+          />
+        </TokenContainer>
+        )}
         <OuterContainer>
           {!disableAmountInput && renderEnterAmountSection}
           <ErrorContainer>

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) {

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 (
-    <RowContainer>
-      <AnimatedBackButton onClick={onClick}>
-        <img src={ArrowLeft} alt="back button" />
-      </AnimatedBackButton>
       <TopSectionContainer>
+        <AnimatedBackButton onClick={onClick}>
+          <img src={ArrowLeft} alt="back button" />
+        </AnimatedBackButton>
         <HeaderText>{title}</HeaderText>
       </TopSectionContainer>
-    </RowContainer>
   );
 }
 

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",