Feat: NFT page redesign (safe-global#1479)

* Prototype: nfts table

OpenSea preview

Loading

Add send batch button

Selected items count

Rm OpenSea preview

Rm Send NFT

Rm NFTs loading in the send modal

Rm new props in EnhancedTable

Batch send

Infinite scroll + filter

Add icons

Selection send form

Layout

Icon margin

Refactor config

Add Atomic0 links

Add one-time tooltip

Mobile CSS

Make send form sticky; filter by address

Don't stretch previews

Adjust font

Replace loading spinner with skeletons

Hide tooltip if no links

Fix children, initial loader, and grid alignement

Add tx modal titles

Rm "Send NFT" from new tx modal; track Send

Restore NFT button, hide it on the NFTs page

* Sticky send form

* Rm scroll in nft review modal

* Don't show empty rows

Author: katspaugh

public/images/common/arrow-nw.svg

@@ -1,5 +1,6 @@
-import EnhancedTable from '@/components/common/EnhancedTable'
 import { useMemo, useState } from 'react'
+import { Box } from '@mui/material'
+import EnhancedTable from '@/components/common/EnhancedTable'
 import type { AddressEntry } from '@/components/address-book/EntryDialog'
 import EntryDialog from '@/components/address-book/EntryDialog'
 import ExportDialog from '@/components/address-book/ExportDialog'
@@ -11,7 +12,6 @@ import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
 import RemoveDialog from '@/components/address-book/RemoveDialog'
 import useIsGranted from '@/hooks/useIsGranted'
-import NewTxModal from '@/components/tx/modals/NewTxModal'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import AddressBookHeader from '../AddressBookHeader'
 import useAddressBook from '@/hooks/useAddressBook'
@@ -21,9 +21,9 @@ import SvgIcon from '@mui/material/SvgIcon'
 import PagePlaceholder from '@/components/common/PagePlaceholder'
 import NoEntriesIcon from '@/public/images/address-book/no-entries.svg'
 import { useCurrentChain } from '@/hooks/useChains'
-
 import tableCss from '@/components/common/EnhancedTable/styles.module.css'
-import { Box } from '@mui/material'
+import TokenTransferModal from '@/components/tx/modals/TokenTransferModal'
+import { SendAssetsField } from '@/components/tx/modals/TokenTransferModal/SendAssetsForm'
 
 const headCells = [
   { id: 'name', label: 'Name' },
@@ -160,7 +160,12 @@ const AddressBookTable = () => {
       {open[ModalType.REMOVE] && <RemoveDialog handleClose={handleClose} address={defaultValues?.address || ''} />}
 
       {/* Send funds modal */}
-      {selectedAddress && <NewTxModal onClose={() => setSelectedAddress(undefined)} recipient={selectedAddress} />}
+      {selectedAddress && (
+        <TokenTransferModal
+          onClose={() => setSelectedAddress(undefined)}
+          initialData={[{ [SendAssetsField.recipient]: selectedAddress }]}
+        />
+      )}
     </>
   )
 }

public/images/common/nft-atomic0.svg

@@ -25,7 +25,7 @@ const TokenMenu = ({
     <Box className={css.stickyBox}>
       <Box className={css.hideTokensHeader}>
         <VisibilityOffOutlined />
-        <Typography>
+        <Typography variant="body2" lineHeight="inherit">
           {selectedAssetCount} {selectedAssetCount === 1 ? 'token' : 'tokens'} selected
         </Typography>
       </Box>

public/images/common/nft-blur.svg

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react'
 import { OpenInNewRounded } from '@mui/icons-material'
 import { Box, Link, type LinkProps } from '@mui/material'
 
@@ -9,7 +10,9 @@ const ExternalLink = ({
   noIcon = false,
   children,
   ...props
-}: Omit<LinkProps, 'target' | 'rel'> & { noIcon?: boolean }) => {
+}: Omit<LinkProps, 'target' | 'rel'> & { noIcon?: boolean }): ReactElement => {
+  if (!props.href) return <>{children}</>
+
   return (
     <Link rel="noreferrer noopener" target="_blank" {...props}>
       <Box display="inline-flex" alignItems="center" gap={0.2} component="span">

public/images/common/nft-etherscan.svg

@@ -1,12 +1,16 @@
+import type { ReactElement } from 'react'
 import { useState } from 'react'
 
 type ImageFallbackProps = React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> & {
   fallbackSrc: string
+  fallbackComponent?: ReactElement
 }
 
-const ImageFallback = ({ src, fallbackSrc, ...props }: ImageFallbackProps): React.ReactElement => {
+const ImageFallback = ({ src, fallbackSrc, fallbackComponent, ...props }: ImageFallbackProps): React.ReactElement => {
   const [isError, setIsError] = useState<boolean>(false)
 
+  if (isError && fallbackComponent) return fallbackComponent
+
   return <img {...props} alt={props.alt} src={isError ? fallbackSrc : src} onError={() => setIsError(true)} />
 }
 

public/images/common/nft-gnosisscan.svg

@@ -1,7 +1,8 @@
+import type { ReactElement } from 'react'
 import useLocalStorage from '@/services/local-storage/useLocalStorage'
+import type { TooltipProps } from '@mui/material'
 import { Box, Button, SvgIcon, Tooltip } from '@mui/material'
 import InfoIcon from '@/public/images/notifications/info.svg'
-import React from 'react'
 import { useDarkMode } from '@/hooks/useDarkMode'
 
 /**
@@ -14,13 +15,15 @@ export const OnboardingTooltip = ({
   text,
   initiallyShown = true,
   className,
+  placement,
 }: {
-  children: React.ReactElement
+  children: ReactElement // NB: this has to be an actual HTML element, otherwise the Tooltip will not work
   widgetLocalStorageId: string
   text: string
   initiallyShown?: boolean
   className?: string
-}): React.ReactElement => {
+  placement?: TooltipProps['placement']
+}): ReactElement => {
   const [widgetHidden = !initiallyShown, setWidgetHidden] = useLocalStorage<boolean>(widgetLocalStorageId)
   const isDarkMode = useDarkMode()
 
@@ -32,6 +35,7 @@ export const OnboardingTooltip = ({
         className,
       }}
       open
+      placement={placement}
       arrow
       title={
         <Box display="flex" alignItems="center" gap={1} padding={1}>