fix: prevent wrapped checkboxes to be double clicked

src/components/Checkbox.tsx

@@ -8,19 +8,27 @@ interface Props {
   onChange: (checked: boolean) => void
   name: string
   text?: string
+  noMouseEvents?: boolean
 }
 
 export default function Checkbox(props: Props) {
   return (
     <>
-      <label className='flex items-center gap-2 border-white cursor-pointer'>
       <input
         onChange={() => props.onChange(props.checked)}
+        id={`checkbox-${props.name}`}
         name={props.name}
         checked={props.checked}
         type='checkbox'
-          className='absolute w-0 h-0 opacity-0'
+        className={classNames('peer hidden')}
       />
+      <label
+        className={classNames(
+          'flex items-center gap-2 border-white cursor-pointer',
+          props.noMouseEvents && 'pointer-events-none',
+        )}
+        htmlFor={`checkbox-${props.name}`}
+      >
         <div
           className={classNames(
             'h-5 w-5 rounded-sm p-0.5',

src/components/Modals/AssetsSelect/useAssetTableColumns.tsx

@@ -38,6 +38,7 @@ export default function useAssetTableColumns(isBorrow: boolean) {
                 name={`asset-${asset.id.toLowerCase()}`}
                 checked={row.getIsSelected()}
                 onChange={row.getToggleSelectedHandler()}
+                noMouseEvents
               />
               <AssetImage asset={asset} size={24} className='ml-4' />
               <div className='ml-2 text-left'>