+
);
}
diff --git a/packages/react-app/src/components/ParcelInfo.tsx b/packages/react-app/src/components/ParcelInfo.tsx
new file mode 100644
index 00000000..28873997
--- /dev/null
+++ b/packages/react-app/src/components/ParcelInfo.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { timesAgo, tsToDate } from "../utils";
+import IconChart from "../assets/images/icon-chart.png";
+import IconGlobe from "../assets/images/icon-globe.svg";
+interface SensorData {
+ snr: number;
+ vbat: number;
+ latitude: number;
+ longitude: number;
+ gas_resistance: number;
+ temperature: number;
+ pressure: number;
+ humidity: number;
+ light: number;
+ temperature2: number;
+ gyroscope: [number, number, number];
+ accelerometer: [number, number, number];
+ timestamp: string;
+ random: string;
+}
+interface Props {
+ sensorData: SensorData;
+}
+interface DataBoxProps {
+ value: string;
+ label: string;
+ unit?: string;
+}
+function DataBox({ value, label, unit }: DataBoxProps): JSX.Element {
+ return (
+
+
+ PARCEL 0
+
+
+
+ 
+
+ );
+}
+export default function ParcelInfo({ sensorData }: Props): JSX.Element {
+ const { temperature, pressure, humidity, gas_resistance, timestamp, latitude, longitude } = sensorData;
+ const localisedTime = new Date().toLocaleTimeString("en-US", {
+ timeZone: "America/Denver",
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+ const fetchedTime = tsToDate(timestamp);
+
+ return (
+
+ {value}
+
+
+ {label}
+
+ {unit}
+
+
+ );
+}
diff --git a/packages/react-app/src/components/index.ts b/packages/react-app/src/components/index.ts
index 96edb57c..26f98646 100644
--- a/packages/react-app/src/components/index.ts
+++ b/packages/react-app/src/components/index.ts
@@ -12,3 +12,4 @@ export { default as LogoDisplay } from "./LogoDisplay";
export { default as Header } from "./Header";
export { default as ConnectWalletButton } from "./ConnectWalletButton";
export { default as SearchPlots } from "./SearchPlots";
+export { default as ParcelInfo } from "./ParcelInfo";
diff --git a/packages/react-app/src/containers/ParcelInfoContainer.tsx b/packages/react-app/src/containers/ParcelInfoContainer.tsx
new file mode 100644
index 00000000..c8d0d29c
--- /dev/null
+++ b/packages/react-app/src/containers/ParcelInfoContainer.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { gql, useQuery, InMemoryCache, ApolloClient } from "@apollo/client";
+import { ParcelInfo } from "../components";
+
+const PEBBLE_DEVICE_ID = "351358813276802";
+const pebbleUri = "https://pebble.iotex.me/v1/graphql";
+
+const pebbleClient = new ApolloClient({
+ uri: pebbleUri,
+ cache: new InMemoryCache(),
+});
+
+const GET_SENSOR_DATA = gql`
+ query getDevices($deviceId: String!) {
+ pebble_device_record(
+ limit: 1
+ order_by: { timestamp: desc }
+ where: { imei: { _eq: $deviceId }, latitude: { _neq: "200.0000000" } }
+ ) {
+ temperature
+ humidity
+ gas_resistance
+ pressure
+ latitude
+ longitude
+ timestamp
+ }
+ }
+`;
+
+function ParcelInfoContainer(): JSX.Element {
+ const { loading, error, data } = useQuery(GET_SENSOR_DATA, {
+ variables: { deviceId: PEBBLE_DEVICE_ID },
+ client: pebbleClient,
+ });
+ if (loading) return
+ 
+
+
+ {latitude}, {longitude}
+
+ BENNET CREEK ROAD, POWELL WYOMING 82435 +
+ + BENNET CREEK ROAD, POWELL WYOMING 82435 +
It’s currently {localisedTime}
[-7 GMT] -------------- Last transmissoin
+ ~{timesAgo(fetchedTime)} ago{" "}
+
+ view on MachineFi
+
+
+
+ Sensor Data Loading ...
; + if (error) console.log(error); + if (error) returnSensor Data Load Failed.
; + console.log(data?.pebble_device_record[0]); + return