Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
kien-ngo committed Oct 29, 2024
1 parent 68ce724 commit 336eb86
Show file tree
Hide file tree
Showing 7 changed files with 113 additions and 40 deletions.
15 changes: 15 additions & 0 deletions .changeset/seven-singers-bathe.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
"thirdweb": minor
---

Add option to customize ViewAssets tabs

When you click on "View Assets", by default the "Tokens" tab is shown first. If you want to show the "NFTs" tab first, set this prop to true
```tsx
<ConnectButton
client={client}
detailsModal={{
swapAssetTabsPositions: true,
}}
/>
```
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ export function RightSection(props: {

const connectButton = (
<ConnectButton
detailsModal={{ assetTabs: ["nft", "token"] }}
client={THIRDWEB_CLIENT}
autoConnect={false}
theme={themeObj}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export function StyledConnectButton(
}}
client={THIRDWEB_CLIENT}
theme={theme === "light" ? "light" : "dark"}
detailsModal={{ assetTabs: ["nft", "token"] }}
{...props}
/>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
import type { BuyWithCryptoStatus } from "../../../../pay/buyWithCrypto/getStatus.js";
import type { BuyWithFiatStatus } from "../../../../pay/buyWithFiat/getStatus.js";
import type { FiatProvider } from "../../../../pay/utils/commonTypes.js";
import type { AssetTabs } from "../../../../react/web/ui/ConnectWallet/screens/ViewAssets.js";
import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
import type { Prettify } from "../../../../utils/type-utils.js";
import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
Expand Down Expand Up @@ -311,6 +312,13 @@ export type ConnectButton_detailsModalOptions = {
* All wallet IDs included in this array will be hidden from wallet selection when connected.
*/
hiddenWallets?: WalletId[];

/**
* When you click on "View Assets", by default the "Tokens" tab is shown first.
* If you want to show the "NFTs" tab first, change the order of the asset tabs to: ["nft", "token"]
* Note: If an empty array is passed, the [View Funds] button will be hidden
*/
assetTabs?: AssetTabs[];
};

/**
Expand Down
14 changes: 14 additions & 0 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,20 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
* />
* ```
*
* ### Customizing the orders of the tabs in the [View Funds] screen
* When you click on "View Assets", by default the "Tokens" tab is shown first.
* If you want to show the "NFTs" tab first, change the order of the asset tabs to: ["nft", "token"]
* Note: If an empty array is passed, the [View Funds] button will be hidden
*
* ```tsx
* <ConnectButton
* client={client}
* detailsModal={{
* assetTabs: ["nft", "token"],
* }}
* />
* ```
*
* @param props
* Props for the `ConnectButton` component
*
Expand Down
47 changes: 31 additions & 16 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ import { ManageWalletScreen } from "./screens/ManageWalletScreen.js";
import { PrivateKey } from "./screens/PrivateKey.js";
import { ReceiveFunds } from "./screens/ReceiveFunds.js";
import { SendFunds } from "./screens/SendFunds.js";
import { ViewAssets } from "./screens/ViewAssets.js";
import { type AssetTabs, ViewAssets } from "./screens/ViewAssets.js";
import { ViewNFTs } from "./screens/ViewNFTs.js";
import { ViewTokens } from "./screens/ViewTokens.js";
import { WalletConnectReceiverScreen } from "./screens/WalletConnectReceiverScreen.js";
Expand Down Expand Up @@ -170,6 +170,7 @@ export const ConnectedWalletDetails: React.FC<{
chains={props.chains}
displayBalanceToken={props.detailsButton?.displayBalanceToken}
connectOptions={props.connectOptions}
assetTabs={props.detailsModal?.assetTabs}

Check warning on line 173 in packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx#L173

Added line #L173 was not covered by tests
/>,
);
}
Expand Down Expand Up @@ -284,6 +285,7 @@ function DetailsModal(props: {
chains: Chain[];
displayBalanceToken?: Record<number, string>;
connectOptions: DetailsModalConnectOptions | undefined;
assetTabs?: AssetTabs[];
}) {
const [screen, setScreen] = useState<WalletDetailsModalScreen>("main");
const { disconnect } = useDisconnect();
Expand Down Expand Up @@ -627,21 +629,25 @@ function DetailsModal(props: {
</MenuButton>

{/* View Funds */}
<MenuButton
onClick={() => {
setScreen("view-assets");
}}
style={{
fontSize: fontSize.sm,
}}
>
<CoinsIcon size={iconSize.md} />
<Text color="primaryText">
{props.supportedNFTs
? locale.viewFunds.viewAssets
: locale.viewFunds.title}
</Text>
</MenuButton>
{/* Hide the View Funds button if the assetTabs props is set to an empty array */}
{!props.assetTabs ||
(props.assetTabs?.length && (
<MenuButton
onClick={() => {
setScreen("view-assets");
}}
style={{
fontSize: fontSize.sm,
}}

Check warning on line 641 in packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx#L633-L641

Added lines #L633 - L641 were not covered by tests
>
<CoinsIcon size={iconSize.md} />
<Text color="primaryText">
{props.supportedNFTs
? locale.viewFunds.viewAssets
: locale.viewFunds.title}
</Text>
</MenuButton>

Check warning on line 649 in packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx#L643-L649

Added lines #L643 - L649 were not covered by tests
))}

{/* Manage Wallet */}
<MenuButton
Expand Down Expand Up @@ -799,6 +805,7 @@ function DetailsModal(props: {
setScreen={setScreen}
client={client}
connectLocale={locale}
assetTabs={props.detailsModal?.assetTabs}

Check warning on line 808 in packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx#L808

Added line #L808 was not covered by tests
/>
);
} else {
Expand Down Expand Up @@ -1458,6 +1465,13 @@ export type UseWalletDetailsModalOptions = {
* By default the "Buy Funds" button is shown.
*/
hideBuyFunds?: boolean;

/**
* When you click on "View Assets", by default the "Tokens" tab is shown first.
* If you want to show the "NFTs" tab first, change the order of the asset tabs to: ["nft", "token"]
* Note: If an empty array is passed, the [View Funds] button will be hidden
*/
assetTabs?: AssetTabs[];
};

/**
Expand Down Expand Up @@ -1515,6 +1529,7 @@ export function useWalletDetailsModal() {
hideBuyFunds: props.hideBuyFunds,
hideReceiveFunds: props.hideReceiveFunds,
hideSendFunds: props.hideSendFunds,
assetTabs: props.assetTabs,

Check warning on line 1532 in packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx#L1532

Added line #L1532 was not covered by tests
}}
displayBalanceToken={props.displayBalanceToken}
theme={props.theme || "dark"}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from "react";
import { useMemo, useState } from "react";
import type { ThirdwebClient } from "../../../../../client/client.js";
import { type Theme, iconSize } from "../../../../core/design-system/index.js";
import type {
Expand All @@ -15,6 +15,29 @@ import { ViewNFTsContent } from "./ViewNFTs.js";
import { ViewTokensContent } from "./ViewTokens.js";
import type { WalletDetailsModalScreen } from "./types.js";

/**
* @internal
*/
export type AssetTabs = "token" | "nft";

const TokenTab = {
label: (
<span className="flex gap-2">
<CoinsIcon size={iconSize.sm} /> Tokens
</span>
),
value: "Tokens",
};

const NftTab = {
label: (
<span className="flex gap-2">
<ImageIcon size={iconSize.sm} /> NFTs
</span>
),
value: "NFTs",
};

/**
* @internal
*/
Expand All @@ -26,10 +49,27 @@ export function ViewAssets(props: {
setScreen: (screen: WalletDetailsModalScreen) => void;
client: ThirdwebClient;
connectLocale: ConnectLocale;
assetTabs?: AssetTabs[];
}) {
const [activeTab, setActiveTab] = useState("Tokens");
const { connectLocale } = props;

const options = useMemo(() => {
if (!props.assetTabs) {
return [TokenTab, NftTab];
}
if (!props.assetTabs.length) {
return [];
}
const tabs = [];
for (const item of props.assetTabs) {
if (item === "token") {
tabs.push(TokenTab);
} else if (item === "nft") {
tabs.push(NftTab);
}
}
return tabs;
}, [props.assetTabs]);

Check warning on line 72 in packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx#L56-L72

Added lines #L56 - L72 were not covered by tests
return (
<Container
animate="fadein"
Expand All @@ -52,28 +92,7 @@ export function ViewAssets(props: {
}}
>
<Spacer y="md" />
<Tabs
options={[
{
label: (
<span className="flex gap-2">
<CoinsIcon size={iconSize.sm} /> Tokens
</span>
),
value: "Tokens",
},
{
label: (
<span className="flex gap-2">
<ImageIcon size={iconSize.sm} /> NFTs
</span>
),
value: "NFTs",
},
]}
selected={activeTab}
onSelect={setActiveTab}
>
<Tabs options={options} selected={activeTab} onSelect={setActiveTab}>

Check warning on line 95 in packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L95 was not covered by tests
<Container
scrollY
style={{
Expand Down

0 comments on commit 336eb86

Please sign in to comment.