Skip to content

Commit 7438c1d

Browse files
kemurukemuru
committed
feat: etherscan hash support in frontend
1 parent 84b72db commit 7438c1d

File tree

7 files changed

+60
-11
lines changed

7 files changed

+60
-11
lines changed

‎subgraph/mappings/escrow.ts

+8-7
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
} from "../generated/EscrowUniversal/EscrowUniversal";
2323
import { ZERO, ONE } from "./utils";
2424

25-
function createEscrow(id: string): Escrow {
25+
function createEscrow(id: string, transactionHash: Bytes): Escrow {
2626
let escrow = new Escrow(id);
2727
escrow.buyer = Bytes.empty();
2828
escrow.seller = Bytes.empty();
@@ -34,6 +34,7 @@ function createEscrow(id: string): Escrow {
3434
escrow.templateData = "";
3535
escrow.templateDataMappings = "";
3636
escrow.status = "NoDispute";
37+
escrow.transactionHash = transactionHash;
3738
return escrow;
3839
}
3940

@@ -95,7 +96,7 @@ export function handleHasToPayFee(event: HasToPayFeeEvent): void {
9596
let escrow = Escrow.load(escrowId);
9697

9798
if (!escrow) {
98-
escrow = createEscrow(escrowId);
99+
return;
99100
}
100101

101102
let seller = getUser(escrow.seller.toHex());
@@ -131,7 +132,7 @@ export function handleHasToPayFee(event: HasToPayFeeEvent): void {
131132

132133
export function handleNativeTransactionCreated(event: NativeTransactionCreatedEvent): void {
133134
let escrowId = event.params._transactionID.toString();
134-
let escrow = Escrow.load(escrowId) || createEscrow(escrowId);
135+
let escrow = Escrow.load(escrowId) || createEscrow(escrowId, event.transaction.hash);
135136

136137
escrow!.buyer = event.params._buyer;
137138
escrow!.seller = event.params._seller;
@@ -163,7 +164,7 @@ export function handleNativeTransactionCreated(event: NativeTransactionCreatedEv
163164

164165
export function handleERC20TransactionCreated(event: ERC20TransactionCreatedEvent): void {
165166
let escrowId = event.params._transactionID.toString();
166-
let escrow = Escrow.load(escrowId) || createEscrow(escrowId);
167+
let escrow = Escrow.load(escrowId) || createEscrow(escrowId, event.transaction.hash);
167168

168169
escrow!.buyer = event.params._buyer;
169170
escrow!.seller = event.params._seller;
@@ -199,7 +200,7 @@ export function handleTransactionResolved(event: TransactionResolvedEvent): void
199200
let escrow = Escrow.load(escrowId);
200201

201202
if (!escrow) {
202-
escrow = createEscrow(escrowId);
203+
return;
203204
}
204205

205206
let transactionResolvedId = event.transaction.hash.toHex() + "-" + event.logIndex.toString();
@@ -248,7 +249,7 @@ export function handleDisputeRequest(event: DisputeRequestEvent): void {
248249

249250
let escrow = Escrow.load(transactionID);
250251
if (!escrow) {
251-
escrow = createEscrow(transactionID);
252+
return;
252253
}
253254

254255
disputeRequest.escrow = escrow.id;
@@ -284,7 +285,7 @@ export function handleSettlementProposed(event: SettlementProposedEvent): void {
284285

285286
let escrow = Escrow.load(transactionID);
286287
if (!escrow) {
287-
escrow = createEscrow(transactionID);
288+
return;
288289
}
289290
escrow.lastFeePaymentTime = event.block.timestamp;
290291

‎subgraph/schema.graphql

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ type Escrow @entity {
4141
token: Bytes
4242
status: Status
4343
timestamp: BigInt
44+
transactionHash: Bytes!
4445
payments: [Payment!]! @derivedFrom(field: "escrow")
4546
hasToPayFees: [HasToPayFee!]! @derivedFrom(field: "escrow")
4647
createdEvents: [TransactionCreated!]! @derivedFrom(field: "escrow")

‎web/src/assets/svgs/icons/etherscan.svg

+10
Loading

‎web/src/components/PreviewCard/Header.tsx

+35-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import React from "react";
2-
import styled from "styled-components";
2+
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
4+
import { responsiveSize } from "styles/responsiveSize";
5+
import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
36
import { isUndefined } from "utils/index";
47
import { mapStatusToEnum } from "utils/mapStatusToEnum";
58
import { StyledSkeleton } from "../StyledSkeleton";
69
import StatusBanner from "../TransactionCard/StatusBanner";
10+
import EtherscanIcon from "svgs/icons/etherscan.svg";
711

812
const Container = styled.div`
913
display: flex;
@@ -30,24 +34,52 @@ const LeftContent = styled.div`
3034
gap: 8px;
3135
`;
3236

37+
const RightContent = styled.div`
38+
display: flex;
39+
align-items: center;
40+
gap: 16px;
41+
42+
${landscapeStyle(
43+
() => css`
44+
flex-shrink: 0;
45+
gap: 0 ${responsiveSize(24, 32, 900)};
46+
`
47+
)}
48+
`;
49+
50+
const StyledEtherscanIcon = styled(EtherscanIcon)`
51+
display: flex;
52+
height: 16px;
53+
width: 16px;
54+
`;
55+
3356
interface IHeader {
3457
escrowType: string;
3558
escrowTitle?: string;
3659
id: string;
3760
status: string;
61+
transactionHash: string;
3862
isCard: boolean;
3963
}
4064

41-
const Header: React.FC<IHeader> = ({ escrowType, escrowTitle, id, status, isCard }) => {
65+
const Header: React.FC<IHeader> = ({ escrowType, escrowTitle, id, status, transactionHash, isCard }) => {
4266
const currentStatusEnum = mapStatusToEnum(status);
67+
const etherscanUrl = `${SUPPORTED_CHAINS[DEFAULT_CHAIN].blockExplorers?.default.url}/tx/${transactionHash}`;
4368

4469
return (
4570
<Container>
4671
<LeftContent>
4772
<StyledLabel>{escrowType === "general" ? "General Escrow" : "Crypto Swap"}</StyledLabel>
4873
{isUndefined(escrowTitle) ? <StyledSkeleton /> : <StyledHeader>{escrowTitle}</StyledHeader>}
4974
</LeftContent>
50-
<StatusBanner status={currentStatusEnum} isPreview={true} />
75+
<RightContent>
76+
{transactionHash ? (
77+
<a href={etherscanUrl} target="_blank" rel="noreferrer">
78+
<StyledEtherscanIcon />
79+
</a>
80+
) : null}
81+
<StatusBanner status={currentStatusEnum} isPreview={true} />
82+
</RightContent>
5183
</Container>
5284
);
5385
};

‎web/src/components/PreviewCard/index.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ interface IPreviewCard {
5454
receivingQuantity: string;
5555
transactionCreationTimestamp: string;
5656
status: string;
57+
transactionHash: string;
5758
buyerAddress: string;
5859
sendingQuantity: string;
5960
sellerAddress: string;
@@ -79,6 +80,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
7980
receivingQuantity,
8081
transactionCreationTimestamp,
8182
status,
83+
transactionHash,
8284
buyerAddress,
8385
sendingQuantity,
8486
sellerAddress,
@@ -97,7 +99,7 @@ const PreviewCard: React.FC<IPreviewCard> = ({
9799
arbitrationCost,
98100
}) => (
99101
<StyledCard {...{ isPreview }}>
100-
<Header {...{ escrowType, escrowTitle, status, isCard: false }} />
102+
<Header {...{ escrowType, escrowTitle, status, transactionHash, isCard: false }} />
101103
<TransactionInfoContainer>
102104
<Divider />
103105
<TransactionInfo

‎web/src/hooks/queries/useTransactionsQuery.ts

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export const transactionFragment = graphql(`
2020
templateData
2121
templateDataMappings
2222
status
23+
transactionHash
2324
payments {
2425
id
2526
amount

‎web/src/pages/MyTransactions/TransactionDetails/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ const TransactionDetails: React.FC = () => {
4646
seller,
4747
buyer,
4848
status,
49+
transactionHash,
4950
payments,
5051
hasToPayFees,
5152
settlementProposals,
@@ -96,6 +97,7 @@ const TransactionDetails: React.FC = () => {
9697
resolvedEvents,
9798
arbitrationCost,
9899
assetSymbol,
100+
transactionHash,
99101
}}
100102
/>
101103
{status === "NoDispute" && payments?.length === 0 ? <WasItFulfilled /> : null}

0 commit comments

Comments
 (0)