Skip to content

Commit b551b69

Browse files
gregfromstlgregfromstl
committed
feat(react): add tabs to view assets screen (#3845)
1. Renamed `ViewFunds` to `ViewAssets` throughout the codebase for better clarity. 2. Updated file names and corresponding imports to reflect this change. 3. Modified the styling of the tabs on the `TransactionsScreen`. 4. Updated the grid layout and spacing in the `ViewNFTs` component. 5. Streamlined token viewing logic by creating reusable content components for tokens and NFTs in `ViewAssets`, `ViewNFTs`, and `ViewTokens`. --- <!-- start pr-codex --> --- ## PR-Codex overview The focus of this PR is to restyle the View Assets Connect UI page and rename `ViewFunds` to `ViewAssets`. ### Detailed summary - Restyled the View Assets Connect UI page - Renamed `ViewFunds` component to `ViewAssets` - Updated references and function names accordingly - Added new components `ViewTokensContent` and `ViewNFTsContent` - Updated UI layout and styling for better user experience > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
1 parent 6901a41 commit b551b69

File tree

7 files changed

+216
-162
lines changed

7 files changed

+216
-162
lines changed

‎.changeset/tasty-apricots-smile.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+
Restyles the View Assets Connect UI page

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ import { ManageWalletScreen } from "./screens/ManageWalletScreen.js";
8888
import { PrivateKey } from "./screens/PrivateKey.js";
8989
import { ReceiveFunds } from "./screens/ReceiveFunds.js";
9090
import { SendFunds } from "./screens/SendFunds.js";
91-
import { ViewFunds } from "./screens/ViewFunds.js";
91+
import { ViewAssets } from "./screens/ViewAssets.js";
9292
import { ViewNFTs } from "./screens/ViewNFTs.js";
9393
import { ViewTokens } from "./screens/ViewTokens.js";
9494
import { WalletConnectReceiverScreen } from "./screens/WalletConnectReceiverScreen.js";
@@ -538,7 +538,7 @@ function DetailsModal(props: {
538538
{/* View Funds */}
539539
<MenuButton
540540
onClick={() => {
541-
setScreen("view-funds");
541+
setScreen("view-assets");
542542
}}
543543
style={{
544544
fontSize: fontSize.sm,
@@ -694,15 +694,16 @@ function DetailsModal(props: {
694694
client={client}
695695
/>
696696
);
697-
} else if (screen === "view-funds") {
697+
} else if (screen === "view-assets") {
698698
if (props.supportedNFTs) {
699699
content = (
700-
<ViewFunds
700+
<ViewAssets
701701
supportedTokens={props.supportedTokens}
702702
supportedNFTs={props.supportedNFTs}
703703
onBack={() => {
704704
setScreen("main");
705705
}}
706+
theme={props.theme}
706707
setScreen={setScreen}
707708
client={client}
708709
connectLocale={locale}

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { useState } from "react";
2+
import type { ThirdwebClient } from "../../../../../client/client.js";
3+
import { type Theme, iconSize } from "../../../../core/design-system/index.js";
4+
import type {
5+
SupportedNFTs,
6+
SupportedTokens,
7+
} from "../../../../core/utils/defaultTokens.js";
8+
import { Spacer } from "../../components/Spacer.js";
9+
import Tabs from "../../components/Tabs.js";
10+
import { Container, Line, ModalHeader } from "../../components/basic.js";
11+
import { CoinsIcon } from "../icons/CoinsIcon.js";
12+
import { ImageIcon } from "../icons/ImageIcon.js";
13+
import type { ConnectLocale } from "../locale/types.js";
14+
import { ViewNFTsContent } from "./ViewNFTs.js";
15+
import { ViewTokensContent } from "./ViewTokens.js";
16+
import type { WalletDetailsModalScreen } from "./types.js";
17+
18+
/**
19+
* @internal
20+
*/
21+
export function ViewAssets(props: {
22+
supportedTokens?: SupportedTokens;
23+
supportedNFTs?: SupportedNFTs;
24+
theme: Theme | "light" | "dark";
25+
onBack: () => void;
26+
setScreen: (screen: WalletDetailsModalScreen) => void;
27+
client: ThirdwebClient;
28+
connectLocale: ConnectLocale;
29+
}) {
30+
const [activeTab, setActiveTab] = useState("Tokens");
31+
const { connectLocale } = props;
32+
33+
return (
34+
<Container
35+
animate="fadein"
36+
style={{
37+
minHeight: "300px",
38+
}}
39+
>
40+
<Container p="lg">
41+
<ModalHeader
42+
title={connectLocale.viewFunds.title}
43+
onBack={props.onBack}
44+
/>
45+
</Container>
46+
<Line />
47+
<Container
48+
px="lg"
49+
scrollY
50+
style={{
51+
minHeight: "330px",
52+
}}
53+
>
54+
<Spacer y="md" />
55+
<Tabs
56+
options={[
57+
{
58+
label: (
59+
<span className="flex gap-2">
60+
<CoinsIcon size={iconSize.sm} /> Tokens
61+
</span>
62+
),
63+
value: "Tokens",
64+
},
65+
{
66+
label: (
67+
<span className="flex gap-2">
68+
<ImageIcon size={iconSize.sm} /> NFTs
69+
</span>
70+
),
71+
value: "NFTs",
72+
},
73+
]}
74+
selected={activeTab}
75+
onSelect={setActiveTab}
76+
>
77+
<Container
78+
scrollY
79+
style={{
80+
maxHeight: "300px",
81+
}}
82+
>
83+
{activeTab === "Tokens" && (
84+
<ViewTokensContent
85+
client={props.client}
86+
connectLocale={connectLocale}
87+
supportedTokens={props.supportedTokens}
88+
/>
89+
)}
90+
{activeTab === "NFTs" && (
91+
<ViewNFTsContent
92+
supportedNFTs={props.supportedNFTs}
93+
client={props.client}
94+
theme={props.theme}
95+
connectLocale={connectLocale}
96+
/>
97+
)}
98+
</Container>
99+
</Tabs>
100+
<Spacer y="lg" />
101+
</Container>
102+
</Container>
103+
);
104+
}

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewFunds.tsx

Lines changed: 0 additions & 76 deletions
This file was deleted.

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewNFTs.tsx

Lines changed: 63 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,39 @@ export function ViewNFTs(props: {
7171
onBack: () => void;
7272
client: ThirdwebClient;
7373
connectLocale: ConnectLocale;
74+
}) {
75+
return (
76+
<Container
77+
style={{
78+
minHeight: "300px",
79+
}}
80+
>
81+
<Container p="lg">
82+
<ModalHeader
83+
title={props.connectLocale.viewFunds.viewNFTs}
84+
onBack={props.onBack}
85+
/>
86+
</Container>
87+
<Line />
88+
<Container
89+
px="sm"
90+
scrollY
91+
style={{
92+
maxHeight: "500px",
93+
}}
94+
>
95+
<Spacer y="md" />
96+
<ViewNFTsContent {...props} />
97+
</Container>
98+
</Container>
99+
);
100+
}
101+
102+
export function ViewNFTsContent(props: {
103+
supportedNFTs?: SupportedNFTs;
104+
client: ThirdwebClient;
105+
theme: Theme | "light" | "dark";
106+
connectLocale: ConnectLocale;
74107
}) {
75108
const activeAccount = useActiveAccount();
76109
const activeChain = useActiveWalletChain();
@@ -79,8 +112,6 @@ export function ViewNFTs(props: {
79112
return null;
80113
}
81114

82-
const { connectLocale } = props;
83-
84115
const nftList = useMemo(() => {
85116
const nfts = [];
86117
if (!props.supportedNFTs) return [];
@@ -106,60 +137,40 @@ export function ViewNFTs(props: {
106137
});
107138

108139
return (
109-
<Container
110-
style={{
111-
minHeight: "300px",
112-
}}
113-
>
114-
<Container p="lg">
115-
<ModalHeader
116-
title={connectLocale.viewFunds.viewNFTs}
117-
onBack={props.onBack}
118-
/>
119-
</Container>
120-
<Line />
140+
<>
121141
<Container
122-
px="sm"
123-
scrollY
124142
style={{
125-
maxHeight: "500px",
143+
display: "grid",
144+
gridTemplateColumns: "1fr 1fr",
145+
gap: "12px",
126146
}}
127147
>
128-
<Spacer y="md" />
129-
<Container
130-
style={{
131-
display: "grid",
132-
gridTemplateColumns: "1fr 1fr",
133-
gap: "12px",
134-
}}
135-
>
136-
{results.map((result, index) => {
137-
if (result.error) {
138-
console.error(result.error);
139-
return null;
140-
}
141-
return result.isLoading || !result.data ? (
142-
<Skeleton
143-
key={`${nftList[index]?.chain?.id}:${nftList[index]?.address}`}
144-
height="160px"
145-
width="160px"
148+
{results.map((result, index) => {
149+
if (result.error) {
150+
console.error(result.error);
151+
return null;
152+
}
153+
return result.isLoading || !result.data ? (
154+
<Skeleton
155+
key={`${nftList[index]?.chain?.id}:${nftList[index]?.address}`}
156+
height="150px"
157+
width="150px"
158+
/>
159+
) : (
160+
result.data.map((nft) => (
161+
<NftCard
162+
key={`${nft.chain.id}:${nft.address}:${nft.id}`}
163+
{...nft}
164+
client={props.client}
165+
chain={nft.chain}
166+
theme={props.theme}
146167
/>
147-
) : (
148-
result.data.map((nft) => (
149-
<NftCard
150-
key={`${nft.chain.id}:${nft.address}:${nft.id}`}
151-
{...nft}
152-
client={props.client}
153-
chain={nft.chain}
154-
theme={props.theme}
155-
/>
156-
))
157-
);
158-
})}
159-
</Container>
160-
<Spacer y="lg" />
168+
))
169+
);
170+
})}
161171
</Container>
162-
</Container>
172+
<Spacer y="lg" />
173+
</>
163174
);
164175
}
165176

@@ -188,8 +199,8 @@ function NftCard(
188199
display: "flex",
189200
flexShrink: 0,
190201
alignItems: "center",
191-
width: "160px",
192-
height: "160px",
202+
width: "150px",
203+
height: "150px",
193204
borderRadius: "8px",
194205
overflow: "hidden",
195206
background:

0 commit comments

Comments
 (0)