fixes

components/forms/Input.tsx

@@ -36,9 +36,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       <input
         className={`${className} h-12 w-full flex-1 rounded-md border bg-th-bkg-1 px-3 text-base
           text-th-fgd-1 ${
-            error ? 'border-th-red' : 'border-th-fgd-4'
-          } default-transition hover:border-th-fgd-3 
-          focus:border-th-fgd-3 focus:outline-none 
+            error ? 'border-th-red' : 'border-th-bkg-4'
+          } hover:border-th-fgd-4 
+          focus:outline-none 
           ${
             disabled
               ? 'cursor-not-allowed bg-th-bkg-3 text-th-fgd-3 hover:border-th-fgd-3'
@@ -62,4 +62,5 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   )
 })
 
+Input.displayName = 'Input'
 export default Input

components/forms/Switch.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactNode } from 'react'
+import { FunctionComponent, ReactNode, memo } from 'react'
 
 interface SwitchProps {
   checked: boolean
@@ -44,4 +44,4 @@ const Switch: FunctionComponent<SwitchProps> = ({
   )
 }
 
-export default Switch
+export default memo(Switch)

components/shared/Notification.tsx

@@ -5,15 +5,15 @@ import {
   InformationCircleIcon,
   XCircleIcon,
 } from '@heroicons/react/outline'
-import useMangoStore, { CLIENT_TX_TIMEOUT, CLUSTER } from '../../store/state'
+import mangoStore, { CLIENT_TX_TIMEOUT, CLUSTER } from '../../store/state'
 import { Notification, notify } from '../../utils/notifications'
 import Loading from './Loading'
 import { Transition } from '@headlessui/react'
 import { TokenInstructions } from '@project-serum/serum'
 
 const NotificationList = () => {
-  const notifications = useMangoStore((s) => s.notifications)
-  const walletTokens = useMangoStore((s) => s.wallet.tokens)
+  const notifications = mangoStore((s) => s.notifications)
+  const walletTokens = mangoStore((s) => s.wallet.tokens)
   const notEnoughSoLMessage = 'Not enough SOL'
 
   // if a notification is shown with {"InstructionError":[0,{"Custom":1}]} then
@@ -60,7 +60,7 @@ const NotificationList = () => {
 }
 
 const Notification = ({ notification }: { notification: Notification }) => {
-  const setMangoStore = useMangoStore((s) => s.set)
+  const setMangoStore = mangoStore((s) => s.set)
   const { type, title, description, txid, show, id } = notification
 
   // overwrite the title if of the error message if it is a time out error

components/swap/JupiterRoutes.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useState } from 'react'
+import React, { Dispatch, SetStateAction, useState } from 'react'
 import { TransactionInstruction, PublicKey } from '@solana/web3.js'
 import { toUiDecimals } from '@blockworks-foundation/mango-v4'
 import { Jupiter, RouteInfo } from '@jup-ag/core'
@@ -119,4 +119,4 @@ const JupiterRoutes = ({
   ) : null
 }
 
-export default JupiterRoutes
+export default React.memo(JupiterRoutes)

components/swap/SelectToken.tsx

@@ -173,7 +173,11 @@ const SelectToken = ({
       <div className="my-2 border-t border-th-bkg-4"></div>
       <div className="overflow-auto">
         {sortedTokens.map((token) => (
-          <TokenItem token={token} onSubmit={onTokenSelect} />
+          <TokenItem
+            key={token.address}
+            token={token}
+            onSubmit={onTokenSelect}
+          />
         ))}
       </div>
     </>

components/swap/Swap.tsx

@@ -36,16 +36,17 @@ const Swap = () => {
   const [inputToken, setInputToken] = useState('SOL')
   const [outputToken, setOutputToken] = useState('USDC')
   const [submitting, setSubmitting] = useState(false)
-  const [animateSwtichArrow, setAnimateSwitchArrow] = useState(0)
+  const [animateSwitchArrow, setAnimateSwitchArrow] = useState(0)
   const [showTokenSelect, setShowTokenSelect] = useState('')
   const [useMargin, setUseMargin] = useState(true)
   const [sizePercentage, setSizePercentage] = useState('')
   const [showConfirm, setShowConfirm] = useState(false)
   const [slippage, setSlippage] = useState(0.1)
-  const debouncedAmountIn = useDebounce(amountIn, 400)
+
   const set = mangoStore.getState().set
   const tokens = mangoStore((s) => s.jupiterTokens)
   const connected = mangoStore((s) => s.connected)
+  const debouncedAmountIn = useDebounce(amountIn, 500)
 
   useEffect(() => {
     const connection = mangoStore.getState().connection
@@ -54,7 +55,7 @@ const Swap = () => {
         connection,
         cluster: CLUSTER,
         // platformFeeAndAccounts:  NO_PLATFORM_FEE,
-        routeCacheDuration: 5_000, // Will not refetch data on computeRoutes for up to 10 seconds
+        routeCacheDuration: 10_000, // Will not refetch data on computeRoutes for up to 10 seconds
       })
       setJupiter(jupiter)
     }
@@ -143,7 +144,7 @@ const Swap = () => {
     setInputToken(outputToken)
     setOutputToken(inputToken)
 
-    setAnimateSwitchArrow(animateSwtichArrow + 1)
+    setAnimateSwitchArrow(animateSwitchArrow + 1)
   }
 
   const handleSizePercentage = (percentage: string) => {
@@ -203,13 +204,12 @@ const Swap = () => {
   return (
     <ContentBox showBackground className="relative overflow-hidden">
       <Transition
-        appear={true}
         className="thin-scroll absolute top-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
         show={showConfirm}
-        enter="transition-all ease-in duration-500"
+        enter="transition-all ease-in duration-400"
         enterFrom="transform translate-x-full"
         enterTo="transform translate-x-0"
-        leave="transition-all ease-out duration-500"
+        leave="transition-all ease-out duration-400"
         leaveFrom="transform translate-x-0"
         leaveTo="transform translate-x-full"
       >
@@ -230,13 +230,12 @@ const Swap = () => {
         />
       </Transition>
       <Transition
-        appear={true}
         className="thin-scroll absolute bottom-0 left-0 z-20 h-full overflow-auto bg-th-bkg-2 p-6 pb-0"
         show={!!showTokenSelect}
-        enter="transition-all ease-in duration-500"
+        enter="transition-all ease-in duration-400"
         enterFrom="max-h-0"
         enterTo="max-h-full"
-        leave="transition-all ease-out duration-500"
+        leave="transition-all ease-out duration-400"
         leaveFrom="max-h-full"
         leaveTo="max-h-0"
       >
@@ -266,8 +265,10 @@ const Swap = () => {
           className="no-underline"
           onClick={() => console.log('Set max input amount')}
         >
-          <span className="mr-1 font-normal text-th-fgd-3">{t('max')}</span>
-          <span className="text-th-fgd-1">0</span>
+          <span className="mr-1 font-normal text-th-fgd-4">
+            {t('balance')}:
+          </span>
+          <span className="text-th-fgd-3 underline">0</span>
         </LinkButton>
       </div>
       <div className="mb-3 grid grid-cols-2">
@@ -308,7 +309,7 @@ const Swap = () => {
           <ArrowDownIcon
             className="h-5 w-5"
             style={
-              animateSwtichArrow % 2 == 0
+              animateSwitchArrow % 2 == 0
                 ? { transform: 'rotate(0deg)' }
                 : { transform: 'rotate(360deg)' }
             }