Skip to content

Commit

Permalink
fix(app): abstracts platformCard to its own component
Browse files Browse the repository at this point in the history
  • Loading branch information
@gdixon
gdixon committed Sep 12, 2022
1 parent d8deb0d commit fd25704
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 389 deletions.
136 changes: 15 additions & 121 deletions app/components/CardList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { PLATFORMS, PlatformSpec } from "../config/platforms";
import { PlatformGroupSpec, STAMP_PROVIDERS, UpdatedPlatforms } from "../config/providers";

// --- Components
import { JsonOutputModal } from "./JsonOutputModal";
import { LoadingCard } from "./LoadingCard";

// --- Identity Providers
Expand All @@ -30,15 +29,15 @@ import {
NftPlatform,
ZkSyncPlatform,
LensPlatform,
GnosisSafePlatform,
} from "./PlatformCards";
import { SideBarContent } from "./SideBarContent";

// --- Chakra UI Elements
import { Drawer, DrawerOverlay, Menu, MenuButton, MenuItem, MenuList, Spinner, useDisclosure } from "@chakra-ui/react";
import { Drawer, DrawerOverlay, useDisclosure } from "@chakra-ui/react";
import { PLATFORM_ID, PROVIDER_ID } from "@gitcoin/passport-types";
import { CeramicContext } from "../context/ceramicContext";
import { pillLocalStorage } from "../context/userContext";
import GnosisSafePlatform from "./PlatformCards/GnosisSafeProvider";
import { PlatformCard } from "./PlatformCard";

