feat(verification): temporary and persisted details on borrower info

Author: 0xMcsweeja

src/components/ParametersItem/index.tsx

@@ -1,7 +1,8 @@
 import * as React from "react"
 
-import { Box, Tooltip, Typography } from "@mui/material"
+import { Box, SvgIcon, Tooltip, Typography } from "@mui/material"
 
+import CheckIcon from "@/assets/icons/check_icon.svg"
 import { LinkGroup } from "@/components/LinkComponent"
 import { TooltipButton } from "@/components/TooltipButton"
 import { useMobileResolution } from "@/hooks/useMobileResolution"
@@ -24,6 +25,7 @@ export const ParametersItem = ({
   alarmState,
   copy,
   link,
+  verified,
 }: ParametersItemProps) => {
   const isMobile = useMobileResolution()
 
@@ -73,6 +75,17 @@ export const ParametersItem = ({
         )}
 
         <LinkGroup linkValue={link} copyValue={copy} />
+
+        {verified && (
+          <SvgIcon
+            sx={{
+              fontSize: "14px",
+              "& path": { fill: "#1B9B16" },
+            }}
+          >
+            <CheckIcon />
+          </SvgIcon>
+        )}
       </Box>
     </Box>
   )

src/components/ParametersItem/interface.ts

@@ -9,4 +9,5 @@ export type ParametersItemProps = {
   alarmState?: boolean
   copy?: string
   link?: string
+  verified?: boolean
 }

src/components/Profile/ProfilePage/index.tsx

@@ -18,6 +18,7 @@ import { ProfilePageProps } from "./interface"
 import { PageContentContainer, MobileContentContainer } from "./style"
 import { OverallBlock } from "../components/OverallBlock"
 import { ToUStatusBlock } from "../components/ToUStatusBlock"
