From 875ef5a1113ef8c008dcdd2d57d0cab37df830f8 Mon Sep 17 00:00:00 2001 From: roienatan <34843014+roienatan@users.noreply.github.com> Date: Tue, 18 Aug 2020 10:14:40 +0300 Subject: [PATCH] Support DAOs sort by total holdings (#2085) * fething daos balances * Support for DAOs total holdings ; sorting by total holdings * Update translation.json Missing comma after resolving conflicts. --- src/assets/locales/en/translation.json | 6 ++++ src/components/Daos/DaoCard.tsx | 11 +++---- src/components/Daos/Daos.scss | 9 +----- src/components/Daos/DaosPage.tsx | 44 ++++++++++++++++++++++---- src/lib/util.ts | 8 +++++ 5 files changed, 57 insertions(+), 21 deletions(-) diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index 1d1e9f700..221563426 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -28,6 +28,12 @@ "ETH Balance": "ETH Balance", "Members": "Members", "Plugin activation time": "The plugin will be activated at", + "Total Holdings": "Total Holdings", + "Create A DAO": "Create A DAO", + "Your DAOs": "Your DAOs", + "Other DAOs": "Other DAOs", + "All DAOs": "All DAOs", + "Open Proposals": "Open Proposals", "3BoxLoginSuccess": "Logged in to 3Box", "3BoxProfileSuccess": "Profile data saved to 3Box", "Following": "Now following", diff --git a/src/components/Daos/DaoCard.tsx b/src/components/Daos/DaoCard.tsx index 0a7a34a2a..759486036 100644 --- a/src/components/Daos/DaoCard.tsx +++ b/src/components/Daos/DaoCard.tsx @@ -7,18 +7,17 @@ import * as moment from "moment"; import * as React from "react"; import { Link } from "react-router-dom"; import * as css from "./Daos.scss"; -import { formatTokens } from "lib/util"; -import BN = require("bn.js"); import i18next from "i18next"; interface IExternalProps { dao: DAO; + totalHoldings?: string; } type IProps = IExternalProps & ISubscriptionProps const DaoCard = (props: IProps) => { - const { dao } = props; + const { dao, totalHoldings } = props; const daoState = props.data; const bgPattern = generate(dao.id + daoState.name); const dxDaoActivationDate = moment("2019-07-14T12:00:00.000+0000"); @@ -56,12 +55,12 @@ const DaoCard = (props: IProps) => {
{daoState.numberOfQueuedProposals+ daoState.numberOfBoostedProposals + daoState.numberOfPreBoostedProposals} - Open Proposals + {i18next.t("Open Proposals")}
- {formatTokens(new BN(daoState.ethBalance))} - ETH + {totalHoldings} + USD
diff --git a/src/components/Daos/Daos.scss b/src/components/Daos/Daos.scss index bf2420dea..6a1daf7c6 100644 --- a/src/components/Daos/Daos.scss +++ b/src/components/Daos/Daos.scss @@ -245,18 +245,11 @@ } table.daoInfoContainer { - text-align: center; - + table-layout: fixed; width: 100%; tr > td { - width: 40%; - border: 0; padding: 0; } - tr > td:first-child, - tr > td:last-child { - width: 10%; - } } } } diff --git a/src/components/Daos/DaosPage.tsx b/src/components/Daos/DaosPage.tsx index 5add99743..60aa565c3 100644 --- a/src/components/Daos/DaosPage.tsx +++ b/src/components/Daos/DaosPage.tsx @@ -22,6 +22,8 @@ import * as css from "./Daos.scss"; import BHubReg from "../Buidlhub/Registration"; import i18next from "i18next"; import classNames from "classnames"; +import axios from "axios"; +import { getNetworkName, isEmptyObject } from "lib/util"; type SubscriptionData = [DAO[], DAO[], DAO[]]; @@ -30,6 +32,10 @@ interface IStateProps { followingDAOs: string[]; } +interface IDAOsBalances { + [address: string]: { balance: string, formattedBalance: string }; +} + const mapStateToProps = (state: IRootState): IStateProps => { return { currentAccountAddress: state.web3.currentAccountAddress, @@ -45,6 +51,7 @@ interface IState { searchDaos: DAO[]; sortBy: string; sortOrder: number; + daosBalances: IDAOsBalances } const PAGE_SIZE = 50; @@ -60,11 +67,13 @@ class DaosPage extends React.Component { searchDaos: [], sortBy: "name", sortOrder: 1, + daosBalances: {}, }; } - public componentDidMount() { + public async componentDidMount() { window.addEventListener("resize", this.updateWindowDimensions); + await this.getDaosBalances(); Analytics.track("Page View", { "Page Name": Page.AllDAOs, @@ -93,6 +102,21 @@ class DaosPage extends React.Component { ); } + /** + * Fetches the DAOs total holdings from the DAOs Balances Service + */ + getDaosBalances = async () => { + const network = (await getNetworkName()).toLowerCase(); + const url = `https://daos-balances-service.herokuapp.com/daosBalance/getDaosBalances/?version=v2&network=http_${network}`; + const dataArray = await axios ({ url: url, method: "GET" }).then(res => { return res.data; }); + const data:IDAOsBalances = {}; + for (const dao of dataArray){ + const { address="", ...balanceData } = { ...dao }; + data[address] = { ...balanceData }; + } + this.setState({ daosBalances: data }); + } + onSearchChange = async (e: any) => { const searchString = e.target.value; @@ -123,8 +147,11 @@ class DaosPage extends React.Component { daos.sort((a, b) => SortService.evaluateString(a.coreState[sortBy], b.coreState[sortBy], this.state.sortOrder )); break; case "memberCount": - case "ethBalance": daos.sort((a, b) => SortService.evaluateNumber(a.coreState[sortBy] as number, b.coreState[sortBy] as number, this.state.sortOrder )); + break; + case "totalHoldings": + daos.sort((a, b) => SortService.evaluateString(this.state.daosBalances[a.coreState.address]?.balance, this.state.daosBalances[b.coreState.address]?.balance, this.state.sortOrder )); + break; } } @@ -140,6 +167,7 @@ class DaosPage extends React.Component { public render(): RenderOutput { const { data, fetchMore } = this.props; const search = this.state.search.length > 2 ? this.state.search.toLowerCase() : ""; + const daosBalances = this.state.daosBalances; // Always show DAOs that the current user is a member of or follows first const yourDAOs = data[1].concat(data[2]).filter(d => d.coreState.name.toLowerCase().includes(search)); @@ -178,6 +206,7 @@ class DaosPage extends React.Component { ); }); @@ -187,6 +216,7 @@ class DaosPage extends React.Component { ); }); @@ -198,7 +228,7 @@ class DaosPage extends React.Component { return (
- All DAOs + {i18next.t("All DAOs")}
 
@@ -212,14 +242,14 @@ class DaosPage extends React.Component { {i18next.t("Sort by")}
- Create A DAO + {i18next.t("Create A DAO")}
@@ -229,7 +259,7 @@ class DaosPage extends React.Component {

- Your DAOs + {i18next.t("Your DAOs")}

@@ -249,7 +279,7 @@ class DaosPage extends React.Component {
-

Other DAOs

+

{i18next.t("Other DAOs")}

diff --git a/src/lib/util.ts b/src/lib/util.ts index 7506f363f..01f5a7205 100644 --- a/src/lib/util.ts +++ b/src/lib/util.ts @@ -657,3 +657,11 @@ export function safeMoment(dateSpecifier: moment.Moment | Date | number | string } } +/** + * Checks whether an element is an empty object + * @param element + * @returns {boolean} + */ +export const isEmptyObject = (element: unknown): boolean => { + return Object.keys(element).length === 0 && element.constructor === Object; +};