Whatsapp service updates

packages/bridge-ui/components/Detail.tsx

@@ -22,6 +22,7 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
     [service]: { entity, table, displayName, displayFields: fields },
   } = serviceConfig;
   const id = row.id as string;
+  const token = row.token as string;
   const deleteAction = generateDeleteAction({ entity, table });
   const router = useRouter();
   const { almostBlack } = colors;
@@ -76,7 +77,9 @@ export const Detail: FC<DetailProps> = ({ service, row }) => {
                   name={field.name}
                   label={field.label}
                   getValue={field.getValue}
-                  id={row["id"] as string}
+                  refreshInterval={field.refreshInterval}
+                  token={token}
+                  verified={row.verified as boolean}
                   helperText={field.helperText}
                 />
               )}

packages/bridge-ui/components/Home.tsx

@@ -1,5 +1,10 @@
 import { FC } from "react";
+import { Box } from "@mui/material";
 
 export const Home: FC = () => {
-  return <h1>Home</h1>;
+  return (
+    <Box sx={{ p: 3, fontSize: 30, fontWeight: "bold", textAlign: "center" }}>
+      Overview
+    </Box>
+  );
 };

packages/bridge-ui/components/QRCode.tsx

@@ -6,7 +6,8 @@ import { colors } from "../styles/theme";
 type QRCodeProps = {
   name: string;
   label: string;
-  id: string;
+  token: string;
+  verified: boolean;
   helperText?: string;
   getValue?: (id: string) => Promise<string>;
   refreshInterval?: number;
@@ -15,7 +16,8 @@ type QRCodeProps = {
 export const QRCode: FC<QRCodeProps> = ({
   name,
   label,
-  id,
+  token,
+  verified,
   helperText,
   getValue,
   refreshInterval,
@@ -24,19 +26,19 @@ export const QRCode: FC<QRCodeProps> = ({
   const { white } = colors;
 
   useEffect(() => {
-    if (getValue && refreshInterval) {
+    if (!verified && getValue && refreshInterval) {
       const interval = setInterval(async () => {
-        const result = await getValue(id);
+        const result = await getValue(token);
         setValue(result);
-      }, refreshInterval);
+      }, refreshInterval * 1000);
       return () => clearInterval(interval);
     }
   }, [getValue, refreshInterval]);
 
-  return (
+  return !verified ? (
     <Box sx={{ backgroundColor: white, m: 2 }}>
       <QRCodeInternal value={value} />
       <Box>{helperText}</Box>
     </Box>
-  );
+  ) : null;
 };