From a318e26ce8bbef036c588a29e885ed3a8da1c019 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 12:16:16 -0700 Subject: [PATCH 01/18] Add a racing stripe --- apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx b/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx index f02725dd9..6e7b72ef0 100644 --- a/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx +++ b/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx @@ -5,7 +5,12 @@ export function Navbar(): ReactElement { return (
- + +
+
+
+
+
Hyperdrive
From e484410c5944b74d48f9c877434eb6fa3d3cebd1 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 16:02:58 -0700 Subject: [PATCH 02/18] Switch to daisy lofi theme, comment out custom styles --- apps/hyperdrive-trading/tailwind.config.js | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/apps/hyperdrive-trading/tailwind.config.js b/apps/hyperdrive-trading/tailwind.config.js index 292bddad3..167d9d0fd 100644 --- a/apps/hyperdrive-trading/tailwind.config.js +++ b/apps/hyperdrive-trading/tailwind.config.js @@ -60,21 +60,10 @@ module.exports = { { night: { // eslint-disable-next-line @typescript-eslint/no-var-requires - ...require("daisyui/src/theming/themes")["[data-theme=night]"], - primary: "#F4B1FF", - secondary: "#8ABBFF", - accent: "#D4F17E", - - success: "#61E4A3", - warning: "#FF9031", - error: "#E66E65", - - "base-100": "#151427", - "base-content": "#D6D5F6", - - neutral: "#202d40", - "neutral-content": "#9aa1cb", - + ...require("daisyui/src/theming/themes")["[data-theme=lofi]"], + primary: "#007eed", + secondary: "#522dae", + accent: "#f40000", "--btn-text-case": "none", // set default text transform for buttons }, }, From d1dea71adcd251b5d53f9079d710467f4a495755 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 16:07:25 -0700 Subject: [PATCH 03/18] Fix styling in Stat component --- .../src/ui/base/components/Stat.tsx | 12 +++++++++--- .../src/ui/markets/MarketStats/MarketStats.tsx | 4 ---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx b/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx index 0cc28d5fb..7163535f1 100644 --- a/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx +++ b/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx @@ -1,3 +1,4 @@ +import classNames from "classnames"; import { ReactElement, ReactNode } from "react"; interface StatProps { @@ -17,12 +18,17 @@ export function Stat({

{label}

-
{value}
+
{value}
); } diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx index 3f8f6e7f9..152bb464c 100644 --- a/apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/MarketStats/MarketStats.tsx @@ -77,7 +77,6 @@ export function MarketStats({ value={tradingVolume.formatted || "0"} /> } - description={"The total trading volume in the last 24 hours"} /> } - description={ - "The total liquidity in the pool available for market making" - } />
); From 3647538732ca18b330f4e3aa85bf74a925f81492 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 16:18:41 -0700 Subject: [PATCH 04/18] Fix styling in PriceBadges --- .../src/ui/trade/TradeBody/TradeBody.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx index a1f3284a2..76334cd8e 100644 --- a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx +++ b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx @@ -112,9 +112,8 @@ function PriceBadges({ }) { return (
-
- 1{" "} - {hyperdrive.baseToken.symbol} ≈{" "} +
+ 1 {hyperdrive.baseToken.symbol} ≈{" "} {formatBalance({ balance: divideBigInt( parseUnits("1", 18), @@ -127,9 +126,8 @@ function PriceBadges({ })}{" "} hy{hyperdrive.baseToken.symbol}
-
- hyBASE 1 hy - {hyperdrive.baseToken.symbol} ≈{" "} +
+ 1 hy{hyperdrive.baseToken.symbol} ≈{" "} {formatBalance({ balance: longPrice.price, decimals: hyperdrive.baseToken.decimals, From e412092914e7daa2b09401871362807ff3f617a9 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 16:40:54 -0700 Subject: [PATCH 05/18] Fix styling in token avatars --- .../src/ui/trade/TradeBody/TradeBody.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx index 76334cd8e..84f1ab70d 100644 --- a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx +++ b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx @@ -82,17 +82,17 @@ function MarketBreadcrumbs({ hyperdrive }: { hyperdrive: Hyperdrive }) { function MarketHeader({ hyperdrive }: { hyperdrive: Hyperdrive }) { return (

-
-
-
- - +
+
+
+ + {hyperdrive.baseToken.symbol}
-
-
- +
+
+ hy{hyperdrive.baseToken.symbol}
From 86cdb3f477ea6d44cc82c8d1417d0dd72ed14d08 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 16:44:02 -0700 Subject: [PATCH 06/18] Fix Available Balance well --- apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx | 2 +- .../src/ui/portfolio/YourBalanceWell/YourBalanceWell.tsx | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx b/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx index e290664b2..55ebdc86f 100644 --- a/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx +++ b/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx @@ -22,7 +22,7 @@ export function Well({ "w-full": block, "hover:cursor-pointer hover:glass hover:-translate-y-1 hover:shadow-lg transition duration-300 ease-in-out": isInteractive, - "bg-base-300/50 ring-neutral-content/20 ring-1": !variant, + "bg-base-200": !variant, "bg-primary/5 ring-primary/20 ring-1": variant === "primary", "bg-secondary/5 ring-secondary/20 ring-1": variant === "secondary", "bg-accent/5 ring-accent/20 ring-1": variant === "accent", diff --git a/apps/hyperdrive-trading/src/ui/portfolio/YourBalanceWell/YourBalanceWell.tsx b/apps/hyperdrive-trading/src/ui/portfolio/YourBalanceWell/YourBalanceWell.tsx index 2fa26a3b2..57d026f95 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/YourBalanceWell/YourBalanceWell.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/YourBalanceWell/YourBalanceWell.tsx @@ -27,7 +27,6 @@ export function YourBalanceWell({ token }: { token: Token }): ReactElement { label="Your available balance" value={
- {formatBalance({ balance: balance?.value || 0n, decimals: token.decimals, @@ -37,10 +36,10 @@ export function YourBalanceWell({ token }: { token: Token }): ReactElement { {chainId === 31337 ? ( ) : undefined}
From a34c1b5b5831167beaea53df95834be93ac48a39 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 17:19:09 -0700 Subject: [PATCH 07/18] Refactor Well to a daisy-card component --- .../src/ui/base/components/Well/Well.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx b/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx index 55ebdc86f..2e26cba3b 100644 --- a/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx +++ b/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx @@ -18,15 +18,14 @@ export function Well({ onClick, }: PropsWithChildren): ReactElement { const isInteractive = !disabled && (interactive || onClick); - const className = classNames("rounded-lg p-4", { - "w-full": block, - "hover:cursor-pointer hover:glass hover:-translate-y-1 hover:shadow-lg transition duration-300 ease-in-out": - isInteractive, - "bg-base-200": !variant, - "bg-primary/5 ring-primary/20 ring-1": variant === "primary", - "bg-secondary/5 ring-secondary/20 ring-1": variant === "secondary", - "bg-accent/5 ring-accent/20 ring-1": variant === "accent", - }); + const className = classNames( + "daisy-card p-4 daisy-card-bordered shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] bg-base-200/50", + { + "w-full": block, + "hover:cursor-pointer hover:-translate-y-1 hover:shadow-lg transition duration-300 ease-in-out": + isInteractive, + }, + ); if (onClick || interactive) { return ( From 200ca9239df1417f8934d2ec08af771871c747eb Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 17:26:50 -0700 Subject: [PATCH 08/18] Fix styling in position tabs --- .../src/ui/portfolio/PositionTabs/PositionTabs.tsx | 6 +++--- .../src/ui/portfolio/PositionsSection/PositionsSection.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/portfolio/PositionTabs/PositionTabs.tsx b/apps/hyperdrive-trading/src/ui/portfolio/PositionTabs/PositionTabs.tsx index ecf2bd201..df63d4a62 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/PositionTabs/PositionTabs.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/PositionTabs/PositionTabs.tsx @@ -17,7 +17,7 @@ export function PositionTabs({ className={classNames( "daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg", { - "daisy-tab-active glass": activePositionTab === "Longs", + "daisy-tab-active": activePositionTab === "Longs", }, )} > @@ -28,7 +28,7 @@ export function PositionTabs({ className={classNames( "daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg", { - "daisy-tab-active glass": activePositionTab === "Shorts", + "daisy-tab-active": activePositionTab === "Shorts", }, )} > @@ -39,7 +39,7 @@ export function PositionTabs({ className={classNames( "daisy-tab-lifted daisy-tab daisy-tab-sm border-b-base-100 md:daisy-tab-lg", { - "daisy-tab-active glass": activePositionTab === "LP", + "daisy-tab-active": activePositionTab === "LP", }, )} > diff --git a/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx b/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx index 3fd5bb6b6..b3d6f0cd5 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/PositionsSection/PositionsSection.tsx @@ -54,7 +54,7 @@ export function PositionsSection({ return (
-
+
Date: Wed, 11 Oct 2023 17:27:47 -0700 Subject: [PATCH 09/18] Don't use dark bg in modals --- .../src/ui/base/components/Modal/Modal.tsx | 5 +---- .../src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/base/components/Modal/Modal.tsx b/apps/hyperdrive-trading/src/ui/base/components/Modal/Modal.tsx index b2b32d29c..fcd31eb94 100644 --- a/apps/hyperdrive-trading/src/ui/base/components/Modal/Modal.tsx +++ b/apps/hyperdrive-trading/src/ui/base/components/Modal/Modal.tsx @@ -25,10 +25,7 @@ export function Modal({ {children({ showModal })} -
+ {modalContent}
diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx index 6d7d67198..f8f19070d 100644 --- a/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/MarketSelect/AllMarketsBreadcrumb.tsx @@ -26,7 +26,7 @@ export function AllMarketsBreadcrumb(): ReactElement { function MarketsModalContent() { return ( -
+

Markets

From 4acc294630038cc94b6b1dca59d850ed13726f93 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 17:30:30 -0700 Subject: [PATCH 10/18] Remove dark theme from rainbowkit --- apps/hyperdrive-trading/src/ui/main.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/main.tsx b/apps/hyperdrive-trading/src/ui/main.tsx index 0448c5cfc..5a30b3d6f 100644 --- a/apps/hyperdrive-trading/src/ui/main.tsx +++ b/apps/hyperdrive-trading/src/ui/main.tsx @@ -1,4 +1,4 @@ -import { darkTheme, RainbowKitProvider } from "@rainbow-me/rainbowkit"; +import { RainbowKitProvider } from "@rainbow-me/rainbowkit"; import "@rainbow-me/rainbowkit/styles.css"; import { QueryClientProvider } from "@tanstack/react-query"; @@ -19,11 +19,7 @@ root.render( - + Date: Wed, 11 Oct 2023 18:00:16 -0700 Subject: [PATCH 11/18] Move price badges into header component --- .../src/ui/trade/TradeBody/TradeBody.tsx | 34 ++++++++++++------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx index 84f1ab70d..1e262196b 100644 --- a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx +++ b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx @@ -28,10 +28,7 @@ export function TradeBody({ hyperdrive }: PositionsTableProps): ReactElement {
- - {longPrice ? ( - - ) : null} +
@@ -79,10 +76,16 @@ function MarketBreadcrumbs({ hyperdrive }: { hyperdrive: Hyperdrive }) { ); } -function MarketHeader({ hyperdrive }: { hyperdrive: Hyperdrive }) { +function MarketHeader({ + hyperdrive, + longPrice, +}: { + hyperdrive: Hyperdrive; + longPrice: { price: bigint; formatted: string } | undefined; +}) { return ( -

-
+
+
@@ -98,8 +101,15 @@ function MarketHeader({ hyperdrive }: { hyperdrive: Hyperdrive }) {
- {hyperdrive.baseToken.symbol} / hy{hyperdrive.baseToken.symbol} -

+
+

+ {hyperdrive.baseToken.symbol} / hy{hyperdrive.baseToken.symbol} +

+ {longPrice ? ( + + ) : null} +
+
); } @@ -111,7 +121,7 @@ function PriceBadges({ longPrice: { price: bigint; formatted: string }; }) { return ( -
+
1 {hyperdrive.baseToken.symbol} ≈{" "} {formatBalance({ @@ -122,7 +132,7 @@ function PriceBadges({ ), decimals: hyperdrive.baseToken.decimals, - places: 3, + places: 6, })}{" "} hy{hyperdrive.baseToken.symbol}
@@ -131,7 +141,7 @@ function PriceBadges({ {formatBalance({ balance: longPrice.price, decimals: hyperdrive.baseToken.decimals, - places: 3, + places: 6, })}{" "} {hyperdrive.baseToken.symbol}
From 0a96a410a6b7fde07beb9f41bc09d686b4691706 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 18:05:44 -0700 Subject: [PATCH 12/18] Remove all text-neutral-content consumers --- .../src/ui/base/components/Disclosure/Disclosure.tsx | 2 +- .../ui/hyperdrive/TransactionTable/TransactionsTable.tsx | 5 +---- .../ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx | 2 +- .../hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx | 6 ++---- .../lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx | 4 ++-- .../hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx | 2 +- .../src/ui/markets/MarketsTable/MarketsTable.tsx | 2 +- .../src/ui/markets/YieldSourceLabel/YieldSourceLabel.tsx | 4 +--- apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx | 8 ++++---- .../ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx | 2 +- .../src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx | 2 +- .../ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx | 2 +- .../src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx | 2 +- .../src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx | 2 +- .../src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx | 2 +- .../src/ui/trade/TradeBody/TradeBody.tsx | 8 +++----- 16 files changed, 23 insertions(+), 32 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx b/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx index 59544c7b0..2a41d7485 100644 --- a/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx +++ b/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx @@ -10,7 +10,7 @@ export function Disclosure({ description, }: DisclosureProps): ReactElement { return ( -
+
{title} diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx index ba3283dad..f9bbbab30 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx @@ -55,10 +55,7 @@ export function TransactionTable({ {tableInstance.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( - + {header.isPlaceholder ? null : flexRender( diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx index 8c59c0230..0e0f4b4d1 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx @@ -77,7 +77,7 @@ export function CloseLongForm({ {/* You receive Section */} {long && (
-

You receive

+

You receive

{baseAmountOut ? `${formatBalance({ diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx index 2fd97c29e..99bd77be0 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx @@ -24,16 +24,14 @@ export function OpenLongPreview({

-

Matures on

+

Matures on

{new Date(Number(long.maturity * 1000n)).toLocaleDateString()}

-

- Claimable at maturity -

+

Claimable at maturity

{formatBalance({ balance: long.bondAmount, diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx index 90c97c91b..a2885ddbb 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx @@ -90,11 +90,11 @@ export function RemoveLiquidityForm({ {/* You receive Section */}

-

You receive

+

You receive

{formattedBaseAmountOut}

-

Withdrawal shares

+

Withdrawal shares

{formattedWithdrawalSharesOut}

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx index 20f45b5cf..103f12ae8 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx @@ -77,7 +77,7 @@ export function CloseShortForm({
{short && (
-

You receive

+

You receive

{baseAmountOut ? `${formatBalance({ diff --git a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx index d485ddd75..d9a90676e 100644 --- a/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/MarketsTable/MarketsTable.tsx @@ -61,7 +61,7 @@ export function MarketsTable(): ReactElement { {/* Markets sortable table */}

- - {yieldSource?.protocol} - + {yieldSource?.protocol} ); } diff --git a/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx b/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx index 6e586b364..30752ef90 100644 --- a/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx +++ b/apps/hyperdrive-trading/src/ui/onboarding/FAQ/FAQ.tsx @@ -5,12 +5,12 @@ export function FAQ(): ReactElement { return (
- FAQ + FAQ
What is a long?} description={ -

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut @@ -24,7 +24,7 @@ export function FAQ(): ReactElement { What is a short?} description={ -

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut @@ -38,7 +38,7 @@ export function FAQ(): ReactElement { How does LPing work?} description={ -

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx index 75a525b03..d281bc741 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx @@ -23,7 +23,7 @@ export function ClosedLongsTable({ return (

- - Transactions - + Transactions {transactionData && ( )} @@ -122,7 +120,7 @@ function PriceBadges({ }) { return (
-
+
1 {hyperdrive.baseToken.symbol} ≈{" "} {formatBalance({ balance: divideBigInt( @@ -136,7 +134,7 @@ function PriceBadges({ })}{" "} hy{hyperdrive.baseToken.symbol}
-
+
1 hy{hyperdrive.baseToken.symbol} ≈{" "} {formatBalance({ balance: longPrice.price, From 67a1b098b918501b03537241b588f1454f895af0 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Wed, 11 Oct 2023 18:32:55 -0700 Subject: [PATCH 13/18] Remove color coded even rows in Longs/Shorts/LP and Transactions table --- .../src/ui/base/components/tables/SortableGridTable.tsx | 4 ++-- .../src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx | 2 +- .../src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx | 2 +- .../src/ui/portfolio/ClosedLpTable/ClosedLpTable.tsx | 2 +- .../src/ui/portfolio/ClosedShortsTable/ClosedShortsTable.tsx | 2 +- .../src/ui/portfolio/OpenLongsTable/OpenLongsTable.tsx | 2 +- .../src/ui/portfolio/OpenLpPosition/OpenLpPosition.tsx | 2 +- .../src/ui/portfolio/OpenShortsTable/OpenShortsTable.tsx | 2 +- 8 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx b/apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx index 5f49fb748..4349de057 100644 --- a/apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx +++ b/apps/hyperdrive-trading/src/ui/base/components/tables/SortableGridTable.tsx @@ -206,8 +206,8 @@ function nextSortDirection( function DefaultEmptyTableElement() { return ( -
-

Nothing to show.

+
+

Nothing to show.

); } diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx index f9bbbab30..f54e45b99 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/TransactionTable/TransactionsTable.tsx @@ -70,7 +70,7 @@ export function TransactionTable({ {tableInstance.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => { diff --git a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx index d281bc741..0b9fd09b8 100644 --- a/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx +++ b/apps/hyperdrive-trading/src/ui/portfolio/ClosedLongsTable/ClosedLongsTable.tsx @@ -24,7 +24,7 @@ export function ClosedLongsTable({ return ( Date: Thu, 12 Oct 2023 09:07:16 -0700 Subject: [PATCH 14/18] More tw --- apps/hyperdrive-trading/tailwind.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/hyperdrive-trading/tailwind.config.js b/apps/hyperdrive-trading/tailwind.config.js index 167d9d0fd..5a474f2a0 100644 --- a/apps/hyperdrive-trading/tailwind.config.js +++ b/apps/hyperdrive-trading/tailwind.config.js @@ -64,6 +64,10 @@ module.exports = { primary: "#007eed", secondary: "#522dae", accent: "#f40000", + "--tab-radius": "0.4rem", + "--rounded-box": "0.4rem", // border radius rounded-box utility class, used in card and other large boxes + "--rounded-btn": "0.4rem", + "--rounded-badge": "0.4rem", "--btn-text-case": "none", // set default text transform for buttons }, }, From 92b7c104a9688cefa2956e99a6e2bd4ff2e0895d Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Thu, 12 Oct 2023 09:08:15 -0700 Subject: [PATCH 15/18] more stat --- .../src/ui/base/components/Disclosure/Disclosure.tsx | 2 +- apps/hyperdrive-trading/src/ui/base/components/Stat.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx b/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx index 2a41d7485..13913603b 100644 --- a/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx +++ b/apps/hyperdrive-trading/src/ui/base/components/Disclosure/Disclosure.tsx @@ -10,7 +10,7 @@ export function Disclosure({ description, }: DisclosureProps): ReactElement { return ( -
+
{title} diff --git a/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx b/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx index 7163535f1..ac4755578 100644 --- a/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx +++ b/apps/hyperdrive-trading/src/ui/base/components/Stat.tsx @@ -28,7 +28,7 @@ export function Stat({ > {label}

-
{value}
+
{value}
); } From b7efaaa544f2ab9e414c4ef16e5df22cffc0ef69 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Thu, 12 Oct 2023 09:10:48 -0700 Subject: [PATCH 16/18] more WEll --- apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx b/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx index 2e26cba3b..b4eb87e99 100644 --- a/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx +++ b/apps/hyperdrive-trading/src/ui/base/components/Well/Well.tsx @@ -19,10 +19,10 @@ export function Well({ }: PropsWithChildren): ReactElement { const isInteractive = !disabled && (interactive || onClick); const className = classNames( - "daisy-card p-4 daisy-card-bordered shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] bg-base-200/50", + "daisy-card p-4 daisy-card-bordered shadow-[rgba(50,_50,_105,_0.15)_0px_2px_5px_0px,_rgba(0,_0,_0,_0.05)_0px_1px_1px_0px] bg-base-200", { "w-full": block, - "hover:cursor-pointer hover:-translate-y-1 hover:shadow-lg transition duration-300 ease-in-out": + "hover:cursor-pointer hover:-translate-y-1 transition duration-300 hover:shadow-xl ease-in-out": isInteractive, }, ); From 564fa7c5e3b1916ccdc81caa50656e5340e036a0 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Thu, 12 Oct 2023 09:11:26 -0700 Subject: [PATCH 17/18] more token avatars --- .../src/ui/trade/TradeBody/TradeBody.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx index c8b303c2b..628d5bbf8 100644 --- a/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx +++ b/apps/hyperdrive-trading/src/ui/trade/TradeBody/TradeBody.tsx @@ -83,23 +83,23 @@ function MarketHeader({ }) { return (
-
-
-
+
+
+
{hyperdrive.baseToken.symbol}
-
-
+
+
hy{hyperdrive.baseToken.symbol}
-
+

{hyperdrive.baseToken.symbol} / hy{hyperdrive.baseToken.symbol}

@@ -120,7 +120,7 @@ function PriceBadges({ }) { return (
-
+
1 {hyperdrive.baseToken.symbol} ≈{" "} {formatBalance({ balance: divideBigInt( @@ -134,7 +134,7 @@ function PriceBadges({ })}{" "} hy{hyperdrive.baseToken.symbol}
-
+
1 hy{hyperdrive.baseToken.symbol} ≈{" "} {formatBalance({ balance: longPrice.price, From 307a4f89350d23b1b9c63b70c1eccd63e61bfa97 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Thu, 12 Oct 2023 09:11:42 -0700 Subject: [PATCH 18/18] Grayscale --- .../OpenLongModalButton/OpenLongModalButton.tsx | 17 +++++++---------- .../AddLiquidityModalButton.tsx | 13 ++++++------- .../OpenShortModalButton.tsx | 15 +++++++-------- 3 files changed, 20 insertions(+), 25 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx index 05550231d..eea1befc5 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongModalButton/OpenLongModalButton.tsx @@ -23,30 +23,27 @@ export function OpenLongModalButton({ {({ showModal }) => ( showModal()}>
- +

Open a long

- Earn{" "} - - {fixedAPR?.formatted || "-"}% APR - {" "} - on {hyperdrive.baseToken.symbol} + Earn {fixedAPR?.formatted || "-"}% APR on{" "} + {hyperdrive.baseToken.symbol}

- + Guaranteed fixed rate yield - + Minimal risk and maintenance - + Redeemable before term ends
{/* Using a div styled as a button here just as a visual cue. Don't use a real button here since the Well is interactive already, and doing so would create invalid dom nesting of buttons. */} -
+
Open long
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx index 1ef75bd82..74bc914d8 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityModalButton/AddLiquidityModalButton.tsx @@ -21,27 +21,26 @@ export function AddLiquidityModalButton({ {({ showModal }) => ( showModal()}>
- +

Add Liquidity

- Earn trading fees and{" "} - interest + Earn trading fees and interest

- + Deposit {hyperdrive.baseToken.symbol} to back trades - + Idle capital accrues vault APY - + No rollovers, easy-to-use
{/* Using a div styled as a button here just as a visual cue. Don't use a real button here since the Well is interactive already, and doing so would create invalid dom nesting of buttons. */} -
+
Add liquidity
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx index b50b58e18..bd2ebcd79 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortModalButton/OpenShortModalButton.tsx @@ -25,28 +25,27 @@ export function OpenShortModalButton({ {({ showModal }) => ( showModal()}>
- +

Open a short

- Earn{" "} - {vaultRate?.formatted}% APY{" "} - on {hyperdrive.baseToken.symbol} + Earn {vaultRate?.formatted}% APY on{" "} + {hyperdrive.baseToken.symbol}

- + Variable rate yield - + Profit from rising fixed rates - + Redeemable before term ends
{/* Using a div styled as a button here just as a visual cue. Don't use a real button here since the Well is interactive already, and doing so would create invalid dom nesting of buttons. */} -
+
Open short