diff --git a/src/components/pages/migrate/MigrationTab.tsx b/src/components/pages/migrate/MigrationTab.tsx index f6df6944a..3fd9abfcf 100644 --- a/src/components/pages/migrate/MigrationTab.tsx +++ b/src/components/pages/migrate/MigrationTab.tsx @@ -323,7 +323,7 @@ const LandingTab = ({ type MigrationHelperTab = Exclude -const filterNames = (names: NameWithRelation[]) => { +const filterNamesForMigration = (names: NameWithRelation[]) => { const eligibleNames: NameWithRelation[] = [] const inelegibleNames: NameWithRelation[] = [] @@ -339,27 +339,33 @@ const filterNames = (names: NameWithRelation[]) => { return { eligibleNames, inelegibleNames } } -const filterTabs = ({ - approvedNames, - eligibleNames, - inelegibleNames, -}: { +const filterTabs = ({ + approvedNames = [], + eligibleNames = [], + inelegibleNames = [], + claimedNames = [], +}: Partial<{ approvedNames: NameWithRelation[] eligibleNames: NameWithRelation[] inelegibleNames: NameWithRelation[] -}) => { - const tabs: MigrationHelperTab[] = [] + claimedNames: NameWithRelation[] +}>) => { + const tabs: T[] = [] if (eligibleNames.length) { - tabs.push('eligible') + tabs.push('eligible' as T) } if (inelegibleNames.length) { - tabs.push('ineligible') + tabs.push('ineligible' as T) } if (approvedNames.length) { - tabs.push('approved') + tabs.push('approved' as T) + } + + if (claimedNames.length) { + tabs.push('claimed' as T) } return tabs @@ -386,7 +392,7 @@ const MigrationsTab = ({ approvedNames: NameWithRelation[] allNamesAreApproved: boolean }) => { - const tabs = filterTabs({ approvedNames, eligibleNames, inelegibleNames }) + const tabs = filterTabs({ approvedNames, eligibleNames, inelegibleNames }) const { createTransactionFlow } = useTransactionFlow() const [activeNameListTab, setNameListTab] = useState(tabs[0]) @@ -503,32 +509,46 @@ const MigrationsTab = ({ ) } -const extensionTabs = ['eligible', 'claimed'] as const - -type ExtensionTabType = (typeof extensionTabs)[number] +type ExtensionTabType = Exclude const ExtensionTab = ({ t, isConnected, address, + allNamesAreApproved, + setTab, }: { t: TFunction isConnected: boolean address?: Address + allNamesAreApproved: boolean + setTab: (tab: MigrationTabType) => void }) => { const { infiniteData } = useNamesForAddress({ address, pageSize: 20, filter: { owner: false, wrappedOwner: true, registrant: true, resolvedAddress: false }, + enabled: allNamesAreApproved, }) - const names = infiniteData.filter((name) => name.parentName === 'eth' && name.expiryDate) + const allNames = infiniteData.filter((name) => name.parentName === 'eth' && name.expiryDate) - const approvedNames = useApprovedNamesForMigration({ names, owner: address }) + const [activeTab, setNameListTab] = useState('eligible') - const allNamesAreApproved = approvedNames.length !== 0 && approvedNames.length === names.length + const claimedNames = allNames.filter( + (name) => name.expiryDate && name.expiryDate.date > new Date(2030, 12, 31), + ) + + const eligibleNames = allNames.filter((name) => !claimedNames.includes(name)) + + const { openConnectModal } = useConnectModal() + + const names: Record = { + claimed: claimedNames, + eligible: eligibleNames, + } - const [activeTab, setTab] = useState('eligible') + const tabs = filterTabs({ claimedNames, eligibleNames }) return ( <> @@ -543,27 +563,32 @@ const ExtensionTab = ({ bloop - + {match({ isConnected, allNamesAreApproved }) + .with({ isConnected: true, allNamesAreApproved: true }, () => ( + + )) + .with({ isConnected: true, allNamesAreApproved: false }, () => ( + + )) + .with({ isConnected: false }, () => ( + + )) + .exhaustive()} - {/* {match({ isConnected, allNamesAreApproved }) - .with({ isConnected: true, allNamesAreApproved: true }, () => ( - - )) - .with({ isConnected: false }, () => null) - .exhaustive()} */} + {isConnected ? ( + + ) : null} ) } @@ -586,7 +611,7 @@ export const MigrationTab = ({ filter: { registrant: true, owner: true, resolvedAddress: true, wrappedOwner: true }, }) - const { eligibleNames: initialEligibleNames, inelegibleNames } = filterNames(names) + const { eligibleNames: initialEligibleNames, inelegibleNames } = filterNamesForMigration(names) const approvedNames = useApprovedNamesForMigration({ names: initialEligibleNames, @@ -620,6 +645,8 @@ export const MigrationTab = ({ }} /> )) - .with('extension', () => ) + .with('extension', () => ( + + )) .exhaustive() }