Update Linting (#265)

ensdomains · Jul 17, 2024 · 70edc32 · 70edc32
1 parent 9323bfe
commit 70edc32
Show file tree

Hide file tree

Showing 23 changed files with 54 additions and 53 deletions.
diff --git a/app/app/layout.tsx b/app/app/layout.tsx
@@ -47,7 +47,7 @@ export default function RootLayout(properties) {
                     dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLD) }}
                 />
             </head>
-            <body className="bg-ens-light-background-primary dark:bg-ens-dark-background-primary text-ens-light-text-primary dark:text-ens-dark-text-primary">
+            <body className="bg-ens-light-background-primary text-ens-light-text-primary dark:bg-ens-dark-background-primary dark:text-ens-dark-text-primary">
                 <Theme>{children}</Theme>
                 <script
                     defer

diff --git a/app/local/content/demos/ethregistry/transactions/MakeCommit.tsx b/app/local/content/demos/ethregistry/transactions/MakeCommit.tsx
@@ -46,8 +46,8 @@ export const MakeCommit: FC<{ commithash: string }> = ({ commithash }) => {
                     <Button
                         onClick={() => {
                             writeContract({
-                                ...config,
-                            });
+                                ...(config as any),
+                            } as any);
                         }}
                         variant="primary"
                     >

diff --git a/app/local/content/demos/ethregistry/transactions/RegisterName.tsx b/app/local/content/demos/ethregistry/transactions/RegisterName.tsx
@@ -75,8 +75,8 @@ export const RegisterName: FC<{
                     <Button
                         onClick={() => {
                             writeContract({
-                                ...config,
-                            });
+                                ...(config as any),
+                            } as any);
                         }}
                         variant="primary"
                     >

