Thorin v1

functions/_middleware.ts

@@ -1,4 +1,5 @@
 /* eslint max-classes-per-file: "off" */
+import { cspOnlyFrameAncestors, cspWithFrameAncestors } from '@app/utils/createCsp'
 
 class ContentModifier {
   private newContent: string
@@ -57,20 +58,14 @@ const firefoxRewrite: PagesFunction = async ({ request, next }) => {
 
   // firefox CSP exception + metamask script
   if (userAgent?.includes('gecko/20100101') && userAgent.includes('firefox/')) {
-    response.headers.set(
-      'Content-Security-Policy',
-      "frame-ancestors 'self' https://app.safe.global;",
-    )
+    response.headers.set('Content-Security-Policy', cspOnlyFrameAncestors)
     return new HTMLRewriter()
       .on('head', new ScriptWriter('/_next/static/chunks/initialise-metamask.js'))
       .transform(response)
   }
 
   // default headers
-  response.headers.set(
-    'Content-Security-Policy',
-    "worker-src 'self'; script-src 'self' 'sha256-UyYcl+sKCF/ROFZPHBlozJrndwfNiC5KT5ZZfup/pPc=' plausible.io static.cloudflareinsights.com *.ens-app-v3.pages.dev https://app.intercom.io https://widget.intercom.io https://js.intercomcdn.com 'wasm-unsafe-eval'; frame-ancestors 'self' https://app.safe.global;",
-  )
+  response.headers.set('Content-Security-Policy', cspWithFrameAncestors)
   return response
 }
 

functions/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["../src/utils/gradient.ts", "./**/*"],
+  "include": ["../src/utils/createCsp.ts", "./**/*"],
   "compilerOptions": {
     "noEmit": true,
     "target": "ESNext",

package.json

@@ -56,7 +56,7 @@
     "@ensdomains/content-hash": "^3.0.0-beta.5",
     "@ensdomains/ens-contracts": "1.2.0-beta.0",
     "@ensdomains/ensjs": "4.0.2",
-    "@ensdomains/thorin": "0.6.50",
+    "@ensdomains/thorin": "1.0.0-beta.16",
     "@metamask/post-message-stream": "^6.1.2",
     "@metamask/providers": "^14.0.2",
     "@noble/hashes": "^1.3.2",
@@ -123,7 +123,7 @@
     "@types/node": "^18.7.13",
     "@types/pako": "^2.0.0",
     "@types/prettier": "^2.7.0",
-    "@types/react": "18.2.21",
+    "@types/react": "18.3.12",
     "@types/react-dom": "^18.2.7",
     "@types/styled-components": "5.1.23",
     "@types/ws": "^8.5.10",

playwright.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig, devices } from '@playwright/test'
 
 export default defineConfig({

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/CheckButton/CheckButton.tsx

@@ -1,27 +1,26 @@
 import styled, { css } from 'styled-components'
 
-import CircleTick from '@app/assets/CircleTick.svg'
-
 const Container = styled.button<{ $active: boolean }>(
   ({ theme, $active }) => css`
     cursor: pointer;
     flex: 0 0 ${theme.space['9']};
     width: ${theme.space['9']};
     height: ${theme.space['9']};
+    color: ${$active ? theme.colors.accent : theme.colors.grey};
     svg {
       path,
       rect {
         transition: all 0.15s ease-in-out;
-        stroke: ${$active ? theme.colors.accent : theme.colors.textTertiary};
+
         stroke-width: 1px;
       }
     }
 
     &:hover {
+      color: ${theme.colors.accent};
       svg {
         path,
         rect {
-          stroke: ${theme.colors.accent};
           stroke-width: 1.5px;
         }
       }
@@ -42,7 +41,26 @@ export const CheckButton = ({ active = false, onChange }: Props) => {
       onClick={() => onChange?.(!active)}
       data-testid="check-button"
     >
-      <CircleTick />
+      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill="none"
+          d="M7 12.3125L11.0625 16.0625L17 7.9375"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <rect
+          fill="none"
+          x="1"
+          y="1"
+          width="22"
+          height="22"
+          rx="11"
+          stroke="currentColor"
+          strokeWidth="2"
+        />
+      </svg>
     </Container>
   )
 }

src/components/@atoms/ExpiryComponents/ExpiryComponents.tsx

@@ -140,7 +140,7 @@ export const ReadableExpiry = ({ expiry }: { expiry: Date }) => {
           day: 'numeric',
         })}, ${expiry.getFullYear()}`}
       </Typography>
-      <Typography weight="bold" color="textTertiary">
+      <Typography weight="bold" color="grey">
         {`at ${expiry.toLocaleTimeString(undefined, {
           hour: '2-digit',
           minute: '2-digit',

src/components/@atoms/GasDisplay.tsx

@@ -14,7 +14,7 @@ const Container = styled.div(
     gap: ${theme.space['1']};
 
     font-size: ${theme.fontSizes.small};
-    color: ${theme.colors.textTertiary};
+    color: ${theme.colors.grey};
     font-weight: bold;
 
     padding: 0 ${theme.space['4']};

src/components/@atoms/InnerDialog.tsx

@@ -1,7 +1,5 @@
 import styled, { css } from 'styled-components'
 
-import { mq } from '@ensdomains/thorin'
-
 export const InnerDialog = styled.div(
   ({ theme }) => css`
     display: flex;
@@ -12,9 +10,9 @@ export const InnerDialog = styled.div(
     gap: ${theme.space['4']};
     max-height: 60vh;
     max-width: 100vw;
-    ${mq.sm.min(css`
+    @media (min-width: ${theme.breakpoints.sm}px) {
       width: calc(80vw - 2 * ${theme.space['6']});
       max-width: ${theme.space['128']};
-    `)}
+    }
   `,
 )

src/components/@atoms/Invoice/Invoice.tsx

@@ -23,7 +23,7 @@ const LineItem = styled.div<{ $color?: Colors }>(
     display: flex;
     justify-content: space-between;
     line-height: ${theme.space['5']};
-    color: ${$color ? theme.colors[$color] : theme.colors.textTertiary};
+    color: ${$color ? theme.colors[$color] : theme.colors.grey};
   `,
 )
 

src/components/@atoms/MobileFullWidth.tsx

@@ -1,18 +1,16 @@
 import styled, { css } from 'styled-components'
 
-import { mq } from '@ensdomains/thorin'
-
 const MobileFullWidth = styled.div(
   ({ theme }) => css`
     & > div,
     & {
       width: ${theme.space.full};
       max-width: ${theme.space.full};
-      ${mq.sm.min(css`
+      @media (min-width: ${theme.breakpoints.sm}px) {
         min-width: ${theme.space['40']};
         width: fit-content;
         max-width: max-content;
-      `)}
+      }
     }
   `,
 )

src/components/@atoms/NameDetailItem/NameDetailItem.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 import styled, { css } from 'styled-components'
 import { useEnsAvatar } from 'wagmi'
 
-import { Avatar, mq } from '@ensdomains/thorin'
+import { Avatar } from '@ensdomains/thorin'
 
 import CircleTick from '@app/assets/CircleTick.svg'
 import { useZorb } from '@app/hooks/useZorb'
@@ -39,10 +39,10 @@ const NameItemWrapper = styled.div<{ $highlight: boolean; $disabled: boolean }>(
     &:last-of-type {
       border: none;
     }
-    ${mq.sm.min(css`
+    @media (min-width: ${theme.breakpoints.sm}px) {
       padding: ${theme.space['3']} ${theme.space['4.5']};
       gap: ${theme.space['4']};
-    `)}
+    }
   `,
 )
 

src/components/@atoms/NameDetailItem/TaggedNameItem.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
 import { NameWithRelation } from '@ensdomains/ensjs/subgraph'
-import { mq, Tag } from '@ensdomains/thorin'
+import { Tag } from '@ensdomains/thorin'
 
 import { validateExpiry } from '@app/utils/utils'
 
@@ -16,11 +16,11 @@ const OtherItemsContainer = styled.div(
     justify-content: center;
     gap: ${theme.space['2']};
     flex-gap: ${theme.space['2']};
-    ${mq.md.min(css`
+    @media (min-width: 768px) {
       flex-direction: row;
       gap: ${theme.space['4']};
       flex-gap: ${theme.space['4']};
-    `)}
+    }
   `,
 )
 

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/@atoms/RegistrationTimeComparisonBanner/RegistrationTimeComparisonBanner.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
-import { Helper, mq } from '@ensdomains/thorin'
+import { Helper } from '@ensdomains/thorin'
 
 const InnerContainer = styled.div(
   ({ theme }) => css`
@@ -75,10 +75,10 @@ const Marker = styled.div<{ $percent: number }>(
       white-space: nowrap;
     }
 
-    ${mq.xs.min(css`
+    @media (min-width: 360px) {
       width: ${theme.space['18']};
       font-size: ${theme.fontSizes.small};
-    `)}
+    }
 
     &::before {
       content: '';
@@ -133,7 +133,7 @@ export const RegistrationTimeComparisonBanner = ({ message, yearlyFee, transacti
   const twentyRounded = calcPercent(twenty.gas, 3)
 
   return (
-    <Helper type="info">
+    <Helper alert="info">
       <InnerContainer>
         <div>{message}</div>
         <Bar $highlightPercent={twentyRounded} />

src/components/@atoms/StyledName/StyledName.tsx

@@ -14,7 +14,7 @@ const Container = styled.div(
 
 const Name = styled.span<{ $disabled?: boolean }>(
   ({ theme, $disabled }) => css`
-    color: ${$disabled ? theme.colors.textTertiary : theme.colors.text};
+    color: ${$disabled ? theme.colors.grey : theme.colors.text};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -24,13 +24,13 @@ const Name = styled.span<{ $disabled?: boolean }>(
 
 const Dot = styled.span(
   ({ theme }) => css`
-    color: ${theme.colors.textTertiary};
+    color: ${theme.colors.grey};
   `,
 )
 
 const Tld = styled.span(
   ({ theme }) => css`
-    color: ${theme.colors.textTertiary};
+    color: ${theme.colors.grey};
     white-space: nowrap;
   `,
 )