Add Heading & Value on Strategy

components/sidebar/context/strategy/SidebarStrategy.vue

@@ -13,7 +13,7 @@
     </SidebarContextHeader>
 
     <div class="h-full overflow-y-scroll scrollbar-hover flex flex-col">
-      <div class="mx-auto mb-9" style="width: 296px">
+      <div class="mx-auto mb-6" style="width: 296px">
         <div
           class="flex-shrink-0 font-medium prose prose-sm text-primary-gray"
           v-if="activeStrategy.schema.details"
@@ -26,6 +26,7 @@
             <div class="flex-1">
               <div v-for="(input, index) in inputs" :key="index" class="mb-6">
                 <input-amount
+                  v-if="input.type === 'input-with-token'"
                   :key="index"
                   :value="input.value"
                   :token-key="input.token ? input.token.key : 'eth'"
@@ -45,6 +46,18 @@
                     }
                   "
                 />
+                <SidebarContextHeading
+                  v-else-if="input.type === 'heading'"
+                  :key="index"
+                >
+                  {{ input.name }}
+                </SidebarContextHeading>
+
+                <div v-else-if="input.type === 'value'" :key="index">
+                  <value-display :label="input.name">
+                    {{ input.value }}
+                  </value-display>
+                </div>
               </div>
             </div>
 
@@ -62,8 +75,6 @@
               >
                 {{ activeStrategy.schema.submitText || "Submit" }}
               </ButtonCTA>
-
-              <p class="text-xs text-[#9FB0C9] mt-2.5 text-center">Instadapp does not charge a fee for this operation</p>
             </div>
           </div>
         </div>
@@ -80,8 +91,9 @@ import { useStrategy } from "~/composables/useStrategy";
 import InputAmount from "~/components/common/input/InputAmount.vue";
 import { useToken } from "~/composables/useToken";
 import ButtonCTA from "~/components/common/input/ButtonCTA.vue";