diff --git a/app/local/content/demos/ethregistryrenew/transactions/RenewName.tsx b/app/local/content/demos/ethregistryrenew/transactions/RenewName.tsx
@@ -69,21 +69,21 @@ export const RenewName: FC<{
                     <div>{rentPriceFormatted} eth</div>
                     <Button
                         onClick={() => {
-                            writeContract(config);
+                            writeContract(config as any);
                         }}
                         variant="primary"
                     >
                         Renew
                     </Button>
                 </div>
                 {!isReady && (
-                    <div className="border-ens-light-red-primary bg-ens-light-red-surface text-ens-light-red-primary dark:border-ens-dark-red-primary dark:bg-ens-dark-red-surface flex items-center gap-1 rounded-lg px-3 py-2">
+                    <div className="flex items-center gap-1 rounded-lg border-ens-light-red-primary bg-ens-light-red-surface px-3 py-2 text-ens-light-red-primary dark:border-ens-dark-red-primary dark:bg-ens-dark-red-surface">
                         <FiX />
                         Not Ready
                     </div>
                 )}
                 {isError && (
-                    <div className="border-ens-light-red-primary bg-ens-light-red-surface text-ens-light-red-primary dark:border-ens-dark-red-primary dark:bg-ens-dark-red-surface flex items-center gap-1 rounded-lg px-3 py-2">
+                    <div className="flex items-center gap-1 rounded-lg border-ens-light-red-primary bg-ens-light-red-surface px-3 py-2 text-ens-light-red-primary dark:border-ens-dark-red-primary dark:bg-ens-dark-red-surface">
                         <FiX />
                         Problem
                     </div>

diff --git a/app/local/content/demos/namelookup/NameLookup.tsx b/app/local/content/demos/namelookup/NameLookup.tsx
@@ -23,21 +23,21 @@ export const NameLookupDemo: FC = () => {
     const isOtherError = !isLoading && error && data['status'] !== 404;
 
     return (
-        <div className="text-ens-light-text-primary dark:text-ens-dark-text-primary mx-auto space-y-2 p-4">
+        <div className="mx-auto space-y-2 p-4 text-ens-light-text-primary dark:text-ens-dark-text-primary">
             <div className="w-full">
                 <input
-                    className="border-ens-light-border dark:border-ens-dark-border input w-full rounded-md border pl-2"
+                    className="input w-full rounded-md border border-ens-light-border pl-2 dark:border-ens-dark-border"
                     placeholder="Enter name or address..."
                     onChange={(event) => setTemporaryName(event.target.value)}
                     value={temporaryName}
                 />
             </div>
-            <div className="border-ens-light-border dark:border-ens-dark-border not-prose mt-2 flex h-fit flex-col gap-1.5 rounded-lg border p-4">
+            <div className="not-prose mt-2 flex h-fit flex-col gap-1.5 rounded-lg border border-ens-light-border p-4 dark:border-ens-dark-border">
                 {isLoading && (
-                    <div className="bg-ens-light-background-secondary border-ens-light-border dark:border-ens-dark-border dark:bg-ens-dark-background-secondary h-4 rounded-lg border">
+                    <div className="h-4 rounded-lg border border-ens-light-border bg-ens-light-background-secondary dark:border-ens-dark-border dark:bg-ens-dark-background-secondary">
                         <div
                             className={clsx(
-                                'bg-ens-light-blue-primary dark:bg-ens-dark-blue-primary h-full rounded-lg transition',
+                                'h-full rounded-lg bg-ens-light-blue-primary transition dark:bg-ens-dark-blue-primary',
                                 temporaryName == name && 'load-width'
                             )}
                         ></div>
@@ -72,7 +72,7 @@ export const NameLookupDemo: FC = () => {
                     {isValidName && (
                         <>
                             <div className="flex gap-2">
-                                <div className="bg-ens-light-blue-100 size-10 overflow-hidden rounded-full">
+                                <div className="size-10 overflow-hidden rounded-full bg-ens-light-blue-100">
                                     {data?.avatar && (
                                         <img
                                             src={data.avatar}

diff --git a/app/local/content/demos/send-transaction/SendTransaction.tsx b/app/local/content/demos/send-transaction/SendTransaction.tsx
@@ -40,7 +40,7 @@ export const SendTransactionDemo: FC = () => {
             </label>
             <input
                 id="input"
-                className="border-ens-light-border bg-ens-light-background-primary dark:border-ens-dark-border dark:bg-ens-dark-background-primary w-full rounded-md border px-3 py-2"
+                className="w-full rounded-md border border-ens-light-border bg-ens-light-background-primary px-3 py-2 dark:border-ens-dark-border dark:bg-ens-dark-background-primary"
                 placeholder="ens.eth"
                 onChange={(event) => setInput(event.target.value)}
             />

diff --git a/app/local/content/extras/deployments/deployment.tsx b/app/local/content/extras/deployments/deployment.tsx
@@ -45,21 +45,21 @@ const ChainDeployment: FC<{
 }> = async ({ identifier, preset, chain }) => {
     return (
         <div
-            className="hidable-code not-prose border-ens-light-border dark:border-ens-dark-border group overflow-hidden rounded-b-xl border"
+            className="hidable-code not-prose group overflow-hidden rounded-b-xl border border-ens-light-border dark:border-ens-dark-border"
             data-code-variant={preset}
             data-code-group={identifier}
         >
             {chain.contracts.map(
                 withDeploymentData(chain.slug, (deployment, data) => (
                     <div
                         key={deployment.name}
-                        className="border-b-ens-light-border dark:border-b-ens-dark-border group flex flex-col justify-between gap-2 border-b p-4 last:border-b-0 md:flex-row md:items-center"
+                        className="group flex flex-col justify-between gap-2 border-b border-b-ens-light-border p-4 last:border-b-0 dark:border-b-ens-dark-border md:flex-row md:items-center"
                     >
                         <div className="">
                             <div className="text-base font-bold leading-5">
                                 {deployment.name}
                             </div>
-                            <div className="text-ens-light-blue-primary flex flex-wrap gap-x-2 text-sm font-bold">
+                            <div className="flex flex-wrap gap-x-2 text-sm font-bold text-ens-light-blue-primary">
                                 {deployment.path && (
                                     <Link
                                         href={`https://github.com/ensdomains/ens-contracts/blob/${
@@ -111,7 +111,7 @@ const ChainDeployment: FC<{
                         </div>
                         <div
                             className={
-                                'bg-ens-light-background-secondary border-ens-light-border flex items-center justify-between gap-2 overflow-x-auto rounded-lg border px-3 py-[10px] text-base md:w-[480px]'
+                                'flex items-center justify-between gap-2 overflow-x-auto rounded-lg border border-ens-light-border bg-ens-light-background-secondary px-3 py-[10px] text-base md:w-[480px]'
                             }
                         >
                             <pre className="text-wrap break-all p-0 text-base">

diff --git a/app/local/content/extras/videos/VideoGallery.tsx b/app/local/content/extras/videos/VideoGallery.tsx
@@ -58,10 +58,10 @@ export const VideoGallery: FC<{}> = () => {
                 },
             ].map((entry, index) => (
                 <a
-                    className="border-ens-light-border dark:border-ens-dark-border bg-ens-light-background-primary dark:bg-ens-dark-background-primary hover:bg-ens-light-background-secondary/50 hover:dark:bg-ens-dark-background-secondary/50 my-0 flex w-full flex-col overflow-hidden rounded-lg border py-0"
+                    className="my-0 flex w-full flex-col overflow-hidden rounded-lg border border-ens-light-border bg-ens-light-background-primary py-0 hover:bg-ens-light-background-secondary/50 dark:border-ens-dark-border dark:bg-ens-dark-background-primary hover:dark:bg-ens-dark-background-secondary/50"
                     href={entry.href}
                 >
-                    <div className="bg-ens-light-background-disabled dark:bg-ens-dark-background-secondary aspect-video w-full">
+                    <div className="aspect-video w-full bg-ens-light-background-disabled dark:bg-ens-dark-background-secondary">
                         {entry.cover && (
                             <img
                                 src={entry.cover}
@@ -70,7 +70,7 @@ export const VideoGallery: FC<{}> = () => {
                             />
                         )}
                     </div>
-                    <div className="border-ens-light-border dark:border-ens-dark-border w-full text-ellipsis border-t px-3 pb-3 pt-2">
+                    <div className="w-full text-ellipsis border-t border-ens-light-border px-3 pb-3 pt-2 dark:border-ens-dark-border">
                         <span className="font-bold">{entry.title}</span>
                         <p className="tag tag-blue">{entry.location}</p>
                         {/*<p className="h-16 overflow-ellipsis text-xs">{entry.description}</p>*/}

diff --git a/app/local/content/prose/code/group/CodeGroupHeader.tsx b/app/local/content/prose/code/group/CodeGroupHeader.tsx
@@ -19,9 +19,9 @@ export const CodeGroupHeader: FC<{
     }
 
     return (
-        <div className="border-ens-light-border bg-ens-light-grey-surface dark:border-ens-dark-border dark:bg-ens-dark-grey-surface relative flex min-h-[calc(theme(spacing.12)+1px)] items-center justify-between gap-x-4 rounded-t-lg border border-b-0 px-4">
+        <div className="relative flex min-h-[calc(theme(spacing.12)+1px)] items-center justify-between gap-x-4 rounded-t-lg border border-b-0 border-ens-light-border bg-ens-light-grey-surface px-4 dark:border-ens-dark-border dark:bg-ens-dark-grey-surface">
             {title && (
-                <div className="text-ens-light-text-primary dark:text-ens-dark-text-primary text-base">
+                <div className="text-base text-ens-light-text-primary dark:text-ens-dark-text-primary">
                     {title}
                 </div>
             )}

diff --git a/app/local/content/prose/profile/ProfileAvatar.tsx b/app/local/content/prose/profile/ProfileAvatar.tsx
@@ -11,7 +11,7 @@ export const ProfileAvatar: FC<{ name: string }> = ({ name }) => {
 
     return (
         <div className="relative aspect-square size-full">
-            <div className="bg-ens-light-background-secondary absolute inset-0 size-full"></div>
+            <div className="absolute inset-0 size-full bg-ens-light-background-secondary"></div>
             <div className="absolute inset-0 size-full" style={mesh}></div>
             <img
                 src={'https://enstate.rs/i/' + name}

diff --git a/app/src/components/Libraries.tsx b/app/src/components/Libraries.tsx
@@ -87,7 +87,8 @@ export const ensLibraries: Language[] = [
             {
                 href: 'https://github.com/ethereum/web3.py',
                 name: 'web3.py',
-                description: 'A python interface for interacting with the Ethereum blockchain and ecosystem.',
+                description:
+                    'A python interface for interacting with the Ethereum blockchain and ecosystem.',
                 logo: undefined,
             },
         ],

diff --git a/app/src/components/contribute/ContributorsSection.tsx b/app/src/components/contribute/ContributorsSection.tsx
@@ -45,7 +45,7 @@ export const ContributorsSection: FC<{
                         />
                         <span className="absolute left-1/2 top-0 size-0">
                             <span className="relative">
-                                <span className="border-ens-light-border bg-ens-light-background-primary dark:border-ens-dark-border dark:bg-ens-dark-background-primary absolute top-[-0.2rem] hidden -translate-x-1/2 -translate-y-full items-center gap-1 rounded-lg border px-2 py-1 text-xs group-hover:flex">
+                                <span className="absolute top-[-0.2rem] hidden -translate-x-1/2 -translate-y-full items-center gap-1 rounded-lg border border-ens-light-border bg-ens-light-background-primary px-2 py-1 text-xs group-hover:flex dark:border-ens-dark-border dark:bg-ens-dark-background-primary">
                                     <span>{contributor}</span>
                                     <FiExternalLink />
                                 </span>

diff --git a/app/src/components/mdx/EmbedLink.tsx b/app/src/components/mdx/EmbedLink.tsx
@@ -12,17 +12,17 @@ export const EmbedLink: FC<{
     return (
         <Link
             href={href}
-            className="card1 text-ens-light-text-primary hover:bg-ens-light-background-secondary/20 dark:text-ens-dark-text-primary hover:dark:bg-ens-dark-background-secondary/20 flex items-center gap-1.5 p-6 no-underline outline-blue-500 transition-all hover:outline-2"
+            className="card1 flex items-center gap-1.5 p-6 text-ens-light-text-primary no-underline outline-blue-500 transition-all hover:bg-ens-light-background-secondary/20 hover:outline-2 dark:text-ens-dark-text-primary hover:dark:bg-ens-dark-background-secondary/20"
             target={target}
         >
-            <div className="not-prose text-ens-light-text-primary hover:bg-ens-light-background-secondary/20 dark:text-ens-dark-text-primary hover:dark:bg-ens-dark-background-secondary/20 flex w-full items-center gap-1.5 no-underline transition-all">
+            <div className="not-prose flex w-full items-center gap-1.5 text-ens-light-text-primary no-underline transition-all hover:bg-ens-light-background-secondary/20 dark:text-ens-dark-text-primary hover:dark:bg-ens-dark-background-secondary/20">
                 <span className="flex w-full flex-col">
                     <span className="font-bold">{title}</span>
                     <span className="font-normal">{description}</span>
                 </span>
 
                 {tag && (
-                    <span className="bg-ens-light-yellow-surface text-ens-light-yellow-active dark:bg-ens-dark-yellow-surface dark:text-ens-dark-yellow-active ml-2 rounded-full px-2 text-xs">
+                    <span className="ml-2 rounded-full bg-ens-light-yellow-surface px-2 text-xs text-ens-light-yellow-active dark:bg-ens-dark-yellow-surface dark:text-ens-dark-yellow-active">
                         {tag}
                     </span>
                 )}

diff --git a/app/src/components/mdx/Note.tsx b/app/src/components/mdx/Note.tsx
@@ -2,7 +2,7 @@ import { InfoIcon } from '../icons/InfoIcon';
 
 export const Note = ({ children }) => {
     return (
-        <div className="dark:border-ens-500/30 border-ens-light-border bg-ens-light-blue-50/50 text-ens-light-blue-900 dark:border-ens-dark-border dark:bg-ens-light-blue-500/5 dark:text-ens-light-blue-200 my-6 flex gap-2.5 rounded-2xl border p-4 leading-6 dark:[--tw-prose-links-hover:theme(colors.ens.light.blue.300)] dark:[--tw-prose-links:theme(colors.white)]">
+        <div className="dark:border-ens-500/30 my-6 flex gap-2.5 rounded-2xl border border-ens-light-border bg-ens-light-blue-50/50 p-4 leading-6 text-ens-light-blue-900 dark:border-ens-dark-border dark:bg-ens-light-blue-500/5 dark:text-ens-light-blue-200 dark:[--tw-prose-links-hover:theme(colors.ens.light.blue.300)] dark:[--tw-prose-links:theme(colors.white)]">
             <InfoIcon className="fill-ens-500 dark:fill-ens-200/20 dark:stroke-ens-200 mt-1 size-4 flex-none stroke-white" />
             <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
                 {children}

diff --git a/app/src/layout/PageLayout.tsx b/app/src/layout/PageLayout.tsx
@@ -68,7 +68,7 @@ export const Layout: FC<{
                                     style={{ left: 'calc(50vw + 26rem)' }}
                                 >
                                     <div className="m-4 p-4">
-                                        <div className="text-ens-light-text-secondary dark:text-ens-dark-text-secondary text-sm">
+                                        <div className="text-sm text-ens-light-text-secondary dark:text-ens-dark-text-secondary">
                                             On this page
                                         </div>
                                         <ul className="text-sm">

diff --git a/app/src/layout/footer/contribute/ContributeLink.tsx b/app/src/layout/footer/contribute/ContributeLink.tsx
@@ -24,7 +24,7 @@ export const ContributeLink: FC<{ url?: string }> = ({ url }) => {
     return (
         <a
             href={`https://github.com/${ROOT_REPO}/edit/${branch}${url}`}
-            className="text-ens-light-blue-primary dark:text-ens-dark-blue-primary flex items-center gap-2 text-xs"
+            className="flex items-center gap-2 text-xs text-ens-light-blue-primary dark:text-ens-dark-blue-primary"
             target="_blank"
             rel="nofollow"
         >

diff --git a/app/src/layout/header/Header.tsx b/app/src/layout/header/Header.tsx
@@ -72,7 +72,7 @@ export const Header = forwardRef<HTMLDivElement, { className?: string }>(
                                             ? '/ens/dao/ens_logo_dao.svg'
                                             : '/ens/primary/ens_logo_primary.svg'
                                     }
-                                    className="fill-ens-dao-400 ml-1 h-8"
+                                    className="ml-1 h-8 fill-ens-dao-400"
                                     alt="ENS Logo"
                                     height={'32'}
                                 />

diff --git a/app/src/layout/header/ThemeSwitcher.tsx b/app/src/layout/header/ThemeSwitcher.tsx
@@ -15,15 +15,15 @@ export const ThemeSwitcher = () => {
             }}
             aria-label="Toggle theme"
         >
-            <div className="bg-ens-light-background-secondary dark:bg-ens-dark-background-secondary relative flex gap-2 rounded-xl p-1 text-sm">
+            <div className="relative flex gap-2 rounded-xl bg-ens-light-background-secondary p-1 text-sm dark:bg-ens-dark-background-secondary">
                 <div
                     className={clsx(
                         'absolute inset-0 h-full transition-all duration-500'
                     )}
                 >
                     <div
                         className={clsx(
-                            'bg-ens-light-blue-primary absolute aspect-square h-full rounded-full transition-all duration-300'
+                            'absolute aspect-square h-full rounded-full bg-ens-light-blue-primary transition-all duration-300'
                         )}
                         style={{
                             // @ts-ignore