Skip to content

Commit cccbde9

Browse files
committed
[MNY-240] Dashboard: Show bridge status info on transaction page if available (#8241)
<!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR introduces a new tabbed interface for bridge status and overview details in the transaction view. It enhances user experience by allowing easy navigation between different states of a bridge transaction. ### Detailed summary - Added `BridgeAndOverviewTabs` component for tab navigation. - Implemented `BridgeStatus` component to display bridge transaction status. - Created stories for different bridge statuses (`Completed`, `Pending`, `Failed`, `NotFound`). - Enhanced `Page` component to include bridge status with polling. - Refactored transaction details layout for better clarity. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 85a6afc commit cccbde9

File tree

4 files changed

+751
-194
lines changed

4 files changed

+751
-194
lines changed
Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import type { Meta, StoryObj } from "@storybook/nextjs";
2+
import type { Status } from "thirdweb/bridge";
3+
import { storybookThirdwebClient } from "@/storybook/utils";
4+
import { BridgeStatus } from "./bridge-status";
5+
6+
const meta = {
7+
component: BridgeStatus,
8+
title: "chain/tx/bridge-status",
9+
decorators: [
10+
(Story) => (
11+
<div className="container max-w-6xl py-10">
12+
<Story />
13+
</div>
14+
),
15+
],
16+
} satisfies Meta<typeof BridgeStatus>;
17+
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
const completedStatus: Status = {
22+
status: "COMPLETED",
23+
paymentId:
24+
"0x8e0a0d9c0254a75a3004a28e0fb69bae7f2d659938ddd461753627270930db60",
25+
originAmount: 129935n,
26+
destinationAmount: 100000n,
27+
transactions: [
28+
{
29+
chainId: 42161,
30+
transactionHash:
31+
"0x37daf698878e73590adb2d6f833e810304a9981829ad983fb355245af1183107",
32+
},
33+
{
34+
chainId: 8453,
35+
transactionHash:
36+
"0xc72abba2761bb48f605125dc12c17b15088303db960816fa12316f0c90796417",
37+
},
38+
],
39+
originChainId: 42161,
40+
originTokenAddress: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
41+
originToken: {
42+
chainId: 42161,
43+
address: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
44+
symbol: "USDC",
45+
name: "USD Coin",
46+
decimals: 6,
47+
iconUri: "https://ethereum-optimism.github.io/data/USDC/logo.png",
48+
},
49+
destinationChainId: 8453,
50+
destinationTokenAddress: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
51+
destinationToken: {
52+
chainId: 8453,
53+
address: "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
54+
symbol: "USDC",
55+
name: "USD Coin",
56+
decimals: 6,
57+
iconUri:
58+
"https://coin-images.coingecko.com/coins/images/6319/large/usdc.png?1696506694",
59+
},
60+
sender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
61+
receiver: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
62+
};
63+
64+
const pendingStatus: Status = {
65+
...completedStatus,
66+
status: "PENDING",
67+
};
68+
69+
const failedStatus: Status = {
70+
...completedStatus,
71+
status: "FAILED",
72+
};
73+
74+
const notFoundStatus: Status = {
75+
...completedStatus,
76+
status: "NOT_FOUND",
77+
transactions: [],
78+
};
79+
80+
export const Completed: Story = {
81+
args: {
82+
bridgeStatus: completedStatus,
83+
client: storybookThirdwebClient,
84+
},
85+
};
86+
87+
export const Pending: Story = {
88+
args: {
89+
bridgeStatus: pendingStatus,
90+
client: storybookThirdwebClient,
91+
},
92+
};
93+
94+
export const Failed: Story = {
95+
args: {
96+
bridgeStatus: failedStatus,
97+
client: storybookThirdwebClient,
98+
},
99+
};
100+
101+
export const NotFound: Story = {
102+
args: {
103+
bridgeStatus: notFoundStatus,
104+
client: storybookThirdwebClient,
105+
},
106+
};

0 commit comments

Comments
 (0)