Merge pull request #98 from the-standard/202501-redemption-alert

202501 redemption alert

src/App.css

@@ -529,6 +529,15 @@
   box-shadow: inset 1px 1px 1px 0px rgba(74, 222, 128, 0.2), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
 }
 
+.tst-card.warn-card::before {
+  background: linear-gradient(
+    110.28deg,
+    rgba(255, 190, 0, 0.3) 0.2%,
+    rgba(255, 190, 0, 0.2) 101.11%
+  );
+  box-shadow: inset 1px 1px 1px 0px rgba(255, 190, 0, 0.2), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
+}
+
 /* INPUTS */
 
 input.input {

src/components/vault/VaultRedemptionAlert.jsx

@@ -0,0 +1,59 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  ArrowTrendingUpIcon
+} from '@heroicons/react/24/outline';
+import axios from "axios";
+
+import Card from "../ui/Card";
+import Typography from "../ui/Typography";
+
+const VaultRedemptionAlert = ({
+  vaultId,
+}) => {
+  const [redemption, setRedemption] = useState();
+
+  useEffect(() => {
+    getUpcomingRedemption();
+  }, []);
+
+  const getUpcomingRedemption = async () => {
+    try {
+      const response = await axios.get(
+        `https://smart-vault-api.thestandard.io/redemption`
+      );
+      const data = response.data;
+      setRedemption(data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  if (redemption) {
+    if (vaultId === redemption?.tokenID) {
+      return (
+        <>
+          <Card className="card-compact mb-4 warn-card">
+            <div className="card-body">
+              <Typography variant="h2" className="card-title flex gap-0">
+                <ArrowTrendingUpIcon
+                  className="mr-2 h-6 w-6 inline-block"
+                />
+                Upcoming Auto Redemption
+              </Typography>
+              <Typography variant="p">
+                Your vault is currently the most borrowed against, and may automatically use a portion of your collateral to pay off your debt at a discount if USDs trades below $1.
+                <br/>
+                If you want to avoid the auto redemption you should repay some of your debt now.
+              </Typography>
+            </div>
+          </Card>
+        </>
+      )
+    }  
+  }
+
+  return (<></>)
+};
+
+export default VaultRedemptionAlert;

src/pages/vault/Vault.jsx

@@ -34,6 +34,7 @@ import VaultSend from "../../components/vault/VaultSend";
 import TokenTotalPie from "../../components/vault/TokenTotalPie";
 import VaultNFT from "../../components/vault/VaultNFT";
 import VaultSavingsSummary from "../../components/vault/VaultSavingsSummary";
+import VaultRedemptionAlert from "../../components/vault/VaultRedemptionAlert";
 
 import YieldParentNew from "../../components/vault/yield/YieldParentNew";
 
@@ -277,6 +278,11 @@ const Vault = () => {
       </Card>
       <div className="flex flex-col md:flex-row mt-4 gap-4 flex-wrap">
         <div className="flex-1 grow-[4]">
+          {vaultType === 'USDs' ? (
+            <VaultRedemptionAlert
+              vaultId={vaultId}
+            />
+          ) : null}
           <VaultSavingsSummary />
           <TokenList
             vaultType={vaultType}