From 29ceaea8c5c57dc34b9c61967560fa56d2cfaab9 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Thu, 10 Oct 2024 10:34:59 +0200 Subject: [PATCH 1/2] Add peers page --- src/components/Peers/PeerCountryCell.tsx | 50 + src/components/Peers/countries.ts | 1312 ++++++++++++++++++++++ src/components/Peers/types.ts | 4 + src/routeTree.gen.ts | 26 + src/routes/dashboard.tsx | 10 + src/routes/dashboard/peers.css | 10 + src/routes/dashboard/peers.tsx | 98 ++ 7 files changed, 1510 insertions(+) create mode 100644 src/components/Peers/PeerCountryCell.tsx create mode 100644 src/components/Peers/countries.ts create mode 100644 src/components/Peers/types.ts create mode 100644 src/routes/dashboard/peers.css create mode 100644 src/routes/dashboard/peers.tsx diff --git a/src/components/Peers/PeerCountryCell.tsx b/src/components/Peers/PeerCountryCell.tsx new file mode 100644 index 0000000..9877c73 --- /dev/null +++ b/src/components/Peers/PeerCountryCell.tsx @@ -0,0 +1,50 @@ +import { Cell } from "@codex-storage/marketplace-ui-components"; +import { useEffect, useState } from "react"; +import { PeerPin } from "./types"; +import { countriesCoordinates } from "./countries"; + +export type Props = { + address: string; + onPinAdd: (pin: PeerPin) => void; +}; + +const getFlagEmoji = (countryCode: string) => { + const codePoints = countryCode + .toUpperCase() + .split("") + .map((char) => 127397 + char.charCodeAt(0)); + return String.fromCodePoint(...codePoints); +}; + +export function PeerCountryCell({ address, onPinAdd }: Props) { + const [country, setCountry] = useState(""); + + useEffect(() => { + const [ip] = address.split(":"); + + console.info(ip); + + fetch("https://api.country.is/" + ip) + .then((res) => res.json()) + .then((json) => { + setCountry(json.country); + + const coordinate = countriesCoordinates.find( + (c) => c.iso === json.country + ); + + if (coordinate) { + onPinAdd({ + lat: parseFloat(coordinate.lat), + lng: parseFloat(coordinate.lng), + }); + } + }); + }, [address]); + + return ( + + {getFlagEmoji(country)} {address} + + ); +} diff --git a/src/components/Peers/countries.ts b/src/components/Peers/countries.ts new file mode 100644 index 0000000..4c8ec26 --- /dev/null +++ b/src/components/Peers/countries.ts @@ -0,0 +1,1312 @@ +export const countriesCoordinates = [ + { + "iso": "AF", + "lat": "33", + "lng": "65" + }, + { + "iso": "AX", + "lat": "60.116667", + "lng": "19.9" + }, + { + "iso": "AL", + "lat": "41", + "lng": "20" + }, + { + "iso": "DZ", + "lat": "28", + "lng": "3" + }, + { + "iso": "AS", + "lat": "-14.3333", + "lng": "-170" + }, + { + "iso": "AD", + "lat": "42.5", + "lng": "1.6" + }, + { + "iso": "AO", + "lat": "-12.5", + "lng": "18.5" + }, + { + "iso": "AI", + "lat": "18.25", + "lng": "-63.1667" + }, + { + "iso": "AQ", + "lat": "-90", + "lng": "0" + }, + { + "iso": "AG", + "lat": "17.05", + "lng": "-61.8" + }, + { + "iso": "AR", + "lat": "-34", + "lng": "-64" + }, + { + "iso": "AM", + "lat": "40", + "lng": "45" + }, + { + "iso": "AW", + "lat": "12.5", + "lng": "-69.9667" + }, + { + "iso": "AU", + "lat": "-27", + "lng": "133" + }, + { + "iso": "AT", + "lat": "47.3333", + "lng": "13.3333" + }, + { + "iso": "AZ", + "lat": "40.5", + "lng": "47.5" + }, + { + "iso": "BS", + "lat": "24.25", + "lng": "-76" + }, + { + "iso": "BH", + "lat": "26", + "lng": "50.55" + }, + { + "iso": "BD", + "lat": "24", + "lng": "90" + }, + { + "iso": "BB", + "lat": "13.1667", + "lng": "-59.5333" + }, + { + "iso": "BY", + "lat": "53", + "lng": "28" + }, + { + "iso": "BE", + "lat": "50.8333", + "lng": "4" + }, + { + "iso": "BZ", + "lat": "17.25", + "lng": "-88.75" + }, + { + "iso": "BJ", + "lat": "9.5", + "lng": "2.25" + }, + { + "iso": "BM", + "lat": "32.3333", + "lng": "-64.75" + }, + { + "iso": "BT", + "lat": "27.5", + "lng": "90.5" + }, + { + "iso": "Plurinational State of", + "lat": "68", + "lng": "-17" + }, + { + "iso": "BO", + "lat": "-17", + "lng": "-65" + }, + { + "iso": "Sint Eustatius and Saba", + "lat": "535", + "lng": "12.183333" + }, + { + "iso": "BA", + "lat": "44", + "lng": "18" + }, + { + "iso": "BW", + "lat": "-22", + "lng": "24" + }, + { + "iso": "BV", + "lat": "-54.4333", + "lng": "3.4" + }, + { + "iso": "BR", + "lat": "-10", + "lng": "-55" + }, + { + "iso": "IO", + "lat": "-6", + "lng": "71.5" + }, + { + "iso": "BN", + "lat": "4.5", + "lng": "114.6667" + }, + { + "iso": "BN", + "lat": "4.5", + "lng": "114.6667" + }, + { + "iso": "BG", + "lat": "43", + "lng": "25" + }, + { + "iso": "BF", + "lat": "13", + "lng": "-2" + }, + { + "iso": "MM", + "lat": "22", + "lng": "98" + }, + { + "iso": "BI", + "lat": "-3.5", + "lng": "30" + }, + { + "iso": "KH", + "lat": "13", + "lng": "105" + }, + { + "iso": "CM", + "lat": "6", + "lng": "12" + }, + { + "iso": "CA", + "lat": "60", + "lng": "-95" + }, + { + "iso": "CV", + "lat": "16", + "lng": "-24" + }, + { + "iso": "KY", + "lat": "19.5", + "lng": "-80.5" + }, + { + "iso": "CF", + "lat": "7", + "lng": "21" + }, + { + "iso": "TD", + "lat": "15", + "lng": "19" + }, + { + "iso": "CL", + "lat": "-30", + "lng": "-71" + }, + { + "iso": "CN", + "lat": "35", + "lng": "105" + }, + { + "iso": "CX", + "lat": "-10.5", + "lng": "105.6667" + }, + { + "iso": "CC", + "lat": "-12.5", + "lng": "96.8333" + }, + { + "iso": "CO", + "lat": "4", + "lng": "-72" + }, + { + "iso": "KM", + "lat": "-12.1667", + "lng": "44.25" + }, + { + "iso": "the Democratic Republic of the", + "lat": "180", + "lng": "0" + }, + { + "iso": "CG", + "lat": "-1", + "lng": "15" + }, + { + "iso": "CK", + "lat": "-21.2333", + "lng": "-159.7667" + }, + { + "iso": "CR", + "lat": "10", + "lng": "-84" + }, + { + "iso": "CI", + "lat": "8", + "lng": "-5" + }, + { + "iso": "HR", + "lat": "45.1667", + "lng": "15.5" + }, + { + "iso": "CU", + "lat": "21.5", + "lng": "-80" + }, + { + "iso": "CW", + "lat": "12.166667", + "lng": "-68.966667" + }, + { + "iso": "CY", + "lat": "35", + "lng": "33" + }, + { + "iso": "CZ", + "lat": "49.75", + "lng": "15.5" + }, + { + "iso": "DK", + "lat": "56", + "lng": "10" + }, + { + "iso": "DJ", + "lat": "11.5", + "lng": "43" + }, + { + "iso": "DM", + "lat": "15.4167", + "lng": "-61.3333" + }, + { + "iso": "DO", + "lat": "19", + "lng": "-70.6667" + }, + { + "iso": "EC", + "lat": "-2", + "lng": "-77.5" + }, + { + "iso": "EG", + "lat": "27", + "lng": "30" + }, + { + "iso": "SV", + "lat": "13.8333", + "lng": "-88.9167" + }, + { + "iso": "GQ", + "lat": "2", + "lng": "10" + }, + { + "iso": "ER", + "lat": "15", + "lng": "39" + }, + { + "iso": "EE", + "lat": "59", + "lng": "26" + }, + { + "iso": "ET", + "lat": "8", + "lng": "38" + }, + { + "iso": "FK", + "lat": "-51.75", + "lng": "-59" + }, + { + "iso": "FO", + "lat": "62", + "lng": "-7" + }, + { + "iso": "FJ", + "lat": "-18", + "lng": "175" + }, + { + "iso": "FI", + "lat": "64", + "lng": "26" + }, + { + "iso": "FR", + "lat": "46", + "lng": "2" + }, + { + "iso": "GF", + "lat": "4", + "lng": "-53" + }, + { + "iso": "PF", + "lat": "-15", + "lng": "-140" + }, + { + "iso": "TF", + "lat": "-43", + "lng": "67" + }, + { + "iso": "GA", + "lat": "-1", + "lng": "11.75" + }, + { + "iso": "GM", + "lat": "13.4667", + "lng": "-16.5667" + }, + { + "iso": "GE", + "lat": "42", + "lng": "43.5" + }, + { + "iso": "DE", + "lat": "51", + "lng": "9" + }, + { + "iso": "GH", + "lat": "8", + "lng": "-2" + }, + { + "iso": "GI", + "lat": "36.1833", + "lng": "-5.3667" + }, + { + "iso": "GR", + "lat": "39", + "lng": "22" + }, + { + "iso": "GL", + "lat": "72", + "lng": "-40" + }, + { + "iso": "GD", + "lat": "12.1167", + "lng": "-61.6667" + }, + { + "iso": "GP", + "lat": "16.25", + "lng": "-61.5833" + }, + { + "iso": "GU", + "lat": "13.4667", + "lng": "144.7833" + }, + { + "iso": "GT", + "lat": "15.5", + "lng": "-90.25" + }, + { + "iso": "GG", + "lat": "49.5", + "lng": "-2.56" + }, + { + "iso": "GW", + "lat": "12", + "lng": "-15" + }, + { + "iso": "GN", + "lat": "11", + "lng": "-10" + }, + { + "iso": "GY", + "lat": "5", + "lng": "-59" + }, + { + "iso": "HT", + "lat": "19", + "lng": "-72.4167" + }, + { + "iso": "HM", + "lat": "-53.1", + "lng": "72.5167" + }, + { + "iso": "VA", + "lat": "41.9", + "lng": "12.45" + }, + { + "iso": "HN", + "lat": "15", + "lng": "-86.5" + }, + { + "iso": "HK", + "lat": "22.25", + "lng": "114.1667" + }, + { + "iso": "HU", + "lat": "47", + "lng": "20" + }, + { + "iso": "IS", + "lat": "65", + "lng": "-18" + }, + { + "iso": "IN", + "lat": "20", + "lng": "77" + }, + { + "iso": "ID", + "lat": "-5", + "lng": "120" + }, + { + "iso": "Islamic Republic of", + "lat": "364", + "lng": "32" + }, + { + "iso": "IQ", + "lat": "33", + "lng": "44" + }, + { + "iso": "IE", + "lat": "53", + "lng": "-8" + }, + { + "iso": "IM", + "lat": "54.23", + "lng": "-4.55" + }, + { + "iso": "IL", + "lat": "31.5", + "lng": "34.75" + }, + { + "iso": "IT", + "lat": "42.8333", + "lng": "12.8333" + }, + { + "iso": "CI", + "lat": "8", + "lng": "-5" + }, + { + "iso": "JM", + "lat": "18.25", + "lng": "-77.5" + }, + { + "iso": "JP", + "lat": "36", + "lng": "138" + }, + { + "iso": "JE", + "lat": "49.21", + "lng": "-2.13" + }, + { + "iso": "JO", + "lat": "31", + "lng": "36" + }, + { + "iso": "KZ", + "lat": "48", + "lng": "68" + }, + { + "iso": "KE", + "lat": "1", + "lng": "38" + }, + { + "iso": "KI", + "lat": "1.4167", + "lng": "173" + }, + { + "iso": "Democratic People's Republic of", + "lat": "408", + "lng": "40" + }, + { + "iso": "Republic of", + "lat": "410", + "lng": "37" + }, + { + "iso": "XK", + "lat": "42.583333", + "lng": "21" + }, + { + "iso": "KW", + "lat": "29.3375", + "lng": "47.6581" + }, + { + "iso": "KG", + "lat": "41", + "lng": "75" + }, + { + "iso": "LA", + "lat": "18", + "lng": "105" + }, + { + "iso": "LV", + "lat": "57", + "lng": "25" + }, + { + "iso": "LB", + "lat": "33.8333", + "lng": "35.8333" + }, + { + "iso": "LS", + "lat": "-29.5", + "lng": "28.5" + }, + { + "iso": "LR", + "lat": "6.5", + "lng": "-9.5" + }, + { + "iso": "LY", + "lat": "25", + "lng": "17" + }, + { + "iso": "LY", + "lat": "25", + "lng": "17" + }, + { + "iso": "LI", + "lat": "47.1667", + "lng": "9.5333" + }, + { + "iso": "LT", + "lat": "56", + "lng": "24" + }, + { + "iso": "LU", + "lat": "49.75", + "lng": "6.1667" + }, + { + "iso": "MO", + "lat": "22.1667", + "lng": "113.55" + }, + { + "iso": "the former Yugoslav Republic of", + "lat": "807", + "lng": "41.8333" + }, + { + "iso": "MG", + "lat": "-20", + "lng": "47" + }, + { + "iso": "MW", + "lat": "-13.5", + "lng": "34" + }, + { + "iso": "MY", + "lat": "2.5", + "lng": "112.5" + }, + { + "iso": "MV", + "lat": "3.25", + "lng": "73" + }, + { + "iso": "ML", + "lat": "17", + "lng": "-4" + }, + { + "iso": "MT", + "lat": "35.8333", + "lng": "14.5833" + }, + { + "iso": "MH", + "lat": "9", + "lng": "168" + }, + { + "iso": "MQ", + "lat": "14.6667", + "lng": "-61" + }, + { + "iso": "MR", + "lat": "20", + "lng": "-12" + }, + { + "iso": "MU", + "lat": "-20.2833", + "lng": "57.55" + }, + { + "iso": "YT", + "lat": "-12.8333", + "lng": "45.1667" + }, + { + "iso": "MX", + "lat": "23", + "lng": "-102" + }, + { + "iso": "Federated States of", + "lat": "583", + "lng": "6.9167" + }, + { + "iso": "Republic of", + "lat": "498", + "lng": "47" + }, + { + "iso": "MC", + "lat": "43.7333", + "lng": "7.4" + }, + { + "iso": "MN", + "lat": "46", + "lng": "105" + }, + { + "iso": "ME", + "lat": "42", + "lng": "19" + }, + { + "iso": "MS", + "lat": "16.75", + "lng": "-62.2" + }, + { + "iso": "MA", + "lat": "32", + "lng": "-5" + }, + { + "iso": "MZ", + "lat": "-18.25", + "lng": "35" + }, + { + "iso": "MM", + "lat": "22", + "lng": "98" + }, + { + "iso": "NA", + "lat": "-22", + "lng": "17" + }, + { + "iso": "NR", + "lat": "-0.5333", + "lng": "166.9167" + }, + { + "iso": "NP", + "lat": "28", + "lng": "84" + }, + { + "iso": "AN", + "lat": "12.25", + "lng": "-68.75" + }, + { + "iso": "NL", + "lat": "52.5", + "lng": "5.75" + }, + { + "iso": "NC", + "lat": "-21.5", + "lng": "165.5" + }, + { + "iso": "NZ", + "lat": "-41", + "lng": "174" + }, + { + "iso": "NI", + "lat": "13", + "lng": "-85" + }, + { + "iso": "NE", + "lat": "16", + "lng": "8" + }, + { + "iso": "NG", + "lat": "10", + "lng": "8" + }, + { + "iso": "NU", + "lat": "-19.0333", + "lng": "-169.8667" + }, + { + "iso": "NF", + "lat": "-29.0333", + "lng": "167.95" + }, + { + "iso": "MP", + "lat": "15.2", + "lng": "145.75" + }, + { + "iso": "NO", + "lat": "62", + "lng": "10" + }, + { + "iso": "OM", + "lat": "21", + "lng": "57" + }, + { + "iso": "PK", + "lat": "30", + "lng": "70" + }, + { + "iso": "PW", + "lat": "7.5", + "lng": "134.5" + }, + { + "iso": "Occupied", + "lat": "275", + "lng": "32" + }, + { + "iso": "PA", + "lat": "9", + "lng": "-80" + }, + { + "iso": "PG", + "lat": "-6", + "lng": "147" + }, + { + "iso": "PY", + "lat": "-23", + "lng": "-58" + }, + { + "iso": "PE", + "lat": "-10", + "lng": "-76" + }, + { + "iso": "PH", + "lat": "13", + "lng": "122" + }, + { + "iso": "PN", + "lat": "-24.7", + "lng": "-127.4" + }, + { + "iso": "PL", + "lat": "52", + "lng": "20" + }, + { + "iso": "PT", + "lat": "39.5", + "lng": "-8" + }, + { + "iso": "PR", + "lat": "18.25", + "lng": "-66.5" + }, + { + "iso": "QA", + "lat": "25.5", + "lng": "51.25" + }, + { + "iso": "RE", + "lat": "-21.1", + "lng": "55.6" + }, + { + "iso": "RO", + "lat": "46", + "lng": "25" + }, + { + "iso": "RU", + "lat": "60", + "lng": "100" + }, + { + "iso": "RU", + "lat": "60", + "lng": "100" + }, + { + "iso": "RW", + "lat": "-2", + "lng": "30" + }, + { + "iso": "BL", + "lat": "17.897728", + "lng": "-62.834244" + }, + { + "iso": "Ascension and Tristan da Cunha", + "lat": "654", + "lng": "-15.9333" + }, + { + "iso": "KN", + "lat": "17.3333", + "lng": "-62.75" + }, + { + "iso": "LC", + "lat": "13.8833", + "lng": "-61.1333" + }, + { + "iso": "MF", + "lat": "18.075278", + "lng": "-63.06" + }, + { + "iso": "PM", + "lat": "46.8333", + "lng": "-56.3333" + }, + { + "iso": "VC", + "lat": "13.25", + "lng": "-61.2" + }, + { + "iso": "VC", + "lat": "13.25", + "lng": "-61.2" + }, + { + "iso": "WS", + "lat": "-13.5833", + "lng": "-172.3333" + }, + { + "iso": "SM", + "lat": "43.7667", + "lng": "12.4167" + }, + { + "iso": "ST", + "lat": "1", + "lng": "7" + }, + { + "iso": "SA", + "lat": "25", + "lng": "45" + }, + { + "iso": "SN", + "lat": "14", + "lng": "-14" + }, + { + "iso": "RS", + "lat": "44", + "lng": "21" + }, + { + "iso": "SC", + "lat": "-4.5833", + "lng": "55.6667" + }, + { + "iso": "SL", + "lat": "8.5", + "lng": "-11.5" + }, + { + "iso": "SG", + "lat": "1.3667", + "lng": "103.8" + }, + { + "iso": "SX", + "lat": "18.033333", + "lng": "-63.05" + }, + { + "iso": "SK", + "lat": "48.6667", + "lng": "19.5" + }, + { + "iso": "SI", + "lat": "46", + "lng": "15" + }, + { + "iso": "SB", + "lat": "-8", + "lng": "159" + }, + { + "iso": "SO", + "lat": "10", + "lng": "49" + }, + { + "iso": "ZA", + "lat": "-29", + "lng": "24" + }, + { + "iso": "GS", + "lat": "-54.5", + "lng": "-37" + }, + { + "iso": "KR", + "lat": "37", + "lng": "127.5" + }, + { + "iso": "SS", + "lat": "8", + "lng": "30" + }, + { + "iso": "ES", + "lat": "40", + "lng": "-4" + }, + { + "iso": "LK", + "lat": "7", + "lng": "81" + }, + { + "iso": "VC", + "lat": "13.25", + "lng": "-61.2" + }, + { + "iso": "SD", + "lat": "15", + "lng": "30" + }, + { + "iso": "SR", + "lat": "4", + "lng": "-56" + }, + { + "iso": "SJ", + "lat": "78", + "lng": "20" + }, + { + "iso": "SZ", + "lat": "-26.5", + "lng": "31.5" + }, + { + "iso": "SE", + "lat": "62", + "lng": "15" + }, + { + "iso": "CH", + "lat": "47", + "lng": "8" + }, + { + "iso": "SY", + "lat": "35", + "lng": "38" + }, + { + "iso": "TW", + "lat": "23.5", + "lng": "121" + }, + { + "iso": "TJ", + "lat": "39", + "lng": "71" + }, + { + "iso": "United Republic of", + "lat": "834", + "lng": "-6" + }, + { + "iso": "TH", + "lat": "15", + "lng": "100" + }, + { + "iso": "TL", + "lat": "-8.55", + "lng": "125.5167" + }, + { + "iso": "TG", + "lat": "8", + "lng": "1.1667" + }, + { + "iso": "TK", + "lat": "-9", + "lng": "-172" + }, + { + "iso": "TO", + "lat": "-20", + "lng": "-175" + }, + { + "iso": "TT", + "lat": "11", + "lng": "-61" + }, + { + "iso": "TN", + "lat": "34", + "lng": "9" + }, + { + "iso": "TR", + "lat": "39", + "lng": "35" + }, + { + "iso": "TM", + "lat": "40", + "lng": "60" + }, + { + "iso": "TC", + "lat": "21.75", + "lng": "-71.5833" + }, + { + "iso": "TV", + "lat": "-8", + "lng": "178" + }, + { + "iso": "UG", + "lat": "1", + "lng": "32" + }, + { + "iso": "UA", + "lat": "49", + "lng": "32" + }, + { + "iso": "AE", + "lat": "24", + "lng": "54" + }, + { + "iso": "GB", + "lat": "54", + "lng": "-2" + }, + { + "iso": "UM", + "lat": "19.2833", + "lng": "166.6" + }, + { + "iso": "US", + "lat": "38", + "lng": "-97" + }, + { + "iso": "UY", + "lat": "-33", + "lng": "-56" + }, + { + "iso": "UZ", + "lat": "41", + "lng": "64" + }, + { + "iso": "VU", + "lat": "-16", + "lng": "167" + }, + { + "iso": "Bolivarian Republic of", + "lat": "862", + "lng": "8" + }, + { + "iso": "VE", + "lat": "8", + "lng": "-66" + }, + { + "iso": "VN", + "lat": "16", + "lng": "106" + }, + { + "iso": "VN", + "lat": "16", + "lng": "106" + }, + { + "iso": "British", + "lat": "92", + "lng": "18.5" + }, + { + "iso": "U.S.", + "lat": "850", + "lng": "18.3333" + }, + { + "iso": "WF", + "lat": "-13.3", + "lng": "-176.2" + }, + { + "iso": "EH", + "lat": "24.5", + "lng": "-13" + }, + { + "iso": "YE", + "lat": "15", + "lng": "48" + }, + { + "iso": "ZM", + "lat": "-15", + "lng": "30" + }, + { + "iso": "ZW", + "lat": "-20", + "lng": "30" + } +] \ No newline at end of file diff --git a/src/components/Peers/types.ts b/src/components/Peers/types.ts new file mode 100644 index 0000000..a3e1bea --- /dev/null +++ b/src/components/Peers/types.ts @@ -0,0 +1,4 @@ +export type PeerPin = { + lat: number; + lng: number; +}; \ No newline at end of file diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts index 2484188..3441411 100644 --- a/src/routeTree.gen.ts +++ b/src/routeTree.gen.ts @@ -17,6 +17,7 @@ import { Route as DashboardIndexImport } from './routes/dashboard/index' import { Route as DashboardSettingsImport } from './routes/dashboard/settings' import { Route as DashboardRequestsImport } from './routes/dashboard/requests' import { Route as DashboardPurchasesImport } from './routes/dashboard/purchases' +import { Route as DashboardPeersImport } from './routes/dashboard/peers' import { Route as DashboardHelpImport } from './routes/dashboard/help' import { Route as DashboardFavoritesImport } from './routes/dashboard/favorites' import { Route as DashboardDisclaimerImport } from './routes/dashboard/disclaimer' @@ -55,6 +56,11 @@ const DashboardPurchasesRoute = DashboardPurchasesImport.update({ getParentRoute: () => DashboardRoute, } as any) +const DashboardPeersRoute = DashboardPeersImport.update({ + path: '/peers', + getParentRoute: () => DashboardRoute, +} as any) + const DashboardHelpRoute = DashboardHelpImport.update({ path: '/help', getParentRoute: () => DashboardRoute, @@ -133,6 +139,13 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof DashboardHelpImport parentRoute: typeof DashboardImport } + '/dashboard/peers': { + id: '/dashboard/peers' + path: '/peers' + fullPath: '/dashboard/peers' + preLoaderRoute: typeof DashboardPeersImport + parentRoute: typeof DashboardImport + } '/dashboard/purchases': { id: '/dashboard/purchases' path: '/purchases' @@ -172,6 +185,7 @@ interface DashboardRouteChildren { DashboardDisclaimerRoute: typeof DashboardDisclaimerRoute DashboardFavoritesRoute: typeof DashboardFavoritesRoute DashboardHelpRoute: typeof DashboardHelpRoute + DashboardPeersRoute: typeof DashboardPeersRoute DashboardPurchasesRoute: typeof DashboardPurchasesRoute DashboardRequestsRoute: typeof DashboardRequestsRoute DashboardSettingsRoute: typeof DashboardSettingsRoute @@ -184,6 +198,7 @@ const DashboardRouteChildren: DashboardRouteChildren = { DashboardDisclaimerRoute: DashboardDisclaimerRoute, DashboardFavoritesRoute: DashboardFavoritesRoute, DashboardHelpRoute: DashboardHelpRoute, + DashboardPeersRoute: DashboardPeersRoute, DashboardPurchasesRoute: DashboardPurchasesRoute, DashboardRequestsRoute: DashboardRequestsRoute, DashboardSettingsRoute: DashboardSettingsRoute, @@ -202,6 +217,7 @@ export interface FileRoutesByFullPath { '/dashboard/disclaimer': typeof DashboardDisclaimerRoute '/dashboard/favorites': typeof DashboardFavoritesRoute '/dashboard/help': typeof DashboardHelpRoute + '/dashboard/peers': typeof DashboardPeersRoute '/dashboard/purchases': typeof DashboardPurchasesRoute '/dashboard/requests': typeof DashboardRequestsRoute '/dashboard/settings': typeof DashboardSettingsRoute @@ -215,6 +231,7 @@ export interface FileRoutesByTo { '/dashboard/disclaimer': typeof DashboardDisclaimerRoute '/dashboard/favorites': typeof DashboardFavoritesRoute '/dashboard/help': typeof DashboardHelpRoute + '/dashboard/peers': typeof DashboardPeersRoute '/dashboard/purchases': typeof DashboardPurchasesRoute '/dashboard/requests': typeof DashboardRequestsRoute '/dashboard/settings': typeof DashboardSettingsRoute @@ -230,6 +247,7 @@ export interface FileRoutesById { '/dashboard/disclaimer': typeof DashboardDisclaimerRoute '/dashboard/favorites': typeof DashboardFavoritesRoute '/dashboard/help': typeof DashboardHelpRoute + '/dashboard/peers': typeof DashboardPeersRoute '/dashboard/purchases': typeof DashboardPurchasesRoute '/dashboard/requests': typeof DashboardRequestsRoute '/dashboard/settings': typeof DashboardSettingsRoute @@ -246,6 +264,7 @@ export interface FileRouteTypes { | '/dashboard/disclaimer' | '/dashboard/favorites' | '/dashboard/help' + | '/dashboard/peers' | '/dashboard/purchases' | '/dashboard/requests' | '/dashboard/settings' @@ -258,6 +277,7 @@ export interface FileRouteTypes { | '/dashboard/disclaimer' | '/dashboard/favorites' | '/dashboard/help' + | '/dashboard/peers' | '/dashboard/purchases' | '/dashboard/requests' | '/dashboard/settings' @@ -271,6 +291,7 @@ export interface FileRouteTypes { | '/dashboard/disclaimer' | '/dashboard/favorites' | '/dashboard/help' + | '/dashboard/peers' | '/dashboard/purchases' | '/dashboard/requests' | '/dashboard/settings' @@ -315,6 +336,7 @@ export const routeTree = rootRoute "/dashboard/disclaimer", "/dashboard/favorites", "/dashboard/help", + "/dashboard/peers", "/dashboard/purchases", "/dashboard/requests", "/dashboard/settings", @@ -341,6 +363,10 @@ export const routeTree = rootRoute "filePath": "dashboard/help.tsx", "parent": "/dashboard" }, + "/dashboard/peers": { + "filePath": "dashboard/peers.tsx", + "parent": "/dashboard" + }, "/dashboard/purchases": { "filePath": "dashboard/purchases.tsx", "parent": "/dashboard" diff --git a/src/routes/dashboard.tsx b/src/routes/dashboard.tsx index c50f33a..fea649d 100644 --- a/src/routes/dashboard.tsx +++ b/src/routes/dashboard.tsx @@ -12,6 +12,7 @@ import { Settings, HelpCircle, TriangleAlert, + Earth, } from "lucide-react"; import { ICON_SIZE } from "../utils/constants"; import { NodeIndicator } from "../components/NodeIndicator/NodeIndicator"; @@ -87,6 +88,15 @@ const Layout = () => { ), }, + { + type: "menu-item", + Component: (p: MenuItemComponentProps) => ( + + + Peers + + ), + }, { type: "menu-item", Component: (p: MenuItemComponentProps) => ( diff --git a/src/routes/dashboard/peers.css b/src/routes/dashboard/peers.css new file mode 100644 index 0000000..e017a11 --- /dev/null +++ b/src/routes/dashboard/peers.css @@ -0,0 +1,10 @@ +.peers-map, +.peers-table { + max-width: 1000px; + margin: auto; +} + +.peers-table { + margin-top: 1rem; + width: 100%; +} diff --git a/src/routes/dashboard/peers.tsx b/src/routes/dashboard/peers.tsx new file mode 100644 index 0000000..b0f836e --- /dev/null +++ b/src/routes/dashboard/peers.tsx @@ -0,0 +1,98 @@ +import { Cell, Row, Table } from "@codex-storage/marketplace-ui-components"; +import { createFileRoute } from "@tanstack/react-router"; +import { getMapJSON } from "dotted-map"; +import DottedMap from "dotted-map/without-countries"; +import { Promises } from "../../utils/promises"; +import { useQuery } from "@tanstack/react-query"; +import { PeerCountryCell } from "../../components/Peers/PeerCountryCell"; +import { useCallback, useState } from "react"; +import { PeerPin } from "../../components/Peers/types"; +import "./peers.css"; +import { CodexSdk } from "../../sdk/codex"; + +// This function accepts the same arguments as DottedMap in the example above. +const mapJsonString = getMapJSON({ height: 60, grid: "diagonal" }); + +export const Route = createFileRoute("/dashboard/peers")({ + component: () => { + const [pins, setPins] = useState<[PeerPin, number][]>([]); + const { data } = useQuery({ + queryFn: () => + CodexSdk.debug.info().then((s) => Promises.rejectOnError(s)), + queryKey: ["debug"], + + // No need to retry because if the connection to the node + // is back again, all the queries will be invalidated. + retry: false, + + // The client node should be local, so display the cache value while + // making a background request looks good. + staleTime: 0, + + // Refreshing when focus returns can be useful if a user comes back + // to the UI after performing an operation in the terminal. + refetchOnWindowFocus: true, + + // Throw the error to the error boundary + throwOnError: true, + }); + + const onPinAdd = useCallback((pin: PeerPin) => { + setPins((val) => { + const [, quantity = 0] = + val.find(([p]) => p.lat === pin.lat && p.lng == pin.lng) || []; + return [...val, [pin, quantity + 1]]; + }); + }, []); + + // It’s safe to re-create the map at each render, because of the + // pre-computation it’s super fast ⚡️ + const map = new DottedMap({ map: JSON.parse(mapJsonString) }); + + pins.map(([pin, quantity]) => + map.addPin({ + lat: pin.lat, + lng: pin.lng, + svgOptions: { color: "#d6ff79", radius: 0.4 * quantity }, + }) + ); + + const svgMap = map.getSVG({ + radius: 0.42, + color: "#423B38", + shape: "circle", + backgroundColor: "#020300", + }); + + const headers = ["Country", "PeerId", "Active"]; + + const rows = + ((data as any)?.table?.nodes || []).map((node: any) => ( + , + {node.peerId}, + + {node.seen ? ( +
+ ) : ( +
+ )} + , + ]}> + )) || []; + + return ( + <> + + + + + ); + }, +}); From b33c79788d772ff336c2b8fcc4a1957b6fd937c6 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Fri, 11 Oct 2024 11:17:48 +0200 Subject: [PATCH 2/2] Improve the worldmap display --- package-lock.json | 125 ++-- package.json | 3 +- src/components/Peers/PeerCountryCell.css | 5 + src/components/Peers/PeerCountryCell.tsx | 65 +- src/components/Peers/countries.ts | 735 +++++++++++++++-------- src/routes/dashboard/peers.css | 39 +- src/routes/dashboard/peers.tsx | 14 +- 7 files changed, 667 insertions(+), 319 deletions(-) create mode 100644 src/components/Peers/PeerCountryCell.css diff --git a/package-lock.json b/package-lock.json index ee7716d..27483ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@sentry/react": "^8.31.0", "@tanstack/react-query": "^5.51.15", "@tanstack/react-router": "^1.58.7", + "dotted-map": "^2.2.3", "idb-keyval": "^6.2.1", "lucide-react": "^0.445.0", "react": "^18.3.1", @@ -39,47 +40,6 @@ "node": ">=18" } }, - "../storybook": { - "name": "@codex-storage/marketplace-ui-components", - "version": "0.0.16", - "license": "MIT", - "dependencies": { - "lucide-react": "^0.441.0" - }, - "devDependencies": { - "@chromatic-com/storybook": "^2.0.2", - "@storybook/addon-essentials": "^8.2.9", - "@storybook/addon-interactions": "^8.2.9", - "@storybook/addon-links": "^8.2.9", - "@storybook/addon-onboarding": "^8.2.9", - "@storybook/blocks": "^8.2.9", - "@storybook/react": "^8.2.9", - "@storybook/react-vite": "^8.2.9", - "@storybook/test": "^8.2.9", - "@typescript-eslint/eslint-plugin": "^8.6.0", - "@typescript-eslint/parser": "^8.0.0", - "@vitejs/plugin-react": "^4.3.1", - "eslint": "^8.57.0", - "eslint-plugin-react-hooks": "^4.6.2", - "eslint-plugin-react-refresh": "^0.4.7", - "glob": "^9.3.5", - "prettier": "^3.3.3", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "storybook": "^8.2.9", - "typescript": "5.5.2", - "vite-plugin-dts": "^4.0.3", - "vite-plugin-lib-inject-css": "^2.1.1" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "@codex-storage/sdk-js": "^0.0.6", - "react": "^18.3.1", - "react-dom": "^18.3.1" - } - }, "node_modules/@ampproject/remapping": { "version": "2.3.0", "dev": true, @@ -383,8 +343,28 @@ } }, "node_modules/@codex-storage/marketplace-ui-components": { - "resolved": "../storybook", - "link": true + "version": "0.0.16", + "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.16.tgz", + "integrity": "sha512-49RQB/ld3EIZrFr/1GL7NB/cEI7TjnHRIBD3LJqZ2/ml+0gj//Mep85yV9Df1owiE2yyFh76bAeC8rUTo9cA/g==", + "dependencies": { + "lucide-react": "^0.441.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@codex-storage/sdk-js": "^0.0.6", + "react": "^18.3.1", + "react-dom": "^18.3.1" + } + }, + "node_modules/@codex-storage/marketplace-ui-components/node_modules/lucide-react": { + "version": "0.441.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.441.0.tgz", + "integrity": "sha512-0vfExYtvSDhkC2lqg0zYVW1Uu9GsI4knuV9GP9by5z0Xhc4Zi5RejTxfz9LsjRmCyWVzHCJvxGKZWcRyvQCWVg==", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" + } }, "node_modules/@codex-storage/sdk-js": { "version": "0.0.7", @@ -1595,6 +1575,37 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@turf/boolean-point-in-polygon": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-6.5.0.tgz", + "integrity": "sha512-DtSuVFB26SI+hj0SjrvXowGTUCHlgevPAIsukssW6BG5MlNSBQAo70wpICBNJL6RjukXg8d2eXaAWuD/CqL00A==", + "dependencies": { + "@turf/helpers": "^6.5.0", + "@turf/invariant": "^6.5.0" + }, + "funding": { + "url": "https://opencollective.com/turf" + } + }, + "node_modules/@turf/helpers": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz", + "integrity": "sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==", + "funding": { + "url": "https://opencollective.com/turf" + } + }, + "node_modules/@turf/invariant": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-6.5.0.tgz", + "integrity": "sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==", + "dependencies": { + "@turf/helpers": "^6.5.0" + }, + "funding": { + "url": "https://opencollective.com/turf" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "dev": true, @@ -2190,6 +2201,15 @@ "node": ">=6.0.0" } }, + "node_modules/dotted-map": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/dotted-map/-/dotted-map-2.2.3.tgz", + "integrity": "sha512-8hyOOHHLLVCcCisM3yb9hqp+3bJ7TSMcr1SfrUw8Wxp5UMqih35jIvUyagweCooJbz/EH1nC9GGuPysh7+YlAg==", + "dependencies": { + "@turf/boolean-point-in-polygon": "^6.0.1", + "proj4": "^2.6.1" + } + }, "node_modules/escalade": { "version": "3.2.0", "dev": true, @@ -2899,6 +2919,11 @@ "node": ">= 8" } }, + "node_modules/mgrs": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz", + "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==" + }, "node_modules/micromatch": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", @@ -3119,6 +3144,15 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/proj4": { + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.12.1.tgz", + "integrity": "sha512-vmhP3hmstjXjzFwg8QXJwpoj4n7GVrXk3ZW3DzNK/Ur4cuwXq7ZiMXaWYvLYLQbX8n4MXgbwTr4lthOUZltBpA==", + "dependencies": { + "mgrs": "1.0.0", + "wkt-parser": "^1.3.3" + } + }, "node_modules/punycode": { "version": "2.3.1", "dev": true, @@ -4019,6 +4053,11 @@ "node": ">= 8" } }, + "node_modules/wkt-parser": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.3.tgz", + "integrity": "sha512-ZnV3yH8/k58ZPACOXeiHaMuXIiaTk1t0hSUVisbO0t4RjA5wPpUytcxeyiN2h+LZRrmuHIh/1UlrR9e7DHDvTw==" + }, "node_modules/word-wrap": { "version": "1.2.5", "dev": true, diff --git a/package.json b/package.json index 95a1b8b..458ea1b 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@sentry/react": "^8.31.0", "@tanstack/react-query": "^5.51.15", "@tanstack/react-router": "^1.58.7", + "dotted-map": "^2.2.3", "idb-keyval": "^6.2.1", "lucide-react": "^0.445.0", "react": "^18.3.1", @@ -55,4 +56,4 @@ "author": "Codex team", "readme": "README.md", "license": "MIT" -} \ No newline at end of file +} diff --git a/src/components/Peers/PeerCountryCell.css b/src/components/Peers/PeerCountryCell.css new file mode 100644 index 0000000..ac159a5 --- /dev/null +++ b/src/components/Peers/PeerCountryCell.css @@ -0,0 +1,5 @@ +.peerCountry { + display: flex; + align-items: center; + gap: 1rem; +} diff --git a/src/components/Peers/PeerCountryCell.tsx b/src/components/Peers/PeerCountryCell.tsx index 9877c73..1edb332 100644 --- a/src/components/Peers/PeerCountryCell.tsx +++ b/src/components/Peers/PeerCountryCell.tsx @@ -1,7 +1,8 @@ import { Cell } from "@codex-storage/marketplace-ui-components"; -import { useEffect, useState } from "react"; import { PeerPin } from "./types"; import { countriesCoordinates } from "./countries"; +import { useQuery } from "@tanstack/react-query"; +import "./PeerCountryCell.css"; export type Props = { address: string; @@ -17,34 +18,56 @@ const getFlagEmoji = (countryCode: string) => { }; export function PeerCountryCell({ address, onPinAdd }: Props) { - const [country, setCountry] = useState(""); + const { data } = useQuery({ + queryFn: () => { + const [ip] = address.split(":"); - useEffect(() => { - const [ip] = address.split(":"); + return fetch(import.meta.env.VITE_GEO_IP_URL + "/" + ip) + .then((res) => res.json()) + .then((json) => { + const coordinate = countriesCoordinates.find( + (c) => c.iso === json.country + ); - console.info(ip); + if (coordinate) { + onPinAdd({ + lat: parseFloat(coordinate.lat), + lng: parseFloat(coordinate.lng), + }); + } - fetch("https://api.country.is/" + ip) - .then((res) => res.json()) - .then((json) => { - setCountry(json.country); + return coordinate; + }); + }, + queryKey: [address], - const coordinate = countriesCoordinates.find( - (c) => c.iso === json.country - ); + // Enable only when the address exists + enabled: !!address, - if (coordinate) { - onPinAdd({ - lat: parseFloat(coordinate.lat), - lng: parseFloat(coordinate.lng), - }); - } - }); - }, [address]); + // No need to retry because if the connection to the node + // is back again, all the queries will be invalidated. + retry: false, + + // We can cache the data at Infinity because the relation between + // country and ip is fixed + staleTime: Infinity, + + // Don't expect something new when coming back to the UI + refetchOnWindowFocus: false, + }); return ( - {getFlagEmoji(country)} {address} +
+ {data ? ( + <> + {!!data && getFlagEmoji(data.iso)} + {data?.name} + + ) : ( + {address} + )} +
); } diff --git a/src/components/Peers/countries.ts b/src/components/Peers/countries.ts index 4c8ec26..00151b8 100644 --- a/src/components/Peers/countries.ts +++ b/src/components/Peers/countries.ts @@ -2,132 +2,158 @@ export const countriesCoordinates = [ { "iso": "AF", "lat": "33", - "lng": "65" + "lng": "65", + "name": "Afghanistan" }, { "iso": "AX", "lat": "60.116667", - "lng": "19.9" + "lng": "19.9", + "name": "Åland Islands" }, { "iso": "AL", "lat": "41", - "lng": "20" + "lng": "20", + "name": "Albania" }, { "iso": "DZ", "lat": "28", - "lng": "3" + "lng": "3", + "name": "Algeria" }, { "iso": "AS", "lat": "-14.3333", - "lng": "-170" + "lng": "-170", + "name": "American Samoa" }, { "iso": "AD", "lat": "42.5", - "lng": "1.6" + "lng": "1.6", + "name": "Andorra" }, { "iso": "AO", "lat": "-12.5", - "lng": "18.5" + "lng": "18.5", + "name": "Angola" }, { "iso": "AI", "lat": "18.25", - "lng": "-63.1667" + "lng": "-63.1667", + "name": "Anguilla" }, { "iso": "AQ", "lat": "-90", - "lng": "0" + "lng": "0", + "name": "Antarctica" }, { "iso": "AG", "lat": "17.05", - "lng": "-61.8" + "lng": "-61.8", + "name": "Antigua and Barbuda" }, { "iso": "AR", "lat": "-34", - "lng": "-64" + "lng": "-64", + "name": "Argentina" }, { "iso": "AM", "lat": "40", - "lng": "45" + "lng": "45", + "name": "Armenia" }, { "iso": "AW", "lat": "12.5", - "lng": "-69.9667" + "lng": "-69.9667", + "name": "Aruba" }, { "iso": "AU", "lat": "-27", - "lng": "133" + "lng": "133", + "name": "Australia" }, { "iso": "AT", "lat": "47.3333", - "lng": "13.3333" + "lng": "13.3333", + "name": "Austria" }, { "iso": "AZ", "lat": "40.5", - "lng": "47.5" + "lng": "47.5", + "name": "Azerbaijan" }, { "iso": "BS", "lat": "24.25", - "lng": "-76" + "lng": "-76", + "name": "Bahamas" }, { "iso": "BH", "lat": "26", - "lng": "50.55" + "lng": "50.55", + "name": "Bahrain" }, { "iso": "BD", "lat": "24", - "lng": "90" + "lng": "90", + "name": "Bangladesh" }, { "iso": "BB", "lat": "13.1667", - "lng": "-59.5333" + "lng": "-59.5333", + "name": "Barbados" }, { "iso": "BY", "lat": "53", - "lng": "28" + "lng": "28", + "name": "Belarus" }, { "iso": "BE", "lat": "50.8333", - "lng": "4" + "lng": "4", + "name": "Belgium" }, { "iso": "BZ", "lat": "17.25", - "lng": "-88.75" + "lng": "-88.75", + "name": "Belize" }, { "iso": "BJ", "lat": "9.5", - "lng": "2.25" + "lng": "2.25", + "name": "Benin" }, { "iso": "BM", "lat": "32.3333", - "lng": "-64.75" + "lng": "-64.75", + "name": "Bermuda" }, { "iso": "BT", "lat": "27.5", - "lng": "90.5" + "lng": "90.5", + "name": "Bhutan" }, { "iso": "Plurinational State of", @@ -137,7 +163,8 @@ export const countriesCoordinates = [ { "iso": "BO", "lat": "-17", - "lng": "-65" + "lng": "-65", + "name": "Bolivia, Plurinational State of" }, { "iso": "Sint Eustatius and Saba", @@ -147,122 +174,146 @@ export const countriesCoordinates = [ { "iso": "BA", "lat": "44", - "lng": "18" + "lng": "18", + "name": "Bosnia and Herzegovina" }, { "iso": "BW", "lat": "-22", - "lng": "24" + "lng": "24", + "name": "Botswana" }, { "iso": "BV", "lat": "-54.4333", - "lng": "3.4" + "lng": "3.4", + "name": "Bouvet Island" }, { "iso": "BR", "lat": "-10", - "lng": "-55" + "lng": "-55", + "name": "Brazil" }, { "iso": "IO", "lat": "-6", - "lng": "71.5" + "lng": "71.5", + "name": "British Indian Ocean Territory" }, { "iso": "BN", "lat": "4.5", - "lng": "114.6667" + "lng": "114.6667", + "name": "Brunei Darussalam" }, { "iso": "BN", "lat": "4.5", - "lng": "114.6667" + "lng": "114.6667", + "name": "Brunei Darussalam" }, { "iso": "BG", "lat": "43", - "lng": "25" + "lng": "25", + "name": "Bulgaria" }, { "iso": "BF", "lat": "13", - "lng": "-2" + "lng": "-2", + "name": "Burkina Faso" }, { "iso": "MM", "lat": "22", - "lng": "98" + "lng": "98", + "name": "Myanmar" }, { "iso": "BI", "lat": "-3.5", - "lng": "30" + "lng": "30", + "name": "Burundi" }, { "iso": "KH", "lat": "13", - "lng": "105" + "lng": "105", + "name": "Cambodia" }, { "iso": "CM", "lat": "6", - "lng": "12" + "lng": "12", + "name": "Cameroon" }, { "iso": "CA", "lat": "60", - "lng": "-95" + "lng": "-95", + "name": "Canada" }, { "iso": "CV", "lat": "16", - "lng": "-24" + "lng": "-24", + "name": "Cape Verde" }, { "iso": "KY", "lat": "19.5", - "lng": "-80.5" + "lng": "-80.5", + "name": "Cayman Islands" }, { "iso": "CF", "lat": "7", - "lng": "21" + "lng": "21", + "name": "Central African Republic" }, { "iso": "TD", "lat": "15", - "lng": "19" + "lng": "19", + "name": "Chad" }, { "iso": "CL", "lat": "-30", - "lng": "-71" + "lng": "-71", + "name": "Chile" }, { "iso": "CN", "lat": "35", - "lng": "105" + "lng": "105", + "name": "China" }, { "iso": "CX", "lat": "-10.5", - "lng": "105.6667" + "lng": "105.6667", + "name": "Christmas Island" }, { "iso": "CC", "lat": "-12.5", - "lng": "96.8333" + "lng": "96.8333", + "name": "Cocos (Keeling) Islands" }, { "iso": "CO", "lat": "4", - "lng": "-72" + "lng": "-72", + "name": "Colombia" }, { "iso": "KM", "lat": "-12.1667", - "lng": "44.25" + "lng": "44.25", + "name": "Comoros" }, { "iso": "the Democratic Republic of the", @@ -272,267 +323,320 @@ export const countriesCoordinates = [ { "iso": "CG", "lat": "-1", - "lng": "15" + "lng": "15", + "name": "Congo" }, { "iso": "CK", "lat": "-21.2333", - "lng": "-159.7667" + "lng": "-159.7667", + "name": "Cook Islands" }, { "iso": "CR", "lat": "10", - "lng": "-84" + "lng": "-84", + "name": "Costa Rica" }, { "iso": "CI", "lat": "8", - "lng": "-5" + "lng": "-5", + "name": "Côte d'Ivoire" }, { "iso": "HR", "lat": "45.1667", - "lng": "15.5" + "lng": "15.5", + "name": "Croatia" }, { "iso": "CU", "lat": "21.5", - "lng": "-80" + "lng": "-80", + "name": "Cuba" }, { "iso": "CW", "lat": "12.166667", - "lng": "-68.966667" + "lng": "-68.966667", + "name": "Curaçao" }, { "iso": "CY", "lat": "35", - "lng": "33" + "lng": "33", + "name": "Cyprus" }, { "iso": "CZ", "lat": "49.75", - "lng": "15.5" + "lng": "15.5", + "name": "Czech Republic" }, { "iso": "DK", "lat": "56", - "lng": "10" + "lng": "10", + "name": "Denmark" }, { "iso": "DJ", "lat": "11.5", - "lng": "43" + "lng": "43", + "name": "Djibouti" }, { "iso": "DM", "lat": "15.4167", - "lng": "-61.3333" + "lng": "-61.3333", + "name": "Dominica" }, { "iso": "DO", "lat": "19", - "lng": "-70.6667" + "lng": "-70.6667", + "name": "Dominican Republic" }, { "iso": "EC", "lat": "-2", - "lng": "-77.5" + "lng": "-77.5", + "name": "Ecuador" }, { "iso": "EG", "lat": "27", - "lng": "30" + "lng": "30", + "name": "Egypt" }, { "iso": "SV", "lat": "13.8333", - "lng": "-88.9167" + "lng": "-88.9167", + "name": "El Salvador" }, { "iso": "GQ", "lat": "2", - "lng": "10" + "lng": "10", + "name": "Equatorial Guinea" }, { "iso": "ER", "lat": "15", - "lng": "39" + "lng": "39", + "name": "Eritrea" }, { "iso": "EE", "lat": "59", - "lng": "26" + "lng": "26", + "name": "Estonia" }, { "iso": "ET", "lat": "8", - "lng": "38" + "lng": "38", + "name": "Ethiopia" }, { "iso": "FK", "lat": "-51.75", - "lng": "-59" + "lng": "-59", + "name": "Falkland Islands (Malvinas)" }, { "iso": "FO", "lat": "62", - "lng": "-7" + "lng": "-7", + "name": "Faroe Islands" }, { "iso": "FJ", "lat": "-18", - "lng": "175" + "lng": "175", + "name": "Fiji" }, { "iso": "FI", "lat": "64", - "lng": "26" + "lng": "26", + "name": "Finland" }, { "iso": "FR", "lat": "46", - "lng": "2" + "lng": "2", + "name": "France" }, { "iso": "GF", "lat": "4", - "lng": "-53" + "lng": "-53", + "name": "French Guiana" }, { "iso": "PF", "lat": "-15", - "lng": "-140" + "lng": "-140", + "name": "French Polynesia" }, { "iso": "TF", "lat": "-43", - "lng": "67" + "lng": "67", + "name": "French Southern Territories" }, { "iso": "GA", "lat": "-1", - "lng": "11.75" + "lng": "11.75", + "name": "Gabon" }, { "iso": "GM", "lat": "13.4667", - "lng": "-16.5667" + "lng": "-16.5667", + "name": "Gambia" }, { "iso": "GE", "lat": "42", - "lng": "43.5" + "lng": "43.5", + "name": "Georgia" }, { "iso": "DE", "lat": "51", - "lng": "9" + "lng": "9", + "name": "Germany" }, { "iso": "GH", "lat": "8", - "lng": "-2" + "lng": "-2", + "name": "Ghana" }, { "iso": "GI", "lat": "36.1833", - "lng": "-5.3667" + "lng": "-5.3667", + "name": "Gibraltar" }, { "iso": "GR", "lat": "39", - "lng": "22" + "lng": "22", + "name": "Greece" }, { "iso": "GL", "lat": "72", - "lng": "-40" + "lng": "-40", + "name": "Greenland" }, { "iso": "GD", "lat": "12.1167", - "lng": "-61.6667" + "lng": "-61.6667", + "name": "Grenada" }, { "iso": "GP", "lat": "16.25", - "lng": "-61.5833" + "lng": "-61.5833", + "name": "Guadeloupe" }, { "iso": "GU", "lat": "13.4667", - "lng": "144.7833" + "lng": "144.7833", + "name": "Guam" }, { "iso": "GT", "lat": "15.5", - "lng": "-90.25" + "lng": "-90.25", + "name": "Guatemala" }, { "iso": "GG", "lat": "49.5", - "lng": "-2.56" + "lng": "-2.56", + "name": "Guernsey" }, { "iso": "GW", "lat": "12", - "lng": "-15" + "lng": "-15", + "name": "Guinea-Bissau" }, { "iso": "GN", "lat": "11", - "lng": "-10" + "lng": "-10", + "name": "Guinea" }, { "iso": "GY", "lat": "5", - "lng": "-59" + "lng": "-59", + "name": "Guyana" }, { "iso": "HT", "lat": "19", - "lng": "-72.4167" + "lng": "-72.4167", + "name": "Haiti" }, { "iso": "HM", "lat": "-53.1", - "lng": "72.5167" + "lng": "72.5167", + "name": "Heard Island and McDonald Islands" }, { "iso": "VA", "lat": "41.9", - "lng": "12.45" + "lng": "12.45", + "name": "Holy See (Vatican City State)" }, { "iso": "HN", "lat": "15", - "lng": "-86.5" + "lng": "-86.5", + "name": "Honduras" }, { "iso": "HK", "lat": "22.25", - "lng": "114.1667" + "lng": "114.1667", + "name": "Hong Kong" }, { "iso": "HU", "lat": "47", - "lng": "20" + "lng": "20", + "name": "Hungary" }, { "iso": "IS", "lat": "65", - "lng": "-18" + "lng": "-18", + "name": "Iceland" }, { "iso": "IN", "lat": "20", - "lng": "77" + "lng": "77", + "name": "India" }, { "iso": "ID", "lat": "-5", - "lng": "120" + "lng": "120", + "name": "Indonesia" }, { "iso": "Islamic Republic of", @@ -542,67 +646,80 @@ export const countriesCoordinates = [ { "iso": "IQ", "lat": "33", - "lng": "44" + "lng": "44", + "name": "Iraq" }, { "iso": "IE", "lat": "53", - "lng": "-8" + "lng": "-8", + "name": "Ireland" }, { "iso": "IM", "lat": "54.23", - "lng": "-4.55" + "lng": "-4.55", + "name": "Isle of Man" }, { "iso": "IL", "lat": "31.5", - "lng": "34.75" + "lng": "34.75", + "name": "Israel" }, { "iso": "IT", "lat": "42.8333", - "lng": "12.8333" + "lng": "12.8333", + "name": "Italy" }, { "iso": "CI", "lat": "8", - "lng": "-5" + "lng": "-5", + "name": "Côte d'Ivoire" }, { "iso": "JM", "lat": "18.25", - "lng": "-77.5" + "lng": "-77.5", + "name": "Jamaica" }, { "iso": "JP", "lat": "36", - "lng": "138" + "lng": "138", + "name": "Japan" }, { "iso": "JE", "lat": "49.21", - "lng": "-2.13" + "lng": "-2.13", + "name": "Jersey" }, { "iso": "JO", "lat": "31", - "lng": "36" + "lng": "36", + "name": "Jordan" }, { "iso": "KZ", "lat": "48", - "lng": "68" + "lng": "68", + "name": "Kazakhstan" }, { "iso": "KE", "lat": "1", - "lng": "38" + "lng": "38", + "name": "Kenya" }, { "iso": "KI", "lat": "1.4167", - "lng": "173" + "lng": "173", + "name": "Kiribati" }, { "iso": "Democratic People's Republic of", @@ -622,67 +739,80 @@ export const countriesCoordinates = [ { "iso": "KW", "lat": "29.3375", - "lng": "47.6581" + "lng": "47.6581", + "name": "Kuwait" }, { "iso": "KG", "lat": "41", - "lng": "75" + "lng": "75", + "name": "Kyrgyzstan" }, { "iso": "LA", "lat": "18", - "lng": "105" + "lng": "105", + "name": "Lao People's Democratic Republic" }, { "iso": "LV", "lat": "57", - "lng": "25" + "lng": "25", + "name": "Latvia" }, { "iso": "LB", "lat": "33.8333", - "lng": "35.8333" + "lng": "35.8333", + "name": "Lebanon" }, { "iso": "LS", "lat": "-29.5", - "lng": "28.5" + "lng": "28.5", + "name": "Lesotho" }, { "iso": "LR", "lat": "6.5", - "lng": "-9.5" + "lng": "-9.5", + "name": "Liberia" }, { "iso": "LY", "lat": "25", - "lng": "17" + "lng": "17", + "name": "Libya" }, { "iso": "LY", "lat": "25", - "lng": "17" + "lng": "17", + "name": "Libya" }, { "iso": "LI", "lat": "47.1667", - "lng": "9.5333" + "lng": "9.5333", + "name": "Liechtenstein" }, { "iso": "LT", "lat": "56", - "lng": "24" + "lng": "24", + "name": "Lithuania" }, { "iso": "LU", "lat": "49.75", - "lng": "6.1667" + "lng": "6.1667", + "name": "Luxembourg" }, { "iso": "MO", "lat": "22.1667", - "lng": "113.55" + "lng": "113.55", + "name": "Macao" }, { "iso": "the former Yugoslav Republic of", @@ -692,62 +822,74 @@ export const countriesCoordinates = [ { "iso": "MG", "lat": "-20", - "lng": "47" + "lng": "47", + "name": "Madagascar" }, { "iso": "MW", "lat": "-13.5", - "lng": "34" + "lng": "34", + "name": "Malawi" }, { "iso": "MY", "lat": "2.5", - "lng": "112.5" + "lng": "112.5", + "name": "Malaysia" }, { "iso": "MV", "lat": "3.25", - "lng": "73" + "lng": "73", + "name": "Maldives" }, { "iso": "ML", "lat": "17", - "lng": "-4" + "lng": "-4", + "name": "Mali" }, { "iso": "MT", "lat": "35.8333", - "lng": "14.5833" + "lng": "14.5833", + "name": "Malta" }, { "iso": "MH", "lat": "9", - "lng": "168" + "lng": "168", + "name": "Marshall Islands" }, { "iso": "MQ", "lat": "14.6667", - "lng": "-61" + "lng": "-61", + "name": "Martinique" }, { "iso": "MR", "lat": "20", - "lng": "-12" + "lng": "-12", + "name": "Mauritania" }, { "iso": "MU", "lat": "-20.2833", - "lng": "57.55" + "lng": "57.55", + "name": "Mauritius" }, { "iso": "YT", "lat": "-12.8333", - "lng": "45.1667" + "lng": "45.1667", + "name": "Mayotte" }, { "iso": "MX", "lat": "23", - "lng": "-102" + "lng": "-102", + "name": "Mexico" }, { "iso": "Federated States of", @@ -762,52 +904,62 @@ export const countriesCoordinates = [ { "iso": "MC", "lat": "43.7333", - "lng": "7.4" + "lng": "7.4", + "name": "Monaco" }, { "iso": "MN", "lat": "46", - "lng": "105" + "lng": "105", + "name": "Mongolia" }, { "iso": "ME", "lat": "42", - "lng": "19" + "lng": "19", + "name": "Montenegro" }, { "iso": "MS", "lat": "16.75", - "lng": "-62.2" + "lng": "-62.2", + "name": "Montserrat" }, { "iso": "MA", "lat": "32", - "lng": "-5" + "lng": "-5", + "name": "Morocco" }, { "iso": "MZ", "lat": "-18.25", - "lng": "35" + "lng": "35", + "name": "Mozambique" }, { "iso": "MM", "lat": "22", - "lng": "98" + "lng": "98", + "name": "Myanmar" }, { "iso": "NA", "lat": "-22", - "lng": "17" + "lng": "17", + "name": "Namibia" }, { "iso": "NR", "lat": "-0.5333", - "lng": "166.9167" + "lng": "166.9167", + "name": "Nauru" }, { "iso": "NP", "lat": "28", - "lng": "84" + "lng": "84", + "name": "Nepal" }, { "iso": "AN", @@ -817,67 +969,80 @@ export const countriesCoordinates = [ { "iso": "NL", "lat": "52.5", - "lng": "5.75" + "lng": "5.75", + "name": "Netherlands" }, { "iso": "NC", "lat": "-21.5", - "lng": "165.5" + "lng": "165.5", + "name": "New Caledonia" }, { "iso": "NZ", "lat": "-41", - "lng": "174" + "lng": "174", + "name": "New Zealand" }, { "iso": "NI", "lat": "13", - "lng": "-85" + "lng": "-85", + "name": "Nicaragua" }, { "iso": "NE", "lat": "16", - "lng": "8" + "lng": "8", + "name": "Niger" }, { "iso": "NG", "lat": "10", - "lng": "8" + "lng": "8", + "name": "Nigeria" }, { "iso": "NU", "lat": "-19.0333", - "lng": "-169.8667" + "lng": "-169.8667", + "name": "Niue" }, { "iso": "NF", "lat": "-29.0333", - "lng": "167.95" + "lng": "167.95", + "name": "Norfolk Island" }, { "iso": "MP", "lat": "15.2", - "lng": "145.75" + "lng": "145.75", + "name": "Northern Mariana Islands" }, { "iso": "NO", "lat": "62", - "lng": "10" + "lng": "10", + "name": "Norway" }, { "iso": "OM", "lat": "21", - "lng": "57" + "lng": "57", + "name": "Oman" }, { "iso": "PK", "lat": "30", - "lng": "70" + "lng": "70", + "name": "Pakistan" }, { "iso": "PW", "lat": "7.5", - "lng": "134.5" + "lng": "134.5", + "name": "Palau" }, { "iso": "Occupied", @@ -887,82 +1052,98 @@ export const countriesCoordinates = [ { "iso": "PA", "lat": "9", - "lng": "-80" + "lng": "-80", + "name": "Panama" }, { "iso": "PG", "lat": "-6", - "lng": "147" + "lng": "147", + "name": "Papua New Guinea" }, { "iso": "PY", "lat": "-23", - "lng": "-58" + "lng": "-58", + "name": "Paraguay" }, { "iso": "PE", "lat": "-10", - "lng": "-76" + "lng": "-76", + "name": "Peru" }, { "iso": "PH", "lat": "13", - "lng": "122" + "lng": "122", + "name": "Philippines" }, { "iso": "PN", "lat": "-24.7", - "lng": "-127.4" + "lng": "-127.4", + "name": "Pitcairn" }, { "iso": "PL", "lat": "52", - "lng": "20" + "lng": "20", + "name": "Poland" }, { "iso": "PT", "lat": "39.5", - "lng": "-8" + "lng": "-8", + "name": "Portugal" }, { "iso": "PR", "lat": "18.25", - "lng": "-66.5" + "lng": "-66.5", + "name": "Puerto Rico" }, { "iso": "QA", "lat": "25.5", - "lng": "51.25" + "lng": "51.25", + "name": "Qatar" }, { "iso": "RE", "lat": "-21.1", - "lng": "55.6" + "lng": "55.6", + "name": "Réunion" }, { "iso": "RO", "lat": "46", - "lng": "25" + "lng": "25", + "name": "Romania" }, { "iso": "RU", "lat": "60", - "lng": "100" + "lng": "100", + "name": "Russian Federation" }, { "iso": "RU", "lat": "60", - "lng": "100" + "lng": "100", + "name": "Russian Federation" }, { "iso": "RW", "lat": "-2", - "lng": "30" + "lng": "30", + "name": "Rwanda" }, { "iso": "BL", "lat": "17.897728", - "lng": "-62.834244" + "lng": "-62.834244", + "name": "Saint Barthélemy" }, { "iso": "Ascension and Tristan da Cunha", @@ -972,182 +1153,218 @@ export const countriesCoordinates = [ { "iso": "KN", "lat": "17.3333", - "lng": "-62.75" + "lng": "-62.75", + "name": "Saint Kitts and Nevis" }, { "iso": "LC", "lat": "13.8833", - "lng": "-61.1333" + "lng": "-61.1333", + "name": "Saint Lucia" }, { "iso": "MF", "lat": "18.075278", - "lng": "-63.06" + "lng": "-63.06", + "name": "Saint Martin (French part)" }, { "iso": "PM", "lat": "46.8333", - "lng": "-56.3333" + "lng": "-56.3333", + "name": "Saint Pierre and Miquelon" }, { "iso": "VC", "lat": "13.25", - "lng": "-61.2" + "lng": "-61.2", + "name": "Saint Vincent and the Grenadines" }, { "iso": "VC", "lat": "13.25", - "lng": "-61.2" + "lng": "-61.2", + "name": "Saint Vincent and the Grenadines" }, { "iso": "WS", "lat": "-13.5833", - "lng": "-172.3333" + "lng": "-172.3333", + "name": "Samoa" }, { "iso": "SM", "lat": "43.7667", - "lng": "12.4167" + "lng": "12.4167", + "name": "San Marino" }, { "iso": "ST", "lat": "1", - "lng": "7" + "lng": "7", + "name": "Sao Tome and Principe" }, { "iso": "SA", "lat": "25", - "lng": "45" + "lng": "45", + "name": "Saudi Arabia" }, { "iso": "SN", "lat": "14", - "lng": "-14" + "lng": "-14", + "name": "Senegal" }, { "iso": "RS", "lat": "44", - "lng": "21" + "lng": "21", + "name": "Serbia" }, { "iso": "SC", "lat": "-4.5833", - "lng": "55.6667" + "lng": "55.6667", + "name": "Seychelles" }, { "iso": "SL", "lat": "8.5", - "lng": "-11.5" + "lng": "-11.5", + "name": "Sierra Leone" }, { "iso": "SG", "lat": "1.3667", - "lng": "103.8" + "lng": "103.8", + "name": "Singapore" }, { "iso": "SX", "lat": "18.033333", - "lng": "-63.05" + "lng": "-63.05", + "name": "Sint Maarten (Dutch part)" }, { "iso": "SK", "lat": "48.6667", - "lng": "19.5" + "lng": "19.5", + "name": "Slovakia" }, { "iso": "SI", "lat": "46", - "lng": "15" + "lng": "15", + "name": "Slovenia" }, { "iso": "SB", "lat": "-8", - "lng": "159" + "lng": "159", + "name": "Solomon Islands" }, { "iso": "SO", "lat": "10", - "lng": "49" + "lng": "49", + "name": "Somalia" }, { "iso": "ZA", "lat": "-29", - "lng": "24" + "lng": "24", + "name": "South Africa" }, { "iso": "GS", "lat": "-54.5", - "lng": "-37" + "lng": "-37", + "name": "South Georgia and the South Sandwich Islands" }, { "iso": "KR", "lat": "37", - "lng": "127.5" + "lng": "127.5", + "name": "Korea, Republic of" }, { "iso": "SS", "lat": "8", - "lng": "30" + "lng": "30", + "name": "South Sudan" }, { "iso": "ES", "lat": "40", - "lng": "-4" + "lng": "-4", + "name": "Spain" }, { "iso": "LK", "lat": "7", - "lng": "81" + "lng": "81", + "name": "Sri Lanka" }, { "iso": "VC", "lat": "13.25", - "lng": "-61.2" + "lng": "-61.2", + "name": "Saint Vincent and the Grenadines" }, { "iso": "SD", "lat": "15", - "lng": "30" + "lng": "30", + "name": "Sudan" }, { "iso": "SR", "lat": "4", - "lng": "-56" + "lng": "-56", + "name": "Suriname" }, { "iso": "SJ", "lat": "78", - "lng": "20" + "lng": "20", + "name": "Svalbard and Jan Mayen" }, { "iso": "SZ", "lat": "-26.5", - "lng": "31.5" + "lng": "31.5", + "name": "Swaziland" }, { "iso": "SE", "lat": "62", - "lng": "15" + "lng": "15", + "name": "Sweden" }, { "iso": "CH", "lat": "47", - "lng": "8" + "lng": "8", + "name": "Switzerland" }, { "iso": "SY", "lat": "35", - "lng": "38" + "lng": "38", + "name": "Syrian Arab Republic" }, { "iso": "TW", "lat": "23.5", - "lng": "121" + "lng": "121", + "name": "Taiwan, Province of China" }, { "iso": "TJ", "lat": "39", - "lng": "71" + "lng": "71", + "name": "Tajikistan" }, { "iso": "United Republic of", @@ -1157,102 +1374,122 @@ export const countriesCoordinates = [ { "iso": "TH", "lat": "15", - "lng": "100" + "lng": "100", + "name": "Thailand" }, { "iso": "TL", "lat": "-8.55", - "lng": "125.5167" + "lng": "125.5167", + "name": "Timor-Leste" }, { "iso": "TG", "lat": "8", - "lng": "1.1667" + "lng": "1.1667", + "name": "Togo" }, { "iso": "TK", "lat": "-9", - "lng": "-172" + "lng": "-172", + "name": "Tokelau" }, { "iso": "TO", "lat": "-20", - "lng": "-175" + "lng": "-175", + "name": "Tonga" }, { "iso": "TT", "lat": "11", - "lng": "-61" + "lng": "-61", + "name": "Trinidad and Tobago" }, { "iso": "TN", "lat": "34", - "lng": "9" + "lng": "9", + "name": "Tunisia" }, { "iso": "TR", "lat": "39", - "lng": "35" + "lng": "35", + "name": "Turkey" }, { "iso": "TM", "lat": "40", - "lng": "60" + "lng": "60", + "name": "Turkmenistan" }, { "iso": "TC", "lat": "21.75", - "lng": "-71.5833" + "lng": "-71.5833", + "name": "Turks and Caicos Islands" }, { "iso": "TV", "lat": "-8", - "lng": "178" + "lng": "178", + "name": "Tuvalu" }, { "iso": "UG", "lat": "1", - "lng": "32" + "lng": "32", + "name": "Uganda" }, { "iso": "UA", "lat": "49", - "lng": "32" + "lng": "32", + "name": "Ukraine" }, { "iso": "AE", "lat": "24", - "lng": "54" + "lng": "54", + "name": "United Arab Emirates" }, { "iso": "GB", "lat": "54", - "lng": "-2" + "lng": "-2", + "name": "United Kingdom" }, { "iso": "UM", "lat": "19.2833", - "lng": "166.6" + "lng": "166.6", + "name": "United States Minor Outlying Islands" }, { "iso": "US", "lat": "38", - "lng": "-97" + "lng": "-97", + "name": "United States" }, { "iso": "UY", "lat": "-33", - "lng": "-56" + "lng": "-56", + "name": "Uruguay" }, { "iso": "UZ", "lat": "41", - "lng": "64" + "lng": "64", + "name": "Uzbekistan" }, { "iso": "VU", "lat": "-16", - "lng": "167" + "lng": "167", + "name": "Vanuatu" }, { "iso": "Bolivarian Republic of", @@ -1262,17 +1499,20 @@ export const countriesCoordinates = [ { "iso": "VE", "lat": "8", - "lng": "-66" + "lng": "-66", + "name": "Venezuela, Bolivarian Republic of" }, { "iso": "VN", "lat": "16", - "lng": "106" + "lng": "106", + "name": "Viet Nam" }, { "iso": "VN", "lat": "16", - "lng": "106" + "lng": "106", + "name": "Viet Nam" }, { "iso": "British", @@ -1287,26 +1527,31 @@ export const countriesCoordinates = [ { "iso": "WF", "lat": "-13.3", - "lng": "-176.2" + "lng": "-176.2", + "name": "Wallis and Futuna" }, { "iso": "EH", "lat": "24.5", - "lng": "-13" + "lng": "-13", + "name": "Western Sahara" }, { "iso": "YE", "lat": "15", - "lng": "48" + "lng": "48", + "name": "Yemen" }, { "iso": "ZM", "lat": "-15", - "lng": "30" + "lng": "30", + "name": "Zambia" }, { "iso": "ZW", "lat": "-20", - "lng": "30" + "lng": "30", + "name": "Zimbabwe" } ] \ No newline at end of file diff --git a/src/routes/dashboard/peers.css b/src/routes/dashboard/peers.css index e017a11..7f308ee 100644 --- a/src/routes/dashboard/peers.css +++ b/src/routes/dashboard/peers.css @@ -1,10 +1,41 @@ -.peers-map, -.peers-table { +.peers-map { max-width: 1000px; - margin: auto; + width: 100%; } .peers-table { margin-top: 1rem; - width: 100%; + width: calc(100% - 4rem); + max-width: calc(1000px - 4rem); +} + +.peers { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 4rem; + padding-left: 2rem; + padding-right: 2rem; +} + +.peers circle[fill="#d6ff79"] { + /* fill: yellow; */ + animation: dash 3s linear infinite; + stroke: white; + stroke-width: 0.6px; + stroke-dasharray: 0.3; +} + +@keyframes dash { + from { + stroke-dashoffset: 2; + } + to { + stroke-dashoffset: 0; + } +} +@keyframes circleAn { + to { + /* stroke-dashoffset: 100px; */ + } } diff --git a/src/routes/dashboard/peers.tsx b/src/routes/dashboard/peers.tsx index b0f836e..6682e60 100644 --- a/src/routes/dashboard/peers.tsx +++ b/src/routes/dashboard/peers.tsx @@ -53,7 +53,7 @@ export const Route = createFileRoute("/dashboard/peers")({ map.addPin({ lat: pin.lat, lng: pin.lng, - svgOptions: { color: "#d6ff79", radius: 0.4 * quantity }, + svgOptions: { color: "#d6ff79", radius: 0.8 * quantity }, }) ); @@ -85,14 +85,18 @@ export const Route = createFileRoute("/dashboard/peers")({ )) || []; return ( - <> - + {/* + /> */} + +
- + ); }, });