+import ValueDisplay from "../components/ValueDisplay.vue";
 export default defineComponent({
-  components: { InputAmount, ButtonCTA },
+  components: { InputAmount, ButtonCTA, ValueDisplay },
   props: {
     protocol: {
       type: String,

composables/useStrategy.ts

@@ -24,6 +24,7 @@ import { useToken } from "./useToken";
 import { useWeb3 } from "./useWeb3";
 import { useBigNumber } from "./useBigNumber";
 import tokenIdMapping from "~/constant/tokenIdMapping";
+import { useFormatting } from "./useFormatting";
 
 export function useStrategy(defineStrategy: DefineStrategy) {
   const { web3, networkName, account } = useWeb3();
@@ -33,6 +34,8 @@ export function useStrategy(defineStrategy: DefineStrategy) {
   const { valInt, getTokenByKey } = useToken();
   const { emitEvent } = useEventBus();
   const { toBN } = useBigNumber();
+  const formatting = useFormatting();
+
   const {
     showPendingTransaction,
     showConfirmedTransaction
@@ -91,7 +94,8 @@ export function useStrategy(defineStrategy: DefineStrategy) {
       toBN,
       position,
       positionExtra,
-      tokenIdMapping
+      tokenIdMapping,
+      formatting,
     });
   });
 

core/strategies/helpers/index.ts

@@ -4,14 +4,12 @@ import slugify from "slugify";
 import { Strategy } from "./strategy";
 import BigNumber from "bignumber.js";
 import tokenIdMapping from "~/constant/tokenIdMapping";
-
+import { useFormatting } from "~/composables/useFormatting";
 export interface IStrategyContext {
   dsa: DSA;
   web3: Web3;
   inputs: IStrategyInput<StrategyInputType>[];
 
-
-
   // TODO: add types in useStrategy.ts
   dsaBalances?: { [address: string]: IStrategyToken };
   userBalances?: { [address: string]: IStrategyToken };
@@ -23,7 +21,7 @@ export interface IStrategyContext {
   variables?: { [key: string]: any };
   toBN?: (value: any) => BigNumber;
   tokenIdMapping?: typeof tokenIdMapping;
-  
+  formatting?: ReturnType<typeof useFormatting>;
 }
 
 export interface IStrategyToken {
@@ -38,16 +36,22 @@ export interface IStrategyToken {
 }
 
 export enum StrategyInputType {
-  INPUT = "input",
+  // INPUT = "input",
-  INPUT_WITH_TOKEN = "input-with-token"
+  INPUT_WITH_TOKEN = "input-with-token",
+
+  HEADING = "heading",
+  VALUE = "value"
 }
 
 export type StrategyInputParameterMap = {
-  [StrategyInputType.INPUT]: {};
+  // [StrategyInputType.INPUT]: {};
 
   [StrategyInputType.INPUT_WITH_TOKEN]: {
     token?: IStrategyToken;
   };
+
+  [StrategyInputType.HEADING]: {};
+  [StrategyInputType.VALUE]: {};
 };
 
 export interface IStrategyInput<InputType extends StrategyInputType> {
@@ -68,6 +72,11 @@ export interface IStrategyInput<InputType extends StrategyInputType> {
   ) => string | void;
 
   defaults?: (context: Omit<IStrategyContext, "inputs">) => object;
+  update?: (
+    context: IStrategyContext & {
+      input: IStrategyInput<InputType> & StrategyInputParameterMap[InputType];
+    }
+  ) => void;
 
   value?: any;
 

core/strategies/helpers/strategy.ts

@@ -177,6 +177,11 @@ export class Strategy {
     for (const listener of this.listeners) {
       await listener(this);
     }
+
+    this.inputs.forEach(input => input.update?.({
+      ...this.getContext(),
+      input
+    }));
   }
 
   onUpdated(cb) {

core/strategies/protocols/liquity/close-trove.ts

@@ -1,4 +1,9 @@
-import { defineStrategy, StrategyProtocol } from "../../helpers";
+import {
+  defineStrategy,
+  StrategyProtocol,
+  StrategyInputType,
+  defineInput
+} from "../../helpers";
 
 export default defineStrategy({
   protocol: StrategyProtocol.LIQUITY,
@@ -14,7 +19,47 @@ export default defineStrategy({
     <li>Close Trove</li>
   </ul>`,
 
-  inputs: [],
+  inputs: [
+    defineInput({
+      type: StrategyInputType.HEADING,
+      name: "Payback"
+    }),
+    defineInput({
+      type: StrategyInputType.VALUE,
+      name: "Net Debt",
+      update: ({ position, positionExtra, input, formatting, toBN }) => {
+        const troveOverallDetails = positionExtra["troveOverallDetails"];
+
+        const netDebt = toBN(position.debt).minus(
+          troveOverallDetails.liquidationReserve
+        );
+
+        input.value = `${formatting.formatDecimal(netDebt, 2)} LUSD`;
+      }
+    }),
+    defineInput({
+      type: StrategyInputType.HEADING,
+      name: "Withdraw"
+    }),
+    defineInput({
+      type: StrategyInputType.VALUE,
+      name: "Collateral",
+      update: ({ position, input, formatting }) => {
+        input.value = `${formatting.formatDecimal(position.collateral, 2)} ETH`;
+      }
+    }),
+    defineInput({
+      type: StrategyInputType.VALUE,
+      name: "Liquidation Reserve",
+      update: ({ positionExtra, input, formatting }) => {
+        const troveOverallDetails = positionExtra["troveOverallDetails"];
+        input.value = `${formatting.formatDecimal(
+          troveOverallDetails.liquidationReserve,
+          2
+        )} LUSD`;
+      }
+    })
+  ],
 
   validate: async ({
     position,

core/strategies/protocols/liquity/deposit-and-borrow.ts

@@ -1,4 +1,3 @@
-import BigNumber from "bignumber.js";
 import abis from "~/constant/abis";
 import addresses from "~/constant/addresses";
 import {