Skip to content

Commit 3fba7e4

Browse files
0xFirekeeper0xFirekeeper
authored
relayer updates (#8541)
1 parent 57ccadb commit 3fba7e4

4 files changed

Lines changed: 85 additions & 73 deletions

File tree

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/active-state.tsx‎

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
1313
import { PaginationButtons } from "@/components/blocks/pagination-buttons";
1414
import { WalletAddress } from "@/components/blocks/wallet-address";
1515
import { Button } from "@/components/ui/button";
16-
import { CopyTextButton } from "@/components/ui/CopyTextButton";
1716
import { Skeleton } from "@/components/ui/skeleton";
1817
import {
1918
Table,
@@ -111,23 +110,43 @@ export function DedicatedRelayerActiveState(
111110
/>
112111
</div>
113112

114-
{/* Executors Info */}
115-
<div className="rounded-lg border bg-card">
116-
<div className="border-b px-4 py-4 lg:px-6">
117-
<h2 className="font-semibold text-xl tracking-tight">
118-
Fleet Executors
119-
</h2>
113+
{/* Configuration Info */}
114+
<div className="grid gap-6 lg:grid-cols-2">
115+
{/* Executors */}
116+
<div className="rounded-lg border bg-card">
117+
<div className="border-b px-4 py-4 lg:px-6">
118+
<h2 className="font-semibold text-xl tracking-tight">Executors</h2>
119+
</div>
120+
<div className="p-4 lg:p-6">
121+
<div className="flex flex-wrap gap-2">
122+
{fleet.executors.map((address) => (
123+
<div
124+
key={address}
125+
className="flex items-center gap-2 rounded-lg border bg-background px-3 py-2"
126+
>
127+
<WalletAddress address={address} client={client} />
128+
</div>
129+
))}
130+
</div>
131+
</div>
120132
</div>
121-
<div className="p-4 lg:p-6">
122-
<div className="flex flex-wrap gap-2">
123-
{fleet.executors.map((address) => (
124-
<div
125-
key={address}
126-
className="flex items-center gap-2 rounded-lg border bg-background px-3 py-2"
127-
>
128-
<WalletAddress address={address} client={client} />
129-
</div>
130-
))}
133+
134+
{/* Chains */}
135+
<div className="rounded-lg border bg-card">
136+
<div className="border-b px-4 py-4 lg:px-6">
137+
<h2 className="font-semibold text-xl tracking-tight">Chains</h2>
138+
</div>
139+
<div className="p-4 lg:p-6">
140+
<div className="flex flex-wrap gap-2">
141+
{fleet.chainIds.map((chainId) => (
142+
<div
143+
key={chainId}
144+
className="flex items-center gap-2 rounded-lg border bg-background px-3 py-2"
145+
>
146+
<ChainCell chainId={chainId.toString()} client={client} />
147+
</div>
148+
))}
149+
</div>
131150
</div>
132151
</div>
133152
</div>
@@ -295,37 +314,20 @@ function SkeletonRow() {
295314
}
296315

297316
function TransactionHashCell(props: { hash: string; chainId: string }) {
298-
const { idToChain } = useAllChainsData();
299-
const chain = idToChain.get(Number(props.chainId));
300-
301-
const explorerUrl = chain?.explorers?.[0]?.url;
302317
const txHashToShow = `${props.hash.slice(0, 6)}...${props.hash.slice(-4)}`;
303318

304-
if (explorerUrl) {
305-
return (
306-
<Button asChild size="sm" variant="ghost">
307-
<Link
308-
className="-translate-x-2 gap-2 font-mono"
309-
href={`${explorerUrl}/tx/${props.hash}`}
310-
rel="noopener noreferrer"
311-
target="_blank"
312-
>
313-
{txHashToShow}
314-
<ExternalLinkIcon className="size-3.5 text-muted-foreground" />
315-
</Link>
316-
</Button>
317-
);
318-
}
319-
320319
return (
321-
<CopyTextButton
322-
className="-translate-x-2 font-mono"
323-
copyIconPosition="right"
324-
textToCopy={props.hash}
325-
textToShow={txHashToShow}
326-
tooltip="Transaction Hash"
327-
variant="ghost"
328-
/>
320+
<Button asChild size="sm" variant="ghost">
321+
<Link
322+
className="-translate-x-2 gap-2 font-mono"
323+
href={`https://thirdweb.com/${props.chainId}/tx/${props.hash}`}
324+
rel="noopener noreferrer"
325+
target="_blank"
326+
>
327+
{txHashToShow}
328+
<ExternalLinkIcon className="size-3.5 text-muted-foreground" />
329+
</Link>
330+
</Button>
329331
);
330332
}
331333

@@ -362,7 +364,7 @@ function TransactionFeeCell(props: { usdValue: number | null }) {
362364
}
363365
return (
364366
<span className="font-mono text-sm">
365-
${props.usdValue < 0.01 ? "<0.01" : props.usdValue.toFixed(2)}
367+
{props.usdValue < 0.001 ? "< $0.001" : `$${props.usdValue.toFixed(3)}`}
366368
</span>
367369
);
368370
}
@@ -379,7 +381,7 @@ function ChainFilter(props: {
379381
client={props.client}
380382
chainId={props.chainId}
381383
onChange={(chainId) => props.setChainId(chainId)}
382-
popoverContentClassName="z-[10001]"
384+
popoverContentClassName="z-[10001] !w-[280px]"
383385
align="end"
384386
placeholder="All Chains"
385387
className="min-w-[150px]"

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/empty-state.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,8 @@ export function DedicatedRelayerEmptyState(
7171
}
7272
};
7373

74-
const requiredChains =
75-
selectedTier === "product:dedicated_relayer_standard" ? 2 : 4;
74+
const maxChains =
75+
selectedTier === "product:dedicated_relayer_standard" ? 1 : 2;
7676

7777
return (
7878
<div className={cn("flex flex-col gap-8 pt-2", props.className)}>
@@ -90,7 +90,7 @@ export function DedicatedRelayerEmptyState(
9090
</DialogHeader>
9191
<div className="flex flex-col gap-4">
9292
<p className="text-muted-foreground text-sm">
93-
Select {requiredChains} chains for your dedicated relayer.
93+
Select up to {maxChains} chains for your dedicated relayer.
9494
</p>
9595
<MultiNetworkSelector
9696
selectedChainIds={selectedChainIds}
@@ -102,7 +102,11 @@ export function DedicatedRelayerEmptyState(
102102
<DialogFooter>
103103
<Button
104104
onClick={handlePurchase}
105-
disabled={selectedChainIds.length !== requiredChains || isLoading}
105+
disabled={
106+
selectedChainIds.length === 0 ||
107+
selectedChainIds.length > maxChains ||
108+
isLoading
109+
}
106110
>
107111
{isLoading ? "Processing..." : "Continue"}
108112
</Button>

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/page-client.tsx‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export function DedicatedRelayerPageClient(
7373
refetchInterval: 5000,
7474
});
7575

76+
const isCheckingActivity = hasActivityQuery.isPending;
7677
const totalTransactions = hasActivityQuery.data?.data.totalTransactions ?? 0;
7778
const hasTransactions = totalTransactions > 0;
7879

@@ -117,23 +118,28 @@ export function DedicatedRelayerPageClient(
117118
<DedicatedRelayerPendingState fleet={fleet} />
118119
)}
119120

120-
{fleetStatus === "active" && fleet && !hasTransactions && (
121-
<DedicatedRelayerPendingState
122-
fleet={fleet}
123-
hasTransactions={hasTransactions}
124-
/>
125-
)}
126-
127-
{fleetStatus === "active" && fleet && hasTransactions && (
128-
<DedicatedRelayerActiveState
129-
fleet={fleet}
130-
teamId={props.teamId}
131-
fleetId={props.fleetId}
132-
client={props.client}
133-
range={dateRange}
134-
setRange={setDateRange}
135-
/>
136-
)}
121+
{fleetStatus === "active" &&
122+
fleet &&
123+
!hasTransactions &&
124+
!isCheckingActivity && (
125+
<DedicatedRelayerPendingState
126+
fleet={fleet}
127+
hasTransactions={hasTransactions}
128+
/>
129+
)}
130+
131+
{fleetStatus === "active" &&
132+
fleet &&
133+
(hasTransactions || isCheckingActivity) && (
134+
<DedicatedRelayerActiveState
135+
fleet={fleet}
136+
teamId={props.teamId}
137+
fleetId={props.fleetId}
138+
client={props.client}
139+
range={dateRange}
140+
setRange={setDateRange}
141+
/>
142+
)}
137143
</div>
138144
);
139145
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/tier-selection.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@ const TIERS: TierConfig[] = [
3333
icon: FolderIcon,
3434
name: "Standard",
3535
description:
36-
"Most suitable for small startups and apps doing less than 10,000 transactions per day",
36+
"Most suitable for startups and applications with moderate transaction volume",
3737
price: "$99",
3838
isPerMonth: true,
3939
features: [
4040
{ icon: WalletProductIcon, label: "Single executor wallet" },
41-
{ icon: BoxesIcon, label: "Support for up to 2 chains" },
41+
{ icon: BoxesIcon, label: "Support for 1 chain" },
4242
],
4343
cta: "Select",
4444
},
@@ -47,15 +47,15 @@ const TIERS: TierConfig[] = [
4747
icon: FoldersIcon,
4848
name: "Premium",
4949
description:
50-
"Best for large enterprise companies and apps doing 100,000+ transactions per day",
50+
"Best for enterprise companies and applications with high transaction volume",
5151
price: "$299",
5252
isPerMonth: true,
5353
features: [
5454
{
5555
icon: WalletProductIcon,
5656
label: "10 executor wallets (10x throughput)",
5757
},
58-
{ icon: BoxesIcon, label: "Support for up to 4 chains" },
58+
{ icon: BoxesIcon, label: "Support for up to 2 chains" },
5959
],
6060
cta: "Select",
6161
isRecommended: true,
@@ -65,7 +65,7 @@ const TIERS: TierConfig[] = [
6565
icon: FolderCogIcon,
6666
name: "Custom",
6767
description:
68-
"Contact us for more throughput with custom number of chains and executor wallets",
68+
"Contact us for applications operating at a global scale with custom requirements",
6969
price: "Custom",
7070
features: [
7171
{ icon: WalletProductIcon, label: "Unlimited executor wallets" },

0 commit comments

Comments
 (0)