Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Pool Simulator] Add validation in new form #171

Merged
merged 28 commits into from
Jul 31, 2023
Merged

[Pool Simulator] Add validation in new form #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
6a5ad3c
chore: add generic form template
yvesfracari Jul 21, 2023
e9b3b72
wip: add validation place holder
yvesfracari Jul 21, 2023
342621e
Merge branch 'main' into pedro/bal-500-add-forms-interface-to-accept-…
luizakp Jul 23, 2023
e7979f3
chore: useStableSwap for usePoolSimulator
luizakp Jul 24, 2023
5583323
feat: add gyro E to search pool
luizakp Jul 24, 2023
f57d4e7
chore: add dialog when changing the pool type
luizakp Jul 25, 2023
9269786
fix: invoking usePoolSimulator context on analysis page
luizakp Jul 25, 2023
367be0a
remove: delete commented files
luizakp Jul 25, 2023
083f1b0
refactor: dialog when changing the pool type
luizakp Jul 25, 2023
3d11895
merge from main
luizakp Jul 26, 2023
9ab8eaf
chore? reset pool params form after changing pool type
luizakp Jul 26, 2023
d0862b8
fix: sidebar max height
luizakp Jul 26, 2023
009b327
fix: move convertAnalysisData to utils folder
luizakp Jul 26, 2023
63e42be
chore? display pool params on analysis page
luizakp Jul 27, 2023
6c00db3
chore: move pool simulator types to a single file
luizakp Jul 27, 2023
b146409
fix: pooltypeEnum import
luizakp Jul 27, 2023
db8ff2a
fix: GyroE schema
luizakp Jul 27, 2023
153b323
fix: bug - replace form data with initialData onSubmit
luizakp Jul 27, 2023
3903c84
fix: import TokensData
luizakp Jul 27, 2023
ec74b97
merge from main
luizakp Jul 28, 2023
e010189
[Pool Simulator] Add tokens table on Pool Params Form pt.1 (#170)
yvesfracari Jul 28, 2023
a309eec
update balancer-sor version
yvesfracari Jul 28, 2023
ed7414b
fix: imports at math-poolsimulator package
yvesfracari Jul 28, 2023
e940792
chore: re-add share link feat
luizakp Jul 28, 2023
86e8471
fix: sidebar height
luizakp Jul 28, 2023
c6a2cf0
fix: define GyroEParams from math package
luizakp Jul 28, 2023
a4b7a0f
fix: form validation on alpha and beta
luizakp Jul 28, 2023
8bd4824
fix: tool tip typo
luizakp Jul 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/balancer-tools/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@
"lint:fix": "eslint '**/*.{ts,tsx}' --fix"
},
"dependencies": {
"@balancer-labs/sor": "4.1.1-beta.13",
"@balancer-labs/sor": "4.1.1-beta.14",
"@bleu-balancer-tools/gql": "workspace:*",
"@bleu-balancer-tools/math-poolsimulator": "workspace:*",
"@bleu-balancer-tools/math-stableswapsimulator": "workspace:*",
"@bleu-balancer-tools/tsconfig": "workspace:*",
"@hookform/resolvers": "^3.1.1",
"@hookform/resolvers": "3.1.0",
"@radix-ui/colors": "^1.0.0",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-alert-dialog": "^1.0.4",
Expand Down Expand Up @@ -51,7 +51,7 @@
"plotly.js": "^2.24.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.45.2",
"react-hook-form": "7.43.9",
luizakp marked this conversation as resolved.
Show resolved Hide resolved
"react-plotly.js": "^2.6.0",
"swr": "^2.2.0",
"tailwind-merge": "^1.14.0",
Expand Down
4 changes: 3 additions & 1 deletion apps/balancer-tools/src/app/poolsimulator/(components)/DepthCost.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import { PlotType } from "plotly.js";

import Plot, { defaultAxisLayout } from "#/components/Plot";
import { Spinner } from "#/components/Spinner";
import { TokensData, usePoolSimulator } from "#/contexts/PoolSimulatorContext";
import { usePoolSimulator } from "#/contexts/PoolSimulatorContext";
import { formatNumber } from "#/utils/formatNumber";

import { TokensData } from "../(types)";

export function DepthCost() {
const { analysisToken, initialData, initialAMM, customAMM } =
usePoolSimulator();
Expand Down
37 changes: 2 additions & 35 deletions apps/balancer-tools/src/app/poolsimulator/(components)/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { Dialog } from "#/components/Dialog";
import { Select, SelectItem } from "#/components/Select";
import Sidebar from "#/components/Sidebar";
import { Spinner } from "#/components/Spinner";
import { Tabs } from "#/components/Tabs";
import { Label } from "#/components/ui/label";
import {
POOL_TYPES,
Expand All @@ -26,36 +25,6 @@ const POOL_TYPES_MAPPER = {
GyroE: "Gyro E-CLP",
};

function AnalysisMenu() {
return (
<div>
<Tabs defaultValue="customData">
<Tabs.ItemTriggerWrapper>
<Tabs.ItemTrigger tabName="initialData" color="blue7">
<span>Initial</span>
</Tabs.ItemTrigger>
<Tabs.ItemTrigger tabName="customData" color="amber9">
<span>Custom</span>
</Tabs.ItemTrigger>
</Tabs.ItemTriggerWrapper>
<Tabs.ItemContent tabName="initialData">
{/* <SearchPoolFormWithDataForm>
<InitialDataForm />
</SearchPoolFormWithDataForm> */}
{/* BAL-499 */}
</Tabs.ItemContent>
<Tabs.ItemContent tabName="customData">
<Sidebar.Header name="Custom parameters" />
{/* <Sidebar.Content>
<CustomDataForm />
</Sidebar.Content> */}
{/* BAL-499 */}
</Tabs.ItemContent>
</Tabs>
</div>
);
}

function IndexMenu() {
const [open, setOpen] = useState(false);
const { poolType } = usePoolSimulator();
Expand Down Expand Up @@ -133,14 +102,12 @@ export default function Menu() {
if (
!initialData ||
!initialData.poolParams ||
!initialData.tokens ||
!customData ||
!customData.poolParams ||
!customData.tokens
!customData.poolParams
) {
return <Spinner />;
}
return <AnalysisMenu />;
return <div className="text-slate12">Analysis Menu</div>;
}
return <IndexMenu />;
}
49 changes: 37 additions & 12 deletions apps/balancer-tools/src/app/poolsimulator/(components)/PoolParamsForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,23 @@ import { Input } from "#/components/Input";
import { Form, FormField } from "#/components/ui/form";
import {
AnalysisData,
PoolTypeEnum,
usePoolSimulator,
} from "#/contexts/PoolSimulatorContext";
import {
ECLPSimulatorDataSchema,
StableSwapSimulatorDataSchema,
} from "#/lib/schema";

import { CombinedParams, PoolTypeEnum } from "../(types)";
import { TokenTable } from "./TokenTable";

const schemaMapper = {
MetaStable: StableSwapSimulatorDataSchema,
GyroE: ECLPSimulatorDataSchema,
[PoolTypeEnum.MetaStable]: StableSwapSimulatorDataSchema,
[PoolTypeEnum.GyroE]: ECLPSimulatorDataSchema,
};

interface IInput {
name: "swapFee" | "ampFactor" | "alpha" | "beta" | "lambda" | "c" | "s";
name: keyof CombinedParams;
luizakp marked this conversation as resolved.
Show resolved Hide resolved
label: string;
placeholder: string;
unit: string;
Expand Down Expand Up @@ -91,8 +93,6 @@ export function PoolParamsForm() {
const { push } = useRouter();
const {
setIsGraphLoading,
setCurrentTabTokenByIndex,
setAnalysisTokenByIndex,
setInitialData,
setCustomData,
initialData,
Expand All @@ -103,14 +103,26 @@ export function PoolParamsForm() {
resolver: zodResolver(schemaMapper[poolType]),
mode: "onSubmit",
});
const { register, setValue, getValues, clearErrors } = form;
const {
register,
setValue,
getValues,
clearErrors,
formState: { errors },
} = form;

const onSubmit = (data: FieldValues) => {
setIsGraphLoading(true);
setCustomData(data as AnalysisData);
setInitialData(data as AnalysisData);
setAnalysisTokenByIndex(0);
setCurrentTabTokenByIndex(1);
const dataWithPoolType = {
poolParams: Object.fromEntries(
inputMapper[poolType].map((input) => [input.name, data[input.name]])
),
tokens: initialData.tokens,
poolType,
};

setInitialData(dataWithPoolType as AnalysisData);
setCustomData(dataWithPoolType as AnalysisData);
push("/poolsimulator/analysis");
};

Expand All @@ -123,6 +135,7 @@ export function PoolParamsForm() {
setValue(input.name, dataValue);
}
});
if (initialData?.tokens) setValue("tokens", initialData?.tokens);
}, [initialData]);

useEffect(() => {
Expand All @@ -144,7 +157,7 @@ export function PoolParamsForm() {
}, []);
return (
<Form {...form} onSubmit={onSubmit} id="initial-data-form">
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-3">
{inputMapper[poolType].map((input) => (
<div className="relative">
<FormField
Expand All @@ -169,6 +182,18 @@ export function PoolParamsForm() {
</span>
</div>
))}
<div className="flex flex-col">
<label className="mb-2 block text-sm text-slate12">Tokens</label>
{errors?.tokens?.message && (
Copy link
Contributor

@ribeirojose ribeirojose Jul 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 good strategy. think this was not in the video though, was it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, this is from PYC's PR

<div className="mt-1 h-6 text-sm text-tomato10">
<span>{errors?.tokens?.message as string}</span>
</div>
)}
<TokenTable />
</div>
{errors[""] && (
<span className="text-tomato10">{errors[""]?.message as string}</span>
)}
<Button type="submit" shade="light" className="h-min w-32 self-end">
Next step
</Button>
Expand Down
9 changes: 3 additions & 6 deletions apps/balancer-tools/src/app/poolsimulator/(components)/SearchPoolFormDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,14 @@ import { PropsWithChildren } from "react";

import { Dialog } from "#/components/Dialog";
import { SearchPoolForm } from "#/components/SearchPoolForm";
import {
PoolType,
PoolTypeEnum,
usePoolSimulator,
} from "#/contexts/PoolSimulatorContext";
import { PoolType, usePoolSimulator } from "#/contexts/PoolSimulatorContext";

import { PoolTypeEnum } from "../(types)";

const poolTypes = {
[PoolTypeEnum.MetaStable]: ["Stable", "MetaStable", "ComposableStable"],
[PoolTypeEnum.GyroE]: ["GyroE"],
};

export function SearchPoolFormDialog({
children,
poolTypeFilter,
Expand Down
1 change: 0 additions & 1 deletion apps/balancer-tools/src/app/poolsimulator/(components)/ShareButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { usePoolSimulator } from "#/contexts/PoolSimulatorContext";

export function ShareButton() {
const { generateURL } = usePoolSimulator();

const onInitialPage = usePathname() === "/poolsimulator";
const [isNotifierOpen, setIsNotifierOpen] = useState<boolean>(false);

Expand Down
4 changes: 3 additions & 1 deletion apps/balancer-tools/src/app/poolsimulator/(components)/StableCurve.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import { PlotType } from "plotly.js";

import Plot from "#/components/Plot";
import { Spinner } from "#/components/Spinner";
import { TokensData, usePoolSimulator } from "#/contexts/PoolSimulatorContext";
import { usePoolSimulator } from "#/contexts/PoolSimulatorContext";
import { formatNumber } from "#/utils/formatNumber";

import { TokensData } from "../(types)";

export function StableCurve() {
const { analysisToken, currentTabToken, initialAMM, customAMM } =
usePoolSimulator();
Expand Down
10 changes: 5 additions & 5 deletions apps/balancer-tools/src/app/poolsimulator/(components)/TokenForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import { Input } from "#/components/Input";
import { Form } from "#/components/ui/form";
import {
AnalysisData,
TokensData,
usePoolSimulator,
} from "#/contexts/PoolSimulatorContext";
import { getStableSwapSimulatorTokensSchema } from "#/lib/schema";

import { TokensData } from "../(types)";
import { useTokenTableContext } from "./TokenTable";

export default function TokenForm({
Expand All @@ -23,7 +23,7 @@ export default function TokenForm({
}) {
const { initialData, setInitialData, customData, setCustomData } =
usePoolSimulator();
const { variant } = useTokenTableContext();
const { custom } = useTokenTableContext();

const stableSwapTokensSchema = getStableSwapSimulatorTokensSchema({
symbolToEdit,
Expand All @@ -37,7 +37,7 @@ export default function TokenForm({

const { register } = form;

const tokens = variant ? customData?.tokens : initialData?.tokens;
const tokens = custom ? customData?.tokens : initialData?.tokens;
const currentToken = tokens?.find(
(token: TokensData) => token.symbol == symbolToEdit
);
Expand Down Expand Up @@ -122,8 +122,8 @@ export default function TokenForm({

function handleEdit(data: TokensData) {
// Edit the balance and rate on the table
// and the symbol on the baseline and variant
if (variant) {
// and the symbol on the baseline and custom
if (custom) {
editAll({
analysisData: customData,
setAnalysisData: setCustomData,
Expand Down
Loading
Loading