@learncard/react 2.10.3 → 2.10.4

package/src/components/SkillsStatsCard/SkillsStatsCard.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import SkillsStatsCard from './SkillsStatsCard';
+import { SkillsStatsCardProps } from '../../types';
+
+const dummySkills = [
+    {
+        name: 'Creativity',
+        percent: 30,
+    },
+    {
+        name: 'Wizardry',
+        percent: 25,
+    },
+    {
+        name: 'Basketball',
+        percent: 18,
+    },
+    {
+        name: 'Cooking',
+        percent: 9,
+    },
+    {
+        name: 'Coding',
+        percent: 5,
+    },
+    {
+        name: 'Creativity',
+        percent: 30,
+    },
+    {
+        name: 'Wizardry',
+        percent: 25,
+    },
+    {
+        name: 'Basketball',
+        percent: 18,
+    },
+    {
+        name: 'Cooking',
+        percent: 9,
+    },
+    {
+        name: 'Coding',
+        percent: 5,
+    },
+];
+
+export default {
+    title: 'Skills Stats Card',
+    component: SkillsStatsCard,
+    argTypes: {},
+} as Meta<typeof SkillsStatsCard>;
+
+const Template: Story<SkillsStatsCardProps> = args => <SkillsStatsCard {...args} />;
+
+export const SkillsStatsCardTest = Template.bind({});
+SkillsStatsCardTest.args = {
+    totalCount: 10,
+    skills: dummySkills,
+    onClick: () => {},
+};

package/src/components/SkillsStatsCard/SkillsStatsCard.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { SkillsStatsCardProps } from '../../types';
+import SkillGraphPlaceholder from '../../assets/images/skillgraph.svg';
+
+type SkillStatListItemProps = {
+    name?: string;
+    percent: string | number;
+    className?: string;
+};
+
+type SkillStatListItemIndicatorProps = {
+    className?: string;
+};
+
+type MoreSkillsListItemProps = {
+    count?: number | string;
+    percent?: string;
+    className?: string;
+};
+
+const SkillStatListItemIndicator: React.FC<SkillStatListItemIndicatorProps> = ({
+    className = 'bg-emerald-700',
+}) => {
+    return (
+        <span
+            className={`${className} skill-item-stat-indicator w-[10px] h-[10px] rounded-[3px] mr-[10px]`}
+        ></span>
+    );
+};
+
+const SkillStatListItem: React.FC<SkillStatListItemProps> = ({ name, percent, className }) => {
+    const colorIndicator = <SkillStatListItemIndicator />;
+    return (
+        <div className="flex items-center justify-between px-[10px] skill-stat-list-item flex text-xs h-[20px] py-[5px] shadow-[0_1px_3px_rgba(0,0,0,0.3)] mt-[10px] rounded-[10px] text-grayscale-900 font-semibold">
+            <span className="flex justify-center items-center">
+                {colorIndicator}
+                {name}
+            </span>
+            <span>{percent}%</span>
+        </div>
+    );
+};
+
+const MoreSkillsListItem: React.FC<MoreSkillsListItemProps> = ({ count, percent, className }) => {
+    const colorIndicator = <SkillStatListItemIndicator className="bg-grayscale-200" />;
+    return (
+        <div className="flex items-center justify-between px-[10px] skill-stat-list-item flex text-xs h-[20px] py-[5px] shadow-[0_1px_3px_rgba(0,0,0,0.3)] mt-[10px] rounded-[10px] text-grayscale-900 font-semibold">
+            <span className="flex justify-center items-center">
+                {colorIndicator}+{count} more
+            </span>
+            <span>{percent}%</span>
+        </div>
+    );
+};
+
+export const SkillsStatsCard: React.FC<SkillsStatsCardProps> = ({
+    totalCount = 0,
+    skills = [],
+    className,
+    onClick = () => {},
+}) => {
+    const title = `${totalCount} Skill Categories`;
+
+    const showMore = skills?.length > 3;
+
+    const renderSkillsList = skills?.slice(0, 3).map(skill => {
+        return <SkillStatListItem name={skill?.name} percent={skill?.percent} key={skill?.name} />;
+    });
+
+    if (showMore) {
+        const otherLength = skills?.length - 3;
+        renderSkillsList?.push(<MoreSkillsListItem count={otherLength} percent={'27'} />);
+    }
+
+    return (
+        <div
+            onClick={onClick}
+            className={`flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[199px] rounded-[20px] ${className}`}
+        >
+            <section className="flex skill-stats-card-title-container items-center">
+                <h3 className="text-[17px] text-gray-900 font-bold">{title}</h3>
+            </section>
+
+            <section className="skill-stats-card-body my-[5px] flex items-center justify-between">
+                <img src={SkillGraphPlaceholder} className="skill-graph-container" />
+                <div className="skill-stat-list w-full  ml-[15px]">{renderSkillsList}</div>
+            </section>
+        </div>
+    );
+};
+
+export default SkillsStatsCard;

