diff --git a/config-overrides.js b/config-overrides.js index d6822492a..7480576cb 100644 --- a/config-overrides.js +++ b/config-overrides.js @@ -31,7 +31,10 @@ module.exports = { util: require.resolve("util/") }; - config.ignoreWarnings = [/Failed to parse source map/]; + config.ignoreWarnings = [ + /Failed to parse source map/, + /Critical dependency: Accessing import\.meta directly is unsupported \(only property access is supported\)/ + ]; return config; }, diff --git a/package-lock.json b/package-lock.json index bdd808eb1..a7300f82e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/react-kit": "^0.31.1", + "@bosonprotocol/react-kit": "^0.32.0-alpha.1", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.7.0", @@ -2551,9 +2551,9 @@ } }, "node_modules/@bosonprotocol/react-kit": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.31.1.tgz", - "integrity": "sha512-RkejKgwdjT1wqYsfeAiWofUzuZP0yERQMvGs4EMRKId453tPB4BlpfCtglIMNPIWtSw8185Dt6wpMnmaYCmY4g==", + "version": "0.32.0-alpha.1", + "resolved": "https://registry.npmjs.org/@bosonprotocol/react-kit/-/react-kit-0.32.0-alpha.1.tgz", + "integrity": "sha512-g+oRZ2Px4j/qaadG9uz9ukjLss7vKXnps5XCCICIAo33u5qeMY0+Mv9Q1jcvrKbM31Hcz9brPkD054aMSjLW+w==", "dependencies": { "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", "@bosonprotocol/core-sdk": "^1.40.3", diff --git a/package.json b/package.json index 1431d063f..c59821794 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "dependencies": { "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", - "@bosonprotocol/react-kit": "^0.31.1", + "@bosonprotocol/react-kit": "^0.32.0-alpha.1", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.7.0", diff --git a/src/components/form/Input.tsx b/src/components/form/Input.tsx index dbac9ee63..7bafb9dc7 100644 --- a/src/components/form/Input.tsx +++ b/src/components/form/Input.tsx @@ -1,57 +1,14 @@ -import { ClearButton } from "components/ui/ClearButton"; -import { Grid } from "components/ui/Grid"; +import { BaseInput } from "@bosonprotocol/react-kit"; import { useField, useFormikContext } from "formik"; -import { forwardRef, useMemo } from "react"; -import styled from "styled-components"; +import { forwardRef } from "react"; +import { inputTheme } from "theme"; import Error from "./Error"; -import { FieldInput } from "./Field.styles"; import type { InputProps } from "./types"; -const StyledFieldInput = styled(FieldInput)` - padding-right: calc(1rem + 12px); -`; -const StyledClearButton = styled(ClearButton)` - top: 1px; - height: calc(100% - 4px); - margin-left: 0; -`; -export const Input = forwardRef( - ({ name, isClearable, ...props }, ref) => { - const { status, setFieldValue } = useFormikContext(); - const [field, meta] = useField(name); - const errorText = meta.error || status?.[name]; - const errorMessage = errorText && meta.touched ? errorText : ""; - const displayError = - typeof errorMessage === typeof "string" && errorMessage !== ""; - const InputComponent = useMemo(() => { - return isClearable ? ( - - - {isClearable && ( - setFieldValue(name, "")} /> - )} - - ) : ( - - ); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [errorMessage, field, isClearable, name, props, ref]); - return ( - <> - {InputComponent} - - - ); - } -); + +export const Input = forwardRef((props, ref) => { + return ; +}); export const InputError = ({ name }: Pick) => { const { status } = useFormikContext(); diff --git a/src/components/form/TagsInput.tsx b/src/components/form/TagsInput.tsx index ec8fbf06b..32847f9c5 100644 --- a/src/components/form/TagsInput.tsx +++ b/src/components/form/TagsInput.tsx @@ -1,122 +1,8 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ -import { useField, useFormikContext } from "formik"; -import { KeyReturn } from "phosphor-react"; -import { useEffect, useRef } from "react"; +import { BaseTagsInput, BaseTagsInputProps } from "@bosonprotocol/react-kit"; +import { inputTheme } from "theme"; -import { Grid } from "../ui/Grid"; -import { Typography } from "../ui/Typography"; -import Error from "./Error"; -import { FieldInput } from "./Field.styles"; -import { - Close, - Helper, - TagContainer, - TagWrapper -} from "./styles/TagsInput.styles"; -import { TagsProps } from "./types"; - -const TagsInput = ({ - name, - placeholder, - onAddTag, - onRemoveTag, - compareTags = (tagA: string, tagB: string) => - tagA.toLowerCase() === tagB.toLowerCase(), - transform = (tag: string) => tag, - label -}: TagsProps) => { - const { validateForm } = useFormikContext(); - const [field, meta, helpers] = useField(name); - const tags = field.value || []; - - const errorMessage = meta.error && meta.touched ? meta.error : ""; - const displayError = - typeof errorMessage === typeof "string" && errorMessage !== ""; - - const handleBlur = () => { - if (!meta.touched) { - helpers.setTouched(true); - } - }; - - function handleKeyDown(event: any) { - if (event.key !== "Enter") return; - event.preventDefault(); - const value: string = event.target.value; - if (!value.trim()) return; - event.target.value = ""; - if (!meta.touched) { - helpers.setTouched(true); - } - - if (!tags.find((tag) => compareTags(tag, value))) { - const transformedValue = transform(value); - const newTags = [...tags, transformedValue]; - helpers.setValue(newTags); - onAddTag?.(transformedValue); - } - } - - function removeTag(index: number) { - const filteredTags = tags.filter((_, i) => i !== index); - helpers.setValue(filteredTags); - if (!meta.touched) { - helpers.setTouched(true); - } - onRemoveTag?.(tags[index]); - } - useEffect(() => { - validateForm(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [field.value]); - const labelRef = useRef(null); - const hitEnterWidth = useRef(null); - return ( - <> - - {label && ( - - {label} - - )} - - - - Hit Enter - - - - - {label && ( -
- )} - {tags.map((tag: string, index: number) => ( - - {tag} - removeTag(index)}>× - - ))} - - {" "} - - ); +const TagsInput = (props: Omit) => { + return ; }; export default TagsInput; diff --git a/src/components/header/accountDrawer/IconButton.tsx b/src/components/header/accountDrawer/IconButton.tsx index 6678640e6..81a927512 100644 --- a/src/components/header/accountDrawer/IconButton.tsx +++ b/src/components/header/accountDrawer/IconButton.tsx @@ -91,16 +91,14 @@ interface IconButtonProps type IconBlockProps = React.ComponentPropsWithoutRef<"a" | "button">; const IconBlock = forwardRef< - (HTMLAnchorElement | HTMLDivElement) & { color: string }, - IconBlockProps + HTMLAnchorElement | HTMLDivElement, + IconBlockProps & { color: string } >(function IconBlock(props, ref) { const $color = props.color; if ("href" in props) { return ( } - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore $color={$color} {...props} /> diff --git a/src/components/header/accountDrawer/TestnetsToggle.tsx b/src/components/header/accountDrawer/TestnetsToggle.tsx deleted file mode 100644 index 46bb142c2..000000000 --- a/src/components/header/accountDrawer/TestnetsToggle.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { atomWithStorage } from "jotai/utils"; - -export const showTestnetsAtom = atomWithStorage("showTestnets", true); diff --git a/src/components/header/selector/ChainSelector.tsx b/src/components/header/selector/ChainSelector.tsx index 12652b555..89d180d45 100644 --- a/src/components/header/selector/ChainSelector.tsx +++ b/src/components/header/selector/ChainSelector.tsx @@ -2,7 +2,6 @@ import { ConfigId, ProtocolConfig } from "@bosonprotocol/react-kit"; import { ChainId } from "@uniswap/sdk-core"; import { useWeb3React } from "@web3-react/core"; import { useConfigContext } from "components/config/ConfigContext"; -import { useAtomValue } from "jotai"; import { envConfigsFilteredByEnv } from "lib/config"; import { CaretDown as ChevronDown, @@ -28,7 +27,6 @@ import useSelectChain from "../../../lib/utils/hooks/useSelectChain"; import useSyncChainQuery from "../../../lib/utils/hooks/useSyncChainQuery"; import { Portal } from "../../portal/Portal"; import Tooltip from "../../tooltip/Tooltip"; -import { showTestnetsAtom } from "../accountDrawer/TestnetsToggle"; import { NavDropdown } from "../navDropdown/NavDropdown"; import ChainSelectorRow from "./ChainSelectorRow"; @@ -75,20 +73,21 @@ function useWalletSupportedChains(): ChainId[] { return NETWORK_SELECTOR_CHAINS_IDS; } } - +const chevronProps = { + height: 20, + width: 20 +}; export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => { const { config } = useConfigContext(); const [isOpen, setIsOpen] = useState(false); const { isXS: isMobile } = useBreakpoints(); - const showTestnets = useAtomValue(showTestnetsAtom); const walletSupportsChain = useWalletSupportedChains(); const [supportedConfigs, unsupportedChains] = useMemo(() => { const { supported, unsupported } = NETWORK_SELECTOR_CHAINS.filter( (config) => { return ( - showTestnets || // eslint-disable-next-line @typescript-eslint/no-explicit-any !TESTNET_CHAIN_IDS.includes(config.chainId as any) ); @@ -111,7 +110,7 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => { { supported: [], unsupported: [] } as Record ); return [supported, unsupported]; - }, [showTestnets, walletSupportsChain]); + }, [walletSupportsChain]); const ref = useRef(null); const modalRef = useRef(null); @@ -177,11 +176,6 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => { ); - const chevronProps = { - height: 20, - width: 20 - }; - return (