Merge branch 'master' of github.com:the-standard/decentralised-dashbo…

…ard into main
the-standard · May 3, 2024 · d7ab68a · d7ab68a
2 parents 5fe3de9 + 5944d41
commit d7ab68a
Show file tree

Hide file tree

Showing 17 changed files with 127 additions and 150 deletions.
diff --git a/src/components/liquidation-pools/ClaimTokens.jsx b/src/components/liquidation-pools/ClaimTokens.jsx
@@ -14,9 +14,9 @@ import {
 
 import {
   Button,
-  Card,
 } from 'react-daisyui';
 
+import Card from "../ui/Card";
 import Modal from "../ui/Modal";
 import CenterLoader from "../ui/CenterLoader";
 
@@ -85,14 +85,11 @@ const ClaimTokens = ({
 
   return (
     <>
-      <Card
-        compact
-        className="bg-base-100 shadow-md w-full"
-      >
-        <Card.Body>
-          <Card.Title tag="h2" className="justify-between">
+      <Card className="card-compact w-full">
+        <div className="card-body">
+          <h2 className="card-title justify-between">
             Claimable Tokens
-          </Card.Title>
+          </h2>
 
           <div className="overflow-x-auto">
             <table className="table table-zebra">
@@ -127,25 +124,25 @@ const ClaimTokens = ({
             ) : (null)}
           </div>
 
-          <Card.Actions className="pt-4 flex-col-reverse lg:flex-row justify-end">
+          <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
             <Button
               onClick={handleClaimRewards}
               disabled={noRewards}
             >
               Claim All Tokens
             </Button>
-          </Card.Actions>
+          </div>
 
-        </Card.Body>
+        </div>
       </Card>
 
       <Modal
         open={isOpen}
         closeModal={() => setIsOpen(false)}
       >
-        <Card.Title tag="h2">
+        <h2 className="card-title justify-between">
           Claiming Your Tokens
-        </Card.Title>
+        </h2>
         <CenterLoader />
       </Modal>
     </>

diff --git a/src/components/liquidation-pools/StakedAssets.jsx b/src/components/liquidation-pools/StakedAssets.jsx
@@ -4,10 +4,10 @@ import { ethers } from "ethers";
 
 import {
   Button,
-  Card,
 } from 'react-daisyui';
 
 import WithdrawModal from "./WithdrawModal";
+import Card from "../ui/Card";
 import CenterLoader from "../ui/CenterLoader";
 
 const StakedAssets = ({
@@ -24,14 +24,9 @@ const StakedAssets = ({
 
   return (
     <>
-      <Card
-        compact
-        className="bg-base-100 shadow-md w-full"
-      >
-        <Card.Body>
-          <Card.Title tag="h2" className="justify-between">
-            Staked Assets
-          </Card.Title>
+      <Card className="card-compact w-full">
+        <div className="card-body">
+          <h2 className="card-title">Vault List</h2>
 
           <div className="overflow-x-auto">
             <table className="table table-zebra">
@@ -67,16 +62,16 @@ const StakedAssets = ({
             ) : (null)}
           </div>
 
-          <Card.Actions className="pt-4 flex-col-reverse lg:flex-row justify-end">
+          <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
             <Button
               onClick={() => setOpen(true)}
               disabled={tstAmount <= 0 && eurosAmount <= 0}
             >
               Withdraw
             </Button>
-          </Card.Actions>
+          </div>
 
-        </Card.Body>
+        </div>
       </Card>
       <WithdrawModal
         tstAmount={tstAmount}

diff --git a/src/components/liquidation-pools/Staking.jsx b/src/components/liquidation-pools/Staking.jsx
@@ -24,9 +24,9 @@ import {
 
 import {
   Button,
-  Card,
 } from 'react-daisyui';
 
+import Card from "../ui/Card";
 import Typography from "../ui/Typography";
 import Modal from "../ui/Modal";
 
@@ -266,19 +266,16 @@ const Staking = () => {
 
   return (
     <>
-      <Card
-        compact
-        className="bg-base-100 shadow-md w-full"
-      >
-        <Card.Body>
-          <Card.Title tag="h2" className="justify-between">
+      <Card className="card-compact w-full">
+        <div className="card-body">
+          <h2 className="card-title justify-between">
             Deposit
 
             <Button size="sm" onClick={() => setHelpOpen(true)}>
               <QuestionMarkCircleIcon className="h-4 w-4 inline-block"/>
               How It Works
             </Button>
-          </Card.Title>
+          </h2>
           <Typography variant="p">
             To start earning fees & buying up liquidated assets at up to a 10% discount, stake your TST & EUROs below.
           </Typography>
@@ -334,17 +331,17 @@ const Staking = () => {
               </Button>
             </div>
           </div>
-        </Card.Body>
+        </div>
       </Card>
       <Modal
         open={helpOpen}
         closeModal={() => setHelpOpen(false)}
         wide
       >
-        <Card.Title tag="h2">
+        <h2 className="card-title">
           <QuestionMarkCircleIcon className="h-6 w-6 inline-block"/>
           Liquidation Pool - How It Works
-        </Card.Title>
+        </h2>
 
         <Typography variant="h2">
           Earning Fees
@@ -380,15 +377,15 @@ const Staking = () => {
           All deposits will be held for a 24hour maturity period where they cannot be withdrawn, but can still be used for automatically purchasing liquidated assets.
         </Typography>
 
-        <Card.Actions className="flex flex-col-reverse lg:flex-row justify-end">
+        <div className="card-actions flex flex-col-reverse lg:flex-row justify-end">
           <Button
             className="w-full lg:w-auto"
             color="ghost"
             onClick={() => setHelpOpen(false)}
           >
             Close
           </Button>
-        </Card.Actions>
+        </div>
 
       </Modal>
     </>

diff --git a/src/components/liquidation-pools/WithdrawModal.jsx b/src/components/liquidation-pools/WithdrawModal.jsx
@@ -14,15 +14,13 @@ import {
 
 import {
   Button,
-  Card,
 } from 'react-daisyui';
 
 import CenterLoader from "../ui/CenterLoader";
 import Modal from "../ui/Modal";
 import Typography from "../ui/Typography";
 
 const WithdrawModal = ({
-  stakedPositions,
   tstAmount,
   eurosAmount,
   pending,
@@ -146,16 +144,12 @@ const WithdrawModal = ({
         >
           {claimLoading ? (
             <>
-              <Card.Title tag="h2">
-                Withdrawing Your Tokens
-              </Card.Title>
+              <h2 className="card-title">Withdrawing Your Tokens</h2>
               <CenterLoader />
             </>
           ) : (
             <>
-              <Card.Title tag="h2">
-                Withdraw Unsuccessful
-              </Card.Title>
+              <h2 className="card-title">Withdraw Unsuccessful</h2>
               <Typography variant="p">
                 There was a problem processing your withdraw request.
               </Typography>
@@ -193,16 +187,12 @@ const WithdrawModal = ({
         <>
           {claimLoading ? (
             <>
-              <Card.Title tag="h2">
-                Withdrawing Your Tokens
-              </Card.Title>
+              <h2 className="card-title">Withdrawing Your Tokens</h2>
               <CenterLoader />
             </>
           ) : (
             <>
-              <Card.Title tag="h2">
-                Withdraw Your Tokens
-              </Card.Title>
+              <h2 className="card-title"> Withdraw Your Tokens</h2>
 
               {hasPending ? (
                 <>

diff --git a/src/components/ui/Card.jsx b/src/components/ui/Card.jsx
@@ -0,0 +1,15 @@
+const Card = (props) => {
+  const {
+    className,
+  } = props;
+
+  return (
+    <div
+      className={`card card-bordered bg-base-100 shadow-md ${className}`}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx
@@ -1,6 +1,4 @@
-import {
-  Card,
-} from 'react-daisyui';
+import Card from "../ui/Card";
 
 const Modal = (props) => {
   const {
@@ -18,13 +16,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]") }
           >
-            <Card
-              compact
-              className="bg-base-100 shadow-md w-full max-h-[90vh] overflow-scroll"
-            >
-              <Card.Body>
+            <Card className="card-compact w-full max-h-[90vh] overflow-scroll">
+              <div className="card-body">
                 {props.children}
-              </Card.Body>
+              </div>
             </Card>
           </div>
           <div

diff --git a/src/components/vault/BorrowModal.jsx b/src/components/vault/BorrowModal.jsx
@@ -1,7 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import {
   Button,
-  Card,
 } from 'react-daisyui';
 
 import {
@@ -33,10 +32,10 @@ const BorrowModal = (props) => {
           open={open}
           closeModal={closeModal}
         >
-          <Card.Title tag="h2">
+          <h2 className="card-title">
             <ArrowDownCircleIcon className="h-6 w-6 inline-block"/>
             Borrowing EUROs
-          </Card.Title>
+          </h2>
 
           <Typography
             variant="h3"
@@ -50,7 +49,7 @@ const BorrowModal = (props) => {
             Don't forget you can buy discounted tokens by placing your EUROs into Liquidation Pools.
           </Typography>
 
-          <Card.Actions className="pt-4 flex-col-reverse lg:flex-row justify-end">
+          <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
             <Button
               className="w-full lg:w-auto"
               color="ghost"
@@ -64,7 +63,7 @@ const BorrowModal = (props) => {
             >
               Get Discounted Tokens
             </Button>
-          </Card.Actions>
+          </div>
         </Modal>
       </>
     )
@@ -76,10 +75,10 @@ const BorrowModal = (props) => {
         open={open}
         closeModal={closeModal}
       >
-        <Card.Title tag="h2">
+        <h2 className="card-title">
           <ArrowDownCircleIcon className="h-6 w-6 inline-block"/>
           Borrowing EUROs
-        </Card.Title>
+        </h2>
 
         <input
           className="input input-bordered w-full"
@@ -110,7 +109,7 @@ const BorrowModal = (props) => {
           ))}
         </div>
 
-        <Card.Actions className="pt-4 flex-col-reverse lg:flex-row justify-end">
+        <div className="card-actions pt-4 flex-col-reverse lg:flex-row justify-end">
           <Button
             className="w-full lg:w-auto"
             color="ghost"
@@ -128,7 +127,7 @@ const BorrowModal = (props) => {
           >
             Withdraw
           </Button>
-        </Card.Actions>
+        </div>
       </Modal>
     </>
   );

diff --git a/src/components/vault/Debt.jsx b/src/components/vault/Debt.jsx
@@ -10,7 +10,6 @@ import {
 } from "wagmi";
 import { arbitrumSepolia } from "wagmi/chains";
 import {
-  Card,
   Button,
 } from 'react-daisyui';
 import {
@@ -325,7 +324,7 @@ const Debt = ({
 
   return (
     <>
-      <Card.Actions className="pt-4 gap-4 xl:gap-8 flex-col-reverse lg:flex-row justify-between xl:justify-normal">
+      <div className="card-actions pt-4 gap-4 xl:gap-8 flex-col-reverse lg:flex-row justify-between xl:justify-normal">
         <Button
           className="w-full lg:w-64"
           onClick={() => setBorrowOpen(!borrowOpen)}
@@ -340,7 +339,7 @@ const Debt = ({
           <ArrowUpCircleIcon className="h-6 w-6 inline-block"/>
           Repay
         </Button>
-      </Card.Actions>
+      </div>
 
       <BorrowModal
         open={borrowOpen}