-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #202 from porters-xyz/rate-limit-fe
Rate limit fe
- Loading branch information
Showing
20 changed files
with
628 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
152 changes: 152 additions & 0 deletions
152
web-portal/frontend/components/apps/forms/rateLimitForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import _ from "lodash"; | ||
| import { useAtom, useAtomValue } from "jotai"; | ||
| import { existingRuleValuesAtom, ruleTypesAtom } from "@frontend/utils/atoms"; | ||
| import { useForm } from "@mantine/form"; | ||
| import { | ||
| Button, | ||
| Flex, | ||
| Pill, | ||
| Stack, | ||
| Text, | ||
| Select, | ||
| NumberInput, | ||
| } from "@mantine/core"; | ||
| import { IconPlus } from "@tabler/icons-react"; | ||
| import { IRuleType } from "@frontend/utils/types"; | ||
|
|
||
| import { useUpdateRuleMutation } from "@frontend/utils/hooks"; | ||
| import { useSearchParams, useParams } from "next/navigation"; | ||
|
|
||
| const periodOptions = [ | ||
| { label: "Weekly", value: "P1W" }, | ||
| { label: "Monthly", value: "P1M" }, | ||
| { label: "Daily", value: "P1D" }, | ||
| ]; | ||
|
|
||
| export default function RateLimitForm() { | ||
| const appId = useParams()?.app as string; | ||
| const searchParams = useSearchParams(); | ||
| const rule = searchParams?.get("rule") as string; | ||
| const { mutateAsync, isPending, isSuccess } = useUpdateRuleMutation( | ||
| appId, | ||
| rule, | ||
| ); | ||
|
|
||
| const [value, setValue] = useAtom(existingRuleValuesAtom); | ||
| const ruleTypes = useAtomValue(ruleTypesAtom); | ||
|
|
||
| const validationRule = _.get( | ||
| _.find(ruleTypes, (r: IRuleType) => r.name === rule), | ||
| "validationValue", | ||
| ); | ||
| const ruleRegex = new RegExp(validationRule as string); | ||
| const form = useForm({ | ||
| validate: { | ||
| requests: (val) => { | ||
| return _.isInteger(Number(val)) && Number(val) > 0 | ||
| ? null | ||
| : "Please enter a valid number"; | ||
| }, | ||
| period: (val: string) => { | ||
| const isValid = periodOptions.some((option) => { | ||
| return option.value === val; | ||
| }); | ||
|
|
||
| const alreadyExists = value.some((v) => v.includes(val)); | ||
| if (alreadyExists) { | ||
| return "Period already exists"; | ||
| } | ||
| return isValid ? null : "Please select a valid period"; | ||
| }, | ||
| }, | ||
| initialValues: { | ||
| requests: "", | ||
| period: "", | ||
| }, | ||
| }); | ||
|
|
||
| const handleValueRemove = (val: string) => | ||
| setValue((current) => current.filter((v) => v !== val)); | ||
|
|
||
| const formValidation = () => form.validate(); | ||
|
|
||
| const values = value?.map((val) => ( | ||
| <Pill | ||
| key={val} | ||
| withRemoveButton | ||
| onRemove={() => handleValueRemove(val)} | ||
| size="lg" | ||
| m={2} | ||
| bg="blue" | ||
| style={{ | ||
| color: "white", | ||
| }} | ||
| > | ||
| {val | ||
| ?.replace("P1D", "Daily") | ||
| .replace("P1W", "Weekly") | ||
| .replace("P1M", "Monthly")} | ||
| </Pill> | ||
| )); | ||
|
|
||
| const handleSubmit = () => { | ||
| const isValid = value.map((v) => (ruleRegex.test(v) ? true : false)); | ||
| isValid.includes(false) | ||
| ? form.setErrors({ requests: "Invalid value" }) | ||
| : mutateAsync(value); | ||
| }; | ||
|
|
||
| return ( | ||
| <Stack> | ||
| <Flex dir="row" align="flex-end" gap={4}> | ||
| <NumberInput | ||
| label="Allowed # of Requests" | ||
| placeholder="Enter a valid number" | ||
| inputWrapperOrder={["label", "input", "description"]} | ||
| style={{ width: "100%" }} | ||
| {...form.getInputProps("requests")} | ||
| /> | ||
| <Select | ||
| maw={120} | ||
| data={periodOptions} | ||
| label="Period" | ||
| placeholder="Period" | ||
| inputWrapperOrder={["label", "input", "description"]} | ||
| {...form.getInputProps("period")} | ||
| /> | ||
| <Button | ||
| h={36} | ||
| onClick={() => { | ||
| if (formValidation().hasErrors) return; | ||
| if (value.some((v) => v.includes(form.values.period))) { | ||
| return form.setErrors({ period: "Period already exists" }); | ||
| } | ||
| setValue((current: any) => [ | ||
| form.values.requests + `/` + form.values.period, | ||
| ...current, | ||
| ]), | ||
| form.reset(); | ||
| }} | ||
| > | ||
| <IconPlus /> | ||
| </Button> | ||
| </Flex> | ||
|
|
||
| <Text c="red.6" size="xs"> | ||
| {form.errors.requests} | ||
| <br /> | ||
| {form.errors.period} | ||
| </Text> | ||
| <Flex wrap={"wrap"}>{values}</Flex> | ||
|
|
||
| <Button | ||
| fullWidth | ||
| style={{ marginTop: 32 }} | ||
| onClick={handleSubmit} | ||
| loading={isPending && !isSuccess} | ||
| > | ||
| Update Rate Limits | ||
| </Button> | ||
| </Stack> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export default function Redeem() { | ||
| return ( | ||
| <div> | ||
| <h1>Redeem</h1> | ||
| </div> | ||
| ); | ||
| } |
74 changes: 74 additions & 0 deletions
74
web-portal/frontend/components/swap/SearchableSelectModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React, { useState } from "react"; | ||
| import { Modal, TextInput, Text, Flex, Stack } from "@mantine/core"; | ||
| import _ from "lodash"; | ||
| import Image from "next/image"; | ||
| import { IToken } from "@frontend/utils/types"; | ||
|
|
||
| interface Props { | ||
| options: IToken[]; | ||
| opened: boolean; | ||
| onSelect: (option: IToken) => void; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| export const SearchableSelectModal: React.FC<Props> = ({ | ||
| options, | ||
| onSelect, | ||
| opened, | ||
| onClose, | ||
| }) => { | ||
| const [searchValue, setSearchValue] = useState<string | null>(null); | ||
|
|
||
| const onChange = (newValue: string) => { | ||
| setSearchValue(newValue); | ||
| }; | ||
|
|
||
| const filteredOptions = _.filter(options, (option: IToken) => | ||
| typeof searchValue === "string" | ||
| ? _.toLower(option.symbol).includes(_.toLower(searchValue)) | ||
| : options, | ||
| ); | ||
|
|
||
| return ( | ||
| <Modal | ||
| opened={opened} | ||
| onClose={onClose} | ||
| title="Select token to swap" | ||
| centered | ||
| > | ||
| <TextInput | ||
| size="lg" | ||
| radius="md" | ||
| style={{ marginBottom: 20 }} | ||
| placeholder="Search..." | ||
| defaultValue={""} | ||
| onChange={(event) => onChange(event.target.value)} | ||
| title="Select Token to swap" | ||
| /> | ||
| <Stack> | ||
| {filteredOptions.map((option) => ( | ||
| <Flex | ||
| key={_.get(option, "address")} | ||
| onClick={() => onSelect(option)} | ||
| align="center" | ||
| p={8} | ||
| > | ||
| <Image | ||
| src={_.get(option, "logoURI")} | ||
| alt="ETH" | ||
| width={32} | ||
| height={32} | ||
| style={{ marginRight: 20, borderRadius: 50 }} | ||
| /> | ||
| <Stack gap={1}> | ||
| <Text style={{ fontWeight: 700 }}> | ||
| {_.get(option, "symbol") + ` - ` + _.get(option, "name")} | ||
| </Text> | ||
| <Text size="sm">{_.get(option, "address")}</Text> | ||
| </Stack> | ||
| </Flex> | ||
| ))} | ||
| </Stack> | ||
| </Modal> | ||
| ); | ||
| }; |
Oops, something went wrong.