thirdweb-dev · MananTank · Jan 22, 2024 · Jan 18, 2024 · Jan 19, 2024 · Jan 19, 2024
diff --git a/.changeset/rich-badgers-raise.md b/.changeset/rich-badgers-raise.md
@@ -0,0 +1,11 @@
+---
+"@thirdweb-dev/react": patch
+---
+
+- Change ConnectWallet Details dropdown to a Modal with a few UI improvements.
+
+  - Because of this the `dropdownPosition` prop has been removed from `ConnectWallet` component
+
+- The "Request Testnet funds" button is now hidden by default in the new Modal UI.
+
+  - You can add it back by setting `hideTestnetFaucet` to `false` in the `ConnectWallet` component.
diff --git a/.changeset/weak-mayflies-cheat.md b/.changeset/weak-mayflies-cheat.md
@@ -0,0 +1,7 @@
+---
+"@thirdweb-dev/react-native": patch
+---
+
+- The "Request Testnet funds" button is now hidden by default in `ConnectWallet` Details Modal
+
+  - You can add it back by setting `hideTestnetFaucet` to `false` in the `ConnectWallet` component.
diff --git a/packages/react-native/src/evm/components/ConnectWallet.tsx b/packages/react-native/src/evm/components/ConnectWallet.tsx
@@ -50,7 +50,12 @@ export type ConnectWalletProps = {
   /**
    * Hide option to request testnet funds for testnets in dropdown
    *
-   * The default is `false`
+   * By default it is `true`, If you want to show the "Request Testnet funds" link when user is connected to a testnet, set this prop to `false`
+   *
+   * @example
+   * ```tsx
+   * <ConnectWallet hideTestnetFaucet={false} />
+   * ```
    */
   hideTestnetFaucet?: boolean;
 

diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx
@@ -220,6 +220,10 @@ export const ConnectWalletDetailsModal = ({
     hideSwitchToPersonalWallet,
   ]);
 
+  // by default we hide faucet link
+  const showFaucet =
+    hideTestnetFaucet === undefined ? false : !hideTestnetFaucet;
+
   return (
     <ThemeProvider>
       <TWModal isVisible={isVisible} onBackdropPress={onClosePress}>
@@ -288,7 +292,7 @@ export const ConnectWalletDetailsModal = ({
               </Text>
             </View>
             <NetworkButton chain={chain} enableSwitchModal={true} />
-            {!hideTestnetFaucet && chain?.testnet && chain?.faucets?.length ? (
+            {showFaucet && chain?.testnet && chain?.faucets?.length ? (
               <IconTextButton
                 mt="xs"
                 text={l.connect_wallet_details.request_testnet_funds}

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -114,7 +114,6 @@
     "@headlessui/react": "1.7.6",
     "@radix-ui/colors": "^0.1.9",
     "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-focus-scope": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.6",

diff --git a/packages/react/src/components/Tooltip.tsx b/packages/react/src/components/Tooltip.tsx
@@ -48,7 +48,7 @@ const TooltipContent = /* @__PURE__ */ (() =>
       background: theme.colors.tooltipBg,
       color: theme.colors.tooltipText,
       borderRadius: radius.sm,
-      padding: `${spacing.sm} ${spacing.md}`,
+      padding: `${spacing.xs} ${spacing.sm}`,
       fontSize: fontSize.sm,
       boxShadow: shadow.sm,
       userSelect: "none",

diff --git a/packages/react/src/design-system/index.ts b/packages/react/src/design-system/index.ts
@@ -71,7 +71,6 @@ export type Theme = {
     secondaryButtonHoverBg: string;
 
     modalBg: string;
-    dropdownBg: string;
 
     tooltipBg: string;
     tooltipText: string;
@@ -122,7 +121,6 @@ function createThemeObj(colors: ThemeColors): Theme {
       secondaryButtonHoverBg: colors.base4,
 
       modalBg: colors.base1,
-      dropdownBg: colors.base1,
 
       tooltipBg: colors.primaryText,
       tooltipText: colors.base1,

diff --git a/packages/react/src/evm/index.ts b/packages/react/src/evm/index.ts
@@ -30,8 +30,6 @@ export {
   type NetworkSelectorChainProps,
 } from "../wallet/ConnectWallet/NetworkSelector";
 
-export type { DropDownPosition } from "../wallet/ConnectWallet/Details";
-
 // UI components
 export * from "./components/MediaRenderer";
 export * from "./components/NftMedia";

diff --git a/packages/react/src/evm/locales/en.ts b/packages/react/src/evm/locales/en.ts
@@ -44,7 +44,7 @@ export function enDefault() {
       transactionHistory: "Transaction History",
       backupWallet: "Backup Wallet",
       guestWalletWarning:
-        "This is a temporary guest wallet. Backup if you don't want to lose access to it",
+        "This is a temporary guest wallet. Backup wallet if you don't want to lose access to it",
       switchTo: "Switch to", // Used in "Switch to <Wallet-Name>"
       connectedToSmartWallet: "Connected To Smart Wallet",
       confirmInWallet: "Confirm in wallet",

diff --git a/packages/react/src/wallet/ConnectWallet/ConnectWallet.tsx b/packages/react/src/wallet/ConnectWallet/ConnectWallet.tsx
@@ -1,5 +1,5 @@
 import { Theme, iconSize } from "../../design-system";
-import { ConnectedWalletDetails, type DropDownPosition } from "./Details";
+import { ConnectedWalletDetails } from "./Details";
 import {
   useAddress,
   useConnectionStatus,
@@ -117,22 +117,6 @@ export type ConnectWalletProps = {
    */
   detailsBtn?: () => JSX.Element;
 
-  /**
-   * When user connects the wallet using ConnectWallet Modal, a "Details Button" is rendered. Clicking on this button opens a dropdown which opens in a certain direction relative to the Details button.
-   *
-   * `dropdownPosition` prop allows you to customize the direction the dropdown should open relative to the Details button.
-   *
-   * ```tsx
-   * <ConnectWallet
-   *  dropdownPosition={{
-   *    side: "bottom", // or use:  "top" | "bottom" | "left" | "right"
-   *    align: "end", // or use:  "start" | "center" | "end";
-   *  }}
-   *  />
-   * ```
-   */
-  dropdownPosition?: DropDownPosition;
-
   /**
    * Enforce that users must sign in with their wallet using [auth](https://portal.thirdweb.com/wallets/auth) after connecting their wallet.
    *
@@ -169,9 +153,9 @@ export type ConnectWalletProps = {
   >;
 
   /**
-   * Hide the "Request Testnet funds" link in ConnectWallet dropdown which is shown when user is connected to a testnet.
+   * Hide the "Request Testnet funds" link in ConnectWallet Details Modal when user is connected to a testnet.
    *
-   * By default it is `false`
+   * By default it is `true`, If you want to show the "Request Testnet funds" link when user is connected to a testnet, set this prop to `false`
    *
    * @example
    * ```tsx
@@ -317,7 +301,7 @@ export type ConnectWalletProps = {
   hideSwitchToPersonalWallet?: boolean;
 
   /**
-   * Hide the "Disconnect Wallet" button in the ConnectWallet Dropdown.
+   * Hide the "Disconnect Wallet" button in the ConnectWallet Details Modal.
    *
    * By default it is `false`
    *
@@ -441,19 +425,6 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * />
  * ```
  *
- * ### dropdownPosition (optional)
- * When user connects the wallet using ConnectWallet Modal, a "Details Button" is rendered. Clicking on this button opens a dropdown which opens in a certain direction relative to the Details button.
- *
- * `dropdownPosition` prop allows you to customize the direction the dropdown should open relative to the Details button.
- *
- * ```tsx
- * <ConnectWallet
- *  dropdownPosition={{
- *    side: "bottom", // or use:  "top" | "bottom" | "left" | "right"
- *    align: "end", // or use:  "start" | "center" | "end";
- *  }}
- *  />
- * ```
  *
  * ### style (optional)
  * CSS styles to apply to the button element
@@ -462,9 +433,9 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * Customize the Network selector shown
  *
  * ### hideTestnetFaucet (optional)
- * Hide the "Request Testnet funds" link in ConnectWallet dropdown which is shown when user is connected to a testnet.
+ * Hide the "Request Testnet funds" link in ConnectWallet Details Modal when user is connected to a testnet. By default it is `true`
  *
- * By default it is `false`
+ * If you want to show the "Request Testnet funds" link when user is connected to a testnet, set this prop to `false`
  *
  * ```tsx
  * <ConnectWallet hideTestnetFaucet={false} />
@@ -581,7 +552,7 @@ const TW_CONNECT_WALLET = "tw-connect-wallet";
  * ```
  *
  * ### hideDisconnect
- * Hide the "Disconnect Wallet" button in the ConnectWallet dropdown
+ * Hide the "Disconnect Wallet" button in the ConnectWallet Details Modal
  *
  * By default it is `false`
  *
@@ -769,7 +740,6 @@ export function ConnectWallet(props: ConnectWalletProps) {
           <ConnectedWalletDetails
             theme={theme}
             networkSelector={props.networkSelector}
-            dropdownPosition={props.dropdownPosition}
             className={props.className}
             style={props.style}
             detailsBtn={props.detailsBtn}