+
diff --git a/src/app/pro/components/advancedTools.tsx b/src/app/pro/components/advancedTools.tsx
new file mode 100644
index 00000000..a82e217d
--- /dev/null
+++ b/src/app/pro/components/advancedTools.tsx
@@ -0,0 +1,231 @@
+'use client'
+
+import React, { useEffect, useId, useState } from 'react'
+import Image from 'next/image'
+import register from 'public/icons/registration-primary.svg'
+import Search from 'public/icons/search-primary.svg'
+import Grid from 'public/icons/grid-primary.svg'
+import Watchlist from 'public/icons/watchlist-primary.svg'
+import Message from 'public/icons/chat.svg'
+import Notification from 'public/icons/bell-primary.svg'
+import View from 'public/icons/view-primary.svg'
+import grailsAI from 'public/icons/grails-ai.svg'
+import { AnimatePresence, motion } from "motion/react";
+import { useClickAway } from '@/hooks/useClickAway'
+import { Cross } from 'ethereum-identity-kit'
+import GrailsPoap2025 from 'public/art/grails-poap-2025.webp'
+import PrimaryButton from '@/components/ui/buttons/primary'
+
+const tools = [
+ {
+ title: 'Bulk Offers',
+ description: 'Create offers for multiple names at the same time.',
+ longDescription: 'This tool allows you to create offers for multiple name at once. You can easily set a base price, and then tweak offer amounts for individual names. ',
+ icon:
,
+ },
+ {
+ title: 'Google Metrics Filters',
+ description: 'Filter names by various google Google metrics like searches, CPC, and more.',
+ icon:
,
+ },
+ {
+ title: 'Custom Dashboard',
+ description: 'Create your custom dashboard. Add widgets to your dashboard to track your favorite metrics.',
+ icon:
,
+ },
+ {
+ title: 'Multiple Watchlists',
+ description: 'Create multiple watchlists to track your favorite names.',
+ icon:
,
+ },
+ {
+ title: 'Private Chat Group',
+ description:
+ 'Get access to the exclusive Grails Pro chat group, where you can chat with biggest domainers in the game.',
+ icon:
,
+ },
+ {
+ title: 'Feature Notifications',
+ description: 'Be the first to know about new features and updates to Grails.',
+ icon:
,
+ },
+ {
+ title: 'See view details',
+ description: 'See exactly who and when viewed your profile or name pages.',
+ icon:
,
+ },
+ {
+ title: 'AI Search',
+ description: 'Get AI recommended search terms based on your search history and market conditions.',
+ longDescription: 'Individual page on Grails, which uses our internal AI to recommend search terms based on your search history and market conditions. You can provide a list of all the names that you are interested in and the AI will recommend search terms based on your history and market conditions.',
+ icon:
,
+ },
+]
+
+const AdvancedTools = () => {
+ const [active, setActive] = useState<(typeof tools)[number] | boolean | null>(
+ null
+ );
+ const ref = useClickAway
(() => setActive(null));
+ const id = useId();
+
+ useEffect(() => {
+ function onKeyDown(event: KeyboardEvent) {
+ if (event.key === "Escape") {
+ setActive(null);
+ }
+ }
+
+ if (active && typeof active === "object") {
+ document.body.style.overflow = "hidden";
+ } else {
+ document.body.style.overflow = "auto";
+ }
+
+ window.addEventListener("keydown", onKeyDown);
+ return () => window.removeEventListener("keydown", onKeyDown);
+ }, [active]);
+
+ return (
+ <>
+
+ {active && typeof active === "object" && (
+
+
+ {active && typeof active === "object" ? (
+
+
setActive(null)}
+ >
+
+
+
+
+
+
+
+
+
+ {active.title}
+
+
+ {active.description}
+
+
+
+
+
+ {active.longDescription || active.description}
+
+
+
+
+ Upgrade to Pro
+
+
+
+
+
+
+ {/*
+
Professional Domainer Tools
+
+ Save gas and time. For serious domainers.
+
+
*/}
+
+ {tools.map((tool) => (
+
setActive(tool)}
+ >
+
+ {tool.icon}
+
+ {tool.title}
+
+
+
+ {tool.description}
+
+
+ ))}
+
+
+ {/*
*/}
+
+
+ {/* Tier header row */}
+
+
+
+ {tier.name}
+
+ ))}
+
+
+ {/* Pricing rows */}
+
+ Monthly
+ {tiers.map((tier) => (
+
+ {tier.monthlyPrice != null ? formatPrice(tier.monthlyPrice) : — }
+
+ ))}
+
+
+
+
+ Annual
+
+ -15%
+
+
+
+ {tiers.map((tier) => {
+ if (tier.monthlyPrice == null) {
+ return (
+
+ —
+
+ )
+ }
+ const fullYear = tier.monthlyPrice * 12
+ const discountedYear = fullYear * (1 - ANNUAL_DISCOUNT)
+ return (
+
+ {formatPrice(fullYear)}
+ {formatPrice(discountedYear)}
+
+ )
+ })}
+
+
+ Lifetime
+ {tiers.map((tier) => (
+
+ {tier.lifetime ?? — }
+
+ ))}
+
+
+
+ {features.map((feature, i) => (
+
+ {feature.label}
+ {feature.tiers.map((included, j) => {
+ const checkBackgroundColor = tiers[j].color.replace('text-', 'bg-')
+
+ return (
+
+ {included ? (
+
+ ✓
+
+ ) : (
+ —
+ )}
+
+ )
+ })}
+
+ ))}
+
+
+
+
+ dispatch(openUpgradeModalWithTier(tier.tierId))}
+ className={cn(
+ 'w-full cursor-pointer rounded border-2 px-4 py-2.5 text-base font-semibold transition-colors',
+ tier.buttonStyle
+ )}
+ >
+ {tier.buttonText}
+
+
+ ))}
+
+
+
+
+ {tiers.map((tier) => (
+
+
{tier.name}
+
+ {/* Pricing */}
+
+ {tier.monthlyPrice != null && (
+
+ Monthly: {' '}
+ {formatPrice(tier.monthlyPrice)}
+
+ )}
+ {tier.monthlyPrice != null && (
+
+ Annual: {' '}
+ {formatPrice(tier.monthlyPrice * 12)}
+
+ {formatPrice(tier.monthlyPrice * 12 * (1 - ANNUAL_DISCOUNT))}
+
+
+ -15%
+
+
+ )}
+ {tier.lifetime && (
+
+ Lifetime: {tier.lifetime}
+
+ )}
+
+
dispatch(openUpgradeModalWithTier(tier.tierId))}
+ className={cn(
+ 'mt-4 w-full cursor-pointer rounded border-2 px-4 py-2.5 text-lg font-semibold transition-colors',
+ tier.buttonStyle
+ )}
+ >
+ {tier.buttonText}
+
+
+ {features.map((feature) => {
+ const tierIndex = tiers.findIndex((t) => t.name === tier.name)
+ const included = feature.tiers[tierIndex]
+ return (
+
+
+ {included ? '✓' : '—'}
+
+ {feature.label}
+
+ )
+ })}
+
+
+ ))}
+
+
+ {/* Hero */}
+
+
+ Do more, with Grails Pro
+
+
+ Supercharge your ENS experience with premium tools, analytics, and exclusive access.
+
+
+
+ )
+}
+
+export default ProPage
diff --git a/src/components/home/pricingTiers.tsx b/src/components/home/pricingTiers.tsx
new file mode 100644
index 00000000..ca7ab306
--- /dev/null
+++ b/src/components/home/pricingTiers.tsx
@@ -0,0 +1,169 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { useAppDispatch } from '@/state/hooks'
+import { openUpgradeModalWithTier } from '@/state/reducers/modals/upgradeModal'
+import { cn } from '@/utils/tailwind'
+
+const tiers = [
+ {
+ tierId: 1,
+ name: 'Plus',
+ monthlyPrice: 19.99,
+ buttonText: 'Enroll',
+ borderColor: 'border-white',
+ nameColor: 'text-white',
+ priceColor: 'text-white',
+ buttonStyle: 'border-white text-white hover:bg-white/10',
+ features: [
+ 'Bulk Offers',
+ 'Name views info',
+ 'AI recommended search',
+ 'Customizable dashboard',
+ 'Multiple watchlists',
+ 'Profile views info',
+ 'Filter/Sort by google metrics',
+ ],
+ },
+ {
+ tierId: 2,
+ name: 'PRO',
+ monthlyPrice: 49.99,
+ buttonText: 'Become a PRO user',
+ borderColor: 'border-primary',
+ nameColor: 'text-primary',
+ priceColor: 'text-primary',
+ buttonStyle: 'border-primary text-primary hover:bg-primary/10',
+ features: ['Everything in Plus', 'Exclusive new feature notifications', 'Customizable dashboard'],
+ },
+ {
+ tierId: 3,
+ name: 'Gold',
+ monthlyPrice: 99.99,
+ buttonText: 'Get Gold',
+ borderColor: 'border-amber-500',
+ nameColor: 'text-amber-500',
+ priceColor: 'text-amber-500',
+ buttonStyle: 'border-amber-500 text-amber-500 hover:bg-amber-500/10',
+ features: ['Everything in Plus', 'Everything in PRO', 'Exclusive Grails Whales Telegram'],
+ },
+]
+
+type BillingPeriod = 'monthly' | 'yearly'
+
+const PricingTiers = () => {
+ const dispatch = useAppDispatch()
+ const [billing, setBilling] = useState('monthly')
+
+ const isYearly = billing === 'yearly'
+
+ const ANNUAL_DISCOUNT = 0.15
+
+ const getDisplayPrice = (monthlyPrice: number) => {
+ if (isYearly) {
+ // 15% off yearly: (monthly * 12) * 0.85 / 12
+ return ((monthlyPrice * 12 * (1 - ANNUAL_DISCOUNT)) / 12).toFixed(2)
+ }
+ return monthlyPrice.toFixed(2)
+ }
+
+ const getYearlyTotal = (monthlyPrice: number) => {
+ return (monthlyPrice * 12 * (1 - ANNUAL_DISCOUNT)).toFixed(2)
+ }
+
+ const getOriginalYearlyTotal = (monthlyPrice: number) => {
+ return (monthlyPrice * 12).toFixed(2)
+ }
+
+ return (
+
+
+ Do more, with Grails Pro
+
+
+ {/* Billing toggle */}
+
+
+
setBilling('monthly')}
+ className={`relative z-10 w-1/2 cursor-pointer justify-center rounded-full px-5 py-2 text-lg font-semibold transition-colors ${
+ !isYearly ? 'text-background' : 'text-neutral hover:text-white'
+ }`}
+ >
+ Monthly
+
+
setBilling('yearly')}
+ className={`relative z-10 flex w-1/2 cursor-pointer items-center justify-center gap-2 rounded-full px-5 py-2 text-lg font-semibold transition-colors ${
+ isYearly ? 'text-background' : 'text-neutral hover:text-white'
+ }`}
+ >
+ Yearly
+
+ SAVE 15%
+
+
+
+
+
+
+
+ {tiers.map((tier) => (
+
+
{tier.name}
+
+
+ {isYearly &&
${tier.monthlyPrice.toFixed(2)}/mo
}
+
+ ${getDisplayPrice(tier.monthlyPrice)} {' '}
+ per Month
+
+ {isYearly && (
+
+ ${getOriginalYearlyTotal(tier.monthlyPrice)} {' '}
+ ${getYearlyTotal(tier.monthlyPrice)}/year
+
+ )}
+
+
+
dispatch(openUpgradeModalWithTier(tier.tierId))}
+ className={`mt-4 w-full cursor-pointer rounded border-2 px-4 py-2 font-semibold transition-colors ${tier.buttonStyle}`}
+ >
+ {tier.buttonText}
+
+
+ {tier.features.map((feature) => (
+
+ {feature}
+
+ ))}
+
+
+ ))}
+
+
+
+ See all plans & compare features →
+
+
= ({ onClose, domains }) => {
+ const { createBulkOffer, isLoading } = useSeaportContext()
+ const { address } = useAccount()
+
+ const [status, setStatus] = useState('review')
+ const [errorMessage, setErrorMessage] = useState(null)
+ const [showDatePicker, setShowDatePicker] = useState(false)
+ const [showIndividualPrices, setShowIndividualPrices] = useState(false)
+ const [currency, setCurrency] = useState<'WETH' | 'USDC'>('WETH')
+ const [defaultPrice, setDefaultPrice] = useState('')
+ const [individualPrices, setIndividualPrices] = useState>(new Map())
+ const [resultData, setResultData] = useState<{ created: number; failed: number } | null>(null)
+
+ const currentTimestamp = useMemo(() => Math.floor(Date.now() / 1000), [])
+ const [expiryDate, setExpiryDate] = useState(currentTimestamp + DAY_IN_SECONDS * 7)
+
+ const durationOptions: DropdownOption[] = [
+ { value: currentTimestamp + DAY_IN_SECONDS, label: '1 Day' },
+ { value: currentTimestamp + DAY_IN_SECONDS * 7, label: '1 Week' },
+ { value: currentTimestamp + DAY_IN_SECONDS * 30, label: '1 Month' },
+ { value: currentTimestamp + DAY_IN_SECONDS * 90, label: '3 Months' },
+ { value: 0, label: 'Custom' },
+ ]
+
+ const currencyOptions: DropdownOption[] = [
+ { value: 'WETH', label: 'WETH (Wrapped Ether)', icon: WrappedEtherIcon },
+ { value: 'USDC', label: 'USDC (USD Coin)', icon: UsdcIcon },
+ ]
+
+ const { data: wethBalance } = useBalance({
+ address,
+ token: WETH_ADDRESS as `0x${string}`,
+ chainId: mainnet.id,
+ })
+
+ const { data: usdcBalance } = useBalance({
+ address,
+ token: USDC_ADDRESS as `0x${string}`,
+ chainId: mainnet.id,
+ })
+
+ const totalCost = useMemo(() => {
+ let total = 0
+ for (const domain of domains) {
+ total += individualPrices.get(domain.name) ?? (typeof defaultPrice === 'number' ? defaultPrice : 0)
+ }
+ return total
+ }, [domains, defaultPrice, individualPrices])
+
+ const hasSufficientBalance = useMemo(() => {
+ if (!totalCost) return true
+ const selectedBalance = currency === 'WETH' ? wethBalance : usdcBalance
+ if (!selectedBalance) return false
+ const decimals = TOKEN_DECIMALS[currency]
+ const costInWei = parseUnits(totalCost.toString(), decimals)
+ return selectedBalance.value >= costInWei
+ }, [totalCost, currency, wethBalance, usdcBalance])
+
+ const currentBalanceFormatted = useMemo(() => {
+ const selectedBalance = currency === 'WETH' ? wethBalance : usdcBalance
+ if (!selectedBalance) return '0'
+ const decimals = TOKEN_DECIMALS[currency]
+ const balance = Number(selectedBalance.value) / Math.pow(10, decimals)
+ return balance.toFixed(6)
+ }, [currency, wethBalance, usdcBalance])
+
+ const canSubmit = typeof defaultPrice === 'number' && defaultPrice > 0 && expiryDate > 0 && hasSufficientBalance
+
+ const handleSubmit = async () => {
+ if (!canSubmit) return
+
+ setStatus('signing')
+ setErrorMessage(null)
+
+ try {
+ const result = await createBulkOffer({
+ domains,
+ price: defaultPrice as number,
+ prices: individualPrices.size > 0 ? individualPrices : undefined,
+ currency,
+ expiryDate,
+ })
+
+ setResultData({ created: result.created, failed: result.failed })
+ setStatus('success')
+ } catch (err: any) {
+ setErrorMessage(err.message || 'Failed to create bulk offers')
+ setStatus('error')
+ }
+ }
+
+ const isInteracting = status === 'signing' || status === 'submitting' || isLoading
+
+ return (
+ {
+ if (isInteracting) return
+ onClose()
+ }}
+ className='fixed inset-0 z-50 flex min-h-[100dvh] w-screen items-end justify-center bg-black/40 backdrop-blur-sm transition-all duration-250 md:items-start md:overflow-y-auto md:p-4 md:py-[5vh] starting:translate-y-[100vh] md:starting:translate-y-0'
+ >
+
e.stopPropagation()}
+ className='border-tertiary bg-background relative mx-auto flex max-h-[calc(100dvh-80px)] w-full flex-col gap-2 overflow-y-auto border-t p-4 md:max-h-none md:max-w-lg md:rounded-md md:border-2 md:p-6'
+ >
+ {/* Header */}
+
+
Bulk Offer
+
+
+ {status === 'success' ? (
+ <>
+
+
+
+
+ {resultData?.created} Offer{resultData?.created !== 1 ? 's' : ''} Created!
+
+ {resultData && resultData.failed > 0 && (
+
+ {resultData.failed} offer{resultData.failed !== 1 ? 's' : ''} failed
+
+ )}
+
+
+ Close
+
+
+ ) : status === 'error' ? (
+ <>
+
+
Error
+
{errorMessage}
+
+
+
setStatus('review')} className='w-full'>
+ Try Again
+
+
+ Close
+
+
+
+ ) : (
+
+ {/* Currency */}
+
+ setCurrency(value as 'WETH' | 'USDC')}
+ />
+
+
+ {/* Duration */}
+
+
{
+ setExpiryDate(Number(value))
+ if (Number(value) === 0) setShowDatePicker(true)
+ }}
+ />
+ {expiryDate === 0 && showDatePicker && (
+
+ setExpiryDate(timestamp)}
+ onClose={() => setShowDatePicker(false)}
+ className='w-full'
+ />
+
+ )}
+ {
+ setExpiryDate(0)
+ setShowDatePicker(true)
+ }}
+ className='text-primary mx-auto flex cursor-pointer flex-row items-center gap-2 transition-opacity hover:opacity-80'
+ >
+ Select a custom date
+
+
+
+ {/* Default Price */}
+
+
{
+ const value = e.target.value
+ if (value === '') setDefaultPrice('')
+ else setDefaultPrice(Number(value))
+ }}
+ placeholder='0.01'
+ min={0}
+ step={0.001}
+ labelClassName='min-w-[110px]!'
+ suffix={currency}
+ />
+
+
+ Balance: {currentBalanceFormatted} {currency}
+
+
+
+
+
+ {/* Individual Prices Toggle */}
+
setShowIndividualPrices(!showIndividualPrices)}
+ className='text-md bg-secondary hover:bg-tertiary border-tertiary flex w-full cursor-pointer items-center justify-between gap-2 rounded-md border px-3 py-2 transition-colors'
+ >
+ Edit offer prices
+
+
+
+ {/* Individual Price Overrides */}
+ {showIndividualPrices && (
+
+ {domains.map((domain) => (
+
+
+ ))}
+
+ )}
+
+
+ {/* Total */}
+
+
Total
+
+ {totalCost.toFixed(6)} {currency}
+
+
+
+ {/* Status message during signing */}
+ {status === 'signing' && (
+
+
+
Sign bulk offer for {domains.length} names...
+
+ )}
+
+ {/* Actions */}
+
+
+ {!hasSufficientBalance
+ ? `Insufficient ${currency} Balance`
+ : isInteracting
+ ? 'Processing...'
+ : `Make ${domains.length} Offer${domains.length !== 1 ? 's' : ''}`}
+
+
+ Close
+
+
+
+ )}
+
+
= ({ isOpen, onClose }) => {
// telegramUsername,
// setTelegramUsername,
ensProfile,
+ subscription,
+ isProSubscription,
+ hasActiveSubscription,
hasChanges,
isEmailVerified,
isEmailValid,
@@ -46,6 +52,7 @@ const SettingsModal: React.FC = ({ isOpen, onClose }) => {
setNotifyOnOfferReceivedValue,
} = useSettings()
const { userAddress } = useUserContext()
+ const dispatch = useAppDispatch()
if (!userAddress) return null
@@ -96,6 +103,47 @@ const SettingsModal: React.FC = ({ isOpen, onClose }) => {
+ {/* Subscription Indicator */}
+ {hasActiveSubscription ? (
+