feat: make wallet connect responsive

src/components/Button/Button.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from "react";
 import { classNames, variantClassNames } from "../../util/classes";
 import { Slot, Slottable } from "../Slot/Slot";
+import { useIsUnderWindowBreakpoint } from "../../hooks/useWindowBreakpoint";
 
 export interface ButtonProps
   extends PropsWithChildren,
@@ -25,12 +26,14 @@ export const Button: React.FC<ButtonProps> = ({
   iconRight,
   ...restProps
 }: ButtonProps) => {
+  const isSmallWindow = useIsUnderWindowBreakpoint({ size: "sm" });
   const Component = asChild ? Slot : "button";
   const iconClasses = classNames(
     "ink:size-3 ink:-my-1",
     variant === "wallet" &&
+      !isSmallWindow &&
       classNames(
-        "*:ink:object-cover ink:*:w-full ink:*:h-full ink:*:rounded-full",
+        "ink:*:object-cover ink:*:w-full ink:*:h-full ink:*:rounded-full",
         variantClassNames(size, {
           sm: "ink:size-4",
           md: "ink:size-5",
@@ -75,6 +78,12 @@ export const Button: React.FC<ButtonProps> = ({
                 sm: "ink:pr-0.5",
                 md: "ink:pr-0.5",
                 lg: "ink:pr-1",
+              }),
+            isSmallWindow &&
+              variantClassNames(size, {
+                sm: "ink:px-0.5",
+                md: "ink:px-0.5",
+                lg: "ink:px-1",
               })
           ),
         }),

src/components/Wallet/ConnectWallet.stories.tsx

@@ -12,7 +12,6 @@ const meta: Meta<ConnectWalletProps> = {
   component: ConnectWallet,
   tags: ["autodocs"],
   argTypes: {},
-  args: {},
 };
 
 export default meta;

src/components/Wallet/ConnectWallet.tsx

@@ -12,6 +12,7 @@ import { trimAddress } from "../../util/trim";
 import { inkSepolia } from "wagmi/chains";
 import { useEnsImageOrDefault } from "../../hooks/useEnsImageOrDefault";
 import { useEnsNameOrDefault } from "../../hooks/useEnsNameOrDefault";
+import { useIsUnderWindowBreakpoint } from "../../hooks/useWindowBreakpoint";
 
 export interface ConnectWalletProps {
   className?: string;
@@ -22,6 +23,7 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({ className }) => {
   const { connect, connectors } = useConnect();
   const ensName = useEnsNameOrDefault({ address });
   const ensImage = useEnsImageOrDefault({ address });
+  const isSmallWindow = useIsUnderWindowBreakpoint({ size: "sm" });
 
   return (
     <Popover>
@@ -30,12 +32,18 @@ export const ConnectWallet: React.FC<ConnectWalletProps> = ({ className }) => {
           variant={isConnected ? "wallet" : "primary"}
           className={className}
           iconLeft={
-            isConnected && address ? (
+            isConnected && address && !isSmallWindow ? (
               <img src={ensImage} alt={`avatar for ${ensName}`} />
             ) : undefined
           }
+          rounded={isSmallWindow ? "full" : "default"}
         >
-          {isConnected && address ? ensName : "Connect"}
+          <ConnectWalletContent
+            isSmallWindow={isSmallWindow}
+            isConnected={isConnected}
+            ensName={ensName}
+            ensImage={ensImage}
+          />
         </Button>
       </PopoverButton>
 
@@ -126,3 +134,32 @@ const ConnectedWalletSection = ({ address }: { address: Address }) => {
     </>
   );
 };
+
+const ConnectWalletContent = ({
+  isSmallWindow,
+  isConnected,
+  ensName,
+  ensImage,
+}: {
+  isSmallWindow: boolean;
+  isConnected: boolean;
+  ensName: string;
+  ensImage: string;
+}) => {
+  if (isConnected) {
+    if (isSmallWindow) {
+      return (
+        <div className="ink:size-5 ink:-my-1 ink:*:object-cover ink:*:w-full ink:*:h-full ink:*:rounded-full ink:px-0">
+          <img src={ensImage} alt={`avatar for ${ensName}`} />
+        </div>
+      );
+    }
+    return ensName;
+  }
+
+  if (isSmallWindow) {
+    return <InkIcon.Wallet className="ink:size-3" />;
+  }
+
+  return "Connect";
+};

src/hooks/useWindowBreakpoint.ts

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { useWindowSize } from "./useWindowSize";
 
 const BREAKPOINTS = {
+  sm: 640,
   md: 768,
   lg: 1024,
 };

src/icons/index.ts

@@ -26,3 +26,4 @@ export { default as SocialX } from "./Type=SocialX.svg?react";
 export { default as Success } from "./Type=Success.svg?react";
 export { default as Sun } from "./Type=Sun.svg?react";
 export { default as Swap } from "./Type=Swap.svg?react";
+export { default as Wallet } from "./Type=Wallet.svg?react";