fmt

src/components/@atoms/Calendar/Calendar.test.tsx

@@ -3,11 +3,11 @@ import { fireEvent, mockFunction, render, screen } from '@app/test-utils'
 import { InputHTMLAttributes, useState } from 'react'
 import { describe, expect, it, vi } from 'vitest'
 
+import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { secondsToDate, secondsToDateInput } from '@app/utils/date'
 import { formatExpiry } from '@app/utils/utils'
 
 import { Calendar } from './Calendar'
-import { useBreakpoint } from '@app/utils/BreakpointProvider'
 
 vi.mock('@app/utils/BreakpointProvider')
 
@@ -44,27 +44,26 @@ describe('Calendar', () => {
   it('should handle timezone offset correctly', async () => {
     const OnChange = vi.fn()
     // Render the Calendar component
-    const currentDate = new Date();
-    const currentDateSeconds = Math.floor(currentDate.getTime() / 1000);
-    render(<Calendar value={currentDateSeconds} onChange={OnChange}/>);
+    const currentDate = new Date()
+    const currentDateSeconds = Math.floor(currentDate.getTime() / 1000)
+    render(<Calendar value={currentDateSeconds} onChange={OnChange} />)
 
     // Find the input element
-    const calendarInput = screen.getByTestId('calendar');
+    const calendarInput = screen.getByTestId('calendar')
 
     // Prepare new date and format it
-    currentDate.setDate(currentDate.getDate() + 2); // Change to the next day
-    const newDateSeconds = Math.floor(currentDate.getTime() / 1000);
-    const newFormattedDate = secondsToDateInput(newDateSeconds);
+    currentDate.setDate(currentDate.getDate() + 2) // Change to the next day
+    const newDateSeconds = Math.floor(currentDate.getTime() / 1000)
+    const newFormattedDate = secondsToDateInput(newDateSeconds)
 
-    fireEvent.change(calendarInput, { target: { value: newFormattedDate }})
+    fireEvent.change(calendarInput, { target: { value: newFormattedDate } })
 
     // Assert the onChange handler was called
-    expect(OnChange).toHaveBeenCalledTimes(1);
+    expect(OnChange).toHaveBeenCalledTimes(1)
 
-    const receivedDate = OnChange.mock.calls[0][0].currentTarget.valueAsDate;
+    const receivedDate = OnChange.mock.calls[0][0].currentTarget.valueAsDate
     const receivedFormattedDate = receivedDate.toISOString().split('T')[0]
-
-    expect(receivedFormattedDate).toEqual(newFormattedDate);
 
-  });
+    expect(receivedFormattedDate).toEqual(newFormattedDate)
+  })
 })

src/components/@atoms/InnerDialog.tsx

@@ -10,7 +10,7 @@ export const InnerDialog = styled.div(
     gap: ${theme.space['4']};
     max-height: 60vh;
     max-width: 100vw;
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       width: calc(80vw - 2 * ${theme.space['6']});
       max-width: ${theme.space['128']};
     }

src/components/@atoms/PseudoActionButton/PseudoActionButton.test.tsx

