Skip to content

Commit 9533832

Browse files
arcoravenarcoraven
committed
more nebula
1 parent ed66c51 commit 9533832

File tree

9 files changed

+188
-146
lines changed

9 files changed

+188
-146
lines changed

‎apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/actions/fetchERC20Tokens.ts‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,9 @@
11
"use server";
22

33
import assert from "node:assert";
4+
import { toTokens } from "thirdweb";
45
import type { TokenDetails } from "../hooks/useGetERC20Tokens";
56

6-
// "native_tokens": [
7-
// {
8-
// "token_id": "ethereum.native",
9-
// "name": "Ether",
10-
// "symbol": "ETH",
11-
// "decimals": 18,
12-
// "chain": "ethereum",
13-
// "total_quantity": 1527391387004726000,
14-
// "total_quantity_string": "1527391387004725927",
15-
// "total_value_usd_cents": 477180,
16-
// "queried_wallet_balances": [
17-
// {
18-
// "address": "0xa5B8492D8223D255dB279C7c3ebdA34Be5eC9D85",
19-
// "quantity": 1527391387004726000,
20-
// "quantity_string": "1527391387004725927",
21-
// "value_usd_cents": 477180
22-
// }
23-
// ]
24-
// }
25-
// ]
26-
277
interface QueriedWalletBalance {
288
address: string;
299
quantity_string: string;
@@ -86,6 +66,9 @@ export async function fetchERC20Tokens(args: {
8666
contractAddress: "Native",
8767
decimals: token.decimals,
8868
balance: BigInt(token.total_quantity_string ?? 0n),
69+
balanceTokens: Number(
70+
toTokens(BigInt(token.total_quantity_string), token.decimals),
71+
),
8972
totalValueUsdCents: token.total_value_usd_cents,
9073
firstTransferredDate:
9174
token.queried_wallet_balances[0]?.first_transferred_date,
@@ -98,6 +81,9 @@ export async function fetchERC20Tokens(args: {
9881
contractAddress: token.fungible_id.split(".")[1] ?? "--",
9982
decimals: token.decimals,
10083
balance: BigInt(token.total_quantity_string ?? 0n),
84+
balanceTokens: Number(
85+
toTokens(BigInt(token.total_quantity_string), token.decimals),
86+
),
10187
totalValueUsdCents: token.total_value_usd_cents,
10288
firstTransferredDate:
10389
token.queried_wallet_balances[0]?.first_transferred_date,

‎apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/actions/fetchTxActivity.ts‎ renamed to ‎apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/actions/fetchRecentTransactions.ts‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import assert from "node:assert";
12
import { DASHBOARD_THIRDWEB_CLIENT_ID } from "@/constants/env";
23

34
interface Transaction {
@@ -45,40 +46,42 @@ interface InsightsResponse {
4546
data: Transaction[];
4647
}
4748

48-
export async function fetchTxActivity(args: {
49+
export async function fetchRecentTransactions(args: {
4950
chainId: number;
5051
address: string;
5152
limit_per_type?: number;
5253
page?: number;
5354
}): Promise<Transaction[]> {
54-
let { chainId, address, limit_per_type, page } = args;
55-
if (!limit_per_type) limit_per_type = 100;
56-
if (!page) page = 0;
55+
// const { NEXT_PUBLIC_INSIGHT_URL } = process.env;
56+
const NEXT_PUBLIC_INSIGHT_URL = "https://insight.thirdweb-dev.com";
57+
console.log("[DEBUG] NEXT_PUBLIC_INSIGHT_URL:", NEXT_PUBLIC_INSIGHT_URL);
58+
assert(NEXT_PUBLIC_INSIGHT_URL, "NEXT_PUBLIC_INSIGHT_URL is not set");
5759

58-
const outgoingTxsResponse = await fetch(
59-
`https://insight.thirdweb-dev.com/v1/transactions?chain=${chainId}&filter_from_address=${address}&page=${page}&limit=${limit_per_type}&sort_by=block_number&sort_order=desc`,
60-
{
61-
headers: {
62-
"x-client-id": DASHBOARD_THIRDWEB_CLIENT_ID,
63-
},
64-
},
65-
);
66-
67-
const incomingTxsResponse = await fetch(
68-
`https://insight.thirdweb-dev.com/v1/transactions?chain=${chainId}&filter_to_address=${address}&page=${page}&limit=${limit_per_type}&sort_by=block_number&sort_order=desc`,
69-
{
70-
headers: {
71-
"x-client-id": DASHBOARD_THIRDWEB_CLIENT_ID,
72-
},
73-
},
74-
);
60+
const { chainId, address, limit_per_type = 100, page = 0 } = args;
7561

76-
if (!outgoingTxsResponse.ok || !incomingTxsResponse.ok) {
62+
const [outgoingTransactionsResponse, incomingTransactionsResponse] =
63+
await Promise.all([
64+
fetch(
65+
`${NEXT_PUBLIC_INSIGHT_URL}/v1/transactions?chain=${chainId}&filter_from_address=${address}&page=${page}&limit=${limit_per_type}&sort_by=block_number&sort_order=desc`,
66+
{
67+
headers: { "x-client-id": DASHBOARD_THIRDWEB_CLIENT_ID },
68+
},
69+
),
70+
fetch(
71+
`${NEXT_PUBLIC_INSIGHT_URL}/v1/transactions?chain=${chainId}&filter_to_address=${address}&page=${page}&limit=${limit_per_type}&sort_by=block_number&sort_order=desc`,
72+
{
73+
headers: { "x-client-id": DASHBOARD_THIRDWEB_CLIENT_ID },
74+
},
75+
),
76+
]);
77+
if (!outgoingTransactionsResponse.ok || !incomingTransactionsResponse.ok) {
7778
throw new Error("Failed to fetch transaction history");
7879
}
7980

80-
const outgoingTxsData: InsightsResponse = await outgoingTxsResponse.json();
81-
const incomingTxsData: InsightsResponse = await incomingTxsResponse.json();
81+
const outgoingTxsData: InsightsResponse =
82+
await outgoingTransactionsResponse.json();
83+
const incomingTxsData: InsightsResponse =
84+
await incomingTransactionsResponse.json();
8285

8386
return [...outgoingTxsData.data, ...incomingTxsData.data].sort(
8487
(a, b) => b.block_number - a.block_number,

‎apps/dashboard/src/app/(dashboard)/hackweek/[chain_id]/[address]/components/ActivityOverview.tsx‎

Lines changed: 62 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import { WalletAddress } from "@/components/blocks/wallet-address";
12
import { Spinner } from "@/components/ui/Spinner/Spinner";
3+
import { Button } from "@/components/ui/button";
24
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
35
import {
46
Table,
@@ -9,18 +11,12 @@ import {
911
TableRow,
1012
} from "@/components/ui/table";
1113
import { TabButtons } from "@/components/ui/tabs";
14+
import { formatDistanceToNow } from "date-fns";
15+
import { ArrowLeft, ArrowRight, WalletIcon } from "lucide-react";
1216
import { useState } from "react";
13-
14-
interface Transaction {
15-
id: string;
16-
type: "out" | "in";
17-
amount: string;
18-
to?: string;
19-
from?: string;
20-
contract?: string;
21-
method?: string;
22-
date: string;
23-
}
17+
import type { ChainMetadata } from "thirdweb/chains";
18+
import { shortenHex } from "thirdweb/utils";
19+
import type { TransactionDetails } from "../hooks/useGetRecentTransactions";
2420

2521
interface Contract {
2622
address: string;
@@ -29,12 +25,14 @@ interface Contract {
2925
}
3026

3127
interface ActivityOverviewProps {
32-
transactions: Transaction[];
28+
chain: ChainMetadata;
29+
transactions: TransactionDetails[];
3330
contracts: Contract[];
3431
isLoading: boolean;
3532
}
3633

3734
export function ActivityOverview({
35+
chain,
3836
transactions,
3937
contracts,
4038
isLoading,
@@ -54,6 +52,8 @@ export function ActivityOverview({
5452
// Calculate total pages
5553
const totalPages = Math.ceil(transactions.length / itemsPerPage);
5654

55+
const explorer = chain.explorers?.[0];
56+
5757
return (
5858
<Card>
5959
<CardHeader>
@@ -85,24 +85,58 @@ export function ActivityOverview({
8585
<Table>
8686
<TableHeader>
8787
<TableRow>
88-
<TableHead>Type</TableHead>
89-
<TableHead>Amount</TableHead>
90-
<TableHead>Details</TableHead>
9188
<TableHead>Date</TableHead>
89+
<TableHead>Hash</TableHead>
90+
<TableHead>Activity</TableHead>
91+
<TableHead>Value ({chain.nativeCurrency.symbol})</TableHead>
9292
</TableRow>
9393
</TableHeader>
9494
<TableBody>
95-
{currentTransactions.map((tx) => (
96-
<TableRow key={tx.id}>
97-
<TableCell>{tx.type}</TableCell>
98-
<TableCell>{tx.amount}</TableCell>
95+
{currentTransactions.map((transaction) => (
96+
<TableRow key={transaction.hash}>
97+
<TableCell>
98+
<span title={transaction.date.toLocaleString()}>
99+
{formatDistanceToNow(transaction.date, {
100+
addSuffix: true,
101+
})}
102+
</span>
103+
</TableCell>
104+
<TableCell>
105+
<Button
106+
variant="link"
107+
onClick={() =>
108+
window.open(`${explorer?.url}/tx/${transaction.hash}`)
109+
}
110+
className="font-mono"
111+
>
112+
{shortenHex(transaction.hash)}
113+
</Button>
114+
</TableCell>
115+
<TableCell>
116+
{transaction.type === "in" ? (
117+
<div className="flex items-center gap-2">
118+
<WalletIcon />
119+
<ArrowLeft className="text-blue-500" />
120+
<WalletAddress
121+
address={transaction.from}
122+
shortenAddress={false}
123+
/>
124+
</div>
125+
) : (
126+
<div className="flex items-center gap-2">
127+
<WalletIcon />
128+
<ArrowRight className="text-green-500" />
129+
<WalletAddress
130+
address={transaction.to}
131+
shortenAddress={false}
132+
/>
133+
</div>
134+
)}
135+
</TableCell>
99136
<TableCell>
100-
{tx.to && `To: ${tx.to} `}
101-
{tx.from && `From: ${tx.from} `}
102-
{tx.contract && `Contract: ${tx.contract} `}
103-
{tx.method && ` Method: ${tx.method}`}
137+
{transaction.valueTokens > 0 &&
138+
transaction.valueTokens.toPrecision(4)}
104139
</TableCell>
105-
<TableCell>{tx.date}</TableCell>
106140
</TableRow>
107141
))}
108142
</TableBody>
@@ -139,22 +173,21 @@ export function ActivityOverview({
139173
</>
140174
) : activeTab === "contracts" ? (
141175
<Table>
142-
<TableHeader>
176+
{/* <TableHeader>
143177
<TableRow>
144178
<TableHead>Name</TableHead>
145179
<TableHead>Address</TableHead>
146180
<TableHead>Last Interaction</TableHead>
147181
</TableRow>
148182
</TableHeader>
149-
<TableBody>
150-
{contracts.map((contract, index) => (
183+
<TableBody>contracts.map((contract, index) => (
151184
<TableRow key={`${contract.address}-${index}`}>
152185
<TableCell>{contract.name}</TableCell>
153186
<TableCell>{contract.address}</TableCell>
154187
<TableCell>{contract.lastInteraction}</TableCell>
155188
</TableRow>
156-
))}
157-
</TableBody>
189+
))
190+
</TableBody> */}
158191
</Table>
159192
) : null}
160193
</CardContent>

0 commit comments

Comments
 (0)