TVL added in protocols and api doc fixed (#883)

* tvl added in protocols and api doc fixed * calendar * tooltip removed * valens feedback
XLabs · Oct 31, 2024 · 5fa0500 · 5fa0500
1 parent 418ac37
commit 5fa0500
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 92 deletions.
diff --git a/src/components/molecules/Calendar/index.tsx b/src/components/molecules/Calendar/index.tsx
@@ -36,6 +36,7 @@ const Calendar = ({
 }: ICalendarProps) => {
   const [showCalendar, setShowCalendar] = useState(false);
   const dateContainerRef = useRef<HTMLDivElement>(null);
+  const minDate = new Date(2021, 7, 1);
 
   const setTimePeriod = (
     from: number,
@@ -44,7 +45,7 @@ const Calendar = ({
     resetHours: boolean = true,
     btnSelected: TSelectedPeriod = "custom",
   ) => {
-    const start = from === Infinity ? new Date(2021, 7, 1) : new Date();
+    const start = from === Infinity ? minDate : new Date();
     const end = new Date();
 
     setLastBtnSelected(btnSelected);
@@ -148,6 +149,7 @@ const Calendar = ({
             selectsRange
             inline
             maxDate={new Date()}
+            minDate={minDate}
             monthsShown={isDesktop ? 2 : 1}
             showMonthDropdown
           />
@@ -176,6 +178,7 @@ const Calendar = ({
         <div className="calendar-custom-box-date-selector">
           {showAgoButtons ? (
             <div>
+              {/*  don't show at the moment
               <button
                 className={`btn ${lastBtnSelected === "ago1Week" ? "active" : ""}`}
                 onClick={handleAgo1Week}
@@ -199,7 +202,7 @@ const Calendar = ({
                 onClick={handleAgo6Months}
               >
                 6 months ago
-              </button>
+              </button> */}
               <button
                 className={`btn ${lastBtnSelected === "all" ? "active" : ""}`}
                 onClick={handleAgoAllTime}

diff --git a/src/components/molecules/ProtocolsStats/index.tsx b/src/components/molecules/ProtocolsStats/index.tsx
@@ -122,7 +122,7 @@ const ProtocolsStats = ({ numberOfProtocols }: { numberOfProtocols?: number }) =
 
           {isLoading ? (
             isDesktop ? (
-              Array.from({ length: numberOfProtocols || (isMainnet ? 11 : 8) }).map((_, i) => (
+              Array.from({ length: numberOfProtocols || (isMainnet ? 12 : 8) }).map((_, i) => (
                 <div className="protocols-stats-container-element-loader" key={i} />
               ))
             ) : (
@@ -134,20 +134,39 @@ const ProtocolsStats = ({ numberOfProtocols }: { numberOfProtocols?: number }) =
 
               return (
                 <div className="protocols-stats-container-element" key={item.protocol}>
-                  <a
-                    className="protocols-stats-container-element-item"
-                    href={protocolLinksByProtocol[item.protocol.toUpperCase()]}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <ProtocolIcon protocol={item.protocol} />
+                  <div className="protocols-stats-container-element-item">
+                    <a
+                      className="protocols-stats-container-element-item-link"
+                      href={protocolLinksByProtocol[item.protocol.toUpperCase()]}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      <ProtocolIcon protocol={item.protocol} />
 
-                    <p className="protocols-stats-container-element-item-protocol">
-                      {formatAppId(item.protocol)}
-                    </p>
+                      <p className="protocols-stats-container-element-item-link-protocol">
+                        {formatAppId(item.protocol)}
+                      </p>
 
-                    <LinkIcon width={24} />
-                  </a>
+                      <LinkIcon width={24} />
+                    </a>
+
+                    {isDesktop && item.protocol === PORTAL_APP_ID && item.total_value_locked && (
+                      <Tooltip
+                        maxWidth={false}
+                        tooltip={
+                          <div className="protocols-stats-container-element-item-tooltip-text">
+                            <span>TOTAL VALUE LOCKED: </span>$
+                            {formatNumber(item.total_value_locked, 0)}
+                          </div>
+                        }
+                        type="info"
+                      >
+                        <div className="protocols-stats-container-element-item-tooltip">
+                          <InfoCircleIcon />
+                        </div>
+                      </Tooltip>
+                    )}
+                  </div>
 
                   {isMainnet && (
                     <>
@@ -209,6 +228,17 @@ const ProtocolsStats = ({ numberOfProtocols }: { numberOfProtocols?: number }) =
                     </p>
                   </div>
 
+                  {item?.total_value_locked && (
+                    <div className="protocols-stats-container-element-item mobile">
+                      <h4 className="protocols-stats-container-element-item-title">
+                        TOTAL VALUE LOCKED
+                      </h4>
+                      <p className="protocols-stats-container-element-item-value">
+                        ${formatNumber(item.total_value_locked, 0)}
+                      </p>
+                    </div>
+                  )}
+
                   <div className="protocols-stats-container-element-item">
                     <h4 className="protocols-stats-container-element-item-title">CHAINS</h4>
                     <div className="protocols-stats-container-element-item-value">
@@ -239,15 +269,22 @@ const ProtocolsStats = ({ numberOfProtocols }: { numberOfProtocols?: number }) =
                       >
                         <div className="protocols-stats-container-element-item-value-chains">
                           {chainsSupportedByProtocol[item.protocol].map((chainId, i) => {
-                            if (i > 7) return null;
+                            const maxVisibleChains = isDesktop ? 7 : 4;
+                            const maxChainsLimit = isDesktop ? 8 : 5;
+
+                            if (i > maxVisibleChains) return null;
 
-                            if (i === 7 && chainsSupportedByProtocol[item.protocol].length > 8) {
+                            if (
+                              i === maxVisibleChains &&
+                              chainsSupportedByProtocol[item.protocol].length > maxChainsLimit
+                            ) {
                               return (
                                 <div
                                   key={chainId}
                                   className="protocols-stats-container-element-item-value-chains-chain protocols-stats-container-element-item-value-chains-chain-more"
                                 >
-                                  {chainsSupportedByProtocol[item.protocol].length - 7}
+                                  {chainsSupportedByProtocol[item.protocol].length -
+                                    maxVisibleChains}
                                 </div>
                               );
                             }

diff --git a/src/components/molecules/ProtocolsStats/styles.scss b/src/components/molecules/ProtocolsStats/styles.scss
@@ -145,19 +145,9 @@
         }
       }
 
-      & > a {
-        max-width: max-content;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
       &-item {
         @include centered-column;
         color: var(--color-white);
-        gap: 8px 12px;
-        text-decoration: none;
 
         &:first-child {
           @include centered-row;
@@ -169,17 +159,50 @@
           }
         }
 
-        &:last-child {
-          grid-column: span 2;
+        &.mobile {
+          @include desktop {
+            display: none;
+          }
+        }
+
+        &.desktop {
+          display: none;
 
           @include desktop {
-            grid-column: span 1;
+            display: block;
           }
         }
 
-        &-protocol {
-          @include text-roboto-body-500;
+        &-link {
+          @include centered-row;
           color: var(--color-white);
+          gap: 8px 12px;
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+
+          &-protocol {
+            @include text-roboto-body-500;
+            color: var(--color-white);
+          }
+        }
+
+        &-tooltip {
+          @include centered-row;
+          color: var(--color-gray-400);
+          margin-left: 8px;
+
+          &-text {
+            @include text-heading5;
+            color: var(--color-white);
+
+            & > span {
+              @include text-heading6;
+              color: var(--color-gray-400);
+            }
+          }
         }
 
         &-title {

diff --git a/src/pages/ApiDoc/index.tsx b/src/pages/ApiDoc/index.tsx
@@ -5,6 +5,17 @@ import { BaseLayout } from "src/layouts/BaseLayout";
 import { Loader } from "src/components/atoms";
 import "./styles.scss";
 
+const replacePathParams = (data: { paths: { [key: string]: any } }) => {
+  const newPaths: { [key: string]: any } = {};
+  for (const path in data.paths) {
+    // Replace ':param' with '{param}'
+    const updatedPath = path.replace(/:([a-zA-Z_]+)/g, "{$1}");
+    newPaths[updatedPath] = data.paths[path];
+  }
+  data.paths = newPaths;
+  return data;
+};
+
 const ApiDoc = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [swaggerSpec, setSwaggerSpec] = useState(null);
@@ -28,6 +39,8 @@ const ApiDoc = () => {
         const response = await fetch(url);
         let data = await response.json();
 
+        data = replacePathParams(data);
+
         data = {
           ...data,
           host: host,
@@ -130,11 +143,11 @@ const ApiDoc = () => {
         };
 
         const pathsToDeprecate = [
-          "/api/v1/address/:address",
-          "/api/v1/global-tx/:chain_id/:emitter/:seq",
-          "/api/v1/token/:chain_id/:token_address",
+          "/api/v1/address/{address}",
+          "/api/v1/global-tx/{chain_id}/{emitter}/{seq}",
+          "/api/v1/token/{chain_id}/{token_address}",
           "/api/v1/transactions/",
-          "/api/v1/transactions/:chain_id/:emitter/:seq",
+          "/api/v1/transactions/{chain_id}/{emitter}/{seq}",
           "/api/v1/vaas/vaa-counts",
         ];
 

diff --git a/src/pages/Tx/Information/Summary/GetRedeem/index.tsx b/src/pages/Tx/Information/Summary/GetRedeem/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { CheckIcon, CrossIcon, Cube3DIcon } from "src/icons/generic";
-import { Tooltip } from "src/components/atoms";
 import "./styles.scss";
 
 interface Props {
@@ -30,8 +29,6 @@ export const GetRedeem = ({ canTryToGetRedeem, foundRedeem, loadingRedeem, getRe
     }, 5000);
   }, [foundRedeem]);
 
-  const showTooltip = !loadingRedeem && !showCheck && !showCross;
-
   useEffect(() => {
     if (showCross) {
       toast("Executed Transaction Not Found", {
@@ -46,57 +43,48 @@ export const GetRedeem = ({ canTryToGetRedeem, foundRedeem, loadingRedeem, getRe
     }
   }, [showCross]);
 
+  if (!shouldShow) return null;
+
   return (
-    <>
-      {shouldShow && (
-        <Tooltip
-          controlled={!showTooltip}
-          open={showTooltip}
-          tooltip={<div>Try to find execution transaction</div>}
-          type="info"
+    <div
+      className={`getRedeem ${showCross || showCheck ? "dissapearing" : ""} ${
+        showCross ? "cross" : ""
+      }`}
+      onClick={() => !loadingRedeem && !(showCross || showCheck) && getRedeem()}
+      style={{
+        cursor: showCross || showCheck ? "default" : "pointer",
+      }}
+    >
+      <div className={`getRedeem-button ${loadingRedeem ? "loading" : ""}`}>
+        <div
+          className="getRedeem-button-icon"
+          style={{
+            opacity: showCheck ? 100 : 0,
+          }}
         >
-          <div
-            className={`getRedeem ${showCross || showCheck ? "dissapearing" : ""} ${
-              showCross ? "cross" : ""
-            } ${showTooltip ? "tooltip" : ""}`}
-            onClick={() => !loadingRedeem && !(showCross || showCheck) && getRedeem()}
-            style={{
-              cursor: !showTooltip ? "default" : "pointer",
-            }}
-          >
-            <div className={`getRedeem-button ${loadingRedeem ? "loading" : ""}`}>
-              <div
-                className="getRedeem-button-icon"
-                style={{
-                  opacity: showCheck ? 100 : 0,
-                }}
-              >
-                <CheckIcon />
-              </div>
+          <CheckIcon />
+        </div>
 
-              <div
-                className="getRedeem-button-icon"
-                style={{
-                  opacity: showCross ? 100 : 0,
-                }}
-              >
-                <CrossIcon />
-              </div>
+        <div
+          className="getRedeem-button-icon"
+          style={{
+            opacity: showCross ? 100 : 0,
+          }}
+        >
+          <CrossIcon />
+        </div>
 
-              <div
-                className="getRedeem-button-icon"
-                style={{
-                  opacity: !showCross && !showCheck ? 100 : 0,
-                  transition: "none",
-                }}
-              >
-                <Cube3DIcon width={24} />
-              </div>
-            </div>
-            <div className="getRedeem-find-txt">Find Execution Tx</div>
-          </div>
-        </Tooltip>
-      )}
-    </>
+        <div
+          className="getRedeem-button-icon"
+          style={{
+            opacity: !showCross && !showCheck ? 100 : 0,
+            transition: "none",
+          }}
+        >
+          <Cube3DIcon width={24} />
+        </div>
+      </div>
+      <div className="getRedeem-find-txt">Search Execution Tx</div>
+    </div>
   );
 };