From 20663a1b6676d06df3d17a013a973741991e6d66 Mon Sep 17 00:00:00 2001 From: Kien Ngo Date: Tue, 22 Oct 2024 19:17:21 +0700 Subject: [PATCH] Update --- .changeset/seven-singers-bathe.md | 15 ++++++ .../hooks/connection/ConnectButtonProps.ts | 6 +++ .../web/ui/ConnectWallet/ConnectButton.tsx | 13 +++++ .../react/web/ui/ConnectWallet/Details.tsx | 10 ++++ .../ui/ConnectWallet/screens/ViewAssets.tsx | 51 ++++++++++--------- 5 files changed, 71 insertions(+), 24 deletions(-) create mode 100644 .changeset/seven-singers-bathe.md diff --git a/.changeset/seven-singers-bathe.md b/.changeset/seven-singers-bathe.md new file mode 100644 index 00000000000..331130e1585 --- /dev/null +++ b/.changeset/seven-singers-bathe.md @@ -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 + +``` \ No newline at end of file diff --git a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts b/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts index 2cab2aeac06..655c9e3b4a3 100644 --- a/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts +++ b/packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts @@ -311,6 +311,12 @@ 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, set this prop to `true` + */ + swapAssetTabsPositions?: boolean; }; /** diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx index ab7c3e27a24..49e2511334c 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx @@ -247,6 +247,19 @@ 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, set this prop to `true` + * + * ```tsx + * + * ``` + * * @param props * Props for the `ConnectButton` component * diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx index 923ba456764..25c01876ee3 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx @@ -170,6 +170,7 @@ export const ConnectedWalletDetails: React.FC<{ chains={props.chains} displayBalanceToken={props.detailsButton?.displayBalanceToken} connectOptions={props.connectOptions} + swapAssetTabsPositions={props.detailsModal?.swapAssetTabsPositions} />, ); } @@ -286,6 +287,7 @@ function DetailsModal(props: { chains: Chain[]; displayBalanceToken?: Record; connectOptions: DetailsModalConnectOptions | undefined; + swapAssetTabsPositions?: boolean; }) { const [screen, setScreen] = useState("main"); const { disconnect } = useDisconnect(); @@ -801,6 +803,7 @@ function DetailsModal(props: { setScreen={setScreen} client={client} connectLocale={locale} + swapAssetTabsPositions={props.detailsModal?.swapAssetTabsPositions} /> ); } else { @@ -1460,6 +1463,12 @@ 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, set this prop to `true` + */ + swapAssetTabsPositions?: boolean; }; /** @@ -1517,6 +1526,7 @@ export function useWalletDetailsModal() { hideBuyFunds: props.hideBuyFunds, hideReceiveFunds: props.hideReceiveFunds, hideSendFunds: props.hideSendFunds, + swapAssetTabsPositions: props.swapAssetTabsPositions, }} displayBalanceToken={props.displayBalanceToken} theme={props.theme || "dark"} diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx index fc62951418e..5052a0636e8 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/ViewAssets.tsx @@ -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 { @@ -26,10 +26,34 @@ export function ViewAssets(props: { setScreen: (screen: WalletDetailsModalScreen) => void; client: ThirdwebClient; connectLocale: ConnectLocale; + swapAssetTabsPositions?: boolean; }) { const [activeTab, setActiveTab] = useState("Tokens"); const { connectLocale } = props; - + const options = useMemo(() => { + const tabs = [ + { + label: ( + + Tokens + + ), + value: "Tokens", + }, + { + label: ( + + NFTs + + ), + value: "NFTs", + }, + ]; + if (props.swapAssetTabsPositions) { + tabs.reverse(); + } + return tabs; + }, [props.swapAssetTabsPositions]); return ( - - Tokens - - ), - value: "Tokens", - }, - { - label: ( - - NFTs - - ), - value: "NFTs", - }, - ]} - selected={activeTab} - onSelect={setActiveTab} - > +