Refactor byte size formatting across components to use formatBytes utility for improved consistency and readability. Update related components to reflect MiB instead of MB for accurate representation of file sizes. (#514)

clostao · web-flow · commit fbd88561f936 · 2025-10-15T14:19:17.000+02:00
diff --git a/apps/frontend/src/components/molecules/FileCard.tsx b/apps/frontend/src/components/molecules/FileCard.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import bytes from 'bytes';
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
 import {
   Download,
@@ -18,6 +17,7 @@ import { shortenString } from 'utils/misc';
 import { useNetwork } from 'contexts/network';
 import { ROUTES } from '@auto-drive/ui';
 import { OffchainMetadata } from '@autonomys/auto-drive';
+import { formatBytes } from '../../utils/number';
 
 interface FileCardProps {
   icon?: React.ReactNode;
@@ -100,7 +100,7 @@ export const FileCard = ({
         <h2 className='dark:text-darkBlack mb-2 text-lg font-semibold text-gray-800'>
           {name ? shortenString(name, 20) : shortenString(cid, 20)}
         </h2>
-        <p className='mb-4 text-gray-500'>Size: {bytes(Number(size))}</p>
+        <p className='mb-4 text-gray-500'>Size: {formatBytes(Number(size))}</p>
         <button
           onClick={handleDownloadClick}
           className='flex w-full items-center justify-center rounded-lg bg-blue-500 px-4 py-2 font-semibold text-white hover:bg-blue-600'
diff --git a/apps/frontend/src/components/organisms/FileTable/FileTableRow.tsx b/apps/frontend/src/components/organisms/FileTable/FileTableRow.tsx
@@ -23,7 +23,6 @@ import { Triangle } from '@/components/atoms/Triangle';
 import { shortenString } from 'utils/misc';
 import { ConditionalRender } from '@/components/atoms/ConditionalRender';
 import { FileActionButtons } from '@/components/organisms/FileTable';
-import bytes from 'bytes';
 import { Button, NetworkId } from '@auto-drive/ui';
 import { File, Folder, MoreVertical } from 'lucide-react';
 import { OwnerBadge } from './OwnerBadge';
@@ -39,6 +38,7 @@ import { CopiableText } from '@/components/atoms/CopiableText';
 import toast from 'react-hot-toast';
 import { useUserAsyncDownloadsStore } from '../UserAsyncDownloads/state';
 import { useFileInCache } from '@/hooks/useFileInCache';
+import { formatBytes } from '../../../utils/number';
 
 export const FileTableRow = ({
   file,
@@ -215,7 +215,7 @@ export const FileTableRow = ({
     <Fragment key={file.headCid}>
       <TableBodyRow
         className={cn(
-          'hover:bg-background-hover hover:text-background-hover-foreground bg-background text-foreground',
+          'bg-background text-foreground hover:bg-background-hover hover:text-background-hover-foreground',
           isSelected && 'bg-blue-50 dark:bg-blue-900/20',
           isFolder && 'cursor-pointer',
         )}
@@ -279,7 +279,7 @@ export const FileTableRow = ({
         <TableBodyCell>
           <Badge label={file.status} status={file.status} />
         </TableBodyCell>
-        <TableBodyCell>{bytes(Number(file.size))}</TableBodyCell>
+        <TableBodyCell>{formatBytes(Number(file.size))}</TableBodyCell>
         <TableBodyCell>
           <div className='group relative'>
             <span className='flex cursor-default items-center'>
@@ -430,7 +430,7 @@ export const FileTableRow = ({
             <TableBodyRow
               key={child.cid}
               className={cn(
-                'hover:bg-background-hover hover:text-background-hover-foreground bg-background text-foreground',
+                'bg-background text-foreground hover:bg-background-hover hover:text-background-hover-foreground',
                 isChildSelected && 'bg-blue-50 dark:bg-blue-900/20',
                 isChildFolder && 'cursor-pointer',
               )}
@@ -472,7 +472,9 @@ export const FileTableRow = ({
               <TableBodyCell>
                 <OwnerBadge />
               </TableBodyCell>
-              <TableBodyCell>{bytes(Number(child.totalSize))}</TableBodyCell>
+              <TableBodyCell>
+                {formatBytes(Number(child.totalSize))}
+              </TableBodyCell>
               <TableBodyCell>
                 {child.type === 'file' ? 'File' : 'Folder'}
               </TableBodyCell>
diff --git a/apps/frontend/src/components/organisms/ObjectDetails/ObjectUploadDetails.tsx b/apps/frontend/src/components/organisms/ObjectDetails/ObjectUploadDetails.tsx
@@ -5,9 +5,8 @@ import {
   InformationCircleIcon,
 } from '@heroicons/react/24/outline';
 import { getTypeFromMetadata } from '../../../utils/file';
-import { formatNumberWithCommas } from '../../../utils/number';
+import { formatBytes, formatNumberWithCommas } from '../../../utils/number';
 import { EXTERNAL_ROUTES } from '@auto-drive/ui';
-import bytes from 'bytes';
 
 export const ObjectUploadDetails = ({
   object,
@@ -16,7 +15,6 @@ export const ObjectUploadDetails = ({
   object: ObjectInformation;
   isOwner: boolean;
 }) => {
-
   return (
     <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
       <div className='dark:bg-darkWhite rounded-lg border border-gray-200 p-6 dark:border-gray-200'>
@@ -51,7 +49,7 @@ export const ObjectUploadDetails = ({
               Size:
             </span>
             <span className='text-sm font-medium'>
-              {bytes(Number(object.metadata.totalSize))}
+              {formatBytes(Number(object.metadata.totalSize))}
             </span>
           </div>
           <div className='flex justify-between'>
diff --git a/apps/frontend/src/components/organisms/UserTable/CreditsUpdateModal.tsx b/apps/frontend/src/components/organisms/UserTable/CreditsUpdateModal.tsx
@@ -83,7 +83,7 @@ export const CreditsUpdateModal = ({
           leaveFrom='opacity-100'
           leaveTo='opacity-0'
         >
-          <div className='bg-background-hover fixed inset-0' />
+          <div className='fixed inset-0 bg-background-hover' />
         </TransitionChild>
 
         <div className='fixed inset-0 overflow-y-auto'>
@@ -128,41 +128,41 @@ export const CreditsUpdateModal = ({
                     <div className='flex items-center space-x-2'>
                       <input
                         type='text'
-                        className='border-background-hover bg-background-hover text-foreground-hover w-full rounded border px-2 py-1'
+                        className='text-foreground-hover w-full rounded border border-background-hover bg-background-hover px-2 py-1'
                         placeholder='Download credits'
                         value={downloadCredits}
                         onChange={(e) => setDownloadCredits(e.target.value)}
                       />
                       <select
-                        className='border-background-hover bg-background-hover text-foreground-hover rounded border px-2 py-1'
+                        className='text-foreground-hover rounded border border-background-hover bg-background-hover px-2 py-1'
                         value={downloadCreditsUnit}
                         onChange={(e) =>
                           setDownloadCreditsUnit(Number(e.target.value))
                         }
                       >
-                        <option value={1024 ** 2}>MB</option>
-                        <option value={1024 ** 3}>GB</option>
-                        <option value={1024 ** 4}>TB</option>
+                        <option value={1024 ** 2}>MiB</option>
+                        <option value={1024 ** 3}>GiB</option>
+                        <option value={1024 ** 4}>TiB</option>
                       </select>
                     </div>
                     <div className='flex items-center space-x-2'>
                       <input
                         type='text'
-                        className='border-background-hover bg-background-hover text-foreground-hover w-full rounded border px-2 py-1'
+                        className='text-foreground-hover w-full rounded border border-background-hover bg-background-hover px-2 py-1'
                         placeholder='Upload credits'
                         value={uploadCredits}
                         onChange={(e) => setUploadCredits(e.target.value)}
                       />
                       <select
-                        className='border-background-hover bg-background-hover text-foreground-hover rounded border px-2 py-1'
+                        className='text-foreground-hover rounded border border-background-hover bg-background-hover px-2 py-1'
                         value={uploadCreditsUnit}
                         onChange={(e) =>
                           setUploadCreditsUnit(Number(e.target.value))
                         }
                       >
-                        <option value={1024 ** 2}>MB</option>
-                        <option value={1024 ** 3}>GB</option>
-                        <option value={1024 ** 4}>TB</option>
+                        <option value={1024 ** 2}>MiB</option>
+                        <option value={1024 ** 3}>GiB</option>
+                        <option value={1024 ** 4}>TiB</option>
                       </select>
                     </div>
                     <div className='flex justify-end'>
diff --git a/apps/frontend/src/components/views/PurchaseCredits/CreditCurrentPrice.tsx b/apps/frontend/src/components/views/PurchaseCredits/CreditCurrentPrice.tsx
@@ -1,6 +1,6 @@
 import { usePrices } from '../../../hooks/usePrices';
 
-const MB = 10 ** 6;
+const MiB = 1024 ** 2;
 
 export const CreditCurrentPrice = () => {
   const { shannonsPerByte, formatCreditsAsAi3 } = usePrices();
@@ -12,7 +12,7 @@ export const CreditCurrentPrice = () => {
           <div className='text-sm opacity-90'>Current Price</div>
           <div className='text-3xl font-bold'>
             {typeof shannonsPerByte === 'number'
-              ? `${formatCreditsAsAi3(MB).toFixed(2)} AI3 per MiB`
+              ? `${formatCreditsAsAi3(MiB).toFixed(2)} AI3 per MiB`
               : '—'}
           </div>
         </div>
diff --git a/apps/frontend/src/components/views/PurchaseCredits/steps/Step2_ConfirmPurchase.tsx b/apps/frontend/src/components/views/PurchaseCredits/steps/Step2_ConfirmPurchase.tsx
@@ -105,7 +105,7 @@ export const PurchaseStep2ConnectWallet = ({
                   </div>
                 </div>
                 <div className='text-right'>
-                  <div className='text-xl font-bold'>{sizeMB}MB</div>
+                  <div className='text-xl font-bold'>{sizeMB}MiB</div>
                   <div className='text-xs text-muted-foreground'>Storage</div>
                 </div>
               </div>
@@ -123,7 +123,7 @@ export const PurchaseStep2ConnectWallet = ({
                       onChange={(e) => onChangeMb(e.target.value)}
                     />
                   ) : (
-                    <span>{sizeMB}MB</span>
+                    <span>{sizeMB}MiB</span>
                   )
                 }
               />
@@ -181,7 +181,7 @@ export const PurchaseStep2ConnectWallet = ({
               />
               <InfoRow
                 label='After Purchase'
-                value={<span className='font-semibold'>{sizeMB}MB</span>}
+                value={<span className='font-semibold'>{sizeMB}MiB</span>}
                 className='rounded-md bg-primary/20 p-4'
                 accent
               />
diff --git a/apps/frontend/src/components/views/PurchaseCredits/steps/Step4_Success.tsx b/apps/frontend/src/components/views/PurchaseCredits/steps/Step4_Success.tsx
@@ -26,7 +26,7 @@ export const PurchaseStep4Success = ({
                 <InfoRow
                   className='items-center font-bold'
                   label='Storage Added'
-                  value={<span>{sizeMB}MB</span>}
+                  value={<span>{sizeMB}MiB</span>}
                 />
                 <InfoRow
                   label='AI3 Paid'
@@ -63,7 +63,7 @@ export const PurchaseStep4Success = ({
                   label='Credits Added'
                   value={
                     <span className='font-bold text-primary'>
-                      {Number(context.sizeMB)} MB
+                      {Number(context.sizeMB)} MiB
                     </span>
                   }
                 />
diff --git a/apps/frontend/src/services/download.ts b/apps/frontend/src/services/download.ts
@@ -79,8 +79,8 @@ export const createDownloadService = (api: Api) => {
     }
   };
 
-  const MB = 1024 * 1024;
-  const MAX_CACHEABLE_FILE_SIZE = 150 * MB;
+  const MiB = 1024 * 1024;
+  const MAX_CACHEABLE_FILE_SIZE = 150 * MiB;
 
   const getObjectStoreName = () => {
     const objectStoreVersion =

Original file line number	Diff line number	Diff line change
`@@ -79,8 +79,8 @@ export const createDownloadService = (api: Api) => {`
`79`	`79`	`}`
`80`	`80`	`};`
`81`	`81`
`82`		`- const MB = 1024 * 1024;`
`83`		`- const MAX_CACHEABLE_FILE_SIZE = 150 * MB;`
	`82`	`+ const MiB = 1024 * 1024;`
	`83`	`+ const MAX_CACHEABLE_FILE_SIZE = 150 * MiB;`
`84`	`84`
`85`	`85`	`const getObjectStoreName = () => {`
`86`	`86`	`const objectStoreVersion =`