feat: migrate EthereumAttestationRequirementFooter to Tailwind CSS

guildxyz · Oct 4, 2024 · 71af999 · 71af999
1 parent 016e152
commit 71af999
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 20 deletions.
diff --git a/src/components/[guild]/Requirements/components/BlockExplorerUrl.tsx b/src/components/[guild]/Requirements/components/BlockExplorerUrl.tsx
@@ -9,13 +9,15 @@ type Props = {
   address?: string
   label?: string
   path?: string
+  className?: string
 }
 
 const BlockExplorerUrl = ({
   chain: chainProp,
   address: addressProp,
   label,
   path: pathProp,
+  className,
 }: Props): JSX.Element => {
   const { colorMode } = useColorMode()
   const { chain, type, address, data } = useRequirementContext()
@@ -39,6 +41,7 @@ const BlockExplorerUrl = ({
       href={url}
       imageUrl={CHAIN_CONFIG[chainProp ?? chain].blockExplorerIconUrl[colorMode]}
       label={label ?? "View on explorer"}
+      className={className}
     />
   )
 }

diff --git a/src/components/[guild]/Requirements/components/Requirement.tsx b/src/components/[guild]/Requirements/components/Requirement.tsx
@@ -62,7 +62,7 @@ const Requirement = ({
             : requirement?.data?.customName || children}
         </ChildrenWrapper>
 
-        <div className="flex flex-wrap items-center gap-2 has-[>*]:mt-1">
+        <div className="flex flex-wrap items-center gap-1.5 has-[>*]:mt-1">
           {!setValue && (
             <Visibility
               visibilityRoleId={requirement?.visibilityRoleId || null}

diff --git a/src/requirements/CoinbaseEAS/CoinbaseEASRequirement.tsx b/src/requirements/CoinbaseEAS/CoinbaseEASRequirement.tsx
@@ -5,7 +5,7 @@ import {
 } from "components/[guild]/Requirements/components/Requirement"
 import { useRequirementContext } from "components/[guild]/Requirements/components/RequirementContext"
 import CountryFlagAndName from "requirements/CoinbaseEAS/components/CountryFlagAndName"
-import EthereumAttestationRequirementFooter from "requirements/EthereumAttestation/components/EthereumAttestationRequirementFooter"
+import { EthereumAttestationRequirementFooter } from "requirements/EthereumAttestation/components/EthereumAttestationRequirementFooter"
 import { EAS_CB_VERIFIED_ACCOUNT_SCHEMA_ID } from "./CoinbaseEASForm"
 
 const CoinbaseEASRequirement = (props: RequirementProps): JSX.Element => {

diff --git a/src/requirements/EthereumAttestation/EthereumAttestationRequirement.tsx b/src/requirements/EthereumAttestation/EthereumAttestationRequirement.tsx
@@ -8,7 +8,7 @@ import { DataBlock } from "components/common/DataBlock"
 import { DataBlockWithCopy } from "components/common/DataBlockWithCopy"
 import useResolveAddress from "hooks/useResolveAddress"
 import shortenHex from "utils/shortenHex"
-import EthereumAttestationRequirementFooter from "./components/EthereumAttestationRequirementFooter"
+import { EthereumAttestationRequirementFooter } from "./components/EthereumAttestationRequirementFooter"
 
 const EthereumAttestationRequirement = (props: RequirementProps): JSX.Element => {
   const requirement = useRequirementContext()

diff --git a/src/requirements/EthereumAttestation/components/EthereumAttestationRequirementFooter.tsx b/src/requirements/EthereumAttestation/components/EthereumAttestationRequirementFooter.tsx
@@ -1,4 +1,3 @@
-import { HStack, Wrap } from "@chakra-ui/react"
 import BlockExplorerUrl from "components/[guild]/Requirements/components/BlockExplorerUrl"
 import { RequirementLink } from "components/[guild]/Requirements/components/RequirementButton"
 import { RequirementChainIndicator } from "components/[guild]/Requirements/components/RequirementChainIndicator"
@@ -16,25 +15,29 @@ export const EAS_SCAN_BASE = {
 } as const
 
 const EthereumAttestationRequirementFooter = () => {
-  const { type, data, chain } = useRequirementContext()
+  const { type, data, chain } = useRequirementContext<
+    "COINBASE_EAS_ATTESTED_BY" | "EAS_ATTESTED_BY" | "EAS_ATTEST"
+  >()
 
   return (
-    <Wrap spacing={4} spacingY={2}>
+    <>
       <RequirementChainIndicator />
-      <HStack spacing={4}>
-        <RequirementLink
-          href={`${EAS_SCAN_BASE[chain ?? "ETHEREUM"]}/${data?.schemaId}`}
-          imageUrl="/requirementLogos/eas.png"
-          label="Schema"
-        />
-        <BlockExplorerUrl
-          path="address"
-          address={data?.attester ?? data?.recipient}
-          label={type === "EAS_ATTEST" ? "Recipient" : "Attester"}
-        />
-      </HStack>
-    </Wrap>
+
+      <RequirementLink
+        href={`${EAS_SCAN_BASE[chain ?? "ETHEREUM"]}/${data?.schemaId}`}
+        imageUrl="/requirementLogos/eas.png"
+        label="Schema"
+        className="ml-1"
+      />
+
+      <BlockExplorerUrl
+        path="address"
+        address={type === "EAS_ATTEST" ? data.recipient : data.attester}
+        label={type === "EAS_ATTEST" ? "Recipient" : "Attester"}
+        className="mx-1"
+      />
+    </>
   )
 }
 
-export default EthereumAttestationRequirementFooter
+export { EthereumAttestationRequirementFooter }