From 9da18368ed4e2a9f103b75202fe5abbea0303e3e Mon Sep 17 00:00:00 2001
From: Thomas Eizinger <thomas@eizinger.io>
Date: Fri, 12 Nov 2021 09:17:16 +1100
Subject: [PATCH 1/2] Fix typo in buy prompt

---
 taker-frontend/src/components/Trade.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/taker-frontend/src/components/Trade.tsx b/taker-frontend/src/components/Trade.tsx
index 9293d56..f1108ce 100644
--- a/taker-frontend/src/components/Trade.tsx
+++ b/taker-frontend/src/components/Trade.tsx
@@ -172,7 +172,7 @@ const Trade = (
                                     <ModalBody>
                                         <Table variant="striped" colorScheme="gray" size="sm">
                                             <TableCaption>
-                                                By submitting {margin} will be locked on-chain in a contract.
+                                                By submitting, {margin} will be locked on-chain in a contract.
                                             </TableCaption>
                                             <Tbody>
                                                 <Tr>

From 7689f7db70eaf22ae1ea3713db91a2fd68cae00c Mon Sep 17 00:00:00 2001
From: Thomas Eizinger <thomas@eizinger.io>
Date: Fri, 12 Nov 2021 09:53:39 +1100
Subject: [PATCH 2/2] Disable slider instead of read-only

Disabled UI elements make it clear to the user that they cannot
change them.
---
 taker-frontend/src/components/Trade.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/taker-frontend/src/components/Trade.tsx b/taker-frontend/src/components/Trade.tsx
index 9293d56..25c9e4d 100644
--- a/taker-frontend/src/components/Trade.tsx
+++ b/taker-frontend/src/components/Trade.tsx
@@ -33,6 +33,7 @@ import {
     Tbody,
     Td,
     Text,
+    Tooltip,
     Tr,
     useColorModeValue,
     useDisclosure,
@@ -245,16 +246,18 @@ interface LeverageProps {
 function Leverage({ leverage }: LeverageProps) {
     return (
         <FormControl id="leverage">
-            <FormLabel>Leverage (fixed to 2 atm)</FormLabel>
-            <Slider isReadOnly defaultValue={leverage} min={1} max={5} step={1}>
-                <SliderTrack>
-                    <Box position="relative" right={10} />
-                    <SliderFilledTrack />
-                </SliderTrack>
-                <SliderThumb boxSize={6}>
-                    <Text color="black">{leverage}</Text>
-                </SliderThumb>
-            </Slider>
+            <FormLabel>Leverage</FormLabel>
+            <Tooltip label="Configurable leverage is in the making." shouldWrapChildren hasArrow>
+                <Slider disabled value={leverage} min={1} max={5} step={1}>
+                    <SliderTrack>
+                        <Box position="relative" right={10} />
+                        <SliderFilledTrack />
+                    </SliderTrack>
+                    <SliderThumb boxSize={6}>
+                        <Text color="black">{leverage}</Text>
+                    </SliderThumb>
+                </Slider>
+            </Tooltip>
             <FormHelperText>
                 How much do you want to leverage your position?
             </FormHelperText>