connect wallet button styling

components/Layout.tsx

@@ -0,0 +1,177 @@
+require('@solana/wallet-adapter-react-ui/styles.css')
+import SideNav from './shared/SideNav'
+import { Fragment, ReactNode, useCallback, useEffect, useState } from 'react'
+import {
+  ArrowRightIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from '@heroicons/react/solid'
+import { useWallet } from '@solana/wallet-adapter-react'
+import { useViewport } from '../hooks/useViewport'
+import { breakpoints } from '../utils/theme'
+import { useTranslation } from 'next-i18next'
+import { Popover, Transition } from '@headlessui/react'
+import MangoAccountSummary from './account/MangoAccountSummary'
+import { HealthType, MangoAccount } from '@blockworks-foundation/mango-v4'
+import mangoStore from '../store/state'
+import HealthHeart from './account/HealthHeart'
+import BottomBar from './mobile/BottomBar'
+import useLocalStorageState from '../hooks/useLocalStorageState'
+import UserSetupModal from './modals/UserSetupModal'
+import { ConnectWalletButton } from './wallet/ConnectWalletButton'
+
+export const IS_ONBOARDED_KEY = 'isOnboarded'
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  const mangoAccount = mangoStore((s) => s.mangoAccount)
+  const { t } = useTranslation('common')
+  const { connected } = useWallet()
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const { width } = useViewport()
+  const isMobile = width ? width < breakpoints.md : false
+  const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
+  const [showUserSetupModal, setShowUserSetupModal] = useState(false)
+
+  useEffect(() => {
+    const collapsed = width ? width < breakpoints.xl : false
+    setIsCollapsed(collapsed)
+  }, [width])
+
+  useEffect(() => {
+    if (width < breakpoints.lg) {
+      setIsCollapsed(true)
+    }
+  }, [width])
+
+  const handleCloseModal = useCallback(() => {
+    setShowUserSetupModal(false)
+  }, [])
+
+  const handleShowModal = useCallback(() => {
+    setShowUserSetupModal(true)
+  }, [])
+
+  const handleToggleSidebar = () => {
+    setIsCollapsed(!isCollapsed)
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'))
+    }, 100)
+  }
+
+  return (
+    <div className={`flex-grow bg-th-bkg-1 text-th-fgd-1 transition-all`}>
+      <div className="flex">
+        {isMobile ? (
+          <div className="fixed bottom-0 left-0 z-20 w-full md:hidden">
+            <BottomBar />
+          </div>
+        ) : (
+          <div className={`fixed z-20 h-screen`}>
+            <button
+              className="absolute -right-4 top-1/2 z-20 hidden h-10 w-4 -translate-y-1/2 transform rounded-none rounded-r bg-th-bkg-4 focus:outline-none lg:block"
+              onClick={handleToggleSidebar}
+            >
+              <ChevronRightIcon
+                className={`default-transition h-full w-full ${
+                  !isCollapsed ? 'rotate-180' : 'rotate-360'
+                }`}
+              />
+            </button>
+            <div className={`h-full ${!isCollapsed ? 'overflow-y-auto' : ''}`}>
+              <SideNav collapsed={isCollapsed} />
+            </div>
+          </div>
+        )}
+        <div
+          className={`w-full overflow-hidden transition-all duration-500 ease-in-out ${
+            isMobile ? '' : isCollapsed ? 'pl-[72px]' : 'pl-44 lg:pl-56'
+          }`}
+        >
+          <div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 px-6">
+            <div className="flex items-center text-th-fgd-3">
+              <span className="mb-0 mr-2">
+                {mangoAccount ? (
+                  <MangoAccountSummaryDropdown mangoAccount={mangoAccount} />
+                ) : (
+                  <span className="flex items-center">
+                    🔗<span className="ml-2">{t('connect-helper')}</span>
+                    <ArrowRightIcon className="sideways-bounce ml-2 h-5 w-5 text-th-fgd-1" />
+                  </span>
+                )}
+              </span>
+            </div>
+            <div className="flex items-center space-x-4">
+              {/* {isOnboarded ? (
+                connected ? (
+                  <WalletDisconnectButton />
+                ) : (
+                  <WalletMultiButton />
+                )
+              ) : (
+                <Button highlightButton onClick={handleShowModal}>
+                  Join Mango
+                </Button>
+              )} */}
+              <ConnectWalletButton />
+            </div>
+          </div>
+          <div className={`min-h-screen p-8 ${isMobile ? 'pb-20' : ''}`}>
+            {children}
+          </div>
+        </div>
+      </div>
+      {showUserSetupModal ? (
+        <UserSetupModal
+          isOpen={showUserSetupModal}
+          onClose={handleCloseModal}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+export default Layout
+
+const MangoAccountSummaryDropdown = ({
+  mangoAccount,
+}: {
+  mangoAccount: MangoAccount
+}) => {
+  return (
+    <Popover>
+      {({ open }) => (
+        <>
+          <Popover.Button className="flex w-full items-center justify-between rounded-none text-th-fgd-1 hover:text-th-primary">
+            <div className="flex items-center">
+              <HealthHeart
+                health={mangoAccount.getHealthRatio(HealthType.init).toNumber()}
+                size={20}
+              />
+              <span className="ml-1 mr-0.5 font-bold">{mangoAccount.name}</span>
+            </div>
+            <ChevronDownIcon
+              className={`${
+                open ? 'rotate-180 transform' : 'rotate-360 transform'
+              } mt-0.5 h-5 w-5 flex-shrink-0`}
+            />
+          </Popover.Button>
+          <Transition
+            appear={true}
+            show={open}
+            as={Fragment}
+            enter="transition-all ease-in duration-200"
+            enterFrom="opacity-0 transform scale-75"
+            enterTo="opacity-100 transform scale-100"
+            leave="transition ease-out duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Popover.Panel className="absolute top-[63px] z-10 mr-4 w-56 rounded-md rounded-t-none border border-th-bkg-3 bg-th-bkg-1 p-4">
+              <MangoAccountSummary />
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  )
+}

components/modals/UserSetupModal.tsx

@@ -15,7 +15,7 @@ import WalletSelect from '../wallet/WalletSelect'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { handleWalletConnect } from '../../utils/wallet'
 import mangoStore from '../../store/state'
-import { IS_ONBOARDED_KEY } from '../shared/Layout'
+import { IS_ONBOARDED_KEY } from '../Layout'
 import DepositTokenList from '../shared/DepositTokenList'
 import { EnterRightExitLeft } from '../shared/Transitions'
 

components/wallet/ConnectWalletButton.tsx

@@ -21,6 +21,7 @@ import { useRouter } from 'next/router'
 import mangoStore from '../../store/state'
 import { notify } from '../../utils/notifications'
 import { abbreviateAddress } from '../../utils/formatting'
+import WalletSelect from './WalletSelect'
 
 export const handleWalletConnect = (wallet: Wallet) => {
   if (!wallet) {
@@ -149,28 +150,44 @@ export const ConnectWalletButton: React.FC = () => {
           )}
         </Menu>
       ) : (
-        <div className="flex divide-x divide-th-bkg-3" id="connect-wallet-tip">
-          <button
-            onClick={handleConnect}
-            disabled={!group}
-            className="rounded-xl bg-th-primary-dark p-2 text-th-bkg-1 focus:outline-none disabled:cursor-wait disabled:text-th-bkg-2"
-          >
-            <div className="flex flex-row items-center justify-center px-3">
-              {/* <WalletIcon className="mr-2 h-4 w-4 fill-current" /> */}
-              <div className="text-left">
-                <div className="mb-1 whitespace-nowrap font-bold leading-none">
-                  Connect Wallet
+        <div className="relative">
+          <div className="relative flex h-16 w-44 divide-x divide-th-bkg-3 bg-gradient-to-bl from-mango-theme-yellow to-mango-theme-red-dark before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-[rgba(255,255,255,0.25)] before:to-transparent before:opacity-0 hover:cursor-pointer hover:overflow-hidden hover:before:-translate-x-full hover:before:animate-[shimmer_0.75s_normal] hover:before:opacity-100">
+            <button
+              onClick={handleConnect}
+              // disabled={!mangoGroup}
+              className="bg-transparent text-white focus:outline-none disabled:cursor-wait disabled:text-th-bkg-2"
+            >
+              <div className="default-transition flex h-full flex-row items-center justify-center space-x-3 px-4">
+                <div
+                  className={`flex h-[28px] w-[28px] items-center justify-center rounded-full ${
+                    wallet?.adapter.name === 'Solflare' ? 'bg-black' : ''
+                  }`}
+                >
+                  <img
+                    src={wallet?.adapter.icon}
+                    className={
+                      wallet?.adapter.name === 'Solflare'
+                        ? 'h-auto w-[20px]'
+                        : 'h-auto w-[28px]'
+                    }
+                    alt={`${wallet?.adapter.name} icon`}
+                  />
                 </div>
-                {wallet?.adapter?.name && (
-                  <div className="text-xxs font-normal leading-3 tracking-wider text-th-bkg-2">
-                    {wallet.adapter.name}
+                <div className="text-left">
+                  <div className="mb-1.5 text-base font-bold leading-none">
+                    {t('connect')}
                   </div>
-                )}
+                  {wallet?.adapter?.name && (
+                    <div className="text-xxs font-normal leading-3 tracking-wider text-white">
+                      {wallet.adapter.name}
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          </button>
-          <div className="relative">
-            {/* <WalletSelect wallets={displayedWallets} /> */}
+            </button>
+          </div>
+          <div className="absolute top-1/2 right-0 z-10 h-full -translate-y-1/2">
+            <WalletSelect />
           </div>
         </div>
       )}

components/wallet/WalletSelect.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { useWallet } from '@solana/wallet-adapter-react'
 // import { WalletReadyState } from '@solana/wallet-adapter-base'
 // import uniqBy from 'lodash/uniqBy'
-import { CheckCircleIcon } from '@heroicons/react/solid'
+import { CheckCircleIcon, ChevronDownIcon } from '@heroicons/react/solid'
+import { Menu, Transition } from '@headlessui/react'
 
 const WalletSelect = () => {
   const { wallet, wallets, select } = useWallet()
@@ -30,31 +31,54 @@ const WalletSelect = () => {
   // }
 
   return (
-    <div className="space-y-2">
-      {wallets?.map((w) => (
-        <button
-          key={w.adapter.name}
-          className={`flex w-full items-center justify-between rounded-md border ${
-            wallet?.adapter.name === w.adapter.name
-              ? 'border-th-primary md:hover:border-th-primary'
-              : 'border-th-bkg-4 md:hover:border-th-fgd-4'
-          } py-3 px-4 text-base focus:outline-none md:hover:cursor-pointer`}
-          onClick={() => select(w.adapter.name)}
-        >
-          <div className="flex items-center">
-            <img
-              src={w.adapter.icon}
-              className="mr-2 h-6 w-6"
-              alt={`${w.adapter.name} icon`}
+    <Menu>
+      {({ open }) => (
+        <>
+          <Menu.Button
+            className={`flex h-full w-14 cursor-pointer items-center justify-center rounded-none bg-transparent text-white hover:brightness-[1.1] focus:outline-none`}
+          >
+            <ChevronDownIcon
+              className={`default-transition h-6 w-6 ${
+                open ? 'rotate-180 transform' : 'rotate-360 transform'
+              }`}
             />
-            {w.adapter.name}
-          </div>
-          {wallet?.adapter.name === w.adapter.name ? (
-            <CheckCircleIcon className="h-5 w-5 text-th-primary" />
-          ) : null}
-        </button>
-      ))}
-    </div>
+          </Menu.Button>
+          <Transition
+            appear={true}
+            show={open}
+            as={Fragment}
+            enter="transition-all ease-in duration-200"
+            enterFrom="opacity-0 transform scale-75"
+            enterTo="opacity-100 transform scale-100"
+            leave="transition ease-out duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Menu.Items className="absolute top-[68px] right-0 z-20 w-44 rounded-md border border-th-bkg-3 bg-th-bkg-1 px-4 py-2.5 outline-none">
+              {wallets?.map((wallet, index) => (
+                <Menu.Item key={index}>
+                  <button
+                    className="flex w-full flex-row items-center justify-between rounded-none py-1.5 font-normal focus:outline-none md:hover:cursor-pointer md:hover:text-th-primary"
+                    onClick={() => {
+                      select(wallet.adapter.name)
+                    }}
+                  >
+                    <div className="flex items-center">
+                      <img
+                        src={wallet.adapter.icon}
+                        className="mr-2 h-5 w-5"
+                        alt={`${wallet.adapter.name} icon`}
+                      />
+                      {wallet.adapter.name}
+                    </div>
+                  </button>
+                </Menu.Item>
+              ))}
+            </Menu.Items>
+          </Transition>
+        </>
+      )}
+    </Menu>
   )
 }
 

pages/_app.tsx

@@ -17,7 +17,7 @@ import Notifications from '../components/shared/Notification'
 import { ThemeProvider } from 'next-themes'
 import { TOKEN_LIST_URL } from '@jup-ag/core'
 import { appWithTranslation } from 'next-i18next'
-import Layout from '../components/shared/Layout'
+import Layout from '../components/Layout'
 import { ViewportProvider } from '../hooks/useViewport'
 import { WalletProvider } from '../components/wallet/WalletProvider'