package/src/components/SkillsStatsCard/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './SkillsStatsCard';

package/src/components/SmallAchievementCard/SmallAchievementCard.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import SmallVCCard from './SmallAchievementCard';
+import { SmallAchievementCardProps } from '../../types';
+
+export default {
+    title: 'Mini Achievement Display Card',
+    component: SmallVCCard,
+    argTypes: {},
+} as Meta<typeof SmallVCCard>;
+
+const Template: Story<SmallAchievementCardProps> = args => <SmallVCCard {...args} />;
+
+export const SmallVCCardTest = Template.bind({});
+SmallVCCardTest.args = {
+    title: 'Learning History',
+    thumbImgSrc: null,
+    date: 'Apr 22 2022',
+    onClick: () => {
+        console.log('//goodbye world');
+    },
+};

package/src/components/SmallAchievementCard/SmallAchievementCard.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { SmallAchievementCardProps } from '../../types';
+import { RoundedPill } from '../RoundedPill';
+import { Trophy } from '../svgs';
+
+export const SmallAchievementCard: React.FC<SmallAchievementCardProps> = ({
+    title = 'Title Lorem Ipsum',
+    thumbImgSrc,
+    date = 'Apr 20, 2022',
+    showStatus = false,
+    onClick = () => {},
+}) => {
+    const thumbClass = thumbImgSrc ? 'bg-grayscale-50' : 'bg-indigo-200';
+    return (
+        <button
+            onClick={onClick}
+            className={`flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[160px] h-[209px] rounded-[20px] rounded-square-card-container`}
+        >
+            <section
+                className={`flex h-[110px] ${thumbClass} flex-col justify-center items-center w-full rounded-[20px]`}
+            >
+                {thumbImgSrc && (
+                    <img
+                        className="h-full w-full object-contain"
+                        src={thumbImgSrc ?? ''}
+                        alt="Credential Achievement Image"
+                    />
+                )}
+                {(!thumbImgSrc || thumbImgSrc === '') && (
+                    <Trophy
+                        className="achievement-placeholder-trophy flex p-[15px]"
+                        color="#ffffff"
+                    />
+                )}
+            </section>
+
+            <section className="achievement-title w-full flex justify-center line-clamp-2">
+                <p className="text-sm text-grayscale-900 font-bold mt-[10px] text-center">
+                    {title}
+                </p>
+            </section>
+            <p className="achievement-card-date mt-[5px] text-grayscale-500 text-[12px] w-full text-center">
+                {date}
+            </p>
+            <section className="achievement-card-footer"></section>
+        </button>
+    );
+};
+
+export default SmallAchievementCard;

package/src/components/SmallAchievementCard/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './SmallAchievementCard';

