fix: make wallet icon size adapt to button size

demo/src/app/home/ui/example/home-ui-example.tsx

@@ -114,6 +114,13 @@ export function HomeUiExample() {
             </div>
           </DemoCard>
         </SimpleGrid>
+        <Group justify="center">
+          <WalletMultiButton className={classes.control} size="xs" />
+          <WalletMultiButton className={classes.control} size="sm" />
+          <WalletMultiButton className={classes.control} size="md" />
+          <WalletMultiButton className={classes.control} size="lg" />
+          <WalletMultiButton className={classes.control} size="xl" />
+        </Group>
       </UiStack>
     </UiContainer>
   )

package.json

@@ -13,8 +13,7 @@
     "@mantine/form": "^7.2.2",
     "@mantine/hooks": "^7.2.2",
     "@mantine/modals": "^7.2.2",
-    "@pubkey-ui/core": "^1.0.1",
-    "@pubkeyapp/logo": "^1.3.3",
+    "@pubkey-ui/core": "^1.0.2",
     "@solana/buffer-layout": "^4.0.1",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",

packages/wallet-adapter-mantine-ui/src/lib/wallet-connect-button.tsx

@@ -28,8 +28,9 @@ export function WalletConnectButton({ children, disabled, onClick, ...props }: W
   return (
     <Button
       disabled={disabled || !wallet || connecting || connected}
-      leftSection={wallet ? <WalletIcon wallet={wallet} /> : undefined}
+      leftSection={wallet ? <WalletIcon wallet={wallet} size={props.size} /> : undefined}
       onClick={handleClick}
+      px="sm"
       {...props}
     >
       {content}

packages/wallet-adapter-mantine-ui/src/lib/wallet-disconnect-button.tsx

@@ -27,8 +27,9 @@ export function WalletDisconnectButton({ children, disabled, onClick, ...props }
   return (
     <Button
       disabled={disabled || !wallet}
-      leftSection={wallet ? <WalletIcon wallet={wallet} /> : undefined}
+      leftSection={wallet ? <WalletIcon wallet={wallet} size={props.size} /> : undefined}
       onClick={handleClick}
+      px="sm"
       {...props}
     >
       {content}

packages/wallet-adapter-mantine-ui/src/lib/wallet-icon.tsx

@@ -1,13 +1,32 @@
-import { Image, ImageProps } from '@mantine/core'
+import { ButtonProps, Image, ImageProps, MantineSize } from '@mantine/core'
 import type { Wallet } from '@solana/wallet-adapter-react'
 import React from 'react'
 
 export interface WalletIconProps extends ImageProps {
   wallet: Wallet | null
+  size?: ButtonProps['size']
 }
 
 export function WalletIcon({ wallet, ...props }: WalletIconProps) {
+  const size = convertSize(props.size)
   return wallet ? (
-    <Image src={wallet.adapter.icon} alt={`${wallet.adapter.name} icon`} height={28} width={28} {...props} />
+    <Image src={wallet.adapter.icon} alt={`${wallet.adapter.name} icon`} height={size} width={size} {...props} />
   ) : null
 }
+
+function convertSize(size?: ButtonProps['size']): number {
+  switch (size) {
+    case 'xs':
+      return 16
+    case 'sm':
+      return 20
+    case 'md':
+      return 28
+    case 'lg':
+      return 32
+    case 'xl':
+      return 38
+    default:
+      return 28
+  }
+}

packages/wallet-adapter-mantine-ui/src/lib/wallet-list-item.tsx

@@ -34,7 +34,7 @@ export function WalletListItem({ handleClick, tabIndex, wallet }: WalletListItem
   return (
     <NavLink
       component="button"
-      style={{ height: 48, borderRadius: 50 }}
+      style={{ height: 48, borderRadius: 8 }}
       label={<Text size="lg">{wallet.adapter.name}</Text>}
       leftSection={<WalletIcon wallet={wallet} />}
       rightSection={wallet.readyState === WalletReadyState.Installed && <span>Detected</span>}

packages/wallet-adapter-mantine-ui/src/lib/wallet-modal-button.tsx

@@ -16,7 +16,7 @@ export function WalletModalButton({ children = 'Select Wallet', onClick, ...prop
   )
 
   return (
-    <Button onClick={handleClick} {...props}>
+    <Button onClick={handleClick} px="sm" {...props}>
       {children}
     </Button>
   )

packages/wallet-adapter-mantine-ui/src/lib/wallet-multi-button.tsx

@@ -38,7 +38,7 @@ export function WalletMultiButton({ children, ...props }: WalletButtonProps) {
   return (
     <Menu withArrow offset={3}>
       <Menu.Target>
-        <Button leftSection={<WalletIcon wallet={wallet} />} {...props}>
+        <Button leftSection={<WalletIcon wallet={wallet} size={props.size} />} px="sm" {...props}>
           {content}
         </Button>
       </Menu.Target>