feat: hide asset list unsupported tokens in accordion, closes #16

package.json

@@ -142,6 +142,7 @@
     "@octokit/types": "12.4.0",
     "@radix-ui/colors": "3.0.0",
     "@radix-ui/react-accessible-icon": "1.0.3",
+    "@radix-ui/react-accordion": "1.1.2",
     "@radix-ui/react-avatar": "1.0.4",
     "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",

src/app/features/asset-list/asset-list.tsx

@@ -31,6 +31,7 @@ import { AddStacksLedgerKeysItem } from './components/add-stacks-ledger-keys-ite
 import { ConnectLedgerAssetBtn } from './components/connect-ledger-asset-button';
 import { StacksBalanceListItem } from './components/stacks-balance-list-item';
 import { StacksFungibleTokenAssetList } from './components/stacks-fungible-token-asset-list';
+import { StacksUnsupportedTokenAssetList } from './components/stacks-unsupported-token-asset-list';
 
 export function AssetsList() {
   const hasBitcoinLedgerKeys = useHasBitcoinLedgerKeychain();
@@ -108,6 +109,9 @@ export function AssetsList() {
         )}
       </BitcoinNativeSegwitAccountLoader>
 
+      <CurrentStacksAccountLoader fallback={<AddStacksLedgerKeysItem />}>
+        {account => <StacksUnsupportedTokenAssetList address={account.address} />}
+      </CurrentStacksAccountLoader>
       <PendingBrc20TransferList />
 
       <Collectibles />

src/app/features/asset-list/components/stacks-fungible-token-asset-list.tsx

@@ -1,11 +1,15 @@
-import { useStacksFungibleTokenAssetBalancesWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
+import { useFilteredStacksFungibleTokenList } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 
 import { StacksFungibleTokenAssetListLayout } from './stacks-fungible-token-asset-list.layout';
 
 interface StacksFungibleTokenAssetListProps {
   address: string;
 }
 export function StacksFungibleTokenAssetList({ address }: StacksFungibleTokenAssetListProps) {
-  const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesWithMetadata(address);
-  return <StacksFungibleTokenAssetListLayout assetBalances={stacksFtAssetBalances} />;
+  const stacksFilteredFtAssetBalances = useFilteredStacksFungibleTokenList({
+    address,
+    filter: 'supported',
+  });
+
+  return <StacksFungibleTokenAssetListLayout assetBalances={stacksFilteredFtAssetBalances} />;
 }

src/app/features/asset-list/components/stacks-unsupported-token-asset-list.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+import { styled } from 'leather-styles/jsx';
+
+import { useFilteredStacksFungibleTokenList } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
+import { Accordion } from '@app/ui/components/accordion/accordion';
+
+import { StacksFungibleTokenAssetListLayout } from './stacks-fungible-token-asset-list.layout';
+
+const accordionValue = 'accordion-unsupported-token-asset-list';
+
+export function StacksUnsupportedTokenAssetList({ address }: { address: string }) {
+  const stacksFilteredFtAssetBalances = useFilteredStacksFungibleTokenList({
+    address,
+    filter: 'unsupported',
+  });
+
+  const [isOpen, setIsOpen] = useState(false);
+  function onValueChange(value: string) {
+    setIsOpen(value === accordionValue);
+  }
+
+  if (stacksFilteredFtAssetBalances.length === 0) {
+    return null;
+  }
+
+  return (
+    <Accordion.Root onValueChange={onValueChange} type="single" collapsible>
+      <Accordion.Item title="Stacks Fungible Tokens" value={accordionValue}>
+        <Accordion.Trigger>
+          <styled.span>View {isOpen ? 'fewer' : 'more'}</styled.span>
+        </Accordion.Trigger>
+        <Accordion.Content>
+          <StacksFungibleTokenAssetListLayout assetBalances={stacksFilteredFtAssetBalances} />
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}