From 0baa12de9a32fe68b4d1f6b83f491a01f3ea738e Mon Sep 17 00:00:00 2001 From: ink-victor <171172553+ink-victor@users.noreply.github.com> Date: Sun, 15 Dec 2024 16:08:37 -0500 Subject: [PATCH] feat: make wallet connect responsive --- src/components/Button/Button.tsx | 11 ++++- .../Wallet/ConnectWallet.stories.tsx | 1 - src/components/Wallet/ConnectWallet.tsx | 41 ++++++++++++++++++- src/hooks/useWindowBreakpoint.ts | 1 + src/icons/Type=Wallet.svg | 3 ++ src/icons/index.ts | 1 + 6 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 src/icons/Type=Wallet.svg diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 1b406a0..73deb00 100644 --- a/src/components/Button/Button.tsx +++ b/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 = ({ 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 = ({ 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", }) ), }), diff --git a/src/components/Wallet/ConnectWallet.stories.tsx b/src/components/Wallet/ConnectWallet.stories.tsx index 7e2f2d4..f6e2def 100644 --- a/src/components/Wallet/ConnectWallet.stories.tsx +++ b/src/components/Wallet/ConnectWallet.stories.tsx @@ -12,7 +12,6 @@ const meta: Meta = { component: ConnectWallet, tags: ["autodocs"], argTypes: {}, - args: {}, }; export default meta; diff --git a/src/components/Wallet/ConnectWallet.tsx b/src/components/Wallet/ConnectWallet.tsx index 8815235..e1eafac 100644 --- a/src/components/Wallet/ConnectWallet.tsx +++ b/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 = ({ className }) => { const { connect, connectors } = useConnect(); const ensName = useEnsNameOrDefault({ address }); const ensImage = useEnsImageOrDefault({ address }); + const isSmallWindow = useIsUnderWindowBreakpoint({ size: "sm" }); return ( @@ -30,12 +32,18 @@ export const ConnectWallet: React.FC = ({ className }) => { variant={isConnected ? "wallet" : "primary"} className={className} iconLeft={ - isConnected && address ? ( + isConnected && address && !isSmallWindow ? ( {`avatar ) : undefined } + rounded={isSmallWindow ? "full" : "default"} > - {isConnected && address ? ensName : "Connect"} + @@ -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 ( +
+ {`avatar +
+ ); + } + return ensName; + } + + if (isSmallWindow) { + return ; + } + + return "Connect"; +}; diff --git a/src/hooks/useWindowBreakpoint.ts b/src/hooks/useWindowBreakpoint.ts index ce4960c..86ce9f2 100644 --- a/src/hooks/useWindowBreakpoint.ts +++ b/src/hooks/useWindowBreakpoint.ts @@ -2,6 +2,7 @@ import { useMemo } from "react"; import { useWindowSize } from "./useWindowSize"; const BREAKPOINTS = { + sm: 640, md: 768, lg: 1024, }; diff --git a/src/icons/Type=Wallet.svg b/src/icons/Type=Wallet.svg new file mode 100644 index 0000000..fafb4b2 --- /dev/null +++ b/src/icons/Type=Wallet.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/index.ts b/src/icons/index.ts index b4d6762..7df6343 100644 --- a/src/icons/index.ts +++ b/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";