treasury page update

apps/enterprise/src/pages/dao/DAOPageContent.tsx

@@ -33,11 +33,11 @@ export const DAOPageContent = () => {
             normal={() => (
               <ScrollableContainer
                 stickyRef={ref}
-                header={(visible) => (
-                  <StickyHeader visible={visible}>
-                    <Header compact={true} />
-                  </StickyHeader>
-                )}
+                // header={(visible) => (
+                //   <StickyHeader visible={visible}>
+                //     <Header compact={true} />
+                //   </StickyHeader>
+                // )}
               >
                 <PageLayout header={<Header ref={ref} />}>
                   <Outlet />

apps/enterprise/src/pages/dao/Header.tsx

@@ -27,6 +27,7 @@ export const Header = forwardRef((props: HeaderProps, ref: Ref<HTMLDivElement>)
     return (
       <Container ref={ref} className={classNames(className, styles.root, styles.compact)}>
         <div className={styles.logo}>
+          nbwaro
           <DAOLogo size="m" logo={getDaoLogo(dao)} />
         </div>
         <FavouriteToggle className={styles.favourite} dao={toDao(dao)} />

apps/enterprise/src/pages/dao/NFTCard.tsx

@@ -11,49 +11,56 @@ interface NFTCardProps {
 }
 
 export const NFTCard = (props: NFTCardProps) => {
-  const { nftCollectionAdress, tokenIds } = props;
-  const nftData = useNFTInfoQuery(nftCollectionAdress, tokenIds);
-  const nftObject = nftData.data as any;
-  return (
-    <>
-      {nftData.data &&
-        tokenIds.map((index) => {
-          if (nftObject[index].data) {
-            const nftCollectionInfo = nftObject[index]['data']['tokensPage']['collection']['collectionInfo'];
-            const nft = nftObject[index]['data']['tokensPage']['token'];
-            return (
-              <Container className={styles.card}>
-                <img src={nft.imageUrlFileserver} width={156} className={styles.nftPreview} alt="NFT Preview" />
-                <Container direction="column" className={styles.nftInfo} gap={16}>
-                  <Text className={styles.name} variant="label">
-                    {nft.name}
-                  </Text>
-                  {nft.price ? (
-                    <Text className={styles.price} variant="label">
-                      {nft.denom}
-                      {formatAmount(demicrofy(nft.price, 6))}{' '}
-                    </Text>
-                  ) : (
-                    <Text className={styles.price} variant="label">
-                      {nftCollectionInfo.floor_price && formatAmount(demicrofy(nftCollectionInfo.floor_price, 6))}{' '}
-                    </Text>
-                  )}
-                </Container>
-              </Container>
-            );
-          } else {
-            return (
-              <Container className={styles.card}>
-                <img src={nftObject[index].image_data} width={156} className={styles.nftPreview} alt="NFT Preview" />
-                <Container direction="column" className={styles.nftInfo} gap={16}>
-                  <Text className={styles.name} variant="label">
-                    {nftObject[index].name}
-                  </Text>
-                </Container>
-              </Container>
-            );
-          }
-        })}
-    </>
-  );
+    const { nftCollectionAdress, tokenIds } = props;
+    const nftData = useNFTInfoQuery(nftCollectionAdress, tokenIds);
+    const nftObject = nftData.data as any;
+    return (
+        <>
+            {nftData.data && (
+                tokenIds.map((index) => {
+                    if (nftObject[index].data) {
+                        const nftCollectionInfo = nftObject[index]["data"]["tokensPage"]["collection"]["collectionInfo"]
+                        const nft = nftObject[index]['data']['tokensPage']['token'];
+
+
+                        return (
+                            <Container className={styles.card}>
+                                <img src={nft.imageUrlFileserver} width={156} className={styles.nftPreview} alt="NFT Preview" />
+                                <Container direction="column" className={styles.nftInfo} gap={16}>
+                                    <Text className={styles.name} variant="label">
+                                        {nft.name}
+                                    </Text>
+                                    {nft.price ? (
+                                        <Text className={styles.price} variant="label">
+                                            {nft.denom}
+                                            {formatAmount(demicrofy(nft.price, 6))}{' '}
+                                        </Text>
+                                    ) : (
+                                        <Text className={styles.price} variant="label">
+                                            {nftCollectionInfo.floor_price && formatAmount(demicrofy(nftCollectionInfo.floor_price, 6))}{' '}
+                                        </Text>
+                                    )}
+                                </Container>
+                            </Container>
+                        );
+                    } else {
+                        return (
+                            <Container className={styles.card}>
+                                <img src={nftObject[index].image} width={156} className={styles.nftPreview} alt="NFT Preview" />
+                                <Container direction="column" className={styles.nftInfo} gap={16}>
+                                    <Text className={styles.name} variant="label">
+                                        {nftObject[index].name}
+                                    </Text>
+                                    <Text className={styles.price} variant="label">
+                                    </Text>
+                                </Container>
+                            </Container>
+                        )
+                    }
+                })
+            )}
+
+
+        </>
+    );
 };

apps/enterprise/src/pages/dao/TreasuryOverview.module.sass

@@ -13,6 +13,7 @@
   display: flex
   align-items: center
   justify-content: space-between
+  padding-left: 24px
 
 .link
   background-color: #252728
@@ -45,9 +46,21 @@
   width: 100%
 
 .nftContainer
+    justify-content: start
     flex-wrap: wrap
+    width: 100%
 
 .scrollableContainer
     width: 100% 
     height: 500px
-    overflow-x: hidden
+    overflow-x: hidden
+
+.nftsActionContainer
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    width: 100%
+    gap: 16px
+
+.nftsActionContainer > :first-child 
+  flex: 1

apps/enterprise/src/pages/dao/TreasuryOverview.tsx

@@ -1,4 +1,4 @@
-import { Container, ScrollableContainer } from '@terra-money/apps/components';
+import { Container } from '@terra-money/apps/components';
 import { Panel } from 'components/panel';
 import { NFTPairs, useNFTsOwnersQuery } from 'queries';
 import { TreasuryTokensOverview } from './TreasuryTokensOverview';
@@ -9,11 +9,28 @@ import { Text } from 'components/primitives';
 import { useDAONFTsWhitelist } from 'queries/useDAONFTsWhitelist';
 import { CW20Addr } from '@terra-money/apps/types';
 import { useCurrentDaoAddress } from 'dao/navigation';
+import { ViewMoreNft } from './viewMoreNft';
+import { DepositIntoTreasury } from './deposit';
+import { useState, useEffect, useMemo } from 'react';
+import { DepositNFTIntoTreasury } from './depositNFT';
 
 export const TreasuryOverview = () => {
   const address = useCurrentDaoAddress();
   const dao = useCurrentDao();
 
+
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    }
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   const { data: whitelist = [] } = useDAONFTsWhitelist(address);
 
   let nftCollection: NFTPairs[] | undefined = [];
@@ -23,6 +40,35 @@ export const TreasuryOverview = () => {
   } else {
     nftCollection = [];
   }
+
+  const minimumNFTsAmmount = 3;
+
+  const nftDisplayLimit = useMemo(() => {
+
+    const breakpoints = [1150, 1290, 1404, 1550, 1750, 2000]
+    const displayLimits = [3, 4, 4, 5, 5, 6]
+
+    for (let i = breakpoints.length - 1; i >= 0; i--) {
+      if (windowWidth >= breakpoints[i]) {
+        return displayLimits[i];
+      }
+    }
+    return minimumNFTsAmmount;
+  }, [windowWidth]);
+
+  let nftTokensToDisplay = [];
+
+  if (nftCollection) {
+    for (let i = 0; i < nftCollection.length && nftTokensToDisplay.length < nftDisplayLimit; i++) {
+      const nft = nftCollection[i];
+      if (nft.tokenIds.tokens?.length) {
+        for (let j = 0; j < nft.tokenIds.tokens.length && nftTokensToDisplay.length < nftDisplayLimit; j++) {
+          const token = nft.tokenIds.tokens[j];
+          nftTokensToDisplay.push({ token: [token], collectionAddress: nft.collectionAddress });
+        }
+      }
+    }
+  }
 
   return (
     <>
@@ -31,35 +77,33 @@ export const TreasuryOverview = () => {
           <TreasuryTokensOverview />
         </Container>
       </Panel>
-      <Container className={styles.nftAssets} direction="column" gap={8}>
+      <Container className={styles.nftAssets} direction="column" gap={24}>
         <Text className={styles.label} variant="heading4">
           NFT Treasury
         </Text>
-        <ScrollableContainer className={styles.scrollableContainer}>
-          <Container direction="row" gap={8} className={styles.nftContainer}>
-            <>
-              {nftCollection?.length && nftCollection[0]?.tokenIds.length !== 0 ? (
-                nftCollection
-                  .filter((nftColitem) => nftColitem.tokenIds.length !== 0)
-                  .map((nft, index) => {
-                    return (
-                      <NFTCard
-                        key={index}
-                        nftCollectionAdress={nft.collectionAddress}
-                        tokenIds={nft.tokenIds.tokens ? nft.tokenIds.tokens : nft.tokenIds.ids}
-                      />
-                    );
-                  })
-              ) : (
-                <Container className={styles.noNFTToDisplay}>
-                  <Text className={styles.noNFTLabel} variant="label">
-                    No NFTs yet.
-                  </Text>
-                </Container>
-              )}
-            </>
-          </Container>
-        </ScrollableContainer>
+        <Container direction="row" gap={8} className={styles.nftContainer}>
+          <>
+            {nftTokensToDisplay.length !== 0 ? (
+              nftTokensToDisplay.map((nft, index) => (
+                <NFTCard
+                  key={index}
+                  nftCollectionAdress={nft.collectionAddress}
+                  tokenIds={nft.token}
+                />
+              ))
+            ) : (
+              <Container className={styles.noNFTToDisplay}>
+                <Text className={styles.noNFTLabel} variant="label">
+                  No NFTs were added to the treasury yet.
+                </Text>
+              </Container>
+            )}
+          </>
+        </Container>
+        {nftCollection?.length && <Container gap={16} className={styles.nftsActionContainer}>
+          <ViewMoreNft />
+         <DepositNFTIntoTreasury />
+        </Container>}
       </Container>
     </>
   );

apps/enterprise/src/pages/dao/TreasuryTokensOverview.module.sass

@@ -0,0 +1,9 @@
+.assetsActionsContainer
+    display: flex
+    flex-direction: row
+    justify-content: space-between
+    width: 100%
+    gap: 16px
+
+.assetsActionsContainer > :first-child 
+  flex: 1

apps/enterprise/src/pages/dao/TreasuryTokensOverview.tsx

@@ -12,6 +12,9 @@ import { DaoTVL } from './DaoTVL';
 import { useDaoAssets } from 'queries/useDaoAssets';
 import { sum } from 'lib/shared/utils/sum';
 import { getAssetBalanceInUsd } from 'chain/Asset';
+import styles from './TreasuryTokensOverview.module.sass'
+import { Container } from '@terra-money/apps/components';
+import { ViewMoreAssets } from './viewMoreAssets';
 
 export type TreasuryToken = Token & { amount: u<BigSource>; usdAmount?: BigSource };
 
@@ -50,6 +53,7 @@ const SmallScreenWidthContainer = styled.div`
   gap: 12px;
 `;
 
+
 export const TreasuryTokensOverview = () => {
   const address = useCurrentDaoAddress();
 
@@ -65,15 +69,16 @@ export const TreasuryTokensOverview = () => {
   };
 
   const renderAssets = () => {
-    const treasuryTotalInUSD = sum(assets.map(getAssetBalanceInUsd))
-
-    const sortedAssets = assets.sort((a, b) => getAssetBalanceInUsd(b) - getAssetBalanceInUsd(a))
-
+    const treasuryTotalInUSD = sum(assets.map(getAssetBalanceInUsd));
+    const sortedAssets = assets.sort((a, b) => getAssetBalanceInUsd(b) - getAssetBalanceInUsd(a));
     return (
       <AssetsContainer>
-        {sortedAssets.map((asset, index) => (
-          <AssetCard key={index} token={asset} treasuryTotalInUSD={treasuryTotalInUSD}></AssetCard>
-        ))}
+        {sortedAssets.map((asset, index) => {
+          if (index < 9) {
+            return <AssetCard key={index} token={asset} treasuryTotalInUSD={treasuryTotalInUSD} />;
+          }
+          return null;
+        })}
       </AssetsContainer>
     );
   };
@@ -89,10 +94,14 @@ export const TreasuryTokensOverview = () => {
       )}
       normal={() => (
         <NormalScreenWidthContainer>
-          <VStack fullHeight fullWidth justifyContent="space-between" gap={8}>
+          <VStack fullHeight fullWidth justifyContent="space-between" gap={24}>
             {renderBasicInfo()}
             {renderAssets()}
-            <DepositIntoTreasury />
+            <Container className={styles.assetsActionsContainer} gap={16}>
+              <ViewMoreAssets />
+              <DepositIntoTreasury />
+            </Container>
+
           </VStack>
         </NormalScreenWidthContainer>
       )}

apps/enterprise/src/pages/dao/depositNFT/DepositNFT.tsx

@@ -0,0 +1,11 @@
+import { PrimaryButton } from "lib/ui/buttons/rect/PrimaryButton"
+
+export const DepositNFT = () => {
+    return (
+        <>
+            <PrimaryButton kind="secondary">
+                Close
+            </PrimaryButton>
+        </>
+    )
+}

apps/enterprise/src/pages/dao/depositNFT/DepositNFTIntoTreasuryOverlay.tsx

@@ -0,0 +1,24 @@
+import { ClosableComponentProps } from 'lib/shared/props';
+import { Modal } from 'lib/ui/Modal';
+import { VStack } from 'lib/ui/Stack';
+import { DepositNFT } from './DepositNFT';
+
+
+
+export const DepositNFTIntoTreasuryOverlay = ({ onClose }: ClosableComponentProps) => {
+
+
+  return (
+    <Modal
+      title="Deposit NFTs"
+      onClose={onClose}
+      renderContent={() => {
+        return (
+          <VStack gap={32}>
+            <DepositNFT />
+          </VStack>
+        );
+      }}
+    />
+  );
+};