diff --git a/src/common/components/community-menu/index.tsx b/src/common/components/community-menu/index.tsx index 3abc83e28b7..e2a1e824c80 100644 --- a/src/common/components/community-menu/index.tsx +++ b/src/common/components/community-menu/index.tsx @@ -37,8 +37,9 @@ export class CommunityMenu extends Component { } render() { - const {community, match} = this.props; - const {filter, name} = match.params; + const { community, match, global } = this.props; + const { filter } = match.params; + const name = global.hive_id; const menuConfig: { history: History, diff --git a/src/common/components/landing-page/index.tsx b/src/common/components/landing-page/index.tsx index aa227d5ae12..d3fa61e52a4 100644 --- a/src/common/components/landing-page/index.tsx +++ b/src/common/components/landing-page/index.tsx @@ -25,7 +25,7 @@ const LandingPage = (props: any) => { }, []); return activeUser || (community && !time) ? ( - + ) : (
{ }; return ( - <> -
- {/* */} - - - - - - {unread > 0 && ( - - {unread.toString().length < 3 ? unread : '...'} - - )} - {global.notifications ? bellSvg : bellOffSvg} - - - - -
- {ui.notifications && } - {gallery && } - {drafts && } - {bookmarks && } - {schedules && } - {fragments && } - + <> +
+ + + + + {unread > 0 && ( + + {unread.toString().length < 3 ? unread : "..."} + + )} + {global.notifications ? bellSvg : bellOffSvg} + + + + +
+ {ui.notifications && } + {gallery && } + {drafts && } + {bookmarks && ( + + )} + {schedules && ( + + )} + {fragments && ( + + )} + ); } } diff --git a/src/common/components/wallet-ecency/index.tsx b/src/common/components/wallet-ecency/index.tsx index 5cb740d8f82..2d323e40b02 100644 --- a/src/common/components/wallet-ecency/index.tsx +++ b/src/common/components/wallet-ecency/index.tsx @@ -1,19 +1,28 @@ -import React, {Component, Fragment, useEffect, useState} from "react"; +import React, { + Component, + Fragment, + useEffect, + useMemo, + useState, +} from "react"; import moment from "moment"; -import {History} from "history"; +import { History } from "history"; -import {FormControl} from "react-bootstrap"; +import { FormControl } from "react-bootstrap"; -import {ActiveUser} from "../../store/active-user/types"; -import {Account} from "../../store/accounts/types"; -import {Global} from "../../store/global/types"; -import {DynamicProps} from "../../store/dynamic-props/types"; -import {Transactions} from "../../store/transactions/types"; -import {Points, PointTransaction, TransactionType} from "../../store/points/types" +import { ActiveUser } from "../../store/active-user/types"; +import { Account } from "../../store/accounts/types"; +import { Global } from "../../store/global/types"; +import { DynamicProps } from "../../store/dynamic-props/types"; +import { Transactions } from "../../store/transactions/types"; +import { + Points, + PointTransaction, + TransactionType, +} from "../../store/points/types"; -import BaseComponent from "../base"; import DropDown from "../dropdown"; import Transfer from "../transfer"; import Tooltip from "../tooltip"; @@ -25,505 +34,575 @@ import LinearProgress from "../linear-progress"; import WalletMenu from "../wallet-menu"; import EntryLink from "../entry-link"; -import {error, success} from "../feedback"; +import { error, success } from "../feedback"; -import {_t} from "../../i18n"; +import { _t } from "../../i18n"; -import {claimPoints, getCurrencyTokenRate} from "../../api/private-api"; +import { claimPoints, getCurrencyTokenRate } from "../../api/private-api"; import { - accountGroupSvg, - accountOutlineSvg, - cashSvg, - checkAllSvg, - chevronUpSvg, - commentSvg, - compareHorizontalSvg, - gpsSvg, - pencilOutlineSvg, - plusCircle, - repeatSvg, - starOutlineSvg, - ticketSvg + accountGroupSvg, + accountOutlineSvg, + cashSvg, + checkAllSvg, + chevronUpSvg, + commentSvg, + compareHorizontalSvg, + gpsSvg, + pencilOutlineSvg, + plusCircle, + repeatSvg, + starOutlineSvg, + ticketSvg, } from "../../img/svg"; import FormattedCurrency from "../formatted-currency"; - +import { Community } from "../../store/communities/types"; +import { getCommunities } from "../../api/bridge"; export const formatMemo = (memo: string, history: History) => { + return memo.split(" ").map((x) => { + if (x.indexOf("/") >= 3) { + const [author, permlink] = x.split("/"); + return ( + + {EntryLink({ + history: history, + entry: { + category: "ecency", + author: author.replace("@", ""), + permlink, + }, + children: ( + + {"@"} + {author.replace("@", "")}/{permlink} + + ), + })}{" "} + + ); + } - return memo.split(" ").map(x => { - if (x.indexOf("/") >= 3) { - const [author, permlink] = x.split("/"); - return {EntryLink({ - history: history, - entry: {category: "ecency", author: author.replace("@", ""), permlink}, - children: {"@"}{author.replace("@", "")}/{permlink} - })}{" "} - } - - return {x}{" "}; - }); -} + return {x} ; + }); +}; interface TransactionRowProps { - history: History; - tr: PointTransaction; + history: History; + tr: PointTransaction; } export class TransactionRow extends Component { - render() { - const {tr, history} = this.props; - - let icon: JSX.Element | null = null; - let lKey = ''; - const lArgs = {n: ''}; - - switch (tr.type) { - case TransactionType.CHECKIN: - icon = starOutlineSvg; - lKey = 'checkin'; - break; - case TransactionType.LOGIN: - icon = accountOutlineSvg; - lKey = 'login'; - break; - case TransactionType.CHECKIN_EXTRA: - icon = checkAllSvg; - lKey = 'checkin-extra'; - break; - case TransactionType.POST: - icon = pencilOutlineSvg; - lKey = 'post'; - break; - case TransactionType.COMMENT: - icon = commentSvg; - lKey = 'comment'; - break; - case TransactionType.VOTE: - icon = chevronUpSvg; - lKey = 'vote'; - break; - case TransactionType.REBLOG: - icon = repeatSvg; - lKey = 'reblog'; - break; - case TransactionType.DELEGATION: - icon = ticketSvg; - lKey = 'delegation'; - break; - case TransactionType.REFERRAL: - icon = gpsSvg; - lKey = 'referral'; - break; - case TransactionType.COMMUNITY: - icon = accountGroupSvg; - lKey = 'community'; - break; - case TransactionType.TRANSFER_SENT: - icon = compareHorizontalSvg; - lKey = 'transfer-sent'; - lArgs.n = tr.receiver!; - break; - case TransactionType.TRANSFER_INCOMING: - icon = compareHorizontalSvg; - lKey = 'transfer-incoming'; - lArgs.n = tr.sender!; - break; - case TransactionType.MINTED: - icon = cashSvg; - break; - default: - } - - const date = moment(tr.created); - const dateRelative = date.fromNow(true); - - return ( -
-
{icon}
-
-
- {lKey && _t(`points.${lKey}-list-desc`, {...lArgs})} - {!lKey &&  } -
-
- {dateRelative} -
-
- {tr.memo && ( -
- {formatMemo(tr.memo, history)} -
- )} -
{tr.amount}
-
- ); + render() { + const { tr, history } = this.props; + + let icon: JSX.Element | null = null; + let lKey = ""; + const lArgs = { n: "" }; + + switch (tr.type) { + case TransactionType.CHECKIN: + icon = starOutlineSvg; + lKey = "checkin"; + break; + case TransactionType.LOGIN: + icon = accountOutlineSvg; + lKey = "login"; + break; + case TransactionType.CHECKIN_EXTRA: + icon = checkAllSvg; + lKey = "checkin-extra"; + break; + case TransactionType.POST: + icon = pencilOutlineSvg; + lKey = "post"; + break; + case TransactionType.COMMENT: + icon = commentSvg; + lKey = "comment"; + break; + case TransactionType.VOTE: + icon = chevronUpSvg; + lKey = "vote"; + break; + case TransactionType.REBLOG: + icon = repeatSvg; + lKey = "reblog"; + break; + case TransactionType.DELEGATION: + icon = ticketSvg; + lKey = "delegation"; + break; + case TransactionType.REFERRAL: + icon = gpsSvg; + lKey = "referral"; + break; + case TransactionType.COMMUNITY: + icon = accountGroupSvg; + lKey = "community"; + break; + case TransactionType.TRANSFER_SENT: + icon = compareHorizontalSvg; + lKey = "transfer-sent"; + lArgs.n = tr.receiver!; + break; + case TransactionType.TRANSFER_INCOMING: + icon = compareHorizontalSvg; + lKey = "transfer-incoming"; + lArgs.n = tr.sender!; + break; + case TransactionType.MINTED: + icon = cashSvg; + break; + default: } + + const date = moment(tr.created); + const dateRelative = date.fromNow(true); + + return ( +
+
{icon}
+
+
+ {lKey && _t(`points.${lKey}-list-desc`, { ...lArgs })} + {!lKey &&  } +
+
{dateRelative}
+
+ {tr.memo && ( +
+ {formatMemo(tr.memo, history)} +
+ )} +
{tr.amount}
+
+ ); + } } interface Props { - global: Global; - dynamicProps: DynamicProps - history: History; - activeUser: ActiveUser | null; - account: Account; - points: Points; - signingKey: string; - transactions: Transactions; - fetchPoints: (username: string, type?: number) => void; - updateWalletValues: () => void; - addAccount: (data: Account) => void; - updateActiveUser: (data?: Account) => void; - setSigningKey: (key: string) => void; + global: Global; + dynamicProps: DynamicProps; + communities: Community[]; + history: History; + activeUser: ActiveUser | null; + account: Account; + points: Points; + signingKey: string; + transactions: Transactions; + fetchPoints: (username: string, type?: number) => void; + updateWalletValues: () => void; + addAccount: (data: Account) => void; + updateActiveUser: (data?: Account) => void; + setSigningKey: (key: string) => void; } -interface State { - claiming: boolean; - purchase: boolean; - promote: boolean; - boost: boolean; - transfer: boolean; - estimatedPointsValue: number; - estimatedPointsValueLoading: boolean; -} export const WalletEcency = (props: Props) => { - - const [claiming, setClaiming] = useState(false); - const [purchase, setPurchase] = useState(false); - const [promote, setPromote] = useState(false); - const [boost, setBoost] = useState(false); - const [transfer, setTransfer] = useState(false); - const [estimatedPointsValue, setEstimatedPointsValue] = useState(0); - const [estimatedPointsValueLoading, setEstimatedPointsValueLoading] = useState(false); - const [isMounted, setIsMounted] = useState(false); - - const {global, activeUser, account, points, history, fetchPoints, updateActiveUser} = props; - - useEffect(() => { - setIsMounted(true); - if (!global.usePrivate) { - history.push("/"); - } - let user = history.location.pathname.split("/")[1]; - user = user.replace('@','') - global.isElectron && initiateOnElectron(user); - getEstimatedPointsValue(); - - return () => { - setIsMounted(false); - } - }, []); - - const getEstimatedPointsValue = () => { - const {global: {currency}} = props; - setEstimatedPointsValueLoading(true); - getCurrencyTokenRate(currency,'estm').then(res => { - setEstimatedPointsValue(res); - setEstimatedPointsValueLoading(false); - }).catch((error) => { - setEstimatedPointsValueLoading(false); - setEstimatedPointsValue(0); - }); - } - - const initiateOnElectron = (username: string) => { - if(!isMounted && global.isElectron){ - let getPoints = new Promise(res=>fetchPoints(username)) - username && getPoints.then(res=>{ - setIsMounted(true) - }).catch((error) => { - console.error('getPoints',error); - }); - } + const [claiming, setClaiming] = useState(false); + const [purchase, setPurchase] = useState(false); + const [promote, setPromote] = useState(false); + const [boost, setBoost] = useState(false); + const [transfer, setTransfer] = useState(false); + const [estimatedPointsValue, setEstimatedPointsValue] = useState(0); + const [estimatedPointsValueLoading, setEstimatedPointsValueLoading] = + useState(false); + const [isMounted, setIsMounted] = useState(false); + + const { + global, + communities, + activeUser, + account, + points, + history, + fetchPoints, + updateActiveUser, + } = props; + + useEffect(() => { + setIsMounted(true); + let user = history.location.pathname.split("/")[1]; + user = user.replace("@", ""); + global.isElectron && initiateOnElectron(user); + getEstimatedPointsValue(); + + return () => { + setIsMounted(false); + }; + }, []); + + const getEstimatedPointsValue = () => { + const { + global: { currency }, + } = props; + setEstimatedPointsValueLoading(true); + getCurrencyTokenRate(currency, "estm") + .then((res) => { + setEstimatedPointsValue(res); + setEstimatedPointsValueLoading(false); + }) + .catch((error) => { + setEstimatedPointsValueLoading(false); + setEstimatedPointsValue(0); + }); + }; + + const initiateOnElectron = (username: string) => { + if (!isMounted && global.isElectron) { + let getPoints = new Promise((res) => fetchPoints(username)); + username && + getPoints + .then((res) => { + setIsMounted(true); + }) + .catch((error) => { + console.error("getPoints", error); + }); } + }; + + const claim = (e?: React.MouseEvent) => { + if (e) e.preventDefault(); + + setClaiming(true); + const username = activeUser?.username!; + claimPoints(username) + .then(() => { + success(_t("points.claim-ok")); + fetchPoints(username); + updateActiveUser(); + }) + .catch(() => { + error(_t("g.server-error")); + }) + .finally(() => { + setClaiming(false); + }); + }; + + const togglePurchase = (e?: React.MouseEvent) => { + if (e) e.preventDefault(); + setPurchase(!purchase); + }; + + const togglePromote = () => { + setPromote(!promote); + }; + + const toggleTransfer = () => { + setTransfer(!transfer); + }; + + const toggleBoost = () => { + setBoost(!boost); + }; + + const filterChanged = ( + e: React.ChangeEvent + ) => { + const filter = Number(e.target.value); + const { fetchPoints, account } = props; + fetchPoints(account.name, filter); + }; + + if (!global.usePrivate) { + return null; + } + + const isMyPage = activeUser && activeUser.username === account.name; + + const txFilters = [ + TransactionType.CHECKIN, + TransactionType.LOGIN, + TransactionType.CHECKIN_EXTRA, + TransactionType.POST, + TransactionType.COMMENT, + TransactionType.VOTE, + TransactionType.REBLOG, + TransactionType.DELEGATION, + TransactionType.REFERRAL, + TransactionType.COMMUNITY, + TransactionType.TRANSFER_SENT, + TransactionType.TRANSFER_INCOMING, + ]; + + const community = useMemo( + () => communities.find(({ name }) => name === global.hive_id), + [communities] + ); + + return ( + <> +
+
+
+ {points.uPoints !== "0.000" && ( + <> +
+
{_t("points.unclaimed-points")}
+
+ {points.uPoints} + {isMyPage && ( + + + {plusCircle} + + + )} +
+
+ + )} + +
+
+
{_t("wallet.estimated-points")}
+
+ {_t("wallet.estimated-description-points")} +
+
+
+
+ {estimatedPointsValueLoading ? ( + `${_t("wallet.calculating")}...` + ) : ( + + )} +
+
+
- const claim = (e?: React.MouseEvent) => { - if (e) e.preventDefault(); - - setClaiming(true); - const username = activeUser?.username!; - claimPoints(username).then(() => { - success(_t('points.claim-ok')); - fetchPoints(username); - updateActiveUser(); - }).catch(() => { - error(_t('g.server-error')); - }).finally(() => { - setClaiming(false); - }); - } - - const togglePurchase = (e?: React.MouseEvent) => { - if (e) e.preventDefault(); - setPurchase(!purchase); - } - - const togglePromote = () => { - setPromote(!promote); - } - - const toggleTransfer = () => { - setTransfer(!transfer); - } - - const toggleBoost = () => { - setBoost(!boost); - } - - const filterChanged = (e: React.ChangeEvent) => { - const filter = Number(e.target.value); - const {fetchPoints, account} = props; - fetchPoints(account.name, filter); - } - - if (!global.usePrivate) { - return null; - } - - const isMyPage = activeUser && activeUser.username === account.name; - - // const dropDownConfig = { - // history: history, - // label: '', - // items: [{ - // label: _t('points.transfer'), - // onClick: toggleTransfer - // }, { - // label: _t('points.promote'), - // onClick: togglePromote - // }, { - // label: _t('points.boost'), - // onClick: toggleBoost - // }] - // }; - - const txFilters = [ - TransactionType.CHECKIN, TransactionType.LOGIN, TransactionType.CHECKIN_EXTRA, - TransactionType.POST, TransactionType.COMMENT, TransactionType.VOTE, - TransactionType.REBLOG, TransactionType.DELEGATION, TransactionType.REFERRAL, - TransactionType.COMMUNITY, TransactionType.TRANSFER_SENT, TransactionType.TRANSFER_INCOMING]; - - return ( - <> -
-
-
- {points.uPoints !== '0.000' && ( - <> -
-
- {_t('points.unclaimed-points')} -
-
- {`${points.uPoints}`} - {isMyPage && ( - - - {plusCircle} - - - )} -
-
- - )} - -
-
-
{_t("wallet.estimated-points")}
-
{_t("wallet.estimated-description-points")}
-
-
-
- {estimatedPointsValueLoading ? `${_t("wallet.calculating")}...` : } -
-
-
- -
-
-
{"Ecency Points"}
-
{_t("points.main-description")}
-
-
-
- - { - (() => { - let dropDownConfig: any - if(isMyPage) { - dropDownConfig = { - history: history, - label: '', - items: [{ - label: _t('points.transfer'), - onClick: toggleTransfer - }, { - label: _t('points.promote'), - onClick: togglePromote - }, { - label: _t('points.boost'), - onClick: toggleBoost - }] - }; - } else if (activeUser) { - dropDownConfig = { - history: history, - label: '', - items: [{ - label: _t('points.transfer'), - onClick: toggleTransfer - }] - }; - } - return ( -
- -
- ) - })() - } - - - {/* {isMyPage && ( +
+
+
{`${community?.title} Points`}
+
+ {_t("points.main-description")} +
+
+
+
+ {(() => { + let dropDownConfig: any; + if (isMyPage) { + dropDownConfig = { + history: history, + label: "", + items: [ + { + label: _t("points.transfer"), + onClick: toggleTransfer, + }, + { + label: _t("points.promote"), + onClick: togglePromote, + }, + { + label: _t("points.boost"), + onClick: toggleBoost, + }, + ], + }; + } else if (activeUser) { + dropDownConfig = { + history: history, + label: "", + items: [ + { + label: _t("points.transfer"), + onClick: toggleTransfer, + }, + ], + }; + } + return ( +
+ +
+ ); + })()} + + {/* {isMyPage && (
)} */} - <>{points.points} {"POINTS"} -
-
-
- -
-
-
{_t("points.earn-points")}
-
- -
- {pencilOutlineSvg} - 15 -
- - -
- {commentSvg} - 5 -
- - -
- {chevronUpSvg} - 0.3 -
- - -
- {repeatSvg} - 1 -
- - -
- {starOutlineSvg} - 0.25 -
- - -
- {accountOutlineSvg} - 10 -
- - -
- {checkAllSvg} - 10 -
- - -
- {ticketSvg} - 10 -
- - -
- {accountGroupSvg} - 20 -
- -
-
- {isMyPage && ( - - )} -
- -
-
-

{_t('points.history')}

- - - {txFilters.map(x => )} - -
- - {(() => { - if (points.loading) { - return - } - - return
- {points.transactions.map(tr => )} - {(!points.loading && points.transactions.length === 0) &&

{_t('g.empty-list')}

} -
- })()} -
-
+ <> + {points.points} {"POINTS"} + +
+
+
- +
+
+
+ {_t("points.earn-points")}
+
+ +
+ {pencilOutlineSvg} + 15 +
+ + +
+ {commentSvg} + 5 +
+ + +
+ {chevronUpSvg} + 0.3 +
+ + +
+ {repeatSvg} + 1 +
+ + +
+ {starOutlineSvg} + 0.25 +
+ + +
+ {accountOutlineSvg} + 10 +
+ + +
+ {checkAllSvg} + 10 +
+ + +
+ {ticketSvg} + 10 +
+ + +
+ {accountGroupSvg} + 20 +
+ +
+
+ {isMyPage && ( + + )} +
- {transfer && () +
+
+

{_t("points.history")}

+ + + {txFilters.map((x) => ( + + ))} + +
+ + {(() => { + if (points.loading) { + return ; } - {purchase && ()} - {promote && ()} - {boost && ()} + return ( +
+ {points.transactions.map((tr) => ( + + ))} + {!points.loading && points.transactions.length === 0 && ( +

+ {_t("g.empty-list")} +

+ )} +
+ ); + })()}
- - ); -} +
+ + +
+ + {transfer && ( + + )} + + {purchase && ( + + )} + {promote && ( + + )} + {boost && ( + + )} +
+ + ); +}; export default (p: Props) => { - const props = { - global: p.global, - dynamicProps: p.dynamicProps, - history: p.history, - activeUser: p.activeUser, - account: p.account, - points: p.points, - signingKey: p.signingKey, - transactions: p.transactions, - fetchPoints: p.fetchPoints, - updateWalletValues: p.updateWalletValues, - addAccount: p.addAccount, - updateActiveUser: p.updateActiveUser, - setSigningKey: p.setSigningKey - } - - return ; -} - + const props = { + global: p.global, + communities: p.communities, + dynamicProps: p.dynamicProps, + history: p.history, + activeUser: p.activeUser, + account: p.account, + points: p.points, + signingKey: p.signingKey, + transactions: p.transactions, + fetchPoints: p.fetchPoints, + updateWalletValues: p.updateWalletValues, + addAccount: p.addAccount, + updateActiveUser: p.updateActiveUser, + setSigningKey: p.setSigningKey, + }; + + return ; +}; diff --git a/src/common/components/wallet-hive-engine/index.tsx b/src/common/components/wallet-hive-engine/index.tsx index e61469c9b43..69392d219d8 100644 --- a/src/common/components/wallet-hive-engine/index.tsx +++ b/src/common/components/wallet-hive-engine/index.tsx @@ -24,9 +24,11 @@ import { formatError } from "../../api/operations"; import formattedNumber from "../../util/formatted-number"; import { _t } from "../../i18n"; +import { Community } from "../../store/communities/types"; interface Props { global: Global; + communities: Community[]; dynamicProps: DynamicProps; account: Account; activeUser: ActiveUser | null; @@ -71,12 +73,12 @@ export class WalletHiveEngine extends BaseComponent { (token) => token.balance !== 0 || token.stakedBalance !== 0 ); items = this.sort(items); - this._isMounted && this.setState({tokens: items}); - } catch(e) { - console.log('engine tokens', e); + this._isMounted && this.setState({ tokens: items }); + } catch (e) { + console.log("engine tokens", e); } - - this.setState({loading: false}); + + this.setState({ loading: false }); }; sort = (items: HiveEngineToken[]) => @@ -97,10 +99,9 @@ export class WalletHiveEngine extends BaseComponent { try { const rewards = await getUnclaimedRewards(account.name); this._isMounted && this.setState({ rewards }); - } catch(e) { - console.log('fetchUnclaimedRewards', e); + } catch (e) { + console.log("fetchUnclaimedRewards", e); } - }; claimRewards = (tokens: TokenStatus[]) => { @@ -121,7 +122,7 @@ export class WalletHiveEngine extends BaseComponent { success(_t("wallet.claim-reward-balance-ok")); }) .then(() => { - this.setState({ rewards: []}) + this.setState({ rewards: [] }); }) .catch((err) => { console.log(err); @@ -133,13 +134,13 @@ export class WalletHiveEngine extends BaseComponent { }; render() { - const { global, dynamicProps, account, activeUser } = this.props; + const { global, communities, account, activeUser } = this.props; const { rewards, tokens, loading, claiming, claimed } = this.state; const hasUnclaimedRewards = rewards.length > 0; const hasMultipleUnclaimedRewards = rewards.length > 1; const isMyPage = activeUser && activeUser.username === account.name; let rewardsToShowInTooltip = [...rewards]; - rewardsToShowInTooltip = rewardsToShowInTooltip.splice(0,10) + rewardsToShowInTooltip = rewardsToShowInTooltip.splice(0, 10); if (!account.__loaded) { return null; @@ -156,26 +157,35 @@ export class WalletHiveEngine extends BaseComponent { {hasMultipleUnclaimedRewards ? (
- -
- {rewardsToShowInTooltip.map((reward, ind) => -
-
{reward.symbol}:
-
{reward.pending_token / Math.pow(10, reward.precision)}
-
)} + +
+ {rewardsToShowInTooltip.map((reward, ind) => ( +
+
+ {reward.symbol}:{" "} +
+
+ {reward.pending_token / + Math.pow(10, reward.precision)} +
- - } - > -
- {`${rewards.length} tokens`} + ))}
- + + } + > +
+ {`${rewards.length} tokens`} +
+ {isMyPage && ( {
{ export default (p: Props) => { const props = { global: p.global, + communities: p.communities, dynamicProps: p.dynamicProps, account: p.account, activeUser: p.activeUser, diff --git a/src/common/components/wallet-hive/index.tsx b/src/common/components/wallet-hive/index.tsx index c7ea3d5c890..6f4332c2efe 100644 --- a/src/common/components/wallet-hive/index.tsx +++ b/src/common/components/wallet-hive/index.tsx @@ -42,734 +42,890 @@ import parseAsset from "../../helper/parse-asset"; import {_t} from "../../i18n"; import {plusCircle} from "../../img/svg"; - +import { Community } from "../../store/communities/types"; interface Props { - history: History; - global: Global; - dynamicProps: DynamicProps; - activeUser: ActiveUser | null; - transactions: Transactions; - account: Account; - signingKey: string; - addAccount: (data: Account) => void; - updateActiveUser: (data?: Account) => void; - setSigningKey: (key: string) => void; - fetchTransactions: (username: string, group?: OperationGroup | "") => void; - fetchPoints: (username: string, type?: number) => void; - updateWalletValues: () => void; + history: History; + global: Global; + communities: Community[]; + dynamicProps: DynamicProps; + activeUser: ActiveUser | null; + transactions: Transactions; + account: Account; + signingKey: string; + addAccount: (data: Account) => void; + updateActiveUser: (data?: Account) => void; + setSigningKey: (key: string) => void; + fetchTransactions: (username: string, group?: OperationGroup | "") => void; + fetchPoints: (username: string, type?: number) => void; + updateWalletValues: () => void; } interface State { - delegatedList: boolean; - convertList: boolean; - receivedList: boolean; - savingsWithdrawList: boolean; - openOrdersList: boolean; - tokenType: AssetSymbol; - claiming: boolean; - claimed: boolean; - transfer: boolean; - withdrawRoutes: boolean; - transferMode: null | TransferMode; - transferAsset: null | TransferAsset; - converting: number; - withdrawSavings: { hbd:string | number, hive: string | number }; - openOrders: { hbd:string | number, hive: string | number }; - aprs: { hbd:string | number, hp: string | number } + delegatedList: boolean; + convertList: boolean; + receivedList: boolean; + savingsWithdrawList: boolean; + openOrdersList: boolean; + tokenType: AssetSymbol; + claiming: boolean; + claimed: boolean; + transfer: boolean; + withdrawRoutes: boolean; + transferMode: null | TransferMode; + transferAsset: null | TransferAsset; + converting: number; + withdrawSavings: { hbd: string | number; hive: string | number }; + openOrders: { hbd: string | number; hive: string | number }; + aprs: { hbd: string | number; hp: string | number }; } export class WalletHive extends BaseComponent { - state: State = { - delegatedList: false, - receivedList: false, - convertList: false, - savingsWithdrawList: false, - openOrdersList: false, - tokenType: 'HBD', - claiming: false, - claimed: false, - transfer: false, - withdrawRoutes: false, - transferMode: null, - transferAsset: null, - converting: 0, - withdrawSavings: {hbd: 0, hive: 0}, - openOrders: {hbd: 0, hive: 0}, - aprs: { hbd:0, hp: 0 } - }; - - componentDidMount() { - this.fetchConvertingAmount(); - this.fetchWithdrawFromSavings(); - this.getOrders(); + state: State = { + delegatedList: false, + receivedList: false, + convertList: false, + savingsWithdrawList: false, + openOrdersList: false, + tokenType: "HBD", + claiming: false, + claimed: false, + transfer: false, + withdrawRoutes: false, + transferMode: null, + transferAsset: null, + converting: 0, + withdrawSavings: { hbd: 0, hive: 0 }, + openOrders: { hbd: 0, hive: 0 }, + aprs: { hbd: 0, hp: 0 }, + }; + + componentDidMount() { + this.fetchConvertingAmount(); + this.fetchWithdrawFromSavings(); + this.getOrders(); + } + + getCurrentHpApr = (gprops: DynamicProps) => { + // The inflation was set to 9.5% at block 7m + const initialInflationRate = 9.5; + const initialBlock = 7000000; + + // It decreases by 0.01% every 250k blocks + const decreaseRate = 250000; + const decreasePercentPerIncrement = 0.01; + + // How many increments have happened since block 7m? + const headBlock = gprops.headBlock; + const deltaBlocks = headBlock - initialBlock; + const decreaseIncrements = deltaBlocks / decreaseRate; + + // Current inflation rate + let currentInflationRate = + initialInflationRate - decreaseIncrements * decreasePercentPerIncrement; + + // Cannot go lower than 0.95% + if (currentInflationRate < 0.95) { + currentInflationRate = 0.95; } - getCurrentHpApr = (gprops:DynamicProps) => { - // The inflation was set to 9.5% at block 7m - const initialInflationRate = 9.5; - const initialBlock = 7000000; - - // It decreases by 0.01% every 250k blocks - const decreaseRate = 250000; - const decreasePercentPerIncrement = 0.01; - - // How many increments have happened since block 7m? - const headBlock = gprops.headBlock; - const deltaBlocks = headBlock - initialBlock; - const decreaseIncrements = deltaBlocks / decreaseRate; - - // Current inflation rate - let currentInflationRate = - initialInflationRate - - decreaseIncrements * decreasePercentPerIncrement; - - // Cannot go lower than 0.95% - if (currentInflationRate < 0.95) { - currentInflationRate = 0.95; - } - - // Now lets calculate the "APR" - const vestingRewardPercent = gprops.vestingRewardPercent / 10000; - const virtualSupply = gprops.virtualSupply; - const totalVestingFunds = gprops.totalVestingFund; - return ( - (virtualSupply * currentInflationRate * vestingRewardPercent) / totalVestingFunds - ); - }; - - fetchConvertingAmount = async() => { - const {account, dynamicProps} = this.props; - const {aprs} = this.state; - const {hbdInterestRate} = dynamicProps; - - let hp = this.getCurrentHpApr(dynamicProps).toFixed(3); - this.setState({aprs: {...aprs, hbd: hbdInterestRate/100, hp}}) - - const crd = await getConversionRequests(account.name); - if (crd.length === 0) { - return; - } - - let converting = 0; - crd.forEach(x => { - converting += parseAsset(x.amount).amount; - }); - this.stateSet({converting}); + // Now lets calculate the "APR" + const vestingRewardPercent = gprops.vestingRewardPercent / 10000; + const virtualSupply = gprops.virtualSupply; + const totalVestingFunds = gprops.totalVestingFund; + return ( + (virtualSupply * currentInflationRate * vestingRewardPercent) / + totalVestingFunds + ); + }; + + fetchConvertingAmount = async () => { + const { account, dynamicProps } = this.props; + const { aprs } = this.state; + const { hbdInterestRate } = dynamicProps; + + let hp = this.getCurrentHpApr(dynamicProps).toFixed(3); + this.setState({ aprs: { ...aprs, hbd: hbdInterestRate / 100, hp } }); + + const crd = await getConversionRequests(account.name); + if (crd.length === 0) { + return; } - fetchWithdrawFromSavings = async() => { - const {account} = this.props; - - const swf = await getSavingsWithdrawFrom(account.name); - if (swf.length === 0) { - return; - } - - let withdrawSavings = {hbd: 0, hive: 0}; - swf.forEach(x => { - const aa = x.amount; - if (aa.includes('HIVE')) { - withdrawSavings.hive += parseAsset(x.amount).amount; - } else { - withdrawSavings.hbd += parseAsset(x.amount).amount; - } - }); - - this.stateSet({withdrawSavings}); - } + let converting = 0; + crd.forEach((x) => { + converting += parseAsset(x.amount).amount; + }); + this.stateSet({ converting }); + }; - getOrders = async() => { - const {account} = this.props; - - const oo = await getOpenOrder(account.name); - if (oo.length === 0) { - return; - } - - let openOrders = {hive: 0, hbd: 0}; - oo.forEach(x => { - const bb = x.sell_price.base; - if (bb.includes('HIVE')) { - openOrders.hive += parseAsset(bb).amount; - } else { - openOrders.hbd += parseAsset(bb).amount; - } - }); - - this.stateSet({openOrders}); - } + fetchWithdrawFromSavings = async () => { + const { account } = this.props; - toggleDelegatedList = () => { - const {delegatedList} = this.state; - this.stateSet({delegatedList: !delegatedList}); - }; - - toggleConvertList = () => { - const {convertList} = this.state; - this.stateSet({convertList: !convertList}); - }; - - toggleSavingsWithdrawList = (tType:AssetSymbol) => { - const {savingsWithdrawList} = this.state; - this.stateSet({savingsWithdrawList: !savingsWithdrawList, tokenType: tType}); - }; - - toggleOpenOrdersList = (tType:AssetSymbol) => { - const {openOrdersList} = this.state; - this.stateSet({openOrdersList: !openOrdersList, tokenType: tType}); - }; - - toggleReceivedList = () => { - const {receivedList} = this.state; - this.stateSet({receivedList: !receivedList}); - }; - - toggleWithdrawRoutes = () => { - const {withdrawRoutes} = this.state; - this.stateSet({withdrawRoutes: !withdrawRoutes}); + const swf = await getSavingsWithdrawFrom(account.name); + if (swf.length === 0) { + return; } - claimRewardBalance = () => { - const {activeUser, updateActiveUser} = this.props; - const {claiming} = this.state; - - if (claiming || !activeUser) { - return; - } - - this.stateSet({claiming: true}); - - return getAccount(activeUser?.username!) - .then(account => { - const { - reward_hive_balance: hiveBalance = account.reward_hive_balance, - reward_hbd_balance: hbdBalance = account.reward_hbd_balance, - reward_vesting_balance: vestingBalance - } = account; - - return claimRewardBalance(activeUser?.username!, hiveBalance!, hbdBalance!, vestingBalance!) - }).then(() => getAccount(activeUser.username)) - .then(account => { - success(_t('wallet.claim-reward-balance-ok')); - this.stateSet({claiming: false, claimed: true}); - updateActiveUser(account); - }).catch(err => { - error(formatError(err)); - this.stateSet({claiming: false}); - }) + let withdrawSavings = { hbd: 0, hive: 0 }; + swf.forEach((x) => { + const aa = x.amount; + if (aa.includes("HIVE")) { + withdrawSavings.hive += parseAsset(x.amount).amount; + } else { + withdrawSavings.hbd += parseAsset(x.amount).amount; + } + }); + + this.stateSet({ withdrawSavings }); + }; + + getOrders = async () => { + const { account } = this.props; + + const oo = await getOpenOrder(account.name); + if (oo.length === 0) { + return; } - openTransferDialog = (mode: TransferMode, asset: TransferAsset) => { - this.stateSet({transfer: true, transferMode: mode, transferAsset: asset}); + let openOrders = { hive: 0, hbd: 0 }; + oo.forEach((x) => { + const bb = x.sell_price.base; + if (bb.includes("HIVE")) { + openOrders.hive += parseAsset(bb).amount; + } else { + openOrders.hbd += parseAsset(bb).amount; + } + }); + + this.stateSet({ openOrders }); + }; + + toggleDelegatedList = () => { + const { delegatedList } = this.state; + this.stateSet({ delegatedList: !delegatedList }); + }; + + toggleConvertList = () => { + const { convertList } = this.state; + this.stateSet({ convertList: !convertList }); + }; + + toggleSavingsWithdrawList = (tType: AssetSymbol) => { + const { savingsWithdrawList } = this.state; + this.stateSet({ + savingsWithdrawList: !savingsWithdrawList, + tokenType: tType, + }); + }; + + toggleOpenOrdersList = (tType: AssetSymbol) => { + const { openOrdersList } = this.state; + this.stateSet({ openOrdersList: !openOrdersList, tokenType: tType }); + }; + + toggleReceivedList = () => { + const { receivedList } = this.state; + this.stateSet({ receivedList: !receivedList }); + }; + + toggleWithdrawRoutes = () => { + const { withdrawRoutes } = this.state; + this.stateSet({ withdrawRoutes: !withdrawRoutes }); + }; + + claimRewardBalance = () => { + const { activeUser, updateActiveUser } = this.props; + const { claiming } = this.state; + + if (claiming || !activeUser) { + return; } - closeTransferDialog = () => { - this.stateSet({transfer: false, transferMode: null, transferAsset: null}); + this.stateSet({ claiming: true }); + + return getAccount(activeUser?.username!) + .then((account) => { + const { + reward_hive_balance: hiveBalance = account.reward_hive_balance, + reward_hbd_balance: hbdBalance = account.reward_hbd_balance, + reward_vesting_balance: vestingBalance, + } = account; + + return claimRewardBalance( + activeUser?.username!, + hiveBalance!, + hbdBalance!, + vestingBalance! + ); + }) + .then(() => getAccount(activeUser.username)) + .then((account) => { + success(_t("wallet.claim-reward-balance-ok")); + this.stateSet({ claiming: false, claimed: true }); + updateActiveUser(account); + }) + .catch((err) => { + error(formatError(err)); + this.stateSet({ claiming: false }); + }); + }; + + openTransferDialog = (mode: TransferMode, asset: TransferAsset) => { + this.stateSet({ transfer: true, transferMode: mode, transferAsset: asset }); + }; + + closeTransferDialog = () => { + this.stateSet({ transfer: false, transferMode: null, transferAsset: null }); + }; + + render() { + const { global, dynamicProps, account, activeUser, communities } = + this.props; + const { + claiming, + claimed, + transfer, + transferAsset, + transferMode, + converting, + withdrawSavings, + aprs: { hbd, hp }, + openOrders, + tokenType, + } = this.state; + + if (!account.__loaded) { + return null; } - render() { - const {global, dynamicProps, account, activeUser, history} = this.props; - const {claiming, claimed, transfer, transferAsset, transferMode, converting, withdrawSavings, aprs: {hbd, hp}, openOrders, tokenType} = this.state; - - if (!account.__loaded) { - return null; - } - - const {hivePerMVests} = dynamicProps; - const isMyPage = activeUser && activeUser.username === account.name; - const w = new HiveWallet(account, dynamicProps, converting); - const totalHP = formattedNumber(vestsToHp(w.vestingShares, hivePerMVests), {suffix: "HP"}) - const totalDelegated = formattedNumber(vestsToHp(w.vestingSharesDelegated, hivePerMVests), {prefix: "-", suffix: "HP"}) - - return ( -
- -
-
- {(w.hasUnclaimedRewards && !claimed) && ( - - )} - -
-
-
{_t("wallet.estimated")}
-
{_t("wallet.estimated-description")}
-
-
-
- -
-
-
- -
-
-
{_t("wallet.hive")}
-
{_t("wallet.hive-description")}
-
-
-
- {(() => { - let dropDownConfig: any - if (isMyPage) { - dropDownConfig = { - history: this.props.history, - label: '', - items: [ - { - label: _t('wallet.transfer'), - onClick: () => { - this.openTransferDialog('transfer', 'HIVE'); - } - }, - { - label: _t('wallet.transfer-to-savings'), - onClick: () => { - this.openTransferDialog('transfer-saving', 'HIVE'); - } - }, - { - label: _t('wallet.power-up'), - onClick: () => { - this.openTransferDialog('power-up', 'HIVE'); - } - }, - { - label: _t('market-data.trade'), - onClick: () => { - this.props.history.push("/market"); - } - }, - ], - }; - - } else if (activeUser) { - dropDownConfig = { - history: this.props.history, - label: '', - items: [ - { - label: _t('wallet.transfer'), - onClick: () => { - this.openTransferDialog('transfer', 'HIVE'); - } - }, - ], - }; - } - return (
- -
) - - })()} - - {formattedNumber(w.balance, {suffix: "HIVE"})} -
- {openOrders && openOrders.hive > 0 && ( -
- - this.toggleOpenOrdersList('HIVE')}> - {"+"} {formattedNumber(openOrders.hive, {suffix: "HIVE"})} - - -
- )} - {withdrawSavings && withdrawSavings.hive > 0 && ( -
- - this.toggleSavingsWithdrawList('HIVE')}> - {"+"} {formattedNumber(withdrawSavings.hive, {suffix: "HIVE"})} - - -
- )} -
-
- -
-
-
{_t("wallet.hive-power")}
-
{_t("wallet.hive-power-description")}
-
{_t("wallet.hive-power-apr-rate", {value: hp})}
-
- -
-
- {(() => { - let dropDownConfig: any - if (isMyPage) { - dropDownConfig = { - history: this.props.history, - label: '', - items: [ - { - label: _t('wallet.delegate'), - onClick: () => { - this.openTransferDialog('delegate', 'HP'); - }, - }, - { - label: _t('wallet.power-down'), - onClick: () => { - this.openTransferDialog('power-down', 'HP'); - }, - }, - { - label: _t('wallet.withdraw-routes'), - onClick: () => { - this.toggleWithdrawRoutes(); - }, - }, - ], - }; - } else if (activeUser) { - dropDownConfig = { - history: this.props.history, - label: '', - items: [ - { - label: _t('wallet.delegate'), - onClick: () => { - this.openTransferDialog('delegate', 'HP'); - }, - }, - { - label: _t('wallet.power-up'), - onClick: () => { - this.openTransferDialog('power-up', 'HIVE'); - } - }, - ], - }; - } - return (
- -
) - - })()} - {totalHP} -
- - {w.vestingSharesDelegated > 0 && ( -
- - - {formattedNumber(vestsToHp(w.vestingSharesDelegated, hivePerMVests), {prefix: "-", suffix: "HP"})} - - -
- )} - - {(() => { - if (w.vestingSharesReceived <= 0) { - return null; - } - - const strReceived = formattedNumber(vestsToHp(w.vestingSharesReceived, hivePerMVests), {prefix: "+", suffix: "HP"}); - - if (global.usePrivate) { - return
- - {strReceived} - -
; - } - - return
- - {strReceived} - -
; - })()} - - {w.nextVestingSharesWithdrawal > 0 && ( -
- - - {formattedNumber(vestsToHp(w.nextVestingSharesWithdrawal, hivePerMVests), {prefix: "-", suffix: "HP"})} - - -
- )} - - {(w.vestingSharesDelegated > 0 || w.vestingSharesReceived > 0 || w.nextVestingSharesWithdrawal > 0) && ( -
- - - {formattedNumber(vestsToHp(w.vestingSharesTotal, hivePerMVests), {prefix: "=", suffix: "HP"})} - - -
- )} -
-
- -
-
-
{_t("wallet.hive-dollars")}
-
{_t("wallet.hive-dollars-description")}
-
-
-
- {(() => { - let dropDownConfig: any - if (isMyPage) { - dropDownConfig = { - history: this.props.history, - label: '', - items: [ - { - label: _t('wallet.transfer'), - onClick: () => { - this.openTransferDialog('transfer', 'HBD'); - } - }, - { - label: _t('wallet.transfer-to-savings'), - onClick: () => { - this.openTransferDialog('transfer-saving', 'HBD'); - } - }, - { - label: _t('wallet.convert'), - onClick: () => { - this.openTransferDialog('convert', 'HBD'); - } - }, - { - label: _t('market-data.trade'), - onClick: () => { - this.props.history.push("/market"); - } - }, - ], - }; - } else if (activeUser) { - dropDownConfig = { - history: this.props.history, - label: '', - items: [ - { - label: _t('wallet.transfer'), - onClick: () => { - this.openTransferDialog('transfer', 'HBD'); - } - } - ], - }; - } - return (
- -
) - - })()} - {formattedNumber(w.hbdBalance, {prefix: "$"})} -
- - {converting > 0 && ( -
- - - {"+"} {formattedNumber(converting, {prefix: "$"})} - - -
- )} - - {withdrawSavings && withdrawSavings.hbd > 0 && ( -
- - this.toggleSavingsWithdrawList('HBD')}> - {"+"} {formattedNumber(withdrawSavings.hbd, {prefix: "$"})} - - -
- )} - - {openOrders && openOrders.hbd > 0 && ( -
- - this.toggleOpenOrdersList('HBD')}> - {"+"} {formattedNumber(openOrders.hbd, {prefix: "$"})} - - -
- )} -
-
- -
-
-
{_t("wallet.savings")}
-
{_t("wallet.savings-description")}
-
{_t("wallet.hive-dollars-apr-rate", {value: hbd})}
-
-
-
- {(() => { - let dropDownConfig: any - if (isMyPage) { - dropDownConfig = { - history: this.props.history, - label: '', - items: [ - { - label: _t('wallet.withdraw-hive'), - onClick: () => { - this.openTransferDialog('withdraw-saving', 'HIVE'); - } - }, - ], - }; - } else if (activeUser) { - dropDownConfig = { - history: this.props.history, - label: '', - items: [ - { - label: _t('wallet.transfer'), - onClick: () => { - this.openTransferDialog('transfer-saving', 'HIVE'); - } - } - ], - }; - } - return (
- -
) - - })()} - {formattedNumber(w.savingBalance, {suffix: "HIVE"})} -
-
- {(() => { - let dropDownConfig: any - if (isMyPage) { - dropDownConfig = { - history: this.props.history, - label: '', - items: [ - { - label: _t('wallet.withdraw-hbd'), - onClick: () => { - this.openTransferDialog('withdraw-saving', 'HBD'); - } - }, - ], - }; - } else if (activeUser) { - dropDownConfig = { - history: this.props.history, - label: '', - items: [ - { - label: _t('wallet.transfer'), - onClick: () => { - this.openTransferDialog('transfer-saving', 'HBD'); - } - }, - ], - }; - } - return (
- -
) - - })()} - - {formattedNumber(w.savingBalanceHbd, {suffix: "$"})} -
-
-
- - {w.isPoweringDown && ( -
- {_t("wallet.next-power-down", { - time: moment(w.nextVestingWithdrawalDate).fromNow(), - amount: formattedNumber(w.nextVestingSharesWithdrawalHive, {suffix: "HIVE"}), - })} -
- )} + const { hivePerMVests } = dynamicProps; + const isMyPage = activeUser && activeUser.username === account.name; + const w = new HiveWallet(account, dynamicProps, converting); + const totalHP = formattedNumber(vestsToHp(w.vestingShares, hivePerMVests), { + suffix: "HP", + }); + const totalDelegated = formattedNumber( + vestsToHp(w.vestingSharesDelegated, hivePerMVests), + { prefix: "-", suffix: "HP" } + ); + + return ( +
+
+
+ {w.hasUnclaimedRewards && !claimed && ( +
+
{_t("wallet.unclaimed-rewards")}
+
+ {w.rewardHiveBalance > 0 && ( + {`${w.rewardHiveBalance} HIVE`} + )} + {w.rewardHbdBalance > 0 && ( + {`${w.rewardHbdBalance} HBD`} + )} + {w.rewardVestingHive > 0 && ( + {`${w.rewardVestingHive} HP`} + )} + {isMyPage && ( + + + {plusCircle} + + + )} +
+
+ )} + +
+
+
{_t("wallet.estimated")}
+
+ {_t("wallet.estimated-description")} +
+
+
+
+ +
+
+
- {TransactionList({...this.props})} -
- +
+
+
{_t("wallet.hive")}
+
+ {_t("wallet.hive-description")} +
+
+
+
+ {(() => { + let dropDownConfig: any; + if (isMyPage) { + dropDownConfig = { + history: this.props.history, + label: "", + items: [ + { + label: _t("wallet.transfer"), + onClick: () => { + this.openTransferDialog("transfer", "HIVE"); + }, + }, + { + label: _t("wallet.transfer-to-savings"), + onClick: () => { + this.openTransferDialog( + "transfer-saving", + "HIVE" + ); + }, + }, + { + label: _t("wallet.power-up"), + onClick: () => { + this.openTransferDialog("power-up", "HIVE"); + }, + }, + { + label: _t("market-data.trade"), + onClick: () => { + this.props.history.push("/market"); + }, + }, + ], + }; + } else if (activeUser) { + dropDownConfig = { + history: this.props.history, + label: "", + items: [ + { + label: _t("wallet.transfer"), + onClick: () => { + this.openTransferDialog("transfer", "HIVE"); + }, + }, + ], + }; + } + return ( +
+ +
+ ); + })()} + + {formattedNumber(w.balance, { suffix: "HIVE" })}
+ {openOrders && openOrders.hive > 0 && ( +
+ + this.toggleOpenOrdersList("HIVE")} + > + {"+"}{" "} + {formattedNumber(openOrders.hive, { + suffix: "HIVE", + })} + + +
+ )} + {withdrawSavings && withdrawSavings.hive > 0 && ( +
+ + this.toggleSavingsWithdrawList("HIVE")} + > + {"+"}{" "} + {formattedNumber(withdrawSavings.hive, { + suffix: "HIVE", + })} + + +
+ )} +
+
- {transfer && } +
+
+
{_t("wallet.hive-power")}
+
+ {_t("wallet.hive-power-description")} +
+
+ {_t("wallet.hive-power-apr-rate", { value: hp })} +
+
+ +
+
+ {(() => { + let dropDownConfig: any; + if (isMyPage) { + dropDownConfig = { + history: this.props.history, + label: "", + items: [ + { + label: _t("wallet.delegate"), + onClick: () => { + this.openTransferDialog("delegate", "HP"); + }, + }, + { + label: _t("wallet.power-down"), + onClick: () => { + this.openTransferDialog("power-down", "HP"); + }, + }, + { + label: _t("wallet.withdraw-routes"), + onClick: () => { + this.toggleWithdrawRoutes(); + }, + }, + ], + }; + } else if (activeUser) { + dropDownConfig = { + history: this.props.history, + label: "", + items: [ + { + label: _t("wallet.delegate"), + onClick: () => { + this.openTransferDialog("delegate", "HP"); + }, + }, + { + label: _t("wallet.power-up"), + onClick: () => { + this.openTransferDialog("power-up", "HIVE"); + }, + }, + ], + }; + } + return ( +
+ +
+ ); + })()} + {totalHP} +
- {this.state.delegatedList && ( - + {w.vestingSharesDelegated > 0 && ( +
+ + + {formattedNumber( + vestsToHp(w.vestingSharesDelegated, hivePerMVests), + { prefix: "-", suffix: "HP" } + )} + + +
)} - {this.state.receivedList && ( - + {(() => { + if (w.vestingSharesReceived <= 0) { + return null; + } + + const strReceived = formattedNumber( + vestsToHp(w.vestingSharesReceived, hivePerMVests), + { prefix: "+", suffix: "HP" } + ); + + if (global.usePrivate) { + return ( +
+ + + {strReceived} + + +
+ ); + } + + return ( +
+ + {strReceived} + +
+ ); + })()} + + {w.nextVestingSharesWithdrawal > 0 && ( +
+ + + {formattedNumber( + vestsToHp( + w.nextVestingSharesWithdrawal, + hivePerMVests + ), + { prefix: "-", suffix: "HP" } + )} + + +
)} - {this.state.convertList && ( - + {(w.vestingSharesDelegated > 0 || + w.vestingSharesReceived > 0 || + w.nextVestingSharesWithdrawal > 0) && ( +
+ + + {formattedNumber( + vestsToHp(w.vestingSharesTotal, hivePerMVests), + { prefix: "=", suffix: "HP" } + )} + + +
)} +
+
+ +
+
+
{_t("wallet.hive-dollars")}
+
+ {_t("wallet.hive-dollars-description")} +
+
+
+
+ {(() => { + let dropDownConfig: any; + if (isMyPage) { + dropDownConfig = { + history: this.props.history, + label: "", + items: [ + { + label: _t("wallet.transfer"), + onClick: () => { + this.openTransferDialog("transfer", "HBD"); + }, + }, + { + label: _t("wallet.transfer-to-savings"), + onClick: () => { + this.openTransferDialog("transfer-saving", "HBD"); + }, + }, + { + label: _t("wallet.convert"), + onClick: () => { + this.openTransferDialog("convert", "HBD"); + }, + }, + { + label: _t("market-data.trade"), + onClick: () => { + this.props.history.push("/market"); + }, + }, + ], + }; + } else if (activeUser) { + dropDownConfig = { + history: this.props.history, + label: "", + items: [ + { + label: _t("wallet.transfer"), + onClick: () => { + this.openTransferDialog("transfer", "HBD"); + }, + }, + ], + }; + } + return ( +
+ +
+ ); + })()} + {formattedNumber(w.hbdBalance, { prefix: "$" })} +
- {this.state.savingsWithdrawList && ( - this.toggleSavingsWithdrawList('HBD')}/> + {converting > 0 && ( +
+ + + {"+"} {formattedNumber(converting, { prefix: "$" })} + + +
)} - {this.state.openOrdersList && ( - this.toggleOpenOrdersList('HBD')}/> + {withdrawSavings && withdrawSavings.hbd > 0 && ( +
+ + this.toggleSavingsWithdrawList("HBD")} + > + {"+"}{" "} + {formattedNumber(withdrawSavings.hbd, { + prefix: "$", + })} + + +
)} - {this.state.withdrawRoutes && ( - + {openOrders && openOrders.hbd > 0 && ( +
+ + this.toggleOpenOrdersList("HBD")} + > + {"+"} {formattedNumber(openOrders.hbd, { prefix: "$" })} + + +
)} +
- ); - } -} +
+
+
{_t("wallet.savings")}
+
+ {_t("wallet.savings-description")} +
+
+ {_t("wallet.hive-dollars-apr-rate", { value: hbd })} +
+
+
+
+ {(() => { + let dropDownConfig: any; + if (isMyPage) { + dropDownConfig = { + history: this.props.history, + label: "", + items: [ + { + label: _t("wallet.withdraw-hive"), + onClick: () => { + this.openTransferDialog( + "withdraw-saving", + "HIVE" + ); + }, + }, + ], + }; + } else if (activeUser) { + dropDownConfig = { + history: this.props.history, + label: "", + items: [ + { + label: _t("wallet.transfer"), + onClick: () => { + this.openTransferDialog( + "transfer-saving", + "HIVE" + ); + }, + }, + ], + }; + } + return ( +
+ +
+ ); + })()} + + {formattedNumber(w.savingBalance, { suffix: "HIVE" })} + +
+
+ {(() => { + let dropDownConfig: any; + if (isMyPage) { + dropDownConfig = { + history: this.props.history, + label: "", + items: [ + { + label: _t("wallet.withdraw-hbd"), + onClick: () => { + this.openTransferDialog("withdraw-saving", "HBD"); + }, + }, + ], + }; + } else if (activeUser) { + dropDownConfig = { + history: this.props.history, + label: "", + items: [ + { + label: _t("wallet.transfer"), + onClick: () => { + this.openTransferDialog("transfer-saving", "HBD"); + }, + }, + ], + }; + } + return ( +
+ +
+ ); + })()} + + + {formattedNumber(w.savingBalanceHbd, { suffix: "$" })} + +
+
+
-export default (p: Props) => { - const props = { - history: p.history, - global: p.global, - dynamicProps: p.dynamicProps, - activeUser: p.activeUser, - transactions: p.transactions, - account: p.account, - signingKey: p.signingKey, - addAccount: p.addAccount, - updateActiveUser: p.updateActiveUser, - setSigningKey: p.setSigningKey, - fetchTransactions: p.fetchTransactions, - updateWalletValues: p.updateWalletValues, - fetchPoints: p.fetchPoints - } - - return ; + {w.isPoweringDown && ( +
+ {_t("wallet.next-power-down", { + time: moment(w.nextVestingWithdrawalDate).fromNow(), + amount: formattedNumber(w.nextVestingSharesWithdrawalHive, { + suffix: "HIVE", + }), + })} +
+ )} + + {TransactionList({ ...this.props })} +
+ +
+ + {transfer && ( + + )} + + {this.state.delegatedList && ( + + )} + + {this.state.receivedList && ( + + )} + + {this.state.convertList && ( + + )} + + {this.state.savingsWithdrawList && ( + this.toggleSavingsWithdrawList("HBD")} + /> + )} + + {this.state.openOrdersList && ( + this.toggleOpenOrdersList("HBD")} + /> + )} + + {this.state.withdrawRoutes && ( + + )} +
+ ); + } } + +export default (p: Props) => { + const props = { + history: p.history, + global: p.global, + communities: p.communities, + dynamicProps: p.dynamicProps, + activeUser: p.activeUser, + transactions: p.transactions, + account: p.account, + signingKey: p.signingKey, + addAccount: p.addAccount, + updateActiveUser: p.updateActiveUser, + setSigningKey: p.setSigningKey, + fetchTransactions: p.fetchTransactions, + updateWalletValues: p.updateWalletValues, + fetchPoints: p.fetchPoints, + }; + + return ; +}; diff --git a/src/common/components/wallet-menu/index.tsx b/src/common/components/wallet-menu/index.tsx index 6908b13cc7b..c970941da92 100644 --- a/src/common/components/wallet-menu/index.tsx +++ b/src/common/components/wallet-menu/index.tsx @@ -8,39 +8,60 @@ import _c from "../../util/fix-class-names"; import {hiveSvg} from "../../img/svg"; import {hiveEngineSvg} from "../../img/svg"; - +import { getCommunities } from "../../api/bridge"; +import { Community } from "../../store/communities/types"; +import defaults from "../../constants/defaults.json"; interface Props { - global: Global; - username: string; - active: string; + global: Global; + communities: Community[]; + username: string; + active: string; } export default class WalletMenu extends Component { - render() { - const {global, username, active} = this.props; - const logo = global.isElectron ? "./img/logo-small-transparent.png" : require('../../img/logo-small-transparent.png'); - - return ( -
- {global.usePrivate && ( - - Ecency - Points - ecency - - )} - - Hive - Wallet - {hiveSvg} - - - Engine - Tokens - {hiveEngineSvg} - -
- ); - } + render() { + const { global, username, active, communities } = this.props; + + const name = global.hive_id; + const community = communities.find((x) => x.name === name)!; + const logo = `${defaults.imageServer}/u/${global.hive_id}/avatar/lardge`; + + return ( +
+ {global.usePrivate && ( + + {community?.title} + Points + + ecency + + + )} + + Hive + Wallet + {hiveSvg} + + + Engine + Tokens + {hiveEngineSvg} + +
+ ); + } } diff --git a/src/common/pages/community.tsx b/src/common/pages/community.tsx index cc242027744..708006a5571 100644 --- a/src/common/pages/community.tsx +++ b/src/common/pages/community.tsx @@ -95,10 +95,11 @@ class CommunityPage extends BaseComponent { async componentDidMount() { await this.ensureData(); - const { match, fetchEntries } = this.props; + const { match, fetchEntries, global } = this.props; + const { filter } = match.params; - const { filter, name } = match.params; - if (EntryFilter[filter]) { + const name = global.hive_id; + if (EntryFilter[filter] && name) { // fetch blog posts. fetchEntries(filter, name, false); } @@ -113,10 +114,11 @@ class CommunityPage extends BaseComponent { } componentDidUpdate(prevProps: Readonly): void { - const { match, fetchEntries } = this.props; + const { match, fetchEntries, global } = this.props; const { match: prevMatch } = prevProps; - const { filter, name } = match.params; + const { filter } = match.params; + const name = global.hive_id; const { params: prevParams } = prevMatch; // community changed. fetch community and account data. @@ -129,7 +131,7 @@ class CommunityPage extends BaseComponent { (filter !== prevParams.filter || name !== prevParams.name) && EntryFilter[filter] ) { - fetchEntries(match.params.filter, match.params.name, false); + fetchEntries(match.params.filter, global.hive_id, false); } // re-fetch subscriptions once active user changed. @@ -145,15 +147,15 @@ class CommunityPage extends BaseComponent { ensureData = (): Promise => { const { - match, communities, addCommunity, accounts, addAccount, activeUser, + global, } = this.props; - const name = match.params.name; + const name = global.hive_id; const community = communities.find((x) => x.name === name); const account = accounts.find((x) => x.name === name); @@ -180,15 +182,16 @@ class CommunityPage extends BaseComponent { }; bottomReached = () => { - const { match, entries, fetchEntries } = this.props; + const { match, entries, fetchEntries, global } = this.props; const { search } = this.state; - const { filter, name } = match.params; + const { filter } = match.params; + const name = global.hive_id; const groupKey = makeGroupKey(filter, name); const data = entries[groupKey]; const { loading, hasMore } = data; - if (!loading && hasMore && search.length === 0) { + if (!loading && hasMore && search.length === 0 && name) { fetchEntries(filter, name, true); } }; @@ -196,10 +199,11 @@ class CommunityPage extends BaseComponent { reload = () => { this.stateSet({ loading: true }); this.ensureData().then(() => { - const { match, fetchEntries, invalidateEntries } = this.props; - const { filter, name } = match.params; + const { match, fetchEntries, invalidateEntries, global } = this.props; + const { filter } = match.params; + const name = global.hive_id; - if (EntryFilter[filter]) { + if (EntryFilter[filter] && name) { invalidateEntries(makeGroupKey(filter, name)); fetchEntries(filter, name, false); } diff --git a/src/common/store/entries/index.ts b/src/common/store/entries/index.ts index 22e92ed036a..2c3c98bc7c7 100644 --- a/src/common/store/entries/index.ts +++ b/src/common/store/entries/index.ts @@ -141,7 +141,6 @@ export const fetchEntries = (what: string = "", tag: string = "", more: boolean ) => { const {entries, activeUser} = getState(); const pageSize = dataLimit; - const groupKey = makeGroupKey(what, tag); const theEntries = entries[groupKey].entries; diff --git a/src/config.ts b/src/config.ts index a4fc88ffc0c..cae48cc85bb 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,7 +1,7 @@ /* !!! DO NOT IMPORT config.js TO FRONTEND CODE !!! */ export default { - usePrivate: process.env.USE_PRIVATE || "0", // "1" | "0" + usePrivate: process.env.USE_PRIVATE || "1", // "1" | "0" hsClientSecret: process.env.HIVESIGNER_SECRET || "", // when USE_PRIVATE=0 and HIVESIGNER client section must be provided, hive_id: process.env.HIVE_ID || "", theme: process.env.THEME || "", diff --git a/src/desktop/app/components/navbar/index.tsx b/src/desktop/app/components/navbar/index.tsx index b543eb27b05..b5fb1c6fcbb 100644 --- a/src/desktop/app/components/navbar/index.tsx +++ b/src/desktop/app/components/navbar/index.tsx @@ -383,99 +383,140 @@ export class NavBar extends Component { render() { const {global, activeUser, history, location, ui, step, match} = this.props; const themeText = global.theme == Theme.day ? _t("navbar.night-theme") : _t("navbar.day-theme"); - const communityPage = match && match.params.name && isCommunity(match.params.name) - const tagValue = global.tag ? `/${global.tag}` : '' - const logoHref = activeUser ? - (communityPage || ((global.tag.includes('@')) && (['engine','wallet','points','communities','settings','permissions','comments','replies','blog', 'posts'].includes(global.filter)))) ? - '/hot' : - global.filter === 'feed' ? `${tagValue}/${global.filter}` : `/${global.filter}${tagValue}` - : '/'; - - const {floating} = this.state; + const communityPage = + match && global.hive_id && isCommunity(global.hive_id); + const tagValue = global.tag ? `/${global.tag}` : ""; + const logoHref = activeUser + ? communityPage || + (global.tag.includes("@") && + [ + "engine", + "wallet", + "points", + "communities", + "settings", + "permissions", + "comments", + "replies", + "blog", + "posts", + ].includes(global.filter)) + ? "/hot" + : global.filter === "feed" + ? `${tagValue}/${global.filter}` + : `/${global.filter}${tagValue}` + : "/"; + + const { floating } = this.state; const textMenuConfig = { - history: this.props.history, - label: '', - icon: dotsHorizontal, - items: [ - { - label: _t("navbar.discover"), - href: `/discover`, - active: location.pathname === '/discover' - }, - { - label: _t("navbar.communities"), - href: `/communities`, - active: location.pathname === '/communities' - } - ], - postElem:
Ecency Surfer {version}
+ history: this.props.history, + label: "", + icon: dotsHorizontal, + items: [ + { + label: _t("navbar.discover"), + href: `/discover`, + active: location.pathname === "/discover", + }, + { + label: _t("navbar.communities"), + href: `/communities`, + active: location.pathname === "/communities", + }, + ], + postElem: ( +
+ Ecency Surfer {version} +
+ ), }; - let noMargin = step && step === 1 - + let noMargin = step && step === 1; + return ( - <> - {floating && (
)} -
-
-
- - Logo - -
- -
- -
- -
- -
- -
- -
- - {SwitchLang({...this.props})} - - -
- {brightnessSvg} -
- - - {!activeUser && ( -
- - - {_t("g.signup")} -
- )} - -
- - - {pencilOutlineSvg} - - -
- - {activeUser && } -
- - {ui.login && } - {global.usePrivate && } + <> + {floating &&
} +
+
+
+ + Logo +
- {global.newVersion && } - - ) +
+ +
+
+ +
+ +
+ +
+ + {SwitchLang({ ...this.props })} + + +
+ {brightnessSvg} +
+ + + {!activeUser && ( +
+ + + + {_t("g.signup")} + +
+ )} + +
+ + + {pencilOutlineSvg} + + +
+ + {activeUser && ( + + )} +
+ + {ui.login && } + {global.usePrivate && } +
+ {global.newVersion && ( + + )} + + ); } } diff --git a/src/server/state.ts b/src/server/state.ts index d96b8bb766c..4f23222f1b6 100644 --- a/src/server/state.ts +++ b/src/server/state.ts @@ -48,7 +48,7 @@ export const makePreloadedState = async ( getOperatingSystem(req.headers["user-agent"]) ) ), - usePrivate: false, + usePrivate: true, hive_id: config.hive_id, ctheme: config.theme, tags: [...config.tags],