fix poap+chain edge case

SigmaResearchDAO · Aug 7, 2023 · 89f28cb · 89f28cb
1 parent ded50a3
commit 89f28cb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/src/Components/Dropdown.tsx b/src/Components/Dropdown.tsx
@@ -12,7 +12,8 @@ export function Dropdown({
   closeOnSelect = false,
   renderOption,
   renderPlaceholder,
-  onChange
+  onChange,
+  disabled
 }: {
   options: Option[];
   selected?: Option[];
@@ -25,6 +26,7 @@ export function Dropdown({
     setSelected: (selected: Option[]) => void;
   }) => ReactNode;
   onChange: (selected: Option[]) => void;
+  disabled?: boolean;
 }) {
   const [_selected, setSelected] = useState<Option[]>([]);
   const ref = useRef<HTMLDivElement>(null);
@@ -63,7 +65,7 @@ export function Dropdown({
       className="text-xs font-medium relative inline-flex flex-col items-center"
       ref={ref}
     >
-      <div onClick={() => setShow(show => !show)}>
+      <div onClick={() => setShow(show => (disabled ? false : !show))}>
         {renderPlaceholder(actualSelected, show)}
       </div>
       {show && (

diff --git a/src/pages/TokenBalances/BlockchainFilter.tsx b/src/pages/TokenBalances/BlockchainFilter.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useSearchInput } from '../../hooks/useSearchInput';
 import classNames from 'classnames';
 import { Dropdown, Option } from '../../Components/Dropdown';
@@ -18,14 +18,26 @@ const blockchainOptions = [
   }
 ];
 const buttonClass =
-  'py-1.5 px-3 mr-3.5 rounded-full bg-glass-1 text-text-secondary border border-solid border-transparent text-xs hover:bg-glass-1-light';
+  'py-1.5 px-3 mr-3.5 rounded-full bg-glass-1 text-text-secondary border border-solid border-transparent text-xs hover:bg-glass-1-light disabled:hover:bg-glass-1 disabled:hover:cursor-not-allowed disabled:opacity-80';
 
 export function BlockchainFilter() {
-  const [{ blockchainType }, setData] = useSearchInput();
+  const [{ blockchainType, tokenType }, setData] = useSearchInput();
+  const isPoapFilterApplied = tokenType === 'POAP';
+
+  useEffect(() => {
+    // If POAP filter is applied, reset blockchain filter
+    if (isPoapFilterApplied && blockchainType.length > 0) {
+      setData(
+        {
+          blockchainType: []
+        },
+        { updateQueryParams: true }
+      );
+    }
+  }, [blockchainType, isPoapFilterApplied, setData]);
 
   const handleChange = useCallback(
     (selected: Option[]) => {
-      //   setData;
       setData(
         {
           blockchainType: selected.map(item => item.value)
@@ -48,8 +60,10 @@ export function BlockchainFilter() {
       selected={selected}
       onChange={handleChange}
       options={blockchainOptions}
+      disabled={isPoapFilterApplied}
       renderPlaceholder={(selected, isOpen) => (
         <button
+          disabled={isPoapFilterApplied}
           className={classNames(
             buttonClass,
             'flex justify-center items-center !rounded-full',

diff --git a/src/pages/TokenBalances/Tokens.tsx b/src/pages/TokenBalances/Tokens.tsx
@@ -138,10 +138,12 @@ function TokensComponent() {
 
   useEffect(() => {
     if (owner) {
+      const hasPolygonChainFilter = blockchainType.includes('polygon');
+
       if (!tokenType || !isPoap) {
         fetchTokens({
           owner,
-          limit: fetchAllBlockchains ? 10 : 20,
+          limit: fetchAllBlockchains || !hasPolygonChainFilter ? 10 : 20,
           sortBy: sortOrder ? sortOrder : defaultSortOrder,
           tokenType:
             tokenType && tokenType.length > 0
@@ -150,7 +152,7 @@ function TokensComponent() {
         });
       }
 
-      if (!tokenType || isPoap) {
+      if (!hasPolygonChainFilter && (!tokenType || isPoap)) {
         fetchPoaps({
           owner,
           limit: isPoap ? 20 : 10,
@@ -160,6 +162,7 @@ function TokensComponent() {
       setTokens([]);
     }
   }, [
+    blockchainType,
     fetchAllBlockchains,
     fetchPoaps,
     fetchTokens,