Added flag icons

.eslintrc.js

@@ -4,10 +4,7 @@ module.exports = {
     es2021: true,
     webextensions: true,
   },
-  extends: [
+  extends: ['plugin:react/recommended', 'airbnb'],
-    'plugin:react/recommended',
-    'airbnb',
-  ],
   plugins: ['react'],
   settings: {
     'import/resolver': {
@@ -34,5 +31,6 @@ module.exports = {
         jsx: 'never',
       },
     ],
+    'react/jsx-one-expression-per-line': 'off',
   },
 };

package-lock.json

@@ -5,12 +5,15 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "vytal",
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
-        "react-hot-loader": "^4.13.0"
+        "react-flagpack": "^0.1.1",
+        "react-hot-loader": "^4.13.0",
+        "react-world-flags": "^1.4.0"
       },
       "devDependencies": {
         "@babel/core": "^7.12.3",
@@ -6457,6 +6460,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/flagpack-core": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/flagpack-core/-/flagpack-core-1.1.2.tgz",
+      "integrity": "sha512-brm/LJf/xxiwRnjdThPsxaRZsbcN0fjPX4WMdKfuwJYOt3pdVw1pfP2dTBh743qqkw4CQzXTfEWjRDN0KvZ/qA=="
+    },
     "node_modules/flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -10454,6 +10462,17 @@
         "object-assign": "^4.1.1"
       }
     },
+    "node_modules/react-flagpack": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/react-flagpack/-/react-flagpack-0.1.1.tgz",
+      "integrity": "sha512-cB2IGYkYUVPAPsteBjReHFGquvnkQk0MDzHSfvvCYjh1r4kIEwr//J65JNwF0DRF+W3PiQLcw/bqDRf/6bHgSg==",
+      "dependencies": {
+        "flagpack-core": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.*"
+      }
+    },
     "node_modules/react-hot-loader": {
       "version": "4.13.0",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz",
@@ -10490,6 +10509,18 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-world-flags": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-world-flags/-/react-world-flags-1.4.0.tgz",
+      "integrity": "sha512-SkOzl/v6LYBphJNSeeQXTogAiLZN1Yy2HFx2Qjda/82MCWFimj9cenmOXASbfbKeqFbo/17M8HauY6mfzWmTDw==",
+      "dependencies": {
+        "svg-country-flags": "^1.2.7",
+        "world-countries": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14"
+      }
+    },
     "node_modules/read-chunk": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-3.2.0.tgz",
@@ -12146,6 +12177,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/svg-country-flags": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/svg-country-flags/-/svg-country-flags-1.2.10.tgz",
+      "integrity": "sha512-xrqwo0TYf/h2cfPvGpjdSuSguUbri4vNNizBnwzoZnX0xGo3O5nGJMlbYEp7NOYcnPGBm6LE2axqDWSB847bLw=="
+    },
     "node_modules/table": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
@@ -13565,6 +13601,11 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/world-countries": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/world-countries/-/world-countries-4.0.0.tgz",
+      "integrity": "sha512-LsFFYmggquj0U+i7VUaJOZYz5F4QNu+oceGw8odnyVHMT2LxYSdVncqdouOEnq1esr7yCakp9+3BZTztuSw1Pg=="
+    },
     "node_modules/wrap-ansi": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
@@ -13647,9 +13688,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "6.2.1",
+      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-      "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
       "dev": true,
       "dependencies": {
         "async-limiter": "~1.0.0"
@@ -19440,6 +19481,11 @@
         "readable-stream": "^2.0.2"
       }
     },
+    "flagpack-core": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/flagpack-core/-/flagpack-core-1.1.2.tgz",
+      "integrity": "sha512-brm/LJf/xxiwRnjdThPsxaRZsbcN0fjPX4WMdKfuwJYOt3pdVw1pfP2dTBh743qqkw4CQzXTfEWjRDN0KvZ/qA=="
+    },
     "flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -22590,6 +22636,14 @@
         }
       }
     },
+    "react-flagpack": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/react-flagpack/-/react-flagpack-0.1.1.tgz",
+      "integrity": "sha512-cB2IGYkYUVPAPsteBjReHFGquvnkQk0MDzHSfvvCYjh1r4kIEwr//J65JNwF0DRF+W3PiQLcw/bqDRf/6bHgSg==",
+      "requires": {
+        "flagpack-core": "^1.0.0"
+      }
+    },
     "react-hot-loader": {
       "version": "4.13.0",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz",
@@ -22622,6 +22676,15 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-world-flags": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/react-world-flags/-/react-world-flags-1.4.0.tgz",
+      "integrity": "sha512-SkOzl/v6LYBphJNSeeQXTogAiLZN1Yy2HFx2Qjda/82MCWFimj9cenmOXASbfbKeqFbo/17M8HauY6mfzWmTDw==",
+      "requires": {
+        "svg-country-flags": "^1.2.7",
+        "world-countries": "^4.0.0"
+      }
+    },
     "read-chunk": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-3.2.0.tgz",