package/src/components/UserProfilePicture/UserProfilePicture.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import UserProfilePicture from './UserProfilePicture';
+
+describe('UserProfilePicture broken-image fallback', () => {
+    test('renders the img when a src is provided', () => {
+        const { container } = render(
+            <UserProfilePicture user={{ image: 'https://example.com/a.png', name: 'Ada' }} />
+        );
+        expect(container.querySelector('img')).not.toBeNull();
+    });
+
+    test('falls back to initial avatar when the image fails to load', () => {
+        const { container } = render(
+            <UserProfilePicture user={{ image: 'https://example.com/broken.png', name: 'Ada' }} />
+        );
+
+        const img = container.querySelector('img');
+        expect(img).not.toBeNull();
+
+        fireEvent.error(img!);
+
+        expect(container.querySelector('img')).toBeNull();
+        expect(container.textContent).toContain('A');
+    });
+
+    test('falls back to fingerprint icon on error when variant is fingerprint', () => {
+        const { container } = render(
+            <UserProfilePicture
+                user={{ image: 'https://example.com/broken.png', name: '' }}
+                avatarFallbackVariant="fingerprint"
+            />
+        );
+
+        fireEvent.error(container.querySelector('img')!);
+
+        expect(container.querySelector('img')).toBeNull();
+        expect(container.querySelector('svg')).not.toBeNull();
+    });
+});

