(Button as any);
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/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/MarkdownProse.tsx b/components/common/MarkdownProse.tsx
index 46bd3b250..515307e0b 100644
--- a/components/common/MarkdownProse.tsx
+++ b/components/common/MarkdownProse.tsx
@@ -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/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/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 (
-