diff --git a/.changeset/rich-badgers-raise.md b/.changeset/rich-badgers-raise.md new file mode 100644 index 00000000000..f8776fa5a9f --- /dev/null +++ b/.changeset/rich-badgers-raise.md @@ -0,0 +1,11 @@ +--- +"@thirdweb-dev/react": minor +--- + +- 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 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. 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 ? ( 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 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..e93de4c5ecd 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,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 - * - * ``` * * ### 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 * @@ -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< @@ -127,14 +125,8 @@ 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); - - // dropdown - const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [screen, setScreen] = useState("main"); + const [isOpen, setIsOpen] = useState(false); const sdk = useSDK(); @@ -152,7 +144,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 +175,14 @@ export const ConnectedWalletDetails: React.FC<{ } }, [activeWallet]); + useEffect(() => { + if (!isOpen) { + onModalUnmount(() => { + setScreen("main"); + }); + } + }, [isOpen]); + const walletIconUrl = overrideWalletIconUrl || activeWalletConfig?.meta.iconURL || ""; const avatarOrWalletIconUrl = avatarUrl || walletIconUrl; @@ -250,14 +250,14 @@ export const ConnectedWalletDetails: React.FC<{ ); - let networkSwitcherButton = ( + const networkSwitcherButton = ( { - setIsDropdownOpen(false); - setShowNetworkSelector(true); + setScreen("network-switcher"); }} + data-variant="primary" >
- + {chain?.name || `Unknown chain #${walletChainId}`} ); - if (!disableSwitchChain) { - networkSwitcherButton = ( - {networkSwitcherButton} - ); - } + // by default we hide faucet link + const showFaucet = + props.hideTestnetFaucet === undefined ? false : !props.hideTestnetFaucet; - const content = ( + let content = (
- {/* Balance and Account Address */} - + + + + + {/* Address */}
- {/* row 1 */} - -
- - {addressOrENS} - - - - -
- - {!props.hideDisconnect && ( - - { - disconnect(); - props.onDisconnect(); - }} - > - - - - )} - - - {/* row 2 */} - - {" "} - {balanceQuery.data ? ( - Number(balanceQuery.data.displayValue).toFixed(3) - ) : ( - - )}{" "} - {balanceQuery.data?.symbol}{" "} + + {addressOrENS} + + +
+ + + + {/* Balance */} + + {" "} + {balanceQuery.data ? ( + Number(balanceQuery.data.displayValue).toFixed(3) + ) : ( + + )}{" "} + {balanceQuery.data?.symbol}{" "} + - - + + + - {/* Send and Receive */} - - + > + + {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 */} + {showFaucet && + ((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 +645,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 +652,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 +660,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 +678,15 @@ 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, + transition: "color 200ms ease", + }, + "&[data-variant='danger']:hover svg": { + color: theme.colors.danger + "!important", + }, + "&[data-variant='primary']:hover svg": { + color: theme.colors.primaryText + "!important", }, }; }); @@ -746,19 +702,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 +722,10 @@ function WalletSwitcher({ fontSize: fontSize.sm, }} > - - - - {locale.switchTo} {name} + + + {locale.switchTo} {name} + ); } @@ -817,22 +760,9 @@ function ConnectedToSmartWallet() { }, [activeWallet]); const content = ( - - - - {locale.connectedToSmartWallet} - - {isSmartWalletDeployed && ( - - )} + + + {locale.connectedToSmartWallet} ); @@ -867,11 +797,13 @@ function EmbeddedWalletEmail() { if (emailQuery.data) { return ( - {emailQuery.data} + {emailQuery.data} ); } diff --git a/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx b/packages/react/src/wallet/ConnectWallet/NetworkSelector.tsx index e907a06c417..b759376bc65 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 { @@ -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 = { /** @@ -153,10 +154,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 +251,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 && ( - <> - - - - - - )} - - - - + + )} + + ); } @@ -533,21 +551,22 @@ 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) => ( + + ))} + ); } 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 19319bd4921..455ad4c7eed 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: