fix: detect desynced expiry + show banner

ensdomains · Aug 9, 2024 · 10474b2 · 10474b2
1 parent 43f65f5
commit 10474b2
Show file tree

Hide file tree

Showing 22 changed files with 335 additions and 153 deletions.
diff --git a/package.json b/package.json
@@ -52,7 +52,7 @@
     "@ensdomains/content-hash": "^3.0.0-beta.5",
     "@ensdomains/ens-contracts": "1.2.0-beta.0",
     "@ensdomains/ensjs": "4.0.0",
-    "@ensdomains/thorin": "0.6.50",
+    "@ensdomains/thorin": "0.0.0-feat-banner-action-button.20240809T010925661",
     "@metamask/mobile-provider": "^2.1.0",
     "@metamask/post-message-stream": "^6.1.2",
     "@metamask/providers": "^14.0.2",
@@ -89,11 +89,11 @@
     "react-hook-form": "7.51.0",
     "react-i18next": "^11.18.5",
     "react-is": "^17.0.2",
-    "react-transition-state": "^1.1.5",
+    "react-transition-state": "2.1.1",
     "react-use": "^17.4.0",
     "react-use-error-boundary": "^3.0.0",
     "react-use-intercom": "^5.1.4",
-    "styled-components": "^5.3.5",
+    "styled-components": "5.3.6",
     "ts-pattern": "^4.2.2",
     "use-immer": "^0.7.0",
     "viem": "2.19.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -218,7 +218,8 @@
       "syncManager": "Sync manager",
       "updateProfileRecords": "Update profile",
       "resetProfile": "Reset profile",
-      "unwrapName": "Unwrap name"
+      "unwrapName": "Unwrap name",
+      "syncWrappedExpiry": "Repair name"
     },
     "info": {
       "sendName": "Set the controller and registrant of the name",
@@ -237,6 +238,7 @@
       "burnFuses": "Burn the chosen permissions until name expiry",
       "commitName": "Start timer to register name",
       "approveNameWrapper": "Approve the NameWrapper to manage your names",
+      "syncWrappedExpiry": "Sync the wrapped name expiry",
       "fuses": {
         "revoke": "Revoke",
         "grant": "Grant",

diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json
@@ -16,6 +16,11 @@
     "available": {
       "title": "{{name}} is available",
       "description": "This name expired on <strong>{{date}}</strong>. Click here to view the registration page."
+    },
+    "expiryDesync": {
+      "title": "Name misconfigured",
+      "description": "A transaction is required to repair this name. Ownership data displayed may be inaccurate.",
+      "actionLabel": "Repair"
     }
   },
   "tabs": {

diff --git a/src/components/@atoms/ExpandableSection/ExpandableSection.tsx b/src/components/@atoms/ExpandableSection/ExpandableSection.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren, useRef, useState } from 'react'
-import { TransitionState, useTransition } from 'react-transition-state'
+import { useTransition, type TransitionStatus } from 'react-transition-state'
 import styled, { css } from 'styled-components'
 
 import { DownChevronSVG, Typography } from '@ensdomains/thorin'
@@ -38,7 +38,7 @@ const IconWrapper = styled.div<{ $open: boolean }>(
   `,
 )
 
-const Body = styled.div<{ $state: TransitionState; $height: number }>(
+const Body = styled.div<{ $state: TransitionStatus; $height: number }>(
   ({ theme, $state, $height }) => css`
     overflow: hidden;
     width: 100%;
@@ -94,15 +94,15 @@ export const ExpandableSection = ({ title, children }: PropsWithChildren<Props>)
     timeout: 300,
     preEnter: true,
     preExit: true,
-    onChange: ({ state: _state }) => {
-      if (_state === 'preEnter' || _state === 'preExit') {
+    onStateChange: ({ current: newState }) => {
+      if (newState.status === 'preEnter' || newState.status === 'preExit') {
         const _heigth = ref.current?.getBoundingClientRect().height || 0
         setHeight(_heigth)
       }
     },
   })
 
-  const open = ['entered', 'entering', 'preEnter'].includes(state)
+  const open = ['entered', 'entering', 'preEnter'].includes(state.status)
 
   return (
     <Container>
@@ -112,7 +112,7 @@ export const ExpandableSection = ({ title, children }: PropsWithChildren<Props>)
           <DownChevronSVG />
         </IconWrapper>
       </Header>
-      <Body $state={state} $height={height}>
+      <Body $state={state.status} $height={height}>
         <Content ref={ref}>{children}</Content>
       </Body>
     </Container>