From d74d9e88e694fd2be64e631fc94aeed50a1866f5 Mon Sep 17 00:00:00 2001
From: Zak <zmooney@hotmail.co.uk>
Date: Thu, 19 Dec 2024 10:35:28 +0000
Subject: [PATCH 1/2] fix: add status wrapper to vaults list to fix crash

---
 src/components/vaults/VaultList.jsx | 71 +++++++++++++++++++++++------
 1 file changed, 57 insertions(+), 14 deletions(-)

diff --git a/src/components/vaults/VaultList.jsx b/src/components/vaults/VaultList.jsx
index a60dff0..9890415 100644
--- a/src/components/vaults/VaultList.jsx
+++ b/src/components/vaults/VaultList.jsx
@@ -87,6 +87,8 @@ const VaultList = ({ vaults, vaultsLoading, listType }) => {
     return withTwoDecimals ? withTwoDecimals[0] : num;
   }
 
+  const test = [{apple: 'pairs'}, {pears: 'apple'}] 
+
   return (
     <>
       <Card className="card-compact mb-4">
@@ -108,7 +110,7 @@ const VaultList = ({ vaults, vaultsLoading, listType }) => {
               </thead>
               {vaultsLoading ? (null) : (
                 <tbody>
-                  {sortedVaults
+                  {sortedVaults?.length && sortedVaults
                     .slice(
                       (currentPage - 1) * itemsPerPage,
                       currentPage * itemsPerPage
@@ -125,11 +127,44 @@ const VaultList = ({ vaults, vaultsLoading, listType }) => {
                       }
                     })
                     .map(function(vault, index) {
-                      const vaultType = ethers.decodeBytes32String(vault.status.vaultType);
-                      const vaultHealth = computeProgressBar(
-                        vault.status.minted,
-                        vault.status.totalCollateralValue
-                      );
+                      if (!vault.status) {
+                        return(
+                          <tr
+                            key={index}
+                            className="active animate-pulse"
+                          >
+                            <td className="hidden md:table-cell">
+                              <div className="rounded-full bg-primary-content h-[42px] w-[42px] opacity-50"></div>
+                            </td>
+                            <td>
+                              <div className="rounded-lg bg-primary-content h-[12px] w-[38px] opacity-50"></div>
+                            </td>
+                            <td className="hidden md:table-cell">
+                              <div className="rounded-lg bg-primary-content h-[12px] w-[72px] opacity-50"></div>
+                            </td>
+                            <td>
+                              <div className="rounded-lg bg-primary-content h-[12px] w-[92px] opacity-50"></div>
+                            </td>
+                            <td className="hidden md:table-cell">
+                              <div className="rounded-lg bg-primary-content h-[12px] w-[120px] opacity-50"></div>
+                            </td>
+                            <td className="text-right">
+                              <div className="rounded-lg bg-primary-content h-[38px] w-[64px] opacity-50"></div>
+                            </td>
+                          </tr> 
+                        )
+                      }
+                      let vaultType = '';
+                      if (vault?.status?.vaultType) {
+                        vaultType = ethers.decodeBytes32String(vault?.status?.vaultType);
+                      }
+                      let vaultHealth = 100;
+                      if (vault?.status) {
+                        vaultHealth = computeProgressBar(
+                          vault?.status?.minted,
+                          vault?.status?.totalCollateralValue
+                        );
+                      }
                       let healthColour = 'success';
                       if (vaultHealth >= 30) {
                         healthColour = 'neutral';
@@ -140,6 +175,7 @@ const VaultList = ({ vaults, vaultsLoading, listType }) => {
                       if (vaultHealth >= 75) {
                         healthColour = 'error';
                       }
+
                       return(
                         <tr
                           key={index}
@@ -181,10 +217,10 @@ const VaultList = ({ vaults, vaultsLoading, listType }) => {
                             </Tooltip>
                           </td>
                           <td>
-                            {vault.status.version ? (
-                              `V${vault.status.version}-`
+                            {vault?.status?.version ? (
+                              `V${vault?.status?.version}-`
                             ) : ('')}
-                            {BigInt(vault.tokenId).toString()}
+                            {BigInt(vault?.tokenId).toString()}
                           </td>
                           <td className="hidden md:table-cell">
                             {currencySymbol}
@@ -225,11 +261,18 @@ const VaultList = ({ vaults, vaultsLoading, listType }) => {
                           <td className="text-right">
                             <Link
                               className="btn btn-outline"
-                              to={`/vault/${
-                                BigInt(
-                                  vault.tokenId
-                                ).toString()
-                              }`}
+                              disabled={!vault.tokenId}
+                              to={
+                                vault?.tokenId ? (
+                                  `/vault/${
+                                    BigInt(
+                                      vault?.tokenId
+                                    ).toString()
+                                  }`
+                                ) : (
+                                  `/`
+                                )
+                              }
                             >
                               Manage
                             </Link>

From b735b0ce2aa82f62352c8cd939f6223de32c043d Mon Sep 17 00:00:00 2001
From: Zak <zmooney@hotmail.co.uk>
Date: Thu, 19 Dec 2024 10:39:21 +0000
Subject: [PATCH 2/2] fix: dark/light mode color fix

---
 src/components/vaults/VaultList.jsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/vaults/VaultList.jsx b/src/components/vaults/VaultList.jsx
index 9890415..8070ec5 100644
--- a/src/components/vaults/VaultList.jsx
+++ b/src/components/vaults/VaultList.jsx
@@ -87,8 +87,6 @@ const VaultList = ({ vaults, vaultsLoading, listType }) => {
     return withTwoDecimals ? withTwoDecimals[0] : num;
   }
 
-  const test = [{apple: 'pairs'}, {pears: 'apple'}] 
-
   return (
     <>
       <Card className="card-compact mb-4">
@@ -98,7 +96,7 @@ const VaultList = ({ vaults, vaultsLoading, listType }) => {
           </Typography>
 
           <div className="overflow-x-auto">
-            <table className="table ">
+            <table className="table">
               <thead>
                 <tr>
                   <th className="hidden md:table-cell">Type</th>
@@ -134,22 +132,22 @@ const VaultList = ({ vaults, vaultsLoading, listType }) => {
                             className="active animate-pulse"
                           >
                             <td className="hidden md:table-cell">
-                              <div className="rounded-full bg-primary-content h-[42px] w-[42px] opacity-50"></div>
+                              <div className="rounded-full bg-base-content h-[42px] w-[42px] opacity-30"></div>
                             </td>
                             <td>
-                              <div className="rounded-lg bg-primary-content h-[12px] w-[38px] opacity-50"></div>
+                              <div className="rounded-lg bg-base-content h-[12px] w-[38px] opacity-30"></div>
                             </td>
                             <td className="hidden md:table-cell">
-                              <div className="rounded-lg bg-primary-content h-[12px] w-[72px] opacity-50"></div>
+                              <div className="rounded-lg bg-base-content h-[12px] w-[72px] opacity-30"></div>
                             </td>
                             <td>
-                              <div className="rounded-lg bg-primary-content h-[12px] w-[92px] opacity-50"></div>
+                              <div className="rounded-lg bg-base-content h-[12px] w-[92px] opacity-30"></div>
                             </td>
                             <td className="hidden md:table-cell">
-                              <div className="rounded-lg bg-primary-content h-[12px] w-[120px] opacity-50"></div>
+                              <div className="rounded-lg bg-base-content h-[12px] w-[120px] opacity-30"></div>
                             </td>
                             <td className="text-right">
-                              <div className="rounded-lg bg-primary-content h-[38px] w-[64px] opacity-50"></div>
+                              <div className="rounded-lg bg-base-content h-[38px] w-[64px] opacity-30"></div>
                             </td>
                           </tr> 
                         )