Update Box element

.changelog/2258.trivial.md

@@ -0,0 +1 @@
+Update Box element.

src/app/components/Account/ContractCreatorInfo.tsx

@@ -44,7 +44,7 @@ export const ContractCreatorInfo: FC<{
   ) : (
     <>
       <TxSender scope={scope} txHash={creationTxHash} alwaysTrim={alwaysTrim} />
-      <div className="self-end">&nbsp;{t('contract.createdAt')}&nbsp;</div>
+      <div>&nbsp;{t('contract.createdAt')}&nbsp;</div>
       <TransactionLink scope={scope} hash={creationTxHash} alwaysTrim={alwaysTrim} />
     </>
   )

src/app/components/Link/index.tsx

@@ -4,7 +4,6 @@ import { useScreenSize } from '../../hooks/useScreensize'
 import { Link as UilLink } from '@oasisprotocol/ui-library/src/components/link'
 import { trimLongString } from '../../utils/trimLongString'
 import { HighlightedText } from '../HighlightedText'
-import Box from '@mui/material/Box'
 import { AccountMetadataSourceIndicator } from '../Account/AccountMetadataSourceIndicator'
 import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
 import { WithHoverHighlighting } from '../HoverHighlightingContext/WithHoverHighlighting'
@@ -41,25 +40,25 @@ export const Link: FC<LinkProps> = ({
     hasName && (withSourceIndicator || isTablet) ? (
       <div>
         {name && (
-          <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}>
-            <Box sx={{ fontWeight: 'bold' }}>{name}</Box>
+          <div className="inline-flex items-center gap-2">
+            <div className="font-bold">{name}</div>
             {withSourceIndicator && (
               <>
                 <span>-</span>
                 <AccountMetadataSourceIndicator source={'SelfProfessed'} withText />
               </>
             )}
-          </Box>
+          </div>
         )}
-        <Box sx={{ fontWeight: 'normal' }}>{address}</Box>
+        <div className="font-normal">{address}</div>
       </div>
     ) : isTablet ? (
       address
     ) : undefined
 
   return (
     <MaybeWithTooltip title={tooltipTitle}>
-      <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
+      <div className="inline-flex items-center gap-1">
         {hasName && withSourceIndicator && <AccountMetadataSourceIndicator source={'SelfProfessed'} />}
         <span className={cn('font-medium', !labelOnly && 'text-primary')}>
           {isTablet ? (
@@ -75,7 +74,7 @@ export const Link: FC<LinkProps> = ({
             />
           )}
         </span>
-      </Box>
+      </div>
     </MaybeWithTooltip>
   )
 }

src/app/components/PageLayout/index.tsx

@@ -1,74 +1,47 @@
 import { FC, PropsWithChildren, ReactNode } from 'react'
 import { Header } from './Header'
 import { Footer } from './Footer'
-import Box from '@mui/material/Box'
 import { useScreenSize } from '../../hooks/useScreensize'
-import { styled, useTheme } from '@mui/material/styles'
 import { BuildBanner } from '../BuildBanner'
 import { useScopeParam } from '../../hooks/useScopeParam'
 import { NetworkOfflineBanner, RuntimeOfflineBanner, ConsensusOfflineBanner } from '../OfflineBanner'
 import { Search } from '../Search'
 import { useIsApiReachable } from '../OfflineBanner/hook'
+import useTheme from '@mui/material/styles/useTheme'
 
 interface PageLayoutProps {
   mobileFooterAction?: ReactNode
 }
 
-export const StyledMain = styled('main')({
-  minHeight: '75vh',
-})
-
 export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, mobileFooterAction }) => {
-  const theme = useTheme()
   const { isMobile } = useScreenSize()
   const scope = useScopeParam()
   const isApiReachable = useIsApiReachable(scope?.network ?? 'mainnet').reachable
+  const theme = useTheme()
 
   return (
     <>
       <BuildBanner />
       <NetworkOfflineBanner />
       {scope && scope.layer !== 'consensus' && <RuntimeOfflineBanner />}
       {scope && scope.layer === 'consensus' && <ConsensusOfflineBanner />}
-      <Box
-        sx={{
-          minHeight: '100vh',
-        }}
-      >
+      <div className="min-h-screen">
         <Header />
-        <Box
-          sx={
-            isMobile
-              ? {
-                  border:
-                    theme.palette.background.default !== theme.palette.layout.border
-                      ? `solid 10px ${theme.palette.layout.border}`
-                      : 'none',
-                  borderTop: 0,
-                  px: 0,
-                  pt: 4,
-                }
-              : {
-                  border: `solid 15px ${theme.palette.layout.border}`,
-                  borderTop: 0,
-                  px: '4%',
-                  pt: 6,
-                }
-          }
+        <div
+          className="border-8 md:border-[15px] border-transparent px-0 md:px-[4%] pt-4 md:pt-6 border-t-0"
+          style={{
+            borderColor: theme.palette.layout.border,
+          }}
         >
           {!isMobile && (
-            <Box
-              sx={{
-                mb: 6,
-              }}
-            >
+            <div className="mb-6">
               <Search scope={scope} disabled={!isApiReachable} />
-            </Box>
+            </div>
           )}
-          <StyledMain>{children}</StyledMain>
+          <main className="min-h-[75vh]">{children}</main>
           <Footer scope={scope} mobileSearchAction={mobileFooterAction} />
-        </Box>
-      </Box>
+        </div>
+      </div>
     </>
   )
 }

