fix: merge conflicts with branch testnet

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+bun.lockb
 
 # testing
 /coverage

components/UI/inputHelper.tsx

@@ -0,0 +1,45 @@
+import React, { FunctionComponent, ReactNode } from "react";
+import { Tooltip, TooltipProps, styled, tooltipClasses } from "@mui/material";
+import InfoIcon from "./iconsComponents/icons/infoIcon";
+
+type InputHelperProps = {
+  children: ReactNode;
+  helperText?: string;
+  error?: boolean;
+};
+
+const StyledToolTip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} arrow classes={{ popper: className }} />
+))(() => ({
+  [`& .${tooltipClasses.arrow}`]: {
+    color: "#454545",
+  },
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: "#454545",
+  },
+}));
+
+const InputHelper: FunctionComponent<InputHelperProps> = ({
+  children,
+  helperText,
+  error = false,
+}) => {
+  return (
+    <div className="relative">
+      {children}
+      {helperText ? (
+        <StyledToolTip
+          className="cursor-pointer"
+          title={helperText}
+          placement="top"
+        >
+          <div className="absolute top-1/2 -translate-y-1/2 right-2 bg-white">
+            <InfoIcon width="28px" color={error ? "red" : "#454545"} />
+          </div>
+        </StyledToolTip>
+      ) : null}
+    </div>
+  );
+};
+
+export default InputHelper;

components/UI/navbar.tsx

