From f6938720bed75c49ff49e180348cc096744b2451 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Mon, 19 Apr 2021 11:58:16 +1000
Subject: [PATCH] connect wallet button to seperate componenet and secondary
 connect wallet button styling

---
 components/ConnectWalletButton.tsx | 44 ++++++++++++++++++++++++++++++
 components/TopBar.tsx              | 38 ++------------------------
 components/TradeForm.tsx           | 26 ++++++++++++------
 components/WalletIcon.jsx          | 25 -----------------
 components/WalletSelect.tsx        | 10 +++++--
 5 files changed, 71 insertions(+), 72 deletions(-)
 create mode 100644 components/ConnectWalletButton.tsx
 delete mode 100644 components/WalletIcon.jsx

diff --git a/components/ConnectWalletButton.tsx b/components/ConnectWalletButton.tsx
new file mode 100644
index 0000000..16fb5a9
--- /dev/null
+++ b/components/ConnectWalletButton.tsx
@@ -0,0 +1,44 @@
+import styled from '@emotion/styled'
+import useMangoStore from '../stores/useMangoStore'
+import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
+import useLocalStorageState from '../hooks/useLocalStorageState'
+import WalletSelect from './WalletSelect'
+import { WalletIcon } from './icons'
+
+const StyledWalletTypeLabel = styled.div`
+  font-size: 0.6rem;
+`
+
+const ConnectWalletButton = () => {
+  const wallet = useMangoStore((s) => s.wallet.current)
+  const [savedProviderUrl] = useLocalStorageState(
+    'walletProvider',
+    DEFAULT_PROVIDER.url
+  )
+
+  return (
+    <div className="flex justify-between border border-th-primary rounded-md h-11 w-48">
+      <button
+        onClick={() => wallet.connect()}
+        className="text-th-primary hover:text-th-fgd-1 focus:outline-none"
+      >
+        <div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition hover:bg-th-primary hover:text-th-fgd-1">
+          <WalletIcon className="w-5 h-5 mr-3 fill-current" />
+          <div>
+            <span className="whitespace-nowrap">Connect Wallet</span>
+            <StyledWalletTypeLabel className="font-normal text-th-fgd-1 text-left leading-3">
+              {WALLET_PROVIDERS.filter((p) => p.url === savedProviderUrl).map(
+                ({ name }) => name
+              )}
+            </StyledWalletTypeLabel>
+          </div>
+        </div>
+      </button>
+      <div className="relative h-full">
+        <WalletSelect isPrimary />
+      </div>
+    </div>
+  )
+}
+
+export default ConnectWalletButton
diff --git a/components/TopBar.tsx b/components/TopBar.tsx
index 631583f..57bee27 100644
--- a/components/TopBar.tsx
+++ b/components/TopBar.tsx
@@ -14,10 +14,8 @@ import ThemeSwitch from './ThemeSwitch'
 import { WalletIcon } from './icons'
 import UiLock from './UiLock'
 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'
+import ConnectWalletButton from './ConnectWalletButton'
 
 const Code = styled.code`
   border: 1px solid hsla(0, 0%, 39.2%, 0.2);
@@ -26,20 +24,12 @@ const Code = styled.code`
   font-size: 13px;
 `
 
-const StyledWalletTypeLabel = styled.div`
-  font-size: 0.6rem;
-`
-
 const TopBar = () => {
   const { asPath } = useRouter()
   const connected = useMangoStore((s) => s.wallet.connected)
   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) {
@@ -132,31 +122,7 @@ const TopBar = () => {
                     )}
                   </Menu>
                 ) : (
-                  <div className="flex justify-between border border-th-primary rounded-md h-11 w-48">
-                    <button
-                      onClick={() => wallet.connect()}
-                      className="text-th-primary hover:text-th-fgd-1 focus:outline-none font-semibold"
-                    >
-                      <div className="flex flex-row items-center px-2 justify-center h-full rounded-l default-transition hover:bg-th-primary hover:text-th-fgd-1">
-                        <WalletIcon className="w-5 h-5 mr-3 fill-current" />
-                        <div>
-                          <span className="whitespace-nowrap">
-                            Connect Wallet
-                          </span>
-                          <StyledWalletTypeLabel className="font-normal text-th-fgd-1 text-left leading-3">
-                            {WALLET_PROVIDERS.filter(
-                              (p) => p.url === savedProviderUrl
-                            ).map(({ name }) => name)}
-                          </StyledWalletTypeLabel>
-                        </div>
-                      </div>
-                    </button>
-                    {!connected && (
-                      <div className="relative h-full">
-                        <WalletSelect />
-                      </div>
-                    )}
-                  </div>
+                  <ConnectWalletButton />
                 )}
               </div>
             </div>
diff --git a/components/TradeForm.tsx b/components/TradeForm.tsx
index a4b8fc8..e1fd97c 100644
--- a/components/TradeForm.tsx
+++ b/components/TradeForm.tsx
@@ -15,6 +15,8 @@ import Button from './Button'
 import TradeType from './TradeType'
 import Input from './Input'
 import Switch from './Switch'
+import { WalletIcon } from './icons'
+import WalletSelect from './WalletSelect'
 
 const StyledRightInput = styled(Input)`
   border-left: 1px solid transparent;
@@ -304,14 +306,14 @@ export default function TradeForm() {
           </div>
         ) : null}
       </div>
