From a3e497f410b003861b86e0bf3d2db8b670a1257f Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Thu, 15 Apr 2021 09:47:13 +1000
Subject: [PATCH] wallet selection

---
 components/DropMenu.jsx     |  2 +-
 components/TopBar.tsx       | 24 ++++++++++++++++++------
 components/WalletSelect.tsx | 27 +++++++++++++++++++--------
 tailwind.config.js          | 14 ++++++++++++++
 4 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/components/DropMenu.jsx b/components/DropMenu.jsx
index f45771c2..59893bd6 100644
--- 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}>
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index d0b24555..9f48d098 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -14,6 +14,8 @@ import UiLock from './UiLock'
 import DropMenu from './DropMenu'
 import { useRouter } from 'next/router'
 import WalletSelect from './WalletSelect'
+import useMangoStore from '../stores/useMangoStore'
+import { WALLET_PROVIDERS } from '../hooks/useWallet'
 
 const Code = styled.code`
   border: 1px solid hsla(0, 0%, 39.2%, 0.2);
@@ -26,6 +28,9 @@ const TopBar = () => {
   const { connected, wallet } = useWallet()
   const [showMenu, setShowMenu] = useState(false)
   const [isCopied, setIsCopied] = useState(false)
+  const { providerUrl } = useMangoStore((s) => s.wallet)
+
+  console.log('provider', providerUrl)
 
   useEffect(() => {
     if (isCopied) {
@@ -104,18 +109,25 @@ const TopBar = () => {
                     buttonClassName="w-44 h-10 border border-th-primary hover:border-th-fgd-1 rounded-md text-th-primary hover:text-th-fgd-1"
                   />
                 ) : (
-                  <div className="flex">
+                  <div className="flex border border-th-primary rounded-md h-11">
                     <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 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 justify-center px-3 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 === providerUrl
+                            ).map(({ name }) => name)}
+                          </div>
+                        </div>
                       </div>
                     </button>
                     {!connected && (
-                      <div className="relative h-full ml-2">
+                      <div className="relative h-full">
                         <WalletSelect />
                       </div>
                     )}
diff --git a/components/WalletSelect.tsx b/components/WalletSelect.tsx
index 1211f7ce..993a84ee 100644
--- 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 {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CheckCircleIcon,
+} from '@heroicons/react/outline'
 import useMangoStore from '../stores/useMangoStore'
 import { WALLET_PROVIDERS } from '../hooks/useWallet'
 
@@ -17,8 +21,12 @@ 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="p-2 w-10 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}
@@ -31,18 +39,21 @@ export default function WalletSelect() {
           >
             <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"
+              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 }) => (
+              {WALLET_PROVIDERS.map(({ name, url, icon }) => (
                 <Menu.Item key={name}>
                   <button
-                    className="p-4 w-full text-left flex items-center hover:text-th-primary"
+                    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}
+                    </div>
                     {providerUrl === url ? (
-                      <CheckCircleIcon className="h-4 w-4 mr-2" />
+                      <CheckCircleIcon className="h-4 w-4 text-th-green" />
                     ) : null}{' '}
-                    {name}
                   </button>
                 </Menu.Item>
               ))}
diff --git a/tailwind.config.js b/tailwind.config.js
index cf2ca40a..46116e07 100644
--- 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: {