Unnest, link to regex101 in comment, switch to ExternalLink

delvtech · Nov 18, 2024 · a251ded · a251ded
1 parent af5e49d
commit a251ded
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 30 deletions.
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx b/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx
@@ -2,10 +2,10 @@ import { useNavigate, useSearch } from "@tanstack/react-router";
 import { ReactElement } from "react";
 import { Tabs } from "src/ui/base/components/Tabs/Tabs";
 import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
-import { OpenLongsContainer } from "src/ui/portfolio/longs/LongsContainer/LongsContainer";
-import { LpAndWithdrawalSharesContainer } from "src/ui/portfolio/lp/LpAndWithdrawalSharesContainer/LpAndWithdrawalSharesContainer";
+import { OpenLongsContainer } from "src/ui/portfolio/longs/LongsContainer";
+import { LpAndWithdrawalSharesContainer } from "src/ui/portfolio/lp/LpAndWithdrawalSharesContainer";
 import { PORTFOLIO_ROUTE } from "src/ui/portfolio/routes";
-import { OpenShortsContainer } from "src/ui/portfolio/shorts/ShortsContainer/ShortsContainer";
+import { OpenShortsContainer } from "src/ui/portfolio/shorts/ShortsContainer";
 
 export function Portfolio(): ReactElement {
   const { position } = useSearch({ from: PORTFOLIO_ROUTE });

diff --git a/...o/PositionContainer/PositionContainer.tsx → ...ng/src/ui/portfolio/PositionContainer.tsx b/...o/PositionContainer/PositionContainer.tsx → ...ng/src/ui/portfolio/PositionContainer.tsx
diff --git a/...tionTableHeading/PositionTableHeading.tsx → ...src/ui/portfolio/PositionTableHeading.tsx b/...tionTableHeading/PositionTableHeading.tsx → ...src/ui/portfolio/PositionTableHeading.tsx
diff --git a/...o/longs/LongsContainer/LongsContainer.tsx → ...src/ui/portfolio/longs/LongsContainer.tsx b/...o/longs/LongsContainer/LongsContainer.tsx → ...src/ui/portfolio/longs/LongsContainer.tsx
@@ -1,6 +1,7 @@
 import { appConfig, HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
 import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
+import { ExternalLink } from "src/ui/analytics/ExternalLink";
 import LoadingState from "src/ui/base/components/LoadingState";
 import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
@@ -10,8 +11,8 @@ import {
   OpenLongPositionsData,
   usePortfolioLongsData,
 } from "src/ui/portfolio/longs/usePortfolioLongsData";
-import { PositionContainer } from "src/ui/portfolio/PositionContainer/PositionContainer";
-import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading/PositionTableHeading";
+import { PositionContainer } from "src/ui/portfolio/PositionContainer";
+import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
 import { useAccount } from "wagmi";
 
 export function OpenLongsContainer(): ReactElement {
@@ -48,14 +49,12 @@ export function OpenLongsContainer(): ReactElement {
           text={
             <p className="max-w-xl">
               Visit the{" "}
-              <a
-                className="daisy-link"
+              <ExternalLink
                 href="https://docs.hyperdrive.box/hyperdrive-overview/position-types/longs-fixed-rates"
-                rel="noopener noreferrer"
-                target="_blank"
+                newTab
               >
                 documentation
-              </a>{" "}
+              </ExternalLink>{" "}
               or explore pools to open your first Long position.
             </p>
           }

diff --git a/...tainer/LpAndWithdrawalSharesContainer.tsx → ...lio/lp/LpAndWithdrawalSharesContainer.tsx b/...tainer/LpAndWithdrawalSharesContainer.tsx → ...lio/lp/LpAndWithdrawalSharesContainer.tsx
@@ -1,14 +1,15 @@
 import { appConfig } from "@delvtech/hyperdrive-appconfig";
 import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
+import { ExternalLink } from "src/ui/analytics/ExternalLink";
 import LoadingState from "src/ui/base/components/LoadingState";
 import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
 import { OpenLpTableDesktop } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/LpAndWithdrawalSharesTable";
 import { TotalLpValue } from "src/ui/portfolio/lp/LpAndWithdrawalSharesTable/TotalLpValue";
 import { usePortfolioLpData } from "src/ui/portfolio/lp/usePortfolioLpData";
-import { PositionContainer } from "src/ui/portfolio/PositionContainer/PositionContainer";
-import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading/PositionTableHeading";
+import { PositionContainer } from "src/ui/portfolio/PositionContainer";
+import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
 import { useAccount } from "wagmi";
 
 export function LpAndWithdrawalSharesContainer(): ReactElement {
@@ -58,14 +59,12 @@ export function LpAndWithdrawalSharesContainer(): ReactElement {
           text={
             <p className="max-w-xl">
               Visit the{" "}
-              <a
-                className="daisy-link"
+              <ExternalLink
+                newTab
                 href="https://docs.hyperdrive.box/hyperdrive-overview/position-types/liquidity-provider"
-                rel="noopener noreferrer"
-                target="_blank"
               >
                 documentation
-              </a>{" "}
+              </ExternalLink>{" "}
               or explore pools to open your first LP position.
             </p>
           }
@@ -105,12 +104,10 @@ export function LpAndWithdrawalSharesContainer(): ReactElement {
               hyperdrive={hyperdrive}
               rightElement={<TotalLpValue hyperdrive={hyperdrive} />}
               hyperdriveName={
-                /*
-		      This regex removes the term from the hyperdrive name since it's already shown in the table.
-		      It matches:
-		      - \d{1,3}: 1 to 3 digits
-		      - d: Followed by the letter 'd'
-		    */ hyperdrive.name.replace(/\d{1,3}d/, "")
+                // This regex removes the term (eg: "30d") from the hyperdrive
+                // name since it's already shown in the table.
+                // https://regex101.com/r/f4A3th/1
+                hyperdrive.name.replace(/\d{1,3}d/, "")
               }
             />
             <OpenLpTableDesktop

diff --git a/...horts/ShortsContainer/ShortsContainer.tsx → ...c/ui/portfolio/shorts/ShortsContainer.tsx b/...horts/ShortsContainer/ShortsContainer.tsx → ...c/ui/portfolio/shorts/ShortsContainer.tsx
@@ -1,11 +1,12 @@
 import { appConfig, HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
 import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
+import { ExternalLink } from "src/ui/analytics/ExternalLink";
 import LoadingState from "src/ui/base/components/LoadingState";
 import { NonIdealState } from "src/ui/base/components/NonIdealState";
 import { ConnectWalletButton } from "src/ui/compliance/ConnectWallet";
-import { PositionContainer } from "src/ui/portfolio/PositionContainer/PositionContainer";
-import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading/PositionTableHeading";
+import { PositionContainer } from "src/ui/portfolio/PositionContainer";
+import { PositionTableHeading } from "src/ui/portfolio/PositionTableHeading";
 import { OpenShortsTableDesktop } from "src/ui/portfolio/shorts/OpenShortsTable/OpenShortsTableDesktop";
 import { TotalOpenShortValue } from "src/ui/portfolio/shorts/OpenShortsTable/TotalOpenShortsValue";
 import {
@@ -50,14 +51,12 @@ export function OpenShortsContainer(): ReactElement {
           text={
             <p className="max-w-xl">
               Visit the{" "}
-              <a
-                className="daisy-link"
+              <ExternalLink
+                newTab
                 href="https://docs.hyperdrive.box/hyperdrive-overview/position-types/shorts-variable-rates"
-                rel="noopener noreferrer"
-                target="_blank"
               >
                 documentation
-              </a>{" "}
+              </ExternalLink>{" "}
               or explore pools to open your first Short position.
             </p>
           }