use checkbox input for switch

bancorprotocol · Jun 17, 2024 · 786225e · 786225e
1 parent fa9615a
commit 786225e
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 41 deletions.
diff --git a/src/components/common/approval/ApproveToken.tsx b/src/components/common/approval/ApproveToken.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, FormEvent, useId, useState } from 'react';
 import { useSetUserApproval } from 'libs/queries/chain/approval';
 import { Button } from 'components/common/button';
 import { Switch } from 'components/common/switch';
@@ -32,6 +32,7 @@ export const ApproveToken: FC<Props> = ({
   eventData,
   context,
 }) => {
+  const inputId = useId();
   const { dispatchNotification } = useNotifications();
   const { user } = useWeb3();
   const { getTokenById } = useTokens();
@@ -42,7 +43,8 @@ export const ApproveToken: FC<Props> = ({
   const [txBusy, setTxBusy] = useState(false);
   const [txSuccess, setTxSuccess] = useState(false);
 
-  const onApprove = async () => {
+  const onApprove = async (e: FormEvent) => {
+    e.preventDefault();
     if (!data || !token) {
       return console.error('No data loaded');
     }
@@ -166,46 +168,47 @@ export const ApproveToken: FC<Props> = ({
   return (
     <>
       <div className="bg-content h-85 flex items-center justify-between rounded px-20">
-        <div className="space-y-6">
-          <div className="flex items-center space-x-10">
-            <LogoImager alt="Token" src={token.logoURI} className="size-30" />
-            <div className="font-weight-500">{token.symbol}</div>
-          </div>
+        <div className="flex items-center gap-10">
+          <LogoImager alt="Token" src={token.logoURI} className="size-30" />
+          <p className="font-weight-500">{token.symbol}</p>
         </div>
 
         {data.approvalRequired ? (
           txBusy ? (
             <div>Waiting for Confirmation</div>
           ) : (
-            <div className="h-82 flex flex-col items-end justify-center gap-10">
-              <div className="flex items-center space-x-8">
-                <div className="flex items-center space-x-10">
-                  <div
-                    className={`text-12 font-weight-500 transition-all ${
-                      isLimited ? 'text-white/60' : 'text-white/85'
-                    }`}
-                  >
-                    Unlimited
-                  </div>
-                  <Switch
-                    variant={isLimited ? 'secondary' : 'white'}
-                    isOn={!isLimited}
-                    setIsOn={handleLimitChange}
-                    size="sm"
-                  />
-                </div>
+            <form
+              onSubmit={onApprove}
+              className="flex flex-col items-end justify-center gap-10"
+            >
+              <div className="flex items-center gap-10">
+                <label
+                  htmlFor={inputId}
+                  className={`text-12 font-weight-500 transition-all ${
+                    isLimited ? 'text-white/60' : 'text-white/85'
+                  }`}
+                >
+                  Unlimited
+                </label>
+                <Switch
+                  id={inputId}
+                  variant={isLimited ? 'secondary' : 'white'}
+                  isOn={!isLimited}
+                  setIsOn={handleLimitChange}
+                  size="sm"
+                />
               </div>
 
               <Button
+                type="button"
                 variant="white"
-                onClick={onApprove}
                 size="sm"
                 className="text-14 px-10"
                 data-testid={`approve-${token.symbol}`}
               >
                 {data.nullApprovalRequired ? 'Revoke and Approve' : 'Approve'}
               </Button>
-            </div>
+            </form>
           )
         ) : (
           <span className="text-primary" data-testid={`msg-${token.symbol}`}>

diff --git a/src/components/common/switch/index.tsx b/src/components/common/switch/index.tsx
@@ -21,22 +21,36 @@ export const Switch: FC<SwitchProps> = ({
   className,
   isOn,
   setIsOn,
+  id,
   ...props
 }) => {
   return (
-    <div
-      className={cn(switchStyles({ variant, size, isOn, class: className }))}
-      onClick={() => setIsOn(!isOn)}
-      {...props}
-    >
-      <motion.div
-        className={`aspect-square h-10 rounded-full ${
-          isOn ? 'bg-black' : 'bg-white/60'
-        }`}
-        layout
-        transition={spring}
-      />
-    </div>
+    <>
+      <div
+        className={cn(
+          'relative',
+          switchStyles({ variant, size, isOn, class: className })
+        )}
+        {...props}
+      >
+        <input
+          className="peer absolute w-full cursor-pointer opacity-0"
+          type="checkbox"
+          checked={isOn}
+          id={id}
+          onChange={(e) => setIsOn(e.target.checked)}
+        />
+        <motion.div
+          className={cn(
+            'aspect-square h-10 rounded-full outline-2',
+            isOn ? 'bg-black outline-black' : 'bg-white/60 outline-white/60',
+            'peer-focus-visible:outline'
+          )}
+          layout
+          transition={spring}
+        />
+      </div>
+    </>
   );
 };
 

diff --git a/src/components/strategies/edit/EditStrategyAllocatedBudget.tsx b/src/components/strategies/edit/EditStrategyAllocatedBudget.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, useId } from 'react';
 import { MarginalPriceOptions } from '@bancor/carbon-sdk/strategy-management';
 import { Token } from 'libs/tokens';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
@@ -74,12 +74,15 @@ interface BudgetDistributionProps {
   onChange: (marginalPrice: MarginalPriceOptions) => void;
 }
 export const EditBudgetDistribution: FC<BudgetDistributionProps> = (props) => {
+  const id = useId();
   const { order, onChange } = props;
   const checked = order.marginalPrice !== MarginalPriceOptions.maintain;
   return (
     <div role="row" className="flex justify-between">
       <p role="columnheader" className="flex items-center">
-        <span className="mr-5">Distribute Across Entire Range</span>
+        <label htmlFor={id} className="mr-5">
+          Distribute Across Entire Range
+        </label>
         <Tooltip
           iconClassName="h-13 text-white/60"
           element={
@@ -117,6 +120,7 @@ export const EditBudgetDistribution: FC<BudgetDistributionProps> = (props) => {
         />
       </p>
       <Switch
+        id={id}
         size="sm"
         role="cell"
         variant={checked ? 'white' : 'black'}