From 2627c0a0c30b18112ff9f5e32480f16dd3abcfb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Peter=20Jur=C4=8Do?=
 <62913177+peterjurco@users.noreply.github.com>
Date: Fri, 6 Dec 2024 16:33:50 +0100
Subject: [PATCH] Fix console errors (#516)

* Use camelCase in SVG element prop names when they are used as react
components

* Add forgotten key prop

* Do not pass incorrect props to input & textarea
---
 src/components/form/input.tsx              | 10 +++++-----
 src/components/form/textarea.tsx           |  6 +++---
 src/components/icons/checkbox-radio.tsx    |  2 +-
 src/components/layout/layout.tsx           |  4 +++-
 src/components/menu/dashboard-icon.tsx     |  2 +-
 src/components/menu/docs-icon.tsx          |  6 +++---
 src/components/menu/forum-icon.tsx         |  6 +++---
 src/components/menu/market-icon.tsx        |  6 +++---
 src/components/menu/proposals-icon.tsx     |  4 ++--
 src/components/menu/tracker-icon.tsx       |  2 +-
 src/components/sign-in/disconnect-icon.tsx |  6 +++---
 11 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/components/form/input.tsx b/src/components/form/input.tsx
index 3e919d5d..b5e40eab 100644
--- a/src/components/form/input.tsx
+++ b/src/components/form/input.tsx
@@ -14,7 +14,7 @@ type Props = {
   onChange: ChangeEventHandler<HTMLInputElement>;
 };
 
-const Input = ({ type = 'text', ...componentProps }: Props) => {
+const Input = ({ type = 'text', helperText, error, ...inputProps }: Props) => {
   const CustomNumberInput = useCallback((props: any) => {
     return (
       <div className={styles.input}>
@@ -25,16 +25,16 @@ const Input = ({ type = 'text', ...componentProps }: Props) => {
 
   if (type === 'number') {
     return (
-      <InputWrapper {...componentProps}>
-        <NumberFormat {...componentProps} customInput={CustomNumberInput} decimalScale={18} />
+      <InputWrapper {...inputProps} error={error} helperText={helperText}>
+        <NumberFormat {...inputProps} customInput={CustomNumberInput} decimalScale={18} />
       </InputWrapper>
     );
   }
 
   return (
-    <InputWrapper {...componentProps}>
+    <InputWrapper {...inputProps} error={error} helperText={helperText}>
       <div className={styles.input}>
-        <input {...componentProps} />
+        <input {...inputProps} />
       </div>
     </InputWrapper>
   );
diff --git a/src/components/form/textarea.tsx b/src/components/form/textarea.tsx
index 77afa3cd..b2990d69 100644
--- a/src/components/form/textarea.tsx
+++ b/src/components/form/textarea.tsx
@@ -11,11 +11,11 @@ type Props = {
   onChange: ChangeEventHandler<HTMLTextAreaElement>;
 };
 
-const Textarea = (props: Props) => {
+const Textarea = ({ helperText, error, ...textAreaProps }: Props) => {
   return (
-    <InputWrapper {...props}>
+    <InputWrapper helperText={helperText} error={error} {...textAreaProps}>
       <div className={styles.input}>
-        <textarea className={styles.input} {...props} />
+        <textarea className={styles.input} {...textAreaProps} />
       </div>
     </InputWrapper>
   );
diff --git a/src/components/icons/checkbox-radio.tsx b/src/components/icons/checkbox-radio.tsx
index 6e6ffe42..930513a0 100644
--- a/src/components/icons/checkbox-radio.tsx
+++ b/src/components/icons/checkbox-radio.tsx
@@ -12,7 +12,7 @@ export const CheckboxRadioIcon = ({ theme = 'light', ...props }: Props) => {
           d="M19.375 10C19.375 15.1777 15.1777 19.375 10 19.375C4.82233 19.375 0.625 15.1777 0.625 10C0.625 4.82233 4.82233 0.625 10 0.625C15.1777 0.625 19.375 4.82233 19.375 10Z"
           fill={theme === 'light' ? '#F8FAFD' : '#0C1143'}
           stroke={theme === 'light' ? '#99A0E4' : '#D1D5FD'}
-          stroke-width="1.25"
+          strokeWidth="1.25"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
index c9710295..952d94c7 100644
--- a/src/components/layout/layout.tsx
+++ b/src/components/layout/layout.tsx
@@ -59,7 +59,9 @@ export const BaseLayout = ({ children, subtitle }: BaseLayoutProps) => {
             <div className={styles.footerContent}>
               {footerLinks.map((link) =>
                 link.href ? (
-                  <ExternalLink href={link.href}>{link.text}</ExternalLink>
+                  <ExternalLink href={link.href} key={link.text}>
+                    {link.text}
+                  </ExternalLink>
                 ) : (
                   <Button
                     key={link.text}
diff --git a/src/components/menu/dashboard-icon.tsx b/src/components/menu/dashboard-icon.tsx
index 816a9014..e57689a2 100644
--- a/src/components/menu/dashboard-icon.tsx
+++ b/src/components/menu/dashboard-icon.tsx
@@ -1,6 +1,6 @@
 const DashboardIcon = () => (
   <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_9339_9589)">
+    <g clipPath="url(#clip0_9339_9589)">
       <path
         d="M13.8407 3.46875H3.47168V13.8599H8.66724H13.8628V3.46875H13.8407Z"
         stroke="currentColor"
diff --git a/src/components/menu/docs-icon.tsx b/src/components/menu/docs-icon.tsx
index cc49fd9f..2f434ed8 100644
--- a/src/components/menu/docs-icon.tsx
+++ b/src/components/menu/docs-icon.tsx
@@ -1,8 +1,8 @@
 const DocsIcon = () => (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_9339_9718)">
-      <g clip-path="url(#clip1_9339_9718)">
-        <g clip-path="url(#clip2_9339_9718)">
+    <g clipPath="url(#clip0_9339_9718)">
+      <g clipPath="url(#clip1_9339_9718)">
+        <g clipPath="url(#clip2_9339_9718)">
           <path d="M19.8848 1.12695H4.13477V22.877H19.8848V1.12695Z" stroke="currentColor" />
           <path
             d="M6.38477 4.12695H17.6348M6.38477 6.75195H17.6348M6.38477 9.37695H17.6348M6.38477 12.002H17.6348"
diff --git a/src/components/menu/forum-icon.tsx b/src/components/menu/forum-icon.tsx
index a3a77341..97e2f775 100644
--- a/src/components/menu/forum-icon.tsx
+++ b/src/components/menu/forum-icon.tsx
@@ -1,8 +1,8 @@
 const ForumIcon = () => (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_9339_9665)">
-      <g clip-path="url(#clip1_9339_9665)">
-        <g clip-path="url(#clip2_9339_9665)">
+    <g clipPath="url(#clip0_9339_9665)">
+      <g clipPath="url(#clip1_9339_9665)">
+        <g clipPath="url(#clip2_9339_9665)">
           <path
             d="M21.376 21.4066L21.0087 21.7459L21.876 22.6846V21.4066H21.376ZM21.376 4.15625H21.876V3.65625H21.376V4.15625ZM2.62598 4.15625V3.65625H2.12598V4.15625H2.62598ZM2.62598 16.5602H2.12598V17.0602H2.62598V16.5602ZM16.8986 16.5602L17.2659 16.2209L17.1174 16.0602H16.8986V16.5602ZM21.876 21.4066V4.15625H20.876V21.4066H21.876ZM21.376 3.65625H2.62598V4.65625H21.376V3.65625ZM2.12598 4.15625V16.5602H3.12598V4.15625H2.12598ZM2.62598 17.0602H16.8986V16.0602H2.62598V17.0602ZM16.5314 16.8995L21.0087 21.7459L21.7432 21.0673L17.2659 16.2209L16.5314 16.8995Z"
             fill="currentColor"
diff --git a/src/components/menu/market-icon.tsx b/src/components/menu/market-icon.tsx
index d854d6e1..062df31f 100644
--- a/src/components/menu/market-icon.tsx
+++ b/src/components/menu/market-icon.tsx
@@ -1,8 +1,8 @@
 const MarketIcon = () => (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_9339_9683)">
-      <g clip-path="url(#clip1_9339_9683)">
-        <g clip-path="url(#clip2_9339_9683)">
+    <g clipPath="url(#clip0_9339_9683)">
+      <g clipPath="url(#clip1_9339_9683)">
+        <g clipPath="url(#clip2_9339_9683)">
           <rect x="6.87988" y="11.9512" width="10.2483" height="5.38304" stroke="currentColor" />
           <path d="M2.62598 9.5V21.3799H21.3756V9.5" stroke="currentColor" />
           <path
diff --git a/src/components/menu/proposals-icon.tsx b/src/components/menu/proposals-icon.tsx
index 2eb91dc0..a9395503 100644
--- a/src/components/menu/proposals-icon.tsx
+++ b/src/components/menu/proposals-icon.tsx
@@ -1,7 +1,7 @@
 const ProposalsIcon = () => (
   <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_9339_9603)">
-      <g clip-path="url(#clip1_9339_9603)">
+    <g clipPath="url(#clip0_9339_9603)">
+      <g clipPath="url(#clip1_9339_9603)">
         <path
           d="M28.5 22.3671H29.125V23.876L28.0581 22.809L28.5 22.3671ZM28.5 3.48828V2.86328H29.125V3.48828H28.5ZM9.5 16.8748V17.4998H8.875V16.8748H9.5ZM23.0078 16.8748V16.2498H23.2667L23.4497 16.4328L23.0078 16.8748ZM9.5 3.48828H8.875V2.86328H9.5V3.48828ZM27.875 22.3671V3.48828H29.125V22.3671H27.875ZM10.125 12.5041V16.8748H8.875V12.5041H10.125ZM9.5 16.2498H23.0078V17.4998H9.5V16.2498ZM23.4497 16.4328L28.9419 21.9252L28.0581 22.809L22.5658 17.3167L23.4497 16.4328ZM28.5 4.11328H9.5V2.86328H28.5V4.11328ZM8.875 12.5041V3.48828H10.125V12.5041H8.875Z"
           fill="currentColor"
diff --git a/src/components/menu/tracker-icon.tsx b/src/components/menu/tracker-icon.tsx
index 7fd3329f..62fc8d99 100644
--- a/src/components/menu/tracker-icon.tsx
+++ b/src/components/menu/tracker-icon.tsx
@@ -1,6 +1,6 @@
 const TrackerIcon = () => (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_9339_9642)">
+    <g clipPath="url(#clip0_9339_9642)">
       <path
         d="M16.4795 11.998C16.4795 14.4833 14.4648 16.498 11.9795 16.498C9.49421 16.498 7.47949 14.4833 7.47949 11.998C7.47949 9.51277 9.49421 7.49805 11.9795 7.49805C14.4648 7.49805 16.4795 9.51277 16.4795 11.998Z"
         stroke="currentColor"
diff --git a/src/components/sign-in/disconnect-icon.tsx b/src/components/sign-in/disconnect-icon.tsx
index 8f6a218e..7535e33d 100644
--- a/src/components/sign-in/disconnect-icon.tsx
+++ b/src/components/sign-in/disconnect-icon.tsx
@@ -5,9 +5,9 @@ const DisconnectIcon = () => (
         id="Icon"
         d="M10.0003 1.66602V9.99935M15.3003 5.53268C16.3489 6.58167 17.063 7.91805 17.3522 9.37284C17.6414 10.8276 17.4927 12.3355 16.925 13.7058C16.3572 15.0761 15.3959 16.2473 14.1626 17.0713C12.9293 17.8953 11.4794 18.3351 9.9961 18.3351C8.51284 18.3351 7.06289 17.8953 5.82958 17.0713C4.59626 16.2473 3.63496 15.0761 3.06723 13.7058C2.49951 12.3355 2.35084 10.8276 2.64003 9.37284C2.92922 7.91805 3.64328 6.58167 4.69193 5.53268"
         stroke="currentColor"
-        stroke-width="1.25"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </g>
   </svg>