feat: change borrow success modal to prompt lynxfinance

the-standard · May 24, 2024 · 2426b88 · 2426b88
1 parent 62b082b
commit 2426b88
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 27 deletions.
diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx
@@ -34,10 +34,10 @@ const Modal = (props) => {
           }}
         >
           <div
-            className={"z-40 absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 w-full px-4 " + (wide ? "max-w-[48rem]" : "max-w-[34rem]") }
+            className={"z-40 absolute -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 w-full px-4 " + (wide ? "max-w-[62rem]" : "max-w-[34rem]") }
           >
-            <Card className="card-compact w-full max-h-[90vh] overflow-scroll tst-card">
-              <div className="card-body">
+            <Card className="card-compact w-full max-h-[90vh] tst-card">
+              <div className="card-body overflow-scroll">
                 {props.children}
               </div>
             </Card>

diff --git a/src/components/vault/BorrowModal.jsx b/src/components/vault/BorrowModal.jsx
@@ -17,7 +17,8 @@ const BorrowModal = (props) => {
     closeModal,
     handleAmount,
     isPending,
-    isSuccess,
+    // temp todo
+    // isSuccess,
     amount,
     handleDebtAction,
     borrowValues,
@@ -29,45 +30,100 @@ const BorrowModal = (props) => {
 
   const currentDebt = ethers.formatEther(currentVault.status.minted.toString());
 
+  // temp todo
+  const isSuccess = true;
   if (isSuccess) {
     return (
       <>
         <Modal
           open={open}
           closeModal={closeModal}
+          wide={true}
         >
-          <Typography variant="h2" className="card-title">
-            <ArrowDownCircleIcon className="mr-2 h-6 w-6 inline-block"/>
-            Borrowing EUROs
-          </Typography>
-
           <Typography
-            variant="h3"
+            variant="h1"
+            className="card-title text-center"
           >
-            You just borrowed {amount} EUROs successfully!
+            Congratulations on Borrowing EUROs!
           </Typography>
 
           <Typography
             variant="h3"
+            className="text-center mb-4"
           >
-            Don't forget you can buy discounted tokens by placing your EUROs into Liquidation Pools.
+            You just borrowed {amount} EUROs successfully! Here's what you can do now:
           </Typography>
 
-          <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
-            <Button
-              className="w-full lg:w-auto"
-              color="ghost"
-              onClick={closeModal}
-            >
-              Close
-            </Button>
-            <Button
-              className="w-full lg:w-64"
-              color="primary"
-              onClick={() => navigate('/liquidation-pools')}
-            >
-              Get Discounted Tokens
-            </Button>
+          <div className="flex gap-4 flex-col md:flex-row">
+
+            <div className="flex-1">
+              <Typography
+                variant="h2"
+                className="mb-2"
+              >
+                Leverage with Lynx.finance
+              </Typography>
+              <Typography
+                variant="p"
+                className="mb-2"
+              >
+                Why sell EUROs direct for 1x ETH when you can get 
+                price exposure to 100 times more ETH or BTC with the
+                same amount of EUROs!
+              </Typography>
+              <Typography
+                variant="p"
+                className="mb-4"
+              >
+                - Use EUROs to trade with up to 100x leverage!<br/>
+                - Go long or short on various assets<br/>
+                - All on chain, you keep your private keys!<br/>
+              </Typography>
+
+              <Button
+                className="w-full lg:w-64"
+                color="primary"
+                onClick={() => window.open('https://app.lynx.finance/portfolio?chainId=42161', '_blank')?.focus()}
+                >
+                Get to Lynx.finance
+              </Button>
+
+            </div>
+            <div class="divider md:divider-horizontal">OR</div>
+            <div className="flex-1">
+              <Typography
+                variant="h2"
+                className="mb-2"
+              >
+                Earn in TheStandard staking pools
+              </Typography>
+              <Typography
+                variant="p"
+                className="mb-2"
+              >
+                Why sell EUROs direct for 1x ETH when you can get 
+                price exposure to 100 times more ETH or BTC with the
+                same amount of EUROs!
+              </Typography>
+              <Typography
+                variant="p"
+                className="mb-4"
+              >
+                - Use EUROs to trade with up to 100x leverage!<br/>
+                - Go long or short on various assets<br/>
+                - All on chain, you keep your private keys!<br/>
+              </Typography>
+
+              <Button
+                className="w-full lg:w-64"
+                color="primary"
+                onClick={() => navigate('/liquidation-pools')}
+              >
+                Earn by staking
+              </Button>
+
+            </div>
+
           </div>
         </Modal>
       </>