@@ -14,7 +14,7 @@ afterAll(() => {
 
 describe('PseudoActionButton', () => {
   it('should show loading state when clicked and reset after timeout has been run', async () => {
-    const testIcon =() => <div data-testid="icon" />
+    const testIcon = () => <div data-testid="icon" />
     render(
       <PseudoActionButton prefix={testIcon} timeout={500}>
         Test
@@ -35,7 +35,7 @@ describe('PseudoActionButton', () => {
   })
 
   it('should maintain loading state if loading is set to true', async () => {
-    const testIcon = ()=> <div data-testid="icon" />
+    const testIcon = () => <div data-testid="icon" />
     render(
       <PseudoActionButton loading prefix={testIcon} timeout={500}>
         Test

src/components/@molecules/ConfirmationDialogView/ConfirmationDialogView.test.tsx

@@ -2,8 +2,8 @@ import { render, screen, userEvent } from '@app/test-utils'
 
 import { describe, expect, it, vi } from 'vitest'
 
-import { ConfirmationDialogView } from './ConfirmationDialogView'
 import { makeMockIntersectionObserver } from '../../../../test/mock/makeMockIntersectionObserver'
+import { ConfirmationDialogView } from './ConfirmationDialogView'
 
 const mockOnConfirm = vi.fn()
 const mockOnDecline = vi.fn()

src/components/@molecules/DateSelection/DateSelection.test.tsx

@@ -3,11 +3,11 @@ import { act, mockFunction, render, renderHook, screen, userEvent, waitFor } fro
 import { useState } from 'react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
+import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { secondsFromDateDiff } from '@app/utils/date'
 import { ONE_DAY, ONE_YEAR } from '@app/utils/time'
 
 import { DateSelection } from './DateSelection'
-import { useBreakpoint } from '@app/utils/BreakpointProvider'
 
 vi.mock('@app/utils/BreakpointProvider')
 

src/components/@molecules/ProfileEditor/Avatar/AvatarUpload.test.tsx

@@ -5,8 +5,8 @@ import { useAccount, useSignTypedData } from 'wagmi'
 
 import { useChainName } from '@app/hooks/chain/useChainName'
 
-import { AvatarUpload } from './AvatarUpload'
 import { makeMockIntersectionObserver } from '../../../../../test/mock/makeMockIntersectionObserver'
+import { AvatarUpload } from './AvatarUpload'
 
 vi.mock('wagmi')
 

src/components/@molecules/TransactionDialogManager/InputComponentWrapper.test.tsx

@@ -1,13 +1,12 @@
 import { act, render, screen, waitFor } from '@app/test-utils'
 
 import { QueryClientProvider } from '@tanstack/react-query'
-import { useQuery } from '@app/utils/query/useQuery'
-
 import { ReactNode, useContext, useEffect } from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { WagmiProvider } from 'wagmi'
 
 import { queryClientWithRefetch as queryClient } from '@app/utils/query/reactQuery'
+import { useQuery } from '@app/utils/query/useQuery'
 import { wagmiConfig } from '@app/utils/query/wagmi'
 
 import DynamicLoadingContext from './DynamicLoadingContext'

src/components/@molecules/TransactionDialogManager/stage/TransactionStageModal.test.tsx

@@ -16,10 +16,10 @@ import { useIsSafeApp } from '@app/hooks/useIsSafeApp'
 import { GenericTransaction } from '@app/transaction-flow/types'
 import { checkIsSafeApp } from '@app/utils/safe'
 
+import { makeMockIntersectionObserver } from '../../../../../test/mock/makeMockIntersectionObserver'
 import { useMockedUseQueryOptions } from '../../../../../test/mock/useMockedUseQueryOptions'
 import { calculateGasLimit, transactionSuccessHandler } from './query'
 import { handleBackToInput, TransactionStageModal } from './TransactionStageModal'
-import { makeMockIntersectionObserver } from '../../../../../test/mock/makeMockIntersectionObserver'
 
 vi.mock('@app/hooks/account/useAccountSafely')
 vi.mock('@app/hooks/chain/useChainName')
@@ -308,7 +308,7 @@ describe('TransactionStageModal', () => {
         )
         expect(mockDispatch).toBeCalledWith({
           name: 'setTransactionHash',
-          payload: { hash: '0x123', key: 'test'},
+          payload: { hash: '0x123', key: 'test' },
         })
       })
       it('should add to recent transactions and run dispatch from success callback when isSafeTx', async () => {
@@ -331,7 +331,7 @@ describe('TransactionStageModal', () => {
         )
         expect(mockDispatch).toBeCalledWith({
           name: 'setTransactionHash',
-          payload: { hash: '0x123', key: 'test'},
+          payload: { hash: '0x123', key: 'test' },
         })
       })
     })
@@ -449,7 +449,10 @@ describe('transactionSuccessHandler', () => {
 
     await waitFor(() =>
       expect(mockDispatch).toBeCalledWith(
-        expect.objectContaining({ name: 'setTransactionHash', payload: { hash: '0xhash', key: 'txKey'} }),
+        expect.objectContaining({
+          name: 'setTransactionHash',
+          payload: { hash: '0xhash', key: 'txKey' },
+        }),
       ),
     )
   })

src/components/TabBar.tsx

@@ -72,7 +72,7 @@ const TabWrapper = styled.div(
       ${theme.colors.backgroundSecondary} 60%
     );
     padding: ${theme.space['4']};
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       display: none;
     }
   `,

src/components/pages/AnnouncementBanner.tsx

@@ -24,7 +24,7 @@ const Container = styled.div(
       }
     }
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       flex-direction: row;
     }
   `,

src/components/pages/dotbox/[name]/DotBoxRegistration.tsx

@@ -27,7 +27,7 @@ const DotBoxCard = styled(Card)(
     padding: ${theme.space['4']};
     align-items: flex-start;
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       padding: ${theme.space['6']} ${theme.space['18']};
       gap: ${theme.space['6']};
     }

src/components/pages/import/[name]/shared.tsx

@@ -15,7 +15,7 @@ export const DnsImportCard = styled(Card)(
     gap: ${theme.space['4']};
     padding: ${theme.space['4']};
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       padding: ${theme.space['6']} ${theme.space['18']};
       gap: ${theme.space['6']};
     }
@@ -47,7 +47,7 @@ export const DnsImportActionsContainer = styled.div(
     justify-content: stretch;
     width: 100%;
     gap: ${theme.space['2']};
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       flex-direction: row;
       justify-content: center;
     }
@@ -57,7 +57,7 @@ export const DnsImportActionsContainer = styled.div(
 export const DnsImportActionButton = styled(Button)(
   ({ theme }) => css`
     width: 100%;
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       width: ${theme.space['40']};
     }
   `,

src/components/pages/import/[name]/steps/CompleteImport.tsx

@@ -25,7 +25,7 @@ const StyledCard = styled(Card)(
       max-width: ${theme.space.full};
     }
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       padding: ${theme.space['6']} ${theme.space['18']};
       gap: ${theme.space['6']};
     }

src/components/pages/profile/ProfileButton.test.tsx

@@ -46,11 +46,11 @@ const mockUseCoinChain = mockFunction(useCoinChain)
 mockUseCoinChain.mockImplementation(({ coinName }) => {
   if (coinName !== 'eth') {
     return {
-      data:  null
+      data: null,
     }
   }
   return {
-    data:  {
+    data: {
       id: 1,
       name: 'Ethereum',
       blockExplorers: {
@@ -60,7 +60,7 @@ mockUseCoinChain.mockImplementation(({ coinName }) => {
           apiUrl: 'https://api.etherscan.io/api',
         },
       },
-    },  
+    },
   }
 })
 

src/components/pages/profile/ProfileDetails.test.tsx

@@ -117,7 +117,14 @@ describe('ProfileDetails', () => {
         name="test.eth"
         expiryDate={undefined}
         accountRecords={[]}
-        otherRecords={[{ iconKey: 'contenthash', key: 'contenthash', value: 'ipfs://QmXoypizjW3WknFiJnKLwHCnL72vedxjQkDDP1mXWo6uco', type: 'contenthash' }]}
+        otherRecords={[
+          {
+            iconKey: 'contenthash',
+            key: 'contenthash',
+            value: 'ipfs://QmXoypizjW3WknFiJnKLwHCnL72vedxjQkDDP1mXWo6uco',
+            type: 'contenthash',
+          },
+        ]}
         addresses={[]}
         pccExpired={false}
         owners={[]}

src/components/pages/profile/ProfileDetails.tsx

@@ -114,7 +114,7 @@ const RecordsStack = styled.div(
     gap: ${theme.space['4']};
     padding: ${theme.space['4']};
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       padding: ${theme.space['6']};
     }
   `,
@@ -127,7 +127,7 @@ const ActionsContainer = styled.div(
     display: flex;
     flex-direction: column;
     gap: ${theme.space['4']};
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       padding: ${theme.space['4']} ${theme.space['6']};
     }
   `,
@@ -141,7 +141,7 @@ const Actions = styled.div(
     flex-flow: row wrap;
     gap: ${theme.space['2']};
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       & > .leading {
         flex-grow: 1;
         order: -1;
@@ -165,7 +165,7 @@ const ActionWrapper = styled.div<{
     css`
       width: 100%;
     `}
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       width: initial;
       ${leading &&
       css`

src/components/pages/profile/[name]/registration/Registration.tsx

@@ -48,7 +48,7 @@ const ViewProfileContainer = styled.div(
       }
     }
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       margin-bottom: 0;
       padding: 0;
     }
@@ -70,7 +70,7 @@ const StyledInnerDialog = styled(InnerDialog)(
     overflow: hidden;
     border-top-left-radius: ${theme.radii['3xLarge']};
     border-top-right-radius: ${theme.radii['3xLarge']};
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       height: 90vh;
       max-height: 720px;
       width: calc(80vw - 2 * ${theme.space['6']});

src/components/pages/profile/[name]/registration/steps/Complete.tsx

@@ -34,7 +34,7 @@ const StyledCard = styled(Card)(
       max-width: ${theme.space.full};
     }
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       padding: ${theme.space['6']} ${theme.space['18']};
       gap: ${theme.space['6']};
     }
@@ -63,7 +63,7 @@ const NFTContainer = styled.div(
     border-radius: ${theme.radii['2xLarge']};
     overflow: hidden;
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       width: ${theme.space['80']};
       height: ${theme.space['80']};
     }

src/components/pages/profile/[name]/registration/steps/Info.tsx

@@ -18,7 +18,7 @@ const StyledCard = styled(Card)(
     gap: ${theme.space['4']};
     padding: ${theme.space['4']};
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       padding: ${theme.space['6']} ${theme.space['18']};
       gap: ${theme.space['6']};
     }
@@ -33,7 +33,7 @@ const InfoItems = styled.div(
     justify-content: flex-start;
     gap: ${theme.space['4']};
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       flex-direction: row;
       align-items: stretch;
     }

src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.tsx

@@ -51,7 +51,7 @@ const StyledCard = styled(Card)(
     gap: ${theme.space['4']};
     padding: ${theme.space['4']};
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       padding: ${theme.space['6']} ${theme.space['18']};
       gap: ${theme.space['6']};
     }
@@ -70,7 +70,7 @@ const OutlinedContainer = styled.div(
     border-radius: ${theme.radii.large};
     background: ${theme.colors.backgroundSecondary};
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       grid-template-areas: 'title checkbox' 'description checkbox';
     }
   `,
@@ -143,7 +143,7 @@ const InfoItems = styled.div(
     justify-content: flex-start;
     gap: ${theme.space['4']};
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       flex-direction: row;
       align-items: stretch;
     }

src/components/pages/profile/[name]/registration/steps/Profile/AddProfileRecordView.tsx

@@ -28,7 +28,7 @@ const Content = styled.div(
     gap: ${theme.space[6]};
     overflow: hidden;
 
-     @media (min-width: ${theme.breakpoints.sm}px) {
+    @media (min-width: ${theme.breakpoints.sm}px) {
       width: 80vw;
       max-width: ${theme.space['128']};
     }