diff --git a/src/App.css b/src/App.css index edd604b..4934a80 100644 --- a/src/App.css +++ b/src/App.css @@ -866,6 +866,11 @@ white-space: nowrap; } +.country-list__flag { + display: inline-block; + margin-right: 8px; +} + .country-list__bar { height: 12px; overflow: hidden; diff --git a/src/components/CountryList.js b/src/components/CountryList.js index 07722af..1ee2570 100644 --- a/src/components/CountryList.js +++ b/src/components/CountryList.js @@ -1,6 +1,11 @@ import React from 'react'; -import { formatNumber, formatPercent, getCountryName } from '../lib/formatters'; +import { + formatNumber, + formatPercent, + getCountryFlag, + getCountryName, +} from '../lib/formatters'; export default function CountryList(props) { return ( @@ -10,12 +15,20 @@ export default function CountryList(props) { const count = Number(entry[1].masternodes || 0); const share = props.enabledCount ? (count / props.enabledCount) * 100 : 0; const minimumWidth = props.minimumWidth === undefined ? 4 : props.minimumWidth; + const flag = getCountryFlag(code); return (
{formatNumber(count)} nodes - {getCountryName(code)} + + {flag ? ( + + ) : null} + {getCountryName(code)} +
diff --git a/src/lib/formatters.js b/src/lib/formatters.js index ec0478a..d651c9c 100644 --- a/src/lib/formatters.js +++ b/src/lib/formatters.js @@ -24,6 +24,31 @@ const COUNTRY_NAMES = { USA: 'United States', }; +const COUNTRY_FLAG_ALPHA2 = { + ARE: 'AE', + AUT: 'AT', + BGR: 'BG', + BRA: 'BR', + CAN: 'CA', + CYP: 'CY', + DEU: 'DE', + DNK: 'DK', + FIN: 'FI', + FRA: 'FR', + GBR: 'GB', + IND: 'IN', + ITA: 'IT', + JPN: 'JP', + LTU: 'LT', + NLD: 'NL', + NOR: 'NO', + POL: 'PL', + SGP: 'SG', + SWE: 'SE', + TUR: 'TR', + USA: 'US', +}; + export function parseNumber(value) { if (typeof value === 'number') { return Number.isFinite(value) ? value : 0; @@ -222,6 +247,22 @@ export function getCountryName(code) { return COUNTRY_NAMES[code] || code; } +export function getCountryFlag(code) { + if (code === 'IRN') { + return '🌐'; + } + + const alpha2 = COUNTRY_FLAG_ALPHA2[code]; + if (!alpha2) { + return ''; + } + + return alpha2 + .split('') + .map((letter) => String.fromCodePoint(127397 + letter.charCodeAt(0))) + .join(''); +} + export function getProposalDurationMonths(startEpoch, endEpoch) { if (!startEpoch || !endEpoch || endEpoch <= startEpoch) { return 1; diff --git a/src/lib/formatters.test.js b/src/lib/formatters.test.js index 84be928..a5d2db8 100644 --- a/src/lib/formatters.test.js +++ b/src/lib/formatters.test.js @@ -2,6 +2,7 @@ import { formatDayMonth, formatShortDate, formatUtcTime, + getCountryFlag, getCountryName, } from './formatters'; @@ -23,4 +24,11 @@ describe('country formatters', () => { expect(getCountryName('ARE')).toBe('United Arab Emirates'); expect(getCountryName('IRN')).toBe('Middle East'); }); + + test('formats country flags from alpha-3 country codes', () => { + expect(getCountryFlag('ARE')).toBe('🇦🇪'); + expect(getCountryFlag('DEU')).toBe('🇩🇪'); + expect(getCountryFlag('IRN')).toBe('🌐'); + expect(getCountryFlag('UNKNOWN')).toBe(''); + }); });