add claimed tab ui

ensdomains · Oct 28, 2024 · adb9375 · adb9375
1 parent d0afa2b
commit adb9375
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/components/pages/migrate/MigrationNamesList.tsx b/src/components/pages/migrate/MigrationNamesList.tsx
@@ -8,13 +8,16 @@ import { CheckCircleSVG, Colors, DisabledSVG, PlusCircleSVG } from '@ensdomains/
 import { ensAvatarConfig } from '@app/utils/query/ipfsGateway'
 import { formatDurationOfDates } from '@app/utils/utils'
 
-const icons: Record<NameListTab, any> = {
+type Tab = 'eligible' | 'ineligible' | 'approved' | 'claimed'
+
+const icons: Record<Tab, any> = {
   eligible: <PlusCircleSVG />,
   ineligible: <DisabledSVG />,
   approved: <CheckCircleSVG />,
+  claimed: <CheckCircleSVG />,
 }
 
-const colors: Record<NameListTab, { fg: Colors; bg: Colors; hover: Colors }> = {
+const colors: Record<Tab, { fg: Colors; bg: Colors; hover: Colors }> = {
   eligible: {
     fg: 'bluePrimary',
     bg: 'blueSurface',
@@ -30,6 +33,11 @@ const colors: Record<NameListTab, { fg: Colors; bg: Colors; hover: Colors }> = {
     bg: 'greenSurface',
     hover: 'greenLight',
   },
+  claimed: {
+    fg: 'greenPrimary',
+    bg: 'greenSurface',
+    hover: 'greenLight',
+  },
 }
 
 const Container = styled.div(
@@ -113,7 +121,7 @@ const NameCard = styled.div(
   `,
 )
 
-const nameListTabs = ['eligible', 'ineligible', 'approved'] as const
+const nameListTabs = ['eligible', 'ineligible', 'approved', 'claimed'] as const
 
 export type NameListTab = (typeof nameListTabs)[number]
 

diff --git a/src/components/pages/migrate/MigrationTab.tsx b/src/components/pages/migrate/MigrationTab.tsx
@@ -540,6 +540,17 @@ const ExtensionTab = ({
           </Button>
           <Button colorStyle="greenSecondary">{t('cta.learn-more')}</Button>
         </ButtonContainer>
+        {/*  {match({ isConnected, allNamesAreApproved })
+          .with({ isConnected: true, allNamesAreApproved: true }, () => (
+            <MigrationNamesList
+              names={approvedNames}
+              activeTab={activeTab}
+              setTab={setTab}
+              tabs={tabs}
+            />
+          ))
+          .with({ isConnected: false }, () => null)
+          .exhaustive()} */}
       </Header>
     </>
   )