feat: easter egg modal for uninhabited countries

src/app/(mobile-ui)/dev/ds/patterns/modal/page.tsx

@@ -11,9 +11,11 @@ import { DocSection } from '../../_components/DocSection'
 import { SectionDivider } from '../../_components/SectionDivider'
 import { DocPage } from '../../_components/DocPage'
 import { CodeBlock } from '../../_components/CodeBlock'
+import EasterEggModal from '@/components/Global/EasterEggModal'
 
 export default function ModalPage() {
     const [showModal, setShowModal] = useState(false)
+    const [showEasterEgg, setShowEasterEgg] = useState(false)
     const [showActionModal, setShowActionModal] = useState(false)
     const [actionCheckbox, setActionCheckbox] = useState(false)
 
@@ -322,6 +324,43 @@ export default function ModalPage() {
                     </table>
                 </div>
             </DocSection>
+
+            <SectionDivider />
+
+            {/* Easter Egg Modal */}
+            <DocSection title="Easter Egg Modal">
+                <DocSection.Content>
+                    <p className="text-sm text-grey-1">
+                        Fun modal shown when users tap uninhabited/weird countries (Antarctica, Bouvet Island, etc.) in
+                        the country selector. Uses base Modal with an image and humorous caption.
+                    </p>
+
+                    <div>
+                        <Button variant="stroke" onClick={() => setShowEasterEgg(true)}>
+                            Open Easter Egg (Antarctica)
+                        </Button>
+                        <EasterEggModal
+                            visible={showEasterEgg}
+                            onClose={() => setShowEasterEgg(false)}
+                            countryCode="AQ"
+                        />
+                    </div>
+                </DocSection.Content>
+                <DocSection.Code>
+                    <CodeBlock
+                        label="Import"
+                        code={`import EasterEggModal from '@/components/Global/EasterEggModal'`}
+                    />
+                    <CodeBlock
+                        label="Usage"
+                        code={`<EasterEggModal
+  visible={showEasterEgg}
+  onClose={() => setShowEasterEgg(false)}
+  countryCode="AQ"
+/>`}
+                    />
+                </DocSection.Code>
+            </DocSection>
         </DocPage>
     )
 }

src/components/Common/CountryList.tsx

@@ -13,6 +13,7 @@ import { getCardPosition } from '../Global/Card/card.utils'
 import { useGeoLocation } from '@/hooks/useGeoLocation'
 import { CountryListSkeleton } from './CountryListSkeleton'
 import AvatarWithBadge from '../Profile/AvatarWithBadge'
+import EasterEggModal, { EASTER_EGG_COUNTRIES } from '@/components/Global/EasterEggModal'
 import StatusBadge from '../Global/Badges/StatusBadge'
 import Loading from '../Global/Loading'
 import { useSearchParams } from 'next/navigation'
@@ -69,6 +70,9 @@ export const CountryList = ({
     const [clickedCountryId, setClickedCountryId] = useState<string | null>(null)
     const { isBridgeSupportedCountry: isBridgeSupportedCountryHook } = useIdentityVerification()
 
+    // easter egg modal state
+    const [easterEggCountry, setEasterEggCountry] = useState<string | null>(null)
+
     const supportedCountries = countryData.filter((country) => country.type === 'country')
 
     // sort countries based on user's geo location, fallback to alphabetical order
@@ -179,18 +183,26 @@ export const CountryList = ({
                                         customRight ??
                                         (showLoadingState && clickedCountryId === country.id ? (
                                             <Loading />
-                                        ) : !isSupported ? (
+                                        ) : !isSupported && !EASTER_EGG_COUNTRIES[country.id] ? (
                                             <StatusBadge status="soon" />
                                         ) : undefined)
                                     }
                                     description={country.currency}
                                     onClick={() => {
+                                        // check for easter egg countries first
+                                        if (EASTER_EGG_COUNTRIES[country.id]) {
+                                            setEasterEggCountry(country.id)
+                                            return
+                                        }
                                         // set loading state immediately for visual feedback
                                         setClickedCountryId(country.id)
                                         onCountryClick(country)
                                     }}
                                     position={position}
-                                    isDisabled={!isSupported || clickedCountryId === country.id}
+                                    isDisabled={
+                                        (!isSupported && !EASTER_EGG_COUNTRIES[country.id]) ||
+                                        clickedCountryId === country.id
+                                    }
                                     leftIcon={
                                         <div className="relative h-8 w-8">
                                             <Image
@@ -220,6 +232,13 @@ export const CountryList = ({
                     )}
                 </div>
             )}
+
+            {/* Easter egg modal for weird/uninhabited countries */}
+            <EasterEggModal
+                visible={!!easterEggCountry}
+                onClose={() => setEasterEggCountry(null)}
+                countryCode={easterEggCountry ?? ''}
+            />
         </div>
     )
 }

src/components/Global/EasterEggModal/index.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import ActionModal from '@/components/Global/ActionModal'
+import Image from 'next/image'
+
+export interface EasterEggCountryConfig {
+    image: string
+    caption: string
+    subtitle: string
+}
+
+/**
+ * Easter egg countries — these places have no banking infrastructure,
+ * so we show a fun modal instead of the normal flow.
+ */
+export const EASTER_EGG_COUNTRIES: Record<string, EasterEggCountryConfig> = {
+    AQ: {
+        image: '/easter-eggs/antarctica.png',
+        caption: '🐧 No banks here, only penguins!',
+        subtitle: "Antarctica isn't a real country... yet",
+    },
+    // More countries can be added here later:
+    // BV: { image: '/easter-eggs/bouvet.png', caption: '...', subtitle: '...' },
+    // CX: { image: '/easter-eggs/christmas.png', caption: '...', subtitle: '...' },
+    // CC: { image: '/easter-eggs/cocos.png', caption: '...', subtitle: '...' },
+    // GS: { image: '/easter-eggs/southgeorgia.png', caption: '...', subtitle: '...' },
+    // HM: { image: '/easter-eggs/heard.png', caption: '...', subtitle: '...' },
+    // PN: { image: '/easter-eggs/pitcairn.png', caption: '...', subtitle: '...' },
+    // TK: { image: '/easter-eggs/tokelau.png', caption: '...', subtitle: '...' },
+}
+
+interface EasterEggModalProps {
+    visible: boolean
+    onClose: () => void
+    countryCode: string
+}
+
+const EasterEggModal = ({ visible, onClose, countryCode }: EasterEggModalProps) => {
+    const config = EASTER_EGG_COUNTRIES[countryCode]
+    if (!config) return null
+
+    return (
+        <ActionModal
+            visible={visible}
+            onClose={onClose}
+            title={config.caption}
+            description={config.subtitle}
+            icon={
+                <Image
+                    src={config.image}
+                    alt="Easter egg"
+                    width={400}
+                    height={400}
+                    className="h-auto w-full"
+                    priority
+                />
+            }
+            iconContainerClassName="size-auto rounded-none bg-transparent w-full"
+            ctas={[
+                {
+                    text: 'Got it',
+                    variant: 'stroke',
+                    onClick: onClose,
+                },
+            ]}
+        />
+    )
+}
+
+export default EasterEggModal