@@ -24004,6 +24067,11 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg-country-flags": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/svg-country-flags/-/svg-country-flags-1.2.10.tgz",
+      "integrity": "sha512-xrqwo0TYf/h2cfPvGpjdSuSguUbri4vNNizBnwzoZnX0xGo3O5nGJMlbYEp7NOYcnPGBm6LE2axqDWSB847bLw=="
+    },
     "table": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
@@ -25127,6 +25195,11 @@
         "typical": "^5.0.0"
       }
     },
+    "world-countries": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/world-countries/-/world-countries-4.0.0.tgz",
+      "integrity": "sha512-LsFFYmggquj0U+i7VUaJOZYz5F4QNu+oceGw8odnyVHMT2LxYSdVncqdouOEnq1esr7yCakp9+3BZTztuSw1Pg=="
+    },
     "wrap-ansi": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
@@ -25196,9 +25269,9 @@
       }
     },
     "ws": {
-      "version": "6.2.1",
+      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-      "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
       "dev": true,
       "requires": {
         "async-limiter": "~1.0.0"

package.json

@@ -40,6 +40,8 @@
   "dependencies": {
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-hot-loader": "^4.13.0"
+    "react-flagpack": "^0.1.1",
+    "react-hot-loader": "^4.13.0",
+    "react-world-flags": "^1.4.0"
   }
 }

src/App.css

@@ -2,6 +2,11 @@
   font-weight: 600;
 }
 
-input {
+.itemWrap {
-  margin: 0 8px 0 0;
+  display: flex;
+  align-items: center;
+}
+
+.flagWrap {
+  margin: 0 0 0 6px;
 }

src/App.jsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import Flag from 'react-flagpack';
 import './App.css';
 
 const updateDOM = (id, text) => {
@@ -7,10 +8,13 @@ const updateDOM = (id, text) => {
 };
 
 const App = () => {
+  const [country, setCountry] = useState('US');
+
   useEffect(() => {
     fetch('http://ip-api.com/json')
       .then((response) => response.json())
       .then((data) => {
+        setCountry(data.countryCode);
         updateDOM('ipAddress', data.query);
         updateDOM('country', data.country);
         updateDOM('region', data.regionName);
@@ -22,7 +26,7 @@ const App = () => {
 
     navigator.getBattery().then((battery) => {
       updateDOM('batteryLevel', `${Math.round(battery.level * 100)}%`);
-      updateDOM('batteryStatus', `${(battery.charging) ? '' : 'not '} charging`);
+      updateDOM('batteryStatus', `${battery.charging ? '' : 'not '} charging`);
     });
 
     updateDOM('memory', `${navigator.deviceMemory}GB`);
@@ -32,17 +36,42 @@ const App = () => {
   return (
     <div className="App">
       <div className="title">Connection</div>
-      <div className="item" id="ipAddress">IP address: </div>
+      <div className="item" id="ipAddress">
-      <div className="item" id="country">Country: </div>
+        IP address:{' '}
-      <div className="item" id="region">Region: </div>
+      </div>
-      <div className="item" id="city">City: </div>
+      <div className="itemWrap">
-      <div className="item" id="provider">Provider: </div>
+        <div className="item" id="country">
+          Country:{' '}
+        </div>
+        <div className="flagWrap">
+          <Flag code={country} size="S" />
+        </div>
+      </div>
+      <div className="item" id="region">
+        Region:{' '}
+      </div>
+      <div className="item" id="city">
+        City:{' '}
+      </div>
+      <div className="item" id="provider">
+        Provider:{' '}
+      </div>
       <div className="title">Hardware</div>
-      <div className="item" id="screenSize">Screen resolution: </div>
+      <div className="item" id="screenSize">
-      <div className="item" id="batteryLevel">Battery level: </div>
+        Screen resolution:{' '}
-      <div className="item" id="batteryStatus">Battery status: </div>
+      </div>
-      <div className="item" id="memory">Device memory: </div>
+      <div className="item" id="batteryLevel">
-      <div className="item" id="cores"># of CPU cores: </div>
+        Battery level:{' '}
+      </div>
+      <div className="item" id="batteryStatus">
+        Battery status:{' '}
+      </div>
+      <div className="item" id="memory">
+        Device memory:{' '}
+      </div>
+      <div className="item" id="cores">
+        # of CPU cores:{' '}
+      </div>
     </div>
   );
 };

src/popup.css

@@ -6,7 +6,7 @@
 body {
   color: var(--text);
   background-color: var(--background);
-  font-size: 12px;
+  font-size: 14px;
   line-height: 22px;
   width: 300px;
 }