Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SDK] Options to custonize ViewAssets's tabs #5126

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .changeset/mean-mails-exercise.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
"thirdweb": minor
---

Allow to customize the display order of Asset tabs

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"],
}}
/>
```
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
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
46 changes: 30 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 { 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 @@
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 @@
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,24 @@
</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 === undefined || props.assetTabs.length) && (
<MenuButton
onClick={() => {
setScreen("view-assets");
}}
style={{
fontSize: fontSize.sm,
}}

Check warning on line 640 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-L640

Added lines #L633 - L640 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 648 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#L642-L648

Added lines #L642 - L648 were not covered by tests
)}

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

Check warning on line 807 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#L807

Added line #L807 was not covered by tests
/>
);
} else {
Expand Down Expand Up @@ -1458,6 +1464,13 @@
* 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 +1528,7 @@
hideBuyFunds: props.hideBuyFunds,
hideReceiveFunds: props.hideReceiveFunds,
hideSendFunds: props.hideSendFunds,
assetTabs: props.assetTabs,

Check warning on line 1531 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#L1531

Added line #L1531 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 { 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,9 +49,29 @@
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 71 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#L55-L71

Added lines #L55 - L71 were not covered by tests

// Since `options` is now a dynamic value, the default active tab is set to the value of the first tab in `options`
const [activeTab, setActiveTab] = useState(options[0]?.value || "Tokens");

Check warning on line 74 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#L74

Added line #L74 was not covered by tests

return (
<Container
Expand All @@ -52,28 +95,7 @@
}}
>
<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 98 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#L98

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