Countries & Flags

A first-class, cross-platform country primitive shared by every portal — <CountryFlag code /> and a searchable <CountrySelect />. Flags are real SVGs served first-party from the data plane (/flags/<cc>.svg), not emoji — emoji flags don't render on Windows. The contract is the ISO 3166-1 alpha-2 code from wire (249 countries).

picker

selected United States · US

sizes — one size prop (crisp SVG at any px)

14px

18px

24px

32px

48px

a wall of flags — COUNTRIES.map(c => <CountryFlag code={c.code} />)

drop a flag into any row (leaderboard / profile / holders)

#	trader	edge
1	0x71c…9f2a	+12.4
2	0x3ad…01bc	+9.8
3	0x9f0…7d31	+7.1
4	0xa42…5e60	+5.5
5	0x18e…c4a9	+4.2
6	0xff2…2210	+3.9

The countries above are illustrative. Connect doesn't yet attribute a wallet to a country — that needs a source (user self-select, or edge geo-IP via request.cf.country). This section ships the UI primitive; wiring the data is the next step.

import { CountryFlag, CountrySelect } from '@prophecy-dev/connect-react'
import { type CountryCode } from '@prophecy-dev/connect-sdk'

<CountryFlag code="US" />                 // 16px SVG, keyed off the alpha-2 code
<CountryFlag code={user.country} size={24} />

const [country, setCountry] = useState<CountryCode | null>(null)
<CountrySelect value={country} onChange={setCountry} />   // type to filter, ↑/↓ + Enter