feat(app): adds on-chain stamp label (#1519)

* feat(app): adds on-chain status tags * feat(app): updates for responsiveness * feat(app): removes superfluous props type * feat(app): removes log and fragment
passportxyz · Jul 28, 2023 · f452104 · f452104 · irfanns15 · Aug 3, 2023
1 parent 3ca1a1f
commit f452104
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/app/components/OnChainTag.tsx b/app/components/OnChainTag.tsx
@@ -0,0 +1,17 @@
+import { Tag, TagLabel } from "@chakra-ui/react";
+
+export function OnChainTag({ marginLeft }: { marginLeft?: string }) {
+  return (
+    <Tag
+      marginLeft={`${marginLeft}`}
+      bgColor="var(--color-accent-2)"
+      textColor="white"
+      paddingX="8px"
+      paddingY="2px"
+      rounded="sm"
+      size="sm"
+    >
+      <TagLabel>On-Chain</TagLabel>
+    </Tag>
+  );
+}
diff --git a/app/components/PlatformCard.tsx b/app/components/PlatformCard.tsx
@@ -21,6 +21,7 @@ import { pillLocalStorage } from "../context/userContext";
 import { JsonOutputModal } from "./JsonOutputModal";
 import { RemoveStampModal } from "./RemoveStampModal";
 import { getStampProviderFilters } from "../config/filters";
+import { OnChainTag } from "./OnChainTag";
 
 type SelectedProviders = Record<PLATFORM_ID, PROVIDER_ID[]>;
 
@@ -135,7 +136,18 @@ export const PlatformCard = ({
               )}
           </div>
           <div className="mt-4 flex justify-center md:mt-6 md:block md:justify-start">
-            <h1 className="text-lg">{platform.name}</h1>
+            <div
+              className={`flex flex-col place-items-start md:flex-row ${
+                platform.name.split(" ").length > 1 ? "items-center md:items-baseline" : "items-center"
+              }`}
+            >
+              <h1
+                className={`mr-0 text-lg md:mr-4 ${platform.name.split(" ").length > 1 ? "text-left" : "text-center"}`}
+              >
+                {platform.name}
+              </h1>
+              {process.env.NEXT_PUBLIC_FF_CHAIN_SYNC === "on" && hasOnChainProviders() ? <OnChainTag /> : <></>}
+            </div>
             <p className="pleading-relaxed mt-2 hidden text-color-4 md:inline-block">{platform.description}</p>
           </div>
         </div>
@@ -145,11 +157,6 @@ export const PlatformCard = ({
               <Menu>
                 <MenuButton disabled={disabled} className="verify-btn flex" data-testid="card-menu-button">
                   <div className="m-auto flex items-center justify-center">
-                    {process.env.NEXT_PUBLIC_FF_CHAIN_SYNC === "on" && hasOnChainProviders() ? (
-                      <LinkIcon className="h-6 w-5 text-accent-3" />
-                    ) : (
-                      <></>
-                    )}
                     <ShieldCheckIcon className="h-6 w-5 text-accent-3" />
                     <span className="mx-2 translate-y-[1px]">Verified</span>
                     <ChevronDownIcon className="h-6 w-6" />

diff --git a/app/components/StampSelector.tsx b/app/components/StampSelector.tsx
@@ -6,6 +6,7 @@ import { PlatformGroupSpec } from "../config/providers";
 import { getStampProviderFilters } from "../config/filters";
 import { OnChainContext } from "../context/onChainContext";
 import { LinkIcon } from "@heroicons/react/20/solid";
+import { OnChainTag } from "./OnChainTag";
 import Toggle from "./Toggle";
 import { getProviderSpec } from "../utils/helpers";
 import { CeramicContext } from "../context/ceramicContext";
@@ -71,14 +72,11 @@ export function StampSelector({
                       key={`${provider.title}${i}`}
                       data-testid={`indicator-${provider.name}`}
                     >
-                      <div className={`text-md relative top-[-0.3em] ${textColor}`}>
-                        {process.env.NEXT_PUBLIC_FF_CHAIN_SYNC === "on" &&
-                          (isProviderOnChain(provider.name) ? (
-                            <LinkIcon className="mr-2 inline h-6 w-5 text-accent-3" />
-                          ) : (
-                            <LinkIcon className="mr-2 inline h-6 w-5 text-color-4" />
-                          ))}
+                      <div className={`text-md relative top-[-0.3em] ${textColor} flex items-center`}>
                         {provider.title}
+                        {process.env.NEXT_PUBLIC_FF_CHAIN_SYNC === "on" && isProviderOnChain(provider.name) && (
+                          <OnChainTag marginLeft="3" />
+                        )}
                       </div>
                     </li>
                   );