package/src/components/UserProfilePicture/UserProfilePicture.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+
+const PersonSilhouette: React.FC<{ className?: string }> = ({ className = '' }) => (
+    <svg
+        width="22"
+        height="22"
+        viewBox="0 0 22 22"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+    >
+        <path
+            d="M10.7115 13.5488C6.86057 13.5488 3.57129 14.156 3.57129 16.5845C3.57129 19.014 6.84004 19.6426 10.7115 19.6426C14.5624 19.6426 17.8516 19.0363 17.8516 16.6069C17.8516 14.1774 14.5838 13.5488 10.7115 13.5488Z"
+            fill="#353E64"
+        />
+        <path
+            opacity="0.4"
+            d="M10.7115 11.2361C13.3347 11.2361 15.4365 9.13345 15.4365 6.51113C15.4365 3.88881 13.3347 1.78613 10.7115 1.78613C8.08913 1.78613 5.98645 3.88881 5.98645 6.51113C5.98645 9.13345 8.08913 11.2361 10.7115 11.2361Z"
+            fill="#353E64"
+        />
+    </svg>
+);
+
+const FingerprintIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+    <svg
+        width="32"
+        height="31"
+        viewBox="0 0 32 31"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+    >
+        <path
+            d="M15.612 10.3663C21.746 10.3665 26.7187 15.339 26.7187 21.473C26.7187 23.722 24.8953 25.5453 22.6462 25.5454C20.3972 25.5454 18.5738 23.7222 18.5738 21.473C18.5738 19.8373 17.2476 18.5113 15.612 18.5112C13.9763 18.5112 12.6502 19.8372 12.6502 21.473C12.6502 24.103 13.6282 26.5011 15.2418 28.3294C15.7824 28.9423 15.7241 29.8778 15.1117 30.4191C14.4985 30.9602 13.5617 30.902 13.0204 30.2889C10.9478 27.9403 9.68847 24.8519 9.68847 21.473C9.68847 18.2015 12.3406 15.5494 15.612 15.5494C18.8834 15.5495 21.5356 18.2015 21.5356 21.473C21.5356 22.0864 22.0328 22.5836 22.6462 22.5836C23.2596 22.5835 23.7569 22.0862 23.7569 21.473C23.7569 16.9748 20.1102 13.3282 15.612 13.3281C11.1137 13.3281 7.46712 16.9746 7.46712 21.473C7.46712 22.498 7.65616 23.4759 7.99933 24.3755C8.29047 25.1394 7.90699 25.9958 7.14318 26.2874C6.37916 26.5787 5.52292 26.1951 5.23133 25.4313C4.76156 24.1997 4.50533 22.8644 4.50533 21.473C4.50533 15.339 9.47799 10.3663 15.612 10.3663ZM15.4645 21.5019C16.2659 21.3392 17.0486 21.8576 17.2115 22.6589C17.7602 25.3619 20.1527 27.3964 23.0165 27.3965C23.217 27.3965 23.415 27.3869 23.6094 27.3677C24.4233 27.2868 25.1484 27.8814 25.2292 28.6953C25.3096 29.5088 24.7165 30.2339 23.9031 30.3149C23.6113 30.3438 23.315 30.3583 23.0165 30.3583C18.7164 30.3582 15.1311 27.305 14.3076 23.2489C14.145 22.4475 14.6635 21.6649 15.4645 21.5019ZM15.612 5.18313C22.9079 5.18344 29.0803 9.97908 31.1556 16.5863C31.4005 17.3663 30.9665 18.198 30.1867 18.4432C29.4067 18.688 28.575 18.2542 28.3298 17.4743C26.6312 12.0658 21.5773 8.14523 15.612 8.14492C9.64668 8.14505 4.59309 12.0658 2.89428 17.4743C2.64921 18.2542 1.81744 18.6879 1.03739 18.4432C0.257211 18.1981 -0.176617 17.3666 0.0684418 16.5863C2.14387 9.97898 8.31608 5.18326 15.612 5.18313ZM15.612 0C21.2529 0.000192516 26.3708 2.25505 30.1071 5.90911C30.6913 6.4809 30.7017 7.41857 30.1304 8.0032C29.5586 8.58772 28.6209 8.59782 28.0362 8.02633C24.8309 4.89168 20.4478 2.96198 15.612 2.96179C10.7762 2.96185 6.39334 4.89163 3.18787 8.02633C2.60327 8.59809 1.66569 8.58756 1.09378 8.0032C0.522099 7.41847 0.532273 6.48093 1.11693 5.90911C4.85343 2.255 9.97118 5.92358e-05 15.612 0Z"
+            fill="currentColor"
+        />
+    </svg>
+);
+
+// Copied / Adapted from learn-card-base
+export const UserProfilePicture: React.FC<{
+    customContainerClass?: string;
+    customImageClass?: string;
+    user?: any;
+    alt?: string;
+    children?: React.ReactNode | null;
+    avatarColor?: string;
+    avatarFingerprintColor?: string;
+    avatarTextClassName?: string;
+    avatarIconClassName?: string;
+    avatarSilhouetteClassName?: string;
+    avatarFallbackVariant?: 'initial' | 'fingerprint';
+}> = ({
+    customContainerClass,
+    customImageClass,
+    user,
+    alt,
+    children,
+    avatarColor,
+    avatarFingerprintColor,
+    avatarTextClassName,
+    avatarIconClassName,
+    avatarSilhouetteClassName,
+    avatarFallbackVariant = 'initial',
+}) => {
+    const baseColor = avatarColor || 'bg-grayscale-700';
+    const src = user?.image || user?.profileImage;
+    const [errored, setErrored] = React.useState(false);
+
+    // Reset the error flag whenever the source changes (e.g. good URL after a bad one).
+    React.useEffect(() => {
+        setErrored(false);
+    }, [src]);
+
+    const letterToDisplay =
+        user?.displayName?.substring(0, 1) ||
+        user?.profileId?.substring(0, 1) ||
+        user?.name?.substring(0, 1) ||
+        user?.email?.substring(0, 1) ||
+        '';
+
+    if (!src || errored) {
+        const fingerprintIconClassName = `${avatarIconClassName || 'w-[60%] h-[60%]'} ${
+            avatarFingerprintColor || 'text-white/85'
+        }`;
+
+        return (
+            <div
+                className={`rounded-full flex items-center justify-center font-poppins font-semibold uppercase select-none text-white text-2xl ${customContainerClass} ${baseColor}`}
+            >
+                {avatarFallbackVariant === 'fingerprint' ? (
+                    <FingerprintIcon className={fingerprintIconClassName} />
+                ) : letterToDisplay ? (
+                    <span className={avatarTextClassName || ''}>{letterToDisplay}</span>
+                ) : (
+                    <PersonSilhouette
+                        className={avatarSilhouetteClassName || avatarIconClassName}
+                    />
+                )}
+                {children}
+            </div>
+        );
+    }
+
+    return (
+        <div className={`relative select-none ${customContainerClass}`}>
+            <img
+                className={`rounded-full ${customImageClass}`}
+                alt={alt || 'user'}
+                src={src}
+                referrerPolicy="no-referrer"
+                onError={() => setErrored(true)}
+            />
+            {children}
+        </div>
+    );
+};
+
+export default UserProfilePicture;

package/src/components/UserProfilePicture/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './UserProfilePicture';

