Merge pull request #949 from ensdomains/fix-safe

Fix safe

Author: sugh01

next.config.mjs

@@ -43,6 +43,40 @@ const nextConfig = {
   images: {
     domains: ['metadata.ens.domains'],
   },
+  async headers() {
+    // keep this in case we need to debug Safe in the future
+    if (process.env.NODE_ENV === 'development') {
+      return [
+        {
+          source: '/manifest.json',
+          headers: [
+            {
+              key: 'Access-Control-Allow-Origin',
+              value: '*',
+            },
+            {
+              key: 'Access-Control-Allow-Methods',
+              value: 'GET, OPTIONS',
+            },
+            {
+              key: 'Access-Control-Allow-Headers',
+              value: 'X-Requested-With, content-type, Authorization',
+            },
+          ],
+        },
+        {
+          source: '/(.*)',
+          headers: [
+            {
+              key: 'Content-Security-Policy',
+              value: "frame-ancestors 'self' https://app.safe.global;",
+            },
+          ],
+        },
+      ]
+    }
+    return []
+  },
   async rewrites() {
     return [
       {

public/manifest.json

@@ -15,5 +15,6 @@
   ],
   "theme_color": "#5298FF",
   "background_color": "#F6F6F6",
-  "display": "standalone"
+  "display": "standalone",
+  "description": "Decentralised naming for wallets, websites, & more"
 }

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

@@ -1,46 +1,37 @@
-import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import { TextWithTooltip } from './TextWithTooltip'
 import { userEvent } from '@testing-library/user-event'
 import { ThemeProvider } from 'styled-components'
+import { describe, expect, it } from 'vitest'
+
 import { lightTheme } from '@ensdomains/thorin'
 
+import { TextWithTooltip } from './TextWithTooltip'
+
 const renderWithTheme = (component: React.ReactNode) => {
-  return render(
-    <ThemeProvider theme={lightTheme}>
-      {component}
-    </ThemeProvider>
-  )
+  return render(<ThemeProvider theme={lightTheme}>{component}</ThemeProvider>)
 }
 
 describe('TextWithTooltip', () => {
   it('should render children and show tooltip on hover', async () => {
-    renderWithTheme(
-      <TextWithTooltip tooltipContent="This is a tooltip">
-        Hover me
-      </TextWithTooltip>
-    )
-    
+    renderWithTheme(<TextWithTooltip tooltipContent="This is a tooltip">Hover me</TextWithTooltip>)
+
     const button = screen.getByText('Hover me')
     expect(button).toBeInTheDocument()
-    
+
     await userEvent.hover(button)
     expect(screen.getByText('This is a tooltip')).toBeInTheDocument()
   })
 
   it('should render learn more link when link prop is provided', async () => {
     renderWithTheme(
-      <TextWithTooltip 
-        tooltipContent="Tooltip with link" 
-        link="https://example.com"
-      >
+      <TextWithTooltip tooltipContent="Tooltip with link" link="https://example.com">
         With link
-      </TextWithTooltip>
+      </TextWithTooltip>,
     )
-    
+
     const button = screen.getByText('With link')
     await userEvent.hover(button)
-    
+
     const learnMoreLink = screen.getByText('action.learnMore')
     expect(learnMoreLink).toBeInTheDocument()
     expect(learnMoreLink.closest('a')).toHaveAttribute('href', 'https://example.com')
@@ -50,14 +41,12 @@ describe('TextWithTooltip', () => {
 
   it('should not render learn more link when link prop is not provided', async () => {
     renderWithTheme(
-      <TextWithTooltip tooltipContent="Tooltip without link">
-        No link
-      </TextWithTooltip>
+      <TextWithTooltip tooltipContent="Tooltip without link">No link</TextWithTooltip>,
     )
-    
+
     const button = screen.getByText('No link')
     await userEvent.hover(button)
-    
+
     expect(screen.queryByText('action.learnMore')).not.toBeInTheDocument()
   })
 })

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

@@ -7,6 +7,7 @@ import { Typography } from '@ensdomains/thorin'
 import { Calendar } from '@app/components/@atoms/Calendar/Calendar'
 import { PlusMinusControl } from '@app/components/@atoms/PlusMinusControl/PlusMinusControl'
 import { roundDurationWithDay, secondsFromDateDiff } from '@app/utils/date'
+import { isInsideSafe } from '@app/utils/safe'
 import { formatDurationOfDates, secondsToYears } from '@app/utils/utils'
 
 const YearsViewSwitch = styled.button(
@@ -73,9 +74,11 @@ export const DateSelection = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dateInYears, durationType])
 
+  const isSafeApp = isInsideSafe()
+
   return (
     <Container>
-      {durationType === 'date' ? (
+      {durationType === 'date' && !isSafeApp ? (
         <Calendar
           value={currentTime + seconds}
           onChange={(e) => {
@@ -113,13 +116,15 @@ export const DateSelection = ({
           postFix: mode === 'register' ? ' registration. ' : ' extension. ',
           t,
         })}
-        <YearsViewSwitch
-          type="button"
-          data-testid="date-selection"
-          onClick={() => onChangeDurationType?.(durationType === 'years' ? 'date' : 'years')}
-        >
-          {t(`calendar.pick_by_${durationType === 'date' ? 'years' : 'date'}`, { ns: 'common' })}
-        </YearsViewSwitch>
+        {!isSafeApp && (
+          <YearsViewSwitch
+            type="button"
+            data-testid="date-selection"
+            onClick={() => onChangeDurationType?.(durationType === 'years' ? 'date' : 'years')}
+          >
+            {t(`calendar.pick_by_${durationType === 'date' ? 'years' : 'date'}`, { ns: 'common' })}
+          </YearsViewSwitch>
+        )}
       </Typography>
     </Container>
   )

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

@@ -26,7 +26,7 @@ describe('NetworkNotifications', () => {
   it('should show notification if shouldOpenModal sets true', () => {
     vi.mocked(shouldOpenModal).mockReturnValue(true)
     mockUseAccount.mockReturnValue({
-      chainId: 1
+      chainId: 1,
     })
     mockUseChainId.mockReturnValue(1)
     render(<NetworkNotifications />)
@@ -36,7 +36,7 @@ describe('NetworkNotifications', () => {
   it('should not show notification if shouldOpenModal sets false', () => {
     vi.mocked(shouldOpenModal).mockReturnValue(false)
     mockUseAccount.mockReturnValue({
-      chainId: 1
+      chainId: 1,
     })
     mockUseChainId.mockReturnValue(1)
 

src/components/@molecules/NetworkNotifications/utils.test.ts

@@ -1,7 +1,9 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { shouldOpenModal } from './utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
 import * as chains from '@app/constants/chains'
 
+import { shouldOpenModal } from './utils'
+
 describe('shouldOpenModal', () => {
   beforeEach(() => {
     vi.resetModules()

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

@@ -2,15 +2,14 @@
 import { fireEvent, mockFunction, render, screen, userEvent, waitFor } from '@app/test-utils'
 
 import * as ReactQuery from '@tanstack/react-query'
+import React from 'react'
 import { beforeEach, describe, expect, it, Mock, vi } from 'vitest'
 import { useAccount, useClient } from 'wagmi'
 
-
 import * as UseInfiniteQuery from '@app/utils/query/useInfiniteQuery'
 
 import { makeMockIntersectionObserver } from '../../../../../test/mock/makeMockIntersectionObserver'
 import { AvatarNFT } from './AvatarNFT'
-import React from 'react'
 
 vi.mock('wagmi')
 vi.mock('@app/hooks/chain/useCurrentBlockTimestamp', () => ({
@@ -20,8 +19,6 @@ vi.mock('@app/hooks/chain/useChainName', () => ({
   useChainName: () => 'mainnet',
 }))
 
-
-
 const mockUseClient = mockFunction(useClient)
 const mockUseAccount = mockFunction(useAccount)
 
@@ -197,7 +194,6 @@ describe('<AvatarNFT />', () => {
   it('show load more data on page load trigger', async () => {
     const useInfiniteQuerySpy = vi.spyOn(UseInfiniteQuery, 'useInfiniteQuery')
 
-
     mockFetch
       .mockImplementationOnce(() =>
         Promise.resolve({
@@ -214,15 +210,19 @@ describe('<AvatarNFT />', () => {
         }),
       )
     vi.mock('@ensdomains/thorin', async (importActual) => ({
-      ...(await importActual() as any),
-      ScrollBox: () => ({ children, onReachedBottom }: React.PropsWithChildren<{
-        onReachedBottom?: () => void;
-      }>) => {
-        onReachedBottom!()
-        return <div>{children}</div>
-      },
+      ...((await importActual()) as any),
+      ScrollBox:
+        () =>
+        ({
+          children,
+          onReachedBottom,
+        }: React.PropsWithChildren<{
+          onReachedBottom?: () => void
+        }>) => {
+          onReachedBottom!()
+          return <div>{children}</div>
+        },
     }))
-    
 
     render(<AvatarNFT {...props} />)
     await waitFor(() => expect(mockFetch).toHaveBeenCalled())
@@ -255,13 +255,18 @@ describe('<AvatarNFT />', () => {
     )
 
     vi.mock('@ensdomains/thorin', async (importActual) => ({
-      ...(await importActual() as any),
-      ScrollBox: () => ({ children, onReachedBottom }: React.PropsWithChildren<{
-        onReachedBottom?: () => void;
-      }>) => {
-        onReachedBottom!()
-        return <div>{children}</div>
-      },
+      ...((await importActual()) as any),
+      ScrollBox:
+        () =>
+        ({
+          children,
+          onReachedBottom,
+        }: React.PropsWithChildren<{
+          onReachedBottom?: () => void
+        }>) => {
+          onReachedBottom!()
+          return <div>{children}</div>
+        },
     }))
 
     render(<AvatarNFT {...props} />)

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

@@ -230,7 +230,7 @@ describe('TransactionStageModal', () => {
         )
         expect(screen.getByTestId('transaction-modal-confirm-button')).toBeDisabled()
         await waitFor(() =>
-          expect(screen.getByTestId('transaction-modal-confirm-button')).toBeEnabled()
+          expect(screen.getByTestId('transaction-modal-confirm-button')).toBeEnabled(),
         )
         expect(mockEstimateGas).toHaveBeenCalledTimes(1)
       })

src/components/pages/import/[name]/steps/SelectImportType.test.tsx

@@ -10,8 +10,8 @@ import { useAccount } from 'wagmi'
 import { lightTheme } from '@ensdomains/thorin'
 
 import { useDnsOffchainStatus } from '@app/hooks/dns/useDnsOffchainStatus'
-import { useUnmanagedTLD } from '@app/hooks/useUnmanagedTLD'
 import { useResolver } from '@app/hooks/ensjs/public/useResolver'
+import { useUnmanagedTLD } from '@app/hooks/useUnmanagedTLD'
 import i18n from '@app/i18n'
 
 import { calculateDnsSteps, SelectImportType } from './SelectImportType'
@@ -208,7 +208,11 @@ describe('SelectImportType component', () => {
         </ThemeProvider>
       </QueryClientProvider>,
     )
-    expect(screen.getByText("The team behind .club have customized their ENS experience, so we're unable to help you import the name at this time")).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        "The team behind .club have customized their ENS experience, so we're unable to help you import the name at this time",
+      ),
+    ).toBeInTheDocument()
   })
 
   it('should show customized TLD message for TLDs not managed by DNSRegistrar', () => {
@@ -230,7 +234,11 @@ describe('SelectImportType component', () => {
         </ThemeProvider>
       </QueryClientProvider>,
     )
-    expect(screen.getByText("The team behind .xyz have customized their ENS experience, so we're unable to help you import the name at this time")).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        "The team behind .xyz have customized their ENS experience, so we're unable to help you import the name at this time",
+      ),
+    ).toBeInTheDocument()
   })
 
   it('should show normal import options for managed TLDs', () => {

src/hooks/abilities/useAbilities.test.ts

@@ -1,5 +1,6 @@
 import { mockFunction, renderHook } from '@app/test-utils'
 
+import { dequal } from 'dequal'
 import { match, P } from 'ts-pattern'
 import { Address } from 'viem'
 // import { writeFileSync} from 'fs'
@@ -20,7 +21,6 @@ import { useBasicName } from '../useBasicName'
 import { useHasSubnames } from '../useHasSubnames'
 import { useParentBasicName } from '../useParentBasicName'
 import { useAbilities } from './useAbilities'
-import { dequal } from 'dequal'
 
 vi.mock('@app/hooks/account/useAccountSafely')
 vi.mock('@app/hooks/useBasicName')