feat: add some friendly info messages to adjusting views and improve …

…action descriptions
liquity · Mar 22, 2021 · 8cac4aa · 8cac4aa
1 parent 43089f7
commit 8cac4aa
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 77 deletions.
diff --git a/packages/dev-frontend/src/components/ActionDescription.tsx b/packages/dev-frontend/src/components/ActionDescription.tsx
@@ -27,5 +27,5 @@ export const ActionDescription: React.FC = ({ children }) => (
 );
 
 export const Amount: React.FC = ({ children }) => (
-  <Text sx={{ display: "inline-block", fontWeight: "bold" }}>{children}</Text>
+  <Text sx={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{children}</Text>
 );
diff --git a/packages/dev-frontend/src/components/Redemption/RedemptionManager.tsx b/packages/dev-frontend/src/components/Redemption/RedemptionManager.tsx
@@ -105,7 +105,9 @@ export const RedemptionManager: React.FC = () => {
             />
           )}
 
-          {(dirty || !canRedeem) && description}
+          {((dirty || !canRedeem) && description) || (
+            <ActionDescription>Enter the amount of {COIN} you'd like to redeem.</ActionDescription>
+          )}
 
           <Flex variant="layout.actions">
             <RedemptionAction

diff --git a/packages/dev-frontend/src/components/Stability/StabilityActionDescription.tsx b/packages/dev-frontend/src/components/Stability/StabilityActionDescription.tsx
@@ -15,7 +15,7 @@ export const StabilityActionDescription: React.FC<StabilityActionDescriptionProp
   change
 }) => {
   const collateralGain = originalDeposit.collateralGain.nonZero?.prettify(4).concat(" ETH");
-  const lqtyReward = originalDeposit.lqtyReward.nonZero?.prettify().concat(" " + GT);
+  const lqtyReward = originalDeposit.lqtyReward.nonZero?.prettify().concat(" ", GT);
 
   return (
     <ActionDescription>
@@ -24,14 +24,16 @@ export const StabilityActionDescription: React.FC<StabilityActionDescriptionProp
           You are depositing{" "}
           <Amount>
             {change.depositLUSD.prettify()} {COIN}
-          </Amount>
+          </Amount>{" "}
+          in the Stability Pool
         </>
       ) : (
         <>
           You are withdrawing{" "}
           <Amount>
             {change.withdrawLUSD.prettify()} {COIN}
-          </Amount>
+          </Amount>{" "}
+          to your wallet
         </>
       )}
       {(collateralGain || lqtyReward) && (

diff --git a/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx b/packages/dev-frontend/src/components/Stability/StabilityDepositEditor.tsx
@@ -1,13 +1,7 @@
 import React, { useState } from "react";
 import { Heading, Box, Card, Button } from "theme-ui";
 
-import {
-  Decimal,
-  Decimalish,
-  Difference,
-  StabilityDeposit,
-  LiquityStoreState
-} from "@liquity/lib-base";
+import { Decimal, Decimalish, StabilityDeposit, LiquityStoreState } from "@liquity/lib-base";
 
 import { useLiquitySelector } from "@liquity/lib-react";
 
@@ -36,7 +30,6 @@ export const StabilityDepositEditor: React.FC<StabilityDepositEditorProps> = ({
   const lusdBalance = useLiquitySelector(selectLUSDBalance);
   const editingState = useState<string>();
 
-  const pendingDepositChange = Difference.between(editedLUSD, originalDeposit.currentLUSD.nonZero);
   const edited = !editedLUSD.eq(originalDeposit.currentLUSD);
 
   const maxAmount = originalDeposit.currentLUSD.add(lusdBalance);
@@ -64,8 +57,6 @@ export const StabilityDepositEditor: React.FC<StabilityDepositEditorProps> = ({
           amount={editedLUSD.prettify()}
           maxAmount={maxAmount.toString()}
           maxedOut={maxedOut}
-          pendingAmount={pendingDepositChange.nonZero?.prettify()}
-          pendingColor={pendingDepositChange.positive ? "success" : "danger"}
           unit={COIN}
           {...{ editingState }}
           editedAmount={editedLUSD.toString(2)}

diff --git a/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx b/packages/dev-frontend/src/components/Stability/StabilityDepositManager.tsx
@@ -4,13 +4,16 @@ import { Button, Flex } from "theme-ui";
 import { Decimal, Decimalish, LiquityStoreState } from "@liquity/lib-base";
 import { LiquityStoreUpdate, useLiquityReducer, useLiquitySelector } from "@liquity/lib-react";
 
+import { COIN } from "../../strings";
+
 import { StabilityDepositEditor } from "./StabilityDepositEditor";
 import { StabilityDepositAction } from "./StabilityDepositAction";
 import { useStabilityView } from "./context/StabilityViewContext";
 import {
   selectForStabilityDepositChangeValidation,
   validateStabilityDepositChange
 } from "./validation/validateStabilityDepositChange";
+import { ActionDescription } from "../ActionDescription";
 
 const init = ({ stabilityDeposit }: LiquityStoreState) => ({
   originalDeposit: stabilityDeposit,
@@ -99,14 +102,23 @@ export const StabilityDepositManager: React.FC = () => {
     validationContext
   );
 
+  const makingNewDeposit = originalDeposit.isEmpty;
+
   return (
     <StabilityDepositEditor
       originalDeposit={originalDeposit}
       editedLUSD={editedLUSD}
       changePending={changePending}
       dispatch={dispatch}
     >
-      {description}
+      {description ??
+        (makingNewDeposit ? (
+          <ActionDescription>Enter the amount of {COIN} you'd like to deposit.</ActionDescription>
+        ) : (
+          <ActionDescription>
+            Increase or decrease the {COIN} amount to deposit or withdraw.
+          </ActionDescription>
+        ))}
 
       <Flex variant="layout.actions">
         <Button variant="cancel" onClick={handleCancel}>
@@ -118,7 +130,7 @@ export const StabilityDepositManager: React.FC = () => {
             Confirm
           </StabilityDepositAction>
         ) : (
-          <Button>Confirm</Button>
+          <Button disabled>Confirm</Button>
         )}
       </Flex>
     </StabilityDepositEditor>

diff --git a/packages/dev-frontend/src/components/Staking/StakingEditor.tsx b/packages/dev-frontend/src/components/Staking/StakingEditor.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Heading, Box, Card, Button } from "theme-ui";
 
-import { Decimal, Decimalish, Difference, LiquityStoreState, LQTYStake } from "@liquity/lib-base";
+import { Decimal, Decimalish, LiquityStoreState, LQTYStake } from "@liquity/lib-base";
 import { useLiquitySelector } from "@liquity/lib-react";
 
 import { COIN, GT } from "../../strings";
@@ -32,7 +32,6 @@ export const StakingEditor: React.FC<StakingEditorProps> = ({
   const { changePending } = useStakingView();
   const editingState = useState<string>();
 
-  const pendingStakeChange = Difference.between(editedLQTY, originalStake.stakedLQTY.nonZero);
   const edited = !editedLQTY.eq(originalStake.stakedLQTY);
 
   const maxAmount = originalStake.stakedLQTY.add(lqtyBalance);
@@ -60,8 +59,6 @@ export const StakingEditor: React.FC<StakingEditorProps> = ({
           amount={editedLQTY.prettify()}
           maxAmount={maxAmount.toString()}
           maxedOut={maxedOut}
-          pendingAmount={pendingStakeChange.nonZero?.prettify()}
-          pendingColor={pendingStakeChange.positive ? "success" : "danger"}
           unit={GT}
           {...{ editingState }}
           editedAmount={editedLQTY.toString(2)}

diff --git a/packages/dev-frontend/src/components/Staking/StakingManager.tsx b/packages/dev-frontend/src/components/Staking/StakingManager.tsx
@@ -63,48 +63,50 @@ const reduce = (state: StakeManagerState, action: StakeManagerAction): StakeMana
 const selectLQTYBalance = ({ lqtyBalance }: LiquityStoreState) => lqtyBalance;
 
 type StakingManagerActionDescriptionProps = {
-  stake: LQTYStake;
+  originalStake: LQTYStake;
   change: LQTYStakeChange<Decimal>;
 };
 
 const StakingManagerActionDescription: React.FC<StakingManagerActionDescriptionProps> = ({
-  stake: { collateralGain, lusdGain },
+  originalStake,
   change
 }) => {
-  const gains = [
-    collateralGain.nonZero?.prettify(4).concat(" ETH"),
-    lusdGain.nonZero?.prettify().concat(" ", COIN)
-  ].filter(x => x);
+  const stakeLQTY = change.stakeLQTY?.prettify().concat(" ", GT);
+  const unstakeLQTY = change.unstakeLQTY?.prettify().concat(" ", GT);
+  const collateralGain = originalStake.collateralGain.nonZero?.prettify(4).concat(" ETH");
+  const lusdGain = originalStake.lusdGain.nonZero?.prettify().concat(" ", COIN);
+
+  if (originalStake.isEmpty && stakeLQTY) {
+    return (
+      <ActionDescription>
+        You are staking <Amount>{stakeLQTY}</Amount>.
+      </ActionDescription>
+    );
+  }
 
   return (
     <ActionDescription>
-      {change.stakeLQTY && (
+      {stakeLQTY && (
         <>
-          You are staking{" "}
-          <Amount>
-            {change.stakeLQTY.prettify()} {GT}
-          </Amount>
+          You are adding <Amount>{stakeLQTY}</Amount> to your stake
         </>
       )}
-      {change.unstakeLQTY && (
+      {unstakeLQTY && (
         <>
-          You are withdrawing{" "}
-          <Amount>
-            {change.unstakeLQTY.prettify()} {GT}
-          </Amount>
+          You are withdrawing <Amount>{unstakeLQTY}</Amount> to your wallet
         </>
       )}
-      {gains.length > 0 && (
+      {(collateralGain || lusdGain) && (
         <>
           {" "}
           and claiming{" "}
-          {gains.length === 2 ? (
+          {collateralGain && lusdGain ? (
             <>
-              <Amount>{gains[0]}</Amount> and <Amount>{gains[1]}</Amount>
+              <Amount>{collateralGain}</Amount> and <Amount>{lusdGain}</Amount>
             </>
           ) : (
             <>
-              <Amount>{gains[0]}</Amount>
+              <Amount>{collateralGain ?? lusdGain}</Amount>
             </>
           )}
         </>
@@ -120,7 +122,9 @@ export const StakingManager: React.FC = () => {
   const lqtyBalance = useLiquitySelector(selectLQTYBalance);
 
   const change = originalStake.whatChanged(editedLQTY);
-  const [validChange, description] = change?.stakeLQTY?.gt(lqtyBalance)
+  const [validChange, description] = !change
+    ? [undefined, undefined]
+    : change.stakeLQTY?.gt(lqtyBalance)
     ? [
         undefined,
         <ErrorDescription>
@@ -131,11 +135,20 @@ export const StakingManager: React.FC = () => {
           .
         </ErrorDescription>
       ]
-    : [change, change && <StakingManagerActionDescription stake={originalStake} change={change} />];
+    : [change, <StakingManagerActionDescription originalStake={originalStake} change={change} />];
+
+  const makingNewStake = originalStake.isEmpty;
 
   return (
     <StakingEditor title={"Staking"} {...{ originalStake, editedLQTY, dispatch }}>
-      {description}
+      {description ??
+        (makingNewStake ? (
+          <ActionDescription>Enter the amount of {GT} you'd like to stake.</ActionDescription>
+        ) : (
+          <ActionDescription>
+            Increase or decrease the {GT} amount to stake or withdraw.
+          </ActionDescription>
+        ))}
 
       <Flex variant="layout.actions">
         <Button

diff --git a/packages/dev-frontend/src/components/Trove/TroveEditor.tsx b/packages/dev-frontend/src/components/Trove/TroveEditor.tsx
@@ -24,7 +24,7 @@ const gasRoomETH = Decimal.from(0.1);
 type TroveEditorProps = {
   original: Trove;
   edited: Trove;
-  fee: Decimal | undefined;
+  fee: Decimal;
   borrowingRate: Decimal;
   changePending: boolean;
   dispatch: (
@@ -49,10 +49,6 @@ export const TroveEditor: React.FC<TroveEditorProps> = ({
 
   const feePct = new Percent(borrowingRate);
 
-  const pendingCollateral = Difference.between(edited.collateral, original.collateral.nonZero)
-    .nonZero;
-  const pendingDebt = Difference.between(edited.debt, original.debt.nonZero).nonZero;
-
   const originalCollateralRatio = !original.isEmpty ? original.collateralRatio(price) : undefined;
   const collateralRatio = !edited.isEmpty ? edited.collateralRatio(price) : undefined;
   const collateralRatioChange = Difference.between(collateralRatio, originalCollateralRatio);
@@ -61,11 +57,13 @@ export const TroveEditor: React.FC<TroveEditorProps> = ({
   const maxCollateral = original.collateral.add(maxEth);
   const collateralMaxedOut = edited.collateral.eq(maxCollateral);
 
+  const dirty = !edited.equals(original);
+
   return (
     <Card>
       <Heading>
         Trove
-        {!edited.equals(original) && !changePending && (
+        {dirty && !changePending && (
           <Button
             variant="titleIcon"
             sx={{ ":enabled:hover": { color: "danger" } }}
@@ -83,8 +81,6 @@ export const TroveEditor: React.FC<TroveEditorProps> = ({
           amount={edited.collateral.prettify(4)}
           maxAmount={maxCollateral.toString()}
           maxedOut={collateralMaxedOut}
-          pendingAmount={pendingCollateral?.prettify()}
-          pendingColor={pendingCollateral?.positive ? "success" : "danger"}
           unit="ETH"
           {...{ editingState }}
           editedAmount={edited.collateral.toString(4)}
@@ -97,8 +93,6 @@ export const TroveEditor: React.FC<TroveEditorProps> = ({
           label="Debt"
           inputId="trove-debt"
           amount={edited.debt.prettify()}
-          pendingAmount={pendingDebt?.prettify()}
-          pendingColor={pendingDebt?.positive ? "danger" : "success"}
           unit={COIN}
           {...{ editingState }}
           editedAmount={edited.debt.toString(2)}
@@ -116,15 +110,13 @@ export const TroveEditor: React.FC<TroveEditorProps> = ({
           />
         )}
 
-        {fee && (
-          <StaticRow
-            label="Fee"
-            inputId="trove-borrowing-fee"
-            amount={fee.toString(2)}
-            pendingAmount={feePct.toString(2)}
-            unit={COIN}
-          />
-        )}
+        <StaticRow
+          label="Fee"
+          inputId="trove-borrowing-fee"
+          amount={fee.toString(2)}
+          pendingAmount={feePct.toString(2)}
+          unit={COIN}
+        />
 
         <CollateralRatio value={collateralRatio} change={collateralRatioChange} />