[react] ConnectWallet UI improvements

.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

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%)",

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 = (
+    <Container
+      flex="row"
+      gap="xs"
+      center="y"
+      style={{
+        width: "100%",
+        justifyContent: "space-between",
+      }}
+    >
+      <Container flex="row" gap="xs" center="y">
+        <ActiveDot
+          style={{
+            background: isSmartWalletDeployed ? undefined : "#ffc53d",
+          }}
+        />
+        Connected to Smart Wallet
+      </Container>
+      {isSmartWalletDeployed && (
+        <ChevronRightIcon width={iconSize.sm} height={iconSize.sm} />
+      )}
+    </Container>
+  );
+
+  if (chain && address) {
     return (
       <>
-        <Link
-          color="secondaryText"
-          hoverColor="primaryText"
-          href={`https://thirdweb.com/${chain.slug}/${address}/account`}
-          target="_blank"
-          size="sm"
-        >
-          <Container
-            flex="row"
-            gap="xs"
-            center="y"
-            style={{
-              width: "100%",
-              justifyContent: "space-between",
-            }}
+        {isSmartWalletDeployed ? (
+          <Link
+            color="secondaryText"
+            hoverColor="primaryText"
+            href={`https://thirdweb.com/${chain.slug}/${address}/account`}
+            target="_blank"
+            size="sm"
           >
-            <Container flex="row" gap="xs" center="y">
-              <ActiveDot />
-              Connected to Smart Wallet
-            </Container>
-            <ChevronRightIcon width={iconSize.sm} height={iconSize.sm} />
-          </Container>
-        </Link>
+            {content}
+          </Link>
+        ) : (
+          <Text size="sm"> {content}</Text>
+        )}
+
         <Spacer y="md" />
       </>
     );

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 }) {
 
       <Spacer y="xl" />
 
-      {!isMob && (
-        <>
-          <Container flex="row" center="x">
-            <QRCode
-              qrCodeUri={address}
-              size={310}
-              QRIcon={
-                <Img
-                  src={props.iconUrl}
-                  width={iconSize.xxl}
-                  height={iconSize.xxl}
-                />
-              }
+      <Container flex="row" center="x">
+        <QRCode
+          qrCodeUri={address}
+          size={310}
+          QRIcon={
+            <Img
+              src={props.iconUrl}
+              width={iconSize.xxl}
+              height={iconSize.xxl}
             />
-          </Container>
-          <Spacer y="xl" />
-        </>
-      )}
+          }
+        />
+      </Container>
+      <Spacer y="xl" />
 
       <WalletAddressContianer onClick={onCopy}>
         <Text color="primaryText" size="md">
@@ -54,20 +48,10 @@ export function ReceiveFunds(props: { iconUrl: string }) {
 
       <Spacer y="lg" />
 
-      {!isMob ? (
-        <Text multiline center>
-          Copy the wallet address or scan the <br /> QR code to send funds to
-          this wallet.
-        </Text>
-      ) : (
-        <>
-          <Text multiline center>
-            Copy the wallet address to <br />
-            send funds to this wallet
-          </Text>
-          <Spacer y="xl" />
-        </>
-      )}
+      <Text multiline center>
+        Copy the wallet address to <br />
+        send funds to this wallet
+      </Text>
     </Container>
   );
 }