[Snyk] Security upgrade postcss from 8.4.27 to 8.4.31 (#1416)

* fix: packages/synapse-interface/package.json to reduce vulnerabilities The following vulnerabilities are fixed with an upgrade: - https://snyk.io/vuln/SNYK-JS-POSTCSS-5926692 * Add disabled prop to FilterInput * Ensure search input is disabled until app successfully mounts * Add border opacity when not mounted --------- Co-authored-by: snyk-bot <[email protected]> Co-authored-by: Jonah Lin <[email protected]>
synapsecns · Oct 10, 2023 · 9c5bbc1 · 9c5bbc1
1 parent 59aac3f
commit 9c5bbc1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/synapse-interface/components/Portfolio/SearchBar.tsx b/packages/synapse-interface/components/Portfolio/SearchBar.tsx
@@ -30,9 +30,14 @@ export const SearchBar = () => {
     searchedBalancesAndAllowances,
   }: PortfolioState = usePortfolioState()
 
+  const [mounted, setMounted] = useState<boolean>(false)
   const [isFocused, setIsFocused] = useState<boolean>(false)
   const isActive: boolean = searchInput !== portfolioInitialState.searchInput
 
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
   useEffect(() => {
     const handleFocus = () => setIsFocused(true)
     const handleBlur = () => setIsFocused(false)
@@ -96,6 +101,7 @@ export const SearchBar = () => {
       className={`
         relative flex items-center ml-auto
         border rounded-xl
+        ${!mounted && 'border-opacity-30'}
         ${
           isFocused || isActive
             ? 'border-synapsePurple bg-tint'
@@ -107,6 +113,7 @@ export const SearchBar = () => {
         placeholder={placeholder}
         searchStr={searchInput}
         onSearch={onSearchInput}
+        disabled={mounted ? false : true}
       />
       <ClearSearchButton show={isActive} onClick={clearSearchInput} />
     </div>
@@ -117,13 +124,16 @@ export default function FilterInput({
   searchStr,
   onSearch,
   placeholder,
+  disabled = false,
 }: {
   searchStr: string
   onSearch: (str: string) => void
   placeholder: string
+  disabled: boolean
 }) {
   return (
     <input
+      disabled={disabled}
       ref={inputRef}
       tabIndex={0}
       data-test-id="filter-input"
@@ -134,6 +144,7 @@ export default function FilterInput({
         placeholder-white placeholder-opacity-40
         border-transparent outline-none ring-0
         focus:outline-none focus:ring-0 focus:border-transparent
+        ${disabled && 'opacity-30'}
       `}
       placeholder={placeholder}
       onChange={(e) => onSearch(e.target.value)}

diff --git a/packages/synapse-interface/package.json b/packages/synapse-interface/package.json
@@ -70,7 +70,7 @@
     "lodash.debounce": "^4.0.8",
     "next": "13.3.0",
     "numeral": "^2.0.6",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-ga": "^3.3.1",