Minor fixes: typo, React keys

web/components/answers/answer-resolve-panel.tsx

@@ -99,7 +99,7 @@ export function AnswerResolvePanel(props: {
           <ResolveConfirmationButton
             onResolve={onResolve}
             isSubmitting={isSubmitting}
-            openModelButtonClass={resolutionButtonClass}
+            openModalButtonClass={resolutionButtonClass}
             submitButtonClass={resolutionButtonClass}
           />
         </Row>

web/components/bets-list.tsx

@@ -582,7 +582,7 @@ function SellButton(props: { contract: Contract; bet: Bet }) {
   return (
     <ConfirmationButton
       id={`sell-${bet.id}`}
-      openModelBtn={{
+      openModalBtn={{
         className: clsx('btn-sm', isSubmitting && 'btn-disabled loading'),
         label: 'Sell',
       }}

web/components/confirmation-button.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx'
 
 export function ConfirmationButton(props: {
   id: string
-  openModelBtn: {
+  openModalBtn: {
     label: string
     icon?: any
     className?: string
@@ -18,15 +18,15 @@ export function ConfirmationButton(props: {
   onSubmit: () => void
   children: any
 }) {
-  const { id, openModelBtn, cancelBtn, submitBtn, onSubmit, children } = props
+  const { id, openModalBtn, cancelBtn, submitBtn, onSubmit, children } = props
 
   return (
     <>
       <label
         htmlFor={id}
-        className={clsx('btn modal-button', openModelBtn.className)}
+        className={clsx('btn modal-button', openModalBtn.className)}
       >
-        {openModelBtn.icon} {openModelBtn.label}
+        {openModalBtn.icon} {openModalBtn.label}
       </label>
       <input type="checkbox" id={id} className="modal-toggle" />
 
@@ -55,18 +55,18 @@ export function ConfirmationButton(props: {
 export function ResolveConfirmationButton(props: {
   onResolve: () => void
   isSubmitting: boolean
-  openModelButtonClass?: string
+  openModalButtonClass?: string
   submitButtonClass?: string
 }) {
-  const { onResolve, isSubmitting, openModelButtonClass, submitButtonClass } =
+  const { onResolve, isSubmitting, openModalButtonClass, submitButtonClass } =
     props
   return (
     <ConfirmationButton
       id="resolution-modal"
-      openModelBtn={{
+      openModalBtn={{
         className: clsx(
           'border-none self-start',
-          openModelButtonClass,
+          openModalButtonClass,
           isSubmitting && 'btn-disabled loading'
         ),
         label: 'Resolve',

web/components/folds/create-fold-button.tsx

@@ -49,7 +49,7 @@ export function CreateFoldButton() {
   return (
     <ConfirmationButton
       id="create-fold"
-      openModelBtn={{
+      openModalBtn={{
         label: 'New',
         icon: <PlusCircleIcon className="mr-2 h-5 w-5" />,
         className: clsx(

web/components/nav/sidebar.tsx

@@ -108,7 +108,7 @@ export default function Sidebar() {
 
       <div className="space-y-1 py-6">
         {navigation.map((item) => (
-          <SidebarItem item={item} currentPage={currentPage} />
+          <SidebarItem key={item.name} item={item} currentPage={currentPage} />
         ))}
 
         <MenuButton

web/components/resolution-panel.tsx

@@ -123,7 +123,7 @@ export function ResolutionPanel(props: {
       <ResolveConfirmationButton
         onResolve={resolve}
         isSubmitting={isSubmitting}
-        openModelButtonClass={clsx('w-full mt-2', submitButtonClass)}
+        openModalButtonClass={clsx('w-full mt-2', submitButtonClass)}
         submitButtonClass={submitButtonClass}
       />
     </Col>