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
api3dao · Dec 6, 2024 · 2627c0a · 2627c0a
1 parent 558e6b6
commit 2627c0a
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>