rename input to component in strategy

This commit is contained in:
Georges KABBOUCHI 2021-09-05 14:46:39 +03:00
parent ce95773f6c
commit 60b01e884a
11 changed files with 172 additions and 170 deletions

View File

@ -24,38 +24,38 @@
<div class="mx-auto h-full" style="max-width: 296px">
<div class="space-y-4 py-9 h-full flex flex-col">
<div class="flex-1">
<div v-for="(input, index) in inputs" :key="index" class="mb-6">
<div v-for="(component, index) in components" :key="index" class="mb-6">
<input-amount
v-if="input.type === 'input-with-token'"
v-if="component.type === 'input-with-token'"
:key="index"
:value="input.value"
:token-key="input.token ? input.token.key : 'eth'"
:value="component.value"
:token-key="component.token ? component.token.key : 'eth'"
:token-keys="
input.tokenKeys
? input.tokenKeys
component.tokenKeys
? component.tokenKeys
: activeStrategy.getContext()['tokenKeys']
"
:error="input.error"
:placeholder="input.placeholder()"
@input="$event => input.onInput($event)"
:error="component.error"
:placeholder="component.placeholder()"
@input="$event => component.onInput($event)"
@tokenKeyChanged="
tokenKey => {
input.onCustomInput({
component.onCustomInput({
token: getTokenByKey(tokenKey)
});
}
"
/>
<SidebarContextHeading
v-else-if="input.type === 'heading'"
v-else-if="component.type === 'heading'"
:key="index"
>
{{ input.name }}
{{ component.name }}
</SidebarContextHeading>
<div v-else-if="input.type === 'value'" :key="index">
<value-display :label="input.name">
{{ input.value }}
<div v-else-if="component.type === 'value'" :key="index">
<value-display :label="component.name">
{{ component.value }}
</value-display>
</div>
</div>
@ -112,7 +112,7 @@ export default defineComponent({
protocolStrategies[props.protocol] || [];
const {
inputs,
components,
submit,
error,
strategy: activeStrategy,
@ -122,7 +122,7 @@ export default defineComponent({
);
return {
inputs,
components,
error,
submit,
activeStrategy,

View File

@ -42,7 +42,7 @@ export function useStrategy(defineStrategy: DefineStrategy) {
} = useNotification();
const strategy = buildStrategy(defineStrategy);
const inputs = ref(strategy.inputs);
const components = ref(strategy.components);
const error = ref("");
const pending = ref(false);
@ -134,7 +134,7 @@ export function useStrategy(defineStrategy: DefineStrategy) {
return {
strategy,
inputs,
components,
submit,
error,
pending

View File

@ -8,7 +8,7 @@ import { useFormatting } from "~/composables/useFormatting";
export interface IStrategyContext {
dsa: DSA;
web3: Web3;
inputs: IStrategyInput<StrategyInputType>[];
components: IStrategyComponent<StrategyComponentType>[];
// TODO: add types in useStrategy.ts
dsaBalances?: { [address: string]: IStrategyToken };
@ -35,7 +35,7 @@ export interface IStrategyToken {
// borrow: string;
}
export enum StrategyInputType {
export enum StrategyComponentType {
// INPUT = "input",
INPUT_WITH_TOKEN = "input-with-token",
@ -43,38 +43,38 @@ export enum StrategyInputType {
VALUE = "value"
}
export type StrategyInputParameterMap = {
export type StrategyComponentParameterMap = {
// [StrategyInputType.INPUT]: {};
[StrategyInputType.INPUT_WITH_TOKEN]: {
[StrategyComponentType.INPUT_WITH_TOKEN]: {
token?: IStrategyToken;
};
[StrategyInputType.HEADING]: {};
[StrategyInputType.VALUE]: {};
[StrategyComponentType.HEADING]: {};
[StrategyComponentType.VALUE]: {};
};
export interface IStrategyInput<InputType extends StrategyInputType> {
type: InputType;
export interface IStrategyComponent<ComponentType extends StrategyComponentType> {
type: ComponentType;
name: string;
variables?: { [key: string]: any };
placeholder?: (
context: IStrategyContext & {
input: IStrategyInput<InputType> & StrategyInputParameterMap[InputType];
component: IStrategyComponent<ComponentType> & StrategyComponentParameterMap[ComponentType];
}
) => string;
validate?: (
context: IStrategyContext & {
input: IStrategyInput<InputType> & StrategyInputParameterMap[InputType];
component: IStrategyComponent<ComponentType> & StrategyComponentParameterMap[ComponentType];
}
) => string | void;
defaults?: (context: Omit<IStrategyContext, "inputs">) => object;
defaults?: (context: Omit<IStrategyContext, "components">) => object;
update?: (
context: IStrategyContext & {
input: IStrategyInput<InputType> & StrategyInputParameterMap[InputType];
component: IStrategyComponent<ComponentType> & StrategyComponentParameterMap[ComponentType];
}
) => void;
@ -97,7 +97,7 @@ export interface IStrategy {
details?: string;
author?: string;
inputs: IStrategyInput<StrategyInputType>[];
components: IStrategyComponent<StrategyComponentType>[];
variables?: object;
@ -109,10 +109,10 @@ export interface IStrategy {
submitText?: string;
}
export function defineInput<InputType extends StrategyInputType>(
input: IStrategyInput<InputType>
export function defineStrategyComponent<ComponentType extends StrategyComponentType>(
component: IStrategyComponent<ComponentType>
) {
return input as IStrategyInput<InputType>;
return component as IStrategyComponent<ComponentType>;
}
export function defineStrategy(strategy: IStrategy) {

View File

@ -4,7 +4,7 @@ import { DefineStrategy, IStrategyContext } from ".";
export class Strategy {
schema: DefineStrategy;
inputs = [];
components = [];
context = {
web3: null as Web3,
dsa: null as DSA
@ -21,10 +21,10 @@ export class Strategy {
constructor(schema: DefineStrategy) {
this.schema = schema;
this.inputs = this.generateInputs(this.schema.inputs);
this.components = this.generateComponents(this.schema.components);
}
getBaseContext(): Omit<IStrategyContext, "inputs"> {
getBaseContext(): Omit<IStrategyContext, "components"> {
return {
...this.context,
...this.props,
@ -35,65 +35,65 @@ export class Strategy {
getContext(): IStrategyContext {
return {
...this.getBaseContext(),
inputs: this.inputs
components: this.components
};
}
setProps(props: object) {
Object.assign(this.props, props);
const inputs = this.inputs;
const components = this.components;
for (const input of inputs) {
if (typeof input.defaults !== "function") {
for (const component of components) {
if (typeof component.defaults !== "function") {
continue;
}
if (input.defaulted) {
if (component.defaulted) {
continue;
}
Object.assign(input, input.defaults(this.getBaseContext()));
Object.assign(component, component.defaults(this.getBaseContext()));
input.defaulted = true;
component.defaulted = true;
}
this.notifyListeners();
}
generateInputs(inputs) {
return inputs.map((input, idx) => {
const computedInput = {
...input,
value: input.value || "",
error: input.error || "",
generateComponents(components) {
return components.map((component, idx) => {
const computedComponent = {
...component,
value: component.value || "",
error: component.error || "",
placeholder: () => {
return input.placeholder
? input.placeholder({
return component.placeholder
? component.placeholder({
...this.getContext(),
input: this.inputs[idx]
component: this.components[idx]
})
: null;
},
onInput: (val: any) => {
this.inputs[idx].error = "";
this.inputs[idx].value = val;
this.components[idx].error = "";
this.components[idx].value = val;
if (val) {
this.inputs[idx].error = this.inputs[idx].validate({
this.components[idx].error = this.components[idx].validate({
...this.getContext(),
input: this.inputs[idx]
component: this.components[idx]
});
}
this.notifyListeners();
},
onCustomInput: (values: object) => {
this.inputs[idx] = Object.assign(this.inputs[idx], values);
this.components[idx] = Object.assign(this.components[idx], values);
this.inputs[idx].error = this.inputs[idx].validate({
this.components[idx].error = this.components[idx].validate({
...this.getContext(),
input: this.inputs[idx]
component: this.components[idx]
});
this.notifyListeners();
}
@ -101,12 +101,12 @@ export class Strategy {
let defaults = {};
if (input.defaults) {
defaults = input.defaults(this.getBaseContext());
if (component.defaults) {
defaults = component.defaults(this.getBaseContext());
}
return {
...computedInput,
...computedComponent,
...defaults
};
});
@ -135,16 +135,16 @@ export class Strategy {
}
async validate() {
const inputs = this.inputs;
const components = this.components;
for (const input of inputs) {
if (typeof input.validate !== "function") {
for (const component of components) {
if (typeof component.validate !== "function") {
continue;
}
const result = await input.validate({
const result = await component.validate({
...this.getContext(),
input
component
});
if (typeof result === "string") {
@ -178,10 +178,12 @@ export class Strategy {
await listener(this);
}
this.inputs.forEach(input => input.update?.({
...this.getContext(),
input
}));
this.components.forEach(component =>
component.update?.({
...this.getContext(),
component
})
);
}
onUpdated(cb) {

View File

@ -1,8 +1,8 @@
import BigNumber from "bignumber.js";
import {
defineStrategy,
defineInput,
StrategyInputType,
defineStrategyComponent,
StrategyComponentType,
StrategyProtocol
} from "../../helpers";
@ -27,13 +27,13 @@ export default defineStrategy({
debtRateMode: 2
},
inputs: [
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
components: [
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Collateral",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Deposit` : "",
validate: ({ input, dsaBalances, toBN }) => {
validate: ({ component: input, dsaBalances, toBN }) => {
if (!input.token) {
return "Collateral token is required";
}
@ -56,12 +56,12 @@ export default defineStrategy({
})
}),
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Debt",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Borrow` : "",
validate: ({ input }) => {
validate: ({ component: input }) => {
if (!input.token) {
return "Debt token is required";
}
@ -76,7 +76,7 @@ export default defineStrategy({
})
],
validate: async ({ position, inputs, toBN }) => {
validate: async ({ position, components: inputs, toBN }) => {
if (toBN(inputs[0].value).isZero() && toBN(inputs[1].value).isZero()) {
return;
}
@ -150,7 +150,7 @@ export default defineStrategy({
}
},
spells: async ({ inputs, convertTokenAmountToWei, variables }) => {
spells: async ({ components: inputs, convertTokenAmountToWei, variables }) => {
return [
{
connector: "aave_v2",

View File

@ -2,8 +2,8 @@ import BigNumber from "bignumber.js";
import tokens from "~/constant/tokens";
import {
defineStrategy,
defineInput,
StrategyInputType,
defineStrategyComponent,
StrategyComponentType,
StrategyProtocol
} from "../../helpers";
@ -21,13 +21,13 @@ export default defineStrategy({
<li>Withdraw collateral</li>
</ul>`,
inputs: [
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
components: [
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Debt",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Payback` : "",
validate: ({ input, toBN, dsaBalances }) => {
validate: ({ component: input, toBN, dsaBalances }) => {
if (!input.token) {
return "Debt token is required";
}
@ -42,12 +42,12 @@ export default defineStrategy({
token: getTokenByKey?.("dai")
})
}),
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Collateral",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Withdraw` : "",
validate: ({ input, position, toBN }) => {
validate: ({ component: input, position, toBN }) => {
if (!input.token) {
return "Collateral token is required";
}
@ -75,7 +75,7 @@ export default defineStrategy({
})
],
validate: async ({ position, inputs, toBN }) => {
validate: async ({ position, components: inputs, toBN }) => {
if (toBN(inputs[0].value).isZero() && toBN(inputs[1].value).isZero()) {
return;
}
@ -160,7 +160,7 @@ export default defineStrategy({
}
},
spells: async ({ inputs, convertTokenAmountToWei }) => {
spells: async ({ components: inputs, convertTokenAmountToWei }) => {
return [
{
connector: "aave_v2",

View File

@ -1,8 +1,8 @@
import BigNumber from "bignumber.js";
import {
defineStrategy,
defineInput,
StrategyInputType,
defineStrategyComponent,
StrategyComponentType,
StrategyProtocol
} from "../../helpers";
@ -26,13 +26,13 @@ export default defineStrategy({
debtTokenKey: "dai"
},
inputs: [
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
components: [
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Collateral",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Deposit` : "",
validate: ({ input, dsaBalances, toBN }) => {
validate: ({ component: input, dsaBalances, toBN }) => {
if (!input.token) {
return "Collateral token is required";
}
@ -55,12 +55,12 @@ export default defineStrategy({
})
}),
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Debt",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Borrow` : "",
validate: ({ input }) => {
validate: ({ component: input }) => {
if (!input.token) {
return "Debt token is required";
}
@ -75,7 +75,7 @@ export default defineStrategy({
})
],
validate: async ({ position, inputs, toBN, tokenIdMapping }) => {
validate: async ({ position, components: inputs, toBN, tokenIdMapping }) => {
if (toBN(inputs[0].value).isZero() && toBN(inputs[1].value).isZero()) {
return;
}
@ -150,7 +150,7 @@ export default defineStrategy({
}
},
spells: async ({ inputs, convertTokenAmountToWei, tokenIdMapping }) => {
spells: async ({ components: inputs, convertTokenAmountToWei, tokenIdMapping }) => {
const { tokenToId } = tokenIdMapping;
const collateralTokenId = tokenToId.compound[inputs[0].token.key];

View File

@ -1,8 +1,8 @@
import BigNumber from "bignumber.js";
import {
defineStrategy,
defineInput,
StrategyInputType,
defineStrategyComponent,
StrategyComponentType,
StrategyProtocol
} from "../../helpers";
@ -20,13 +20,13 @@ export default defineStrategy({
<li>Withdraw collateral</li>
</ul>`,
inputs: [
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
components: [
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Debt",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Payback` : "",
validate: ({ input, toBN, dsaBalances }) => {
validate: ({ component: input, toBN, dsaBalances }) => {
if (!input.token) {
return "Debt token is required";
}
@ -41,12 +41,12 @@ export default defineStrategy({
token: getTokenByKey?.("dai")
})
}),
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Collateral",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Withdraw` : "",
validate: ({ input, position, toBN, tokenIdMapping }) => {
validate: ({ component: input, position, toBN, tokenIdMapping }) => {
if (!input.token) {
return "Collateral token is required";
}
@ -79,7 +79,7 @@ export default defineStrategy({
})
],
validate: async ({ position, inputs, toBN, tokenIdMapping }) => {
validate: async ({ position, components: inputs, toBN, tokenIdMapping }) => {
if (toBN(inputs[0].value).isZero() && toBN(inputs[1].value).isZero()) {
return;
}
@ -154,7 +154,7 @@ export default defineStrategy({
}
},
spells: async ({ inputs, convertTokenAmountToWei, tokenIdMapping }) => {
spells: async ({ components: inputs, convertTokenAmountToWei, tokenIdMapping }) => {
const { tokenToId } = tokenIdMapping;
const debtTokenId = tokenToId.compound[inputs[0].token.key];

View File

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

View File

@ -2,8 +2,8 @@ import abis from "~/constant/abis";
import addresses from "~/constant/addresses";
import {
defineStrategy,
defineInput,
StrategyInputType,
defineStrategyComponent,
StrategyComponentType,
StrategyProtocol
} from "../../helpers";
@ -27,13 +27,13 @@ export default defineStrategy({
debtTokenKey: "lusd"
},
inputs: [
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
components: [
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Collateral",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Deposit` : "",
validate: ({ input, dsaBalances, toBN }) => {
validate: ({ component: input, dsaBalances, toBN }) => {
if (!input.token) {
return "Collateral token is required";
}
@ -56,12 +56,12 @@ export default defineStrategy({
})
}),
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Debt",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Borrow` : "",
validate: ({ input, toBN, position, positionExtra }) => {
validate: ({ component: input, toBN, position, positionExtra }) => {
if (!input.token) {
return "Debt token is required";
}
@ -99,7 +99,7 @@ export default defineStrategy({
})
],
validate: async ({ position, positionExtra, inputs, toBN }) => {
validate: async ({ position, positionExtra, components: inputs, toBN }) => {
if (toBN(inputs[0].value).isZero() && toBN(inputs[1].value).isZero()) {
return;
}
@ -127,7 +127,7 @@ export default defineStrategy({
},
spells: async ({
inputs,
components: inputs,
position,
positionExtra,
getTokenByKey,

View File

@ -3,8 +3,8 @@ import abis from "~/constant/abis";
import addresses from "~/constant/addresses";
import {
defineStrategy,
defineInput,
StrategyInputType,
defineStrategyComponent,
StrategyComponentType,
StrategyProtocol
} from "../../helpers";
@ -22,13 +22,13 @@ export default defineStrategy({
<li>Withdraw collateral</li>
</ul>`,
inputs: [
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
components: [
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Debt",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Payback` : "",
validate: ({ input, toBN, position, positionExtra }) => {
validate: ({ component: input, toBN, position, positionExtra }) => {
if (!input.token) {
return "Debt token is required";
}
@ -64,12 +64,12 @@ export default defineStrategy({
token: getTokenByKey?.("lusd")
})
}),
defineInput({
type: StrategyInputType.INPUT_WITH_TOKEN,
defineStrategyComponent({
type: StrategyComponentType.INPUT_WITH_TOKEN,
name: "Collateral",
placeholder: ({ input }) =>
placeholder: ({ component: input }) =>
input.token ? `${input.token.symbol} to Withdraw` : "",
validate: ({ input, dsaBalances, toBN }) => {
validate: ({ component: input, dsaBalances, toBN }) => {
if (!input.token) {
return "Collateral token is required";
}
@ -93,7 +93,7 @@ export default defineStrategy({
})
],
validate: async ({ position, inputs, toBN }) => {
validate: async ({ position, components: inputs, toBN }) => {
if (toBN(inputs[0].value).isZero() && toBN(inputs[1].value).isZero()) {
return;
}
@ -106,7 +106,7 @@ export default defineStrategy({
},
spells: async ({
inputs,
components: inputs,
position,
positionExtra,
getTokenByKey,