Skip to content

Commit e7327e2

Browse files
gregfromstlgregfromstl
committed
Merge branch 'main' into greg/tool-4860-add-tracking-on-new-embed-flow
2 parents c5bd76a + c26be2d commit e7327e2

File tree

8 files changed

+165
-128
lines changed

8 files changed

+165
-128
lines changed

‎.changeset/slow-sites-call.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"thirdweb": patch
3+
---
4+
5+
Fix wallet row alignement in wide connect modal

‎apps/dashboard/src/@/components/blocks/upsell-wrapper.tsx

Lines changed: 99 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export function UpsellWrapper({
4747
}
4848

4949
return (
50-
<div className={cn("relative flex-1", className)}>
50+
<div className={cn("relative flex-1 flex flex-col", className)}>
5151
{/* Background content - blurred and non-interactive */}
5252
<div className="absolute inset-0 overflow-hidden">
5353
<div className="pointer-events-none select-none opacity-60 blur-[1px]">
@@ -59,84 +59,109 @@ export function UpsellWrapper({
5959
<div className="absolute inset-0 bg-gradient-to-b from-muted/20 via-muted/30 to-background" />
6060

6161
{/* Upsell content */}
62-
<div className="relative z-10 flex items-center justify-center p-16">
63-
<Card className="w-full max-w-2xl border-2 shadow-2xl">
64-
<CardHeader className="space-y-4 text-center">
65-
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 bg-muted">
66-
<LockIcon className="h-8 w-8 text-muted-foreground" />
67-
</div>
62+
<div className="relative z-10 flex items-center justify-center grow py-20 px-6">
63+
<UpsellContent
64+
benefits={benefits}
65+
currentPlan={currentPlan}
66+
featureDescription={featureDescription}
67+
featureName={featureName}
68+
requiredPlan={requiredPlan}
69+
teamSlug={teamSlug}
70+
/>
71+
</div>
72+
</div>
73+
);
74+
}
6875

69-
<div className="space-y-2">
70-
<TeamPlanBadge
71-
plan="scale"
72-
postfix=" Feature"
73-
teamSlug={teamSlug}
74-
/>
75-
<CardTitle className="font-bold text-2xl text-foreground md:text-3xl">
76-
Unlock {featureName}
77-
</CardTitle>
78-
<CardDescription className="mx-auto max-w-md text-base text-muted-foreground">
79-
{featureDescription}
80-
</CardDescription>
81-
</div>
82-
</CardHeader>
76+
export function UpsellContent(props: {
77+
teamSlug: string;
78+
featureName: string;
79+
featureDescription: string;
80+
requiredPlan: Team["billingPlan"];
81+
currentPlan: Team["billingPlan"];
82+
benefits?: {
83+
description: string;
84+
status: "available" | "soon";
85+
}[];
86+
}) {
87+
return (
88+
<Card className="w-full max-w-xl border shadow-2xl">
89+
<CardHeader className="space-y-4 text-center">
90+
<div className="mx-auto flex p-4 items-center justify-center rounded-full border bg-card">
91+
<LockIcon className="size-8 text-muted-foreground" />
92+
</div>
8393

84-
<CardContent className="space-y-6">
85-
{benefits.length > 0 && (
86-
<div className="space-y-3">
87-
<h4 className="font-semibold text-muted-foreground text-sm uppercase tracking-wide">
88-
What you'll get:
89-
</h4>
90-
<div className="grid gap-2">
91-
{benefits.map((benefit) => (
92-
<div
93-
className="flex items-center gap-3"
94-
key={benefit.description}
95-
>
96-
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-accent">
97-
<SparklesIcon className="h-3 w-3 text-success-text" />
98-
</div>
99-
<span className="text-sm">{benefit.description}</span>
100-
{benefit.status === "soon" && (
101-
<Badge className="text-xs" variant="secondary">
102-
Coming Soon
103-
</Badge>
104-
)}
105-
</div>
106-
))}
107-
</div>
108-
</div>
109-
)}
94+
<div className="space-y-4">
95+
<TeamPlanBadge
96+
plan={props.requiredPlan}
97+
postfix=" Feature"
98+
teamSlug={props.teamSlug}
99+
/>
100+
<div className="space-y-1">
101+
<CardTitle className="font-bold text-2xl text-foreground md:text-3xl">
102+
Unlock {props.featureName}
103+
</CardTitle>
104+
<CardDescription className="mx-auto max-w-md text-base text-muted-foreground">
105+
{props.featureDescription}
106+
</CardDescription>
107+
</div>
108+
</div>
109+
</CardHeader>
110110

111-
<div className="flex flex-col gap-3 pt-4 sm:flex-row">
112-
<Button asChild className="flex-1 py-3 font-semibold" size="lg">
113-
<Link
114-
href={`/team/${teamSlug}/~/settings/billing?showPlans=true&highlight=${requiredPlan}`}
115-
>
116-
<CrownIcon className="mr-2 h-4 w-4" />
117-
Upgrade to{" "}
118-
<span className="ml-1 capitalize">{requiredPlan}</span>
119-
</Link>
120-
</Button>
121-
<Button asChild className="md:flex-1" size="lg" variant="outline">
122-
<Link
123-
href={`/team/${teamSlug}/~/settings/billing?showPlans=true`}
111+
<CardContent className="space-y-6">
112+
{props.benefits && props.benefits.length > 0 && (
113+
<div className="space-y-3">
114+
<h4 className="font-semibold text-muted-foreground text-sm uppercase tracking-wide">
115+
What you'll get:
116+
</h4>
117+
<div className="grid gap-2">
118+
{props.benefits.map((benefit) => (
119+
<div
120+
className="flex items-center gap-3"
121+
key={benefit.description}
124122
>
125-
View All Plans
126-
</Link>
127-
</Button>
123+
<div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-accent">
124+
<SparklesIcon className="h-3 w-3 text-success-text" />
125+
</div>
126+
<span className="text-sm">{benefit.description}</span>
127+
{benefit.status === "soon" && (
128+
<Badge className="text-xs" variant="secondary">
129+
Coming Soon
130+
</Badge>
131+
)}
132+
</div>
133+
))}
128134
</div>
135+
</div>
136+
)}
129137

130-
<div className="pt-2 text-center">
131-
<p className="text-muted-foreground text-xs">
132-
You are currently on the{" "}
133-
<span className="font-medium capitalize">{currentPlan}</span>{" "}
134-
plan.
135-
</p>
136-
</div>
137-
</CardContent>
138-
</Card>
139-
</div>
140-
</div>
138+
<div className="flex flex-col gap-3 pt-4 sm:flex-row">
139+
<Button asChild className="flex-1 py-3 font-semibold" size="lg">
140+
<Link
141+
href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true&highlight=${props.requiredPlan}`}
142+
>
143+
<CrownIcon className="mr-2 h-4 w-4" />
144+
Upgrade to{" "}
145+
<span className="ml-1 capitalize">{props.requiredPlan}</span>
146+
</Link>
147+
</Button>
148+
<Button asChild className="md:flex-1" size="lg" variant="outline">
149+
<Link
150+
href={`/team/${props.teamSlug}/~/settings/billing?showPlans=true`}
151+
>
152+
View All Plans
153+
</Link>
154+
</Button>
155+
</div>
156+
157+
<div className="pt-2 text-center">
158+
<p className="text-muted-foreground text-xs">
159+
You are currently on the{" "}
160+
<span className="font-medium capitalize">{props.currentPlan}</span>{" "}
161+
plan.
162+
</p>
163+
</div>
164+
</CardContent>
165+
</Card>
141166
);
142167
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/audit-log/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { redirect } from "next/navigation";
2-
import { getTeamBySlug } from "../../../../../../../@/api/team";
3-
import { UpsellWrapper } from "../../../../../../../@/components/blocks/upsell-wrapper";
2+
import { getTeamBySlug } from "@/api/team";
3+
import { UpsellWrapper } from "@/components/blocks/upsell-wrapper";
44

55
export default async function Layout(props: {
66
children: React.ReactNode;

‎apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/page.tsx

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { InfoIcon } from "lucide-react";
33
import { redirect } from "next/navigation";
44
import { getTeamBySlug } from "@/api/team";
55
import { getBilledUsage } from "@/api/usage/billing-preview";
6+
import { UpsellContent } from "@/components/blocks/upsell-wrapper";
67
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
78
import {
89
Card,
@@ -12,6 +13,7 @@ import {
1213
CardHeader,
1314
CardTitle,
1415
} from "@/components/ui/card";
16+
import { getValidTeamPlan } from "@/utils/getValidTeamPlan";
1517
import { getValidAccount } from "../../../../../account/settings/getAccount";
1618
import {
1719
formatPrice,
@@ -34,23 +36,28 @@ export default async function Page(props: {
3436
}
3537

3638
const usagePreview = await getBilledUsage(team.slug);
39+
const validPlan = getValidTeamPlan(team);
40+
41+
if (validPlan === "free") {
42+
return (
43+
<div className="grow flex flex-col justify-center items-center">
44+
<UpsellContent
45+
currentPlan={team.billingPlan}
46+
featureDescription="View RPC, Wallet, Storage, Account Abstraction, Engine Cloud, Webhooks usage and more"
47+
featureName="Usage"
48+
requiredPlan="starter"
49+
teamSlug={params.team_slug}
50+
/>
51+
</div>
52+
);
53+
}
3754

3855
if (usagePreview.status === "error") {
39-
switch (usagePreview.reason) {
40-
case "free_plan":
41-
return (
42-
<div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
43-
You are on a free plan. Please upgrade to a paid plan to view your
44-
usage.
45-
</div>
46-
);
47-
default:
48-
return (
49-
<div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
50-
Something went wrong. Please try again later.
51-
</div>
52-
);
53-
}
56+
return (
57+
<div className="flex min-h-[350px] items-center justify-center rounded-lg border p-4 text-destructive-text">
58+
Something went wrong. Please try again later.
59+
</div>
60+
);
5461
}
5562

5663
const grandTotalCents = usagePreview.data.result.reduce((total, category) => {

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/ftux.client.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,12 @@ function CreateVaultAccountStep(props: {
128128
/>
129129
<Button asChild variant="outline">
130130
<Link
131-
href="https://portal.thirdweb.com/engine/vault"
131+
href="https://portal.thirdweb.com/vault"
132132
rel="noopener noreferrer"
133133
target="_blank"
134-
></Link>
134+
>
135+
Learn more about Vault
136+
</Link>
135137
</Button>
136138
</div>
137139
);

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -102,41 +102,39 @@ export function ServerWalletsTableUI({
102102
</TableRow>
103103
</TableHeader>
104104
<TableBody>
105-
{wallets.length === 0 ? (
106-
<TableRow>
107-
<TableCell className="text-center" colSpan={3}>
108-
No server wallets found
105+
{wallets.map((wallet) => (
106+
<TableRow className="hover:bg-accent/50" key={wallet.id}>
107+
<TableCell>
108+
{showSigners ? (
109+
<WalletAddress address={wallet.address} client={client} />
110+
) : (
111+
<SmartAccountCell client={client} wallet={wallet} />
112+
)}
113+
</TableCell>
114+
<TableCell>{wallet.metadata.label || "none"}</TableCell>
115+
<TableCell className="text-right">
116+
<WalletDateCell date={wallet.createdAt} />
117+
</TableCell>
118+
<TableCell className="text-right">
119+
<WalletDateCell date={wallet.updatedAt} />
120+
</TableCell>
121+
<TableCell className="flex justify-end">
122+
<SendTestTransaction
123+
project={project}
124+
teamSlug={teamSlug}
125+
wallet={wallet}
126+
/>
109127
</TableCell>
110128
</TableRow>
111-
) : (
112-
wallets.map((wallet) => (
113-
<TableRow className="hover:bg-accent/50" key={wallet.id}>
114-
<TableCell>
115-
{showSigners ? (
116-
<WalletAddress address={wallet.address} client={client} />
117-
) : (
118-
<SmartAccountCell client={client} wallet={wallet} />
119-
)}
120-
</TableCell>
121-
<TableCell>{wallet.metadata.label || "none"}</TableCell>
122-
<TableCell className="text-right">
123-
<WalletDateCell date={wallet.createdAt} />
124-
</TableCell>
125-
<TableCell className="text-right">
126-
<WalletDateCell date={wallet.updatedAt} />
127-
</TableCell>
128-
<TableCell className="flex justify-end">
129-
<SendTestTransaction
130-
project={project}
131-
teamSlug={teamSlug}
132-
wallet={wallet}
133-
/>
134-
</TableCell>
135-
</TableRow>
136-
))
137-
)}
129+
))}
138130
</TableBody>
139131
</Table>
132+
133+
{wallets.length === 0 && (
134+
<div className="py-20 flex items-center justify-center px-4 text-center">
135+
No server wallets found
136+
</div>
137+
)}
140138
</TableContainer>
141139

142140
{totalPages > 1 && (

‎packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,15 +103,14 @@ export const WalletButtonEl = /* @__PURE__ */ StyledButton((_) => {
103103
backgroundColor: theme.colors.tertiaryBg,
104104
},
105105
alignItems: "center",
106-
all: "unset",
107106
borderRadius: radius.md,
108107
boxSizing: "border-box",
109108
color: theme.colors.secondaryText,
110109
cursor: "pointer",
111110
display: "flex",
111+
flexDirection: "row",
112112
gap: spacing.sm,
113113
padding: `${spacing.xs} ${spacing.xs}`,
114-
position: "relative",
115114
transition: "background-color 200ms ease, transform 200ms ease",
116115
width: "100%",
117116
};

‎packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -710,11 +710,12 @@ const ShowAllWalletsIcon = /* @__PURE__ */ StyledDiv(() => {
710710
border: `2px solid ${theme.colors.borderColor}`,
711711
borderRadius: radius.md,
712712
display: "grid",
713+
gap: spacing["4xs"],
713714
gridTemplateColumns: "1fr 1fr",
714-
height: `${iconSize.lg}px`,
715+
height: `${iconSize.xl}px`,
715716
justifyItems: "center",
716717
padding: spacing.xs,
717-
width: `${iconSize.lg}px`,
718+
width: `${iconSize.xl}px`,
718719
};
719720
});
720721

0 commit comments

Comments
 (0)