From 22900e4485f5c3f31ad46f9fe55ae04a8c1bf2e8 Mon Sep 17 00:00:00 2001 From: William Martin Date: Mon, 30 Jan 2023 18:57:59 +0100 Subject: [PATCH] Add: Actions List Item (basic) --- .../ColonyActions/ActionsListHeading.css | 2 +- .../common/ColonyActions/mockData.ts | 4 +- .../shared/ActionsList/ActionsList.tsx | 2 +- .../shared/ActionsList/ActionsListItem.css | 7 +- .../ActionsList/ActionsListItem.css.d.ts | 57 ++-- .../shared/ActionsList/ActionsListItem.tsx | 255 +++++++----------- src/graphql/fragments/domains.graphql | 2 +- src/styles/variables.css | 1 + src/types/actions.ts | 8 +- 9 files changed, 136 insertions(+), 202 deletions(-) diff --git a/src/components/common/ColonyActions/ActionsListHeading.css b/src/components/common/ColonyActions/ActionsListHeading.css index a33d4ab3ce3..544c552378f 100644 --- a/src/components/common/ColonyActions/ActionsListHeading.css +++ b/src/components/common/ColonyActions/ActionsListHeading.css @@ -20,4 +20,4 @@ font-size: var(--size-smallish); font-weight: var(--weight-bold); color: var(--dark); -} \ No newline at end of file +} diff --git a/src/components/common/ColonyActions/mockData.ts b/src/components/common/ColonyActions/mockData.ts index 8ec487b6b9c..52e2c4f7184 100644 --- a/src/components/common/ColonyActions/mockData.ts +++ b/src/components/common/ColonyActions/mockData.ts @@ -39,6 +39,9 @@ const colonyEditValues: { const fakeUser: User = { walletAddress: '0xCd96D435128415F3265c32f9eaeFaCc6Be53b7D7', name: 'Steven', + profile: { + displayName: 'Steven', + }, }; const coreData = { @@ -58,7 +61,6 @@ const coreData = { colonyAvatarHash: null, colonyTokens: [], blockNumber: 999, - motionState: undefined, isWhitelistActivated: false, verifiedAddresses: [], }; diff --git a/src/components/shared/ActionsList/ActionsList.tsx b/src/components/shared/ActionsList/ActionsList.tsx index 6f5a41ec075..53fe29a1f2f 100644 --- a/src/components/shared/ActionsList/ActionsList.tsx +++ b/src/components/shared/ActionsList/ActionsList.tsx @@ -1,6 +1,6 @@ import React, { ComponentType } from 'react'; -import { ActionsListItem } from '~common/ColonyActions'; +import ActionsListItem from './ActionsListItem'; const displayName = 'ActionsList'; diff --git a/src/components/shared/ActionsList/ActionsListItem.css b/src/components/shared/ActionsList/ActionsListItem.css index 1188062ddd1..1fce99970f7 100644 --- a/src/components/shared/ActionsList/ActionsListItem.css +++ b/src/components/shared/ActionsList/ActionsListItem.css @@ -39,11 +39,6 @@ border-radius: 100%; } -.avatar:hover figure { - border-color: var(--primary); - background: var(--primary); -} - .status::before { display: block; margin-left: -17px; @@ -140,7 +135,7 @@ } .commentCountIcon svg { - fill: color-mod(var(--dark) alpha(70%)); + fill: rgba(var(--dark-1), 0.7); } .userMention { diff --git a/src/components/shared/ActionsList/ActionsListItem.css.d.ts b/src/components/shared/ActionsList/ActionsListItem.css.d.ts index 443754b85e5..a29d4c11ee7 100644 --- a/src/components/shared/ActionsList/ActionsListItem.css.d.ts +++ b/src/components/shared/ActionsList/ActionsListItem.css.d.ts @@ -1,23 +1,34 @@ -export const mainTextSize: string; -export const popoverWidth: string; -export const popoverDistance: string; -export const main: string; -export const avatar: string; -export const status: string; -export const stateNeedAction: string; -export const stateNeedAttention: string; -export const stateYellow: string; -export const content: string; -export const titleWrapper: string; -export const title: string; -export const meta: string; -export const separator: string; -export const day: string; -export const domain: string; -export const commentCount: string; -export const commentCountIcon: string; -export const userMention: string; -export const stateNoPointer: string; -export const titleDecoration: string; -export const motionTagWrapper: string; -export const countdownTimerContainer: string; +declare namespace ActionsListItemCssNamespace { + export interface IActionsListItemCss { + avatar: string; + commentCount: string; + commentCountIcon: string; + content: string; + countdownTimerContainer: string; + day: string; + domain: string; + main: string; + mainTextSize: string; + meta: string; + motionTagWrapper: string; + popoverDistance: string; + popoverWidth: string; + separator: string; + stateNeedAction: string; + stateNeedAttention: string; + stateNoPointer: string; + stateYellow: string; + status: string; + title: string; + titleDecoration: string; + titleWrapper: string; + userMention: string; + } +} + +declare const ActionsListItemCssModule: ActionsListItemCssNamespace.IActionsListItemCss & { + /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */ + locals: ActionsListItemCssNamespace.IActionsListItemCss; +}; + +export = ActionsListItemCssModule; diff --git a/src/components/shared/ActionsList/ActionsListItem.tsx b/src/components/shared/ActionsList/ActionsListItem.tsx index 14667949baa..4b3ec3a143f 100644 --- a/src/components/shared/ActionsList/ActionsListItem.tsx +++ b/src/components/shared/ActionsList/ActionsListItem.tsx @@ -1,62 +1,40 @@ -import React, { useMemo, useCallback, useEffect } from 'react'; -import { BigNumber, BigNumberish } from 'ethers'; -import { AddressZero } from '@ethersproject/constants'; +import React from 'react'; import { FormattedDateParts, FormattedMessage, defineMessages, - useIntl, } from 'react-intl'; -import { ColonyRoles } from '@colony/colony-js'; import Decimal from 'decimal.js'; -import HookedUserAvatar from '~users/HookedUserAvatar'; import Numeral from '~shared/Numeral'; import Icon from '~shared/Icon'; import FriendlyName from '~shared/FriendlyName'; import Tag, { Appearance as TagAppearance } from '~shared/Tag'; -import CountDownTimer from '~dashboard/ActionsPage/CountDownTimer'; +import UserAvatar from '~shared/UserAvatar'; -import { getMainClasses, removeValueUnits } from '~utils/css'; +import { getMainClasses } from '~utils/css'; import { getFormattedTokenValue, getTokenDecimalsWithFallback, } from '~utils/tokens'; -import { - useUser, - Colony, - useColonyHistoricRolesQuery, - useTokenInfoLazyQuery, - useNetworkContracts, -} from '~data/index'; -import { createAddress } from '~utils/web3'; -import { FormattedAction, ColonyActions, ColonyMotions } from '~types'; -import { useDataFetcher } from '~utils/hooks'; -import { parseDomainMetadata } from '~utils/colonyActions'; -import { useFormatRolesTitle } from '~utils/hooks/useFormatRolesTitle'; -import { useEnabledExtensions } from '~utils/hooks/useEnabledExtensions'; -import { - getUpdatedDecodedMotionRoles, - MotionState, - MOTION_TAG_MAP, -} from '~utils/colonyMotions'; -import { ipfsDataFetcher } from '../../../core/fetchers'; -import { ClickHandlerProps } from './ActionsList'; +import { FormattedAction } from '~types'; +import { useFormatRolesTitle, useAppContext, useColonyContext } from '~hooks'; +import { MotionState, MOTION_TAG_MAP } from '~utils/colonyMotions'; +import { findDomain } from '~utils/domains'; +import { formatText } from '~utils/intl'; -import styles, { popoverWidth, popoverDistance } from './ActionsListItem.css'; +import styles from './ActionsListItem.css'; const displayName = 'ActionsList.ActionsListItem'; -const UserAvatar = HookedUserAvatar(); - const MSG = defineMessages({ domain: { - id: 'ActionsList.ActionsListItem.domain', + id: `${displayName}.domain`, defaultMessage: 'Team {domainId}', }, titleCommentCount: { - id: 'ActionsList.ActionsListItem.titleCommentCount', + id: `${displayName}.titleCommentCount`, defaultMessage: `{formattedCommentCount} {commentCount, plural, one {comment} other {comments} @@ -75,151 +53,107 @@ export enum ItemStatus { interface Props { item: FormattedAction; - colony: Colony; - handleOnClick?: (handlerProps: ClickHandlerProps) => void; + handleOnClick?: () => void; } const ActionsListItem = ({ item: { - id, actionType, initiator, recipient, amount, - symbol: colonyTokenSymbol, - decimals: colonyTokenDecimals, + tokenSymbol, + decimals, fromDomain: fromDomainId, toDomain: toDomainId, - transactionHash, createdAt, commentCount = 0, - metadata, roles, newVersion, status = ItemStatus.Defused, motionState, - motionId, - blockNumber, - totalNayStake, - requiredStake, - transactionTokenAddress, reputationChange, }, - colony, handleOnClick, }: Props) => { - const { formatMessage, formatNumber } = useIntl(); - const { data: metadataJSON } = useDataFetcher( - ipfsDataFetcher, - [metadata as string], - [metadata], - ); + const { user } = useAppContext(); + const { colony } = useColonyContext(); + // const { isVotingExtensionEnabled } = useEnabledExtensions({ + // colonyAddress: colony.colonyAddress, + // }); - const { isVotingExtensionEnabled } = useEnabledExtensions({ - colonyAddress: colony.colonyAddress, - }); + // const { data: historicColonyRoles } = useColonyHistoricRolesQuery({ + // variables: { + // colonyAddress: colony.colonyAddress, + // blockNumber, + // }, + // }); - const { data: historicColonyRoles } = useColonyHistoricRolesQuery({ - variables: { - colonyAddress: colony.colonyAddress, - blockNumber, - }, - }); + // const [fetchTokenInfo, { data: tokenData }] = useTokenInfoLazyQuery(); - const [fetchTokenInfo, { data: tokenData }] = useTokenInfoLazyQuery(); + // useEffect(() => { + // if (transactionTokenAddress) { + // fetchTokenInfo({ variables: { address: transactionTokenAddress } }); + // } + // }, [fetchTokenInfo, transactionTokenAddress]); - useEffect(() => { - if (transactionTokenAddress) { - fetchTokenInfo({ variables: { address: transactionTokenAddress } }); - } - }, [fetchTokenInfo, transactionTokenAddress]); + // const isColonyAddress = recipientAddress === colony?.colonyAddress; + // const fallbackRecipientProfile = recipient; - const initiatorUserProfile = useUser(createAddress(initiator || AddressZero)); - const recipientAddress = createAddress(recipient); - const isColonyAddress = recipientAddress === colony.colonyAddress; - const fallbackRecipientProfile = useUser( - isColonyAddress ? '' : recipientAddress, - ); + const fromDomain = findDomain(fromDomainId, colony); + const toDomain = findDomain(toDomainId, colony); - const fromDomain = colony.domains.find( - ({ ethDomainId }) => ethDomainId === parseInt(fromDomainId, 10), - ); - const toDomain = colony.domains.find( - ({ ethDomainId }) => ethDomainId === parseInt(toDomainId, 10), - ); - - const updatedRoles = getUpdatedDecodedMotionRoles( - fallbackRecipientProfile, - parseInt(fromDomainId, 10), - historicColonyRoles?.historicColonyRoles as unknown as ColonyRoles, - roles || [], - ); + // const updatedRoles = getUpdatedDecodedMotionRoles( + // fallbackRecipientProfile, + // parseInt(fromDomainId, 10), + // historicColonyRoles?.historicColonyRoles as unknown as ColonyRoles, + // roles || [], + // ); const { roleMessageDescriptorId, roleTitle } = useFormatRolesTitle( - actionType === ColonyMotions.SetUserRolesMotion ? updatedRoles : roles, + roles, + // actionType === ColonyMotions.SetUserRolesMotion ? updatedRoles : roles, actionType, ); - const popoverPlacement = useMemo(() => { - const offsetSkid = (-1 * removeValueUnits(popoverWidth)) / 2; - return [offsetSkid, removeValueUnits(popoverDistance)]; - }, []); - - const handleSyntheticEvent = useCallback( - () => handleOnClick && handleOnClick({ id, transactionHash }), - [handleOnClick, id, transactionHash], - ); - - const totalNayStakeValue = BigNumber.from(totalNayStake || 0); - const isFullyNayStaked = totalNayStakeValue.gte( - BigNumber.from(requiredStake || 0), - ); + // const totalNayStakeValue = BigNumber.from(totalNayStake || 0); + // const isFullyNayStaked = totalNayStakeValue.gte( + // BigNumber.from(requiredStake || 0), + // ); - let domainName; - if ( - metadataJSON && - (actionType === ColonyActions.EditDomain || - actionType === ColonyActions.CreateDomain || - actionType === ColonyMotions.CreateDomainMotion) - ) { - const domainObject = parseDomainMetadata(metadataJSON); - domainName = domainObject.domainName; - } const motionStyles = MOTION_TAG_MAP[ - motionState || - (isVotingExtensionEnabled && - !actionType?.endsWith('Motion') && - MotionState.Forced) || + motionState /* isVotingExtensionEnabled && */ || + (!actionType?.endsWith('Motion') && MotionState.Forced) || MotionState.Invalid ]; - const decimals = - tokenData?.tokenInfo?.decimals || Number(colonyTokenDecimals); - const symbol = tokenData?.tokenInfo?.symbol || colonyTokenSymbol; + // const decimals = + // tokenData?.tokenInfo?.decimals || Number(colonyTokenDecimals); + // const symbol = tokenData?.tokenInfo?.symbol || colonyTokenSymbol; const formattedReputationChange = getFormattedTokenValue( new Decimal(reputationChange || '0').abs().toString(), decimals, ); - const isMotionFinished = - motionState === MotionState.Passed || - motionState === MotionState.Failed || - motionState === MotionState.FailedNoFinalizable; + // const isMotionFinished = + // motionState === MotionState.Passed || + // motionState === MotionState.Failed || + // motionState === MotionState.FailedNoFinalizable; const stopPropagation = (event) => event.stopPropagation(); - const { feeInverse: networkFeeInverse } = useNetworkContracts(); - const feePercentage = networkFeeInverse - ? BigNumber.from(100).div(networkFeeInverse) - : undefined; + // const { feeInverse: networkFeeInverse } = useNetworkContracts(); + // const feePercentage = networkFeeInverse + // ? BigNumber.from(100).div(networkFeeInverse) + // : undefined; - // In case it is a Payment Motion or Action, calculate the payment the recipient gets, after network fees - const paymentReceivedFn = feePercentage - ? (paymentAmount: BigNumberish) => - BigNumber.from(paymentAmount) - .mul(BigNumber.from(100).sub(feePercentage)) - .div(100) - : (x: any) => x; + // // In case it is a Payment Motion or Action, calculate the payment the recipient gets, after network fees + // const paymentReceivedFn = feePercentage + // ? (paymentAmount: BigNumberish) => + // BigNumber.from(paymentAmount) + // .mul(BigNumber.from(100).sub(feePercentage)) + // .div(100) + // : (x: any) => x; return (
  • @@ -243,8 +177,8 @@ const ActionsListItem = ({ noPointer: !handleOnClick, [ItemStatus[status]]: !!status, })} - onClick={handleSyntheticEvent} - onKeyPress={handleSyntheticEvent} + onClick={handleOnClick} + onKeyPress={handleOnClick} >
    {initiator && ( - + ), /* @@ -301,27 +230,24 @@ const ActionsListItem = ({ */ recipient: ( - + ), amount: ( ), - tokenSymbol: symbol, + tokenSymbol, decimals: getTokenDecimalsWithFallback(decimals), - fromDomain: domainName || fromDomain?.name || '', + fromDomain: fromDomain?.name || '', toDomain: toDomain?.name || '', roles: roleTitle, newVersion: newVersion || '0', @@ -332,7 +258,7 @@ const ActionsListItem = ({ }} /> - {(motionState || isVotingExtensionEnabled) && ( + {motionState /* || isVotingExtensionEnabled */ && (
    {fromDomain && ( - {domainName || fromDomain.name ? ( - domainName || fromDomain.name + {fromDomain.name ? ( + fromDomain.name ) : ( )}
    - {motionId && !isMotionFinished && ( + {/* {motionId && !isMotionFinished && (
    - )} + )} */}
    • ); diff --git a/src/graphql/fragments/domains.graphql b/src/graphql/fragments/domains.graphql index e78d084b24b..cd843ce8213 100644 --- a/src/graphql/fragments/domains.graphql +++ b/src/graphql/fragments/domains.graphql @@ -5,4 +5,4 @@ fragment Domain on Domain { name nativeId parentId: domainParentId -} \ No newline at end of file +} diff --git a/src/styles/variables.css b/src/styles/variables.css index 15c7c11246c..9bd921444f5 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -9,6 +9,7 @@ --pink: rgb(254, 94, 124); --golden: rgba(255, 176, 0); /* Think pending states (golden yellow) */ --dark: rgb(60, 68, 77); /* Used for colony name display (colony simplified) */ + --dark-1: 60, 68, 77; --grey-dark: rgb(47, 47, 47); --text-disabled: rgb(194, 204, 204); --colony-light-blue: rgb(238, 242, 245); diff --git a/src/types/actions.ts b/src/types/actions.ts index 78c9c216c80..258636163a5 100644 --- a/src/types/actions.ts +++ b/src/types/actions.ts @@ -4,7 +4,7 @@ import { ItemStatus } from '~core/ActionsList'; import { MotionTimeoutPeriods } from '~data/generated'; import { MotionState } from '~utils/colonyMotions'; -import { Address, ActionUserRoles } from './index'; +import { Address, ActionUserRoles, User } from './index'; import { ColonyMotions } from './motions'; export enum ColonyActions { @@ -133,12 +133,12 @@ export interface FormattedAction { id: string; status?: ItemStatus; actionType: ColonyActions | ColonyMotions; - initiator: Address; - recipient: Address; + initiator: User; + recipient: User; amount: string; tokenAddress: Address; transactionTokenAddress?: Address; - symbol: string; + tokenSymbol: string; decimals: string; fromDomain: string; toDomain: string;