diff --git a/.changeset/red-seahorses-train.md b/.changeset/red-seahorses-train.md new file mode 100644 index 00000000000..24309ef1fb7 --- /dev/null +++ b/.changeset/red-seahorses-train.md @@ -0,0 +1,6 @@ +--- +"@thirdweb-dev/react": patch +--- + +- Always show "Connected to Smart Wallet" text in ConnectWallet dropdown but only link to dashboard if it is deployed +- Show QR code in the Receive funds screen on mobile too diff --git a/packages/react/src/design-system/index.ts b/packages/react/src/design-system/index.ts index 74e6e826fd9..5c53cef1a59 100644 --- a/packages/react/src/design-system/index.ts +++ b/packages/react/src/design-system/index.ts @@ -8,7 +8,7 @@ const darkColors = { primaryText: mauveDark.mauve12, secondaryText: mauveDark.mauve10, danger: tomato.tomato9, - success: green.green7, + success: green.green8, overlay: "rgba(0, 0, 0, 0.7)", accentText: "#3385FF", accentBg: "hsl(216 100% 50%)", diff --git a/packages/react/src/wallet/ConnectWallet/Details.tsx b/packages/react/src/wallet/ConnectWallet/Details.tsx index d4a86d195db..8ad177e0661 100644 --- a/packages/react/src/wallet/ConnectWallet/Details.tsx +++ b/packages/react/src/wallet/ConnectWallet/Details.tsx @@ -758,46 +758,60 @@ function ConnectedToSmartWallet() { const chain = useChain(); const address = useAddress(); - const [showConnectedToSmartWallet, setShowConnectedToSmartWallet] = - useState(false); + const [isSmartWalletDeployed, setIsSmartWalletDeployed] = useState(false); useEffect(() => { if (activeWallet && activeWallet.walletId === walletIds.smartWallet) { const smartWallet = activeWallet as SmartWallet; smartWallet.isDeployed().then((isDeployed) => { - setShowConnectedToSmartWallet(isDeployed); + setIsSmartWalletDeployed(isDeployed); }); } else { - setShowConnectedToSmartWallet(false); + setIsSmartWalletDeployed(false); } }, [activeWallet]); - if (showConnectedToSmartWallet && chain && address) { + const content = ( + + + + Connected to Smart Wallet + + {isSmartWalletDeployed && ( + + )} + + ); + + if (chain && address) { return ( <> - - - - - Connected to Smart Wallet - - - - + {content} + + ) : ( + {content} + )} + ); diff --git a/packages/react/src/wallet/ConnectWallet/ReceiveFunds.tsx b/packages/react/src/wallet/ConnectWallet/ReceiveFunds.tsx index 02100cab6e6..5b47a9c5cf8 100644 --- a/packages/react/src/wallet/ConnectWallet/ReceiveFunds.tsx +++ b/packages/react/src/wallet/ConnectWallet/ReceiveFunds.tsx @@ -7,13 +7,11 @@ import { CopyIcon } from "../../components/CopyIcon"; import styled from "@emotion/styled"; import { Theme, iconSize, radius, spacing } from "../../design-system"; import { QRCode } from "../../components/QRCode"; -import { isMobile } from "../../evm/utils/isMobile"; import { Img } from "../../components/Img"; import { useClipboard } from "../../evm/components/hooks/useCopyClipboard"; export function ReceiveFunds(props: { iconUrl: string }) { const address = useAddress(); - const isMob = isMobile(); const { hasCopied, onCopy } = useClipboard(address || ""); return ( @@ -22,24 +20,20 @@ export function ReceiveFunds(props: { iconUrl: string }) { - {!isMob && ( - <> - - - } + + - - - - )} + } + /> + + @@ -54,20 +48,10 @@ export function ReceiveFunds(props: { iconUrl: string }) { - {!isMob ? ( - - Copy the wallet address or scan the
QR code to send funds to - this wallet. -
- ) : ( - <> - - Copy the wallet address to
- send funds to this wallet -
- - - )} + + Copy the wallet address to
+ send funds to this wallet +
); }