Merge pull request #8 from krsbx/vpn-maps

feat: vpn maps

.vscode/settings.json

@@ -2,5 +2,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": true,
     "source.sortImports": true
-  }
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

electron/preload.ts

@@ -1,4 +1,5 @@
 import { contextBridge, ipcRenderer } from 'electron';
+import { decrypt, encrypt } from '../src/crypto';
 
 // See the Electron documentation for details on how to use preload scripts:
 // https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
@@ -7,3 +8,5 @@ contextBridge.exposeInMainWorld('ipcRenderer', {
   ...ipcRenderer,
   on: ipcRenderer.on.bind(ipcRenderer),
 });
+contextBridge.exposeInMainWorld('encrypt', encrypt);
+contextBridge.exposeInMainWorld('decrypt', decrypt);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tunnelbear-vpn",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "dist-electron/main.js",
   "description": "Project created with create-roses-electron",
   "scripts": {
@@ -30,10 +30,10 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@hookform/resolvers": "^2.9.10",
-    "@monaco-editor/react": "^4.4.6",
     "@types/aes-js": "^3.1.1",
     "@types/electron-json-storage": "^4.5.0",
     "@types/file-saver": "^2.0.5",
+    "@types/leaflet": "^1.9.0",
     "@types/lodash": "^4.14.191",
     "@types/node": "^18.11.13",
     "@types/react": "^18.0.26",
@@ -42,6 +42,7 @@
     "@typescript-eslint/eslint-plugin": "^5.46.1",
     "@typescript-eslint/parser": "^5.46.1",
     "@vitejs/plugin-react": "^3.0.0",
+    "aes-js": "^3.1.2",
     "electron": "^22.0.0",
     "electron-builder": "^23.6.0",
     "electron-json-storage": "^4.6.0",
@@ -50,14 +51,17 @@
     "framer-motion": "^7.6.19",
     "fs-extra": "^11.1.0",
     "husky": "^8.0.2",
+    "leaflet": "^1.9.3",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-github-corner": "^2.5.0",
     "react-hook-form": "^7.43.0",
     "react-icons": "^4.7.1",
+    "react-leaflet": "^4.2.0",
     "split-pane-react": "^0.1.3",
     "store": "^2.0.12",
+    "sudo-prompt": "^9.2.1",
     "ts-node": "^10.9.1",
     "type-fest": "^3.5.5",
     "typescript": "^4.9.4",
@@ -68,7 +72,5 @@
     "zod": "^3.20.2"
   },
   "dependencies": {
-    "aes-js": "^3.1.2",
-    "sudo-prompt": "^9.2.1"
   }
 }

src/App.tsx

@@ -1,11 +1,11 @@
 import { Flex, useDisclosure } from '@chakra-ui/react';
 import _ from 'lodash';
 import React from 'react';
+import MapView from './components/MapView';
 import Credentials from './components/modals/Credentials';
 import ProcessingOverlay from './components/ProcessingOverlay';
 import StatusBar from './components/StatusBar';
 import TopBar from './components/TopBar';
-import VpnSelection from './components/VpnSelection';
 import useAppStateListener from './hooks/useAppStateListener';
 import useStoragePopulator from './hooks/useStoragePopulator';
 
@@ -19,14 +19,13 @@ const App: React.FC = () => {
     <Flex
       width={'100vw'}
       height={'100vh'}
-      rowGap={2}
       flexDirection={'column'}
       position={'relative'}
       overflow={'hidden'}
     >
       <TopBar onOpen={onOpen} />
       <StatusBar />
-      <VpnSelection />
+      <MapView />
       <ProcessingOverlay />
       <Credentials isOpen={isOpen} onClose={onClose} />
     </Flex>

src/components/MapView.tsx

@@ -0,0 +1,68 @@
+import { Box } from '@chakra-ui/react';
+import { Map } from 'leaflet';
+import _ from 'lodash';
+import React, { createRef } from 'react';
+import { MapContainer, TileLayer } from 'react-leaflet';
+import useAppContext from '../hooks/useAppContext';
+import { LAT_LNG } from '../utils/constant';
+import Tunnel from './Tunnel';
+
+const MapView = () => {
+  const {
+    state: { vpns },
+  } = useAppContext();
+
+  const mapRef = createRef<Map>();
+
+  return (
+    <Box
+      id={'map-container'}
+      width={'100%'}
+      height={'calc(100vh - 40px)'}
+      position={'relative'}
+    >
+      <MapContainer
+        center={[-0.789275, 113.921327]}
+        zoom={4}
+        minZoom={3}
+        maxZoom={5}
+        scrollWheelZoom={false}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+        attributionControl={false}
+        maxBounds={[
+          [81.427274, -173.201662],
+          [-84.136577, 178.66761],
+        ]}
+        ref={mapRef}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url={
+            'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}'
+          }
+        />
+        {_.map(vpns, (config, key) => {
+          const countryData = LAT_LNG.find(({ country }) =>
+            key.includes(country)
+          );
+
+          if (!countryData) return;
+
+          return (
+            <Tunnel
+              position={countryData.position}
+              config={config}
+              mapRef={mapRef}
+              key={key}
+            />
+          );
+        })}
+      </MapContainer>
+    </Box>
+  );
+};
+
+export default MapView;