From 84f34f0129eff06d927de55cfd0e43ca0198e0e3 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Mon, 30 Jan 2023 09:48:20 +0100 Subject: [PATCH 1/2] added logs section --- src/i18n/en-system-messages.ts | 10 + .../ActionsPageEvent/ActionsPageEvent.tsx | 5 +- .../components/ActionsPageFeed/types.ts | 10 + .../Incorporation/LogsSection/LogsSection.css | 94 +++++++ .../LogsSection/LogsSection.css.d.ts | 12 + .../Incorporation/LogsSection/LogsSection.tsx | 247 ++++++++++++++++++ .../Incorporation/LogsSection/constants.ts | 216 +++++++++++++++ .../IncorporationPage/IncorporationPage.css | 4 +- .../IncorporationPage/IncorporationPage.tsx | 8 + 9 files changed, 601 insertions(+), 5 deletions(-) create mode 100644 src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.css create mode 100644 src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.css.d.ts create mode 100644 src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.tsx create mode 100644 src/modules/dashboard/components/Incorporation/LogsSection/constants.ts diff --git a/src/i18n/en-system-messages.ts b/src/i18n/en-system-messages.ts index 1d7fafd36a..2d2d8e546b 100644 --- a/src/i18n/en-system-messages.ts +++ b/src/i18n/en-system-messages.ts @@ -32,6 +32,16 @@ const systemMessagesMessageDescriptors = { ${SystemMessagesName.ExpenditureReleaseFunds} {{user} {reputation} released the funds. Funds may be claimed after the security delay.} ${SystemMessagesName.ExpenditureFundsClaimed} {{user} {reputation} claimed their funds of {funds}.} ${SystemMessagesName.ExpenditureAllFundsClaimed} {All funds have been claimed.} + + ${SystemMessagesName.IncorporationCreated} {{user} {reputation} started an incorporation application. {user} is the owner and has control to make changes. Everyone else will need to create a motion to make changes.} + ${SystemMessagesName.IncorporationStaked} {{user} {reputation} has staked {amount} to back the incorporation. Nominated protectors now need to verify their identity to be included in the application.} + ${SystemMessagesName.IncorporationOwnerOrForceEdit} {{user} {reputation} made changes to the {changes} of the incorporation application.} + ${SystemMessagesName.IncorporationMotionModified} {{user} {reputation} created a motion to change the {changes} of the incorporation application.} + ${SystemMessagesName.IncorporationMotionPayment} {{user} {reputation} created a motion to fund and pay the incorporation cost.} + ${SystemMessagesName.IncorporationFailedMotionPayment} {Motion has failed, you are able to review details and resubmit.} + ${SystemMessagesName.IncorporationPassedMotionPayment} {Payment for incorporation and the application documents has been sent to the registrant agent. They will update here with progress.} + ${SystemMessagesName.IncorporationWaitingOnIndemnityForms} {Application has now been processed, all Protectors are now required to sign and return the required Indemnity Form to the registrant agent.} + ${SystemMessagesName.IncorporationCompleted} {Application is complete, the organization has been successfully incorporated.} other {Generic system message} }`, /* diff --git a/src/modules/dashboard/components/ActionsPageFeed/ActionsPageEvent/ActionsPageEvent.tsx b/src/modules/dashboard/components/ActionsPageFeed/ActionsPageEvent/ActionsPageEvent.tsx index d9875255f3..a5581dc5be 100644 --- a/src/modules/dashboard/components/ActionsPageFeed/ActionsPageEvent/ActionsPageEvent.tsx +++ b/src/modules/dashboard/components/ActionsPageFeed/ActionsPageEvent/ActionsPageEvent.tsx @@ -32,6 +32,8 @@ import { import { useDataFetcher } from '~utils/hooks'; import { getFormattedTokenValue } from '~utils/tokens'; import { MotionVote } from '~utils/colonyMotions'; +import { isSystemMessage } from '~dashboard/ExpenditurePage/LogsSection/LogsSection'; +import { isSystemMessageIncorporation } from '~dashboard/Incorporation/LogsSection/LogsSection'; import { ipfsDataFetcher } from '../../../../core/fetchers'; @@ -41,7 +43,6 @@ import { EVENT_ROLES_MAP } from '../../ActionsPage/staticMaps'; import motionSpecificStyles from '../../ActionsPage/ActionsComponents/DefaultMotion.css'; import styles from './ActionsPageEvent.css'; -import { isSystemMessage } from '~dashboard/ExpenditurePage/LogsSection/LogsSection'; const displayName = 'dashboard.ActionsPageFeed.ActionsPageEvent'; @@ -291,7 +292,7 @@ const ActionsPageEvent = ({ }, [domainMetadataHistory, actionData, metadataJSON, eventName]); const getEventTitleMessageDescriptor = useMemo(() => { - if (isSystemMessage(eventName)) { + if (isSystemMessage(eventName) || isSystemMessageIncorporation(eventName)) { return 'systemMessage.title'; } diff --git a/src/modules/dashboard/components/ActionsPageFeed/types.ts b/src/modules/dashboard/components/ActionsPageFeed/types.ts index 093b5cf743..f7f8cae7b1 100644 --- a/src/modules/dashboard/components/ActionsPageFeed/types.ts +++ b/src/modules/dashboard/components/ActionsPageFeed/types.ts @@ -69,6 +69,16 @@ export enum SystemMessagesName { ExpenditureReleaseFunds = 'ExpenditureReleaseFunds', ExpenditureFundsClaimed = 'ExpenditureFundsClaimed', ExpenditureAllFundsClaimed = 'ExpenditureAllFundsClaimed', + + IncorporationCreated = 'IncorporationCreated', + IncorporationStaked = 'IncorporationStaked', + IncorporationOwnerOrForceEdit = 'IncorporationOwnerOrForceEdit', + IncorporationMotionModified = 'IncorporationMotionModified', + IncorporationMotionPayment = 'IncorporationMotionPayment', + IncorporationFailedMotionPayment = 'IncorporationFailedMotionPayment', + IncorporationPassedMotionPayment = 'IncorporationPassedMotionPayment', + IncorporationWaitingOnIndemnityForms = 'IncorporationWaitingOnIndemnityForms', + IncorporationCompleted = 'IncorporationCompleted', } export interface SystemMessage { diff --git a/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.css b/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.css new file mode 100644 index 0000000000..d16cdf5ce5 --- /dev/null +++ b/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.css @@ -0,0 +1,94 @@ +@value inputBackground: rgb(249, 250, 250); +@value shadow: inset 0px 2px 4px color-mod(black alpha(7%)); + +.container { + padding-right: 37px; + padding-bottom: 50px; + width: 100%; +} + +/* selector is for nested ActionPageEvent style */ +.container ul > div > div > div:last-of-type > div { + font-size: var(--size-tiny); + font-weight: var(--weight-bold); + color: var(--dark); + letter-spacing: var(--spacing-medium); +} + +/* selector is for nested Comment style */ +.container ul > div > div > div:last-of-type { + font-size: var(--size-tiny); + font-weight: var(--weight-bold); + color: var(--dark); + letter-spacing: var(--spacing-medium); +} + +.commentInput { + margin-top: 29px; +} + +.commentInput textarea::placeholder { + font-size: var(--size-smallish); + font-style: normal; + color: var(--text-disabled); +} + +.logContainer { + display: flex; + align-items: baseline; + margin-bottom: 18px; + font-size: var(--size-tiny); + font-weight: var(--weight-bold); + color: var(--temp-grey-blue-7); +} + +.dot { + height: 10px; + width: 10px; + border-radius: 50%; + background-color: var(--text-disabled); +} + +.dotContainer { + margin: 0 9px 0 22px; + width: 26px; +} + +.transactionMeta { + width: 100%; +} + +.reputationWrapper { + display: inline-block; + font-size: var(--size-tiny); + font-weight: var(--weight-bold); +} + +.reputationWrapper > div { + padding-right: 0; +} + +.reputationStarWrapper { + display: inline-flex; + align-items: center; + margin-left: 8px; + padding-right: 4px; + padding-left: 10px; + position: relative; +} + +.reputationWrapper i { + right: unset; + left: -16px; +} + +.titleDecoration { + font-weight: var(--weight-bold); + color: var(--pink); +} + +.divider { + margin: 0 0 8px 0; + background-color: var(--temp-grey-blue-7); + opacity: 0.15; +} diff --git a/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.css.d.ts b/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.css.d.ts new file mode 100644 index 0000000000..b208fa783b --- /dev/null +++ b/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.css.d.ts @@ -0,0 +1,12 @@ +export const inputBackground: string; +export const shadow: string; +export const container: string; +export const commentInput: string; +export const logContainer: string; +export const dot: string; +export const dotContainer: string; +export const transactionMeta: string; +export const reputationWrapper: string; +export const reputationStarWrapper: string; +export const titleDecoration: string; +export const divider: string; diff --git a/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.tsx b/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.tsx new file mode 100644 index 0000000000..ac7208bfe0 --- /dev/null +++ b/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.tsx @@ -0,0 +1,247 @@ +import React, { useCallback, Fragment } from 'react'; +import { defineMessages, FormattedMessage } from 'react-intl'; + +import { useLoggedInUser } from '~data/helpers'; +import Comment, { CommentInput } from '~core/Comment'; +import { TransactionMeta } from '~dashboard/ActionsPage'; +import ActionsPageFeed, { + ActionsPageEvent, + ActionsPageFeedType, + EventValues, + FeedItemWithId, + SystemMessagesName, +} from '~dashboard/ActionsPageFeed'; +import { Colony, ParsedEvent, TransactionMessageFragment } from '~data/index'; +import MemberReputation from '~core/MemberReputation'; +import { capitalize } from '~utils/strings'; + +import { colonyAction, systemMessages, transactionHash } from './constants'; +import styles from './LogsSection.css'; + +const MSG = defineMessages({ + commentPlaceholder: { + id: 'dashboard.Incorporation.LogsSection.commentPlaceholder', + defaultMessage: 'What would you like to say?', + }, + emptyLog: { + id: 'dashboard.Incorporation.LogsSection.emptyLog', + defaultMessage: 'Log event', + }, + name: { + id: 'dashboard.Incorporation.LogsSection.name', + defaultMessage: 'Corporation name', + }, + puropse: { + id: 'dashboard.Incorporation.LogsSection.purpose', + defaultMessage: 'DAO Purpose', + }, + alternativeName: { + id: 'dashboard.Incorporation.LogsSection.alternativeName', + defaultMessage: 'Corporation alternative name', + }, + protectors: { + id: 'dashboard.Incorporation.LogsSection.protectors', + defaultMessage: 'Protectors', + }, + mainContact: { + id: 'dashboard.Incorporation.LogsSection.mainContact', + defaultMessage: 'Main Contact', + }, + signOption: { + id: 'dashboard.Incorporation.LogsSection.signOption', + defaultMessage: 'Sign Option', + }, + description: { + id: 'dashboard.Incorporation.LogsSection.description', + defaultMessage: 'Description', + }, +}); + +export const isSystemMessageIncorporation = (name: string) => { + return [ + SystemMessagesName.IncorporationCreated, + SystemMessagesName.IncorporationStaked, + SystemMessagesName.IncorporationOwnerOrForceEdit, + SystemMessagesName.IncorporationMotionModified, + SystemMessagesName.IncorporationMotionPayment, + SystemMessagesName.IncorporationFailedMotionPayment, + SystemMessagesName.IncorporationPassedMotionPayment, + SystemMessagesName.IncorporationWaitingOnIndemnityForms, + SystemMessagesName.IncorporationCompleted, + ].includes(name as SystemMessagesName); +}; + +const displayName = 'dashboard.Incorporation.LogsSection'; + +interface Props { + colony?: Colony; +} + +const LogsSection = ({ colony }: Props) => { + const { username: currentUserName, ethereal } = useLoggedInUser(); + + // add fetching systemMessages here, mocks are used now + + const changeMessage = useCallback((changeType: string) => { + switch (changeType) { + case 'name': { + return ; + } + case 'puropse': { + return ; + } + case 'protectors': { + return ; + } + case 'mainContact': { + return ; + } + case 'alternativeName': { + return ; + } + default: { + return capitalize(changeType); + } + } + }, []); + + const additionalValues = useCallback( + (feedItem) => { + const { name, changes, user } = feedItem; + + return { + name, + changes: + changes?.map((change, index) => ( + + {changeMessage(change.changeType)} + {index !== changes.length - 1 ? ', ' : ''} + {index === changes.length - 2 && ' and '} + + )) || '', + reputation: ( + + + {user && colony?.colonyAddress && ( + + )} + + + ), + }; + }, + [changeMessage, colony], + ); + + return ( +
+
+ {!systemMessages || !colony ? ( +
+
+
+
+
+ +
+ +
+
+
+ ) : ( + + {(sortedFeed) => { + return sortedFeed.map((feedItem, index) => { + /* + * Comment + */ + if (feedItem.type === ActionsPageFeedType.ServerComment) { + const { + initiator: messageInitiator, + createdAt, + context: { message, deleted, adminDelete, userBanned }, + uniqueId, + sourceId, + } = (feedItem as unknown) as FeedItemWithId< + TransactionMessageFragment + >; + return ( + + ); + } + /* + * System Message + */ + if (feedItem.type === ActionsPageFeedType.SystemMessage) { + const { + name, + createdAt, + emmitedBy, + uniqueId, + values: eventValues, + transactionHash: eventTransactionHash, + } = feedItem as FeedItemWithId; + return ( + + ); + } + return null; + }); + }} + + )} + {/* + * @NOTE A user can comment only if he has a wallet connected + * and a registered user profile, + */} + {currentUserName && !ethereal && colony && ( +
+ +
+ )} +
+ ); +}; + +LogsSection.displayName = displayName; + +export default LogsSection; diff --git a/src/modules/dashboard/components/Incorporation/LogsSection/constants.ts b/src/modules/dashboard/components/Incorporation/LogsSection/constants.ts new file mode 100644 index 0000000000..8f566aaeaa --- /dev/null +++ b/src/modules/dashboard/components/Incorporation/LogsSection/constants.ts @@ -0,0 +1,216 @@ +import { + ActionsPageFeedType, + SystemMessagesName, +} from '~dashboard/ActionsPageFeed'; + +export const colonyAction = { + actionInitiator: '0x45B17FF6998D4d76A10a32621A71773E3722DA65', + actionType: 'SystemMessage', + amount: '0', + annotationHash: '', + blockNumber: 827, + colonyAvatarHash: '', + colonyDisplayName: 'Colony', + colonyTokens: [], + createdAt: 1655807560000, + domainColor: '', + domainName: '', + domainPurpose: '', + events: [], + fromDomain: 1, + hash: '0xb17e40704dc4fd2b95710468516aac1ebca441b276f4fd3db80e5dca065f1089', + motionDomain: 1, + motionState: '', + newVersion: '0', + oldVersion: '0', + recipient: '0x0000000000000000000000000000000000000000', + reputationChange: '0', + roles: [ + { + id: 0, + setTo: false, + }, + ], + toDomain: 1, + status: 1, + tokenAddress: '0x0000000000000000000000000000000000000000', +}; + +export const transactionHash = + '0x1785d214f0127279681354be8e23ad1a1501207432229db93a415c7a58427138'; + +export const systemMessages = [ + { + type: 'SystemMessage' as ActionsPageFeedType.SystemMessage, + name: 'IncorporationCreated' as SystemMessagesName, + colonyAddress: '0xA1e73506F3ef6dC19dc27B750ADF585FD0F30C63', + user: { + id: '1', + profile: { + walletAddress: '0xae57767918BB7c53aa26dd89f12913f5233d08D2', + username: 'John', + displayName: 'John Doe', + }, + }, + createdAt: 1653900557000, + blockExplorerName: 'Blockscout', + transactionHash: + '0x1785d214f0127279681354be8e23ad1a1501207432229db93a415c7a58427138', + amount: '10.765 CLNY', + uniqueId: '1', + }, + { + type: 'SystemMessage' as ActionsPageFeedType.SystemMessage, + name: 'IncorporationStaked' as SystemMessagesName, + colonyAddress: '0xA1e73506F3ef6dC19dc27B750ADF585FD0F30C63', + user: { + id: '1', + profile: { + walletAddress: '0xae57767918BB7c53aa26dd89f12913f5233d08D2', + username: 'John', + displayName: 'John Doe', + }, + }, + createdAt: 1653900557000, + values: { + amount: '10 CLNY', + }, + blockExplorerName: 'Blockscout', + transactionHash: + '0x1785d214f0127279681354be8e23ad1a1501207432229db93a415c7a58427138', + uniqueId: '2', + }, + { + type: 'SystemMessage' as ActionsPageFeedType.SystemMessage, + name: 'IncorporationOwnerOrForceEdit' as SystemMessagesName, + colonyAddress: '0xA1e73506F3ef6dC19dc27B750ADF585FD0F30C63', + user: { + id: '1', + profile: { + walletAddress: '0xae57767918BB7c53aa26dd89f12913f5233d08D2', + username: 'John', + displayName: 'John Doe', + }, + }, + createdAt: 1653900557000, + blockExplorerName: 'Blockscout', + transactionHash: + '0x1785d214f0127279681354be8e23ad1a1501207432229db93a415c7a58427138', + changes: [ + { + changeType: 'protectors', + }, + { + changeType: 'description', + }, + { + changeType: 'mainContact', + }, + { + changeType: 'signOption', + }, + ], + uniqueId: '1', + }, + { + type: 'SystemMessage' as ActionsPageFeedType.SystemMessage, + name: 'IncorporationMotionModified' as SystemMessagesName, + colonyAddress: '0xA1e73506F3ef6dC19dc27B750ADF585FD0F30C63', + user: { + id: '1', + profile: { + walletAddress: '0xae57767918BB7c53aa26dd89f12913f5233d08D2', + username: 'John', + displayName: 'John Doe', + }, + }, + createdAt: 1653900557000, + blockExplorerName: 'Blockscout', + transactionHash: + '0x1785d214f0127279681354be8e23ad1a1501207432229db93a415c7a58427138', + changes: [ + { + changeType: 'puropse', + }, + { + changeType: 'name', + }, + { + changeType: 'alternativeName', + }, + ], + uniqueId: '3', + }, + { + type: 'SystemMessage' as ActionsPageFeedType.SystemMessage, + name: 'IncorporationMotionPayment' as SystemMessagesName, + colonyAddress: '0xA1e73506F3ef6dC19dc27B750ADF585FD0F30C63', + user: { + id: '1', + profile: { + walletAddress: '0xae57767918BB7c53aa26dd89f12913f5233d08D2', + username: 'John', + displayName: 'John Doe', + }, + }, + createdAt: 1653900557000, + blockExplorerName: 'Blockscout', + transactionHash: + '0x1785d214f0127279681354be8e23ad1a1501207432229db93a415c7a58427138', + uniqueId: '1', + }, + { + type: 'SystemMessage' as ActionsPageFeedType.SystemMessage, + name: 'IncorporationFailedMotionPayment' as SystemMessagesName, + colonyAddress: '0xA1e73506F3ef6dC19dc27B750ADF585FD0F30C63', + user: { + id: '1', + profile: { + walletAddress: '0xae57767918BB7c53aa26dd89f12913f5233d08D2', + username: 'John', + displayName: 'John Doe', + }, + }, + createdAt: 1653900557000, + blockExplorerName: 'Blockscout', + transactionHash: + '0x1785d214f0127279681354be8e23ad1a1501207432229db93a415c7a58427138', + uniqueId: '1', + }, + { + type: 'SystemMessage' as ActionsPageFeedType.SystemMessage, + name: 'IncorporationPassedMotionPayment' as SystemMessagesName, + colonyAddress: '0xA1e73506F3ef6dC19dc27B750ADF585FD0F30C63', + user: { + id: '1', + profile: { + walletAddress: '0xae57767918BB7c53aa26dd89f12913f5233d08D2', + username: 'John', + displayName: 'John Doe', + }, + }, + createdAt: 1653900557000, + blockExplorerName: 'Blockscout', + transactionHash: + '0x1785d214f0127279681354be8e23ad1a1501207432229db93a415c7a58427138', + uniqueId: '1', + }, + { + type: 'SystemMessage' as ActionsPageFeedType.SystemMessage, + name: 'IncorporationCompleted' as SystemMessagesName, + colonyAddress: '0xA1e73506F3ef6dC19dc27B750ADF585FD0F30C63', + user: { + id: '1', + profile: { + walletAddress: '0xae57767918BB7c53aa26dd89f12913f5233d08D2', + username: 'John', + displayName: 'John Doe', + }, + }, + createdAt: 1653900557000, + blockExplorerName: 'Blockscout', + transactionHash: + '0x1785d214f0127279681354be8e23ad1a1501207432229db93a415c7a58427138', + uniqueId: '1', + }, +]; diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.css b/src/modules/pages/components/IncorporationPage/IncorporationPage.css index c75264052d..00432a9d3e 100644 --- a/src/modules/pages/components/IncorporationPage/IncorporationPage.css +++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.css @@ -18,9 +18,7 @@ } .mainContent { - display: flex; - justify-content: space-between; - padding: 54px 85px 70px 40px; + padding: 54px 50px 70px 40px; max-width: 500px; } diff --git a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx index 5bcb2092d4..aeca68a3f3 100644 --- a/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx +++ b/src/modules/pages/components/IncorporationPage/IncorporationPage.tsx @@ -7,6 +7,7 @@ import { getMainClasses } from '~utils/css'; import { SpinnerLoader } from '~core/Preloaders'; import IncorporationForm from '~dashboard/Incorporation/IncorporationForm'; import DescriptionForm from '~dashboard/Incorporation/DescriptionForm'; +import LogsSection from '~dashboard/Incorporation/LogsSection/LogsSection'; import { initialValues } from './constants'; import styles from './IncorporationPage.css'; @@ -48,6 +49,13 @@ const IncorporationPage = () => {
+ {loading ? ( +
+ +
+ ) : ( + + )}
From 93581c58130cf2fa725799ba5fbd3559389f47e6 Mon Sep 17 00:00:00 2001 From: Agnieszka Jarosik Date: Mon, 30 Jan 2023 12:13:11 +0100 Subject: [PATCH 2/2] changed user data --- .../components/Incorporation/LogsSection/LogsSection.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.tsx b/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.tsx index ac7208bfe0..d2babaa064 100644 --- a/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.tsx +++ b/src/modules/dashboard/components/Incorporation/LogsSection/LogsSection.tsx @@ -110,6 +110,7 @@ const LogsSection = ({ colony }: Props) => { const { name, changes, user } = feedItem; return { + user: user?.profile?.walletAddress, name, changes: changes?.map((change, index) => (