Skip to content

Commit d566727

Browse files
victoriarivictoriari
committed
Updated activity feed item with latest updates
1 parent 4dda781 commit d566727

29 files changed

Lines changed: 1317 additions & 430 deletions

src/lib/components/activity-feed-item/activity-feed-item-stories.tsx renamed to src/lib/components/activity-feed-item/activity-feed-item.stories.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Meta, StoryFn } from '@storybook/react';
44
import {
55
associatedKeysDeploy,
66
auctionDeploy,
7+
buyMarketDeploy,
78
cep18Deploy,
89
csprFunDeploy,
910
csprMarketDeploy,
@@ -13,6 +14,7 @@ import {
1314
mockedContractPackageInfos,
1415
nftDeploy,
1516
transferDeploy,
17+
x402Deploy,
1618
} from '../deploy-actions/storybook/mockedDeploys';
1719
import { ActivityFeedItem } from './activity-feed-item';
1820
import FlexColumn from '../flex-column/flex-column';
@@ -30,6 +32,8 @@ export default {
3032
native_transfer_contract_hash: 'native_transfer_contract_hash',
3133
auction_manager_contract_hash: 'auction_manager_contract_hash',
3234
associated_keys_contract_hash: 'associated_keys_contract_hash',
35+
cspr_market_v1_contract_package_hash:
36+
'cspr_market_v1_contract_package_hash',
3337
cspr_market_contract_package_hash: 'cspr_market_contract_package_hash',
3438
},
3539
getAccountInfo: (hash) =>
@@ -83,6 +87,12 @@ const exampleComponents = [
8387
<ActivityFeedItem {...args} deploy={MapDeploy(csprMarketDeploy)} />
8488
),
8589
},
90+
{
91+
templateLabel: 'Buy cspr market action feed item:',
92+
renderComponent: (args) => (
93+
<ActivityFeedItem {...args} deploy={MapDeploy(buyMarketDeploy)} />
94+
),
95+
},
8696
{
8797
templateLabel: 'CEP-18 action feed item:',
8898
renderComponent: (args) => (
@@ -95,6 +105,12 @@ const exampleComponents = [
95105
<ActivityFeedItem {...args} deploy={MapDeploy(nftDeploy)} />
96106
),
97107
},
108+
{
109+
templateLabel: 'x402 action feed item:',
110+
renderComponent: (args) => (
111+
<ActivityFeedItem {...args} deploy={MapDeploy(x402Deploy)} />
112+
),
113+
},
98114
];
99115

