From 9e8a3850da4a4f80ae867f751a05d5ca61354311 Mon Sep 17 00:00:00 2001 From: Satyajeet Kolhapure Date: Mon, 4 Nov 2024 12:34:41 +0000 Subject: [PATCH 1/3] added default display for attestation card when issuer data is not available --- explorer/src/assets/logo/stamp-logo.svg | 4 + .../components/AttestationCard/index.tsx | 76 ++++++++++++++----- 2 files changed, 59 insertions(+), 21 deletions(-) create mode 100644 explorer/src/assets/logo/stamp-logo.svg diff --git a/explorer/src/assets/logo/stamp-logo.svg b/explorer/src/assets/logo/stamp-logo.svg new file mode 100644 index 00000000..0e0b91fa --- /dev/null +++ b/explorer/src/assets/logo/stamp-logo.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx index bf942e20..2242ef90 100644 --- a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx +++ b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx @@ -1,12 +1,15 @@ import { ChevronRight } from "lucide-react"; import moment from "moment"; import { generatePath, useLocation, useNavigate } from "react-router-dom"; +import useSWR from "swr"; import { useTernaryDarkMode } from "usehooks-ts"; import circleInfo from "@/assets/icons/circle-info.svg"; +import StampLogo from "@/assets/logo/stamp-logo.svg?react"; import { Button } from "@/components/Buttons"; import { EButtonType } from "@/components/Buttons/enum"; import { Tooltip } from "@/components/Tooltip"; +import { SWRKeys } from "@/interfaces/swr/enum"; import { issuersData } from "@/pages/Home/data"; import { IIssuer } from "@/pages/Home/interface"; import { useNetworkContext } from "@/providers/network-provider/context"; @@ -22,37 +25,68 @@ export const AttestationCard: React.FC = ({ expiryDate, }) => { const { - network: { network }, + sdk, + network: { chain, network }, } = useNetworkContext(); const navigate = useNavigate(); const location = useLocation(); const { isDarkMode } = useTernaryDarkMode(); const isExpired = expiryDate ? new Date(expiryDate * 1000) < new Date() : false; - const issuerData = issuersData.find((issuer) => - issuer.attestationDefinitions.some( - (definition) => - definition.schema.toLowerCase() === schemaId.toLowerCase() && - definition.portal.toLowerCase() === portalId.toLowerCase(), - ), - ) as IIssuer; + // Function to find issuer data by schemaId and portalId + const findIssuerData = () => { + let issuer = issuersData.find((issuer) => + issuer.attestationDefinitions.some( + (definition) => + definition.schema.toLowerCase() === schemaId.toLowerCase() && + definition.portal.toLowerCase() === portalId.toLowerCase(), + ), + ) as IIssuer; + + if (!issuer) { + issuer = issuersData.find((issuer) => + issuer.attestationDefinitions.some((definition) => definition.portal.toLowerCase() === portalId.toLowerCase()), + ) as IIssuer; + } + + return issuer; + }; + + // Fallback to schema if issuer data not found + const issuerData = findIssuerData(); const attestationDefinitions = issuerData?.attestationDefinitions.find( (definition) => definition.schema.toLowerCase() === schemaId.toLowerCase(), ); - if (!issuerData) { - return null; - } + const { data: schema, isLoading: isSchemaLoading } = useSWR( + !issuerData && !attestationDefinitions ? `${SWRKeys.GET_SCHEMA_BY_ID}/${schemaId}/${chain.id}` : null, + async () => sdk.schema.findOneById(schemaId), + { + shouldRetryOnError: false, + revalidateOnFocus: false, + }, + ); - const logo = attestationDefinitions?.logo ?? issuerData?.logo; - const logoDark = attestationDefinitions?.logoDark ?? issuerData?.logoDark; - const name = attestationDefinitions?.name ?? issuerData?.name; - const description = attestationDefinitions?.description ?? ""; - const issuerName = issuerData.name; + const { data: portal, isLoading: isPortalLoading } = useSWR( + !issuerData ? `${SWRKeys.GET_PORTAL_BY_ID}/${portalId}/${chain.id}` : null, + async () => sdk.portal.findOneById(schemaId), + { + shouldRetryOnError: false, + revalidateOnFocus: false, + }, + ); + + if (!issuerData && isSchemaLoading && isPortalLoading) return null; + + const logo = attestationDefinitions?.logo ?? issuerData?.logo ?? StampLogo; + const logoDark = attestationDefinitions?.logoDark ?? issuerData?.logoDark ?? logo ?? StampLogo; + const name = attestationDefinitions?.name ?? issuerData?.name ?? schema?.name; + const description = attestationDefinitions?.description ?? schema?.description ?? ""; + const issuerName = issuerData?.name ?? schema?.name ?? portal?.name; const maxDescriptionLength = 140; - const isDescriptionLong = description.length > maxDescriptionLength; - const truncatedDescription = isDescriptionLong ? `${description.slice(0, maxDescriptionLength)}...` : description; + const truncatedDescription = + description.length > maxDescriptionLength ? `${description.slice(0, maxDescriptionLength)}...` : description; const handleViewDetailsClick = (id: string) => { navigate(generatePath(APP_ROUTES.ATTESTATION_BY_ID, { chainId: network, id }), { @@ -61,7 +95,7 @@ export const AttestationCard: React.FC = ({ }; const displayLogo = () => { - const Logo: React.FC> = isDarkMode && logoDark ? logoDark : logo; + const Logo: React.FC> = isDarkMode ? logoDark : logo; return ; }; @@ -80,11 +114,11 @@ export const AttestationCard: React.FC = ({
{issuerName}
- {description && description.trim() ? ( + {description && (
{truncatedDescription}
- ) : null} + )}
From 46dceb193ebe0032bb316dff1b005c895c38fe9f Mon Sep 17 00:00:00 2001 From: Satyajeet Kolhapure Date: Mon, 4 Nov 2024 12:35:24 +0000 Subject: [PATCH 2/3] fixed lint issues --- explorer/src/assets/logo/stamp-logo.svg | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/explorer/src/assets/logo/stamp-logo.svg b/explorer/src/assets/logo/stamp-logo.svg index 0e0b91fa..0964288e 100644 --- a/explorer/src/assets/logo/stamp-logo.svg +++ b/explorer/src/assets/logo/stamp-logo.svg @@ -1,4 +1,5 @@ - - \ No newline at end of file + + From 1d3f8ff04c8e2eff5cb3345e6dfe3971bfc031b5 Mon Sep 17 00:00:00 2001 From: Satyajeet Kolhapure <77279246+satyajeetkolhapure@users.noreply.github.com> Date: Thu, 7 Nov 2024 09:32:53 +0000 Subject: [PATCH 3/3] Update explorer/src/pages/Attestation/components/AttestationCard/index.tsx Co-authored-by: Alain Nicolas --- .../src/pages/Attestation/components/AttestationCard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx index 2242ef90..cbcbe001 100644 --- a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx +++ b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx @@ -82,7 +82,7 @@ export const AttestationCard: React.FC = ({ const logoDark = attestationDefinitions?.logoDark ?? issuerData?.logoDark ?? logo ?? StampLogo; const name = attestationDefinitions?.name ?? issuerData?.name ?? schema?.name; const description = attestationDefinitions?.description ?? schema?.description ?? ""; - const issuerName = issuerData?.name ?? schema?.name ?? portal?.name; + const issuerName = issuerData?.name ?? portal?.name; const maxDescriptionLength = 140; const truncatedDescription =