From 5c3b3bff68f4b206e6f02e226900187f777e1802 Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Fri, 25 Oct 2024 16:31:21 +0200 Subject: [PATCH 01/15] feat: implement Featured tab with dummy data --- src/assets/data/featured.json | 48 +++++++++ src/assets/locales/en/common.json | 3 +- src/components/daoCard/index.tsx | 32 +++--- src/containers/daoExplorer/daoExplorer.tsx | 110 ++++++++++++--------- src/containers/daoFilterModal/data.ts | 10 +- src/containers/daoFilterModal/index.tsx | 2 +- src/pages/explore.tsx | 1 - src/services/aragon-backend/domain/dao.ts | 11 +++ src/utils/normalizeFeaturedDao.ts | 15 +++ 9 files changed, 164 insertions(+), 68 deletions(-) create mode 100644 src/assets/data/featured.json create mode 100644 src/utils/normalizeFeaturedDao.ts diff --git a/src/assets/data/featured.json b/src/assets/data/featured.json new file mode 100644 index 000000000..86b195944 --- /dev/null +++ b/src/assets/data/featured.json @@ -0,0 +1,48 @@ +[ + { + "daoName": "CryptoPioneers", + "description": "A DAO dedicated to pioneering blockchain innovations and fostering decentralized technologies.", + "avatarUrl": "https://example.com/avatars/cryptopioneers.png", + "blockchain": "ethereum", + "daoAddress": "0x1234567890abcdef1234567890abcdef12345678", + "urlOverride": "https://cryptopioneers.io/custom-link" + }, + { + "daoName": "DeFiMasters", + "description": "Mastering decentralized finance through community-driven projects and initiatives.", + "avatarUrl": "https://example.com/avatars/defimasters.png", + "blockchain": "polygon", + "daoAddress": "0xabcdef1234567890abcdef1234567890abcdef12" + }, + { + "daoName": "NFTCollectors", + "description": "A vibrant community of NFT enthusiasts focused on collecting and promoting unique digital assets.", + "avatarUrl": "https://example.com/avatars/nftcollectors.png", + "blockchain": "polygon", + "daoAddress": "0x7890abcdef1234567890abcdef1234567890abcd", + "urlOverride": "https://nftcollectors.io" + }, + { + "daoName": "GreenChain", + "description": "Promoting sustainable blockchain solutions and eco-friendly crypto practices.", + "avatarUrl": "https://example.com/avatars/greenchain.png", + "blockchain": "sepolia", + "daoAddress": "0x4567890abcdef1234567890abcdef1234567890ef" + }, + { + "daoName": "MetaBuilders", + "description": "Building the future of the metaverse through collaborative projects and virtual initiatives.", + "avatarUrl": "https://example.com/avatars/metabuilders.png", + "blockchain": "arbitrum", + "daoAddress": "0xabcdef7890abcdef1234567890abcdef12345678", + "urlOverride": "https://metabuilders.io/projects" + }, + { + "daoName": "FreakyDeakyDAO", + "description": "Here to be freaky and deaky, this DAO is all about pushing the boundaries of decentralized creativity.", + "avatarUrl": "https://example.com/avatars/freakydeakydao.png", + "blockchain": "arbitrum", + "daoAddress": "0x1234567890abcdef1234567890abcdef12345678", + "urlOverride": "https://freakydeakydao.io" + } +] diff --git a/src/assets/locales/en/common.json b/src/assets/locales/en/common.json index bbead2169..fc5dcc89b 100644 --- a/src/assets/locales/en/common.json +++ b/src/assets/locales/en/common.json @@ -1039,7 +1039,8 @@ "linkURL": "https://aragon.org/education-portal" }, "toggleFilter": { - "Favourites": "Following", + "favourites": "Following", + "featuredDAOs": "Featured", "allDAOs": "All DAOs ", "member": "Member" }, diff --git a/src/components/daoCard/index.tsx b/src/components/daoCard/index.tsx index 0d63afada..f433f000a 100644 --- a/src/components/daoCard/index.tsx +++ b/src/components/daoCard/index.tsx @@ -1,7 +1,6 @@ import {AvatarDao} from '@aragon/ods-old'; -import {Icon, IconType} from '@aragon/ods'; +import {AvatarIcon, Icon, IconType} from '@aragon/ods'; import React from 'react'; -import {useTranslation} from 'react-i18next'; import styled from 'styled-components'; import useScreen from 'hooks/useScreen'; import {generatePath, useHref} from 'react-router-dom'; @@ -17,9 +16,8 @@ export interface IDaoCardProps { export const DaoCard = (props: IDaoCardProps) => { const {dao} = props; - const {name, daoAddress, logo, ens, description, network, pluginName} = dao; + const {name, daoAddress, logo, ens, description, network, overrideUrl} = dao; - const {t} = useTranslation(); const {isDesktop} = useScreen(); const {avatar} = useResolveDaoAvatar(logo); @@ -29,23 +27,18 @@ export const DaoCard = (props: IDaoCardProps) => { }); const daoUrl = useHref(daoPage); - // TODO: This should be changed for new plugin types - const daoType = - pluginName === 'token-voting.plugin.dao.eth' || - pluginName === 'token-voting-repo' - ? t('explore.explorer.tokenBased') - : t('explore.explorer.walletBased'); + const resolvedDaoUrl = overrideUrl ?? daoUrl; return ( - +
{name} -

- {toDisplayEns(ens)} -

{description} @@ -58,10 +51,11 @@ export const DaoCard = (props: IDaoCardProps) => { /> {CHAIN_METADATA[network].name} - - - {daoType} - + {overrideUrl != null && ( + + + + )} ); @@ -109,7 +103,7 @@ const Description = styled.p.attrs({ `; const DaoMetadataWrapper = styled.div.attrs({ - className: 'flex flex-row space-x-6', + className: 'flex flex-row justify-between items-center', })``; const IconLabel = styled.p.attrs({ className: 'text-neutral-600 ft-text-sm', diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index c345633f4..7f981dc57 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -3,7 +3,7 @@ import {Spinner, Button, IconType, CardEmptyState, Dropdown} from '@aragon/ods'; import {useTranslation} from 'react-i18next'; import styled from 'styled-components'; import {Address} from 'viem'; - +import featuredDaosData from 'assets/data/featured.json'; import {DaoCard} from 'components/daoCard'; import DaoFilterModal, {DEFAULT_FILTERS} from 'containers/daoFilterModal'; import { @@ -13,7 +13,7 @@ import { import {NavigationDao} from 'context/apolloClient'; import {useFollowedDaosInfiniteQuery} from 'hooks/useFollowedDaos'; import {useWallet} from 'hooks/useWallet'; -import {IDao} from 'services/aragon-backend/domain/dao'; +import {IDao, IFeaturedDao} from 'services/aragon-backend/domain/dao'; import {OrderDirection} from 'services/aragon-backend/domain/ordered-request'; import {useDaos} from 'services/aragon-backend/queries/use-daos'; import {getSupportedNetworkByChainId} from 'utils/constants'; @@ -23,6 +23,7 @@ import { quickFilters, } from '../daoFilterModal/data'; import {Toggle, ToggleGroup} from '@aragon/ods'; +import {normalizeFeaturedDao} from 'utils/normalizeFeaturedDao'; const followedDaoToDao = (dao: NavigationDao): IDao => ({ creatorAddress: '' as Address, @@ -103,6 +104,12 @@ export const DaoExplorer = () => { const {isLoading, hasNextPage, isFetchingNextPage, fetchNextPage} = useFollowList ? followedDaosResult : newDaosResult; + const featuredDaos: IFeaturedDao[] = featuredDaosData.map( + dao => dao as IFeaturedDao + ); + + const featuredDaoList: IDao[] = featuredDaos.map(normalizeFeaturedDao); + const totalDaos = useFollowList ? followedDaosResult.data?.pages[0].total ?? 0 : newDaosResult.data?.pages[0].total ?? 0; @@ -145,19 +152,19 @@ export const DaoExplorer = () => { value={filters.quickFilter} onChange={toggleQuickFilters} > - {quickFilters.map(f => { - return ( - - ); - })} + {quickFilters + .filter(f => { + if ( + !isConnected && + (f.value === 'memberOf' || f.value === 'following') + ) { + return false; + } + return true; + }) + .map(f => ( + + ))} - )} - - {t('explore.pagination.label.amountOf DAOs', { - amount: totalDaosShown, - total: totalDaos, - })} - - - )} + {totalDaos != null && + totalDaos > 0 && + totalDaosShown > 0 && + filters.quickFilter !== 'featuredDaos' && ( +
+ {hasNextPage && ( + + )} + + {t('explore.pagination.label.amountOf DAOs', { + amount: totalDaosShown, + total: totalDaos, + })} + +
+ )} { + return { + name: featuredDao.daoName, + description: featuredDao.description, + logo: featuredDao.avatarUrl, + daoAddress: featuredDao.daoAddress, + network: featuredDao.blockchain, + creatorAddress: '0x0000000000000000000000000000000000000000', + createdAt: '', + pluginName: '', + overrideUrl: featuredDao.urlOverride, + }; +}; From 60d53d86ce7de81b678d695b33cb9cf3cef91b38 Mon Sep 17 00:00:00 2001 From: "heykd.eth" <65736142+thekidnamedkd@users.noreply.github.com> Date: Fri, 25 Oct 2024 07:40:44 -0700 Subject: [PATCH 02/15] Update featured.json --- src/assets/data/featured.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/data/featured.json b/src/assets/data/featured.json index 86b195944..f591f0b1b 100644 --- a/src/assets/data/featured.json +++ b/src/assets/data/featured.json @@ -1,6 +1,6 @@ [ { - "daoName": "CryptoPioneers", + "daoName": "JankCryptoPioneers", "description": "A DAO dedicated to pioneering blockchain innovations and fostering decentralized technologies.", "avatarUrl": "https://example.com/avatars/cryptopioneers.png", "blockchain": "ethereum", From 9bc16797767f86156f5fb1e35c5ac79ddc792fd3 Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Fri, 25 Oct 2024 16:44:42 +0200 Subject: [PATCH 03/15] feat: implement hook for fetching data dynamically from origin --- src/containers/daoExplorer/daoExplorer.tsx | 18 ++++++++++++------ src/hooks/useFeaturedDaos.ts | 20 ++++++++++++++++++++ 2 files changed, 32 insertions(+), 6 deletions(-) create mode 100644 src/hooks/useFeaturedDaos.ts diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index 7f981dc57..5c937794a 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -3,7 +3,7 @@ import {Spinner, Button, IconType, CardEmptyState, Dropdown} from '@aragon/ods'; import {useTranslation} from 'react-i18next'; import styled from 'styled-components'; import {Address} from 'viem'; -import featuredDaosData from 'assets/data/featured.json'; + import {DaoCard} from 'components/daoCard'; import DaoFilterModal, {DEFAULT_FILTERS} from 'containers/daoFilterModal'; import { @@ -13,7 +13,7 @@ import { import {NavigationDao} from 'context/apolloClient'; import {useFollowedDaosInfiniteQuery} from 'hooks/useFollowedDaos'; import {useWallet} from 'hooks/useWallet'; -import {IDao, IFeaturedDao} from 'services/aragon-backend/domain/dao'; +import {IDao} from 'services/aragon-backend/domain/dao'; import {OrderDirection} from 'services/aragon-backend/domain/ordered-request'; import {useDaos} from 'services/aragon-backend/queries/use-daos'; import {getSupportedNetworkByChainId} from 'utils/constants'; @@ -24,6 +24,7 @@ import { } from '../daoFilterModal/data'; import {Toggle, ToggleGroup} from '@aragon/ods'; import {normalizeFeaturedDao} from 'utils/normalizeFeaturedDao'; +import {useFeaturedDaos} from 'hooks/useFeaturedDaos'; const followedDaoToDao = (dao: NavigationDao): IDao => ({ creatorAddress: '' as Address, @@ -104,11 +105,13 @@ export const DaoExplorer = () => { const {isLoading, hasNextPage, isFetchingNextPage, fetchNextPage} = useFollowList ? followedDaosResult : newDaosResult; - const featuredDaos: IFeaturedDao[] = featuredDaosData.map( - dao => dao as IFeaturedDao - ); + const {data: featuredDaos, isLoading: isLoadingFeaturedDaos} = + useFeaturedDaos(); - const featuredDaoList: IDao[] = featuredDaos.map(normalizeFeaturedDao); + // Normalize the featured DAOs data + const featuredDaoList: IDao[] = featuredDaos + ? featuredDaos.map(normalizeFeaturedDao) + : []; const totalDaos = useFollowList ? followedDaosResult.data?.pages[0].total ?? 0 @@ -261,6 +264,9 @@ export const DaoExplorer = () => { ) )} + {isLoadingFeaturedDaos && ( + + )} ) : ( <> diff --git a/src/hooks/useFeaturedDaos.ts b/src/hooks/useFeaturedDaos.ts new file mode 100644 index 000000000..2db990ba5 --- /dev/null +++ b/src/hooks/useFeaturedDaos.ts @@ -0,0 +1,20 @@ +import {useQuery} from '@tanstack/react-query'; +import {IFeaturedDao} from 'services/aragon-backend/domain/dao'; + +const FEATURED_DAOS_URL = + 'https://raw.githubusercontent.com/aragon/app/60d53d86ce7de81b678d695b33cb9cf3cef91b38/src/assets/data/featured.json'; + +const fetchFeaturedDaos = async (): Promise => { + const response = await fetch(FEATURED_DAOS_URL); + + if (!response.ok) { + throw new Error('Failed to fetch featured DAOs'); + } + + const data: IFeaturedDao[] = await response.json(); + return data; +}; + +export const useFeaturedDaos = () => { + return useQuery({queryKey: ['featuredDaos'], queryFn: fetchFeaturedDaos}); +}; From 6e9adb802808665890d60f1d562a23ea73e1d954 Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Fri, 25 Oct 2024 17:05:16 +0200 Subject: [PATCH 04/15] chore: add 'Create a DAO' button to explorer --- src/containers/daoExplorer/daoExplorer.tsx | 145 +++++++++++---------- 1 file changed, 76 insertions(+), 69 deletions(-) diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index 5c937794a..6b56b5878 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -170,77 +170,84 @@ export const DaoExplorer = () => { ))} - - {filters.quickFilter !== 'following' && ( - { - setActiveDropdown(e); - }} - customTrigger={ - + {filters.quickFilter !== 'following' && ( + { + setActiveDropdown(e); + }} + customTrigger={ + {noDaosFound ? ( From 3997ad99ba254d3c09936d77e67c3c66610c8301 Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Fri, 25 Oct 2024 17:15:53 +0200 Subject: [PATCH 05/15] feat: add fallback empty state logic for Featured tab --- src/containers/daoExplorer/daoExplorer.tsx | 11 +++++++++-- src/hooks/useFeaturedDaos.ts | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index 6b56b5878..90494fe69 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -138,6 +138,11 @@ export const DaoExplorer = () => { const noDaosFound = isLoading === false && totalDaos === 0; + const noFeaturedDaosFound = + isLoadingFeaturedDaos === false && + !featuredDaos && + filters.quickFilter === 'featuredDaos'; + const handleClearFilters = () => { dispatch({type: FilterActionTypes.RESET, payload: DEFAULT_FILTERS}); }; @@ -247,10 +252,12 @@ export const DaoExplorer = () => { )} )} - + - {noDaosFound ? ( + {noDaosFound || noFeaturedDaosFound ? ( => { const response = await fetch(FEATURED_DAOS_URL); From e807edc0a07d6092fd91c0b8d6fb8b17bfeafd49 Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Fri, 25 Oct 2024 17:29:12 +0200 Subject: [PATCH 06/15] chore: imrove 'Create a DAO' button for wallet connect --- src/containers/daoExplorer/daoExplorer.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index 90494fe69..d6b6dc49f 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -40,7 +40,7 @@ const followedDaoToDao = (dao: NavigationDao): IDao => ({ export const DaoExplorer = () => { const {t} = useTranslation(); - const {isConnected, address} = useWallet(); + const {isConnected, address, methods} = useWallet(); const [showAdvancedFilters, setShowAdvancedFilters] = useState(false); const [activeDropdown, setActiveDropdown] = useState(false); @@ -147,6 +147,16 @@ export const DaoExplorer = () => { dispatch({type: FilterActionTypes.RESET, payload: DEFAULT_FILTERS}); }; + const handleWalletButtonClick = () => { + if (isConnected) { + return; + } + + methods.selectWallet().catch((err: Error) => { + console.error(err); + }); + }; + /************************************************* * Render * *************************************************/ @@ -252,7 +262,11 @@ export const DaoExplorer = () => { )} )} - From e911a6c6188e966095efbe8a97fd1ae0af883299 Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Fri, 25 Oct 2024 18:01:39 +0200 Subject: [PATCH 07/15] chore: remove normalizer, update endpoint, adjust interfaces --- src/components/daoCard/index.tsx | 6 +++++- src/containers/daoExplorer/daoExplorer.tsx | 12 +++--------- src/hooks/useFeaturedDaos.ts | 8 ++++---- src/services/aragon-backend/domain/dao.ts | 11 ----------- src/utils/normalizeFeaturedDao.ts | 15 --------------- 5 files changed, 12 insertions(+), 40 deletions(-) delete mode 100644 src/utils/normalizeFeaturedDao.ts diff --git a/src/components/daoCard/index.tsx b/src/components/daoCard/index.tsx index f433f000a..2198ebb35 100644 --- a/src/components/daoCard/index.tsx +++ b/src/components/daoCard/index.tsx @@ -10,8 +10,12 @@ import {toDisplayEns} from 'utils/library'; import {Dashboard} from 'utils/paths'; import {IDao} from 'services/aragon-backend/domain/dao'; +interface IDaoWithOverride extends IDao { + overrideUrl?: string; +} + export interface IDaoCardProps { - dao: IDao; + dao: IDaoWithOverride; } export const DaoCard = (props: IDaoCardProps) => { diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index d6b6dc49f..dd673e840 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -23,7 +23,6 @@ import { quickFilters, } from '../daoFilterModal/data'; import {Toggle, ToggleGroup} from '@aragon/ods'; -import {normalizeFeaturedDao} from 'utils/normalizeFeaturedDao'; import {useFeaturedDaos} from 'hooks/useFeaturedDaos'; const followedDaoToDao = (dao: NavigationDao): IDao => ({ @@ -105,14 +104,9 @@ export const DaoExplorer = () => { const {isLoading, hasNextPage, isFetchingNextPage, fetchNextPage} = useFollowList ? followedDaosResult : newDaosResult; - const {data: featuredDaos, isLoading: isLoadingFeaturedDaos} = + const {data: featuredDaoList, isLoading: isLoadingFeaturedDaos} = useFeaturedDaos(); - // Normalize the featured DAOs data - const featuredDaoList: IDao[] = featuredDaos - ? featuredDaos.map(normalizeFeaturedDao) - : []; - const totalDaos = useFollowList ? followedDaosResult.data?.pages[0].total ?? 0 : newDaosResult.data?.pages[0].total ?? 0; @@ -140,7 +134,7 @@ export const DaoExplorer = () => { const noFeaturedDaosFound = isLoadingFeaturedDaos === false && - !featuredDaos && + !featuredDaoList && filters.quickFilter === 'featuredDaos'; const handleClearFilters = () => { @@ -287,7 +281,7 @@ export const DaoExplorer = () => { {filters.quickFilter === 'featuredDaos' ? ( <> - {featuredDaoList.map( + {featuredDaoList?.map( (dao: IDao, index: React.Key | null | undefined) => ( ) diff --git a/src/hooks/useFeaturedDaos.ts b/src/hooks/useFeaturedDaos.ts index e0b610ce4..51f0d6cc9 100644 --- a/src/hooks/useFeaturedDaos.ts +++ b/src/hooks/useFeaturedDaos.ts @@ -1,17 +1,17 @@ import {useQuery} from '@tanstack/react-query'; -import {IFeaturedDao} from 'services/aragon-backend/domain/dao'; +import {IDao} from 'services/aragon-backend/domain/dao'; const FEATURED_DAOS_URL = - 'https://raw.githubusercontent.com/aragon/app/develop/src/assets/data/featured.json'; + 'https://raw.githubusercontent.com/aragon/app/refs/heads/develop/src/assets/data/featured-daos.json'; -const fetchFeaturedDaos = async (): Promise => { +const fetchFeaturedDaos = async (): Promise => { const response = await fetch(FEATURED_DAOS_URL); if (!response.ok) { throw new Error('Failed to fetch featured DAOs'); } - const data: IFeaturedDao[] = await response.json(); + const data: IDao[] = await response.json(); return data; }; diff --git a/src/services/aragon-backend/domain/dao.ts b/src/services/aragon-backend/domain/dao.ts index cbdb7c1c5..c1a6a173a 100644 --- a/src/services/aragon-backend/domain/dao.ts +++ b/src/services/aragon-backend/domain/dao.ts @@ -19,15 +19,4 @@ export interface IDao { createdAt: string; pluginName: string; stats?: IDaoStats; - overrideUrl?: string; -} - -export interface IFeaturedDao { - overrideUrl: string | undefined; - daoName: string; - description: string; - avatarUrl: string; - blockchain: SupportedNetworks; - daoAddress: Address; - urlOverride?: string; } diff --git a/src/utils/normalizeFeaturedDao.ts b/src/utils/normalizeFeaturedDao.ts deleted file mode 100644 index de13fedeb..000000000 --- a/src/utils/normalizeFeaturedDao.ts +++ /dev/null @@ -1,15 +0,0 @@ -import {IDao, IFeaturedDao} from 'services/aragon-backend/domain/dao'; - -export const normalizeFeaturedDao = (featuredDao: IFeaturedDao): IDao => { - return { - name: featuredDao.daoName, - description: featuredDao.description, - logo: featuredDao.avatarUrl, - daoAddress: featuredDao.daoAddress, - network: featuredDao.blockchain, - creatorAddress: '0x0000000000000000000000000000000000000000', - createdAt: '', - pluginName: '', - overrideUrl: featuredDao.urlOverride, - }; -}; From eb40d6c2ca069f2e4462193032d38e641ead1031 Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Fri, 25 Oct 2024 18:02:37 +0200 Subject: [PATCH 08/15] chore: remove JSON from main feature branch --- src/assets/data/featured.json | 48 ----------------------------------- 1 file changed, 48 deletions(-) delete mode 100644 src/assets/data/featured.json diff --git a/src/assets/data/featured.json b/src/assets/data/featured.json deleted file mode 100644 index f591f0b1b..000000000 --- a/src/assets/data/featured.json +++ /dev/null @@ -1,48 +0,0 @@ -[ - { - "daoName": "JankCryptoPioneers", - "description": "A DAO dedicated to pioneering blockchain innovations and fostering decentralized technologies.", - "avatarUrl": "https://example.com/avatars/cryptopioneers.png", - "blockchain": "ethereum", - "daoAddress": "0x1234567890abcdef1234567890abcdef12345678", - "urlOverride": "https://cryptopioneers.io/custom-link" - }, - { - "daoName": "DeFiMasters", - "description": "Mastering decentralized finance through community-driven projects and initiatives.", - "avatarUrl": "https://example.com/avatars/defimasters.png", - "blockchain": "polygon", - "daoAddress": "0xabcdef1234567890abcdef1234567890abcdef12" - }, - { - "daoName": "NFTCollectors", - "description": "A vibrant community of NFT enthusiasts focused on collecting and promoting unique digital assets.", - "avatarUrl": "https://example.com/avatars/nftcollectors.png", - "blockchain": "polygon", - "daoAddress": "0x7890abcdef1234567890abcdef1234567890abcd", - "urlOverride": "https://nftcollectors.io" - }, - { - "daoName": "GreenChain", - "description": "Promoting sustainable blockchain solutions and eco-friendly crypto practices.", - "avatarUrl": "https://example.com/avatars/greenchain.png", - "blockchain": "sepolia", - "daoAddress": "0x4567890abcdef1234567890abcdef1234567890ef" - }, - { - "daoName": "MetaBuilders", - "description": "Building the future of the metaverse through collaborative projects and virtual initiatives.", - "avatarUrl": "https://example.com/avatars/metabuilders.png", - "blockchain": "arbitrum", - "daoAddress": "0xabcdef7890abcdef1234567890abcdef12345678", - "urlOverride": "https://metabuilders.io/projects" - }, - { - "daoName": "FreakyDeakyDAO", - "description": "Here to be freaky and deaky, this DAO is all about pushing the boundaries of decentralized creativity.", - "avatarUrl": "https://example.com/avatars/freakydeakydao.png", - "blockchain": "arbitrum", - "daoAddress": "0x1234567890abcdef1234567890abcdef12345678", - "urlOverride": "https://freakydeakydao.io" - } -] From 024c3675181f8606c78eaf7d86ab4b3c210d0d12 Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Fri, 25 Oct 2024 18:51:46 +0200 Subject: [PATCH 09/15] chore: self review cleanup --- src/components/daoCard/index.tsx | 4 +--- src/containers/daoExplorer/daoExplorer.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/daoCard/index.tsx b/src/components/daoCard/index.tsx index 2198ebb35..56dc89b24 100644 --- a/src/components/daoCard/index.tsx +++ b/src/components/daoCard/index.tsx @@ -56,9 +56,7 @@ export const DaoCard = (props: IDaoCardProps) => { {CHAIN_METADATA[network].name} {overrideUrl != null && ( - - - + )} diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index dd673e840..261201135 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -134,7 +134,7 @@ export const DaoExplorer = () => { const noFeaturedDaosFound = isLoadingFeaturedDaos === false && - !featuredDaoList && + featuredDaoList != null && filters.quickFilter === 'featuredDaos'; const handleClearFilters = () => { From 8a3b77b023ad9e4e864c9148a6fbf748be071d7c Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Fri, 25 Oct 2024 19:18:23 +0200 Subject: [PATCH 10/15] chore: clean up button logic --- src/containers/daoExplorer/daoExplorer.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index 261201135..b56716801 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -79,7 +79,7 @@ export const DaoExplorer = () => { if (!filters) return ''; - if (filters.quickFilter !== DEFAULT_FILTERS.quickFilter) count++; + if (filters.quickFilter !== 'allDaos') count++; // plugin Name filter if (filters.pluginNames?.length !== 0) count++; @@ -134,7 +134,7 @@ export const DaoExplorer = () => { const noFeaturedDaosFound = isLoadingFeaturedDaos === false && - featuredDaoList != null && + featuredDaoList == null && filters.quickFilter === 'featuredDaos'; const handleClearFilters = () => { @@ -151,6 +151,8 @@ export const DaoExplorer = () => { }); }; + const showSortFilter = filters.quickFilter !== 'featuredDaos' && isConnected; + /************************************************* * Render * *************************************************/ @@ -179,13 +181,12 @@ export const DaoExplorer = () => { ))} - {isConnected && ( + {showSortFilter && ( <> @@ -360,9 +364,11 @@ const Title = styled.p.attrs({ })``; const FilterGroupContainer = styled.div.attrs({ - className: 'flex justify-between space-x-3', + className: + 'flex flex-col gap-y-3 md:flex-row items-center md:justify-between', })``; const ButtonGroupContainer = styled.div.attrs({ - className: 'flex space-x-3 items-start', + className: + 'flex flex-row-reverse md:flex-row gap-x-3 items-center justify-center md:w-fit w-full md:justify-between', })``; From f48ee76c80b8add1ea217a9ee5ffd47c03bc4b94 Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Tue, 29 Oct 2024 10:59:26 +0100 Subject: [PATCH 13/15] chore: update filters responsive layout to design convo --- src/containers/daoExplorer/daoExplorer.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index 7816d814a..b7b1c0dba 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -263,7 +263,7 @@ export const DaoExplorer = () => { size="md" href="/#/create" onClick={handleWalletButtonClick} - className="w-full md:w-fit md:shrink-0" + className="shrink-0 " > {t('cta.create.actionLabel')} @@ -369,6 +369,5 @@ const FilterGroupContainer = styled.div.attrs({ })``; const ButtonGroupContainer = styled.div.attrs({ - className: - 'flex flex-row-reverse md:flex-row gap-x-3 items-center justify-center md:w-fit w-full md:justify-between', + className: 'flex gap-x-3 w-full md:w-fit justify-between self-end', })``; From 2319dd984819874dad90b1831be3310d3830549c Mon Sep 17 00:00:00 2001 From: Kevin Davis Date: Tue, 29 Oct 2024 11:37:13 +0100 Subject: [PATCH 14/15] chore: update filters responsive layout to design convo v2 --- src/containers/daoExplorer/daoExplorer.tsx | 48 +++++++++++++++------- 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index b7b1c0dba..8c5327c64 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -24,6 +24,7 @@ import { } from '../daoFilterModal/data'; import {Toggle, ToggleGroup} from '@aragon/ods'; import {useFeaturedDaos} from 'hooks/useFeaturedDaos'; +import classNames from 'classnames'; const followedDaoToDao = (dao: NavigationDao): IDao => ({ creatorAddress: '' as Address, @@ -151,6 +152,32 @@ export const DaoExplorer = () => { const showSortFilter = filters.quickFilter !== 'featuredDaos' && isConnected; + const toggleGroupClassName = classNames('flex flex-row w-full', { + 'grid w-full grid-cols-2 gap-1 text-center md:flex md:w-fit md:flex-row': + isConnected, + }); + + const toggleClassName = classNames({ + 'flex w-full justify-center md:w-fit': isConnected, + }); + + const filterGroupClassName = classNames('flex justify-between w-full', { + 'flex flex-col items-center gap-y-3 md:flex-row md:justify-between': + isConnected, + }); + + const buttonGroupContainerClassName = classNames( + 'shrink-0', + { + 'flex w-full md:w-fit justify-end': + filters.quickFilter === 'featuredDaos', + }, + { + 'flex gap-x-3 w-full md:w-fit justify-between': + isConnected && filters.quickFilter !== 'featuredDaos', + } + ); + /************************************************* * Render * *************************************************/ @@ -158,12 +185,12 @@ export const DaoExplorer = () => { {t('explore.explorer.title')} - +
{quickFilters .filter(f => { @@ -180,11 +207,11 @@ export const DaoExplorer = () => { key={f.value} label={t(f.label)} value={f.value} - className="flex w-full justify-center md:w-fit" + className={toggleClassName} /> ))} - +
{showSortFilter && (
- - +
+
{noDaosFound || noFeaturedDaosFound ? ( Date: Tue, 29 Oct 2024 12:36:45 +0100 Subject: [PATCH 15/15] chore: classes cleanup --- src/containers/daoExplorer/daoExplorer.tsx | 24 ++++++++-------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/containers/daoExplorer/daoExplorer.tsx b/src/containers/daoExplorer/daoExplorer.tsx index 8c5327c64..b956e4216 100644 --- a/src/containers/daoExplorer/daoExplorer.tsx +++ b/src/containers/daoExplorer/daoExplorer.tsx @@ -152,6 +152,11 @@ export const DaoExplorer = () => { const showSortFilter = filters.quickFilter !== 'featuredDaos' && isConnected; + const filterGroupClassName = classNames('flex justify-between w-full', { + 'flex flex-col items-center gap-y-3 md:flex-row md:justify-between': + isConnected, + }); + const toggleGroupClassName = classNames('flex flex-row w-full', { 'grid w-full grid-cols-2 gap-1 text-center md:flex md:w-fit md:flex-row': isConnected, @@ -161,23 +166,12 @@ export const DaoExplorer = () => { 'flex w-full justify-center md:w-fit': isConnected, }); - const filterGroupClassName = classNames('flex justify-between w-full', { - 'flex flex-col items-center gap-y-3 md:flex-row md:justify-between': - isConnected, + const buttonGroupContainerClassName = classNames('shrink-0', { + 'flex w-full md:w-fit justify-end': filters.quickFilter === 'featuredDaos', + 'flex gap-x-3 w-full md:w-fit justify-between': + isConnected && filters.quickFilter !== 'featuredDaos', }); - const buttonGroupContainerClassName = classNames( - 'shrink-0', - { - 'flex w-full md:w-fit justify-end': - filters.quickFilter === 'featuredDaos', - }, - { - 'flex gap-x-3 w-full md:w-fit justify-between': - isConnected && filters.quickFilter !== 'featuredDaos', - } - ); - /************************************************* * Render * *************************************************/