From b947f4db9c7e6051210acb61df3c63b5a06ede53 Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Thu, 18 Jan 2024 23:33:23 +0530 Subject: [PATCH 1/8] Convert ConnectWallet Details Dropdown to Modal --- .changeset/rich-badgers-raise.md | 5 + packages/react/package.json | 1 - packages/react/src/design-system/index.ts | 2 - packages/react/src/evm/index.ts | 2 - packages/react/src/evm/locales/en.ts | 2 +- .../wallet/ConnectWallet/ConnectWallet.tsx | 40 +- .../src/wallet/ConnectWallet/Details.tsx | 695 ++++++++---------- .../wallet/ConnectWallet/NetworkSelector.tsx | 329 +++++---- .../src/wallet/ConnectWallet/ReceiveFunds.tsx | 4 +- .../src/wallet/ConnectWallet/SendFunds.tsx | 10 +- .../wallet/ConnectWallet/WalletSelector.tsx | 7 +- .../wallet/ConnectWallet/icons/ExitIcon.tsx | 18 - pnpm-lock.yaml | 68 -- 13 files changed, 522 insertions(+), 661 deletions(-) create mode 100644 .changeset/rich-badgers-raise.md delete mode 100644 packages/react/src/wallet/ConnectWallet/icons/ExitIcon.tsx diff --git a/.changeset/rich-badgers-raise.md b/.changeset/rich-badgers-raise.md new file mode 100644 index 00000000000..3db5c12acf3 --- /dev/null +++ b/.changeset/rich-badgers-raise.md @@ -0,0 +1,5 @@ +--- +"@thirdweb-dev/react": patch +--- + +Convert ConnectWallet Details dropdown to a Modal diff --git a/packages/react/package.json b/packages/react/package.json index 56f489ef1b5..9ccd97d9c2d 100644 --- 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/design-system/index.ts b/packages/react/src/design-system/index.ts index 2dce9f1940f..acae16d0e04 100644 --- 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 index 6d94e1ed7c7..d14a3678bf4 100644 --- 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 index 9830a7cdb0d..7371718c6ec 100644 --- 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 " 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 index bc3ea2f0135..1918c4d6ebd 100644 --- 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 - * - * ``` - */ - dropdownPosition?: DropDownPosition; - /** * Enforce that users must sign in with their wallet using [auth](https://portal.thirdweb.com/wallets/auth) after connecting their wallet. * @@ -169,7 +153,7 @@ 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 which is shown when user is connected to a testnet. * * By default it is `false` * @@ -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 - * - * ``` * * ### style (optional) * CSS styles to apply to the button element @@ -462,7 +433,7 @@ 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 which is shown when user is connected to a testnet. * * By default it is `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) { void; style?: React.CSSProperties; networkSelector?: Omit< @@ -128,13 +127,13 @@ export const ConnectedWalletDetails: React.FC<{ >(undefined); // modals - const [showNetworkSelector, setShowNetworkSelector] = useState(false); - const [showExportModal, setShowExportModal] = useState(false); - const [showSendModal, setShowSendModal] = useState(false); - const [showReceiveModal, setShowReceiveModal] = useState(false); + // const [showNetworkSelector, setShowNetworkSelector] = useState(false); + // const [showExportModal, setShowExportModal] = useState(false); + // const [showSendModal, setShowSendModal] = useState(false); + // const [showReceiveModal, setShowReceiveModal] = useState(false); + const [screen, setScreen] = useState("main"); - // dropdown - const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isOpen, setIsOpen] = useState(false); const sdk = useSDK(); @@ -152,7 +151,7 @@ export const ConnectedWalletDetails: React.FC<{ const isActuallyMetaMask = activeWallet && activeWallet instanceof MetaMaskWallet; - const shortAddress = address ? shortenString(address) : ""; + const shortAddress = address ? shortenString(address, false) : ""; const addressOrENS = ensQuery.data?.ens || shortAddress; const avatarUrl = ensQuery.data?.avatarUrl; @@ -183,6 +182,14 @@ export const ConnectedWalletDetails: React.FC<{ } }, [activeWallet]); + useEffect(() => { + if (!isOpen) { + onModalUnmount(() => { + setScreen("main"); + }); + } + }, [isOpen]); + const walletIconUrl = overrideWalletIconUrl || activeWalletConfig?.meta.iconURL || ""; const avatarOrWalletIconUrl = avatarUrl || walletIconUrl; @@ -255,8 +262,7 @@ export const ConnectedWalletDetails: React.FC<{ type="button" disabled={disableSwitchChain} onClick={() => { - setIsDropdownOpen(false); - setShowNetworkSelector(true); + setScreen("network-switcher"); }} >
- + {chain?.name || `Unknown chain #${walletChainId}`} - {/* Balance and Account Address */} - - + + + {/* Balance and Account Address */} + + -
- {/* row 1 */} - -
- - {addressOrENS} - - + {/* row 1 */} + +
- - -
- - {!props.hideDisconnect && ( - - { - disconnect(); - props.onDisconnect(); + + {addressOrENS} + + - - - - )} - + + +
+ - {/* row 2 */} - - {" "} - {balanceQuery.data ? ( - Number(balanceQuery.data.displayValue).toFixed(3) - ) : ( - - )}{" "} - {balanceQuery.data?.symbol}{" "} - -
- + + + {/* row 2 */} + + {" "} + {balanceQuery.data ? ( + Number(balanceQuery.data.displayValue).toFixed(3) + ) : ( + + )}{" "} + {balanceQuery.data?.symbol}{" "} + + + - + - - + + - {/* Send and Receive */} - - + onClick={() => { + setScreen("send"); + }} + > + + {locale.send} + - + + - - - {/* Network Switcher */} -
- {locale.currentNetwork} - - {networkSwitcherButton} -
- - - {/* Switch to Personal Wallet for Safe */} - {personalWallet && - personalWalletConfig && - !props.hideSwitchToPersonalWallet && ( + + {/* Network Switcher */} + + {networkSwitcherButton} + + {/* Switch to Personal Wallet for Safe */} + {personalWallet && + personalWalletConfig && + !props.hideSwitchToPersonalWallet && ( + + )} + + {/* Switch to Wrapper Wallet */} + {wrapperWalletConfig && wrapperWallet && ( )} - {/* Switch to Wrapper Wallet */} - {wrapperWalletConfig && wrapperWallet && ( - - )} + {/* Switch Account for Metamask */} + {isActuallyMetaMask && + activeWalletConfig && + activeWalletConfig.isInstalled && + activeWalletConfig.isInstalled() && + !isMobile() && ( + { + (activeWallet as MetaMaskWallet).switchAccount(); + setIsOpen(false); + }} + > + + {locale.switchAccount} + + )} - {/* Switch Account for Metamask */} - {isActuallyMetaMask && - activeWalletConfig && - activeWalletConfig.isInstalled && - activeWalletConfig.isInstalled() && - !isMobile() && ( - { - (activeWallet as MetaMaskWallet).switchAccount(); - setIsDropdownOpen(false); - }} - style={{ - fontSize: fontSize.sm, - }} - > - - - - {locale.switchAccount} - - )} + {/* Request Testnet funds */} + {!props.hideTestnetFaucet && + ((chain?.faucets && chain.faucets.length > 0) || + chain?.chainId === Localhost.chainId) && ( + { + if (chain.chainId === Localhost.chainId) { + e.preventDefault(); + setIsOpen(false); + await sdk?.wallet.requestFunds(10); + await balanceQuery.refetch(); + } + }} + style={{ + textDecoration: "none", + color: "inherit", + }} + > + + + + {locale.requestTestnetFunds} + + )} - {/* Request Testnet funds */} - {!props.hideTestnetFaucet && - ((chain?.faucets && chain.faucets.length > 0) || - chain?.chainId === Localhost.chainId) && ( + {/* Explorer link */} + {chain?.explorers && chain.explorers[0]?.url && ( { - if (chain.chainId === Localhost.chainId) { - e.preventDefault(); - setIsDropdownOpen(false); - await sdk?.wallet.requestFunds(10); - await balanceQuery.refetch(); - } - }} style={{ textDecoration: "none", color: "inherit", - fontSize: fontSize.sm, }} > - - + + - {locale.requestTestnetFunds} + {locale.transactionHistory} )} - {/* Explorer link */} - {chain?.explorers && chain.explorers[0]?.url && ( - - - - - {locale.transactionHistory} - - )} + {/* Export Wallet */} + {activeWallet?.walletId === walletIds.localWallet && ( +
+ { + setScreen("export"); + }} + style={{ + fontSize: fontSize.sm, + }} + > + + {locale.backupWallet} + +
+ )} + + + + - {/* Export Wallet */} - {activeWallet?.walletId === walletIds.localWallet && ( -
+ {props.hideDisconnect !== true && ( + + + + { - setShowExportModal(true); - setIsDropdownOpen(false); - }} - style={{ - fontSize: fontSize.sm, + disconnect(); + props.onDisconnect(); }} > - - - - {locale.backupWallet}{" "} + + {locale.disconnectWallet} - + + + + )} + + {activeWallet?.walletId === walletIds.localWallet && ( + <> + + {locale.guestWalletWarning} -
- )} - + + + )} ); - return ( - <> - {isMobile() ? ( - - {content} - - ) : ( - - {trigger} - - - {content} - - - - )} - - setShowNetworkSelector(false)} + onClose={() => { + setIsOpen(false); + }} + onBack={() => { + setScreen("main"); + }} /> + ); + } else if (screen === "export") { + content = ( + { + setIsOpen(false); + }} + walletAddress={address} + walletInstance={activeWallet} + onBack={() => { + setScreen("main"); + }} + /> + ); + } else if (screen === "send") { + content = ( + { + setScreen("main"); + }} + /> + ); + } else if (screen === "receive") { + content = ( + { + setScreen("main"); + }} + /> + ); + } - - { - setShowExportModal(false); - }} - walletAddress={address} - walletInstance={activeWallet} - /> - - - - - - - - - - + return ( + + {content} + ); }; -const dropdownContentFade = keyframes` - from { - opacity: 0; - transform: scale(0.95); - } - to { - opacity: 1; - transform: scale(1); - } -`; - -const DropDownContent = /* @__PURE__ */ (() => - styled(DropdownMenu.Content)(() => { - const theme = useCustomTheme(); - return { - width: "360px", - boxSizing: "border-box", - maxWidth: "100%", - borderRadius: radius.lg, - padding: spacing.lg, - animation: `${dropdownContentFade} 400ms cubic-bezier(0.16, 1, 0.3, 1)`, - willChange: "transform, opacity", - border: `1px solid ${theme.colors.borderColor}`, - backgroundColor: theme.colors.dropdownBg, - "--bg": theme.colors.dropdownBg, - zIndex: 1000000, - lineHeight: "normal", - }; - }))(); - const WalletInfoButton = /* @__PURE__ */ StyledButton(() => { const theme = useCustomTheme(); return { @@ -688,15 +657,6 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton(() => { }; }); -const DropdownLabel = /* @__PURE__ */ StyledLabel(() => { - const theme = useCustomTheme(); - return { - fontSize: fontSize.sm, - color: theme.colors.secondaryText, - fontWeight: 500, - }; -}); - const MenuButton = /* @__PURE__ */ StyledButton(() => { const theme = useCustomTheme(); return { @@ -704,7 +664,7 @@ const MenuButton = /* @__PURE__ */ StyledButton(() => { padding: `${spacing.sm} ${spacing.sm}`, borderRadius: radius.md, backgroundColor: "transparent", - border: `1px solid ${theme.colors.borderColor}`, + // border: `1px solid ${theme.colors.borderColor}`, boxSizing: "border-box", display: "flex", alignItems: "center", @@ -712,14 +672,17 @@ const MenuButton = /* @__PURE__ */ StyledButton(() => { cursor: "pointer", fontSize: fontSize.md, fontWeight: 500, - color: `${theme.colors.primaryText} !important`, + color: theme.colors.secondaryText, gap: spacing.sm, WebkitTapHighlightColor: "transparent", lineHeight: 1.3, - "&:not([disabled]):hover": { - transition: "box-shadow 250ms ease, border-color 250ms ease", - border: `1px solid ${theme.colors.accentText}`, - boxShadow: `0 0 0 1px ${theme.colors.accentText}`, + transition: "background-color 200ms ease, transform 200ms ease", + "&:hover": { + backgroundColor: theme.colors.walletSelectorButtonHoverBg, + transform: "scale(1.01)", + svg: { + color: theme.colors.accentText, + }, }, "&[disabled]": { cursor: "not-allowed", @@ -727,10 +690,11 @@ const MenuButton = /* @__PURE__ */ StyledButton(() => { display: "none", }, }, - "&[disabled]:hover": { - transition: "box-shadow 250ms ease, border-color 250ms ease", - border: `1px solid ${theme.colors.danger}`, - boxShadow: `0 0 0 1px ${theme.colors.danger}`, + svg: { + color: theme.colors.secondaryText, + }, + "&[data-variant='danger']:hover svg": { + color: theme.colors.danger + "!important", }, }; }); @@ -746,19 +710,6 @@ export const StyledChevronRightIcon = /* @__PURE__ */ styled( }; }); -const DisconnectIconButton = /* @__PURE__ */ styled(IconButton)(() => { - const theme = useCustomTheme(); - return { - marginRight: `-${spacing.xxs}`, - marginLeft: "auto", - color: theme.colors.secondaryText, - "&:hover": { - color: theme.colors.danger, - background: "none", - }, - }; -}); - function WalletSwitcher({ wallet, name, @@ -779,10 +730,10 @@ function WalletSwitcher({ fontSize: fontSize.sm, }} > - - - - {locale.switchTo} {name} + + + {locale.switchTo} {name} + ); } diff --git a/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx b/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx index e907a06c417..504e888f1d4 100644 --- a/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx +++ b/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx @@ -24,7 +24,7 @@ import type { Chain } from "@thirdweb-dev/chains"; import Fuse from "fuse.js"; import { Button } from "../../components/buttons"; import { useEffect } from "react"; -import { Container, Line } from "../../components/basic"; +import { Container, Line, ModalHeader } from "../../components/basic"; import { Text } from "../../components/text"; import { ModalTitle } from "../../components/modalElements"; import { @@ -153,10 +153,38 @@ const fuseConfig = { * @internal */ export function NetworkSelector(props: NetworkSelectorProps) { - const [searchTerm, setSearchTerm] = useState(""); - const deferredSearchTerm = useDeferredValue(searchTerm); const themeFromContext = useCustomTheme(); const theme = props.theme || themeFromContext || "dark"; + const { onClose } = props; + + return ( + + { + if (!value && onClose) { + onClose(); + } + }} + style={{ + paddingBottom: props.onCustomClick ? spacing.md : "0px", + }} + > + + + + ); +} + +export function NetworkSelectorContent( + props: NetworkSelectorProps & { + onBack?: () => void; + }, +) { + const [searchTerm, setSearchTerm] = useState(""); + const deferredSearchTerm = useDeferredValue(searchTerm); + const supportedChains = useSupportedChains(); const chains = props.chains || supportedChains; const locale = useTWLocale().connectWallet.networkSelector; @@ -222,177 +250,166 @@ export function NetworkSelector(props: NetworkSelectorProps) { ); return ( - - { - if (!value && onClose) { - onClose(); - } - }} - style={{ - paddingBottom: props.onCustomClick ? spacing.md : "0px", - }} - > - - - {locale.title} - + + + {props.onBack ? ( + + ) : ( + {locale.title} + )} + + + + + + + {locale.allNetworks} + + + {locale.mainnets} + + + {locale.testnets} + + + - + + + {chains.length > 10 && ( + <> - - - {locale.allNetworks} - - - {locale.mainnets} - - - {locale.testnets} - - - - - + - {chains.length > 10 && ( - <> - - {/* Search */} + { + setSearchTerm(e.target.value); + }} + /> + {/* Searching Spinner */} + {deferredSearchTerm !== searchTerm && (
- - - { - setSearchTerm(e.target.value); - }} - /> - {/* Searching Spinner */} - {deferredSearchTerm !== searchTerm && ( -
- -
- )} +
- - - - )} - - - - - + )} + + + + + )} + + + + + + + + + + + + + + - + + + - - {onCustomClick && ( - <> - - - - - - )} - - - - + + )} + + ); } diff --git a/packages/react/src/wallet/ConnectWallet/ReceiveFunds.tsx b/packages/react/src/wallet/ConnectWallet/ReceiveFunds.tsx index d54b6861335..7dfe21bfab6 100644 --- a/packages/react/src/wallet/ConnectWallet/ReceiveFunds.tsx +++ b/packages/react/src/wallet/ConnectWallet/ReceiveFunds.tsx @@ -12,14 +12,14 @@ import { shortenString } from "@thirdweb-dev/react-core"; import { StyledButton } from "../../design-system/elements"; import { useCustomTheme } from "../../design-system/CustomThemeProvider"; -export function ReceiveFunds(props: { iconUrl: string }) { +export function ReceiveFunds(props: { iconUrl: string; onBack: () => void }) { const address = useAddress(); const { hasCopied, onCopy } = useClipboard(address || ""); const locale = useTWLocale().connectWallet.receiveFundsScreen; return ( - + diff --git a/packages/react/src/wallet/ConnectWallet/SendFunds.tsx b/packages/react/src/wallet/ConnectWallet/SendFunds.tsx index 7ad246d8923..7870c627fb4 100644 --- a/packages/react/src/wallet/ConnectWallet/SendFunds.tsx +++ b/packages/react/src/wallet/ConnectWallet/SendFunds.tsx @@ -16,7 +16,6 @@ import { Skeleton } from "../../components/Skeleton"; import { useMutation } from "@tanstack/react-query"; import { Spinner } from "../../components/Spinner"; import { TransactionResult } from "@thirdweb-dev/sdk"; -import { ModalTitle } from "../../components/modalElements"; import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons"; import { utils } from "ethers"; import { SupportedTokens, TokenInfo, defaultTokens } from "./defaultTokens"; @@ -31,7 +30,10 @@ import { useCustomTheme } from "../../design-system/CustomThemeProvider"; type TXError = Error & { data?: { message?: string } }; -export function SendFunds(props: { supportedTokens: SupportedTokens }) { +export function SendFunds(props: { + supportedTokens: SupportedTokens; + onBack: () => void; +}) { const [screen, setScreen] = useState<"base" | "tokenSelector">("base"); const chainId = useChainId(); @@ -81,6 +83,7 @@ export function SendFunds(props: { supportedTokens: SupportedTokens }) { setReceiverAddress={setReceiverAddress} amount={amount} setAmount={setAmount} + onBack={props.onBack} /> ); } @@ -92,6 +95,7 @@ export function SendFundsForm(props: { setReceiverAddress: (value: string) => void; amount: string; setAmount: (value: string) => void; + onBack: () => void; }) { const locale = useTWLocale().connectWallet.sendFundsScreen; const tokenAddress = props.token?.address; @@ -204,7 +208,7 @@ export function SendFundsForm(props: { return ( - {locale.title} +
{/* Header */} {!modalConfig.isEmbed && ( - + {isWalletGroupExpanded ? ( { - return ( - - - - ); -}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b6b7fe02d93..037df526f23 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -593,9 +593,6 @@ importers: '@radix-ui/react-dialog': specifier: ^1.0.5 version: 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-dropdown-menu': - specifier: ^2.0.5 - version: 2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-focus-scope': specifier: ^1.0.4 version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) @@ -10678,33 +10675,6 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@radix-ui/react-dropdown-menu@2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - dependencies: - '@babel/runtime': 7.23.8 - '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.17)(react@18.2.0) - '@radix-ui/react-context': 1.0.1(@types/react@18.2.17)(react@18.2.0) - '@radix-ui/react-id': 1.0.1(@types/react@18.2.17)(react@18.2.0) - '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.17)(react@18.2.0) - '@types/react': 18.2.17 - '@types/react-dom': 18.2.7 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.17)(react@18.2.0): resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==} peerDependencies: @@ -10788,44 +10758,6 @@ packages: react: 18.2.0 dev: false - /@radix-ui/react-menu@2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 - react-dom: ^16.8 || ^17.0 || ^18.0 - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - dependencies: - '@babel/runtime': 7.23.8 - '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.17)(react@18.2.0) - '@radix-ui/react-context': 1.0.1(@types/react@18.2.17)(react@18.2.0) - '@radix-ui/react-direction': 1.0.1(@types/react@18.2.17)(react@18.2.0) - '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.17)(react@18.2.0) - '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-id': 1.0.1(@types/react@18.2.17)(react@18.2.0) - '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-slot': 1.0.2(@types/react@18.2.17)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.17)(react@18.2.0) - '@types/react': 18.2.17 - '@types/react-dom': 18.2.7 - aria-hidden: 1.2.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-remove-scroll: 2.5.5(@types/react@18.2.17)(react@18.2.0) - dev: false - /@radix-ui/react-popover@1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.17)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-cZ4defGpkZ0qTRtlIBzJLSzL6ht7ofhhW4i1+pkemjV1IKXm0wgCRnee154qlV6r9Ttunmh2TNZhMfV2bavUyA==} peerDependencies: From 72898b46da859d41c92fd13a0ad843a49ffca6bf Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Fri, 19 Jan 2024 20:35:27 +0530 Subject: [PATCH 2/8] Improved NetworkSelector for >100 chains --- .../wallet/ConnectWallet/NetworkSelector.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx b/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx index 504e888f1d4..cc9888c4331 100644 --- a/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx +++ b/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx @@ -33,6 +33,7 @@ import { } from "../../design-system/CustomThemeProvider"; import { useTWLocale } from "../../evm/providers/locale-provider"; import { StyledButton, StyledP, StyledUl } from "../../design-system/elements"; +import { Skeleton } from "../../components/Skeleton"; export type NetworkSelectorChainProps = { /** @@ -550,22 +551,21 @@ const NetworkList = /* @__PURE__ */ memo(function NetworkList(props: { useEffect(() => { if (isLoading) { - setIsLoading(false); + setTimeout(() => { + requestAnimationFrame(() => { + setIsLoading(false); + }); + }, 150); } }, [isLoading]); if (isLoading) { return ( - - {/* Don't put a spinner here - it's gonna freeze */} - {locale.loading} - + + {new Array(10).fill(0).map((_, i) => ( + + ))} + ); } From b247643a4d85a29ecf645933cb5900d7ff7175d2 Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Fri, 19 Jan 2024 20:41:37 +0530 Subject: [PATCH 3/8] Fix padding --- .../src/wallet/ConnectWallet/NetworkSelector.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx b/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx index cc9888c4331..b759376bc65 100644 --- a/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx +++ b/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx @@ -561,11 +561,13 @@ const NetworkList = /* @__PURE__ */ memo(function NetworkList(props: { if (isLoading) { return ( - - {new Array(10).fill(0).map((_, i) => ( - - ))} - + + + {new Array(10).fill(0).map((_, i) => ( + + ))} + + ); } From 0a50e7f4cc4a7bbac95c32de830faf8110343db6 Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Mon, 22 Jan 2024 22:27:11 +0530 Subject: [PATCH 4/8] centered UI --- packages/react/src/components/Tooltip.tsx | 2 +- .../src/wallet/ConnectWallet/Details.tsx | 159 ++++++++---------- 2 files changed, 69 insertions(+), 92 deletions(-) diff --git a/packages/react/src/components/Tooltip.tsx b/packages/react/src/components/Tooltip.tsx index b00208d32e8..3e58b4019d5 100644 --- 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/wallet/ConnectWallet/Details.tsx b/packages/react/src/wallet/ConnectWallet/Details.tsx index c1431fb3f86..a6eeb051261 100644 --- a/packages/react/src/wallet/ConnectWallet/Details.tsx +++ b/packages/react/src/wallet/ConnectWallet/Details.tsx @@ -4,7 +4,6 @@ import { Img } from "../../components/Img"; import { Modal } from "../../components/Modal"; import { Skeleton } from "../../components/Skeleton"; import { Spacer } from "../../components/Spacer"; -import { ToolTip } from "../../components/Tooltip"; import { Button, IconButton } from "../../components/buttons"; import { fontSize, @@ -126,13 +125,7 @@ export const ConnectedWalletDetails: React.FC<{ string | undefined >(undefined); - // modals - // const [showNetworkSelector, setShowNetworkSelector] = useState(false); - // const [showExportModal, setShowExportModal] = useState(false); - // const [showSendModal, setShowSendModal] = useState(false); - // const [showReceiveModal, setShowReceiveModal] = useState(false); const [screen, setScreen] = useState("main"); - const [isOpen, setIsOpen] = useState(false); const sdk = useSDK(); @@ -257,13 +250,14 @@ export const ConnectedWalletDetails: React.FC<{ ); - let networkSwitcherButton = ( + const networkSwitcherButton = ( { setScreen("network-switcher"); }} + data-variant="primary" >
); - if (!disableSwitchChain) { - networkSwitcherButton = ( - {networkSwitcherButton} - ); - } - let content = (
- - - {/* Balance and Account Address */} - - + + + + + -
+ + {addressOrENS} + + - {/* row 1 */} - -
- - {addressOrENS} - - - - -
- - - - - {/* row 2 */} - - {" "} - {balanceQuery.data ? ( - Number(balanceQuery.data.displayValue).toFixed(3) - ) : ( - - )}{" "} - {balanceQuery.data?.symbol}{" "} - -
- + + +
+ + + + {/* Balance */} + + {" "} + {balanceQuery.data ? ( + Number(balanceQuery.data.displayValue).toFixed(3) + ) : ( + + )}{" "} + {balanceQuery.data?.symbol}{" "} + + - + + @@ -379,6 +361,7 @@ export const ConnectedWalletDetails: React.FC<{ display: "flex", gap: spacing.xs, alignItems: "center", + padding: spacing.sm, }} onClick={() => { setScreen("send"); @@ -401,6 +384,7 @@ export const ConnectedWalletDetails: React.FC<{ display: "flex", gap: spacing.xs, alignItems: "center", + padding: spacing.sm, }} onClick={() => { setScreen("receive"); @@ -419,7 +403,7 @@ export const ConnectedWalletDetails: React.FC<{ {networkSwitcherButton} @@ -692,10 +676,14 @@ const MenuButton = /* @__PURE__ */ StyledButton(() => { }, svg: { color: theme.colors.secondaryText, + transition: "color 200ms ease", }, "&[data-variant='danger']:hover svg": { color: theme.colors.danger + "!important", }, + "&[data-variant='primary']:hover svg": { + color: theme.colors.primaryText + "!important", + }, }; }); @@ -768,22 +756,9 @@ function ConnectedToSmartWallet() { }, [activeWallet]); const content = ( - - - - {locale.connectedToSmartWallet} - - {isSmartWalletDeployed && ( - - )} + + + {locale.connectedToSmartWallet} ); @@ -818,11 +793,13 @@ function EmbeddedWalletEmail() { if (emailQuery.data) { return ( - {emailQuery.data} + {emailQuery.data} ); } From d2dee6aa276a99e1d83fb3aa2992d1cd154480d8 Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Tue, 23 Jan 2024 00:47:10 +0530 Subject: [PATCH 5/8] hide the faucet link by default --- .../react-native/src/evm/components/ConnectWallet.tsx | 7 ++++++- .../ConnectWalletDetails/ConnectWalletDetailsModal.tsx | 6 +++++- packages/react/src/wallet/ConnectWallet/ConnectWallet.tsx | 8 ++++---- packages/react/src/wallet/ConnectWallet/Details.tsx | 6 +++++- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/react-native/src/evm/components/ConnectWallet.tsx b/packages/react-native/src/evm/components/ConnectWallet.tsx index 6b37501b19d..64b515d00f9 100644 --- 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 + * + * ``` */ hideTestnetFaucet?: boolean; diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx index da35220ee88..422cc20c2e1 100644 --- 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 ( @@ -288,7 +292,7 @@ export const ConnectWalletDetailsModal = ({ - {!hideTestnetFaucet && chain?.testnet && chain?.faucets?.length ? ( + {showFaucet && chain?.testnet && chain?.faucets?.length ? ( ; /** - * Hide the "Request Testnet funds" link in ConnectWallet Details Modal 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 @@ -433,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 Details Modal 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 * diff --git a/packages/react/src/wallet/ConnectWallet/Details.tsx b/packages/react/src/wallet/ConnectWallet/Details.tsx index a6eeb051261..2c34cc50fb6 100644 --- a/packages/react/src/wallet/ConnectWallet/Details.tsx +++ b/packages/react/src/wallet/ConnectWallet/Details.tsx @@ -282,6 +282,10 @@ export const ConnectedWalletDetails: React.FC<{ ); + // by default we hide faucet link + const showFaucet = + props.hideTestnetFaucet === undefined ? false : !props.hideTestnetFaucet; + let content = (
@@ -449,7 +453,7 @@ export const ConnectedWalletDetails: React.FC<{ )} {/* Request Testnet funds */} - {!props.hideTestnetFaucet && + {showFaucet && ((chain?.faucets && chain.faucets.length > 0) || chain?.chainId === Localhost.chainId) && ( Date: Tue, 23 Jan 2024 00:53:43 +0530 Subject: [PATCH 6/8] update changeset --- .changeset/rich-badgers-raise.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.changeset/rich-badgers-raise.md b/.changeset/rich-badgers-raise.md index 3db5c12acf3..cca425ca608 100644 --- a/.changeset/rich-badgers-raise.md +++ b/.changeset/rich-badgers-raise.md @@ -2,4 +2,10 @@ "@thirdweb-dev/react": patch --- -Convert ConnectWallet Details dropdown to a Modal +- 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. From bd54c4c9c40ec3f335b17f1fa476e0c441cdd4bb Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Tue, 23 Jan 2024 00:58:20 +0530 Subject: [PATCH 7/8] add changeset for react-native --- .changeset/weak-mayflies-cheat.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/weak-mayflies-cheat.md diff --git a/.changeset/weak-mayflies-cheat.md b/.changeset/weak-mayflies-cheat.md new file mode 100644 index 00000000000..e45683ad51e --- /dev/null +++ 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. From 07e4aa9a001214217193d51a5bd5a7d0e50e25f0 Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Tue, 23 Jan 2024 01:12:05 +0530 Subject: [PATCH 8/8] minor bump in react --- .changeset/rich-badgers-raise.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/rich-badgers-raise.md b/.changeset/rich-badgers-raise.md index cca425ca608..f8776fa5a9f 100644 --- a/.changeset/rich-badgers-raise.md +++ b/.changeset/rich-badgers-raise.md @@ -1,5 +1,5 @@ --- -"@thirdweb-dev/react": patch +"@thirdweb-dev/react": minor --- - Change ConnectWallet Details dropdown to a Modal with a few UI improvements.