improve

package.json

@@ -1,4 +1,14 @@
 {
+  "name": "PRENDICO",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start:disaster-api": "cd disaster-api && npm run start",
+    "start:phoneNumber-api": "cd phoneNumber-api && npm run start",
+    "start:ui": "cd ui && npm run dev",
+    "start:chain": "cd proto-kit/packages/chain && pnpm run dev",
+    "demo": "npm run start:ui & npm run start:disaster-api & npm run start:phoneNumber-api & npm run start:ui"
+  },
   "dependencies": {
     "degit": "^2.8.4",
     "pnpm": "^8.10.5"

proto-kit/apps/web/containers/async-page.tsx

@@ -2,23 +2,15 @@
 import { Faucet } from "@/components/faucet";
 import { useFaucet } from "@/lib/stores/balances";
 import { useWalletStore } from "@/lib/stores/wallet";
+import Content from "./content";
 
 export default function Home() {
   const wallet = useWalletStore();
   const drip = useFaucet();
 
   return (
-    <div className="mx-auto -mt-32 h-full pt-16">
-      <div className="flex h-full w-full items-center justify-center pt-16">
-        <div className="flex basis-4/12 flex-col items-center justify-center 2xl:basis-3/12">
-          <Faucet
-            wallet={wallet.wallet}
-            onConnectWallet={wallet.connectWallet}
-            onDrip={drip}
-            loading={false}
-          />
-        </div>
-      </div>
+    <div>
+      <Content />
     </div>
   );
 }

proto-kit/apps/web/containers/content.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Typography, Card } from "@mui/material";
+import MultiStepForm from "./multiStepForm";
+import WarningIcon from "@mui/icons-material/Warning";
+
+const WarningBox = ({ message }: { message: string }) => {
+  return (
+    <Card
+      sx={{
+        maxWidth: 350,
+        margin: "auto",
+        marginTop: 4,
+        backgroundColor: "rgba(255, 204, 203, 0.35)",
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      <WarningIcon color="error" sx={{ fontSize: 35, m: 2 }} />
+      <Typography
+        variant="h6"
+        align="left"
+        color="error"
+        sx={{ fontSize: 15, m: 2 }}
+      >
+        {message}
+      </Typography>
+    </Card>
+  );
+};
+
+export default function Content() {
+  return (
+    <div>
+      <WarningBox
+        message={"Please be sure to create your Auro wallet before signing"}
+      />
+      <MultiStepForm />
+    </div>
+  );
+}

proto-kit/apps/web/containers/forms/formOne.tsx

@@ -0,0 +1,136 @@
+import {
+  TextField,
+  Typography,
+  Box,
+  CircularProgress,
+  Button,
+} from "@mui/material";
+import { useState } from "react";
+
+type FormProps = {
+  onNextStep: () => void;
+  userId: number;
+};
+
+export default function FormOne({ onNextStep, userId }: FormProps) {
+  const [identityNumber, setIdentityNumber] = useState("");
+  const [verificationCode, setVerificationCode] = useState("");
+  const [haveVerificationCode, setHaveVerificationCode] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [phoneNumberError, setPhoneNumberError] = useState("");
+  const [verificationCodeError, setVerificationCodeError] = useState("");
+
+  const handleNext = async () => {
+    setLoading(true);
+
+    const phoneNumber = identityNumber.trim();
+
+    // Validate phone number
+    // Update the regular expression for phone number validation
+    const isValidPhoneNumber =
+      /^(\+\d{1,2}\s?)?(\(\d{1,4}\)|\d{1,4})\s?\d{1,15}$/.test(
+        identityNumber.trim()
+      );
+    if (!isValidPhoneNumber) {
+      setPhoneNumberError("Invalid phone number");
+      setLoading(false);
+      return;
+    }
+
+    // Continue with API call
+    const firstEndpoint = `http://localhost:8081/verificationcode?phoneNumber=${phoneNumber}`;
+
+    try {
+      const firstResponse = await fetch(firstEndpoint);
+
+      if (!firstResponse.ok) {
+        throw new Error(`HTTP error! Status: ${firstResponse.status}`);
+      }
+      const firstData = await firstResponse.json();
+      setHaveVerificationCode(true);
+      console.log("First Response:", firstData);
+    } catch (error) {
+      console.error("Error calling API:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSecondEndpoint = async () => {
+    const secondEndpoint = `http://localhost:8081/verifycode?verificationCode=${verificationCode}&userSessionId=${userId}&phoneNumber=${identityNumber.trim()}`;
+
+    try {
+      const secondResponse = await fetch(secondEndpoint);
+
+      if (!secondResponse.ok) {
+        throw new Error(`HTTP error! Status: ${secondResponse.status}`);
+      }
+
+      const secondData = await secondResponse.json();
+      console.log("Second Response:", secondData);
+
+      onNextStep(); // Move to the next step after calling the second endpoint
+    } catch (error) {
+      console.error("Error calling second API:", error);
+      setVerificationCodeError("Error verifying code. Please try again."); // Display validation error
+    }
+  };
+
+  return (
+    <Box sx={{ width: "100%", mx: 4 }}>
+      <Typography variant="h6" gutterBottom>
+        Fill it
+      </Typography>
+      <TextField
+        label="Telephone Number"
+        variant="outlined"
+        fullWidth
+        value={identityNumber}
+        onChange={(e) => {
+          setIdentityNumber(e.target.value);
+          setPhoneNumberError("");
+        }}
+        margin="normal"
+        error={!!phoneNumberError}
+        helperText={phoneNumberError}
+      />
+      {loading ? (
+        <CircularProgress />
+      ) : (
+        <div>
+          <Button
+            variant="contained"
+            onClick={handleNext}
+            disabled={!identityNumber.trim() || !!phoneNumberError} // Disable if validation error or identityNumber is empty
+          >
+            Get Verification Code
+          </Button>
+          {haveVerificationCode && (
+            <div>
+              <TextField
+                label="Verification Code"
+                variant="outlined"
+                fullWidth
+                value={verificationCode}
+                onChange={(e) => {
+                  setVerificationCode(e.target.value);
+                  setVerificationCodeError("");
+                }}
+                margin="normal"
+                error={!!verificationCodeError}
+                helperText={verificationCodeError}
+              />
+              <Button
+                variant="contained"
+                onClick={handleSecondEndpoint}
+                disabled={!verificationCode.trim() || !!verificationCodeError} // Disable if validation error or verificationCode is empty
+              >
+                Verify My Code
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </Box>
+  );
+}

proto-kit/apps/web/containers/forms/formThree.tsx

@@ -0,0 +1,60 @@
+import { Button } from "@mui/material";
+import { Client, useClientStore } from "../../lib/stores/client";
+import { PendingTransaction, UnsignedTransaction } from "@proto-kit/sequencer";
+import { PublicKey } from "o1js";
+import { useWalletStore } from "../../lib/stores/wallet";
+
+type FormProps = {
+  onNextStep: () => void;
+  userId: number;
+  wallet: string;
+};
+
+function isPendingTransaction(
+  transaction: PendingTransaction | UnsignedTransaction | undefined,
+): asserts transaction is PendingTransaction {
+  if (!(transaction instanceof PendingTransaction))
+    throw new Error("Transaction is not a PendingTransaction");
+}
+
+export default function FormThree({ onNextStep, userId }: FormProps) {
+  const client = useClientStore();
+  const wallet = useWalletStore();
+
+  const handleNext = async () => {
+    if (!client.client || !wallet.wallet) return;
+
+    const compensation = client.client.runtime.resolve("Compensation");
+    console.log("wallet", wallet);
+    const sender = PublicKey.fromBase58(wallet.wallet);
+    console.log("sender", sender);
+    const tx = await client.client.transaction(sender, () => {
+      compensation.setupPublicKeys(
+        PublicKey.fromBase58(
+          "B62qrh9Bq48KUBTg1ifbKx8SHMKVGW8Ktw7qsd3TQvjzdLCyTbWhVes",
+        ),
+        PublicKey.fromBase58(
+          "B62qqf7eHpJ5ZjKFoYoyxknWEVB1Ppi18gmUQpp8Ck6SoTND7HFinaB",
+        ),
+      );
+    });
+
+    await tx.sign();
+    await tx.send();
+
+    // isPendingTransaction(tx.transaction);
+    // wallet.addPendingTransaction(tx.transaction);
+
+    // //move to the next step
+    // // onNextStep();
+    console.log("success");
+  };
+
+  return (
+    <div>
+      <Button variant="contained" onClick={handleNext} sx={{ mt: 2 }}>
+        Claim Compensation
+      </Button>
+    </div>
+  );
+}

proto-kit/apps/web/containers/forms/formTwo.tsx

@@ -0,0 +1,45 @@
+import { Button, CircularProgress } from "@mui/material";
+import { useState } from "react";
+
+type FormProps = {
+  onNextStep: () => void;
+  userId: number;
+};
+
+export default function FormTwo({ onNextStep, userId }: FormProps) {
+  const [loading, setLoading] = useState(false);
+
+  const handleNext = async () => {
+    setLoading(true);
+
+    const disasterEndpoint = `http://localhost:8080/disaster?userSessionId=${userId}`;
+
+    try {
+      const response = await fetch(disasterEndpoint);
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      console.log(data);
+      onNextStep();
+    } catch (error) {
+      console.error("Error calling API:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      {loading ? (
+        <CircularProgress />
+      ) : (
+        <Button variant="contained" onClick={handleNext}>
+          Prove My Geolocation
+        </Button>
+      )}
+    </div>
+  );
+}