Replace account related Box elements

Author: kaja-osojnik

src/app/components/Account/AccountMetadataSourceIndicator.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react'
 import { AccountMetadataSource } from '../../data/named-accounts'
 import { exhaustedTypeWarning } from '../../../types/errors'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 
 const OasisNameIndicator: FC = () => {
   return (
@@ -53,10 +52,10 @@ export const AccountMetadataSourceIndicator: FC<AccountMetadataSourceIndicatorPr
 
   const renderWithOrWithoutLabel = (label: string, labelNeeded: boolean, icon: JSX.Element) =>
     labelNeeded ? (
-      <Box sx={{ display: 'inline-flex', gap: 2, alignItems: 'Center', fontWeight: 'normal' }}>
+      <div className="inline-flex items-center gap-1 font-normal">
         {icon}
         {label}
-      </Box>
+      </div>
     ) : (
       icon
     )

src/app/components/Account/ConsensusAccountDetailsView.tsx

@@ -6,7 +6,6 @@ import { useScreenSize } from '../../hooks/useScreensize'
 import { TextSkeleton } from '../Skeleton'
 import { StyledDescriptionList, StyledListTitleWithAvatar } from '../StyledDescriptionList'
 import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
-import Box from '@mui/material/Box'
 import { styled } from '@mui/material/styles'
 import { useFormattedTimestampStringWithDistance } from '../../hooks/useFormattedTimestamp'
 import { AccountAvatar } from '../AccountAvatar'
@@ -61,16 +60,16 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
         </>
       )}
       <StyledListTitleWithAvatar>
-        <Box gap={1} sx={{ display: 'flex', alignItems: 'center' }}>
+        <div className="flex items-center gap-1">
           <AccountAvatar account={account} />
           <AccountSizeBadge size={account.size} />
-        </Box>
+        </div>
       </StyledListTitleWithAvatar>
       <dd>
-        <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+        <div className="inline-flex items-center">
           <ConsensusAccountLink alwaysTrim={false} network={account.network} address={account.address} />
           <CopyToClipboard value={account.address} />
-        </Box>
+        </div>
       </dd>
       <dt>
         <strong>{t('account.totalBalance')}</strong>

src/app/components/Account/ContractCreatorInfo.tsx

@@ -8,7 +8,6 @@ import {
   useGetRuntimeTransactionsTxHash,
 } from '../../../oasis-nexus/api'
 import { AccountLink } from './AccountLink'
-import Box from '@mui/material/Box'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 
 const TxSender: FC<{ scope: RuntimeScope; txHash: string; alwaysTrim?: boolean }> = ({
@@ -45,7 +44,7 @@ export const ContractCreatorInfo: FC<{
   ) : (
     <>
       <TxSender scope={scope} txHash={creationTxHash} alwaysTrim={alwaysTrim} />
-      <Box alignSelf="end">&nbsp;{t('contract.createdAt')}&nbsp;</Box>
+      <div className="self-end">&nbsp;{t('contract.createdAt')}&nbsp;</div>
       <TransactionLink scope={scope} hash={creationTxHash} alwaysTrim={alwaysTrim} />
     </>
   )

src/app/components/Account/RuntimeAccountDetailsView.tsx

@@ -23,7 +23,6 @@ import { getFiatCurrencyForScope, showFiatValues } from '../../../config'
 import { CardEmptyState } from '../CardEmptyState'
 import { extractMinimalProxyERC1167 } from '../ContractVerificationIcon/extractMinimalProxyERC1167'
 import { AbiPlaygroundLink } from '../ContractVerificationIcon/AbiPlaygroundLink'
-import Box from '@mui/material/Box'
 import { transactionsContainerId } from '../../utils/tabAnchors'
 
 type RuntimeAccountDetailsViewProps = {
@@ -74,10 +73,10 @@ export const RuntimeAccountDetailsView: FC<RuntimeAccountDetailsViewProps> = ({
         <AccountAvatar account={account} />
       </StyledListTitleWithAvatar>
       <dd>
-        <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+        <div className="inline-flex items-center">
           <AccountLink showOnlyAddress={!!token?.name} scope={account} address={address!} />
           <CopyToClipboard value={address!} />
-        </Box>
+        </div>
       </dd>
 
       {token && (
@@ -110,10 +109,10 @@ export const RuntimeAccountDetailsView: FC<RuntimeAccountDetailsViewProps> = ({
         <>
           <dt>{t('contract.verification.proxyERC1167')}</dt>
           <dd>
-            <Box>
+            <div>
               <AccountLink scope={account} address={extractMinimalProxyERC1167(account)!} />
               <AbiPlaygroundLink scope={account} address_eth={account.address_eth!} />
-            </Box>
+            </div>
           </dd>
         </>
       )}

src/app/components/AccountList/index.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { RoundedBalance } from '../../components/RoundedBalance'
@@ -32,9 +31,9 @@ export const AccountList: FC<AccountListProps> = ({ isLoading, limit, pagination
     data: [
       {
         content: (
-          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <div className="flex justify-center">
             <AccountSizeBadge size={account.size} />
-          </Box>
+          </div>
         ),
         key: 'size',
       },

src/app/pages/RuntimeAccountDetailsPage/AccountNFTCollectionCard.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLoaderData, Link as RouterLink, To } from 'react-router-dom'
-import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Link from '@mui/material/Link'
@@ -145,13 +144,13 @@ const AccountNFTCollection: FC<AccountNFTCollectionProps> = ({
             })}
           </ImageList>
           {pagination && (
-            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+            <div className="flex justify-center">
               <TablePagination
                 {...pagination}
                 totalCount={totalCount}
                 isTotalCountClipped={isTotalCountClipped}
               />
-            </Box>
+            </div>
           )}
         </>
       )}