Merge remote-tracking branch 'origin/wallet-select' into main

components/DropMenu.jsx

@@ -13,7 +13,7 @@ const DropMenu = ({ button, buttonClassName, value, onChange, options }) => {
             </Listbox.Button>
             {open ? (
               <Listbox.Options
-                className={`z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-44`}
+                className={`z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md`}
               >
                 {options.map((option) => (
                   <Listbox.Option key={option.name} value={option.name}>

components/ThemeSwitch.jsx

@@ -26,7 +26,7 @@ const ThemeSwitch = () => {
           {THEMES.find((t) => t.name === theme).icon}
         </div>
       }
-      buttonClassName="w-10 h-10 flex items-center justify-center hover:text-th-primary rounded-md"
+      buttonClassName="w-10 h-10 flex items-center justify-center hover:text-th-primary rounded-md focus:outline-none"
       value={theme}
       onChange={(theme) => setTheme(theme)}
       options={THEMES}

components/TopBar.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useState } from 'react'
+import { Menu } from '@headlessui/react'
 import styled from '@emotion/styled'
 import {
+  ChevronUpIcon,
+  ChevronDownIcon,
   DuplicateIcon,
   LogoutIcon,
   MenuIcon,
@@ -14,11 +17,14 @@ import DropMenu from './DropMenu'
 import { useRouter } from 'next/router'
 import WalletSelect from './WalletSelect'
 import useMangoStore from '../stores/useMangoStore'
+import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
+import useLocalStorageState from '../hooks/useLocalStorageState'
 
 const Code = styled.code`
   border: 1px solid hsla(0, 0%, 39.2%, 0.2);
   border-radius: 3px;
   background: hsla(0, 0%, 58.8%, 0.1);
+  font-size: 13px;
 `
 
 const TopBar = () => {
@@ -27,6 +33,10 @@ const TopBar = () => {
   const wallet = useMangoStore((s) => s.wallet.current)
   const [showMenu, setShowMenu] = useState(false)
   const [isCopied, setIsCopied] = useState(false)
+  const [savedProviderUrl] = useLocalStorageState(
+    'walletProvider',
+    DEFAULT_PROVIDER.url
+  )
 
   useEffect(() => {
     if (isCopied) {
@@ -84,39 +94,66 @@ const TopBar = () => {
               <ThemeSwitch />
               <div className="hidden sm:ml-4 sm:block">
                 {connected && wallet?.publicKey ? (
-                  <DropMenu
+                  <Menu>
-                    options={WALLET_OPTIONS}
+                    {({ open }) => (
-                    onChange={(option) => handleWalletMenu(option)}
+                      <div className="relative">
-                    value={''}
+                        <Menu.Button className="w-48 h-11 pl-2 pr-2.5 border border-th-primary hover:border-th-fgd-1 focus:outline-none rounded-md text-th-primary hover:text-th-fgd-1">
-                    button={
+                          <div className="flex flex-row items-center justify-between">
-                      <div className="flex flex-row items-center justify-center">
+                            <div className="flex items-center">
-                        <WalletIcon className="w-5 h-5 mr-2 fill-current" />
+                              <WalletIcon className="w-5 h-5 mr-2 fill-current" />
-                        <Code
+                              <Code className="p-1 text-th-fgd-3 font-light">
-                          className={`text-xs p-1 text-th-fgd-1 font-extralight`}
+                                {isCopied
-                        >
+                                  ? 'Copied!'
-                          {isCopied
+                                  : wallet.publicKey.toString().substr(0, 5) +
-                            ? 'Copied!'
+                                    '...' +
-                            : wallet.publicKey.toString().substr(0, 5) +
+                                    wallet.publicKey.toString().substr(-5)}
-                              '...' +
+                              </Code>
-                              wallet.publicKey.toString().substr(-5)}
+                            </div>
-                        </Code>
+                            {open ? (
+                              <ChevronUpIcon className="h-5 w-5" />
+                            ) : (
+                              <ChevronDownIcon className="h-5 w-5" />
+                            )}
+                          </div>
+                        </Menu.Button>
+                        <Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-48">
+                          {WALLET_OPTIONS.map(({ name, icon }) => (
+                            <Menu.Item key={name}>
+                              <button
+                                className="flex flex-row items-center justify-between w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer tracking-wider"
+                                onClick={() => handleWalletMenu(name)}
+                              >
+                                <div className="flex">
+                                  <div className="w-5 h-5 mr-2">{icon}</div>
+                                  {name}
+                                </div>
+                              </button>
+                            </Menu.Item>
+                          ))}
+                        </Menu.Items>
                       </div>
-                    }
+                    )}
-                    buttonClassName="w-44 h-10 border border-th-primary hover:border-th-fgd-1 rounded-md text-th-primary hover:text-th-fgd-1"
+                  </Menu>
-                  />
                 ) : (
-                  <div className="flex">
+                  <div className="flex justify-between border border-th-primary rounded-md h-11 w-48">
                     <button
                       onClick={handleConnectDisconnect}
-                      className="border border-th-primary hover:border-th-fgd-1 rounded-md py-2 w-44  text-th-primary hover:text-th-fgd-1 font-semibold text-bas"
+                      className="text-th-primary hover:text-th-fgd-1 focus:outline-none font-semibold"
                     >
-                      <div className="flex flex-row items-center justify-center">
+                      <div className="flex flex-row items-center px-2 justify-center h-full rounded-l hover:bg-th-primary hover:text-th-fgd-1">
-                        <WalletIcon className="w-5 h-5 mr-2 fill-current" />
+                        <WalletIcon className="w-5 h-5 mr-3 fill-current" />
-                        Connect Wallet
+                        <div>
+                          Connect Wallet
+                          <div className="text-xxs font-normal text-th-fgd-1 text-left leading-3">
+                            {WALLET_PROVIDERS.filter(
+                              (p) => p.url === savedProviderUrl
+                            ).map(({ name }) => name)}
+                          </div>
+                        </div>
                       </div>
                     </button>
                     {!connected && (
-                      <div className="relative h-full ml-2">
+                      <div className="relative h-full">
                         <WalletSelect />
                       </div>
                     )}

components/UiLock.tsx

@@ -15,7 +15,7 @@ const UiLock = ({ className = '' }) => {
     <div className={`flex relative ${className}`}>
       <button
         onClick={handleClick}
-        className="w-10 h-10 flex items-center justify-center hover:text-th-primary rounded-mdbg-transparent rounded hover:text-th-primary"
+        className="w-10 h-10 flex items-center justify-center hover:text-th-primary rounded-mdbg-transparent rounded hover:text-th-primary focus:outline-none"
       >
         {uiLocked ? (
           <LockClosedIcon className="w-5 h-5" />

components/WalletSelect.tsx

@@ -1,5 +1,9 @@
-import { Menu, Transition } from '@headlessui/react'
+import { Menu } from '@headlessui/react'
-import { DotsHorizontalIcon, CheckCircleIcon } from '@heroicons/react/outline'
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CheckCircleIcon,
+} from '@heroicons/react/outline'
 import useMangoStore from '../stores/useMangoStore'
 import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
 import useLocalStorageState from '../hooks/useLocalStorageState'
@@ -21,37 +25,31 @@ export default function WalletSelect() {
     <Menu>
       {({ open }) => (
         <>
-          <Menu.Button className="p-2 h-full rounded focus:outline-none text-th-primary hover:text-th-fgd-1 hover:bg-th-primary cursor-pointer">
+          <Menu.Button className="px-2.5 flex justify-center items-center h-full rounded-r focus:outline-none text-th-primary hover:text-th-fgd-1 hover:bg-th-primary cursor-pointer">
-            <DotsHorizontalIcon className="h-5 w-5" />
+            {open ? (
+              <ChevronUpIcon className="h-5 w-5" />
+            ) : (
+              <ChevronDownIcon className="h-5 w-5" />
+            )}
           </Menu.Button>
-          <Transition
+          <Menu.Items className="z-20 p-1 absolute right-0 top-11 bg-th-bkg-1 divide-y divide-th-bkg-3 shadow-lg outline-none rounded-md w-48">
-            show={open}
+            {WALLET_PROVIDERS.map(({ name, url, icon }) => (
-            enter="transition ease-out duration-100"
+              <Menu.Item key={name}>
-            enterFrom="transform opacity-0 scale-95"
+                <button
-            enterTo="transform opacity-100 scale-100"
+                  className="flex flex-row items-center justify-between w-full p-2 hover:bg-th-bkg-2 hover:cursor-pointer tracking-wider"
-            leave="transition ease-in duration-75"
+                  onClick={() => handleSelectProvider(url)}
-            leaveFrom="transform opacity-100 scale-100"
+                >
-            leaveTo="transform opacity-0 scale-95"
+                  <div className="flex">
-          >
+                    <img src={icon} className="w-5 h-5 mr-2" />
-            <Menu.Items
-              static
-              className="z-40 absolute right-0 w-48 mt-2 origin-top-right border border-th-primary bg-th-bkg-2 divide-y divide-th-fgd-1 rounded-md shadow-lg outline-none"
-            >
-              {WALLET_PROVIDERS.map(({ name, url }) => (
-                <Menu.Item key={name}>
-                  <button
-                    className="p-4 w-full text-left flex items-center hover:text-th-primary"
-                    onClick={() => handleSelectProvider(url)}
-                  >
-                    {savedProviderUrl === url ? (
-                      <CheckCircleIcon className="h-4 w-4 mr-2" />
-                    ) : null}{' '}
                     {name}
-                  </button>
+                  </div>
-                </Menu.Item>
+                  {savedProviderUrl === url ? (
-              ))}
+                    <CheckCircleIcon className="h-4 w-4 text-th-green" />
-            </Menu.Items>
+                  ) : null}{' '}
-          </Transition>
+                </button>
+              </Menu.Item>
+            ))}
+          </Menu.Items>
         </>
       )}
     </Menu>

styles/index.css

@@ -45,10 +45,6 @@ button {
   transition: all 0.25s ease;
 }
 
-button:focus {
-  outline: none;
-}
-
 .TVChartContainer {
   height: 100%;
   width: 100%;

tailwind.config.js

@@ -94,6 +94,20 @@ module.exports = {
         'th-green': 'var(--green)',
       },
     },
+    fontSize: {
+      xxs: '.6rem',
+      // 'sm': '.875rem',
+      // 'tiny': '.875rem',
+      //  'base': '1rem',
+      //  'lg': '1.125rem',
+      //  'xl': '1.25rem',
+      //  '2xl': '1.5rem',
+      // '3xl': '1.875rem',
+      // '4xl': '2.25rem',
+      //  '5xl': '3rem',
+      //  '6xl': '4rem',
+      // '7xl': '5rem',
+    },
   },
   variants: {
     extend: {