Merge remote-tracking branch 'upstream/master'

the-standard · May 13, 2024 · bb2a673 · bb2a673
2 parents d7ab68a + 0ed45a0
commit bb2a673
Show file tree

Hide file tree

Showing 25 changed files with 174 additions and 152 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,7 +1,5 @@
 import { Routes, Route } from "react-router-dom";
-import { WagmiProvider, useAccount } from "wagmi";
-import { arbitrum, arbitrumSepolia } from "wagmi/chains";
-import { createWeb3Modal, useWeb3Modal } from '@web3modal/wagmi/react';
+import { WagmiProvider } from "wagmi";
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import wagmiConfig from "./WagmiConfig";
@@ -17,21 +15,9 @@ import LiquidationPools from './pages/liquidation-pools/LiquidationPools';
 import './App.css';
 import 'react-toastify/dist/ReactToastify.min.css';
 
-const projectId = import.meta.env.VITE_WALLETCONNECT_ID;
-
 function App() {
   const queryClient = new QueryClient();
 
-  // const localTheme = localStorage.getItem('theme');
-  // const useTheme = localTheme || "light";
-
-  // createWeb3Modal({
-  //   wagmiConfig,
-  //   projectId,
-  //   chains: [arbitrum, arbitrumSepolia],
-  //   themeMode: useTheme,
-  // });
-
   return (
     <WagmiProvider config={wagmiConfig} reconnectOnMount={true}>
       <QueryClientProvider client={queryClient}>

diff --git a/src/components/liquidation-pools/ClaimTokens.jsx b/src/components/liquidation-pools/ClaimTokens.jsx
@@ -12,13 +12,11 @@ import {
   useLiquidationPoolStore,
 } from "../../store/Store";
 
-import {
-  Button,
-} from 'react-daisyui';
-
 import Card from "../ui/Card";
+import Button from "../ui/Button";
 import Modal from "../ui/Modal";
 import CenterLoader from "../ui/CenterLoader";
+import Typography from "../ui/Typography";
 
 const ClaimTokens = ({
   loading,
@@ -87,9 +85,9 @@ const ClaimTokens = ({
     <>
       <Card className="card-compact w-full">
         <div className="card-body">
-          <h2 className="card-title justify-between">
+          <Typography variant="h2" className="card-title justify-between">
             Claimable Tokens
-          </h2>
+          </Typography>
 
           <div className="overflow-x-auto">
             <table className="table table-zebra">
@@ -140,9 +138,9 @@ const ClaimTokens = ({
         open={isOpen}
         closeModal={() => setIsOpen(false)}
       >
-        <h2 className="card-title justify-between">
+        <Typography variant="h2" className="card-title justify-between">
           Claiming Your Tokens
-        </h2>
+        </Typography>
         <CenterLoader />
       </Modal>
     </>

diff --git a/src/components/liquidation-pools/StakedAssets.jsx b/src/components/liquidation-pools/StakedAssets.jsx
@@ -2,13 +2,11 @@ import { useState } from "react";
 
 import { ethers } from "ethers";
 
-import {
-  Button,
-} from 'react-daisyui';
-
 import WithdrawModal from "./WithdrawModal";
 import Card from "../ui/Card";
+import Button from "../ui/Button";
 import CenterLoader from "../ui/CenterLoader";
+import Typography from "../ui/Typography";
 
 const StakedAssets = ({
   loading,
@@ -26,7 +24,7 @@ const StakedAssets = ({
     <>
       <Card className="card-compact w-full">
         <div className="card-body">
-          <h2 className="card-title">Vault List</h2>
+          <Typography variant="h2" className="card-title">Vault List</Typography>
 
           <div className="overflow-x-auto">
             <table className="table table-zebra">

diff --git a/src/components/liquidation-pools/Staking.jsx b/src/components/liquidation-pools/Staking.jsx
@@ -22,11 +22,8 @@ import {
   useLiquidationPoolStore,
 } from "../../store/Store";
 
-import {
-  Button,
-} from 'react-daisyui';
-
 import Card from "../ui/Card";
+import Button from "../ui/Button";
 import Typography from "../ui/Typography";
 import Modal from "../ui/Modal";
 
@@ -268,14 +265,14 @@ const Staking = () => {
     <>
       <Card className="card-compact w-full">
         <div className="card-body">
-          <h2 className="card-title justify-between">
+          <Typography variant="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>
-          </h2>
+          </Typography>
           <Typography variant="p">
             To start earning fees & buying up liquidated assets at up to a 10% discount, stake your TST & EUROs below.
           </Typography>
@@ -338,10 +335,10 @@ const Staking = () => {
         closeModal={() => setHelpOpen(false)}
         wide
       >
-        <h2 className="card-title">
+        <Typography variant="h2" className="card-title">
           <QuestionMarkCircleIcon className="h-6 w-6 inline-block"/>
           Liquidation Pool - How It Works
-        </h2>
+        </Typography>
 
         <Typography variant="h2">
           Earning Fees

diff --git a/src/components/liquidation-pools/WithdrawModal.jsx b/src/components/liquidation-pools/WithdrawModal.jsx
@@ -12,11 +12,8 @@ import {
   useLiquidationPoolAbiStore
 } from "../../store/Store";
 
-import {
-  Button,
-} from 'react-daisyui';
-
 import CenterLoader from "../ui/CenterLoader";
+import Button from "../ui/Button";
 import Modal from "../ui/Modal";
 import Typography from "../ui/Typography";
 
@@ -144,12 +141,12 @@ const WithdrawModal = ({
         >
           {claimLoading ? (
             <>
-              <h2 className="card-title">Withdrawing Your Tokens</h2>
+              <Typography variant="h2" className="card-title">Withdrawing Your Tokens</Typography>
               <CenterLoader />
             </>
           ) : (
             <>
-              <h2 className="card-title">Withdraw Unsuccessful</h2>
+              <Typography variant="h2" className="card-title">Withdraw Unsuccessful</Typography>
               <Typography variant="p">
                 There was a problem processing your withdraw request.
               </Typography>
@@ -187,12 +184,12 @@ const WithdrawModal = ({
         <>
           {claimLoading ? (
             <>
-              <h2 className="card-title">Withdrawing Your Tokens</h2>
+              <Typography variant="h2" className="card-title">Withdrawing Your Tokens</Typography>
               <CenterLoader />
             </>
           ) : (
             <>
-              <h2 className="card-title"> Withdraw Your Tokens</h2>
+              <Typography variant="h2" className="card-title"> Withdraw Your Tokens</Typography>
 
               {hasPending ? (
                 <>
@@ -207,7 +204,7 @@ const WithdrawModal = ({
                     <Typography variant="p">
                       Pending TST:
                     </Typography>
-                    <Typography >
+                    <Typography variant="p">
                       {showTstPending || '0'}
                     </Typography>
                   </div>

diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx
@@ -0,0 +1,45 @@
+import {
+  Button as DaisyButton,
+} from 'react-daisyui';
+
+const Button = (props) => {
+  const {
+    className,
+    shape,
+    size,
+    variant,
+    color,
+    glass,
+    wide,
+    fullWidth,
+    loading,
+    disabled,
+    onClick
+  } = props;
+
+  console.log()
+
+  return (
+    <DaisyButton
+      className={` ${className ? className : ''}`}
+      shape={'' || shape}
+      size={'' || size}
+      variant={null || variant}
+      color={null || color}
+      glass={false || glass}
+      wide={false || wide}
+      fullWidth={false || fullWidth}
+      loading={false || loading}
+      disabled={false || disabled}
+      onClick={onClick ? (
+        onClick
+      ) : (
+        () => null
+      )}
+    >
+      {props.children}
+    </DaisyButton>
+  );
+};
+
+export default Button;
diff --git a/src/components/ui/Card.jsx b/src/components/ui/Card.jsx
@@ -5,7 +5,7 @@ const Card = (props) => {
 
   return (
     <div
-      className={`card card-bordered bg-base-100 shadow-md ${className}`}
+      className={`card card-bordered bg-base-100 shadow-md ${className ? className : ''}`}
     >
       {props.children}
     </div>

diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx
@@ -24,7 +24,7 @@ const Modal = (props) => {
           </div>
           <div
             onClick={closeModal}
-            className="opacity-25 z-30 fixed inset-0 bg-black"
+            className="z-30 fixed inset-0 bg-black/50"
           />
         </div>
       ) : (null)}

diff --git a/src/components/ui/Pagination.jsx b/src/components/ui/Pagination.jsx
@@ -3,10 +3,11 @@ import {
   ChevronLeftIcon,
 } from '@heroicons/react/24/outline';
 import {
-  Button,
   Pagination as DaisyPagination,
 } from 'react-daisyui';
 
+import Button from "./Button";
+
 const Pagination = ({
   totalItems,
   perPage,

diff --git a/src/components/ui/SideNav.jsx b/src/components/ui/SideNav.jsx
@@ -1,14 +1,14 @@
 import { NavLink, useLocation } from 'react-router-dom';
 import {
   Menu,
-  Button,
 } from 'react-daisyui';
 import {
   CircleStackIcon,
   BanknotesIcon,
   XMarkIcon,
 } from '@heroicons/react/24/outline';
 
+import Button from "./Button";
 import ThemeToggle from "./ThemeToggle";
 
 const SideNav = (props) => {

diff --git a/src/components/ui/ThemeToggle.jsx b/src/components/ui/ThemeToggle.jsx
@@ -1,11 +1,9 @@
-import {
-  Button,
-} from 'react-daisyui';
-
 import {
   useCurrentTheme,
 } from "../../store/Store";
 
+import Button from "./Button";
+
 import { SunIcon, MoonIcon } from '@heroicons/react/24/solid';
 
 const ThemeToggle = () => {

diff --git a/src/components/ui/TopNav.jsx b/src/components/ui/TopNav.jsx
@@ -1,11 +1,7 @@
 import { useAccount } from "wagmi";
-import {
-  Button,
-  useTheme
-} from 'react-daisyui';
 import { Bars3Icon } from '@heroicons/react/24/outline';
-import { SunIcon, MoonIcon } from '@heroicons/react/24/solid';
 
+import Button from "./Button";
 import ThemeToggle from "./ThemeToggle";
 
 const TopNav = (props) => {

diff --git a/src/components/ui/Typography.jsx b/src/components/ui/Typography.jsx
@@ -1,34 +1,49 @@
 const Typography = (props) => {
   const type = props.variant || '';
-  const customClasses = props.className || '';
-
-  let useClass = 'text-base font-normal';
+  const classes = props.className || '';
 
   switch (type) {
     case 'p':
-      useClass = 'inline-block text-base font-normal';
-      break;
+      return (
+        <p
+          className={`inline-block text-base font-normal ${classes ? classes : ''}`}
+        >
+          {props.children || ''}
+        </p>
+      );
     case 'h1':
-      useClass = 'inline-block text-2xl font-semibold';
-      break;
+      return (
+        <h1
+          className={`inline-block text-2xl font-semibold ${classes ? classes : ''}`}
+        >
+          {props.children || ''}
+        </h1>
+      );
     case 'h2':
-      useClass = 'inline-block text-xl font-semibold';
-      break;
+      return (
+        <h2
+          className={`inline-block text-xl font-semibold ${classes ? classes : ''}`}
+        >
+          {props.children || ''}
+        </h2>
+      );
     case 'h3':
-      useClass = 'inline-block text-lg font-medium';
-      break;  
+      return (
+        <h3
+          className={`inline-block text-lg font-medium  ${classes ? classes : ''}`}
+        >
+          {props.children || ''}
+        </h3>
+      );
     default:
-      useClass = 'inline-block text-base';
-      break;
-  }
-
-  return (
-    <div
-      className={useClass + ' ' + customClasses}
-    >
-      {props.children || ''}
-    </div>
-  );
+      return (
+        <p
+          className={`inline-block text-base ${classes ? classes : ''}`}
+        >
+          {props.children || ''}
+        </p>
+      );
+    }
 };
 
 export default Typography;