From 90b8b5d6841a9fec41a1f353fa9c490edd3d1ab0 Mon Sep 17 00:00:00 2001
From: Thomas Eizinger <thomas@eizinger.io>
Date: Fri, 26 Nov 2021 10:19:10 +1100
Subject: [PATCH] Delay formatting of margin as long as possible

---
 taker-frontend/src/components/Trade.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/taker-frontend/src/components/Trade.tsx b/taker-frontend/src/components/Trade.tsx
index 8f9394d..3e02ad0 100644
--- a/taker-frontend/src/components/Trade.tsx
+++ b/taker-frontend/src/components/Trade.tsx
@@ -189,7 +189,7 @@ export default function Trade({
                     <Leverage leverage={leverage} />
                 </GridItem>
                 <GridItem colSpan={1}>
-                    <Margin margin={margin} />
+                    <Margin margin={marginAsNumber} />
                 </GridItem>
                 <GridItem colSpan={1}>
                     <Center>
@@ -221,12 +221,12 @@ export default function Trade({
                                     <ModalBody>
                                         <Table variant="striped" colorScheme="gray" size="sm">
                                             <TableCaption>
-                                                By submitting, {margin} will be locked on-chain in a contract.
+                                                By submitting, ₿{marginAsNumber} will be locked on-chain in a contract.
                                             </TableCaption>
                                             <Tbody>
                                                 <Tr>
                                                     <Td><Text as={"b"}>Margin</Text></Td>
-                                                    <Td>{margin}</Td>
+                                                    <Td>₿{marginAsNumber}</Td>
                                                 </Tr>
                                                 <Tr>
                                                     <Td><Text as={"b"}>Leverage</Text></Td>
@@ -327,7 +327,7 @@ function Leverage({ leverage }: LeverageProps) {
 }
 
 interface MarginProps {
-    margin?: string;
+    margin: number;
 }
 
 function Margin({ margin }: MarginProps) {
@@ -335,7 +335,7 @@ function Margin({ margin }: MarginProps) {
         <VStack>
             <HStack>
                 <Text as={"b"}>Required margin:</Text>
-                <Text>{margin}</Text>
+                <Text>₿{margin}</Text>
             </HStack>
             <Text fontSize={"sm"} color={"darkgrey"}>The collateral you will need to provide</Text>
         </VStack>