diff --git a/apps/app/src/test/scala/org/lfdecentralizedtrust/splice/integration/tests/WalletTransfersFrontendIntegrationTest.scala b/apps/app/src/test/scala/org/lfdecentralizedtrust/splice/integration/tests/WalletTransfersFrontendIntegrationTest.scala index 9909a99acb..e3d165595f 100644 --- a/apps/app/src/test/scala/org/lfdecentralizedtrust/splice/integration/tests/WalletTransfersFrontendIntegrationTest.scala +++ b/apps/app/src/test/scala/org/lfdecentralizedtrust/splice/integration/tests/WalletTransfersFrontendIntegrationTest.scala @@ -122,6 +122,10 @@ abstract class BaseWalletTransfersFrontendIntegrationTest offerCard.childElement(className("transfer-offer-sender")) ) should matchText(expectedAns(aliceUserParty, aliceAnsName)) + seleniumText( + offerCard.childElement(className("transfer-offer-received")) + ) should matchText(expectedAns(bobUserParty, bobAnsName)) + offerCard .childElement(className("transfer-offer-amulet-amount")) .text should matchText( @@ -143,6 +147,7 @@ abstract class BaseWalletTransfersFrontendIntegrationTest val aliceDamlUser = aliceWalletClient.config.ledgerApiUser val aliceUserParty = onboardWalletUser(aliceWalletClient, aliceValidatorBackend) val aliceAnsName = perTestCaseName("alice") + val aliceAnsDisplay = expectedAns(aliceUserParty, aliceAnsName) val bobUserParty = onboardWalletUser(bobWalletClient, bobValidatorBackend) val bobAnsName = perTestCaseName("bob") @@ -190,6 +195,10 @@ abstract class BaseWalletTransfersFrontendIntegrationTest offerCard.childElement(className("transfer-offer-sender")) ) should matchText(bobAnsDisplay) + seleniumText( + offerCard.childElement(className("transfer-offer-received")) + ) should matchText(aliceAnsDisplay) + offerCard.childElement(className("transfer-offer-expiry")).text should matchText( s"Expires $expectedExpiry" ) diff --git a/apps/wallet/frontend/src/components/SendTransfer.tsx b/apps/wallet/frontend/src/components/SendTransfer.tsx index 4f064144cf..b4811846e5 100644 --- a/apps/wallet/frontend/src/components/SendTransfer.tsx +++ b/apps/wallet/frontend/src/components/SendTransfer.tsx @@ -32,6 +32,7 @@ import useLookupTransferPreapproval from '../hooks/scan-proxy/useLookupTransferP import BftAnsField from './BftAnsField'; import { useFeatureSupport } from '../hooks/useFeatureSupport'; import AmountInput from './AmountInput'; +import { TransferOffers } from './TransferOffers'; const SendTransfer: React.FC = () => { const { createTransferOffer, transferPreapprovalSend, createTransferViaTokenStandard } = @@ -252,6 +253,7 @@ const SendTransfer: React.FC = () => { + ); }; diff --git a/apps/wallet/frontend/src/components/TransferOffers.tsx b/apps/wallet/frontend/src/components/TransferOffers.tsx index 33968ef92a..9c6cce1d98 100644 --- a/apps/wallet/frontend/src/components/TransferOffers.tsx +++ b/apps/wallet/frontend/src/components/TransferOffers.tsx @@ -34,8 +34,14 @@ type PartialWalletTransferOffer = { sender: string; expiresAt: string; isTokenStandard: boolean; + receiver: string; }; -export const TransferOffers: React.FC = () => { + +type TransferOffersListProps = { + mode: 'sent' | 'received'; +}; + +export const TransferOffers: React.FC = ({ mode }) => { const [offers, setOffers] = useState([]); const amuletPriceQuery = useAmuletPrice(); const primaryPartyId = usePrimaryParty(); @@ -46,7 +52,9 @@ export const TransferOffers: React.FC = () => { amuletPrice: BigNumber ): Promise => { return items - .filter(item => item.sender !== primaryPartyId) + .filter(item => + mode === 'sent' ? item.sender === primaryPartyId : item.sender !== primaryPartyId + ) .map(item => { return { contractId: item.contractId, @@ -59,12 +67,13 @@ export const TransferOffers: React.FC = () => { amuletPrice ), senderId: item.sender, + receiverId: item.receiver, expiry: item.expiresAt, isTokenStandard: item.isTokenStandard, }; }); }, - [primaryPartyId] + [primaryPartyId, mode] ); const transferOfferContractsQuery = useTransferOffers(amuletPriceQuery.data); @@ -82,6 +91,7 @@ export const TransferOffers: React.FC = () => { contractId: offer.contractId, amount: offer.payload.amount.amount, sender: offer.payload.sender, + receiver: offer.payload.receiver, expiresAt: offer.payload.expiresAt, }; return item; @@ -93,6 +103,7 @@ export const TransferOffers: React.FC = () => { contractId: transfer.contractId, amount: transfer.payload.transfer.amount, sender: transfer.payload.transfer.sender, + receiver: transfer.payload.transfer.receiver, expiresAt: transfer.payload.transfer.executeBefore, }; return item; @@ -110,11 +121,12 @@ export const TransferOffers: React.FC = () => { amuletPriceQuery.isError || transferOfferContractsQuery.isError || tokenStandardTransfersQuery.isError; + const heading = mode === 'sent' ? 'Pending Offers ' : 'Action Needed '; return ( - Action Needed{' '} + {heading} {isLoading ? ( @@ -127,7 +139,7 @@ export const TransferOffers: React.FC = () => { ) : ( offers.map((offer, index) => ( - + )) )} @@ -136,11 +148,14 @@ export const TransferOffers: React.FC = () => { interface TransferOfferProps { transferOffer: WalletTransferOffer; + mode: 'sent' | 'received'; } export const TransferOfferDisplay: React.FC = props => { const config = useWalletConfig(); const offer = props.transferOffer; + const mode = props.mode; + const { acceptTransferOffer, rejectTransferOffer, @@ -151,7 +166,7 @@ export const TransferOfferDisplay: React.FC = props => { const reject = offer.isTokenStandard ? rejectTokenStandardTransfer : rejectTransferOffer; return ( - + = props => { - + {mode === 'received' ? ( + + ) : ( + + )} @@ -186,23 +209,27 @@ export const TransferOfferDisplay: React.FC = props => { - - + {mode !== 'sent' ? ( + <> + + + + ) : null} Expires diff --git a/apps/wallet/frontend/src/models/models.ts b/apps/wallet/frontend/src/models/models.ts index 7b088f7794..8cc2118a80 100644 --- a/apps/wallet/frontend/src/models/models.ts +++ b/apps/wallet/frontend/src/models/models.ts @@ -87,6 +87,7 @@ export interface WalletTransferOffer { conversionRate: string; convertedCurrency: ConvertedCurrency; senderId: string; + receiverId: string; expiry: string; isTokenStandard: boolean; } diff --git a/apps/wallet/frontend/src/routes/transactions.tsx b/apps/wallet/frontend/src/routes/transactions.tsx index 4c6d696b65..37fa028ccf 100644 --- a/apps/wallet/frontend/src/routes/transactions.tsx +++ b/apps/wallet/frontend/src/routes/transactions.tsx @@ -15,7 +15,7 @@ const Transactions: React.FC = () => { - + );