add to swap and trade

components/swap/SwapForm.tsx

@@ -4,7 +4,6 @@ import {
   ArrowDownIcon,
   Cog8ToothIcon,
   ExclamationCircleIcon,
-  LinkIcon,
 } from '@heroicons/react/20/solid'
 import NumberFormat, {
   NumberFormatValues,
@@ -50,6 +49,7 @@ import Tooltip from '@components/shared/Tooltip'
 import { formatCurrencyValue } from 'utils/numbers'
 import Switch from '@components/forms/Switch'
 import MaxAmountButton from '@components/shared/MaxAmountButton'
+import SecondaryConnectButton from '@components/shared/SecondaryConnectButton'
 
 const MAX_DIGITS = 11
 export const withValueLimit = (values: NumberFormatValues): boolean => {
@@ -610,7 +610,7 @@ const SwapFormSubmitButton = ({
   useMargin: boolean
 }) => {
   const { t } = useTranslation('common')
-  const { connected, connect } = useWallet()
+  const { connected } = useWallet()
   const { amount: tokenMax, amountWithBorrow } = useTokenMax(useMargin)
 
   const showInsufficientBalance = useMargin
@@ -624,18 +624,16 @@ const SwapFormSubmitButton = ({
       !amountOut ||
       !selectedRoute)
 
-  const onClick = connected ? () => setShowConfirm(true) : connect
-
   return (
     <>
-      <Button
-        onClick={onClick}
-        className="mt-6 mb-4 flex w-full items-center justify-center text-base"
-        disabled={disabled}
-        size="large"
-      >
-        {connected ? (
-          showInsufficientBalance ? (
+      {connected ? (
+        <Button
+          onClick={() => setShowConfirm(true)}
+          className="mt-6 mb-4 flex w-full items-center justify-center text-base"
+          disabled={disabled}
+          size="large"
+        >
+          {showInsufficientBalance ? (
             <div className="flex items-center">
               <ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
               {t('swap:insufficient-balance', {
@@ -646,14 +644,14 @@ const SwapFormSubmitButton = ({
             <Loading />
           ) : (
             <span>{t('swap:review-swap')}</span>
-          )
-        ) : (
-          <div className="flex items-center">
-            <LinkIcon className="mr-2 h-5 w-5" />
-            {t('connect')}
-          </div>
-        )}
-      </Button>
+          )}
+        </Button>
+      ) : (
+        <SecondaryConnectButton
+          className="mt-6 mb-4 flex w-full items-center justify-center"
+          isLarge
+        />
+      )}
       {selectedRoute === null && amountIn.gt(0) ? (
         <div className="mb-4">
           <InlineNotification type="error" desc={t('swap:no-swap-found')} />

components/trade/AdvancedTradeForm.tsx

@@ -31,7 +31,7 @@ import { notify } from 'utils/notifications'
 import SpotSlider from './SpotSlider'
 import { calculateLimitPriceForMarketOrder } from 'utils/tradeForm'
 import Image from 'next/legacy/image'
-import { LinkIcon, QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
+import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import Loading from '@components/shared/Loading'
 import TabUnderline from '@components/shared/TabUnderline'
 import PerpSlider from './PerpSlider'
@@ -58,6 +58,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import { isMangoError } from 'types'
 import InlineNotification from '@components/shared/InlineNotification'
 import SpotMarketOrderSwapForm from './SpotMarketOrderSwapForm'
+import SecondaryConnectButton from '@components/shared/SecondaryConnectButton'
 
 const set = mangoStore.getState().set
 
@@ -92,7 +93,7 @@ const AdvancedTradeForm = () => {
     SOUND_SETTINGS_KEY,
     INITIAL_SOUND_SETTINGS,
   )
-  const { connected, connect } = useWallet()
+  const { connected } = useWallet()
   const {
     selectedMarket,
     price: oraclePrice,
@@ -477,7 +478,7 @@ const AdvancedTradeForm = () => {
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-    connected ? handlePlaceOrder() : connect()
+    handlePlaceOrder()
   }
 
   const disabled =
@@ -743,49 +744,49 @@ const AdvancedTradeForm = () => {
             </div>
             <div className="mt-6 mb-4 flex px-3 md:px-4">
               {ipAllowed ? (
-                <Button
-                  className={`flex w-full items-center justify-center ${
-                    !connected
-                      ? ''
-                      : tradeForm.side === 'buy'
-                      ? `bg-th-up-dark md:hover:bg-th-up-dark ${
-                          themeData.buttonStyle === 'raised'
-                            ? 'raised-buy-button'
-                            : 'text-white md:hover:brightness-90'
-                        }`
-                      : `bg-th-down-dark md:hover:bg-th-down-dark ${
-                          themeData.buttonStyle === 'raised'
-                            ? 'raised-sell-button'
-                            : 'text-white md:hover:brightness-90'
-                        }`
-                  }`}
-                  disabled={disabled}
-                  size="large"
-                  type="submit"
-                >
-                  {!connected ? (
-                    <div className="flex items-center">
-                      <LinkIcon className="mr-2 h-5 w-5" />
-                      {t('connect')}
-                    </div>
-                  ) : !placingOrder ? (
-                    <span>
-                      {t('trade:place-order', {
-                        side:
-                          tradeForm.side === 'buy'
-                            ? sideNames[0]
-                            : sideNames[1],
-                      })}
-                    </span>
-                  ) : (
-                    <div className="flex items-center space-x-2">
-                      <Loading />
-                      <span className="hidden sm:block">
-                        {t('trade:placing-order')}
+                connected ? (
+                  <Button
+                    className={`flex w-full items-center justify-center ${
+                      tradeForm.side === 'buy'
+                        ? `bg-th-up-dark md:hover:bg-th-up-dark ${
+                            themeData.buttonStyle === 'raised'
+                              ? 'raised-buy-button'
+                              : 'text-white md:hover:brightness-90'
+                          }`
+                        : `bg-th-down-dark md:hover:bg-th-down-dark ${
+                            themeData.buttonStyle === 'raised'
+                              ? 'raised-sell-button'
+                              : 'text-white md:hover:brightness-90'
+                          }`
+                    }`}
+                    disabled={disabled}
+                    size="large"
+                    type="submit"
+                  >
+                    {!placingOrder ? (
+                      <span>
+                        {t('trade:place-order', {
+                          side:
+                            tradeForm.side === 'buy'
+                              ? sideNames[0]
+                              : sideNames[1],
+                        })}
                       </span>
-                    </div>
-                  )}
-                </Button>
+                    ) : (
+                      <div className="flex items-center space-x-2">
+                        <Loading />
+                        <span className="hidden sm:block">
+                          {t('trade:placing-order')}
+                        </span>
+                      </div>
+                    )}
+                  </Button>
+                ) : (
+                  <SecondaryConnectButton
+                    className="flex w-full items-center justify-center"
+                    isLarge
+                  />
+                )
               ) : (
                 <Button disabled className="w-full leading-tight" size="large">
                   {t('country-not-allowed', {