-      <div className={`flex mt-4`}>
+      <div className={`flex pt-6`}>
         {ipAllowed ? (
           connected ? (
             side === 'buy' ? (
               <Button
                 disabled={disabledTradeButton}
                 onClick={onsubmit}
-                className={`rounded text-lg ${
+                className={`rounded ${
                   !disabledTradeButton &&
                   'border-th-green hover:border-th-green-dark'
                 } text-th-green hover:text-th-fgd-1 hover:bg-th-green-dark flex-grow`}
@@ -322,7 +324,7 @@ export default function TradeForm() {
               <Button
                 disabled={disabledTradeButton}
                 onClick={onSubmit}
-                className={`rounded text-lg ${
+                className={`rounded ${
                   !disabledTradeButton &&
                   'border-th-red hover:border-th-red-dark'
                 } text-th-red hover:text-th-fgd-1 hover:bg-th-red-dark flex-grow`}
@@ -331,12 +333,18 @@ export default function TradeForm() {
               </Button>
             )
           ) : (
-            <Button
-              onClick={() => wallet.connect()}
-              className={`rounded text-lg flex-grow`}
-            >
-              Connect Wallet
-            </Button>
+            <div className="flex justify-between border border-th-fgd-4 rounded-md w-full">
+              <Button
+                onClick={() => wallet.connect()}
+                className={`rounded-r-none flex flex-grow items-center justify-center border-none`}
+              >
+                <WalletIcon className="fill-current h-4 w-4 mr-2" />
+                Connect Wallet
+              </Button>
+              <div className="relative h-full">
+                <WalletSelect />
+              </div>
+            </div>
           )
         ) : (
           <Button disabled className="flex-grow">
diff --git a/components/WalletIcon.jsx b/components/WalletIcon.jsx
deleted file mode 100644
index d14576f..0000000
--- a/components/WalletIcon.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-const MangoIcon = ({ className }) => {
-  return (
-    <svg
-      className={className}
-      width="20"
-      height="17"
-      viewBox="0 0 20 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M14.625 8.24561C13.7276 8.24561 13 8.97325 13 9.87061C13 10.768 13.7276 11.4956 14.625 11.4956C15.5224 11.4956 16.25 10.768 16.25 9.87061C16.25 8.97325 15.5224 8.24561 14.625 8.24561ZM14 9.87061C14 9.52554 14.2799 9.24561 14.625 9.24561C14.9701 9.24561 15.25 9.52554 15.25 9.87061C15.25 10.2157 14.9701 10.4956 14.625 10.4956C14.2799 10.4956 14 10.2157 14 9.87061Z"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.25 0.25C1.59301 0.25 0.25 1.59301 0.25 3.25L0.250676 13.8083C0.250702 15.4652 1.59371 16.8083 3.25068 16.8083H17.2147C18.5735 16.8083 19.7507 15.755 19.7507 14.3708V5.37076C19.7507 4.51126 19.2968 3.77937 18.6275 3.34799C18.6257 2.86554 18.5949 2.24606 18.3863 1.7108C18.2324 1.31604 17.973 0.930835 17.5462 0.652726C17.1244 0.377893 16.6042 0.25 16 0.25H3.25ZM17.6434 4.51627C17.6217 4.50923 17.6004 4.50122 17.5796 4.4923C17.4681 4.45439 17.3457 4.43326 17.2147 4.43326H4.81318C4.39896 4.43326 4.06318 4.09747 4.06318 3.68326C4.06318 3.26904 4.39896 2.93326 4.81318 2.93326H17.1143C17.0993 2.67796 17.0651 2.45157 16.9887 2.2555C16.9238 2.08899 16.8395 1.98262 16.7273 1.90947C16.61 1.83305 16.3958 1.75 16 1.75H3.25C2.42146 1.75 1.75003 2.42141 1.75 3.24995L1.75068 13.8082C1.75068 14.6368 2.42212 15.3083 3.25068 15.3083H17.2147C17.8262 15.3083 18.2507 14.8477 18.2507 14.3708V5.37076C18.2507 5.01586 18.0156 4.67002 17.6434 4.51627Z"
-      />
-    </svg>
-  )
-}
-
-export default MangoIcon
diff --git a/components/WalletSelect.tsx b/components/WalletSelect.tsx
index 2ac59cc..acd4765 100644
--- a/components/WalletSelect.tsx
+++ b/components/WalletSelect.tsx
@@ -8,7 +8,7 @@ import useMangoStore from '../stores/useMangoStore'
 import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
 import useLocalStorageState from '../hooks/useLocalStorageState'
 
-export default function WalletSelect() {
+export default function WalletSelect({ isPrimary }) {
   const setMangoStore = useMangoStore((s) => s.set)
   const [savedProviderUrl] = useLocalStorageState(
     'walletProvider',
@@ -25,7 +25,13 @@ export default function WalletSelect() {
     <Menu>
       {({ open }) => (
         <>
-          <Menu.Button className="px-3 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">
+          <Menu.Button
+            className={`flex justify-center items-center h-full rounded-r focus:outline-none text-th-primary hover:text-th-fgd-1 ${
+              isPrimary
+                ? 'px-3 hover:bg-th-primary'
+                : 'px-2 hover:bg-th-bkg-3 border-l border-th-fgd-4'
+            } cursor-pointer`}
+          >
             {open ? (
               <ChevronUpIcon className="h-5 w-5" />
             ) : (