Show wallet connector in control bar

Minor style improvements

Author: jmrossy

src/components/buttons/SolidButton.tsx

@@ -4,7 +4,7 @@ interface ButtonProps {
   size?: 'xs' | 's' | 'm' | 'l' | 'xl';
   type?: 'submit' | 'reset' | 'button';
   onClick?: () => void;
-  color?: 'white' | 'green' | 'red'; // defaults to green
+  color?: 'white' | 'beige' | 'green' | 'red'; // defaults to green
   classes?: string;
   bold?: boolean;
   disabled?: boolean;
@@ -26,13 +26,17 @@ export function SolidButton(props: PropsWithChildren<ButtonProps>) {
     title,
     passThruProps,
   } = props;
-  const color = _color ?? 'green';
+  const color = _color ?? 'beige';
 
   const base =
     'flex items-center justify-center rounded-full transition-all duration-300';
   const sizing = sizeToClasses(size);
   let baseColors, onHover, onActive;
-  if (color === 'green') {
+  if (color === 'beige') {
+    baseColors = 'bg-beige-600 text-gray-700';
+    onHover = 'hover:bg-beige-500';
+    onActive = 'active:bg-beige-400';
+  } else if (color === 'green') {
     baseColors = 'bg-green-500 text-white';
     onHover = 'hover:bg-green-600';
     onActive = 'active:bg-green-700';

src/components/layout/AppLayout.tsx

@@ -17,7 +17,7 @@ export function AppLayout({ pathName, children }: PropsWithChildren<Props>) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{`Abacus Nft Example App | ${getHeadTitle(pathName)}`}</title>
       </Head>
-      <div className="flex flex-col justify-between h-full min-h-screen w-full min-w-screen bg-beige">
+      <div className="flex flex-col justify-between h-full min-h-screen w-full min-w-screen bg-beige-500">
         <Header />
         <main className="w-full">{children}</main>
         <Footer />

src/components/nav/Header.tsx

@@ -15,8 +15,8 @@ export function Header() {
                 src={Logo}
                 alt="Abacus Logo"
                 quality={100}
-                width={180}
-                height={80}
+                width={170}
+                height={50}
               />
             </div>
           </a>

src/features/wallet/WalletControlBar.tsx

@@ -37,9 +37,10 @@ export function WalletControlBar() {
 }
 
 function AccountDropdown() {
-  const { address, isConnected } = useAccount();
+  const { address, isConnected, connector } = useAccount();
   const { connectAsync, connectors } = useConnect();
   const { disconnectAsync } = useDisconnect();
+  const isAccountReady = address && isConnected && connector;
 
   const { buttonProps, itemProps, isOpen, setIsOpen } = useDropdownMenu(2);
 
@@ -76,10 +77,13 @@ function AccountDropdown() {
 
   return (
     <div className="relative">
-      {address && isConnected ? (
+      {isAccountReady ? (
         <button className={styles.dropdownButton} {...buttonProps}>
           <Identicon address={address} size={30} />
-          <div className="mx-2 text-sm">{shortenAddress(address, true)}</div>
+          <div className="flex flex-col mx-3 items-start">
+            <div className="text-xs">{connector.name}</div>
+            <div className="text-xs">{shortenAddress(address, true)}</div>
+          </div>
           <Icon src={ChevronDown} alt="Down Arrow" size={14} />
         </button>
       ) : (
@@ -129,15 +133,15 @@ function ChainDropdown() {
       await switchNetworkAsync(targetChainId);
     } catch (error) {
       logger.error('Error switching network', error);
-      toast.error('Could not switching network');
+      toast.error('Could not switch network');
     }
   };
 
   return (
     <div className="relative">
       <button className={styles.dropdownButton} {...buttonProps}>
-        <Icon src={Cube} alt="Network" />
-        <div className="mx-2">{chain?.name || 'Unknown'}</div>
+        <Icon src={Cube} alt="Network" size={16} />
+        <div className="mx-2">{chain?.name || 'None'}</div>
         <Icon src={ChevronDown} alt="Down Arrow" size={14} />
       </button>
 

src/pages/index.tsx

@@ -9,7 +9,7 @@ const Home: NextPage = () => {
   const [page, setPage] = useState<'search' | 'transfer'>('search');
   return (
     <div className="flex flex-col justify-center items-center h-full">
-      <div className="w-128 px-4 pt-2 pb-1 bg-red-400 rounded-t-lg">
+      <div className="w-112 px-4 pt-2 pb-1 bg-red-400 rounded-t-lg">
         <h1 className="text-gray-50 text-center">Abacus Example Nft App</h1>
         <div className="flex justify-center mt-3 space-x-20">
           <PageNavButton
@@ -26,7 +26,7 @@ const Home: NextPage = () => {
           </PageNavButton>
         </div>
       </div>
-      <FloatingBox width="w-128" classes="relative -top-1">
+      <FloatingBox width="w-112" classes="relative -top-1">
         {page === 'search' && <SearchForm />}
         {page === 'transfer' && <TransferForm />}
       </FloatingBox>

tailwind.config.js

@@ -16,7 +16,17 @@ module.exports = {
       colors: {
         black: '#010101',
         white: '#ffffff',
-        beige: '#F1EDE9',
+        beige: {
+          100: '#F6F4F1',
+          200: '#F5F2EF',
+          300: '#F3F0ED',
+          400: '#F2EEEB',
+          500: '#F1EDE9',
+          600: '#D8D5D1',
+          700: '#C0BDBA',
+          800: '#A8A5A3',
+          900: '#908E8B',
+        },
         red: {
           100: '#F28B84',
           200: '#F07770',