@@ -137,7 +137,7 @@ const Navbar: FunctionComponent = () => {
 
   return (
     <>
-      <div className={"fixed w-full z-[1] bg-background"}>
+      <div className={"fixed w-full z-[1] bg-background top-0"}>
         <div className={styles.navbarContainer}>
           <div className="ml-4">
             <Link href="/" className="cursor-pointer">

components/UI/textField.tsx

@@ -1,8 +1,8 @@
 import React, { FunctionComponent } from "react";
 import styles from "../../styles/components/textField.module.css";
-import { OutlinedInputProps, Tooltip } from "@mui/material";
-import InfoIcon from "./iconsComponents/icons/infoIcon";
+import { OutlinedInputProps } from "@mui/material";
 import { TextField as TextFieldMui } from "@mui/material";
+import InputHelper from "./inputHelper";
 
 type TextFieldProps = {
   label: string;
@@ -34,42 +34,32 @@ const TextField: FunctionComponent<TextFieldProps> = ({
   return (
     <div className="flex flex-col w-full">
       <div className="flex gap-1 my-1">
-        {helperText ? (
-          <Tooltip
-            className="cursor-pointer"
-            title={helperText}
-            placement="top"
-          >
-            <div>
-              <InfoIcon width="20px" color={error ? "red" : "#454545"} />
-            </div>
-          </Tooltip>
-        ) : null}
         {error ? (
           <p className={styles.errorLegend}>{errorMessage}</p>
         ) : (
           <p className={styles.legend}>{label}</p>
         )}
         {required ? "*" : ""}
       </div>
-
-      <TextFieldMui
-        type={type}
-        error={error}
-        fullWidth
-        value={value}
-        variant="outlined"
-        onChange={onChange}
-        color={color}
-        InputProps={{
-          classes: {
-            root: styles.textfield,
-            input: variant === "white" ? styles.inputWhite : "",
-          },
-        }}
-        required={required}
-        placeholder={placeholder}
-      />
+      <InputHelper helperText={helperText} error={error}>
+        <TextFieldMui
+          type={type}
+          error={error}
+          fullWidth
+          value={value}
+          variant="outlined"
+          onChange={onChange}
+          color={color}
+          InputProps={{
+            classes: {
+              root: styles.textfield,
+              input: variant === "white" ? styles.inputWhite : "",
+            },
+          }}
+          required={required}
+          placeholder={placeholder}
+        />
+      </InputHelper>
     </div>
   );
 };

components/domains/usForm.tsx

@@ -4,11 +4,10 @@ import {
   FormControlLabel,
   Radio,
   RadioGroup,
-  Tooltip,
 } from "@mui/material";
-import InfoIcon from "../UI/iconsComponents/icons/infoIcon";
 import textFieldStyles from "../../styles/components/textField.module.css";
 import SelectState from "./selectState";
+import InputHelper from "../UI/inputHelper";
 
 type UsFormProps = {
   isUsResident: boolean;
@@ -32,54 +31,32 @@ const UsForm: FunctionComponent<UsFormProps> = ({
     <FormControl className="flex gap-4 w-full">
       <div className="flex flex-col">
         <div className="flex gap-1 my-1">
-          <Tooltip
-            className="cursor-pointer"
-            title="If you live in the US, we need your ZIP code due to the USA tax policy."
-            placement="top"
-          >
-            <div>
-              <InfoIcon width="16px" color={"#454545"} />
-            </div>
-          </Tooltip>
           <p className={textFieldStyles.legend}>Do you live in the USA ?*</p>
         </div>
-
-        <div
-          className={
-            variant === "white" ? textFieldStyles.radioWhite : "bg-transparent"
-          }
-        >
-          <RadioGroup
-            aria-labelledby="demo-controlled-radio-buttons-group"
-            name="controlled-radio-buttons-group"
-            value={isUsResident}
-            onChange={onUsResidentChange}
-          >
-            <div className="flex flex-row gap-4">
-              <FormControlLabel
-                value={true}
-                control={<Radio />}
-                label={<p className={textFieldStyles.legend}>Yes</p>}
-              />
-              <FormControlLabel
-                value={false}
-                control={<Radio />}
-                label={<p className={textFieldStyles.legend}>No</p>}
-              />
-            </div>
-          </RadioGroup>
+        <div className="border-solid border border-[#c4c4c4ff] rounded-[7.983px] pl-[16.5px] py-1">
+          <InputHelper helperText="If you live in the US, we need your ZIP code due to the USA tax policy.">
+            <RadioGroup
+              aria-labelledby="demo-controlled-radio-buttons-group"
+              name="controlled-radio-buttons-group"
+              value={isUsResident}
+              onChange={onUsResidentChange}
+            >
+              <div className="flex flex-row gap-4">
+                <FormControlLabel
+                  value={true}
+                  control={<Radio />}
+                  label={<p className={textFieldStyles.legend}>Yes</p>}
+                />
+                <FormControlLabel
+                  value={false}
+                  control={<Radio />}
+                  label={<p className={textFieldStyles.legend}>No</p>}
+                />
+              </div>
+            </RadioGroup>
+          </InputHelper>
         </div>
       </div>
-      {/* {isUsResident ? (
-        <TextField
-          label="The state code that you live in"
-          value={usState}
-          onChange={(e) => onUsStateChange(e.target.value)}
-          color="secondary"
-          placeholder="CA for California, NY for New York, etc."
-          required
-        />
-      ) : null} */}
       {isUsResident ? (
         <SelectState usState={usState} changeUsState={changeUsState} />
       ) : null}

components/identities/actions/clickable/clickablePersonhoodIcon.tsx

@@ -102,7 +102,6 @@ const ClickablePersonhoodIcon: FunctionComponent<
       posthog?.capture("popVerificationTx");
     });
   };
-
   const getSignature = () => {
     fetch(`/api/anima/get_signature?sessionId=${sessionId}`)
       .then((response) => response.json())
@@ -115,7 +114,7 @@ const ClickablePersonhoodIcon: FunctionComponent<
             entrypoint: "write_confirmation",
             calldata: [
               tokenId,
-              Math.floor(Date.now() / 1000),
+              Math.floor(Date.now() / 1000 + 15 * 60),
               shortString.encodeShortString("proof_of_personhood"),
               hexToDecimal(hexSessionId),
               sig.r,

components/identities/identityCard.tsx

@@ -27,7 +27,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
   identity,
   isOwner,
 }) => {
-  const responsiveDomainOrId = identity
+  const responsiveDomainOrId = identity?.domain
     ? shortenDomain(identity.domain as string, 25)
     : `SID: ${tokenId}`;
   const [copied, setCopied] = useState(false);
@@ -45,7 +45,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
-        <div className="lg:mt-10 flex items-center lg:justify-between justify-center gap-3 sm:gap-5 my-2 flex-wrap lg:flex-row ">
+        <div className="lg:mt-10 flex items-center lg:justify-between justify-center gap-3 sm:gap-5 my-2 flex-wrap lg:flex-row">
           <div className="my-2">
             <img
               src={`${process.env.NEXT_PUBLIC_STARKNET_ID}/api/identicons/${tokenId}`}

next.config.js

@@ -3,30 +3,7 @@
 module.exports = {
   rewrites() {
     return {
-      beforeFiles: [
-        // if the host is `app.acme.com`,
-        // this rewrite will be applied
-        {
-          source: "/:path*",
-          has: [
-            {
-              type: "host",
-              value: "indexer.starknet.id",
-            },
-          ],
-          destination: "/api/indexer/:path*",
-        },
-        {
-          source: "/:path*",
-          has: [
-            {
-              type: "host",
-              value: "goerli.indexer.starknet.id",
-            },
-          ],
-          destination: "/api/indexer/:path*",
-        },
-      ],
+      beforeFiles: [],
     };
   },
   reactStrictMode: true,