fix: simulation override

package.json

@@ -25,7 +25,7 @@
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "0.26.25",
     "@fontsource/open-sauce-sans": "^5.0.7",
-    "@headlessui/react": "2.1.6",
+    "@headlessui/react": "2.2.0",
     "@heroicons/react": "^2.1.3",
     "@indexcoop/flash-mint-sdk": "3.12.0",
     "@indexcoop/tokenlists": "3.2.0",

src/components/swap/components/transaction-review/components/override.tsx

@@ -1,25 +1,44 @@
-import { WarningTwoIcon } from '@chakra-ui/icons'
-import { Checkbox } from '@chakra-ui/react'
-
-import { colors } from '@/lib/styles/colors'
+import { Checkbox, Field, Label } from '@headlessui/react'
+import { ExclamationTriangleIcon } from '@heroicons/react/24/solid'
 
 type OverrideProps = {
   onChange: (isChecked: boolean) => void
+  override: boolean
 }
 
-export const Override = (props: OverrideProps) => {
+export const Override = ({ onChange, override }: OverrideProps) => {
   return (
     <div className='bg-ic-gray-100 flex flex-col items-start gap-2 rounded-xl p-4'>
-      <div className='items-top flex flex-row'>
-        <WarningTwoIcon color={colors.ic.black} />
+      <div className='items-top flex'>
+        <ExclamationTriangleIcon className='fill-ic-black size-6 flex-none' />
         <p className='text-ic-black mx-4 text-sm'>
-          This tx would likely fail. Check override and press the trade button
-          again to execute anyway.
+          This tx will likely fail. Check &apos;Override&apos; below and click
+          the submit button again to execute anyway.
         </p>
       </div>
-      <Checkbox onChange={(e) => props.onChange(e.target.checked)}>
-        Override?
-      </Checkbox>
+      <Field className='flex cursor-pointer items-center gap-2'>
+        <Checkbox
+          checked={override}
+          className='data-[checked]:bg-ic-blue-500 bg-ic-white group block size-4 rounded border'
+          onChange={() => onChange(!override)}
+        >
+          <svg
+            className='stroke-white opacity-0 group-data-[checked]:opacity-100'
+            viewBox='0 0 14 14'
+            fill='none'
+          >
+            <path
+              d='M3 8L6 11L11 3.5'
+              strokeWidth={2}
+              strokeLinecap='round'
+              strokeLinejoin='round'
+            />
+          </svg>
+        </Checkbox>
+        <Label className='text-ic-black mx-4 cursor-pointer text-sm font-bold'>
+          Override?
+        </Label>
+      </Field>
     </div>
   )
 }

src/components/swap/components/transaction-review/components/review.tsx

@@ -27,6 +27,7 @@ export function Review(props: ReviewProps) {
     simulationState,
     onChangeOverride,
     onSubmit,
+    override,
   } = useTransactionReview(props)
   return (
     <div className='flex h-full w-full flex-col'>
@@ -54,7 +55,7 @@ export function Review(props: ReviewProps) {
       </div>
       {shouldShowOverride ? (
         <div className='my-2'>
-          <Override onChange={onChangeOverride} />
+          <Override onChange={onChangeOverride} override={override} />
         </div>
       ) : (
         <BottomMessage />

src/components/swap/components/transaction-review/provider.tsx

@@ -10,9 +10,12 @@ import { getBlockExplorerContractUrl } from '@/lib/utils/block-explorer'
 import { ReviewProps } from './components/review'
 import { TransactionReviewSimulationState } from './components/simulation'
 
-export function useTransactionReview(props: ReviewProps) {
-  const decimals = 10
-  const { onSubmitWithSuccess, transactionReview } = props
+const DECIMALS = 10
+
+export function useTransactionReview({
+  onSubmitWithSuccess,
+  transactionReview,
+}: ReviewProps) {
   const { logEvent } = useAnalytics()
   const { executeTrade, isTransacting } = useTrade()
   const { quoteResults, selectedQuote } = transactionReview
@@ -69,12 +72,12 @@ export function useTransactionReview(props: ReviewProps) {
   const formattedInputTokenAmount = formatAmountFromWei(
     transactionReview.inputTokenAmount,
     transactionReview.inputToken.decimals,
-    decimals,
+    DECIMALS,
   )
   const formattedOutputTokenAmount = formatAmountFromWei(
     transactionReview.outputTokenAmount,
     transactionReview.outputToken.decimals,
-    decimals,
+    DECIMALS,
   )
 
   const quote = useMemo(() => {
@@ -137,5 +140,6 @@ export function useTransactionReview(props: ReviewProps) {
     simulationState,
     onChangeOverride,
     onSubmit,
+    override,
   }
 }