fix: bag footer layout (#5003)

* fix: bag footer layout

* pr feedback

* remove balance from footer

src/nft/components/bag/Bag.tsx

@@ -123,11 +123,9 @@ const Bag = () => {
     return { totalEthPrice, totalUsdPrice }
   }, [itemsInBag, fetchedPriceData])
 
-  const { balance, sufficientBalance } = useMemo(() => {
+  const sufficientBalance = useMemo(() => {
-    const balance: BigNumber = parseEther(balanceInEth.toString())
+    const balance = parseEther(balanceInEth.toString())
-    const sufficientBalance = isConnected ? BigNumber.from(balance).gte(totalEthPrice) : true
+    return isConnected ? BigNumber.from(balance).gte(totalEthPrice) : true
-
-    return { balance, sufficientBalance }
   }, [balanceInEth, totalEthPrice, isConnected])
 
   const purchaseAssets = async (routingData: RouteResponse) => {
@@ -278,7 +276,6 @@ const Bag = () => {
                 <ScrollingIndicator show={userCanScroll && scrollProgress < 100} />
                 {hasAssetsToShow && !isProfilePage && (
                   <BagFooter
-                    balance={balance}
                     sufficientBalance={sufficientBalance}
                     isConnected={isConnected}
                     totalEthPrice={totalEthPrice}

src/nft/components/bag/BagFooter.tsx

@@ -1,18 +1,46 @@
 import { BigNumber } from '@ethersproject/bignumber'
+import { Trans } from '@lingui/macro'
 import Loader from 'components/Loader'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { bodySmall } from 'nft/css/common.css'
 import { BagStatus } from 'nft/types'
 import { ethNumberStandardFormatter, formatWeiToDecimal } from 'nft/utils'
+import { AlertTriangle } from 'react-feather'
 import { useModalIsOpen, useToggleWalletModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/reducer'
+import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
 import * as styles from './BagFooter.css'
 
+const Footer = styled.div<{ $showWarning: boolean }>`
+  border-top: 1px solid ${({ theme }) => theme.backgroundOutline};
+  color: ${({ theme }) => theme.textPrimary};
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+  border-top-left-radius: ${({ $showWarning }) => ($showWarning ? '0' : '12')}px;
+  border-top-right-radius: ${({ $showWarning }) => ($showWarning ? '0' : '12')}px;
+`
+
+const WarningIcon = styled(AlertTriangle)`
+  width: 14px;
+  margin-right: 4px;
+  color: ${({ theme }) => theme.accentWarning};
+`
+const WarningText = styled(ThemedText.BodyPrimary)`
+  align-items: center;
+  color: ${({ theme }) => theme.accentWarning};
+  display: flex;
+  justify-content: center;
+  margin: 12px 0 !important;
+  text-align: center;
+`
+
 interface BagFooterProps {
-  balance: BigNumber
   isConnected: boolean
   sufficientBalance: boolean
   totalEthPrice: BigNumber
@@ -30,7 +58,6 @@ const PENDING_BAG_STATUSES = [
 ]
 
 export const BagFooter = ({
-  balance,
   isConnected,
   sufficientBalance,
   totalEthPrice,
@@ -49,18 +76,7 @@ export const BagFooter = ({
 
   return (
     <Column className={styles.footerContainer}>
-      {showWarning && (
+      <Footer $showWarning={showWarning}>
-        <Row className={styles.warningContainer}>
-          {!sufficientBalance
-            ? `Insufficient funds (${formatWeiToDecimal(balance.toString())} ETH)`
-            : `Something went wrong. Please try again.`}
-        </Row>
-      )}
-      <Column
-        borderTopLeftRadius={showWarning ? '0' : '12'}
-        borderTopRightRadius={showWarning ? '0' : '12'}
-        className={styles.footer}
-      >
         <Column gap="4" paddingTop="8" paddingBottom="20">
           <Row justifyContent="space-between">
             <Box>
@@ -76,6 +92,16 @@ export const BagFooter = ({
             {`${ethNumberStandardFormatter(totalUsdPrice, true)}`}
           </Row>
         </Column>
+        {showWarning && (
+          <WarningText fontSize="14px" lineHeight="20px">
+            <WarningIcon />
+            {!sufficientBalance ? (
+              <Trans>Insufficient funds</Trans>
+            ) : (
+              <Trans>Something went wrong. Please try again.</Trans>
+            )}
+          </WarningText>
+        )}
         <Row
           as="button"
           color="explicitWhite"
@@ -98,7 +124,7 @@ export const BagFooter = ({
             ? 'Transaction pending'
             : 'Pay'}
         </Row>
-      </Column>
+      </Footer>
     </Column>
   )
 }