country icons added to the Account Settings.

Author: JasminDreasond

src/app/molecules/setting-phone/SettingPhone.jsx

@@ -6,6 +6,7 @@ import {
   getCountryCallingCode,
   parsePhoneNumber,
 } from 'libphonenumber-js';
+import { getFlagEmoji } from '@src/util/tools';
 
 export const SettingPhone = React.forwardRef(
   (
@@ -116,14 +117,16 @@ export const SettingPhone = React.forwardRef(
         <div className="input-group input-group-phone">
           <span className="form-phone-code input-group-text">
             <select disabled={disabled} ref={selectChange} className="form-select form-control-bg">
-              <option>??</option>
+              <option>?? 🌐</option>
               {countries.map((item, index) => (
                 <option
                   key={`${item}_${index}`}
                   value={item}
                   selected={item === country ? true : false}
                 >
                   {item}
+                  {` `}
+                  {getFlagEmoji(item)}
                 </option>
               ))}
             </select>

src/scss/index.scss

@@ -137,7 +137,7 @@ audio:not([controls]) {
     height: 44px !important;
     margin-top: 8px;
     margin-bottom: 4px;
-    width: 100px;
+    width: 80px;
     padding: 0px;
     border: 0px solid transparent;
     > .form-select {

src/util/tools.js

@@ -585,6 +585,14 @@ export function cyrb128(str) {
   return [h1 >>> 0, h2 >>> 0, h3 >>> 0, h4 >>> 0];
 }
 
+export function getFlagEmoji(countryCode) {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map((char) => 127397 + char.charCodeAt());
+  return String.fromCodePoint(...codePoints);
+}
+
 // eslint-disable-next-line no-extend-native
 Date.prototype.isValid = function () {
   // If the date object is invalid it