export type CardListProps = {
isLoading?: boolean;
Expand All @@ -49,15 +48,11 @@ type SelectedProviders = Record<PLATFORM_ID, PROVIDER_ID[]>;
export const CardList = ({ isLoading = false }: CardListProps): JSX.Element => {
const { allProvidersState } = useContext(CeramicContext);
const { isOpen, onOpen, onClose } = useDisclosure();
const {
isOpen: isOpenJsonOutputModal,
onOpen: onOpenJsonOutputModal,
onClose: onCloseJsonOutputModal,
} = useDisclosure();
const btnRef = useRef();
const [currentPlatform, setCurrentPlatform] = useState<PlatformSpec | undefined>();
const [currentProviders, setCurrentProviders] = useState<PlatformGroupSpec[]>([]);
const [updatedPlatforms, setUpdatedPlatforms] = useState<UpdatedPlatforms | undefined>();

// get the selected Providers
const [selectedProviders, setSelectedProviders] = useState<SelectedProviders>(
PLATFORMS.reduce((plaforms, platform) => {
Expand Down Expand Up @@ -160,7 +155,7 @@ export const CardList = ({ isLoading = false }: CardListProps): JSX.Element => {
};

useEffect(() => {
//set providers for the current platform
// set providers for the current platform
if (currentPlatform) {
setCurrentProviders(STAMP_PROVIDERS[currentPlatform.platform]);
}
Expand All @@ -173,117 +168,16 @@ export const CardList = ({ isLoading = false }: CardListProps): JSX.Element => {
return isLoading ? (
<LoadingCard key={i} />
) : (
<div className="w-1/2 p-2 md:w-1/2 xl:w-1/4" key={`${platform.name}${i}`}>
<div className="relative flex h-full flex-col border border-gray-200 p-0">
<div className="flex flex-row p-6">
<div className="flex h-10 w-10 flex-grow justify-center md:justify-start">
{platform.icon ? (
<img src={platform.icon} alt={platform.name} className="h-10 w-10" />
) : (
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24.7999 24.8002H28.7999V28.8002H24.7999V24.8002ZM14 24.8002H18V28.8002H14V24.8002ZM3.19995 24.8002H7.19995V28.8002H3.19995V24.8002ZM24.7999 14.0002H28.7999V18.0002H24.7999V14.0002ZM14 14.0002H18V18.0002H14V14.0002ZM3.19995 14.0002H7.19995V18.0002H3.19995V14.0002ZM24.7999 3.2002H28.7999V7.2002H24.7999V3.2002ZM14 3.2002H18V7.2002H14V3.2002ZM3.19995 3.2002H7.19995V7.2002H3.19995V3.2002Z"
fill="#161616"
/>
</svg>
)}
</div>
{updatedPlatforms &&
updatedPlatforms[platform.name] !== true &&
selectedProviders[platform.platform].length > 0 && (
<div className="inline-flex h-6 items-center rounded-xl bg-yellow px-2 text-xs font-medium shadow-sm">
Update
</div>
)}
</div>
<div className="flex justify-center py-0 px-6 pb-6 md:block md:justify-start">
<h1 className="title-font mb-0 text-lg font-medium text-gray-900 md:mb-3">{platform.name}</h1>
<p className="pleading-relaxed hidden md:inline-block">{platform.description}</p>
</div>
<div className="mt-auto">
{selectedProviders[platform.platform].length > 0 ? (
<>
<Menu>
<MenuButton className="verify-btn flex" data-testid="card-menu-button">
<div className="m-auto flex justify-center">
<svg
className="m-1 mr-2"
width="15"
height="16"
viewBox="0 0 15 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.449301 3.499C3.15674 3.46227 5.62356 2.42929 7.4998 0.75C9.37605 2.42929 11.8429 3.46227 14.5503 3.499C14.6486 4.0847 14.6998 4.68638 14.6998 5.30002C14.6998 10.0024 11.6945 14.0028 7.4998 15.4854C3.30511 14.0028 0.299805 10.0024 0.299805 5.30002C0.299805 4.68638 0.350982 4.0847 0.449301 3.499ZM10.8362 6.83638C11.1877 6.48491 11.1877 5.91506 10.8362 5.56359C10.4847 5.21212 9.91488 5.21212 9.56341 5.56359L6.5998 8.5272L5.4362 7.36359C5.08473 7.01212 4.51488 7.01212 4.16341 7.36359C3.81194 7.71506 3.81194 8.28491 4.16341 8.63638L5.96341 10.4364C6.31488 10.7879 6.88473 10.7879 7.2362 10.4364L10.8362 6.83638Z"
fill="#059669"
/>
</svg>
Verified
<svg
className="relative m-1 mt-2"
style={{ top: "1px" }}
width="11"
height="7"
viewBox="0 0 11 7"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.292787 1.29308C0.480314 1.10561 0.734622 1.00029 0.999786 1.00029C1.26495 1.00029 1.51926 1.10561 1.70679 1.29308L4.99979 4.58608L8.29279 1.29308C8.38503 1.19757 8.49538 1.12139 8.61738 1.06898C8.73939 1.01657 8.87061 0.988985 9.00339 0.987831C9.13616 0.986677 9.26784 1.01198 9.39074 1.06226C9.51364 1.11254 9.62529 1.18679 9.71918 1.28069C9.81307 1.37458 9.88733 1.48623 9.93761 1.60913C9.98789 1.73202 10.0132 1.8637 10.012 1.99648C10.0109 2.12926 9.9833 2.26048 9.93089 2.38249C9.87848 2.50449 9.8023 2.61483 9.70679 2.70708L5.70679 6.70708C5.51926 6.89455 5.26495 6.99987 4.99979 6.99987C4.73462 6.99987 4.48031 6.89455 4.29279 6.70708L0.292787 2.70708C0.105316 2.51955 0 2.26525 0 2.00008C0 1.73492 0.105316 1.48061 0.292787 1.29308Z"
fill="currentColor"
/>
</svg>
</div>
</MenuButton>
<MenuList>
<MenuItem onClick={onOpenJsonOutputModal} data-testid="view-json">
View Stamp JSON
</MenuItem>
<MenuItem
onClick={() => {
setCurrentPlatform(platform);
onOpen();
pillLocalStorage(platform.name);
getUpdatedPlatforms();
}}
data-testid="manage-stamp"
>
Manage stamp
</MenuItem>
</MenuList>
</Menu>
<JsonOutputModal
isOpen={isOpenJsonOutputModal}
onClose={onCloseJsonOutputModal}
title={`${platform.name} JSON`}
subheading={`You can find the ${platform.name} JSON data below`}
jsonOutput={selectedProviders[platform.platform].map(
(providerId) => allProvidersState[providerId]?.stamp?.credential
)}
/>
</>
) : (
<button
className="verify-btn"
ref={btnRef.current}
onClick={(e) => {
setCurrentPlatform(platform);
onOpen();
}}
>
{platform.connectMessage}
</button>
)}
</div>
</div>
</div>
<PlatformCard
i={i}
platform={platform}
btnRef={btnRef}
onOpen={onOpen}
selectedProviders={selectedProviders}
updatedPlatforms={updatedPlatforms}
getUpdatedPlatforms={getUpdatedPlatforms}
setCurrentPlatform={setCurrentPlatform}
/>
);
})}
</div>
Expand Down
15 changes: 8 additions & 7 deletions app/components/LoadingCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,20 @@ import React from "react";
export const LoadingCard = (): JSX.Element => {
return (
<div className="w-1/2 p-2 md:w-1/2 xl:w-1/4" data-testid="loading-card">
<div className="relative flex min-h-[250px] animate-pulse flex-col border border-gray-200 p-0">
<div className="relative flex animate-pulse flex-col border border-gray-200 p-0 xl:p-2">
<div className="flex flex-row p-6">
<div className="flex h-10 w-10 flex-grow justify-center md:justify-start">
<div className="h-12 w-12 rounded-full bg-gray-300"></div>
</div>
</div>
<div className="mt-2 p-2">
<div className="mb-7 h-4 w-1/3 rounded-lg bg-gray-300"></div>
<div className="mb-2 grid grid-cols-12 gap-4">
<div className="col-span-3 h-3 rounded-md bg-gray-300"></div>
<div className="col-span-2 h-3 rounded-md bg-gray-300"></div>
</div>
<div className="mt-2 flex p-2 px-4">
<div className="mx-auto mb-4 h-4 w-1/3 rounded-lg bg-gray-300 md:mx-0 md:mb-0 xl:mb-2"></div>
</div>
<div className="mb-4 hidden grid-cols-12 gap-4 p-2 px-4 md:grid xl:mb-6">
<div className="col-span-3 h-3 rounded-md bg-gray-300"></div>
<div className="col-span-2 h-3 rounded-md bg-gray-300"></div>
</div>

<div className="mt-auto flex h-12 w-full flex-row items-center justify-center border-t text-gray-900">
<div className="mr-2 h-3 w-1/5 rounded-md bg-gray-300"></div>
<div className="ml-2 h-3 w-1/5 rounded-md bg-gray-300"></div>
Expand Down
Loading

0 comments on commit fd25704

Please sign in to comment.