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