(Button as any);
diff --git a/components/common/Card.tsx b/components/common/Card.tsx
index 9fdcbc11b..1f2a395b9 100644
--- a/components/common/Card.tsx
+++ b/components/common/Card.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
import { twMerge } from 'tailwind-merge';
import Loader from './Loader';
diff --git a/components/common/ChainDescription.tsx b/components/common/ChainDescription.tsx
index cb7a7cc3b..7ae39214b 100644
--- a/components/common/ChainDescription.tsx
+++ b/components/common/ChainDescription.tsx
@@ -36,12 +36,12 @@ const ChainDescription = ({ chainId, headingElement }: Props) => {
<>
{!isNullish(headingElement) && createElement(headingElement, {}, t('networks.title', { chainName }))}
- {isTestnet && {t(`networks.is_testnet`, { chainName, mainnetChainName })} }
+ {isTestnet && {t('networks.is_testnet', { chainName, mainnetChainName })} }
{isCanary
? t('networks.canary_network', { chainName, mainnetChainName })
: t(`networks.networks.${mainnetChainSlug}`)}{' '}
- {t(`networks.native_token`, { chainName, nativeToken })}
+ {t('networks.native_token', { chainName, nativeToken })}
{infoUrl && (
<>
{' '}
diff --git a/components/common/Checkbox.tsx b/components/common/Checkbox.tsx
index 58cc1dd11..aaf1e02a8 100644
--- a/components/common/Checkbox.tsx
+++ b/components/common/Checkbox.tsx
@@ -6,7 +6,7 @@ interface Props {
checked: boolean;
indeterminate?: boolean;
disabled?: boolean;
- onChange?: (event: React.MouseEvent) => void;
+ onChange?: (event: React.MouseEvent | React.KeyboardEvent) => void;
className?: string;
iconClassName?: string;
}
@@ -16,7 +16,7 @@ const Checkbox = ({ checked, indeterminate, disabled, onChange, className, iconC
const iconClasses = twMerge('w-4 h-4', iconClassName);
const classes = twMerge(
- 'border border-black dark:border-white flex justify-center rounded items-center cursor-pointer',
+ 'border border-black dark:border-white flex justify-center rounded items-center cursor-pointer focus:outline-black dark:focus:outline-white',
iconClasses,
className,
(checked || indeterminate) && 'bg-brand text-black border-0',
@@ -30,7 +30,15 @@ const Checkbox = ({ checked, indeterminate, disabled, onChange, className, iconC
) : null;
return (
- !disabled && onChange?.(event)}>
+
!disabled && onChange?.(event)}
+ onKeyDown={(event) => !disabled && event.key === 'Enter' && onChange?.(event)}
+ tabIndex={0}
+ >
{icon}
);
diff --git a/components/common/Chevron.tsx b/components/common/Chevron.tsx
index 117762a05..9c84313ea 100644
--- a/components/common/Chevron.tsx
+++ b/components/common/Chevron.tsx
@@ -10,7 +10,7 @@ const Chevron = ({ className }: Props) => {
return (
);
};
diff --git a/components/common/DisabledOverlay.tsx b/components/common/DisabledOverlay.tsx
index cb76950d8..a4474775d 100644
--- a/components/common/DisabledOverlay.tsx
+++ b/components/common/DisabledOverlay.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
import WithHoverTooltip from './WithHoverTooltip';
interface Props {
diff --git a/components/common/DropdownMenu.tsx b/components/common/DropdownMenu.tsx
index 734b35506..cb50531a1 100644
--- a/components/common/DropdownMenu.tsx
+++ b/components/common/DropdownMenu.tsx
@@ -1,6 +1,6 @@
import { Menu } from '@headlessui/react';
import { twMerge } from 'tailwind-merge';
-import Button, { Props as ButtonProps } from './Button';
+import Button, { type Props as ButtonProps } from './Button';
import Chevron from './Chevron';
interface Props {
diff --git a/components/common/Error.tsx b/components/common/Error.tsx
index ce3325f4c..aa6e5761c 100644
--- a/components/common/Error.tsx
+++ b/components/common/Error.tsx
@@ -16,7 +16,7 @@ const Error = ({ error }: Props) => {
useEffect(() => {
console.log(error);
- }, []);
+ }, [error]);
const chainName = getChainName(selectedChainId);
const chainConnectionMessage = t('common.errors.messages.chain_could_not_connect', { chainName });
diff --git a/components/common/FocusTrap.tsx b/components/common/FocusTrap.tsx
index fe32af415..0785135ce 100644
--- a/components/common/FocusTrap.tsx
+++ b/components/common/FocusTrap.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, HTMLAttributes, forwardRef } from 'react';
+import { type ForwardedRef, type HTMLAttributes, forwardRef } from 'react';
interface Props extends HTMLAttributes
{}
diff --git a/components/common/Href.tsx b/components/common/Href.tsx
index e8efb1bdc..f290840ef 100644
--- a/components/common/Href.tsx
+++ b/components/common/Href.tsx
@@ -1,7 +1,7 @@
'use client';
import { Link } from 'lib/i18n/navigation';
-import { AnchorHTMLAttributes, ForwardedRef, forwardRef, ReactNode } from 'react';
+import { type AnchorHTMLAttributes, type ForwardedRef, type ReactNode, forwardRef } from 'react';
import { twMerge } from 'tailwind-merge';
interface Props extends AnchorHTMLAttributes {
diff --git a/components/common/ImageWithFallback.tsx b/components/common/ImageWithFallback.tsx
index 6ba576745..3bec980d1 100644
--- a/components/common/ImageWithFallback.tsx
+++ b/components/common/ImageWithFallback.tsx
@@ -1,6 +1,6 @@
'use client';
-import Image, { ImageProps } from 'next/image';
+import Image, { type ImageProps } from 'next/image';
import { useState } from 'react';
interface Props extends ImageProps {
diff --git a/components/common/Input.tsx b/components/common/Input.tsx
index b4d4d0a8c..d4b5067b7 100644
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import type { InputHTMLAttributes } from 'react';
import { twMerge } from 'tailwind-merge';
interface Props extends Omit, 'size'> {
diff --git a/components/common/Label.tsx b/components/common/Label.tsx
index eaeb7a9aa..104b7c497 100644
--- a/components/common/Label.tsx
+++ b/components/common/Label.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from 'react';
+import { type ForwardedRef, forwardRef } from 'react';
import { twMerge } from 'tailwind-merge';
interface Props {
diff --git a/components/common/Loader.tsx b/components/common/Loader.tsx
index 47677d220..245f42a5f 100644
--- a/components/common/Loader.tsx
+++ b/components/common/Loader.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
import { twMerge } from 'tailwind-merge';
import Error from './Error';
diff --git a/components/common/MarkdownProse.tsx b/components/common/MarkdownProse.tsx
index 85215cdf8..515307e0b 100644
--- a/components/common/MarkdownProse.tsx
+++ b/components/common/MarkdownProse.tsx
@@ -1,5 +1,5 @@
import Image from 'next/image';
-import ReactMarkdown, { Components } from 'react-markdown';
+import ReactMarkdown, { type Components } from 'react-markdown';
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
@@ -83,9 +83,10 @@ const MarkdownProse = ({ content, className }: Props) => {
customStyle={{ marginTop: '1.25em', marginBottom: '1.25em' }}
style={dracula}
language={language}
- children={String(children).replace(/\n$/, '')}
{...props}
- />
+ >
+ {String(children).replace(/\n$/, '')}
+
);
},
};
@@ -93,11 +94,12 @@ const MarkdownProse = ({ content, className }: Props) => {
return (
+ >
+ {content}
+
);
};
diff --git a/components/common/Modal.tsx b/components/common/Modal.tsx
index c3338ff70..81c99bda1 100644
--- a/components/common/Modal.tsx
+++ b/components/common/Modal.tsx
@@ -2,7 +2,7 @@
import { Dialog, Transition } from '@headlessui/react';
import { XMarkIcon } from '@heroicons/react/24/solid';
-import { Fragment, ReactNode, useRef } from 'react';
+import { Fragment, type ReactNode, useRef } from 'react';
import { twMerge } from 'tailwind-merge';
import Button from './Button';
import FocusTrap from './FocusTrap';
diff --git a/components/common/ModalWithButton.tsx b/components/common/ModalWithButton.tsx
index fa01e28d4..4db9a628f 100644
--- a/components/common/ModalWithButton.tsx
+++ b/components/common/ModalWithButton.tsx
@@ -1,7 +1,7 @@
'use client';
import Modal from 'components/common/Modal';
-import { ReactElement, ReactNode, cloneElement, useState } from 'react';
+import { type ReactElement, type ReactNode, cloneElement, useState } from 'react';
interface Props {
button: ReactElement;
diff --git a/components/common/NoSSR.tsx b/components/common/NoSSR.tsx
deleted file mode 100644
index b1bb4840b..000000000
--- a/components/common/NoSSR.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-const NoSSR = (props: any) => {props.children};
-
-export default dynamic(() => Promise.resolve(NoSSR), { ssr: false });
diff --git a/components/common/NotFoundLink.tsx b/components/common/NotFoundLink.tsx
index 1f0d1e907..413f1fc3e 100644
--- a/components/common/NotFoundLink.tsx
+++ b/components/common/NotFoundLink.tsx
@@ -1,6 +1,6 @@
import { ChevronRightIcon } from '@heroicons/react/24/outline';
import Href from 'components/common/Href';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
interface Props {
title: string;
diff --git a/components/common/PageNavigation.tsx b/components/common/PageNavigation.tsx
index cc50fa5ee..f4732e2b6 100644
--- a/components/common/PageNavigation.tsx
+++ b/components/common/PageNavigation.tsx
@@ -1,5 +1,5 @@
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import { ISidebarEntry } from 'lib/interfaces';
+import type { ISidebarEntry } from 'lib/interfaces';
import { useTranslations } from 'next-intl';
import { twMerge } from 'tailwind-merge';
import Button from './Button';
diff --git a/components/common/PlaceholderIcon.tsx b/components/common/PlaceholderIcon.tsx
index e7e469d94..559a3a810 100644
--- a/components/common/PlaceholderIcon.tsx
+++ b/components/common/PlaceholderIcon.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef, ReactNode } from 'react';
+import { type ForwardedRef, type ReactNode, forwardRef } from 'react';
import { twMerge } from 'tailwind-merge';
interface Props {
diff --git a/components/common/Prose.tsx b/components/common/Prose.tsx
index 816af5e1b..5dce069d6 100644
--- a/components/common/Prose.tsx
+++ b/components/common/Prose.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
import { twMerge } from 'tailwind-merge';
interface Props extends React.HTMLAttributes {
diff --git a/components/common/SearchBox.tsx b/components/common/SearchBox.tsx
index 16a90e530..505a90599 100644
--- a/components/common/SearchBox.tsx
+++ b/components/common/SearchBox.tsx
@@ -1,5 +1,5 @@
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
-import { ChangeEventHandler, FormEventHandler, HTMLAttributes, ReactNode } from 'react';
+import type { ChangeEventHandler, FormEventHandler, HTMLAttributes, ReactNode } from 'react';
import { twMerge } from 'tailwind-merge';
interface Props extends Omit, 'onSubmit'> {
diff --git a/components/common/Spinner.tsx b/components/common/Spinner.tsx
index a1ec3443a..6632a5f2d 100644
--- a/components/common/Spinner.tsx
+++ b/components/common/Spinner.tsx
@@ -12,13 +12,13 @@ const Spinner = ({ className }: Props) => {
);
return (
-