src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

@@ -19,7 +19,6 @@ import { exhaustedTypeWarning } from '../../../types/errors'
 import { LongDataDisplay } from '../LongDataDisplay'
 import { parseEvmEvent } from '../../utils/parseEvmEvent'
 import { TokenTransferIcon } from '../Tokens/TokenTransferIcon'
-import Box from '@mui/material/Box'
 import StreamIcon from '@mui/icons-material/Stream'
 import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
@@ -158,9 +157,9 @@ export const EventTypeIcon: FC<{
   }
 
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+    <div className="flex items-center">
       <b>{eventTypeIcons[eventType]}</b>
-    </Box>
+    </div>
   )
 }
 
@@ -317,11 +316,11 @@ const RuntimeEventDetailsInner: FC<{
       }
       return (
         <div>
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <div className="flex items-center">
             <b>
               <TokenTransferIcon reverseLabel method={parsedEvmLogName} size={25} />
             </b>
-          </Box>
+          </div>
           <br />
           {event.evm_log_params && event.evm_log_params.length > 0 && (
             <Table className="border">

src/app/components/RuntimeEvents/RuntimeEventsDetailedList.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'
 import { CardEmptyState } from '../CardEmptyState'
 import { TextSkeleton } from '../Skeleton'
 import { RuntimeEventDetails } from './RuntimeEventDetails'
-import Box from '@mui/material/Box'
 import { AppErrors } from '../../../types/errors'
 import { EmptyState } from '../EmptyState'
 import { CardDivider } from '../../components/Divider'
@@ -56,9 +55,9 @@ export const RuntimeEventsDetailedList: FC<{
           </div>
         ))}
         {pagination && (
-          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <div className="flex justify-center">
             <TablePagination {...pagination} />
-          </Box>
+          </div>
         )}
       </>
     )

src/app/components/Select/index.tsx

@@ -1,7 +1,6 @@
 import { Select as SelectUnstyled, SelectProps, selectClasses, SelectRootSlotProps } from '@mui/base/Select'
 import { Option, optionClasses } from '@mui/base/Option'
 import { styled } from '@mui/material/styles'
