diff --git a/packages/dev-frontend/src/components/ActionDescription.tsx b/packages/dev-frontend/src/components/ActionDescription.tsx index 208ffee71..21974dbc4 100644 --- a/packages/dev-frontend/src/components/ActionDescription.tsx +++ b/packages/dev-frontend/src/components/ActionDescription.tsx @@ -1,7 +1,5 @@ import { Box, Flex, Text } from "theme-ui"; -import { Icon } from "./Icon"; - export const ActionDescription: React.FC = ({ children }) => ( ( p: 3, border: 1, - borderRadius: "8px", - borderColor: "accent", - boxShadow: 2, - bg: "rgba(46, 182, 234, 0.05)" + borderColor: "transparent" }} > - - {children} + {children} ); diff --git a/packages/dev-frontend/src/components/Bonds/views/actioning/Actioning.tsx b/packages/dev-frontend/src/components/Bonds/views/actioning/Actioning.tsx index 8b94047d6..d3cde7fe6 100644 --- a/packages/dev-frontend/src/components/Bonds/views/actioning/Actioning.tsx +++ b/packages/dev-frontend/src/components/Bonds/views/actioning/Actioning.tsx @@ -8,7 +8,7 @@ import type { EventType } from "../../../HorizontalTimeline"; import * as l from "../../lexicon"; import { Cancel } from "./actions/cancel/Cancel"; import { Claim } from "./actions/claim/Claim"; -import { Warning } from "../../../Warning"; +import { WarningBubble } from "../../../WarningBubble"; import { ReactModal } from "../../../ReactModal"; import { percentify } from "../../utils"; import { Decimal } from "@liquity/lib-base"; @@ -144,10 +144,14 @@ export const Actioning: React.FC = () => { {view === "CLAIMING" && bond.claimNowReturn < 0 && ( - You are claiming a bond which currently has a negative return + + You are claiming a bond which currently has a negative return + )} {view === "CANCELLING" && bond.accrued.gte(bond.breakEvenAccrual) && ( - Your are cancelling a bond which has accrued a positive return + + Your are cancelling a bond which has accrued a positive return + )} diff --git a/packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx b/packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx index 8272c16dc..0b179ebae 100644 --- a/packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx +++ b/packages/dev-frontend/src/components/Bonds/views/actioning/actions/cancel/Cancel.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Flex, Button, Text, Spinner } from "theme-ui"; -import { ActionDescription } from "../../../../../ActionDescription"; +import { Flex, Button, Spinner } from "theme-ui"; +import { ActionDescription, Amount } from "../../../../../ActionDescription"; import { useBondView } from "../../../../context/BondViewContext"; export const Cancel: React.FC = () => { @@ -21,9 +21,8 @@ export const Cancel: React.FC = () => { return ( <> - You will receive your bonded{" "} - {bond.deposit.prettify(2)} LUSD back and forgo{" "} - {bond.accrued.shorten()} bLUSD + You will receive your bonded {bond.deposit.prettify(2)} LUSD back and forgo{" "} + {bond.accrued.shorten()} bLUSD diff --git a/packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx b/packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx index 1e2e5e3c4..91bdb7202 100644 --- a/packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx +++ b/packages/dev-frontend/src/components/Bonds/views/actioning/actions/claim/Claim.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Flex, Button, Text, Spinner } from "theme-ui"; -import { ActionDescription } from "../../../../../ActionDescription"; +import { Flex, Button, Spinner } from "theme-ui"; +import { ActionDescription, Amount } from "../../../../../ActionDescription"; import { useBondView } from "../../../../context/BondViewContext"; export const Claim: React.FC = () => { @@ -21,9 +21,8 @@ export const Claim: React.FC = () => { return ( <> - You will receive {bond.accrued.prettify(2)} bLUSD{" "} - and forgo your bonded{" "} - {bond.deposit.prettify(2)} LUSD + You will receive {bond.accrued.prettify(2)} bLUSD and forgo your bonded{" "} + {bond.deposit.prettify(2)} LUSD diff --git a/packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx b/packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx index 52d39ebe4..34319c715 100644 --- a/packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx +++ b/packages/dev-frontend/src/components/Bonds/views/creating/Details.tsx @@ -7,11 +7,11 @@ import { Record } from "../../Record"; import { InfoIcon } from "../../../InfoIcon"; import { useBondView } from "../../context/BondViewContext"; import { HorizontalTimeline, Label, SubLabel, UNKNOWN_DATE } from "../../../HorizontalTimeline"; -import { ActionDescription } from "../../../ActionDescription"; +import { ActionDescription, Amount } from "../../../ActionDescription"; import { EXAMPLE_NFT } from "../../context/BondViewProvider"; import * as l from "../../lexicon"; import { useWizard } from "../../../Wizard/Context"; -import { Warning } from "../../../Warning"; +import { WarningBubble } from "../../../WarningBubble"; import type { CreateBondPayload } from "../../context/transitions"; import { dateWithoutHours, @@ -25,7 +25,6 @@ import { } from "../../utils"; import { HorizontalSlider } from "../../../HorizontalSlider"; import { ErrorDescription } from "../../../ErrorDescription"; -import { Amount } from "../../../ActionDescription"; import { InfiniteEstimate } from "../InfiniteEstimation"; import { LearnMoreLink } from "../../../Tooltip"; @@ -269,11 +268,11 @@ export const Details: React.FC = ({ onBack }) => { /> {!protocolInfo.hasMarketPremium && ( - + When the bLUSD market price is less than 3% above the floor price, it's not profitable to bond. Buying bLUSD from the market currently generates a higher return than bonding.{" "} - + )} {!isInfiniteBondApproved && ( @@ -283,14 +282,16 @@ export const Details: React.FC = ({ onBack }) => { )} {statuses.APPROVE === "FAILED" && ( - Failed to approve spend of LUSD. Please try again. + Failed to approve spend of LUSD. Please try again. )} - {statuses.CREATE === "FAILED" && Failed to create bond. Please try again.} + {statuses.CREATE === "FAILED" && ( + Failed to create bond. Please try again. + )} {isInfiniteBondApproved && ( - You are bonding {deposit.prettify(2)} LUSD + You are bonding {deposit.prettify(2)} LUSD )} diff --git a/packages/dev-frontend/src/components/Bonds/views/idle/FilteredBondList.tsx b/packages/dev-frontend/src/components/Bonds/views/idle/FilteredBondList.tsx index 5c4ada8b0..bd4906dfd 100644 --- a/packages/dev-frontend/src/components/Bonds/views/idle/FilteredBondList.tsx +++ b/packages/dev-frontend/src/components/Bonds/views/idle/FilteredBondList.tsx @@ -3,7 +3,7 @@ import { useBondView } from "../../context/BondViewContext"; import type { BondStatus, Bond as BondType } from "../../context/transitions"; import { Bond } from "./Bond"; import { OptimisticBond } from "./OptimisticBond"; -import { ActionDescription } from "../../../ActionDescription"; +import { InfoBubble } from "../../../InfoBubble"; import { Box } from "theme-ui"; type BondFilter = "pending" | "claimed" | "cancelled"; @@ -45,9 +45,9 @@ export const FilteredBondList = () => { {!showOptimisticBond && filteredBonds.length === 0 && ( - + You don't have any {bondFilter !== "all" ? bondFilter : null} bonds - + )} diff --git a/packages/dev-frontend/src/components/Bonds/views/managing/WithdrawPane.tsx b/packages/dev-frontend/src/components/Bonds/views/managing/WithdrawPane.tsx index 1de3f7942..80169116d 100644 --- a/packages/dev-frontend/src/components/Bonds/views/managing/WithdrawPane.tsx +++ b/packages/dev-frontend/src/components/Bonds/views/managing/WithdrawPane.tsx @@ -5,7 +5,7 @@ import { Amount } from "../../../ActionDescription"; import { ErrorDescription } from "../../../ErrorDescription"; import { Icon } from "../../../Icon"; import { DisabledEditableAmounts, DisabledEditableRow, EditableRow } from "../../../Trove/Editor"; -import { Warning } from "../../../Warning"; +import { WarningBubble } from "../../../WarningBubble"; import { useBondView } from "../../context/BondViewContext"; import { ApprovePressedPayload, BLusdAmmTokenIndex } from "../../context/transitions"; import { PoolDetails } from "./PoolDetails"; @@ -135,10 +135,10 @@ export const WithdrawPane: React.FC = () => { return ( <> {stakedLpTokenBalance?.nonZero && ( - + You {lpTokenBalance?.nonZero && " also "} have {stakedLpTokenBalance.shorten()} staked LP tokens. Unstake them to withdraw liquidity from them. - + )} { ); -};; +}; diff --git a/packages/dev-frontend/src/components/InfoBubble.tsx b/packages/dev-frontend/src/components/InfoBubble.tsx new file mode 100644 index 000000000..fcd4978c1 --- /dev/null +++ b/packages/dev-frontend/src/components/InfoBubble.tsx @@ -0,0 +1,27 @@ +import { Box, Flex, Text } from "theme-ui"; + +import { Icon } from "./Icon"; + +export const InfoBubble: React.FC = ({ children }) => ( + + + + {children} + + +); diff --git a/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx b/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx index a7b8bd256..4dff1b5b9 100644 --- a/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx +++ b/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx @@ -6,7 +6,7 @@ import { LiquityStoreUpdate, useLiquityReducer, useLiquitySelector } from "@liqu import { COIN } from "../../strings"; -import { ActionDescription } from "../ActionDescription"; +import { InfoBubble } from "../InfoBubble"; import { useMyTransactionState } from "../Transaction"; import { StabilityDepositEditor } from "./StabilityDepositEditor"; @@ -132,9 +132,9 @@ export const StabilityDepositManager: React.FC = () => { > {description ?? (makingNewDeposit ? ( - Enter the amount of {COIN} you'd like to deposit. + Enter the amount of {COIN} you'd like to deposit. ) : ( - Adjust the {COIN} amount to deposit or withdraw. + Adjust the {COIN} amount to deposit or withdraw. ))} diff --git a/packages/dev-frontend/src/components/Staking/StakingManager.tsx b/packages/dev-frontend/src/components/Staking/StakingManager.tsx index 0c84fddd6..e9af63ce1 100644 --- a/packages/dev-frontend/src/components/Staking/StakingManager.tsx +++ b/packages/dev-frontend/src/components/Staking/StakingManager.tsx @@ -18,6 +18,7 @@ import { StakingEditor } from "./StakingEditor"; import { StakingManagerAction } from "./StakingManagerAction"; import { ActionDescription, Amount } from "../ActionDescription"; import { ErrorDescription } from "../ErrorDescription"; +import { InfoBubble } from "../InfoBubble"; const init = ({ lqtyStake }: LiquityStoreState) => ({ originalStake: lqtyStake, @@ -143,9 +144,9 @@ export const StakingManager: React.FC = () => { {description ?? (makingNewStake ? ( - Enter the amount of {GT} you'd like to stake. + Enter the amount of {GT} you'd like to stake. ) : ( - Adjust the {GT} amount to stake or withdraw. + Adjust the {GT} amount to stake or withdraw. ))} diff --git a/packages/dev-frontend/src/components/Tooltip.tsx b/packages/dev-frontend/src/components/Tooltip.tsx index c1e295eff..03818e0f7 100644 --- a/packages/dev-frontend/src/components/Tooltip.tsx +++ b/packages/dev-frontend/src/components/Tooltip.tsx @@ -2,7 +2,6 @@ import Tippy from "@tippyjs/react"; import type { TippyProps } from "@tippyjs/react"; import React from "react"; import { Box, Card, Link } from "theme-ui"; -import { Icon } from "./Icon"; export type TooltipProps = Pick & { message: React.ReactNode; @@ -11,10 +10,10 @@ export type TooltipProps = Pick & { export type LearnMoreLinkProps = Pick; -export const LearnMoreLink: React.FC = ({ link }) => { +export const LearnMoreLink: React.FC = ({ link, children }) => { return ( - Learn more + {children ?? <>Learn more} ); }; diff --git a/packages/dev-frontend/src/components/Trove/Adjusting.tsx b/packages/dev-frontend/src/components/Trove/Adjusting.tsx index 9fcaa1d90..cb1e6af23 100644 --- a/packages/dev-frontend/src/components/Trove/Adjusting.tsx +++ b/packages/dev-frontend/src/components/Trove/Adjusting.tsx @@ -11,7 +11,7 @@ import { import { useLiquitySelector } from "@liquity/lib-react"; import { useStableTroveChange } from "../../hooks/useStableTroveChange"; -import { ActionDescription } from "../ActionDescription"; +import { InfoBubble } from "../InfoBubble"; import { useMyTransactionState } from "../Transaction"; import { TroveAction } from "./TroveAction"; import { useTroveView } from "./context/TroveViewContext"; @@ -19,7 +19,7 @@ import { COIN } from "../../strings"; import { Icon } from "../Icon"; import { InfoIcon } from "../InfoIcon"; import { LoadingOverlay } from "../LoadingOverlay"; -import { CollateralRatio } from "./CollateralRatio"; +import { CollateralRatio, CollateralRatioInfoBubble } from "./CollateralRatio"; import { EditableRow, StaticRow } from "./Editor"; import { ExpensiveTroveChangeWarning, GasEstimationState } from "./ExpensiveTroveChangeWarning"; import { @@ -253,11 +253,10 @@ export const Adjusting: React.FC = () => { /> + {description ?? ( - - Adjust your Trove by modifying its collateral, debt, or both. - + Adjust your Trove by modifying its collateral, debt, or both. )} = ({ value, change } /> + + ); +}; + +type CollateralRatioInfoBubbleProps = { + value?: Decimal; + change?: Difference; +}; + +export const CollateralRatioInfoBubble: React.FC = ({ value }) => { + return ( + <> {value?.lt(1.5) && ( - - Keeping your CR above 150% can help avoid liquidation under Recovery Mode. - + + Keep your collateral ratio above 150% to avoid being{" "} + + liquidated + {" "} + under{" "} + + Recovery Mode. + + )} ); diff --git a/packages/dev-frontend/src/components/Trove/ExpensiveTroveChangeWarning.tsx b/packages/dev-frontend/src/components/Trove/ExpensiveTroveChangeWarning.tsx index 9c439385a..21b39029a 100644 --- a/packages/dev-frontend/src/components/Trove/ExpensiveTroveChangeWarning.tsx +++ b/packages/dev-frontend/src/components/Trove/ExpensiveTroveChangeWarning.tsx @@ -4,7 +4,7 @@ import { Decimal, TroveChange } from "@liquity/lib-base"; import { PopulatedEthersLiquityTransaction } from "@liquity/lib-ethers"; import { useLiquity } from "../../hooks/LiquityContext"; -import { Warning } from "../Warning"; +import { WarningBubble } from "../WarningBubble"; export type GasEstimationState = | { type: "idle" | "inProgress" } @@ -70,15 +70,15 @@ export const ExpensiveTroveChangeWarning: React.FC= 200000 ) { return troveChange.type === "creation" ? ( - + The cost of opening a Trove in this collateral ratio range is rather high. To lower it, choose a slightly different collateral ratio. - + ) : ( - + The cost of adjusting a Trove into this collateral ratio range is rather high. To lower it, choose a slightly different collateral ratio. - + ); } diff --git a/packages/dev-frontend/src/components/Trove/Opening.tsx b/packages/dev-frontend/src/components/Trove/Opening.tsx index e69d8475d..885bed2b7 100644 --- a/packages/dev-frontend/src/components/Trove/Opening.tsx +++ b/packages/dev-frontend/src/components/Trove/Opening.tsx @@ -1,5 +1,7 @@ +/** @jsxImportSource theme-ui */ import React, { useCallback, useEffect, useState } from "react"; import { Flex, Button, Box, Card, Heading, Spinner } from "theme-ui"; +import { Link } from "react-router-dom"; import { LiquityStoreState, Decimal, @@ -11,7 +13,7 @@ import { import { useLiquitySelector } from "@liquity/lib-react"; import { useStableTroveChange } from "../../hooks/useStableTroveChange"; -import { ActionDescription } from "../ActionDescription"; +import { InfoBubble } from "../InfoBubble"; import { useMyTransactionState } from "../Transaction"; import { TroveAction } from "./TroveAction"; import { useTroveView } from "./context/TroveViewContext"; @@ -19,13 +21,14 @@ import { COIN } from "../../strings"; import { Icon } from "../Icon"; import { InfoIcon } from "../InfoIcon"; import { LoadingOverlay } from "../LoadingOverlay"; -import { CollateralRatio } from "./CollateralRatio"; +import { CollateralRatio, CollateralRatioInfoBubble } from "./CollateralRatio"; import { EditableRow, StaticRow } from "./Editor"; import { ExpensiveTroveChangeWarning, GasEstimationState } from "./ExpensiveTroveChangeWarning"; import { selectForTroveChangeValidation, validateTroveChange } from "./validation/validateTroveChange"; +import { LearnMoreLink } from "../Tooltip"; const selector = (state: LiquityStoreState) => { const { fees, price, accountBalance } = state; @@ -189,10 +192,23 @@ export const Opening: React.FC = () => { + + Keep your collateral ratio above the{" "} + + riskiest Troves + {" "} + to avoid being{" "} + + redeemed. + + + + + {description ?? ( - + Start by entering the amount of ETH you'd like to deposit as collateral. - + )} ({ trove, price }); @@ -42,6 +42,7 @@ export const ReadOnlyTrove: React.FC = () => { /> + diff --git a/packages/dev-frontend/src/components/Trove/TroveEditor.tsx b/packages/dev-frontend/src/components/Trove/TroveEditor.tsx index db66ab2a6..cc1fd0f85 100644 --- a/packages/dev-frontend/src/components/Trove/TroveEditor.tsx +++ b/packages/dev-frontend/src/components/Trove/TroveEditor.tsx @@ -32,6 +32,7 @@ type TroveEditorProps = { const select = ({ price }: LiquityStoreState) => ({ price }); +// XXX Only used for closing Troves now export const TroveEditor: React.FC = ({ children, original, diff --git a/packages/dev-frontend/src/components/Trove/TroveManager.tsx b/packages/dev-frontend/src/components/Trove/TroveManager.tsx index b6ba2a4a1..e4112109f 100644 --- a/packages/dev-frontend/src/components/Trove/TroveManager.tsx +++ b/packages/dev-frontend/src/components/Trove/TroveManager.tsx @@ -5,7 +5,7 @@ import { LiquityStoreState, Decimal, Trove, Decimalish, LUSD_MINIMUM_DEBT } from import { LiquityStoreUpdate, useLiquityReducer, useLiquitySelector } from "@liquity/lib-react"; -import { ActionDescription } from "../ActionDescription"; +import { InfoBubble } from "../InfoBubble"; import { useMyTransactionState } from "../Transaction"; import { TroveEditor } from "./TroveEditor"; @@ -155,6 +155,7 @@ type TroveManagerProps = { debt?: Decimalish; }; +// XXX Only used for closing Troves now export const TroveManager: React.FC = ({ collateral, debt }) => { const [{ original, edited, changePending }, dispatch] = useLiquityReducer(reduce, init); const { fees, validationContext } = useLiquitySelector(select); @@ -216,13 +217,11 @@ export const TroveManager: React.FC = ({ collateral, debt }) > {description ?? (openingNewTrove ? ( - + Start by entering the amount of ETH you'd like to deposit as collateral. - + ) : ( - - Adjust your Trove by modifying its collateral, debt, or both. - + Adjust your Trove by modifying its collateral, debt, or both. ))} diff --git a/packages/dev-frontend/src/components/Warning.tsx b/packages/dev-frontend/src/components/WarningBubble.tsx similarity index 89% rename from packages/dev-frontend/src/components/Warning.tsx rename to packages/dev-frontend/src/components/WarningBubble.tsx index f1f683666..7cbd1dfa5 100644 --- a/packages/dev-frontend/src/components/Warning.tsx +++ b/packages/dev-frontend/src/components/WarningBubble.tsx @@ -2,7 +2,7 @@ import { Box, Flex, Text } from "theme-ui"; import { Icon } from "./Icon"; -export const Warning: React.FC = ({ children }) => ( +export const WarningBubble: React.FC = ({ children }) => (