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

2021-04-14 21:57:51 -04:00 · 2021-04-14 21:57:51 -04:00 · b60102848b
parent a674ff74d3 a14ca0b047
commit b60102848b
7 changed files with 108 additions and 63 deletions
--- a/components/DropMenu.jsx
+++ b/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}>
--- a/components/ThemeSwitch.jsx
+++ b/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}
--- a/components/TopBar.tsx
+++ b/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
-                    options={WALLET_OPTIONS}
-                    onChange={(option) => handleWalletMenu(option)}
-                    value={''}
-                    button={
-                      <div className="flex flex-row items-center justify-center">
-                        <WalletIcon className="w-5 h-5 mr-2 fill-current" />
-                        <Code
-                          className={`text-xs p-1 text-th-fgd-1 font-extralight`}
-                        >
-                          {isCopied
-                            ? 'Copied!'
-                            : wallet.publicKey.toString().substr(0, 5) +
-                              '...' +
-                              wallet.publicKey.toString().substr(-5)}
-                        </Code>
+                  <Menu>
+                    {({ open }) => (
+                      <div className="relative">
+                        <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">
+                          <div className="flex flex-row items-center justify-between">
+                            <div className="flex items-center">
+                              <WalletIcon className="w-5 h-5 mr-2 fill-current" />
+                              <Code className="p-1 text-th-fgd-3 font-light">
+                                {isCopied
+                                  ? 'Copied!'
+                                  : wallet.publicKey.toString().substr(0, 5) +
+                                    '...' +
+                                    wallet.publicKey.toString().substr(-5)}
+                              </Code>
+                            </div>
+                            {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">
-                        <WalletIcon className="w-5 h-5 mr-2 fill-current" />
-                        Connect Wallet
+                      <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-3 fill-current" />
+                        <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>
                    )}
--- a/components/UiLock.tsx
+++ b/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" />
--- a/components/WalletSelect.tsx
+++ b/components/WalletSelect.tsx
@ -1,5 +1,9 @@
-import { Menu, Transition } from '@headlessui/react'
-import { DotsHorizontalIcon, CheckCircleIcon } from '@heroicons/react/outline'
+import { Menu } from '@headlessui/react'
+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">
-            <DotsHorizontalIcon className="h-5 w-5" />
+          <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">
+            {open ? (
+              <ChevronUpIcon className="h-5 w-5" />
+            ) : (
+              <ChevronDownIcon className="h-5 w-5" />
+            )}
          </Menu.Button>
-          <Transition
-            show={open}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <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}{' '}
+          <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_PROVIDERS.map(({ name, url, 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={() => handleSelectProvider(url)}
+                >
+                  <div className="flex">
+                    <img src={icon} className="w-5 h-5 mr-2" />
                    {name}
-                  </button>
-                </Menu.Item>
-              ))}
-            </Menu.Items>
-          </Transition>
+                  </div>
+                  {savedProviderUrl === url ? (
+                    <CheckCircleIcon className="h-4 w-4 text-th-green" />
+                  ) : null}{' '}
+                </button>
+              </Menu.Item>
+            ))}
+          </Menu.Items>
        </>
      )}
    </Menu>
--- a/styles/index.css
+++ b/styles/index.css
@ -45,10 +45,6 @@ button {
  transition: all 0.25s ease;
 }

-button:focus {
-  outline: none;
-}
-
 .TVChartContainer {
  height: 100%;
  width: 100%;
--- a/tailwind.config.js
+++ b/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: {