package/src/components/VCCard/VCCard.stories.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import VCCard, { VCCardProps } from './VCCard';
+import {
+    JffCredential,
+    // simpleConvertTagsToSkills,
+    issueeOverride,
+    SuperSkillsOprahCredential,
+    // superSkillsConvertTags,
+    BoostCredential,
+} from '../../helpers/test.helpers';
+
+export default {
+    title: 'VCCard',
+    component: VCCard,
+    argTypes: {},
+} as Meta<typeof VCCard>;
+
+const Template: Story<VCCardProps> = args => <VCCard {...args} />;
+
+const baseArgs = {
+    credential: JffCredential,
+    // convertTagsToSkills: simpleConvertTagsToSkills,
+    issueeOverride,
+};
+
+export const VCCardVersion1Test = Template.bind({});
+VCCardVersion1Test.args = { version: '1', ...baseArgs };
+
+export const VCCardVersion2Test = Template.bind({});
+VCCardVersion2Test.args = {
+    version: '2',
+    bottomRightIcon: {
+        image: (
+            // courtesy of ChatGPT
+            <svg width="30" height="30" viewBox="0 0 100 100">
+                <polygon
+                    points="50,0 63.7,36.7 100,40 75,70.7 86.6,106.7 50,85.3 13.4,106.7 25,70.7 0,40 36.3,36.7"
+                    fill="yellow"
+                    stroke="orange"
+                    strokeWidth={3}
+                />
+            </svg>
+        ),
+        color: '#000',
+    },
+    ...baseArgs,
+};
+
+export const SuperSkillsVersion2Test = Template.bind({});
+SuperSkillsVersion2Test.args = {
+    ...baseArgs,
+    version: '2',
+    credential: SuperSkillsOprahCredential,
+    // convertTagsToSkills: superSkillsConvertTags,
+};
+
+export const BoostCredentialVersion2Test = Template.bind({});
+BoostCredentialVersion2Test.args = {
+    ...baseArgs,
+    version: '2',
+    credential: BoostCredential,
+};

package/src/components/VCCard/VCCard.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import { initLearnCard } from '@learncard/init';
+import { VC, Profile, VerificationItem } from '@learncard/types';
+
+import { VCDisplayCard } from '../VCDisplayCard';
+import {
+    VCDisplayCard2,
+    CredentialIconType,
+} from '../VCDisplayCard2';
+
+import { MediaMetadata, VideoMetadata } from '../../types';
+
+export type VCCardProps = {
+    credential: VC;
+    issueeOverride?: Profile;
+    className?: string;
+    version?: '1' | '2';
+
+    /* Only used for version 2 */
+    subjectImageComponent?: React.ReactNode;
+    // convertTagsToSkills?: (tags: string[]) => { [skill: string]: string[] };
+    handleXClick?: () => void;
+    getFileMetadata?: (url: string) => MediaMetadata;
+    getVideoMetadata?: (url: string) => VideoMetadata;
+    onMediaAttachmentClick?: (url: string) => void;
+    bottomRightIcon?: CredentialIconType;
+};
+
+export const VCCard: React.FC<VCCardProps> = ({
+    credential,
+    issueeOverride,
+    className = '',
+    version = '1',
+    subjectImageComponent,
+    // convertTagsToSkills,
+    handleXClick,
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    bottomRightIcon,
+}) => {
+    const [loading, setLoading] = useState(true);
+    const [vcVerification, setVCVerification] = useState<VerificationItem[]>([]);
+
+    useEffect(() => {
+        const verify = async () => {
+            const wallet = await initLearnCard();
+            const verification = await wallet.invoke.verifyCredential(credential, {}, true);
+            setVCVerification(verification);
+            setLoading(false);
+        };
+
+        verify();
+    }, [credential]);
+
+    if (version === '1') {
+        return (
+            <VCDisplayCard
+                credential={credential}
+                issueeOverride={issueeOverride}
+                className={className}
+                loading={loading}
+                verification={vcVerification}
+            />
+        );
+    }
+    return (
+        <VCDisplayCard2
+            credential={credential}
+            issueeOverride={issueeOverride}
+            verificationInProgress={loading}
+            verificationItems={vcVerification}
+            subjectImageComponent={subjectImageComponent}
+            // convertTagsToSkills={convertTagsToSkills}
+            handleXClick={handleXClick}
+            getFileMetadata={getFileMetadata}
+            getVideoMetadata={getVideoMetadata}
+            onMediaAttachmentClick={onMediaAttachmentClick}
+            bottomRightIcon={bottomRightIcon}
+        />
+    );
+};
+
+export default VCCard;

