Merge #535 #541

535: Fix typo in buy prompt r=da-kami a=thomaseizinger



541: Disable leverage slider r=da-kami a=thomaseizinger

Before:

![image](https://user-images.githubusercontent.com/5486389/141380604-aa3bb18c-6c77-4d03-964f-8f2bc1aae49d.png)


After:

![image](https://user-images.githubusercontent.com/5486389/141380569-9b87aae3-1fb0-441e-891c-2bc990c631b9.png)


Co-authored-by: Thomas Eizinger <thomas@eizinger.io>

taker-frontend/src/components/Trade.tsx

@@ -33,6 +33,7 @@ import {
     Tbody,
     Td,
     Text,
+    Tooltip,
     Tr,
     useColorModeValue,
     useDisclosure,
@@ -178,7 +179,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>
@@ -251,8 +252,9 @@ 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}>
+            <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 />
@@ -261,6 +263,7 @@ function Leverage({ leverage }: LeverageProps) {
                         <Text color="black">{leverage}</Text>
                     </SliderThumb>
                 </Slider>
+            </Tooltip>
             <FormHelperText>
                 How much do you want to leverage your position?
             </FormHelperText>