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
+
);
}