package/src/components/VCCard/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './VCCard';

package/src/components/VCDisplayBackFace/VCDisplayBackFace.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { VCDisplayCardProps } from '../../types';
+import { VCVerificationCheckWithText } from '../VCVerificationCheck/VCVerificationCheck';
+import VCVerificationPill from '../VCVerificationPill/VCVerificationPill';
+import FlipArrowRight from '../../assets/images/ArrowArcRight.svg';
+import { getNameFromProfile } from '../../helpers/credential.helpers';
+
+export const VCDisplayBackFace: React.FC<VCDisplayCardProps> = ({
+    issuer,
+    credentialSubject,
+    className = '',
+    loading,
+    verification = [],
+    handleClick,
+    overrideDetailsComponent,
+}) => {
+    const descriptionText = credentialSubject?.achievement?.description;
+    const criteriaText = credentialSubject?.achievement?.criteria?.narrative;
+    const issuerUrl = typeof issuer === 'object' ? issuer.url : '';
+    const issuerName = getNameFromProfile(issuer ?? '');
+    const defaultDetails = (
+        <>
+            <div className="width-full">
+                <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
+                    Description
+                </h6>
+                <p className="line-clamp-3 subpixel-antialiased text-grayscale-600 text-[14px] lc-line-clamp">
+                    {descriptionText}
+                </p>
+            </div>
+
+            <div className="width-full mt-[10px]">
+                <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider  subpixel-antialiased">
+                    Criteria
+                </h6>
+                <p className="line-clamp-3 subpixel-antialiased text-grayscale-600 text-[14px] lc-line-clamp">
+                    {criteriaText}
+                </p>
+            </div>
+
+            <div className="width-full mt-[10px] line-clamp-1 overflow-hidden vc-issuer-name-info">
+                <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
+                    Issuer
+                </h6>
+                <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all">
+                    {issuerName}
+                </p>
+            </div>
+
+            {issuerUrl && (
+                <p className="text-indigo-500 font-bold text-xs width-full text-center mt-8">
+                    {issuerUrl}
+                </p>
+            )}
+        </>
+    );
+
+    const renderDetails = overrideDetailsComponent ? overrideDetailsComponent : defaultDetails;
+
+    return (
+        <div
+            className={`z-[9] vc-display-main-card-back flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}
+        >
+            <section className="flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]"></section>
+            <section className="flex flex-col items-center justify-center w-full z-10 text-left credential-details-container max-w-[100%] relative">
+                <section className="flex flex-row items-start justify-start w-full line-clamp-2">
+                    <h3
+                        className="text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700"
+                        data-testid="vc-credential-details-title tracking-wide subpixel-antialiased"
+                    >
+                        Credential Details
+                    </h3>
+                </section>
+
+                <section className="flex flex-col mt-2 w-full my-2 min-h-[200px] credential-details-info">
+                    {renderDetails}
+                </section>
+
+                <div className="w-full mt-2"></div>
+
+                <button
+                    onClick={handleClick}
+                    className="vc-flip-btn bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 shadow-3xl rounded-full"
+                >
+                    <span className="flex justify-center">
+                        <img
+                            className="h-8 w-8 my-0 mx-4 scale-x-[-1]"
+                            src={FlipArrowRight ?? ''}
+                            alt="Flip Card"
+                        />
+                    </span>
+                </button>
+
+                <section className="flex-col items-center justify-center checklist-container justify-center w-[100%] width-full mt-[20px]">
+                    <VCVerificationCheckWithText loading={loading} />
+                    <section>
+                        {verification.map(item => (
+                            <VCVerificationPill
+                                key={item.check}
+                                status={item.status}
+                                message={item.message}
+                                details={item.details}
+                            />
+                        ))}
+                    </section>
+                </section>
+            </section>
+        </div>
+    );
+};
+
+export default VCDisplayBackFace;