Publish new lib versions. (#412)

* fix/fix-table-types (#354) * removed the any types from hub * renamed Table to DaoTable and DataTable to DaoTable to be more consistent with DaoCard * removed commented out DaoData type * one more comment -- thought i got both before * Fix/355 summon params mixup (#356) * more ignore * fixes bad init params order in summon tx * Feature/tag component (#349) * Created basic tag component * Added dynamic color selections for tags * Bumped versions fixed filer * Added icon support to tag component Co-authored-by: Jord <[email protected]> Co-authored-by: Jonathan Prozzi <[email protected]> * Feature/delegate play (#357) * more ignore * fixes bad init params order in summon tx * delegate testing and subgraph field updates * finishes mapping * update dao-data query and transformer * adds delegate tag to list view and hooks up delegate filtering * refactors filter into query helper * Spencer's Summon tooltip suggestions (#370) * Spencer's Summon tooltip suggestions - Summon portion of #365 * Delimiter references #368 For now, just referencing spaces. But if tabs, commas, or other delimiters are also supported, those should be references in the tooltips as well. * Address Jord's comments Co-authored-by: Sam Kuhlmann <[email protected]> * Fix/summon poll (#375) * more ignore * fixes bad init params order in summon tx * delegate testing and subgraph field updates * finishes mapping * update dao-data query and transformer * adds delegate tag to list view and hooks up delegate filtering * adds schema field to tx entity * updates poll for tx entity made before dao entity * Feature/alpha baal update (#376) * new abis * updates summoner tx logic and contract addresses * fixes transaction entity creation location; * fixes some test * Feature/unit utils (#380) * create custom d.ts for human-format * type and convert unit fn from V2 * readableNumber util accepts number strings, throws error if string but number string * fix 0 to 1 utils, extend MaxDecimals to shorten decimal places * refine spacer and unit symbol placement * update new card to handle new params * update table * corrections * alter d.ts file * potential solutions to ts bug * implement keating's d.ts fix * fix comment * Fix/network switcher (#381) * better error handling * fix bug * remove log * get react-table TS to stop yelling (#382) Co-authored-by: Sam Kuhlmann <[email protected]> * Feature/hub sort (#383) * wip * gets query working on dao entity after lots of subgraph updates * updates front end for sort * fixes type issue * fixes build issue * reviewing v3 monorepo and saw some networks missing (#399) * Feature/public profile (#384) * Add some stuff * Add public profile * Add ens * Get build to pass * Update apps/hub-app/src/pages/PublicProfilePage.tsx Co-authored-by: Rowdy <[email protected]> Co-authored-by: Sam Kuhlmann <[email protected]> Co-authored-by: Rowdy <[email protected]> * fixing doc display name from <[object Object]> to displayName (#402) Co-authored-by: Sam Kuhlmann <[email protected]> * adds search (#401) * adds search wip * correctly types the onChange for the input * cleans up unsed imports * naming * Feature/public profile (#384) * Add some stuff * Add public profile * Add ens * Get build to pass * Update apps/hub-app/src/pages/PublicProfilePage.tsx Co-authored-by: Rowdy <[email protected]> Co-authored-by: Sam Kuhlmann <[email protected]> Co-authored-by: Rowdy <[email protected]> * fixing doc display name from <[object Object]> to displayName (#402) Co-authored-by: Sam Kuhlmann <[email protected]> * conflicts * correctly types the onChange for the input * cleans up unsed imports * naming * fix build error Co-authored-by: Alexander Keating <[email protected]> Co-authored-by: Rowdy <[email protected]> Co-authored-by: Brian Rossetti <[email protected]> * Release/12072022 (#411) * adds search wip * correctly types the onChange for the input * cleans up unsed imports * naming * conflicts * correctly types the onChange for the input * cleans up unsed imports * naming * fix build error * feature bump Co-authored-by: Jonathan Prozzi <[email protected]> Co-authored-by: Rowdy <[email protected]> Co-authored-by: Jord <[email protected]> Co-authored-by: Spencer Graham <[email protected]> Co-authored-by: Brian Rossetti <[email protected]> Co-authored-by: Alexander Keating <[email protected]>
HausDAO · Jul 12, 2022 · bab7077 · bab7077
1 parent bc651e5
commit bab7077
Show file tree

Hide file tree

Showing 73 changed files with 1,816 additions and 366 deletions.
diff --git a/apps/hub-app/src/Routes.tsx b/apps/hub-app/src/Routes.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import { Routes as RoutesDom, Route } from 'react-router-dom';
 
 import HomePage from './pages/HomePage';
+import PublicProfilePage from './pages/PublicProfilePage';
 
 const Routes = () => {
   return (
     <RoutesDom>
       <Route path="/" element={<HomePage />} />
-      <Route path="/dashboard" element={<HomePage />} />
-      <Route path="/explore" element={<HomePage />} />
+      <Route path="profile/:address" element={<PublicProfilePage />} />
     </RoutesDom>
   );
 };

diff --git a/apps/hub-app/src/components/BodyNav.tsx b/apps/hub-app/src/components/BodyNav.tsx
@@ -79,17 +79,12 @@ const NavLink = ({ children, path, selected }: NavLinkProps) => {
 export const BodyNav = () => {
   const match = useMatch('/explore');
   const isHome = !match;
-  // const isExplore = !!match;
   return (
     <BodyNavContainer>
       <NavLink path="/" selected={isHome}>
         <StyledHamburgerMenu />
         Home
       </NavLink>
-      {/* <NavLink path="/explore" selected={isExplore}>
-        <StyledHamburgerMenu />
-        Explore
-      </NavLink> */}
     </BodyNavContainer>
   );
 };
diff --git a/apps/hub-app/src/components/DaoCard.tsx b/apps/hub-app/src/components/DaoCard.tsx
@@ -1,11 +1,10 @@
 import styled from 'styled-components';
 
-import { charLimit } from '@daohaus/common-utilities';
-import { Avatar, Bold, border, ParLg, ParMd } from '@daohaus/ui';
+import { charLimit, readableNumber } from '@daohaus/common-utilities';
+import { Bold, border, ParLg, ParMd, ProfileAvatar } from '@daohaus/ui';
 import { Tag } from './Tag';
 import { AlertCircle } from './AlertCircle';
 import { ITransformedMembership } from '@daohaus/dao-data';
-import FallBackDAOImage from '../assets/fallback-dao-logo.svg';
 
 const StyledDaoCard = styled.div`
   background-color: ${(props) => props.theme.card.bg};
@@ -45,10 +44,6 @@ const StyledDaoCard = styled.div`
   }
 `;
 
-// COMPONENT LIBRARY
-// Calling this AlertCircle. It's the circle that alerts
-// about the DAO's proposal status.
-
 export const DaoCard = ({
   isDelegate,
   dao,
@@ -65,7 +60,7 @@ export const DaoCard = ({
     <StyledDaoCard className="dao-card">
       <div className="top-box">
         <div className="alert-box">
-          <Avatar size="xl" src={FallBackDAOImage} />
+          <ProfileAvatar size="xl" address={dao} />
           {activeProposalCount > 0 && (
             <AlertCircle number={activeProposalCount} />
           )}
@@ -76,26 +71,40 @@ export const DaoCard = ({
         {name ? charLimit(name, 21) : charLimit(dao, 21)}{' '}
       </ParLg>
       <div className="stats-box">
-        <ParMd>
-          <Bold>{activeMemberCount}</Bold> Members
-        </ParMd>
-        <ParMd>
-          <Bold>{fiatTotal}</Bold> USD
-        </ParMd>
-        <ParMd>
-          <Bold>{totalProposalCount}</Bold> Proposals
-        </ParMd>
-        <ParMd>
-          <Bold>{votingPower}</Bold>% Voting Power
-        </ParMd>
+        {activeMemberCount && (
+          <ParMd>
+            <Bold>{readableNumber({ amount: activeMemberCount })}</Bold> Members
+          </ParMd>
+        )}
+        {fiatTotal != null && (
+          <ParMd>
+            <Bold>{readableNumber({ amount: fiatTotal, unit: 'USD' })}</Bold>
+          </ParMd>
+        )}
+        {totalProposalCount && (
+          <ParMd>
+            <Bold>{readableNumber({ amount: totalProposalCount })}</Bold>{' '}
+            Proposals
+          </ParMd>
+        )}
+        {votingPower && (
+          <ParMd>
+            <Bold>
+              {readableNumber({
+                amount: votingPower,
+                unit: '%',
+                separator: '',
+                maxDecimals: 2,
+              })}
+            </Bold>{' '}
+            Voting Power
+          </ParMd>
+        )}
       </div>
       <div className="tag-box">
         <Tag>{networkId}</Tag>
         <Tag>{contractType}</Tag>
       </div>
-      {/* <div>
-        <Button secondary>Go</Button>
-      </div> */}
     </StyledDaoCard>
   );
 };
diff --git a/apps/hub-app/src/components/Table.tsx → apps/hub-app/src/components/DaoTable.tsx b/apps/hub-app/src/components/Table.tsx → apps/hub-app/src/components/DaoTable.tsx
@@ -1,25 +1,18 @@
 import React from 'react';
-import { Keychain } from '@daohaus/common-utilities';
-import { useTable, Column } from 'react-table';
+import { ITransformedMembership } from '@daohaus/dao-data';
+import { useTable, Column, UseTableRowProps } from 'react-table';
 import styled from 'styled-components';
 import { indigoDark } from '@radix-ui/colors';
-import { Avatar } from '@daohaus/ui';
-import { BiGhost } from 'react-icons/bi';
-
-interface DaoData {
-  name: string;
-  activeProposalCount: number | string;
-  activeMemberCount: string;
-  votingPower: number;
-  networkId?: keyof Keychain;
-  delegate: string | undefined;
-  memberAddress?: string;
-  fiatTotal: number;
-  totalProposalCount?: string;
-}
+import { ProfileAvatar } from '@daohaus/ui';
+import {
+  readableNumber,
+  toDollars,
+  truncateAddress,
+} from '@daohaus/common-utilities';
+import { Tag } from './Tag';
 
 interface IDaoTableData {
-  daoData: DaoData[] | any;
+  daoData: ITransformedMembership[];
 }
 
 const Table = styled.table`
@@ -55,37 +48,54 @@ const FirstHeader = styled.p`
   padding-left: 1.6rem;
 `;
 
-const FirstCell = styled.p`
+const FirstCell = styled.div`
   text-align: left;
   display: flex;
   gap: 1.2rem;
   align-items: center;
 `;
 
-export const DataTable = ({ daoData }: IDaoTableData) => {
-  const tableData = React.useMemo<DaoData[]>(
+type HubTableType = Omit<ITransformedMembership, 'name'> & {
+  name: { name?: string; address: string };
+};
+
+export const DaoTable = ({ daoData }: IDaoTableData) => {
+  const tableData = React.useMemo<HubTableType[]>(
     () =>
-      daoData.map((dao: DaoData) => ({
-        name: dao.name,
+      daoData.map((dao: ITransformedMembership) => ({
+        name: { name: dao.name, address: dao.dao },
         activeProposalCount: dao.activeProposalCount,
         fiatTotal: dao.fiatTotal,
         activeMemberCount: dao.activeMemberCount,
         votingPower: dao.votingPower,
         networkId: dao.networkId,
-        delegate: dao.delegate === undefined ? 'No Delegate' : dao.delegate,
+        delegatingTo: dao.delegatingTo,
+        memberAddress: dao.memberAddress,
+        safeAddress: dao.safeAddress,
+        dao: dao.dao,
+        isDelegate: dao.isDelegate,
+        totalProposalCount: dao.totalProposalCount,
+        contractType: dao.contractType,
       })),
     [daoData]
   );
 
-  const exampleColumns = React.useMemo<Column<DaoData>[]>(
+  const exampleColumns = React.useMemo<Column<HubTableType>[]>(
     () => [
       {
         accessor: 'name', // accessor is the "key" in the data
-        Cell: ({ value }: { value: string | number }) => {
+        Cell: ({
+          value,
+          row,
+        }: {
+          value: { name?: string; address: string };
+          row: UseTableRowProps<HubTableType>;
+        }) => {
           return (
             <FirstCell>
-              <Avatar size="sm" fallback={<BiGhost />} />
-              {value}
+              <ProfileAvatar size="sm" address={value.address} />
+              {value.name}
+              {row.original.isDelegate && <Tag>Delegate</Tag>}
             </FirstCell>
           );
         },
@@ -97,30 +107,57 @@ export const DataTable = ({ daoData }: IDaoTableData) => {
         Header: 'Active Proposals',
         accessor: 'activeProposalCount',
         Cell: ({ value }: { value: string | number }) => {
-          return <Highlight>{value}</Highlight>;
+          return (
+            <Highlight>
+              {readableNumber({ amount: value, maxDecimals: 1 })}
+            </Highlight>
+          );
         },
       },
       {
         Header: 'Vaults',
         accessor: 'fiatTotal',
+        Cell: ({ value }: { value?: number }) => {
+          return (
+            <Highlight>{value != null ? toDollars(value, '') : '--'}</Highlight>
+          );
+        },
       },
       {
         Header: 'Members',
         accessor: 'activeMemberCount',
+        Cell: ({ value }: { value: string | number }) => {
+          return (
+            <Highlight>
+              {readableNumber({ amount: value, maxDecimals: 1 })}
+            </Highlight>
+          );
+        },
       },
       {
         Header: 'Power',
         accessor: 'votingPower',
+        Cell: ({ value }: { value: string | number }) => {
+          return (
+            <Highlight>
+              {readableNumber({ amount: value, unit: '%', separator: '' })}
+            </Highlight>
+          );
+        },
       },
       {
         Header: 'Network',
         accessor: 'networkId',
       },
       {
         Header: 'Delegate',
-        accessor: 'delegate',
+        accessor: 'delegatingTo',
         Cell: ({ value }: { value: string | undefined }) => {
-          return <Highlight>{value}</Highlight>;
+          return (
+            <Highlight>
+              {value === undefined ? '--' : truncateAddress(value)}
+            </Highlight>
+          );
         },
       },
     ],

diff --git a/apps/hub-app/src/components/HomeDashboard.tsx b/apps/hub-app/src/components/HomeDashboard.tsx
@@ -1,12 +1,12 @@
+import { MouseEvent, useState, ChangeEvent } from 'react';
 import { ITransformedMembership } from '@daohaus/dao-data';
 import { ParMd, Spinner, useBreakpoint, widthQuery } from '@daohaus/ui';
-import { MouseEvent, useState } from 'react';
 import styled from 'styled-components';
 
-import { ListType } from '../utils/appSpecificTypes';
 import { DaoCards } from './DaoCards';
-import { DataTable } from './Table';
+import { DaoTable } from './DaoTable';
 import TableControl from './TableControl';
+import { ListType } from '../utils/appSpecificTypes';
 
 // Refactored this to be a component that we might be able to reuse
 // for explore view and other similar views.
@@ -16,12 +16,15 @@ const Body = styled.div`
 `;
 
 type DashProps = {
-  // daoData: ITransformedMembership[] | any;
-  daoData: any;
+  daoData: ITransformedMembership[];
   filterNetworks: Record<string, string>;
   toggleNetworkFilter: (event: MouseEvent<HTMLButtonElement>) => void;
   filterDelegate: string;
   toggleDelegateFilter: (event: MouseEvent<HTMLButtonElement>) => void;
+  sortBy: string;
+  toggleSortBy: (event: MouseEvent<HTMLButtonElement>) => void;
+  searchTerm: string;
+  setSearchTerm: (event: ChangeEvent<HTMLInputElement>) => void;
   loading: boolean;
 };
 
@@ -31,6 +34,10 @@ export const HomeDashboard = ({
   toggleNetworkFilter,
   filterDelegate,
   toggleDelegateFilter,
+  sortBy,
+  toggleSortBy,
+  searchTerm,
+  setSearchTerm,
   loading,
 }: DashProps) => {
   const [listType, setListType] = useState<ListType>('cards');
@@ -39,6 +46,7 @@ export const HomeDashboard = ({
     listType === 'cards' ? setListType('table') : setListType('cards');
   };
   const noDaos = !daoData.length && !loading;
+
   if (loading) {
     return (
       <Body
@@ -71,6 +79,10 @@ export const HomeDashboard = ({
           toggleNetworkFilter={toggleNetworkFilter}
           filterDelegate={filterDelegate}
           toggleDelegateFilter={toggleDelegateFilter}
+          sortBy={sortBy}
+          toggleSortBy={toggleSortBy}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
         />
         <NoDaosFound />
       </Body>
@@ -86,6 +98,10 @@ export const HomeDashboard = ({
         toggleNetworkFilter={toggleNetworkFilter}
         filterDelegate={filterDelegate}
         toggleDelegateFilter={toggleDelegateFilter}
+        sortBy={sortBy}
+        toggleSortBy={toggleSortBy}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
       />
       {isMobile ? (
         <Mobile daoData={daoData} />
@@ -116,7 +132,7 @@ const Desktop = ({
   return (
     <>
       {listType === 'cards' && <DaoCards daoData={daoData} />}
-      {listType === 'table' && <DataTable daoData={daoData} />}
+      {listType === 'table' && <DaoTable daoData={daoData} />}
     </>
   );
 };