add priority fee to settings

components/settings/RpcSettings.tsx

@@ -1,11 +1,12 @@
 import ButtonGroup from '@components/forms/ButtonGroup'
 import Input from '@components/forms/Input'
 import Button from '@components/shared/Button'
+import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { useTranslation } from 'next-i18next'
-import { ChangeEvent, useEffect, useMemo, useState } from 'react'
-import { RPC_PROVIDER_KEY } from 'utils/constants'
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
+import { PRIORITY_FEE_KEY, RPC_PROVIDER_KEY } from 'utils/constants'
 
 const RPC_URLS = [
   {
@@ -19,15 +20,26 @@ const RPC_URLS = [
   { label: 'Custom', value: '' },
 ]
 
+export const PRIORITY_FEES = [
+  { label: 'None', value: 0 },
+  { label: 'Low', value: 50000 },
+  { label: 'High', value: 100000 },
+]
+
 const RpcSettings = () => {
   const { t } = useTranslation('settings')
   const actions = mangoStore.getState().actions
+  const { wallet } = useWallet()
   const [customUrl, setCustomUrl] = useState('')
   const [showCustomForm, setShowCustomForm] = useState(false)
   const [rpcEndpointProvider, setRpcEndpointProvider] = useLocalStorageState(
     RPC_PROVIDER_KEY,
     RPC_URLS[0].value
   )
+  const [storedPriorityFee, setStoredPriorityFee] = useLocalStorageState(
+    PRIORITY_FEE_KEY,
+    PRIORITY_FEES[2].value
+  )
 
   const rpcEndpoint = useMemo(() => {
     return (
@@ -38,6 +50,13 @@ const RpcSettings = () => {
     )
   }, [rpcEndpointProvider])
 
+  const priorityFee = useMemo(() => {
+    return (
+      PRIORITY_FEES.find((node) => node.value === storedPriorityFee) ||
+      PRIORITY_FEES[2]
+    )
+  }, [storedPriorityFee])
+
   const handleSetEndpointProvider = (provider: string) => {
     const endpointProvider = RPC_URLS.find(
       (node) => node.label === provider
@@ -49,6 +68,17 @@ const RpcSettings = () => {
     }
   }
 
+  const handlePriorityFee = useCallback(
+    (label: string) => {
+      const fee = PRIORITY_FEES.find((fee) => fee.label === label)
+      setStoredPriorityFee(fee?.value)
+      if (wallet) {
+        actions.connectMangoClientWithWallet(wallet)
+      }
+    },
+    [setStoredPriorityFee, actions, wallet]
+  )
+
   useEffect(() => {
     if (rpcEndpoint.label === 'Custom') {
       setShowCustomForm(true)
@@ -99,6 +129,40 @@ const RpcSettings = () => {
           ) : null}
         </div>
       </div>
+      <div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
+        <p className="mb-2 md:mb-0">Priority Fee</p>
+        <div className="w-full min-w-[160px] md:w-auto md:pl-4">
+          <ButtonGroup
+            activeValue={priorityFee.label}
+            onChange={(v) => handlePriorityFee(v)}
+            values={PRIORITY_FEES.map((val) => val.label)}
+          />
+          {/* {showCustomForm ? (
+            <div className="mt-2">
+              <div className="flex space-x-2">
+                <Input
+                  type="text"
+                  name="url"
+                  id="url"
+                  className="!h-10"
+                  placeholder={t('rpc-url')}
+                  value={customUrl}
+                  onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                    setCustomUrl(e.target.value)
+                  }
+                />
+                <Button
+                  className="h-12"
+                  disabled={!customUrl}
+                  onClick={handleSaveCustomEndpoint}
+                >
+                  {t('save')}
+                </Button>
+              </div>
+            </div>
+          ) : null} */}
+        </div>
+      </div>
     </>
   )
 }

store/mangoStore.ts

@@ -36,6 +36,7 @@ import {
   MANGO_DATA_API_URL,
   OUTPUT_TOKEN_DEFAULT,
   PAGINATION_PAGE_LENGTH,
+  PRIORITY_FEE_KEY,
   RPC_PROVIDER_KEY,
 } from '../utils/constants'
 import {
@@ -47,6 +48,7 @@ import {
 import spotBalancesUpdater from './spotBalancesUpdater'
 import { PerpMarket } from '@blockworks-foundation/mango-v4/'
 import perpPositionsUpdater from './perpPositionsUpdater'
+import { PRIORITY_FEES } from '@components/settings/RpcSettings'
 
 const GROUP = new PublicKey('78b8f4cGCwmZ9ysPFMWLaLTkkaYnUjwMJYStWe5RTSSX')
 
@@ -74,10 +76,13 @@ export const CLUSTER: 'mainnet-beta' | 'devnet' = 'mainnet-beta'
 const ENDPOINT = ENDPOINTS.find((e) => e.name === CLUSTER) || ENDPOINTS[0]
 const emptyWallet = new EmptyWallet(Keypair.generate())
 
-const initMangoClient = (provider: AnchorProvider): MangoClient => {
+const initMangoClient = (
+  provider: AnchorProvider,
+  opts = { prioritizationFee: PRIORITY_FEES[2].value }
+): MangoClient => {
   return MangoClient.connect(provider, CLUSTER, MANGO_V4_ID[CLUSTER], {
     // blockhashCommitment: 'confirmed',
-    prioritizationFee: 50000,
+    prioritizationFee: opts.prioritizationFee,
     idsSource: 'get-program-accounts',
     postSendTxCallback: ({ txid }: { txid: string }) => {
       notify({
@@ -936,7 +941,10 @@ const mangoStore = create<MangoStore>()(
               options
             )
             provider.opts.skipPreflight = true
-            const client = initMangoClient(provider)
+            const prioritizationFee = Number(
+              localStorage.getItem(PRIORITY_FEE_KEY)
+            )
+            const client = initMangoClient(provider, { prioritizationFee })
 
             set((s) => {
               s.client = client

utils/constants.ts

@@ -43,6 +43,8 @@ export const THEME_KEY = 'theme-0.1'
 
 export const RPC_PROVIDER_KEY = 'rpcProviderKey-0.4'
 
+export const PRIORITY_FEE_KEY = 'priorityFeeKey-0.1'
+
 // Unused
 export const PROFILE_CATEGORIES = [
   'borrower',

utils/tradeForm.ts

@@ -18,7 +18,9 @@ export const calculateLimitPriceForMarketOrder = (
   }
 
   if (!selectedOrder) {
-    throw new Error('Unable to calculate market order. Please retry.')
+    throw new Error(
+      'Unable to place market order for this order size. Please retry.'
+    )
   }
 
   if (side === 'buy') {