+import { BorrowerProfileVerificationDisclosure } from "../components/VerificationDisclosure"
 
 export const ProfilePage = ({ type, profileAddress }: ProfilePageProps) => {
   const { data: profileData, isLoading: isProfileLoading } =
@@ -53,11 +54,11 @@ export const ProfilePage = ({ type, profileAddress }: ProfilePageProps) => {
   if (isLoading)
     return <ProfilePageSkeleton isExternal={isExternal} isMobile={isMobile} />
 
-  console.log(accountName)
-
   if (isMobile)
     return (
       <Box sx={MobileContentContainer}>
+        <BorrowerProfileVerificationDisclosure showNote={false} />
+
         <MobileNamePageBlockWrapper
           section={section}
           setSection={setSection}
@@ -79,6 +80,10 @@ export const ProfilePage = ({ type, profileAddress }: ProfilePageProps) => {
         {section === "info" && (
           <>
             <OverallBlock {...profileData} marketsAmount={marketsAmount} />
+            <BorrowerProfileVerificationDisclosure
+              variant="inline"
+              showModal={false}
+            />
             <ToUStatusBlock
               address={profileAddress}
               status={touStatus}
@@ -105,7 +110,11 @@ export const ProfilePage = ({ type, profileAddress }: ProfilePageProps) => {
 
       <Divider sx={{ marginY: "32px" }} />
 
-      <OverallBlock {...profileData} marketsAmount={marketsAmount} isPage />
+      <Box sx={{ position: "relative" }}>
+        <OverallBlock {...profileData} marketsAmount={marketsAmount} isPage />
+
+        <BorrowerProfileVerificationDisclosure />
+      </Box>
 
       <Divider sx={{ marginY: "32px" }} />
 

src/components/Profile/ProfilePage/style.ts

@@ -1,14 +1,21 @@
+import type { SxProps, Theme } from "@mui/material"
+
 import { pageCalcHeights } from "@/utils/constants"
 
+import { BORROWER_PROFILE_VERIFICATION_GUTTER } from "../components/VerificationDisclosure/style"
+
 export const MobileContentContainer = {
   height: "100%",
   display: "flex",
   flexDirection: "column",
 }
 
-export const PageContentContainer = {
+export const PageContentContainer: SxProps<Theme> = (theme) => ({
   width: "100%",
   height: `calc(100vh - ${pageCalcHeights.page})`,
-  padding: "44px 27.48% 44px 44px",
+  padding: `44px ${BORROWER_PROFILE_VERIFICATION_GUTTER} 44px 44px`,
   overflow: "scroll",
-}
+  [theme.breakpoints.down("lg")]: {
+    paddingRight: "44px",
+  },
+})

src/components/Profile/ProfileSection/index.tsx

@@ -6,6 +6,7 @@ import { useGetBorrowerProfile } from "@/app/[locale]/borrower/profile/hooks/use
 import { ProfileSectionNameBlock } from "./components/ProfileSectionNameBlock"
 import { ProfileSectionProps } from "./interface"
 import { OverallBlock } from "../components/OverallBlock"
+import { BorrowerProfileVerificationDisclosure } from "../components/VerificationDisclosure"
 
 export const ProfileSection = ({
   profileAddress,
@@ -32,6 +33,8 @@ export const ProfileSection = ({
         marketsAmount={marketsAmount}
         externalChainId={externalChainId}
       />
+
+      <BorrowerProfileVerificationDisclosure variant="market" />
     </>
   )
 }

src/components/Profile/components/OverallBlock/index.tsx

@@ -27,13 +27,15 @@ const makeInformationItem = (
     tooltipText?: string
     link?: string
     copy?: string
+    verified?: boolean
   },
 ): ProfileItem => ({
   title,
   value,
   tooltipText: opts?.tooltipText,
   link: opts?.link,
   copy: opts?.copy,
+  verified: opts?.verified,
 })
 
 export const OverallBlock = ({
@@ -72,27 +74,33 @@ export const OverallBlock = ({
   const normalizedDefaults = defaults !== undefined ? String(defaults) : "0"
 
   const profileInfo: ProfileItem[] = [
-    makeInformationItem(t("borrowerProfile.profile.overallInfo.name"), name),
+    makeInformationItem(t("borrowerProfile.profile.overallInfo.name"), name, {
+      verified: true,
+    }),
     makeInformationItem(t("borrowerProfile.profile.overallInfo.alias"), alias),
     makeInformationItem(
       t("borrowerProfile.profile.overallInfo.address"),
       address ? trimAddress(address) : undefined,
       {
         link: address ? getAddressUrl(address) : undefined,
         copy: address,
+        verified: true,
       },
     ),
     makeInformationItem(
       t("borrowerProfile.profile.overallInfo.headquarters"),
       jurisdictionText,
+      { verified: true },
     ),
     makeInformationItem(
       t("borrowerProfile.profile.overallInfo.entityKind"),
       entityKindText,
+      { verified: true },
     ),
     makeInformationItem(
       t("borrowerProfile.profile.overallInfo.founded"),
       founded,
+      { verified: true },
     ),
     makeInformationItem(
       t("borrowerProfile.profile.overallInfo.markets"),
@@ -138,6 +146,7 @@ export const OverallBlock = ({
                 tooltipText={item.tooltipText}
                 link={item.link}
                 copy={item.copy}
+                verified={item.verified}
               />
 
               {index < existingData.length - 1 && (
@@ -165,6 +174,7 @@ export const OverallBlock = ({
                 tooltipText={item.tooltipText}
                 link={item.link}
                 copy={item.copy}
+                verified={item.verified}
               />
               <Divider sx={InfoDivider} />
             </Box>
@@ -180,6 +190,7 @@ export const OverallBlock = ({
                 tooltipText={item.tooltipText}
                 link={item.link}
                 copy={item.copy}
+                verified={item.verified}
               />
               <Divider sx={InfoDivider} />
             </Box>

src/components/Profile/components/OverallBlock/interface.ts

@@ -13,4 +13,5 @@ export type ProfileItem = {
   tooltipText?: string
   link?: string
   copy?: string
+  verified?: boolean
 }