Add DAO ordering and hiding preferences

apps/web/next.config.js

@@ -1,6 +1,7 @@
 const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin')
 const { withSentryConfig } = require('@sentry/nextjs')
 const createBundleAnalyzerPlugin = require('@next/bundle-analyzer')
+const path = require('path')
 const webpack = require('webpack')
 
 const {
@@ -136,6 +137,14 @@ const basicConfig = {
     })
 
     config.resolve.fallback = { fs: false, net: false, tls: false }
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      // MetaMask's SDK references React Native AsyncStorage even in web bundles.
+      '@react-native-async-storage/async-storage': path.resolve(
+        __dirname,
+        'src/shims/reactNativeAsyncStorage.js'
+      ),
+    }
 
     config.externals = config.externals || []
     config.externals.push('pino-pretty')

apps/web/package.json

@@ -91,8 +91,8 @@
   "scripts": {
     "analyze": "ANALYZE=true next build",
     "build": "next build",
-    "clean": "rm -rf .next .turbo",
-    "dev": "pnpm clean && NODE_OPTIONS='--max-old-space-size=4096' next dev",
+    "clean": "node -e \"require('fs').rmSync('.next', { recursive: true, force: true }); require('fs').rmSync('.turbo', { recursive: true, force: true });\"",
+    "dev": "pnpm exec next dev",
     "lint": "pnpm type-check && eslint --fix .",
     "start": "next start",
     "test": "vitest run",

apps/web/src/components/HiddenDaoDisclosure.css.ts

@@ -0,0 +1,44 @@
+import { color } from '@buildeross/zord'
+import { style } from '@vanilla-extract/css'
+
+export const hiddenDaoDisclosure = style({
+  width: '100%',
+})
+
+export const hiddenDaoDisclosureTrigger = style({
+  width: '100%',
+  minHeight: '28px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '4px 6px',
+  border: '0',
+  borderRadius: '10px',
+  background: 'transparent',
+  color: 'inherit',
+  textAlign: 'left',
+  transition: 'background-color 0.12s ease',
+  selectors: {
+    '&:hover': {
+      backgroundColor: color.background2,
+    },
+  },
+})
+
+export const hiddenDaoDisclosureChevron = style({
+  flexShrink: 0,
+  transition: 'transform 0.12s ease',
+})
+
+export const hiddenDaoDisclosureChevronOpen = style({
+  transform: 'rotate(0deg)',
+})
+
+export const hiddenDaoDisclosureChevronClosed = style({
+  transform: 'rotate(-90deg)',
+})
+
+export const hiddenDaoDisclosureContent = style({
+  width: '100%',
+  marginTop: '8px',
+})

apps/web/src/components/HiddenDaoDisclosure.tsx

@@ -0,0 +1,50 @@
+import { Box, Flex, Icon, Text } from '@buildeross/zord'
+import React from 'react'
+
+import {
+  hiddenDaoDisclosure,
+  hiddenDaoDisclosureChevron,
+  hiddenDaoDisclosureChevronClosed,
+  hiddenDaoDisclosureChevronOpen,
+  hiddenDaoDisclosureContent,
+  hiddenDaoDisclosureTrigger,
+} from './HiddenDaoDisclosure.css'
+
+type HiddenDaoDisclosureProps = {
+  children: React.ReactNode
+  count: number
+  isOpen: boolean
+  onToggle: () => void
+}
+
+export const HiddenDaoDisclosure: React.FC<HiddenDaoDisclosureProps> = ({
+  children,
+  count,
+  isOpen,
+  onToggle,
+}) => {
+  return (
+    <Box className={hiddenDaoDisclosure}>
+      <Box
+        as="button"
+        type="button"
+        className={hiddenDaoDisclosureTrigger}
+        onClick={onToggle}
+        aria-expanded={isOpen}
+      >
+        <Flex
+          align="center"
+          justify="center"
+          className={[
+            hiddenDaoDisclosureChevron,
+            isOpen ? hiddenDaoDisclosureChevronOpen : hiddenDaoDisclosureChevronClosed,
+          ]}
+        >
+          <Icon id="chevronDown" size="sm" />
+        </Flex>
+        <Text fontWeight="display">{`Hidden DAOs (${count})`}</Text>
+      </Box>
+      {isOpen ? <Box className={hiddenDaoDisclosureContent}>{children}</Box> : null}
+    </Box>
+  )
+}