Change popup text based on how taker wants to close the cfd

taker-frontend/src/components/CloseButton.tsx

@@ -19,15 +19,34 @@ interface Props {
     cfd: Cfd;
     request: (req: any) => void;
     status: boolean;
-    action: String;
+    isForceCloseButton: boolean;
+    buttonTitle: String;
 }
 
 /// Button that can be used to trigger non-collaborative close if the maker is offline and collaborative close if the
 /// maker is online.
-export default function CloseButton({ cfd, request, status, action }: Props) {
+export default function CloseButton({ cfd, request, status, buttonTitle, isForceCloseButton }: Props) {
     const disableCloseButton = cfd.state.getGroup() === StateGroupKey.CLOSED
         || !(cfd.state.key === StateKey.OPEN);
 
+    let popoverBody = <>
+        <Text>
+            This will close your position with the counterparty. The current exchange rate will determine your
+            profit/losses.
+        </Text>
+    </>;
+    if (isForceCloseButton) {
+        popoverBody = <>
+            <Text>
+                This will force close your position with the counterparty. The exchange rate at
+            </Text>
+            <Timestamp timestamp={cfd.expiry_timestamp} />
+            <Text>
+                will determine your profit/losses. It is likely that the rate will change until then.
+            </Text>
+        </>;
+    }
+
     return <Box w={"45%"}>
         <Popover
             placement="bottom"
@@ -35,22 +54,16 @@ export default function CloseButton({ cfd, request, status, action }: Props) {
         >
             {({ onClose }) => (<>
                 <PopoverTrigger>
-                    <Button colorScheme={"blue"} disabled={disableCloseButton}>{action}</Button>
+                    <Button colorScheme={"blue"} disabled={disableCloseButton}>{buttonTitle}</Button>
                 </PopoverTrigger>
                 <PopoverContent color="white" bg="blue.800" borderColor="blue.800">
                     <PopoverHeader pt={4} fontWeight="bold" border="0">
-                        {action} your position
+                        {buttonTitle} your position
                     </PopoverHeader>
                     <PopoverArrow />
                     <PopoverCloseButton />
                     <PopoverBody>
-                        <Text>
-                            This will {action.toLowerCase()} your position with the counterparty. The exchange rate at
-                        </Text>
-                        <Timestamp timestamp={cfd.expiry_timestamp} />
-                        <Text>
-                            will determine your profit/losses. It is likely that the rate will change until then.
-                        </Text>
+                        {popoverBody}
                     </PopoverBody>
                     <PopoverFooter
                         border="0"
@@ -69,7 +82,7 @@ export default function CloseButton({ cfd, request, status, action }: Props) {
                             }}
                             isLoading={status}
                         >
-                            {action}
+                            {buttonTitle}
                         </Button>
                     </PopoverFooter>
                 </PopoverContent>

taker-frontend/src/components/History.tsx

@@ -75,8 +75,14 @@ const CfdDetails = ({ cfd, connectedToMaker }: CfdDetailsProps) => {
     let [commit, isCommiting] = usePostRequest(`/api/cfd/${cfd.order_id}/commit`);
 
     const closeButton = connectedToMaker.online
-        ? <CloseButton request={settle} status={isSettling} cfd={cfd} action="Close" />
-        : <CloseButton request={commit} status={isCommiting} cfd={cfd} action="Force Close" />;
+        ? <CloseButton request={settle} status={isSettling} cfd={cfd} buttonTitle="Close" isForceCloseButton={false} />
+        : <CloseButton
+            request={commit}
+            status={isCommiting}
+            cfd={cfd}
+            buttonTitle="Force Close"
+            isForceCloseButton={true}
+        />;
 
     return (
         <HStack bg={useColorModeValue("gray.100", "gray.700")} rounded={5} padding={2}>