-import Box from '@mui/material/Box'
 import React, {
   ForwardedRef,
   forwardRef,
@@ -226,7 +225,7 @@ const SelectCmp = <T extends SelectOptionBase>({
   const withLight = { light }
 
   return (
-    <Box className={className}>
+    <div className={className}>
       {label && <label htmlFor={selectId}>{label}</label>}
       <CustomSelect<T['value']>
         id={selectId}
@@ -246,7 +245,7 @@ const SelectCmp = <T extends SelectOptionBase>({
           <Option key={props.value.toString()} {...props} light={light} />
         ))}
       </CustomSelect>
-    </Box>
+    </div>
   )
 }
 

src/app/components/Table/index.tsx

@@ -1,6 +1,5 @@
 import { ComponentProps, FC, ReactNode } from 'react'
 import { styled } from '@mui/material/styles'
-import Box from '@mui/material/Box'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 import {
   Table as BaseTable,
@@ -164,9 +163,9 @@ export const Table: FC<TableProps> = ({
         </TableBody>
       </BaseTable>
       {pagination && (
-        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+        <div className="flex justify-center">
           <TablePagination {...pagination} />
-        </Box>
+        </div>
       )}
     </>
   )

src/app/components/TableCellAge/index.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react'
 import Tooltip from '@mui/material/Tooltip'
 import { formatDistanceToNow } from '../../utils/dateFormatter'
-import Box from '@mui/material/Box'
 import { useFormattedTimestamp } from '../../hooks/useFormattedTimestamp'
 import { tooltipDelay } from '../../../styles/theme'
 import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'
@@ -34,14 +33,14 @@ export const TableCellAge: FC<{ sinceTimestamp: string }> = ({ sinceTimestamp })
   const title = (
     <span>
       {defaultFormatted}
-      <Box fontWeight={100}>{distanceWithSuffix}</Box>
+      <div className="font-normal">{distanceWithSuffix}</div>
     </span>
   )
   const content = ageHeaderType === TableAgeType.DateTime ? tableFormatted : distance
 
   return (
     <Tooltip title={title} enterDelay={tooltipDelay} placement={'top'}>
-      <Box>{content}</Box>
+      <div>{content}</div>
     </Tooltip>
   )
 }

src/app/components/Tokens/TokenDetails.tsx

@@ -9,8 +9,6 @@ import { CopyToClipboard } from '../CopyToClipboard'
 import { AccountLink } from '../Account/AccountLink'
 import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
 import { VerificationIcon } from '../ContractVerificationIcon'
-import Box from '@mui/material/Box'
-import { COLORS } from '../../../styles/theme/colors'
 import { TokenTypeTag } from './TokenList'
 import { RoundedBalance } from '../RoundedBalance'
 import { HighlightedText } from '../HighlightedText'
@@ -44,9 +42,9 @@ export const TokenDetails: FC<{
           address={token.eth_contract_addr ?? token.contract_addr}
           name={token.name}
         />
-        <Box sx={{ ml: 3, fontWeight: 700, color: COLORS.grayMedium, whiteSpace: 'nowrap' }}>
+        <div className="ml-2 font-bold text-muted-foreground whitespace-nowrap">
           <HighlightedText text={token.symbol} />
-        </Box>
+        </div>
       </dd>
 
       <dt>{t('common.type')}</dt>
@@ -56,14 +54,14 @@ export const TokenDetails: FC<{
 
       <dt>{t(isMobile ? 'common.smartContract_short' : 'common.smartContract')}</dt>
       <dd>
-        <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+        <div className="inline-flex items-center">
           <AccountLink
             showOnlyAddress
             scope={token}
             address={token.eth_contract_addr ?? token.contract_addr}
           />
           <CopyToClipboard value={token.eth_contract_addr ?? token.contract_addr} />
-        </Box>
+        </div>
       </dd>
       <dt>{t('contract.verification.title')}</dt>
       <dd>

src/app/components/Tokens/TokenLinkWithIcon.tsx

@@ -3,8 +3,6 @@ import { FC } from 'react'
 import { SearchScope } from '../../../types/searchScope'
 import { TokenLink } from './TokenLink'
 import { useAccountMetadata } from '../../hooks/useAccountMetadata'
-import Box from '@mui/material/Box'
-import { COLORS } from '../../../styles/theme/colors'
 import { InitialsAvatar } from '../AccountAvatar/InitialsAvatar'
 import Tooltip from '@mui/material/Tooltip'
 import { Trans, useTranslation } from 'react-i18next'
@@ -18,7 +16,7 @@ export const TokenLinkWithIcon: FC<{
   const { t } = useTranslation()
   const { metadata } = useAccountMetadata(scope, address)
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+    <div className="flex items-center gap-2">
       <Tooltip
         placement="top"
         arrow
@@ -35,7 +33,7 @@ export const TokenLinkWithIcon: FC<{
           )
         }
       >
-        <Box sx={{ lineHeight: 0 }}>
+        <div className="leading-none">
           {metadata?.icon ? (
             <img src={metadata.icon} alt="" width={42} style={{ maxHeight: 32, margin: '-4px 0' }} />
           ) : (
@@ -45,7 +43,7 @@ export const TokenLinkWithIcon: FC<{
               style={{ maxHeight: 32, margin: '-4px 0' }}
             />
           )}
-        </Box>
+        </div>
       </Tooltip>
 
       <span
@@ -56,10 +54,8 @@ export const TokenLinkWithIcon: FC<{
         }
       >
         <TokenLink scope={scope} address={address} name={metadata?.name || name} />
-        <Box component="span" sx={{ color: COLORS.grayMedium }}>
-          {metadata?.origin && ` (${metadata.origin})`}
-        </Box>
+        <span className="text-muted-foreground">{metadata?.origin && ` (${metadata.origin})`}</span>
       </span>
-    </Box>
+    </div>
   )
 }

src/app/components/Tokens/TokenTransfers.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import { Table, TableCellAlign, TableColProps } from '../Table'
 import { EvmTokenType, RuntimeEvent } from '../../../oasis-nexus/api'
 import { TablePaginationProps } from '../Table/TablePagination'
@@ -138,23 +137,15 @@ export const TokenTransfers: FC<TokenTransfersProps> = ({
             isMinting || fromAddress === undefined ? (
               ''
             ) : (
-              <Box
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  position: 'relative',
-                  justifyContent: 'space-between',
-                  pr: 3,
-                }}
-              >
+              <div className="flex items-center justify-between relative pr-3">
                 <AccountLink
                   scope={transfer}
                   address={fromAddress}
                   alwaysTrim
                   labelOnly={!!ownAddress && fromAddress === ownAddress}
                 />
                 <TransferIcon />
-              </Box>
+              </div>
             ),
         },
         {