Add device ip (#18)

* Add device ip

* Use ip address instead of hardware address

package-lock.json

@@ -34,6 +34,7 @@
         "fs-extra": "^10.0.0",
         "html-webpack-plugin": "^5.5.0",
         "identity-obj-proxy": "^3.0.0",
+        "ip-bigint": "^5.0.3",
         "jest": "^27.4.3",
         "jest-resolve": "^27.4.2",
         "jest-watch-typeahead": "^1.0.0",
@@ -8915,6 +8916,28 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ip-bigint": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/ip-bigint/-/ip-bigint-5.0.3.tgz",
+      "integrity": "sha512-Tvl0inX9ACOQ0eLKg89nz2gS0l/bxvkqSDs43q4KWUaA2ZlDdeCXNtMx/EEoXPSuLEgWn9Zyr3Ze5N0EpYRnFQ==",
+      "dependencies": {
+        "ip-regex": "5.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/ip-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-5.0.0.tgz",
+      "integrity": "sha512-fOCG6lhoKKakwv+C6KdsOnGvgXnmgfmp0myi3bcNwj3qfwPAxRKWEuFhvEFF7ceYIz6+1jRZ+yguLFAmUNPEfw==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "license": "MIT",
@@ -21909,6 +21932,19 @@
         "side-channel": "^1.0.4"
       }
     },
+    "ip-bigint": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/ip-bigint/-/ip-bigint-5.0.3.tgz",
+      "integrity": "sha512-Tvl0inX9ACOQ0eLKg89nz2gS0l/bxvkqSDs43q4KWUaA2ZlDdeCXNtMx/EEoXPSuLEgWn9Zyr3Ze5N0EpYRnFQ==",
+      "requires": {
+        "ip-regex": "5.0.0"
+      }
+    },
+    "ip-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-5.0.0.tgz",
+      "integrity": "sha512-fOCG6lhoKKakwv+C6KdsOnGvgXnmgfmp0myi3bcNwj3qfwPAxRKWEuFhvEFF7ceYIz6+1jRZ+yguLFAmUNPEfw=="
+    },
     "ipaddr.js": {
       "version": "2.0.1"
     },

package.json

@@ -29,6 +29,7 @@
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
+    "ip-bigint": "^5.0.3",
     "jest": "^27.4.3",
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",

src/components/tracker/TrackerSettings.tsx

@@ -1,3 +1,4 @@
+import { stringifyIp } from 'ip-bigint';
 import { Quaternion } from 'math3d';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -179,6 +180,18 @@ export function TrackerSettingsPage() {
                 {tracker?.tracker.info?.customName || '--'}
               </Typography>
             </div>
+            <div className="flex justify-between">
+              <Typography color="secondary">Tracker URL</Typography>
+              <Typography>
+                udp://
+                {stringifyIp({
+                  number: BigInt(
+                    tracker?.device?.hardwareInfo?.ipAddress?.addr || 0
+                  ),
+                  version: 4,
+                })}
+              </Typography>
+            </div>
           </div>
         </div>
         <div className="flex flex-col flex-grow  bg-background-70 rounded-lg p-5 gap-3">

src/components/tracker/TrackersTable.tsx

@@ -12,6 +12,7 @@ import { Typography } from '../commons/Typography';
 import { TrackerBattery } from './TrackerBattery';
 import { TrackerStatus } from './TrackerStatus';
 import { TrackerWifi } from './TrackerWifi';
+import { stringifyIp } from 'ip-bigint';
 
 export function TrackerNameCol({ tracker }: { tracker: TrackerDataT }) {
   const { useName } = useTracker(tracker);
@@ -86,6 +87,8 @@ export function TrackersTable({
 }) {
   const [hoverTracker, setHoverTracker] = useState<TrackerIdT | null>(null);
 
+  console.log(flatTrackers);
+
   const trackerEqual = (id: TrackerIdT | null) =>
     id?.trackerNum == hoverTracker?.trackerNum &&
     (!id?.deviceId || id.deviceId.id == hoverTracker?.deviceId?.id);
@@ -205,6 +208,7 @@ export function TrackersTable({
       </div>
       <div className="flex flex-col gap-2 flex-grow">
         <div className="flex px-3">URL</div>
+
         {flatTrackers.map(({ device, tracker }, index) => (
           <RowContainer
             key={index}
@@ -214,7 +218,13 @@ export function TrackersTable({
             onMouseOver={() => setHoverTracker(tracker.trackerId)}
             onMouseOut={() => setHoverTracker(null)}
           >
-            <Typography color="secondary">{device?.customName}</Typography>
+            <Typography color="secondary">
+              udp://
+              {stringifyIp({
+                number: BigInt(device?.hardwareInfo?.ipAddress?.addr || 0),
+                version: 4,
+              })}
+            </Typography>
           </RowContainer>
         ))}
       </div>

src/gobals.d.ts

@@ -0,0 +1,7 @@
+declare module 'ip-bigint' {
+  function stringifyIp(options: {
+    number: bigint;
+    version: 4 | 6;
+    ipv4mapped?: boolean;
+  }): string;
+}