100116
const TemplateActivityFeedItems: StoryFn<typeof ActivityFeedItem> = (args) => {

‎src/lib/components/activity-feed-item/activity-feed-item.tsx‎

Lines changed: 86 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import styled from 'styled-components';
2+
import styled, { useTheme } from 'styled-components';
33
import Big from 'big.js';
44
import { deriveAccountInfo } from '../../utils/account';
55
import { isValidPublicKey } from 'casper-js-sdk';
@@ -28,17 +28,22 @@ import Link from '../link/link';
2828
import {
2929
formatHash,
3030
formatNumber,
31+
formatTimestamp,
3132
formatTimestampAge,
3233
HashLength,
3334
} from '../../utils/formatters';
3435
import Tooltip from '../tooltip/tooltip';
3536
import Avatar from '../avatar/avatar';
3637
import TruncateBox from '../truncate-box/truncate-box';
37-
import { isWASMProxyTransaction } from '../deploy-actions/utils/contract';
38+
import {
39+
isContractTypeCep18,
40+
isWASMProxyTransaction,
41+
} from '../deploy-actions/utils/contract';
3842
import { useMatchMedia } from '../../utils/match-media';
3943
import { DeployStatus, DeployStatusSize } from '../deploy-status/deploy-status';
4044
import { WasmProxyBadge } from './wasm-proxy-badge';
4145
import Address from '../address/address';
46+
import Badge from '../badge/badge';
4247

4348
const StyledPageTile = styled(PageTile)(() => ({
4449
marginBottom: 8,
@@ -106,6 +111,25 @@ const StyledFlexColumn = styled(FlexColumn)(({ theme }) =>
106111
}),
107112
);
108113

114+
const FacilitatorBadge = () => {
115+
const theme = useTheme();
116+
return (
117+
<Tooltip
118+
tooltipContent={
119+
'Account that submitted and paid for this transaction. Account that authorized this transaction can be checked on Transaction Details page.'
120+
}
121+
>
122+
<FlexRow gap={3} align={'center'}>
123+
<Badge
124+
lineHeight={'xxs'}
125+
label={'FACILITATOR'}
126+
variation={theme.styleguideColors.contentLightBlue}
127+
/>
128+
</FlexRow>
129+
</Tooltip>
130+
);
131+
};
132+
109133
const BlockFeedInfo = ({ deploy, path }: { deploy: Deploy; path: string }) => (
110134
<FlexRow itemsSpacing={8} align={'center'}>
111135
<BodyText
@@ -150,9 +174,7 @@ export interface ActivityFeedItemProps {
150174
loading: boolean;
151175
actionIdentificationHashes: ActionIdentificationHashesType;
152176
csprLiveDomainPath: string;
153-
getAccountInfo: (
154-
publicKey: string,
155-
) => AccountInfoResult | null | undefined;
177+
getAccountInfo: (publicKey: string) => AccountInfoResult | null | undefined;
156178
getContractInfoByHash?: (
157179
contractHash: string,
158180
) => ContractResult | null | undefined;
@@ -171,15 +193,17 @@ export const ActivityFeedItem = ({
171193
csprLiveDomainPath,
172194
}: ActivityFeedItemProps) => {
173195
const {
174-
callerPublicKey,
175196
callerHash,
176197
deployHash,
177198
paymentAmount,
178199
refundAmount,
179200
callerCsprName,
201+
entryPoint,
202+
contractPackage,
180203
} = deploy;
181204

182-
const accountInfo = getAccountInfo(
205+
const callerPublicKey = deploy.callerPublicKey || deploy.callerHash;
206+
const accountInfo = getAccountInfo<AccountInfoResult>(
183207
callerPublicKey || callerHash,
184208
);
185209

@@ -199,12 +223,21 @@ export const ActivityFeedItem = ({
199223
.minus(refundAmount || '0')
200224
.toString();
201225

226+
const isCep18 = isContractTypeCep18(contractPackage);
227+
const isAuthorizedTransfer =
228+
isCep18 && entryPoint?.name === 'transfer_with_authorization';
229+
202230
const onAbove = (
203231
<DesktopFeedItemContainer itemsSpacing={12}>
204232
<CommonDataContainer>
205233
<FlexRow align={'center'}>
206234
<DeployStatus deployResult={deploy} size={DeployStatusSize.Small} />
207-
<Tooltip scale={'xs'} lineHeight={'xs'} tooltipContent={deployHash}>
235+
<Tooltip
236+
scale={'xs'}
237+
lineHeight={'xs'}
238+
tooltipContent={deployHash}
239+
caption={'Transaction Hash'}
240+
>
208241
<BodyText size={3} scale={'sm'} monotype>
209242
<Link
210243
href={`${csprLiveDomainPath}/transaction/${deploy.deployHash}`}
@@ -217,15 +250,17 @@ export const ActivityFeedItem = ({
217250
</Tooltip>
218251
</FlexRow>
219252
<FlexRow justify={'flex-end'} itemsSpacing={8} align={'baseline'}>
220-
<BodyText
221-
scale={'xs'}
222-
lineHeight={'xs'}
223-
size={3}
224-
noWrap
225-
variation={'darkGray'}
226-
>
227-
{formatTimestampAge(deploy.timestamp)}
228-
</BodyText>
253+
<Tooltip tooltipContent={formatTimestamp(deploy.timestamp)}>
254+
<BodyText
255+
scale={'xs'}
256+
lineHeight={'xs'}
257+
size={3}
258+
noWrap
259+
variation={'darkGray'}
260+
>
261+
{formatTimestampAge(deploy.timestamp)}
262+
</BodyText>
263+
</Tooltip>
229264
<BodyText scale={'xs'} lineHeight={'xs'} size={3} noWrap>
230265
·
231266
</BodyText>
@@ -284,7 +319,10 @@ export const ActivityFeedItem = ({
284319
<FlexRow justify={'space-between'}>
285320
<FlexRow itemsSpacing={8}>
286321
<TooltipWithExtendedInfo
287-
extendedLine={{ title: csprName ?? undefined, caption: 'CSPR.name' }}
322+
extendedLine={{
323+
title: csprName ?? undefined,
324+
caption: 'CSPR.name',
325+
}}
288326
tooltipCaption={keyTooltipCaption}
289327
hash={callerPublicKey || callerHash}
290328
>
@@ -305,13 +343,16 @@ export const ActivityFeedItem = ({
305343
</BodyText>
306344
</FlexColumn>
307345
</TooltipWithExtendedInfo>
308-
<FlexRow>
309-
<TruncateBox size={5}>
310-
<BodyText size={3} variation="darkGray" noWrap>
311-
{name}
312-
</BodyText>
313-
</TruncateBox>
314-
</FlexRow>
346+
{name ? (
347+
<FlexRow>
348+
<TruncateBox size={5}>
349+
<BodyText size={3} variation="darkGray" noWrap>
350+
{name}
351+
</BodyText>
352+
</TruncateBox>
353+
</FlexRow>
354+
) : null}
355+
{isAuthorizedTransfer ? <FacilitatorBadge /> : null}
315356
</FlexRow>
316357
</FlexRow>
317358
<FlexRow>
@@ -354,7 +395,12 @@ export const ActivityFeedItem = ({
354395
<FlexRow justify={'space-between'}>
355396
<FlexRow align={'center'}>
356397
<DeployStatus deployResult={deploy} size={DeployStatusSize.Small} />
357-
<Tooltip tooltipContent={deployHash} scale={'xs'} lineHeight={'xs'}>
398+
<Tooltip
399+
tooltipContent={deployHash}
400+
scale={'xs'}
401+
lineHeight={'xs'}
402+
caption={'Transaction Hash'}
403+
>
358404
<BodyText scale={'xs'} lineHeight={'xs'} size={3} monotype>
359405
<Link
360406
href={`${csprLiveDomainPath}/transaction/${deploy.deployHash}`}
@@ -384,18 +430,20 @@ export const ActivityFeedItem = ({
384430
</FlexRow>
385431
</FlexRow>
386432
<FlexColumn itemsSpacing={12}>
387-
<Address
388-
logo={logo}
389-
name={name}
390-
hash={callerPublicKey || callerHash}
391-
csprName={callerCsprName || csprName || undefined}
392-
loading={loading}
393-
navigateToPath={`${csprLiveDomainPath}/account/${callerPublicKey || callerHash}`}
394-
avatarSize={'small'}
395-
hashFontSize={'sm'}
396-
minifiedCopyNotification
397-
/>
398-
433+
<FlexRow itemsSpacing={4} align={'center'} wrap={'wrap'}>
434+
<Address
435+
logo={logo}
436+
name={name}
437+
hash={callerPublicKey || callerHash}
438+
csprName={callerCsprName || csprName || undefined}
439+
loading={loading}
440+
navigateToPath={`${csprLiveDomainPath}/account/${callerPublicKey || callerHash}`}
441+
avatarSize={'small'}
442+
hashFontSize={'sm'}
443+
minifiedCopyNotification
444+
/>
445+
{isAuthorizedTransfer ? <FacilitatorBadge /> : null}
446+
</FlexRow>
399447
<FlexRow itemsSpacing={8}>
400448
{isWASMProxyTransaction(deploy.executionTypeId) && (
401449
<WasmProxyBadge lineHeight={'xxs'} />

‎src/lib/components/cspr-amount-with-fiat/cspr-amount-with-fiat.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ const CsprAmountWithFiat = ({ amount, rate }: CsprAmountWithFiatProps) => {
2121
<CsprAmount motes={amount} precisionCase={PrecisionCase.small} />
2222
</BodyText>
2323
<BodyText size={3} monotype variation="darkGray">
24-
({formatCurrency(currencyAmount ?? '0', 'USD', {precision: SMALL_PRECISION})})
24+
(
25+
{formatCurrency(currencyAmount ?? '0', 'USD', {
26+
precision: SMALL_PRECISION,
27+
})}
28+
)
2529
</BodyText>
2630
</>
2731
);

‎src/lib/components/deploy-actions/components/Cep18ActionRow.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,15 @@ export const Cep18ActionRow = ({
3838
actionName,
3939
prefix,
4040
senderPrefix,
41+
to_account_info,
42+
from_account_info,
43+
to_centralized_account_info,
44+
from_centralized_account_info,
4145
}: Cep18ActionRowProps) => {
4246
const { getAccountInfo, getContractPackageInfoByHash, csprLiveDomainPath } =
4347
useDeployActionDataContext();
44-
const fromAccountInfo = getAccountInfo(
45-
from_public_key || from_hash || '',
46-
);
47-
const toAccountInfo = getAccountInfo(
48-
to_public_key || to_hash || '',
49-
);
48+
const fromAccountInfo = getAccountInfo(from_public_key || from_hash || '');
49+
const toAccountInfo = getAccountInfo(to_public_key || to_hash || '');
5050

5151
return (
5252
<FlexRow align={'center'} itemsSpacing={8}>
@@ -94,9 +94,13 @@ export const Cep18ActionRow = ({
9494
accountInfo={
9595
fromAccountInfo?.account_info ||
9696
fromAccountInfo?.centralized_account_info ||
97+
from_centralized_account_info ||
98+
from_account_info ||
9799
undefined
98100
}
99-
contractPackage={getContractPackageInfoByHash(from_hash) ?? undefined}
101+
contractPackage={
102+
getContractPackageInfoByHash(from_hash) ?? undefined
103+
}
100104
csprName={fromAccountInfo?.cspr_name}
101105
publicKey={from_public_key}
102106
hashFontSize={'sm'}
@@ -117,6 +121,8 @@ export const Cep18ActionRow = ({
117121
accountInfo={
118122
toAccountInfo?.account_info ||
119123
toAccountInfo?.centralized_account_info ||
124+
to_centralized_account_info ||
125+
to_account_info ||
120126
undefined
121127
}
122128
contractPackage={getContractPackageInfoByHash(to_hash) ?? undefined}

‎src/lib/components/deploy-actions/components/DeployActionAuction.tsx‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { deriveAccountInfo } from '../../../utils/account.tsx';
44
import { useMatchMedia } from '../../../utils/match-media';
55
import CsprAmountWithFiat from '../../cspr-amount-with-fiat/cspr-amount-with-fiat';
66
import { useDeployActionDataContext } from '../services/deploy-action-context';
7-
import {AuctionContractIcon} from '../../../icons-index';
7+
import { AuctionContractIcon } from '../../../icons-index';
88
import FlexRow from '../../flex-row/flex-row';
99
import Avatar from '../../avatar/avatar';
1010
import BodyText from '../../body-text/body-text';
@@ -50,13 +50,22 @@ const AuctionContractIdentifier = ({
5050
);
5151
};
5252

53-
const ValidatorAccountInfo = ({ publicKey, prefix, avatarSize }) => {
53+
interface ValidatorAccountInfoProps {
54+
publicKey: string | null;
55+
prefix: string;
56+
avatarSize?: AvatarProps['size'];
57+
}
58+
59+
const ValidatorAccountInfo = ({
60+
publicKey,
61+
prefix,
62+
avatarSize,
63+
}: ValidatorAccountInfoProps) => {
5464
const { getAccountInfo, csprLiveDomainPath } = useDeployActionDataContext();
55-
const accountAvatarSize: AvatarProps['size'] =
56-
avatarSize == undefined
57-
? useMatchMedia(['small', 'default'], [])
58-
: avatarSize;
59-
65+
const accountAvatarSize: AvatarProps['size'] =
66+
avatarSize == undefined
67+
? useMatchMedia(['small', 'default'], [])
68+
: avatarSize;
6069
const accountInfo = getAccountInfo(publicKey);
6170
const validatorAccountInfo = deriveAccountInfo(
6271
accountInfo?.account_info || accountInfo?.centralized_account_info,
@@ -142,7 +151,10 @@ const DelegationAuctionAction = ({ deploy }: { deploy: Deploy }) => {
142151
{auctionActionNameMap[entryPoint?.name || '']}
143152
</BodyText>
144153
{amount && (
145-
<CsprAmountWithFiat amount={amount} rate={timeTransactionCurrencyRate} />
154+
<CsprAmountWithFiat
155+
amount={amount}
156+
rate={timeTransactionCurrencyRate}
157+
/>
146158
)}
147159
<ValidatorAccountInfo
148160
publicKey={args.validator?.parsed as string}

‎src/lib/components/deploy-actions/components/DeployActionCep18.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@ import DeployActionDefault from './DeployActionDefault';
33
import { Cep18ActionRow } from './Cep18ActionRow';
44
import { useDeployActionDataContext } from '../services/deploy-action-context';
55
import { Deploy } from '../../../types/types';
6-
import {
7-
prepareFtActionMessageDataForDeployDetails,
8-
} from '../utils/prepare-action-messages';
6+
import { prepareFtActionMessageDataForDeployDetails } from '../utils/prepare-action-messages';
97

108
interface DeployActionCep18Props {
119
deploy: Deploy;

0 commit comments

Comments
 (0)