Add country markers to node distribution

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;

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 (
           <div key={code} className="country-list__row">
             <div className="country-list__label">
               <span className="country-list__count">{formatNumber(count)} nodes</span>
-              <strong>{getCountryName(code)}</strong>
+              <strong>
+                {flag ? (
+                  <span className="country-list__flag" aria-hidden="true">
+                    {flag}
+                  </span>
+                ) : null}
+                {getCountryName(code)}
+              </strong>
             </div>
             <div className="country-list__bar">
               <span style={{ width: `${Math.max(share, minimumWidth)}%` }} />

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;

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('');
+  });
 });